/* ==========================================================================
   TASS — layout.css
   Estructura de header, footer, hero y secciones principales.
   ========================================================================== */

/* ---------- HEADER ----------
   Fixed (no sticky): se saca del flujo a propósito para que la primera
   sección de cada página (hero o no) empiece desde el verdadero top de la
   página, con el header flotando encima. Transparente por defecto — se
   integra visualmente con el hero — y solo adquiere fondo + blur al hacer
   scroll (.is-scrolled, ver main.js) para mantener la legibilidad sobre el
   contenido una vez que el usuario avanza. Sin borde ni sombra: la
   separación visual la da únicamente el fondo translúcido en ese estado. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  transform: translateY(0);
  transition: transform 280ms var(--ease-elegant),
    background-color 320ms var(--ease-elegant),
    backdrop-filter 320ms var(--ease-elegant);
}

.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Auto-hide al hacer scroll hacia abajo (ver main.js). Usa transform en
   vez de display/visibility para no alterar la posición fija del header
   (siempre fuera del flujo), solo su visibilidad. */
.site-header.header-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition-duration: 1ms;
  }
}

.header-container {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
}

/* Ancho fijo en px enteros (en vez de width:auto) para evitar que el
   navegador calcule un ancho fraccional y tenga que re-muestrear la imagen
   en un límite de sub-píxel, causa real de la ligera borrosidad — no es un
   problema de resolución de origen. Proporción real 1768/574 = 3.0798;
   197/64 = 3.0781 y 234/76 = 3.0789, desviación imperceptible (<0.1%).
   Tamaños ligeramente mayores que antes (64/76 vs. 60/70) para darle más
   presencia al logo, manteniendo su proporción original exacta. */
.logo-link .logo {
  height: 64px;
  width: 197px;
}

@media (min-width: 901px) {
  .logo-link .logo {
    height: 76px;
    width: 234px;
  }

  .main-nav {
    margin-left: var(--space-md);
  }
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.main-nav a {
  position: relative;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-ink);
  transition: color 270ms var(--ease-elegant);
}

/* Subrayado fino que se expande desde el centro: mismo lenguaje visual
   que .insumos-index__item (índice editorial de Insumos), reutilizado
   aquí para que el hover del nav principal se sienta de la misma familia
   en todo el sitio. */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background-color: var(--color-sand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 270ms var(--ease-elegant);
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: var(--color-espresso);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a,
  .main-nav a::after {
    transition: none;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.header-actions .btn-primary {
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px;
}

.menu-toggle span {
  width: 22px;
  height: 2px;
  background-color: var(--color-ink);
}

@media (max-width: 900px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-paper);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav > ul {
    flex-direction: column;
    padding: var(--space-sm);
    gap: var(--space-sm);
  }

  .menu-toggle {
    display: flex;
    /* Ronda "refinamiento responsive": -2px de padding (8px → 6px) —
       parte de la compactación general del header móvil (~15-20% de
       altura total), junto con el resto de reglas de este bloque. */
    padding: 6px;
  }

  /* Ronda "refinamiento responsive": header móvil ~19% menos alto.
     El logo (mayor contribuyente a la altura) baja de 64px a 52px
     (misma proporción 3.08:1, ver .logo-link .logo base), y el padding
     vertical del header baja de 8px a 6.4px por lado — juntos dan la
     reducción de altura pedida. Gaps internos (contenedor y
     header-actions) también se ajustan para que el selector de idioma,
     el botón y la hamburguesa queden más cerca entre sí, ganando el
     ancho que "Solicitar cotización" necesita para cumplir en una sola
     línea (ver .header-actions .btn-primary, más abajo). */
  .header-container {
    padding: 0.4rem 0.875rem;
    gap: 0.5rem;
  }

  .logo-link .logo {
    height: 52px;
    width: 160px;
  }

  .header-actions {
    gap: 0.5rem;
  }

  /* Botón "Solicitar cotización": más compacto para intentar quedar en
     una sola línea en el ancho disponible del header móvil; si aun así
     no cupiera en los teléfonos más angostos, el texto puede partirse
     a 2 líneas de forma natural (sin white-space:nowrap forzado) —
     nunca se desborda ni se recorta. Color, radio, comportamiento,
     enlace y hover/touch state no cambian (siguen siendo los de
     .btn/.btn-primary, components.css). */
  .header-actions .btn-primary {
    padding: 0.4rem 0.65rem;
    font-size: 0.7rem;
  }
}

/* ---------- HERO ----------
   NOTA: .hero / .hero-content / .hero-media también se reutilizan como
   patrón genérico de 2 columnas en otras secciones (p. ej. la vista
   previa de "Fibra de Coco" en index.html). No quitar el grid de aquí. */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  max-width: var(--container-max);
  margin: 0 auto;
}

.hero-content {
  padding: 0 var(--space-sm);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-media {
    order: -1;
  }
}

/* ---------- HERO DE PORTADA (Inicio) ----------
   Sección exclusiva del tope de index.html, a pantalla completa,
   con fondo provisional de marca. Reemplazar la 2a (última) capa del
   background-image por url("assets/img/hero/tass-hero-invernadero.jpg")
   cuando exista la fotografía real. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--space-xl) + 40px);
  padding-bottom: calc(var(--space-xl) + 20px);
  background-image:
    linear-gradient(to bottom, var(--color-paper), rgba(255, 255, 255, 0) 70px),
    linear-gradient(to top, #f2ebdd 0%, #f8f3e9 50%, #fdfbf6 100%);
  background-repeat: no-repeat;
  background-position: top, center;
  background-size: 100% 100%, cover;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

@media (max-width: 900px) {
  .page-hero {
    padding-top: calc(var(--space-lg) + 30px);
    padding-bottom: var(--space-lg);
  }
}

/* ---------- SECCIONES / CUADRÍCULAS ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .card-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* ---------- PLACEHOLDERS DE IMAGEN ----------
   Contenedor visual que sustituye a una fotografía real que aún no
   ha sido proporcionada. NO es una imagen: es una caja con texto que
   indica exactamente qué fotografía debe colocarse y en qué carpeta.
------------------------------------------------ */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background-color: var(--color-placeholder-bg);
  border: 1px dashed var(--color-placeholder-border);
  border-radius: var(--radius-md);
  color: var(--color-placeholder-text);
  text-align: center;
  padding: var(--space-md);
  width: 100%;
}

.img-placeholder__icon {
  width: 32px;
  height: 32px;
  color: var(--color-placeholder-text);
}

.img-placeholder__title {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.img-placeholder__desc {
  font-size: 0.75rem;
  max-width: 220px;
}

.img-placeholder--hero {
  aspect-ratio: 4 / 3;
  min-height: 320px;
}

.img-placeholder--card {
  aspect-ratio: 4 / 3;
  min-height: 200px;
}

.img-placeholder--wide {
  aspect-ratio: 16 / 6;
  min-height: 220px;
}

.img-placeholder--gallery {
  aspect-ratio: 1 / 1;
  min-height: 160px;
}

/* ---------- CTA ---------- */
.cta-section {
  background-color: var(--color-espresso);
  color: var(--color-paper);
  text-align: center;
}

.cta-section h2 {
  color: var(--color-paper);
  max-width: 560px;
  margin: 0 auto;
}

.cta-section p {
  color: #E9E2D9;
}

/* Homogeneiza la tipografía de la "pregunta" de la CTA cuando la página
   no tiene <h2> (el <p> es el único texto y cumple ese rol) */
.cta-section .container > p:first-child {
  color: var(--color-paper);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  max-width: 560px;
  margin: 0 auto;
}

/* Espacio entre el texto de la CTA y el botón (no altera color/estructura) */
.cta-section .btn {
  margin-top: var(--space-md);
}

/* ---------- FOOTER ----------
   Ronda "rediseño editorial": arquitectura inspirada en referencias
   tipo Greenleaf/Solvix (solo jerarquía, uso del espacio y cierre
   visual — sin copiar color, iconografía ni estructura exacta). Pasa
   de 4 columnas pequeñas a 3 zonas amplias (Marca+Redes / Navegación /
   Contacto+Horario), con más aire y mayor presencia de marca. Fondo
   café oscuro de TASS intacto. ---------- */
.site-footer {
  /* Ronda "microajustes finales": este fondo ya no es el que se ve en
     el 99% del footer (eso vive en .footer-surface, justo abajo) — es
     el "respaldo" que asoma en las dos esquinas superiores, fuera del
     arco del border-radius, donde .footer-surface no pinta nada
     propio. Antes ahí se veía el blanco del body (--color-paper),
     como una cuña blanca; con este respaldo del mismo café que la
     sección anterior (.cta-section en la mayoría de páginas) la
     esquina se ve continua. Contacto y Aviso de Privacidad (sección
     anterior distinta) sobrescriben este color en su propio CSS de
     página (contact.css / privacy.css). */
  background-color: var(--color-espresso);
  color: var(--color-off-white);
}

/* Capa real y visible del footer: mismo café oscuro y mismas esquinas
   redondeadas de siempre (dentro de 18-28px pedido), ahora en un
   wrapper interno en vez de en .site-footer directamente, para poder
   mostrar el respaldo de arriba solo en las esquinas fuera del arco. */
.footer-surface {
  background-color: var(--color-ink);
  border-radius: 22px 22px 0 0;
}

.footer-container {
  max-width: var(--container-max);
  margin: 0 auto;
  /* Más alto y respirado: 80px arriba / 72px abajo (antes 64px ambos),
     dentro de 70-100px / 60-90px pedido. */
  padding: 5rem var(--space-sm) 4.5rem;
  display: grid;
  /* 3 zonas (antes 4 columnas): ~40% / 26% / 34%, dentro de 38-42% /
     24-28% / 30-34% pedido. "Síguenos" ya no es columna propia — vive
     dentro de Marca (ver .footer-social, más abajo). */
  grid-template-columns: 40fr 26fr 34fr;
  gap: var(--space-xl);
}

/* Ronda "refinamiento visual": se retira el gap uniforme (antes
   var(--space-sm) entre los 3 hijos por igual) — logo→tagline se queda
   compacto (relación directa) y tagline→Síguenos gana su propio aire
   (ver .footer-social, más abajo), para que Síguenos se perciba como
   un pequeño bloque propio, no una línea más pegada al párrafo. */
.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo-wrap {
  display: inline-block;
  /* Ronda "logo más grande + sin tagline": con el párrafo
     institucional eliminado, este margin-bottom pasa a ser el único
     espacio entre el final visual del logo y Síguenos (antes medía
     "logo → tagline"). 14px → 32px, dentro de 28-40px pedido,
     proporcional al logo ya más grande. */
  margin-bottom: 2rem;
}

/* Prueba visual "logo en blanco monocromático": no existe en el
   proyecto ningún SVG ni PNG blanco/monocromático del logotipo TASS
   (solo assets/img/logo/tass-logotipo.png, el mismo archivo café que
   usan el header, esta página y las tarjetas de producto de
   Insumos) — se resuelve por CSS, sin tocar el archivo original.
   brightness(0) vuelve opaco cada píxel no transparente a negro
   puro (el alfa/transparencia del PNG no se toca) y invert(1) lo
   pasa a blanco puro: todo el logotipo (TASS, líneas, símbolo,
   texto secundario) queda blanco sólido, sin verde/azul/café, sin
   halos ni grises (reemplaza el filter café/caramelo de la ronda
   anterior). Selector exclusivo de esta clase — el logo del header
   (.logo) y el de las tarjetas de Insumos (sin clase) no se ven
   afectados. */
/* Ronda "logo más grande + sin tagline": 213×69 → 245×79 (+15%,
   dentro de +12-18% pedido), misma proporción (ambos lados escalados
   por el mismo factor), mismo archivo/color/filtro/alineación. */
.footer-logo {
  width: 245px;
  height: 79px;
  filter: brightness(0) invert(1);
}

/* Se elimina .footer-tagline: el <p> "Tecnología agrícola en
   sistemas sostenibles" se quitó del HTML (las 9 páginas comparten
   este footer) por redundante con el propio logotipo — esta regla ya
   no tiene elemento al que aplicar. */

/* Ronda "logo más grande + sin tagline": con el párrafo institucional
   fuera, el espacio entre el logo y Síguenos ahora depende solo de
   .footer-logo-wrap (margin-bottom, más abajo) — se retira el
   margin-top que antes medía "tagline → Síguenos" (ya no aplica) para
   no sumar dos espacios y dejar un hueco muerto. */
.footer-social {
  margin-top: 0;
}

/* Ronda "refinamiento visual": 13.6px → 15px (dentro de 13-15px
   pedido, tope del rango — antes se sentían pequeños para el espacio
   disponible). Peso/uppercase/tracking sin cambio. */
.footer-nav h4,
.footer-contact h4,
.footer-social h4,
.footer-schedule h4 {
  color: var(--color-off-white);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-sm);
}

/* Ronda "microajustes finales": las 3 zonas ya comparten el mismo eje
   superior de grid (align-items: start, por defecto en
   .footer-container) — el logo (imagen, sin leading tipográfico)
   y estos dos encabezados (texto, con el espacio de línea propio de
   Manrope por encima de la caja alta) no se percibían alineados por
   eso. Se ajusta solo aquí (no en .footer-social/.footer-schedule,
   que viven dentro del bloque de marca/contacto y no forman parte de
   la queja) el line-height del propio encabezado — interno a su caja
   de texto, sin padding/margin negativo ni transform/position — para
   que "NAVEGACIÓN" y "CONTACTO" se sientan ~8-15px más arriba, a la
   altura óptica del logo. Texto en mayúsculas sin descendentes: no
   hay riesgo de recorte visual. */
.footer-nav h4,
.footer-contact h4 {
  line-height: 0.9;
}

.footer-nav ul li {
  margin-bottom: 18px;
}

.footer-nav ul li:last-child {
  margin-bottom: 0;
}

/* 17px → 18px (tope de 16-18px pedido). Peso sin cambio (regular): más
   grande no es más pesado. */
.footer-nav a {
  color: #C7C2BB;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  transition: color 250ms var(--ease-elegant);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--color-paper);
}

/* 16px → 18px (tope de 16-18px pedido). Peso sin cambio (regular). */
.footer-contact p {
  color: #C7C2BB;
  font-weight: 400;
  font-size: 1.125rem;
  margin-bottom: 6px;
}

.footer-contact a {
  transition: color 250ms var(--ease-elegant);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--color-paper);
}

/* ---------- Barra de contacto del footer: teléfono/correo con icono y
   horario en varias líneas. Compartido por todas las páginas del sitio
   (mismo footer en cada una), por eso vive aquí sin prefijo de página. ---------- */
.footer-contact__block {
  margin-bottom: var(--space-xs);
}

.footer-contact__line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-contact__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Horario de atención: agrupado con Contacto en la misma zona (antes
   una cuarta columna propia). Cada renglón intenta "Lun-Vie
   8:00 am - 5:30 pm" en una sola línea; flex-wrap como respaldo si el
   ancho disponible no alcanza, en vez de forzarlo. */
.footer-schedule {
  margin-top: var(--space-sm);
}

/* Ronda "microajustes finales": columna de día 80px → 70px (dentro de
   65-80px pedido) y gap horizontal 12px → 6px (reducción de ~16px,
   dentro de 10-20px pedido) — "Lun–Vie"/"Sáb" y su horario se sienten
   como un par claramente relacionado en vez de separados. Sin
   space-between: la columna fija + auto ya evita llevar el horario a
   los extremos opuestos de la zona. */
.footer-schedule__row {
  display: grid;
  grid-template-columns: 70px auto;
  gap: 4px 6px;
  color: #C7C2BB;
  font-weight: 400;
  font-size: 1.125rem;
  margin-bottom: 6px;
}

.footer-schedule__row:last-child {
  margin-bottom: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* 16px → 18px (tope de 16-18px pedido). Peso sin cambio (regular). */
.footer-social__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C7C2BB;
  font-weight: 400;
  font-size: 1.125rem;
  transition: color 250ms var(--ease-elegant);
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
  color: var(--color-paper);
}

.footer-social__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Ronda "microajustes finales, franja inferior": padding vertical
   13px → 10px (deja el horizontal, var(--space-sm), sin cambio) —
   ~13% menos alto, dentro de 10-15% pedido. Tamaño de texto 13px y
   color #A9A49D sin cambio (ya dentro de lo pedido en la ronda
   anterior). Copyright (izquierda) + Aviso de Privacidad (derecha) y
   su alineación (flex, space-between, align-items: center) ya
   existían — sin cambios ahí. flex-wrap ya apila ambos en móvil
   cuando no caben en una línea, con el mismo gap como separación. */
.footer-bottom-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: 14px;
  color: #A9A49D;
}

/* El <p> del copyright heredaba el color oscuro global de "p"
   (base.css, --color-ink, pensado para texto sobre fondo claro) en
   vez del tono claro de .footer-bottom-inner — quedaba prácticamente
   invisible sobre el café oscuro del footer. "Aviso de Privacidad" es
   un <a> (hereda color por defecto, base.css) y sí tomaba el tono
   correcto; esta regla iguala al <p> con el mismo color heredado, sin
   inventar un tono nuevo. */
.footer-bottom-inner p {
  color: inherit;
}

.footer-bottom-inner a:hover {
  color: var(--color-paper);
}

/* ---------- Responsive ----------
   Tablet (701-900px): Marca ocupa su propia fila completa; Navegación
   y Contacto comparten la segunda fila (2 zonas, en vez de 3 columnas
   angostas). Móvil (≤700px): todo apilado en una sola columna, en el
   orden natural del HTML (Marca+Síguenos → Navegación → Contacto →
   Horario). ---------- */
@media (min-width: 701px) and (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .footer-container {
    grid-template-columns: 1fr;
    /* Ronda "refinamiento responsive": el footer móvil se sentía
       demasiado largo. -32px entre zonas (64px → 32px) es la primera
       de varias reducciones de este bloque (padding exterior, logo,
       gaps de navegación/contacto) que juntas bajan la altura total
       del footer móvil ~25-30% sin quitar información.
       Ronda "respiración entre capítulos": +15.6% (32px → 37px, dentro
       de ~15% pedido para Síguenos→Navegación) — este gap es el mismo
       para las 2 separaciones entre las 3 zonas del grid (Marca→Nav,
       Nav→Contacto); Nav→Contacto gana un poco más aún vía
       .footer-nav (margin-bottom, más abajo) para que sea, de las dos,
       la que más respira. Gaps INTERNOS de cada zona (enlaces de nav,
       teléfono/WhatsApp/correo, Lun-Vie/Sáb, ícono+etiqueta de
       Instagram): sin cambio, ver sus reglas propias.
       Ronda "armonizar ritmo vertical": 37px → 38px — ajuste mínimo
       para que las 5 separaciones entre capítulos del footer (logo→
       Síguenos, Síguenos→Nav, Nav→Contacto, Contacto→Horario,
       Horario→Legal) queden dentro de un mismo rango coherente
       (36-42px, dentro de los 36-48px pedidos), en vez de mezclar
       valores muy dispares (antes 22/37/39/11/41px — dos de ellos muy
       por debajo del resto). Ver .footer-logo-wrap, .footer-nav y
       .footer-schedule más abajo para el resto de la ronda. */
    gap: 2.375rem;
    /* Antes 5rem/4.5rem (80px/72px, sin variante móvil) — -45%/-50%,
       el mayor contribuyente individual a la reducción de altura.
       Ronda "respiración entre capítulos": +9.1%/+8.3% (44px→48px /
       36px→39px, dentro de 8-10% pedido) — un poco más de aire general
       arriba/abajo del footer móvil, sin exagerar.
       Ronda "armonizar ritmo vertical": padding-top (48px, fuera del
       alcance de esta ronda — no es una de las 5 separaciones entre
       capítulos listadas) sin cambio. padding-bottom 39px → 40px: pasa
       a ser directamente el espacio Horario→Legal completo (antes 39px
       + 2px extra vía .footer-schedule, ver más abajo — se simplifica
       a un solo valor en vez de dos sumados). */
    padding: 3rem var(--space-sm) 2.5rem;
  }

  /* Logo: -18% (245×79 → 200×64, dentro de 15-20% pedido). Sigue
     siendo el mismo archivo/filtro/alineación, solo más chico. */
  .footer-logo {
    width: 200px;
    height: 64px;
  }

  .footer-logo-wrap {
    /* 32px → 20px: logo→Síguenos más compacto, jerarquía frente al
       resto de gaps de este bloque conservada (sigue siendo el mayor
       espacio dentro del bloque de marca).
       Ronda "respiración entre capítulos": +10% (20px → 22px, dentro
       de 10-15% pedido) — logo y Síguenos se leen como dos capítulos
       algo más distintos, sin perder lo compacto del bloque de marca.
       Ronda "armonizar ritmo vertical": 22px → 36px, para entrar en el
       mismo rango coherente (36-42px) que las otras 4 separaciones
       entre capítulos del footer — antes era, con Contacto→Horario, el
       espacio más "pegado" de los cinco, fuera de tono con el resto. */
    margin-bottom: 2.25rem;
  }

  .footer-nav h4,
  .footer-contact h4,
  .footer-social h4,
  .footer-schedule h4 {
    /* 16px → 10px: encabezado→contenido de cada grupo (Síguenos→
       navegación, etc.) más ajustado. Ronda "respiración entre
       capítulos": este gap es INTERNO a cada bloque (encabezado→su
       propio contenido, no entre capítulos) — se deja sin cambio. */
    margin-bottom: 0.625rem;
  }

  .footer-nav ul li {
    /* 18px → 12px (-33%, dentro de 20-30% pedido de reducción de
       line-height/gap): los enlaces de navegación se sentían muy
       separados entre sí. Área táctil sigue cómoda (texto 15px + este
       gap + line-height propio). Ronda "respiración entre capítulos":
       gap interno entre enlaces, sin cambio. */
    margin-bottom: 12px;
  }

  /* Ronda "respiración entre capítulos": +2px extra sobre el gap
     compartido de .footer-container (37px) para que Navegación→Contacto
     (39px total, dentro de 15-20% pedido) sea, de las dos separaciones
     del grid, la que más respira ("uno de los espacios que más debe
     respirar") — sin tocar el gap compartido en sí (Marca→Nav se queda
     en los 37px ya ajustados arriba).
     Ronda "armonizar ritmo vertical": el extra sube de 2px a 4px (con
     el gap compartido ahora en 38px, Navegación→Contacto queda en 42px
     total) — el tope superior del rango coherente (36-42px), acorde a
     su jerarquía como el espacio que más debe respirar de los cinco,
     sin salirse del conjunto. */
  .footer-nav {
    margin-bottom: 0.25rem;
  }

  .footer-nav a,
  .footer-contact p,
  .footer-schedule__row,
  .footer-social__link {
    /* 18px → 15px: teléfono/WhatsApp/correo/horario/redes/navegación
       un poco más compactos (menos alto por línea), legibilidad
       intacta. Mismos datos, mismos enlaces. */
    font-size: 0.9375rem;
  }

  .footer-schedule {
    /* 16px → 10px: contacto→horario más ajustado.
       Ronda "respiración entre capítulos": +10% (10px → 11px, dentro
       de 10-15% pedido) — Contacto→Horario respira un poco más, sin
       tocar los gaps internos de Contacto (teléfono/WhatsApp/correo,
       sin cambio) ni los de Horario (Lun-Vie→Sáb, sin cambio).
       Ronda "armonizar ritmo vertical": 11px → 37px — era, de largo, la
       separación más "pegada" de las cinco (muy por debajo del resto),
       ahora entra en el mismo rango coherente (36-42px) que las demás,
       sin tocar los gaps internos de Contacto ni de Horario. */
    margin-top: 2.3125rem;
    /* Horario→Legal: antes 2px extra aquí + 39px de padding-bottom en
       .footer-container = 41px. Ronda "armonizar ritmo vertical": se
       simplifica a un solo valor — .footer-container.padding-bottom
       pasa a 40px directamente (ver arriba) y este extra ya no hace
       falta. */
  }
}