/* Contacto — una interfaz cívica directa, clara y preparada para WPForms. */
.contact-page .civic-direct.is-current {
  color: #149154;
}

.contact-page .civic-direct.is-current::after {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  background: #43b879;
  content: "";
}

.contact-content {
  background: #f3f4ee;
  color: #073f34;
}

.contact-page { scroll-padding-top: 30px; }

.contact-hero {
  display: grid;
  min-height: 720px;
  grid-template-columns: minmax(390px, .88fr) minmax(520px, 1.12fr);
}

.contact-intro {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 68px 7% 54px;
  overflow: hidden;
  background:
    linear-gradient(#ffffff0b 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0b 1px, transparent 1px),
    #073f34;
  background-size: 70px 70px;
  color: white;
}

.contact-intro > p:first-child,
.contact-form-panel header > span,
.contact-location-copy > span,
.contact-routing header > span {
  color: #62e18b;
  font: 500 9px/1 DM Mono, monospace;
  letter-spacing: .13em;
}

.contact-intro h1 {
  position: relative;
  z-index: 1;
  margin: 30px 0 25px;
  color: white;
  font-size: clamp(60px, 6.2vw, 94px);
  line-height: .89;
  letter-spacing: -.07em;
}

.contact-intro h1::after {
  content: '';
  display: inline-block;
  width: .28em;
  height: .28em;
  background: var(--acid);
  border-radius: 50%;
  margin-left: .06em;
  vertical-align: baseline;
  position: relative;
  top: .03em;
  white-space: nowrap;
}

.contact-lead {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 0;
  color: #cce2d8;
  font-size: 14px;
  line-height: 1.7;
}

.contact-channels {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-bottom: 1px solid #ffffff31;
}

.contact-channels a {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 6px 16px;
  padding: 16px 0;
  border-top: 1px solid #ffffff31;
  color: white;
  text-decoration: none;
  transition: padding .2s, color .2s;
}

.contact-channels span {
  grid-column: 1;
  color: #78a797;
  font: 500 7px/1 DM Mono, monospace;
  letter-spacing: .08em;
}

.contact-channels strong {
  grid-column: 1;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-channels b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #62e18b;
  font-weight: 500;
}

.contact-channels a:hover,
.contact-channels a:focus-visible {
  padding-left: 8px;
  color: #62e18b;
}

.contact-orbit {
  position: absolute;
  top: 225px;
  right: -108px;
  display: grid;
  width: 300px;
  height: 300px;
  place-items: center;
  opacity: .28;
}

.contact-orbit i {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #62e18b;
  border-radius: 50%;
}

.contact-orbit i:nth-child(2) { width: 70%; height: 70%; }
.contact-orbit i:nth-child(3) { width: 38%; height: 38%; background: #62e18b; }
.contact-orbit b { position: relative; color: #073f34; font-size: 18px; }

.contact-form-panel {
  padding: 66px 7% 52px;
  background:
    radial-gradient(circle at 92% 8%, #60e18a26 0 105px, transparent 106px),
    #f4f5ef;
}

.contact-form-panel header {
  max-width: 610px;
  padding-bottom: 32px;
  border-bottom: 1px solid #97aca2;
}

.contact-form-panel header > span,
.contact-location-copy > span,
.contact-routing header > span { color: #25995b; }

.contact-form-panel h2 {
  margin: 18px 0 13px;
  color: #073f34;
  font-size: clamp(39px, 4.2vw, 62px);
  line-height: .96;
  letter-spacing: -.06em;
}

.contact-form-panel header p {
  margin: 0;
  color: #60736c;
  font-size: 12px;
  line-height: 1.6;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

.contact-field {
  padding: 25px 0 4px;
  border-bottom: 1px solid #9fb2a9;
}

.contact-field-wide { grid-column: 1 / -1; }

.contact-field label {
  display: block;
  color: #234b3f;
  font: 600 8px/1 DM Mono, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.contact-field label span { color: #299d5d; }

.contact-field input,
.contact-field select,
.contact-field textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #073f34;
  font: 600 14px/1.45 Manrope, sans-serif;
}

.contact-field textarea { min-height: 108px; resize: vertical; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #95a39d; font-weight: 500; }
.contact-field select { cursor: pointer; }

.contact-field:focus-within {
  border-color: #19a558;
  box-shadow: 0 1px 0 #19a558;
}

.contact-form-footer {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 25px;
}

.contact-form-footer p {
  max-width: 250px;
  margin: 0;
  color: #789087;
  font: 500 7px/1.5 DM Mono, monospace;
  letter-spacing: .07em;
}

.contact-form-footer button {
  display: flex;
  min-width: 195px;
  justify-content: space-between;
  gap: 26px;
  padding: 15px 18px;
  border: 0;
  background: #073f34;
  color: white;
  font: 700 11px/1 Manrope, sans-serif;
  cursor: pointer;
}

.contact-form-footer button span { color: #62e18b; }
.contact-form-footer button:hover { background: #0b5846; }
.contact-form-footer button:disabled { cursor: default; opacity: .65; }

.contact-form-status {
  min-height: 18px;
  grid-column: 1 / -1;
  margin: 17px 0 0;
  color: #147b48;
  font-size: 10px;
  font-weight: 700;
}

.contact-location {
  display: grid;
  min-height: 510px;
  grid-template-columns: minmax(340px, .72fr) minmax(540px, 1.28fr);
  border-top: 1px solid #7c988b;
  background: #edf1ea;
}

.contact-location-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 65px 10%;
}

.contact-location-copy h2,
.contact-routing h2 {
  margin: 19px 0 24px;
  color: #073f34;
  font-size: clamp(48px, 5.2vw, 78px);
  line-height: .92;
  letter-spacing: -.065em;
}

.contact-location-copy p {
  max-width: 390px;
  margin: 0;
  color: #51685f;
  font-size: 13px;
  line-height: 1.65;
}

.contact-location-copy a {
  display: flex;
  width: min(270px, 100%);
  justify-content: space-between;
  margin-top: 35px;
  padding: 14px 16px;
  border: 1px solid #073f34;
  color: #073f34;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.contact-map {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  background:
    linear-gradient(#073f3414 1px, transparent 1px),
    linear-gradient(90deg, #073f3414 1px, transparent 1px),
    #60e18a;
  background-size: 58px 58px;
}

.map-road {
  position: absolute;
  display: block;
  height: 12px;
  background: #eff5ed;
  box-shadow: 0 0 0 1px #073f3436;
  transform-origin: center;
}

.map-road-one { top: 27%; left: -8%; width: 120%; transform: rotate(-9deg); }
.map-road-two { top: 61%; left: -12%; width: 125%; transform: rotate(16deg); }
.map-road-three { top: -15%; left: 54%; width: 14px; height: 130%; transform: rotate(7deg); }
.map-river { position: absolute; right: -8%; bottom: -36%; width: 42%; height: 120%; border: 34px solid #dff6e6; border-radius: 50%; opacity: .78; }

.map-marker {
  position: absolute;
  z-index: 2;
  top: 44%;
  left: 48%;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 13px solid #073f34;
  border-radius: 50% 50% 50% 0;
  background: #f4f5ef;
  color: #073f34;
  transform: rotate(-45deg);
  box-shadow: 0 18px 30px #073f3438;
}

.map-marker b { transform: rotate(45deg); font-size: 11px; }
.contact-map > p { position: absolute; z-index: 2; left: 6%; bottom: 8%; margin: 0; color: #073f34; font: 800 21px/1.05 Manrope, sans-serif; letter-spacing: -.03em; }
.contact-map > small { position: absolute; right: 5%; bottom: 8%; color: #175b46; font: 500 8px/1 DM Mono, monospace; }

.contact-routing {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 7%;
  padding: 78px 5%;
  background: #f6f6f1;
}

.contact-routing header { align-self: center; }
.contact-routing > div { border-top: 1px solid #779187; }
.contact-routing a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  gap: 15px;
  padding: 24px 0;
  border-bottom: 1px solid #c4d0c9;
  color: #073f34;
  text-decoration: none;
}
.contact-routing a span { color: #2aa361; font: 500 9px DM Mono, monospace; }
.contact-routing a strong { font-size: 14px; }
.contact-routing a b { color: #2aa361; font-weight: 500; }
.contact-routing a:hover strong { color: #159655; }

.contact-page a:focus-visible,
.contact-page button:focus-visible,
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible {
  outline: 2px solid #60e18a;
  outline-offset: 3px;
}

.stage.is-mobile .contact-hero { display: block; min-height: 0; }
.stage.is-mobile .contact-intro { min-height: 650px; padding: 55px 22px 34px; }
.stage.is-mobile .contact-intro h1 { margin-top: 24px; font-size: 54px; }
.stage.is-mobile .contact-lead { max-width: 315px; font-size: 12px; }
.stage.is-mobile .contact-orbit { top: 255px; right: -92px; width: 220px; height: 220px; }
.stage.is-mobile .contact-channels { margin-top: auto; }
.stage.is-mobile .contact-form-panel { padding: 55px 22px 45px; }
.stage.is-mobile .contact-form-panel h2 { font-size: 42px; }
.stage.is-mobile .contact-form { display: block; }
.stage.is-mobile .contact-field { padding-top: 23px; }
.stage.is-mobile .contact-form-footer { align-items: stretch; flex-direction: column; }
.stage.is-mobile .contact-form-footer button { width: 100%; }
.stage.is-mobile .contact-location { display: flex; min-height: 0; flex-direction: column; }
.stage.is-mobile .contact-location-copy { padding: 56px 22px; }
.stage.is-mobile .contact-location-copy h2,
.stage.is-mobile .contact-routing h2 { font-size: 46px; }
.stage.is-mobile .contact-map { min-height: 400px; }
.stage.is-mobile .contact-map > p { font-size: 17px; }
.stage.is-mobile .contact-map > small { bottom: 4%; font-size: 6px; }
.stage.is-mobile .contact-routing { display: block; padding: 58px 22px; }
.stage.is-mobile .contact-routing > div { margin-top: 38px; }

@media (max-width: 1100px) {
  .stage:not(.is-mobile) .contact-hero { grid-template-columns: .9fr 1.1fr; }
  .stage:not(.is-mobile) .contact-intro h1 { font-size: clamp(54px, 6vw, 76px); }
  .stage:not(.is-mobile) .contact-form-panel { padding-inline: 5%; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-channels a { transition: none; }
}

.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}