/* =========================================================
   CONSTRUFLORIDA — CONTACTO
   Archivo: estilos/contactanos.css

   Escala visual alineada con nosotros.css
   ========================================================= */

.contact-page {
  background: var(--paper);
  color: var(--ink);
}


/* =========================================================
   ELEMENTOS EDITORIALES
   ========================================================= */

.contact-page .section-kicker,
.contact-page .contact-eyebrow,
.contact-page .contact-hero-eyebrow {
  margin: 0 0 14px;

  color: #996035;

  font-size: var(--page-eyebrow);
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}


.contact-page .contact-eyebrow,
.contact-page .contact-hero-eyebrow {
  display: flex;

  align-items: center;

  gap: 11px;
}


.contact-page .contact-eyebrow span,
.contact-page .contact-hero-eyebrow span {
  display: block;

  width: 23px;
  height: 2px;

  flex: 0 0 auto;

  background: var(--orange);
}


/* =========================================================
   HERO — MISMA ALTURA Y ESCALA QUE NOSOTROS
   ========================================================= */

.contact-page .contact-hero {
  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);

  height: 330px;
  min-height: 330px;

  overflow: hidden;

  background: var(--green);

  color: #ffffff;
}


/* ---------------------------------------------------------
   Hero izquierda
   --------------------------------------------------------- */

.contact-page .contact-hero-copy {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  min-width: 0;

  background: var(--green);
}


.contact-page .contact-hero-copy-inner {
  width: min(
    590px,
    calc(100% - 72px)
  );

  padding-block: 30px;
}


.contact-page .contact-hero-eyebrow {
  color: #e5c49c;
}


.contact-page .contact-hero h1 {
  max-width: 570px;

  margin: 0;

  color: #ffffff;

  font-size: clamp(
    39px,
    3.25vw,
    49px
  );

  font-weight: 700;

  line-height: 1.02;

  letter-spacing: -2.4px;
}


.contact-page .contact-hero h1 em {
  color: var(--orange);

  font-style: normal;
}


.contact-page .contact-hero-description {
  max-width: 520px;

  margin:
    16px
    0
    19px;

  color:
    rgb(255 255 255 / 76%);

  font-size: var(--page-body);

  line-height: 1.68;
}


/* Hero acciones */

.contact-page .contact-hero-actions {
  display: flex;

  align-items: center;

  gap: 24px;
}


.contact-page .contact-hero-primary {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  min-height: 46px;

  padding:
    0
    18px;

  background: var(--orange);

  color: #17382e;

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.contact-page .contact-hero-primary span {
  font-size: 18px;

  font-weight: 400;
}


.contact-page .contact-hero-primary:hover {
  transform: translateY(-2px);

  background: #ffc172;
}


.contact-page .contact-hero-secondary {
  display: inline-flex;

  align-items: center;

  min-height: 38px;

  padding-bottom: 2px;

  border-bottom:
    1px solid
    rgb(255 255 255 / 34%);

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;
}


.contact-page .contact-hero-secondary:hover {
  color: #f0cea4;

  border-color: var(--orange);
}


/* ---------------------------------------------------------
   Hero derecha
   --------------------------------------------------------- */

.contact-page .contact-hero-panel {
  position: relative;

  display: flex;

  align-items: center;

  padding:
    42px
    clamp(46px, 5vw, 82px);

  background:
    linear-gradient(
      135deg,
      #214c3f 0%,
      #173b31 65%,
      #123129 100%
    );

  overflow: hidden;
}


.contact-page .contact-hero-panel::before {
  content: "";

  position: absolute;

  top: -80px;
  right: -70px;

  width: 260px;
  height: 260px;

  border:
    1px solid
    rgb(255 255 255 / 8%);

  border-radius: 50%;
}


.contact-page .contact-hero-panel::after {
  content: "";

  position: absolute;

  right: 44px;
  bottom: 34px;

  width: 75px;
  height: 2px;

  background: var(--orange);
}


.contact-page .contact-hero-panel-inner {
  position: relative;

  z-index: 1;

  max-width: 430px;
}


.contact-page .contact-hero-panel-kicker {
  display: block;

  margin-bottom: 16px;

  color: #e6c79f;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1.7px;
}


.contact-page .contact-hero-panel p {
  max-width: 410px;

  margin: 0;

  color:
    rgb(255 255 255 / 82%);

  font-size: 17px;

  line-height: 1.55;

  letter-spacing: -0.2px;
}


.contact-page .contact-hero-panel-line {
  width: 100%;

  height: 1px;

  margin:
    24px
    0
    15px;

  background:
    rgb(255 255 255 / 14%);
}


.contact-page .contact-hero-panel small {
  color:
    rgb(255 255 255 / 52%);

  font-size: 9px;

  letter-spacing: 1.3px;
}


/* =========================================================
   CONTACTO DIRECTO
   ========================================================= */

.contact-page .contact-direct {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.82fr)
    minmax(560px, 1.18fr);

  align-items: start;

  gap: clamp(
    64px,
    8vw,
    120px
  );

  padding-block: 76px;
}


/* Heading */

.contact-page .contact-direct-heading h2,
.contact-page .contact-guide-heading h2,
.contact-page .contact-location-copy h2,
.contact-page .contact-info-heading h2,
.contact-page .contact-cta h2 {
  margin: 0;

  font-size: var(--page-h2);
  font-weight: 600;

  line-height: 1.08;

  letter-spacing: -1.8px;
}


.contact-page .contact-direct-heading h2,
.contact-page .contact-guide-heading h2,
.contact-page .contact-location-copy h2,
.contact-page .contact-info-heading h2 {
  color: var(--green);
}


.contact-page .contact-direct-lead {
  max-width: 680px;

  margin:
    0
    0
    28px;

  color: var(--ink);

  font-size: 21px;

  line-height: 1.55;

  letter-spacing: -0.35px;
}


/* Filas */

.contact-page .contact-direct-list {
  border-top:
    1px solid
    var(--line);
}


.contact-page .contact-row {
  display: grid;

  grid-template-columns:
    50px
    minmax(0, 1fr)
    auto;

  align-items: start;

  gap: 24px;

  padding:
    28px
    0;

  border-bottom:
    1px solid
    var(--line);
}


.contact-page .contact-row-number,
.contact-page .contact-row-label {
  color: #996035;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1.5px;
}


.contact-page .contact-row-number {
  padding-top: 5px;
}


.contact-page .contact-row-label {
  display: block;

  margin-bottom: 8px;
}


.contact-page .contact-row-copy h3 {
  margin: 0;

  color: var(--green);

  font-size: var(--page-h3);
  font-weight: 600;

  line-height: 1.2;

  letter-spacing: -0.55px;
}


.contact-page .contact-row-copy p {
  max-width: 560px;

  margin:
    12px
    0
    12px;

  color: var(--muted);

  font-size: var(--page-body);

  line-height: 1.75;
}


.contact-page .contact-row-email {
  color: var(--green);

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
}


.contact-page .contact-row-email:hover {
  color: var(--orange-dark);
}


/* Botón lateral */

.contact-page .contact-row-action {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  min-width: 145px;
  min-height: 48px;

  padding:
    0
    16px;

  border:
    1px solid
    rgb(25 61 50 / 15%);

  border-radius: 999px;

  color: var(--green);

  background: transparent;

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.contact-page .contact-row-action strong {
  color: var(--orange-dark);

  font-size: 17px;

  font-weight: 400;
}


.contact-page .contact-row-action:hover {
  transform: translateY(-1px);

  border-color: var(--orange-dark);

  background: #ffffff;
}


/* Ayuda */

.contact-page .contact-support {
  display: grid;

  grid-template-columns:
    150px
    1fr;

  align-items: start;

  gap: 25px;

  padding:
    18px
    0
    0;
}


.contact-page .contact-support-title {
  padding-top: 3px;

  color: #996035;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 1.4px;
}


.contact-page .contact-support-list {
  display: flex;

  flex-wrap: wrap;

  gap:
    7px
    21px;
}


.contact-page .contact-support-list span {
  position: relative;

  padding-left: 13px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.55;
}


.contact-page .contact-support-list span::before {
  content: "";

  position: absolute;

  left: 0;
  top: 6px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--orange);
}


/* =========================================================
   GUÍA DE CONSULTA
   ========================================================= */

.contact-page .contact-guide {
  padding-block: 70px;

  border-block:
    1px solid
    var(--line);

  background: var(--soft);
}


.contact-page .contact-guide-layout {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.82fr)
    minmax(560px, 1.18fr);

  align-items: start;

  gap: clamp(
    64px,
    8vw,
    120px
  );
}


.contact-page .contact-guide-heading > p:not(.section-kicker) {
  max-width: 450px;

  margin:
    20px
    0
    0;

  color: var(--muted);

  font-size: var(--page-body);

  line-height: 1.78;
}


.contact-page .contact-guide-list {
  border-top:
    1px solid
    var(--line);
}


.contact-page .contact-guide-row {
  display: grid;

  grid-template-columns:
    52px
    1fr;

  align-items: start;

  gap: 22px;

  padding:
    22px
    0;

  border-bottom:
    1px solid
    var(--line);
}


.contact-page .contact-guide-row > span {
  padding-top: 3px;

  color: #996035;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1.5px;
}


.contact-page .contact-guide-row strong {
  display: block;

  color: var(--green);

  font-size: 19px;
  font-weight: 600;

  line-height: 1.25;

  letter-spacing: -0.35px;
}


.contact-page .contact-guide-row p {
  max-width: 600px;

  margin:
    8px
    0
    0;

  color: var(--muted);

  font-size: var(--page-body);

  line-height: 1.7;
}


/* =========================================================
   UBICACIÓN
   ========================================================= */

.contact-page .contact-location {
  padding-block: 76px;

  background:
    linear-gradient(
      180deg,
      var(--paper),
      #f3f2ec
    );
}


.contact-page .contact-location-layout {
  display: grid;

  grid-template-columns:
    minmax(330px, 0.72fr)
    minmax(560px, 1.28fr);

  align-items: center;

  gap: clamp(
    58px,
    7vw,
    100px
  );
}


.contact-page .contact-location-description {
  max-width: 440px;

  margin:
    20px
    0
    22px;

  color: var(--muted);

  font-size: var(--page-body);

  line-height: 1.78;
}


.contact-page .contact-address {
  max-width: 390px;

  padding:
    17px
    0;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.contact-page .contact-address > span {
  display: block;

  margin-bottom: 10px;

  color: #996035;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 1.5px;
}


.contact-page .contact-address address {
  color: var(--ink);

  font-size: 17px;

  font-style: normal;

  line-height: 1.55;
}


.contact-page .location-link {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  min-height: 48px;

  margin-top: 20px;

  padding:
    0
    17px;

  border:
    1px solid
    rgb(166 84 28 / 32%);

  border-radius: 999px;

  color: var(--green);

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;
}


.contact-page .location-link strong {
  color: var(--orange-dark);

  font-size: 17px;

  font-weight: 400;
}


.contact-page .contact-map {
  overflow: hidden;

  border-radius: 22px;

  background: #d9dad5;

  box-shadow:
    0 18px 48px
    rgb(18 38 31 / 8%);
}


.contact-page .contact-map iframe {
  display: block;

  width: 100%;
  height: 405px;

  border: 0;
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.contact-page .contact-info {
  padding-block: 68px;
}


.contact-page .contact-info-layout {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.65fr)
    minmax(620px, 1.35fr);

  align-items: start;

  gap: clamp(
    64px,
    8vw,
    110px
  );
}


.contact-page .contact-info-heading > p:not(.section-kicker) {
  max-width: 330px;

  margin:
    18px
    0
    0;

  color: var(--muted);

  font-size: var(--page-body);

  line-height: 1.7;
}


.contact-page .contact-info-list {
  border-top:
    1px solid
    var(--line);
}


.contact-page .info-row {
  display: grid;

  grid-template-columns:
    47px
    130px
    1fr;

  align-items: center;

  gap: 18px;

  min-height: 63px;

  border-bottom:
    1px solid
    var(--line);
}


.contact-page .info-row > span {
  color: #996035;

  font-size: 8px;
  font-weight: 700;
}


.contact-page .info-row small {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 1.4px;
}


.contact-page .info-row strong,
.contact-page .info-row a {
  color: var(--green);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;
}


.contact-page .info-row a:hover {
  color: var(--orange-dark);
}


/* =========================================================
   CTA
   ========================================================= */

.contact-page .contact-cta {
  padding-block: 56px;

  background: var(--green-dark);

  color: #ffffff;
}


.contact-page .contact-cta-inner {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 65px;
}


.contact-page .contact-cta .contact-eyebrow {
  color: #dfc19c;
}


.contact-page .contact-cta h2 {
  max-width: 640px;

  color: #ffffff;
}


.contact-page .contact-cta p:not(.contact-eyebrow) {
  max-width: 520px;

  margin:
    16px
    0
    0;

  color: #cbd7d1;

  font-size: var(--page-body);

  line-height: 1.7;
}


.contact-page .contact-cta-actions {
  display: flex;

  flex-direction: column;

  min-width: 230px;

  gap: 11px;
}


.contact-page .contact-primary-button {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-height: 51px;

  padding:
    0
    18px;

  background: var(--orange);

  color: var(--green-dark);

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.contact-page .contact-primary-button strong {
  font-size: 18px;

  font-weight: 400;
}


.contact-page .contact-primary-button:hover {
  transform: translateY(-2px);

  background: #ffc172;
}


.contact-page .contact-email-link {
  color: #dce5e0;

  font-size: 10px;

  text-align: center;

  text-decoration: underline;

  text-underline-offset: 5px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .contact-page .contact-hero {
    grid-template-columns:
      1fr
      1fr;

    height: 320px;
    min-height: 320px;
  }


  .contact-page .contact-hero-copy-inner {
    width:
      calc(
        100% - 50px
      );
  }


  .contact-page .contact-hero h1 {
    font-size: clamp(
      35px,
      4.1vw,
      45px
    );
  }


  .contact-page .contact-hero-panel {
    padding:
      34px
      38px;
  }


  .contact-page .contact-hero-panel p {
    font-size: 15px;
  }


  .contact-page .contact-direct,
  .contact-page .contact-guide-layout,
  .contact-page .contact-location-layout,
  .contact-page .contact-info-layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }

}


@media (max-width: 780px) {

  /* HERO */

  .contact-page .contact-hero {
    display: flex;

    flex-direction: column;

    height: auto;
    min-height: 0;
  }


  .contact-page .contact-hero-copy {
    order: 1;

    display: block;
  }


  .contact-page .contact-hero-copy-inner {
    width:
      calc(
        100% - 40px
      );

    margin-inline: auto;

    padding:
      38px
      0
      42px;
  }


  .contact-page .contact-hero h1 {
    font-size: clamp(
      38px,
      11vw,
      49px
    );

    letter-spacing: -2.1px;
  }


  .contact-page .contact-hero-actions {
    align-items: flex-start;

    flex-wrap: wrap;

    gap:
      12px
      20px;
  }


  .contact-page .contact-hero-panel {
    order: 2;

    min-height: 190px;

    padding:
      34px
      20px;
  }


  .contact-page .contact-hero-panel-inner {
    width: 100%;

    max-width: none;

    margin-inline: auto;
  }


  /* CONTACTO */

  .contact-page .contact-direct {
    padding-block: 56px;
  }


  .contact-page .contact-direct-lead {
    font-size: 19px;
  }


  .contact-page .contact-row {
    grid-template-columns:
      35px
      1fr;

    gap: 14px;
  }


  .contact-page .contact-row-action {
    grid-column: 2;

    justify-self: start;

    margin-top: 4px;
  }


  .contact-page .contact-support {
    grid-template-columns: 1fr;

    gap: 11px;
  }


  .contact-page .contact-support-list {
    flex-direction: column;

    gap: 6px;
  }


  /* GUÍA */

  .contact-page .contact-guide,
  .contact-page .contact-location,
  .contact-page .contact-info {
    padding-block: 56px;
  }


  /* MAPA */

  .contact-page .contact-map iframe {
    height: 310px;
  }


  /* INFO */

  .contact-page .contact-cta-inner {
    align-items: flex-start;

    flex-direction: column;

    gap: 28px;
  }


  .contact-page .contact-cta-actions {
    width: 100%;
  }

}


@media (max-width: 430px) {

  .contact-page .contact-hero h1 {
    font-size: 38px;
  }


  .contact-page .contact-hero-description {
    font-size: 12px;
  }


  .contact-page .contact-direct-lead {
    font-size: 18px;
  }


  .contact-page .contact-row-copy h3 {
    font-size: 20px;
  }


  .contact-page .contact-guide-row {
    grid-template-columns:
      36px
      1fr;

    gap: 12px;
  }


  .contact-page .contact-guide-row strong {
    font-size: 18px;
  }


  .contact-page .contact-address address {
    font-size: 16px;
  }


  .contact-page .contact-map iframe {
    height: 270px;
  }


  .contact-page .info-row {
    grid-template-columns:
      33px
      1fr;

    gap: 9px;

    padding-block: 11px;
  }


  .contact-page .info-row strong,
  .contact-page .info-row a {
    grid-column: 2;
  }

}


@media (prefers-reduced-motion: reduce) {

  .contact-page .contact-hero-primary,
  .contact-page .contact-row-action,
  .contact-page .contact-primary-button {
    transition: none;
  }

}