/* ==========================================================================
   TASS — contact.css
   Estilos específicos de la página Contacto (contacto.html).
   Rediseño editorial: hero asimétrico, formulario con campos de línea
   fina (sin cajas pesadas), contacto directo sin card, ubicación con
   mapa grande como su propia sección. Todas las clases son propias de
   esta página (.contact-*, .page-contact) — no se toca .hero/
   .hero-content/.hero-media ni .form-group/.form-row de
   components.css, porque Inicio (index.html) también las usa.
   No modifica layout.css, components.css ni otras páginas.
   ========================================================================== */

/* Mismo token --color-linen que usan Sustrato Hidropónico
   (.coco-hero, .coco-solutions, etc.), Proyectos (.projects-hero) y
   el resto de páginas rediseñadas — reutilizado tal cual, no una
   aproximación visual. Se aplica también a body.page-contact como
   capa base, para que no exista ningún resquicio del blanco global
   (--color-paper) de body en ningún punto de la página. */
body.page-contact {
  background-color: var(--color-linen);
}

.page-contact .contact-hero,
.page-contact .contact-main,
.page-contact .contact-location {
  background-color: var(--color-linen);
}

/* Respaldo del footer (ver .site-footer/.footer-surface en layout.css):
   en Contacto la sección inmediatamente anterior al footer es
   .contact-location, en --color-linen (no --color-espresso, el
   respaldo por defecto pensado para las páginas con .cta-section) —
   se sobrescribe aquí para que las esquinas superiores del footer
   sigan viéndose continuas con esta página. */
.page-contact .site-footer {
  background-color: var(--color-linen);
}

/* ==========================================================================
   HERO — CONTACTO
   Composición asimétrica de 2 columnas (47/53, dentro de 45-50%/
   50-55% pedido) en vez del encabezado centrado anterior. Izquierda:
   eyebrow "CONTACTO" + headline "Hablemos.". Derecha: texto
   introductorio. Mismo --color-linen que el resto de páginas
   rediseñadas — un solo lienzo continuo, sin bloque blanco
   independiente. ========================================================================== */
.page-contact .contact-hero {
  /* ~72-88px desde el header (dentro de 70-100px pedido). */
  padding-top: 4.5rem;
  /* 8va ronda: hero→formulario se sentía demasiado separado del
     formulario (dos bloques flotando) — se recorta ~32px repartidos
     entre este padding-bottom y el padding-top de .contact-main,
     dentro del rango de 25-40px pedido. */
  padding-bottom: 1.25rem;
}

@media (min-width: 901px) {
  .page-contact .contact-hero {
    padding-top: 5.5rem;
    padding-bottom: 1.75rem;
  }
}

.page-contact .contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.75rem;
}

@media (min-width: 701px) {
  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    /* 8va ronda: "Hablemos." y el texto introductorio se sentían dos
       elementos flotando por separado — se reduce el column-gap
       (antes --space-lg/64px) para que se perciban como una sola
       introducción. */
    column-gap: 2.5rem;
    align-items: start;
  }
}

.page-contact .contact-hero__content {
  min-width: 0;
}

/* Headline: 64-76px desktop — el título principal de la página,
   alineado a la izquierda (antes centrado). Café oscuro, peso medium,
   line-height compacto. */
.page-contact .contact-hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-contact .contact-hero__title {
    /* 64-76px, dentro de lo pedido. */
    font-size: clamp(4rem, 3.3rem + 2vw, 4.75rem);
  }
}

/* Texto: 18-21px desktop, ancho 480-560px, tono secundario. El
   padding-top (desde 701px) compensa la diferencia óptica de leading
   entre el headline enorme y este texto — con align-items:start
   ambos arrancan en el mismo borde de caja, pero sin este ajuste el
   texto se percibe arrancando más arriba que "Hablemos.". */
.page-contact .contact-hero__text {
  max-width: 520px;
  margin: 0;
  color: var(--color-graphite);
  font-size: 1.125rem;
  line-height: 1.6;
}

@media (min-width: 901px) {
  .page-contact .contact-hero__text {
    font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  }
}

@media (min-width: 701px) {
  .page-contact .contact-hero__text {
    padding-top: 0.75rem;
  }
}

/* Reveal: headline → texto (antes eyebrow→headline→texto — el
   eyebrow se retiró de esta sección). */
.page-contact .contact-hero__title.reveal-up {
  transform: translateY(22px);
  transition-duration: 850ms;
}

.page-contact .contact-hero__text.reveal-up {
  transform: translateY(14px);
  transition-duration: 750ms;
  transition-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-hero__title.reveal-up,
  .page-contact .contact-hero__text.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ==========================================================================
   FORMULARIO + CONTACTO DIRECTO
   Columnas 58/42 (dentro de 57-60%/40-43% pedido). 3ra ronda: menos
   información en ambos lados —el formulario va directo de título a
   campos, la columna derecha va directo a los medios de contacto— para
   que el espacio negativo haga el trabajo de jerarquía, no el texto.
   Gap generoso (--space-lg). ========================================================================== */
.page-contact .contact-main {
  /* 8va ronda: recorte de la mitad del acercamiento hero→formulario
     (ver .contact-hero padding-bottom) — juntos suman ~32px menos que
     antes, dentro de 25-40px pedido. */
  padding-top: 2.25rem;
  padding-bottom: var(--space-lg);
}

@media (min-width: 901px) {
  .page-contact .contact-main {
    padding-top: 2.75rem;
  }
}

.page-contact .contact-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 701px) {
  .page-contact .contact-main__grid {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    /* 8va ronda: antes --space-lg (64px) sin ningún marcador visual
       entre columnas. Se recorta un poco y se compensa con una
       hairline vertical dentro de .contact-direct (solo desktop real,
       901px+) para que el límite formulario/contacto se perciba con
       claridad sin depender únicamente del espacio en blanco. */
    gap: 2.75rem;
    align-items: start;
  }
}

/* Hairline vertical entre formulario y contacto directo — solo en
   layout de 2 columnas real (901px+; entre 701-900px la regla de más
   abajo fuerza una sola columna, donde esta línea no aplicaría). Una
   sola línea fina, no una caja completa alrededor del bloque. */
@media (min-width: 901px) {
  .page-contact .contact-direct {
    border-left: 1px solid var(--color-border);
    padding-left: 2.25rem;
  }
}

/* Título del formulario: "Cuéntanos qué necesitas" (antes "Formulario
   de contacto" — sonaba administrativo). 36-44px desktop. Va directo
   a los campos (3ra ronda: se quitó el párrafo intermedio — el hero
   ya da el contexto y repetía la misma idea dos veces). */
.page-contact .contact-form-block__title {
  margin: 0 0 2rem;
  font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-contact .contact-form-block__title {
    /* 36-44px, dentro de lo pedido. */
    font-size: clamp(2.25rem, 1.9rem + 0.9vw, 2.75rem);
  }
}

/* ---------- Campos: línea fina en vez de caja pesada ---------- */
.page-contact .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.page-contact .contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 481px) {
  .page-contact .contact-form__row {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
}

.page-contact .contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.page-contact .contact-form__field label {
  /* 8va ronda: +~8% (antes 0.75rem/12px) — se leían pequeños en la
     vista general. Sigue sin negrita (font-weight 500, no 600/700). */
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  /* Más contraste que --color-graphite (3ra ronda: los labels se
     leían demasiado tenues) sin volverlos negros — mismo café oscuro
     TASS que ya usan los valores de contacto. */
  color: var(--color-espresso);
}

.page-contact .contact-form__field input,
.page-contact .contact-form__field select,
.page-contact .contact-form__field textarea {
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--color-ink);
  background-color: transparent;
}

/* Nombre / Empresa / Teléfono / Correo: sin caja — solo una línea
   inferior fina (1px). 3ra ronda: se sentía demasiado tenue sobre el
   crema, así que sube de --color-border (beige muy claro) a
   --color-sand (café/beige más presente, sin llegar a negro ni a
   borde grueso) para identificarse de inmediato. Fondo transparente,
   buen padding vertical. */
.page-contact .contact-form__field input {
  padding: 0.75rem 0;
  border: none;
  border-bottom: 1px solid var(--color-sand);
  border-radius: 0;
  transition: border-color 200ms var(--ease-elegant), box-shadow 200ms var(--ease-elegant);
}

.page-contact .contact-form__field input:focus-visible {
  outline: none;
  border-bottom-color: var(--color-espresso);
  box-shadow: 0 1px 0 0 var(--color-espresso);
}

/* Tipo de proyecto: conserva un borde rectangular muy fino (ayuda a
   comunicar que es un selector), fondo transparente, altura cómoda.
   8va ronda: se integra mejor con el resto del formulario — borde
   bajado a --color-border (mismo lenguaje de hairline que el resto
   del sitio, antes --color-sand se sentía más "control de
   navegador"), flecha nativa reemplazada por una discreta propia
   (sin librerías) y fondo explícito en --color-linen para que no
   aparezca el blanco por defecto del navegador. */
.page-contact .contact-form__field select {
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-linen);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B655D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px 7px;
  transition: border-color 200ms var(--ease-elegant), box-shadow 200ms var(--ease-elegant);
}

/* Foco consistente con el resto del formulario: mismo lenguaje que
   los inputs de línea (contraste de hairline, sin glow, sin sombra
   difusa) — el box-shadow es una línea sólida hacia adentro (1px), no
   un halo. */
.page-contact .contact-form__field select:focus-visible {
  outline: none;
  border-color: var(--color-espresso);
  box-shadow: inset 0 0 0 1px var(--color-espresso);
}

/* Mensaje: borde fino completo, fondo transparente, bastante espacio
   interno, altura 130-160px. 8va ronda: borde bajado a --color-border
   (antes --color-sand) — más tenue y coherente con el lenguaje de
   hairlines del resto del sitio. */
.page-contact .contact-form__field textarea {
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-height: 145px;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 200ms var(--ease-elegant), box-shadow 200ms var(--ease-elegant);
}

/* Mismo lenguaje de foco que el select: línea sólida hacia adentro,
   sin halo ni sombra difusa. */
.page-contact .contact-form__field textarea:focus-visible {
  outline: none;
  border-color: var(--color-espresso);
  box-shadow: inset 0 0 0 1px var(--color-espresso);
}

/* Botón: editorial y compacto — ancho automático, alineado a la
   izquierda. 8va ronda: un poco más de autoridad como cierre natural
   del formulario (antes 0.9375rem/1.75rem de padding y 15px de
   texto) sin volverlo enorme. Hover sigue siendo sutil: variación de
   fondo + la flecha se desplaza unos px, sin zoom ni bounce. */
.page-contact .contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  align-self: flex-start;
  padding: 1.0625rem 2.25rem;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--color-espresso);
  color: var(--color-paper);
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 220ms var(--ease-elegant);
}

.page-contact .contact-form__submit:hover {
  background-color: #34240F;
}

.page-contact .contact-form__submit:focus-visible {
  outline: 2px solid var(--color-espresso);
  outline-offset: 2px;
}

/* Flecha: se desplaza 4px en hover/focus, transición suave, sin
   bounce (misma curva --ease-elegant que el resto del sitio). */
.page-contact .contact-form__submit span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 220ms var(--ease-elegant);
}

.page-contact .contact-form__submit:hover span[aria-hidden="true"],
.page-contact .contact-form__submit:focus-visible span[aria-hidden="true"] {
  transform: translateX(4px);
}

/* Aviso de desarrollo ("Pendiente"/placeholder de conexión a
   backend): se conserva en el HTML para quien retome el desarrollo,
   pero no debe verse en producción. */
.page-contact .contact-form__dev-note {
  display: none;
}

/* Reveal: título → el <form> completo como un solo bloque (no cada
   campo por separado) — termina de aparecer rápido. */
.page-contact .contact-form-block__title.reveal-up {
  transform: translateY(18px);
  transition-duration: 750ms;
}

.page-contact .contact-form.reveal-up {
  transform: translateY(16px);
  transition-duration: 800ms;
  transition-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-form-block__title.reveal-up,
  .page-contact .contact-form.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ---------- Contacto directo (3ra ronda: simplificación) ----------
   Antes: eyebrow + headline "Estamos cerca." + texto + 3 filas con
   hairlines — demasiada información compitiendo con el formulario.
   Ahora va directo a lo esencial: teléfono/WhatsApp/correo con los
   mismos íconos SVG que ya usa el footer (mismo currentColor, mismo
   width/height:1em), sin labels ni flechas, separados solo por
   espacio (sin hairlines), y Horario + Síguenos como dos columnas
   que comparten exactamente las mismas clases/tamaños por fila para
   que "@tass.mx" quede a la misma altura que el primer horario. Sin
   cards, sin fondo propio. La dirección sigue sin vivir aquí (está
   completa en "Visítanos", junto al mapa). */
.page-contact .contact-direct {
  display: flex;
  flex-direction: column;
}

/* 7ma ronda: alineación óptica con "Cuéntanos qué necesitas". Ambas
   cajas ya comparten el mismo borde superior (.contact-main__grid
   tiene align-items:start desde 701px, sin padding/margin desigual
   en ninguno de los dos wrappers) — el desfase restante es puramente
   tipográfico: al ser "Cuéntanos..." un tamaño de fuente mucho mayor,
   su glifo visible arranca más abajo dentro de su propia caja de
   línea que el de "Contacto" (el hueco entre el tope de la caja y el
   asta ascendente crece proporcional al font-size). Se compensa con
   un padding-top mínimo (3px, dentro de los 2-4px que pidió el
   usuario) solo en desktop/tablet (dos columnas) — nunca transform,
   position ni margin negativo. */
@media (min-width: 701px) {
  .page-contact .contact-direct {
    padding-top: 3px;
  }
}

/* Título "Contacto" (6ta ronda: escala tipográfica — debe quedar
   claramente secundario frente a "Cuéntanos qué necesitas"): 26px
   móvil/tablet, 28px desktop (antes 30-36px), mismo café oscuro TASS,
   peso medium, minúsculas (no uppercase). 24px hasta el primer dato. */
.page-contact .contact-direct__title {
  margin: 0 0 1.5rem;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-contact .contact-direct__title {
    /* ~28px, dentro de 26-30px pedido. */
    font-size: 1.75rem;
  }
}

/* Teléfono / WhatsApp / correo: ícono + valor en una sola línea,
   sin label ni flecha. Separación únicamente por espacio (6ta ronda:
   18px, antes 20px — dentro de 16-20px pedido, sin hairlines). Toda
   la fila es un solo <a> (mejor target táctil). */
.page-contact .contact-direct__links {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.page-contact .contact-direct__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.page-contact .contact-direct__link:focus-visible {
  outline: 2px solid var(--color-espresso);
  outline-offset: 4px;
}

/* Mismos SVG que .footer-contact__icon (layout.css): stroke
   currentColor. WhatsApp no tiene ícono en el proyecto, así que esa
   fila queda sin <svg> (solo texto), tal como se pidió. 6ta ronda:
   tamaño explícito (antes 1em, heredado del contexto) para que quede
   discreto y alineado con el nuevo tamaño de texto — 15px móvil/
   tablet, 16px desktop (dentro de 14-16px pedido). */
.page-contact .contact-direct__link-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  flex-shrink: 0;
  color: var(--color-graphite);
  transition: color 220ms var(--ease-elegant);
}

@media (min-width: 901px) {
  .page-contact .contact-direct__link-icon {
    width: 1rem;
    height: 1rem;
  }
}

/* 6ta ronda (escala tipográfica): mismo tamaño/peso/color que
   .contact-direct__day y .contact-direct__hours (ver más abajo) — el
   número de teléfono, "WhatsApp" y el correo deben sentirse del mismo
   sistema que Lun-Vie/horarios/Instagram/@tass.mx, no de una escala
   distinta. 15px móvil/tablet, 16px desktop (antes 17-18px) — más
   discreto frente a "Cuéntanos qué necesitas". */
.page-contact .contact-direct__link-value,
.page-contact .contact-direct__day,
.page-contact .contact-direct__hours {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-espresso);
  transition: color 220ms var(--ease-elegant);
}

@media (min-width: 901px) {
  .page-contact .contact-direct__link-value,
  .page-contact .contact-direct__day,
  .page-contact .contact-direct__hours {
    font-size: 1rem;
  }
}

/* Hover/focus muy sutil: solo un oscurecimiento mínimo de ícono y
   texto. Sin flecha, sin movimiento, sin zoom. */
.page-contact .contact-direct__link:hover .contact-direct__link-icon,
.page-contact .contact-direct__link:focus-visible .contact-direct__link-icon {
  color: var(--color-espresso);
}

.page-contact .contact-direct__link:hover .contact-direct__link-value,
.page-contact .contact-direct__link:focus-visible .contact-direct__link-value {
  color: var(--color-ink);
}

/* WhatsApp (2do enlace: teléfono/WhatsApp/correo): un poco más de
   presencia que el resto por ser uno de los canales comerciales
   principales — solo peso tipográfico (600 vs 400), sin botón, sin
   fondo verde, sigue siendo un enlace editorial limpio. */
.page-contact .contact-direct__link:nth-child(2) .contact-direct__link-value {
  font-weight: 600;
}

/* Horario de atención + Síguenos: 8va ronda — antes dos columnas
   internas (60/40) que dejaban "Síguenos"/Instagram como una
   subcolumna flotante y aislada a la derecha. Ahora ambos grupos se
   apilan en el mismo sistema vertical que el resto de la columna,
   cada uno con su propia hairline horizontal (--color-border, el
   mismo lenguaje de líneas finas del sitio) marcando el cambio de
   grupo — sin encerrar nada en una caja. */
.page-contact .contact-direct__split {
  display: flex;
  flex-direction: column;
  row-gap: 1.75rem;
  margin-top: 2rem;
}

.page-contact .contact-direct__split-col {
  min-width: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Encabezados pequeños (Horario de atención / Síguenos): 8va ronda
   +~9% (antes 0.6875rem/11px, se perdía legibilidad) — uppercase,
   tracking, peso 600, café oscuro. */
.page-contact .contact-direct__subheading {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-espresso);
}

/* Horario y Síguenos comparten literalmente las mismas clases
   (.contact-direct__schedule-row > .contact-direct__day +
   .contact-direct__hours) para "Lun-Vie/horario" e
   "Instagram/@tass.mx" — misma tipografía y mismo gap en ambas
   columnas garantiza que la primera fila de cada una quede exactamente
   a la misma altura (alineación por tipografía+grid, no por
   position/transform). 4ta ronda: día/hours ya no llevan tamaño/color
   propio aquí — comparten la escala única 15-16px/café oscuro definida
   junto a .contact-direct__link-value, arriba, para que Lun-Vie,
   horarios, Instagram y @tass.mx se sientan del mismo sistema que
   teléfono/WhatsApp/correo. 6ta ronda: 8px entre ambas líneas (antes
   10px); 18px antes de "Sáb" (antes 20px) — dentro de 6-10px/16-20px
   pedido. */
.page-contact .contact-direct__schedule {
  display: flex;
  flex-direction: column;
}

.page-contact .contact-direct__schedule-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-contact .contact-direct__schedule-row + .contact-direct__schedule-row {
  margin-top: 1.125rem;
}

/* "@tass.mx" es un enlace (mismo href oficial ya usado en el footer):
   hereda el mismo tamaño/color que un horario normal, solo agrega
   hover/focus. */
.page-contact .contact-direct__hours--link {
  display: inline-block;
  width: fit-content;
  text-decoration: none;
  transition: color 220ms var(--ease-elegant);
}

.page-contact .contact-direct__hours--link:hover,
.page-contact .contact-direct__hours--link:focus-visible {
  color: var(--color-ink);
}

.page-contact .contact-direct__hours--link:focus-visible {
  outline: 2px solid var(--color-espresso);
  outline-offset: 3px;
}

/* Reveal: título "Contacto" → teléfono → WhatsApp → correo (stagger
   corto) → Horario/Síguenos. */
.page-contact .contact-direct__title.reveal-up {
  transform: translateY(16px);
  transition-duration: 700ms;
}

.page-contact .contact-direct__link.reveal-up {
  transform: translateY(14px);
  transition-duration: 650ms;
}

.page-contact .contact-direct__link:nth-child(1).reveal-up { transition-delay: 90ms; }
.page-contact .contact-direct__link:nth-child(2).reveal-up { transition-delay: 160ms; }
.page-contact .contact-direct__link:nth-child(3).reveal-up { transition-delay: 230ms; }

.page-contact .contact-direct__split.reveal-up {
  transform: translateY(16px);
  transition-duration: 750ms;
  transition-delay: 350ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-direct__title.reveal-up,
  .page-contact .contact-direct__link.reveal-up,
  .page-contact .contact-direct__split.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ==========================================================================
   UBICACIÓN — sección independiente
   El mapa deja de ser un widget pequeño dentro de la columna de
   Contacto directo y pasa a ser su propio momento visual: cabecera
   editorial (Visítanos + dirección) y mapa grande a ancho completo. ========================================================================== */
.page-contact .contact-location {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.page-contact .contact-location__header {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 701px) {
  .page-contact .contact-location__header {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    column-gap: var(--space-lg);
    align-items: start;
    margin-bottom: 3rem;
  }
}

/* Título: 48-58px desktop. Café oscuro, peso medium, alineado a la
   izquierda. */
.page-contact .contact-location__title {
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-espresso);
}

@media (min-width: 901px) {
  .page-contact .contact-location__title {
    /* 48-58px, dentro de lo pedido. */
    font-size: clamp(3rem, 2.5rem + 1.6vw, 3.625rem);
  }
}

/* Dirección: 17-19px, ancho razonable. Mismo padding-top de
   compensación óptica que el hero y el resto de cabeceras
   emparejadas de la página — nunca arranca más arriba que
   "Visítanos". */
.page-contact .contact-location__address {
  max-width: 460px;
  margin: 0;
  color: var(--color-graphite);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (min-width: 901px) {
  .page-contact .contact-location__address {
    font-size: 1.1875rem;
  }
}

@media (min-width: 701px) {
  .page-contact .contact-location__address {
    padding-top: 0.625rem;
  }
}

/* Mapa: ancho completo, 420-500px de alto en desktop (antes
   aspect-ratio:4/3 dentro de la columna de Contacto directo — ahora
   altura explícita para que sea un momento visual grande). Mismo
   iframe/funcionalidad, sin cambiar la ubicación. */
.page-contact .contact-location__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: clamp(340px, 34vw, 460px);
}

@media (min-width: 901px) {
  .page-contact .contact-location__map {
    /* 420-500px, dentro de lo pedido. */
    height: clamp(420px, 30vw, 500px);
  }
}

@media (max-width: 700px) {
  .page-contact .contact-location__map {
    /* 300-380px, dentro de lo pedido. */
    height: clamp(300px, 78vw, 380px);
  }
}

.page-contact .contact-location__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Enlace bajo el mapa: pequeño y editorial, no un botón grande. */
.page-contact .contact-location__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-espresso);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.page-contact .contact-location__link:hover,
.page-contact .contact-location__link:focus-visible {
  border-color: var(--color-espresso);
}

/* Reveal: Visítanos → dirección → mapa, movimiento máximo 10-20px,
   sin zoom. */
.page-contact .contact-location__title.reveal-up {
  transform: translateY(16px);
  transition-duration: 800ms;
}

.page-contact .contact-location__address.reveal-up {
  transform: translateY(12px);
  transition-duration: 750ms;
  transition-delay: 150ms;
}

.page-contact .contact-location__map.reveal-up {
  transform: translateY(16px);
  transition-duration: 850ms;
  transition-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-location__title.reveal-up,
  .page-contact .contact-location__address.reveal-up,
  .page-contact .contact-location__map.reveal-up {
    transform: none;
    transition-delay: 0ms;
  }
}

/* ---------- Sin hairlines entre secciones (3ra ronda: simplificación) ----------
   Antes había una línea divisoria entre hero→formulario y entre
   formulario→Visítanos (::before absolutamente posicionado, sin alto
   propio). Se pidió quitarlas sin tocar el espacio: como el elemento
   no ocupaba espacio en el flujo (position:absolute), simplemente se
   elimina la regla — el padding/margin de cada sección sigue exacto,
   la transición ahora ocurre solo por espacio. */

/* ---------- Responsive: tablet compacta el formulario/contacto directo ---------- */
@media (min-width: 701px) and (max-width: 900px) {
  .page-contact .contact-main__grid {
    grid-template-columns: 1fr;
  }
}