/* ==========================================================================
   Pakefir — Hoja de estilos principal
   --------------------------------------------------------------------------
   Organización del archivo:
     1.  Tokens de diseño (variables CSS)
     2.  Reset y base
     3.  Utilidades de layout
     4.  Tipografía
     5.  Botones y CTAs
     6.  Header y navegación
     7.  Footer
     8.  WhatsApp flotante
     9.  Componentes reutilizables (tarjetas, chips, badges, acordeón…)
     10. Secciones de la página de inicio
     11. Plantilla de página de producto
     12. Página Nosotros
     13. Página Contacto
     14. Responsive
     15. Accesibilidad y motion
   ========================================================================== */


/* ==========================================================================
   1. TOKENS DE DISEÑO
   ========================================================================== */

:root {
  /* --- Color: superficies --- */
  --color-crema: #FAF9F5;          /* Fondo principal */
  --color-arena: #F2E9DC;          /* Fondo alternativo cálido */
  --color-arena-suave: #F7F1E8;    /* Intermedio entre crema y arena */
  --color-blanco: #FFFFFF;

  /* --- Color: marca --- */
  --color-verde: #2E7D32;          /* Verde principal */
  --color-verde-oscuro: #256628;   /* Hover / contraste */
  --color-verde-profundo: #2C3D22; /* Bloques oscuros y footer */
  --color-verde-suave: #E8F0E4;    /* Fondos de acento muy claros */
  --color-oliva: #6B7F5A;          /* Acento secundario */

  /* --- Color: acentos tierra --- */
  --color-dorado: #C9A961;         /* Acento cálido / botón secundario footer */
  --color-dorado-claro: #E4D3AC;
  --color-terracota: #B5714F;

  /* --- Color: texto --- */
  --color-titulo: #3F3F46;
  --color-texto: #555555;
  --color-texto-suave: #7A7A7A;
  --color-texto-inverso: #F5F2EA;
  --color-texto-inverso-suave: #C9C7BC;

  /* --- Color: bordes y estado --- */
  --color-borde: #E6DFD3;
  --color-borde-fuerte: #D6CCBB;
  --color-error: #B3261E;
  --color-exito: #2E7D32;

  /* --- Tipografía --- */
  --fuente-serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  --fuente-sans: "Jost", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida (clamp: móvil → escritorio) */
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --texto-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --texto-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --texto-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --texto-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --texto-4xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --interlineado-apretado: 1.15;
  --interlineado-titulo: 1.25;
  --interlineado-base: 1.7;

  /* --- Espaciado (escala de 4px) --- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.25rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-10: 2.5rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-20: 5rem;
  --esp-24: 6rem;

  /* Padding vertical de sección, fluido */
  --seccion-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* --- Contenedor --- */
  --ancho-contenido: 1200px;
  --ancho-estrecho: 760px;
  --padding-lateral: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* --- Radios --- */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 16px;
  --radio-xl: 24px;
  --radio-full: 999px;

  /* --- Sombras (discretas, cálidas) --- */
  --sombra-sm: 0 1px 2px rgba(63, 51, 34, 0.05);
  --sombra-md: 0 4px 12px rgba(63, 51, 34, 0.07);
  --sombra-lg: 0 10px 30px rgba(63, 51, 34, 0.09);
  --sombra-flotante: 0 6px 20px rgba(37, 102, 40, 0.30);

  /* --- Transiciones --- */
  --transicion-rapida: 150ms ease;
  --transicion-base: 250ms ease;

  /* --- Alturas y capas --- */
  --altura-header: 76px;
  --z-header: 100;
  --z-menu: 110;
  --z-flotante: 90;
}


/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Compensa el header sticky al saltar a un ancla */
  scroll-padding-top: calc(var(--altura-header) + var(--esp-4));
  -webkit-text-size-adjust: 100%;
  /* `clip` (a diferencia de `hidden`) recorta también los elementos con
     position: fixed, como el panel del menú móvil cuando está cerrado.
     Es lo que garantiza que nunca haya scroll horizontal. */
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--color-crema);
  color: var(--color-texto);
  font-family: var(--fuente-sans);
  font-size: var(--texto-md);
  line-height: var(--interlineado-base);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--color-verde); }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Oculta visualmente pero mantiene accesible para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace para saltar al contenido — visible solo al enfocar con teclado */
.saltar-contenido {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 200;
  padding: var(--esp-3) var(--esp-5);
  background: var(--color-verde);
  color: var(--color-blanco);
  border-radius: var(--radio-md);
  font-weight: var(--peso-semi);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transicion-base);
}
.saltar-contenido:focus { transform: translateY(0); }


/* ==========================================================================
   3. UTILIDADES DE LAYOUT
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--padding-lateral);
}

.contenedor-estrecho {
  width: 100%;
  max-width: var(--ancho-estrecho);
  margin-inline: auto;
  padding-inline: var(--padding-lateral);
}

.seccion { padding-block: var(--seccion-y); }
.seccion--compacta { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }

/* Fondos alternos de sección */
.fondo-crema { background-color: var(--color-crema); }
.fondo-arena { background-color: var(--color-arena); }
.fondo-arena-suave { background-color: var(--color-arena-suave); }
.fondo-verde  { background-color: var(--color-verde-profundo); }

.centrado { text-align: center; }


/* ==========================================================================
   4. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-serif);
  color: var(--color-titulo);
  line-height: var(--interlineado-titulo);
  margin: 0 0 var(--esp-4);
  font-weight: var(--peso-bold);
}

h1 { font-size: var(--texto-4xl); line-height: var(--interlineado-apretado); }
h2 { font-size: var(--texto-3xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

p { margin: 0 0 var(--esp-4); }
p:last-child { margin-bottom: 0; }

/* Encabezado de sección centrado con adorno */
.encabezado-seccion {
  max-width: 680px;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.25rem);
  text-align: center;
}
.encabezado-seccion h2 { color: var(--color-verde-profundo); }
.encabezado-seccion p {
  font-size: var(--texto-lg);
  color: var(--color-texto);
}

/* Adorno vegetal bajo los títulos de sección */
.adorno {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}
.adorno::before,
.adorno::after {
  content: "";
  width: clamp(32px, 8vw, 64px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-borde-fuerte), transparent);
}
.adorno img { width: 18px; height: 18px; opacity: 0.75; }

/* Etiqueta pequeña sobre los títulos */
.etiqueta-seccion {
  display: inline-block;
  font-family: var(--fuente-sans);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oliva);
  margin-bottom: var(--esp-3);
}

.texto-destacado {
  font-size: var(--texto-lg);
  color: var(--color-texto);
}


/* ==========================================================================
   5. BOTONES Y CTAs
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.875rem 1.75rem;
  min-height: 48px;              /* objetivo táctil cómodo */
  border: 1px solid transparent;
  border-radius: var(--radio-md);
  font-family: var(--fuente-sans);
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion-base),
              border-color var(--transicion-base),
              color var(--transicion-base),
              transform var(--transicion-rapida),
              box-shadow var(--transicion-base);
}

.boton:active { transform: translateY(1px); }

.boton svg,
.boton img { width: 20px; height: 20px; flex-shrink: 0; }

/* Primario: verde sólido */
.boton--primario {
  background-color: var(--color-verde);
  color: var(--color-blanco);
  box-shadow: var(--sombra-sm);
}
.boton--primario:hover {
  background-color: var(--color-verde-oscuro);
  box-shadow: var(--sombra-md);
}

/* Secundario: contorno */
.boton--secundario {
  background-color: transparent;
  color: var(--color-verde-oscuro);
  border-color: var(--color-verde);
}
.boton--secundario:hover {
  background-color: var(--color-verde);
  color: var(--color-blanco);
}

/* Sobre fondos oscuros */
.boton--claro {
  background-color: var(--color-crema);
  color: var(--color-verde-profundo);
}
.boton--claro:hover { background-color: var(--color-blanco); }

.boton--contorno-claro {
  background-color: transparent;
  color: var(--color-texto-inverso);
  border-color: rgba(245, 242, 234, 0.5);
}
.boton--contorno-claro:hover {
  background-color: rgba(245, 242, 234, 0.12);
  border-color: var(--color-texto-inverso);
}

/* Dorado (footer / suscripción) */
.boton--dorado {
  background-color: var(--color-dorado);
  color: #3A2E14;
}
.boton--dorado:hover { background-color: var(--color-dorado-claro); }

.boton--ancho { width: 100%; }

/* Grupo de botones */
.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
}
.grupo-botones--centrado { justify-content: center; }

/* Enlace con flecha ("Descubrir Kéfir →") */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-verde);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.enlace-flecha .flecha {
  transition: transform var(--transicion-base);
  display: inline-block;
}
.enlace-flecha:hover { color: var(--color-verde-oscuro); }
.enlace-flecha:hover .flecha { transform: translateX(4px); }

/* Foco visible consistente en todo el sitio */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-verde);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}


/* ==========================================================================
   6. HEADER Y NAVEGACIÓN
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-borde);
  transition: box-shadow var(--transicion-base);
}
.header--elevado { box-shadow: var(--sombra-md); }

.header__interior {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: var(--altura-header);
}

/* --- Logotipo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.logo__marca {
  font-family: var(--fuente-serif);
  font-size: 1.6rem;
  font-weight: var(--peso-bold);
  font-style: italic;
  color: var(--color-verde-profundo);
  line-height: 1;
}
.logo__hoja { width: 20px; height: 20px; }
.logo--claro .logo__marca { color: var(--color-texto-inverso); }

/* --- Navegación de escritorio --- */
.nav {
  display: flex;
  align-items: center;
  position: relative; /* ancla el botón de cierre (.nav__cerrar) en móvil */
}
.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 1.2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__enlace {
  display: block;
  padding: var(--esp-2) var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-titulo);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color var(--transicion-base);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: var(--esp-1);
  right: var(--esp-1);
  bottom: 0;
  height: 2px;
  background-color: var(--color-verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion-base);
}
.nav__enlace:hover { color: var(--color-verde); }
.nav__enlace:hover::after { transform: scaleX(1); }

/* Página actual */
.nav__enlace[aria-current="page"] { color: var(--color-verde); }
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); }

/* --- Acciones del header --- */
.header__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-shrink: 0;
}

.header__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-full);
  background-color: #25D366;
  transition: background-color var(--transicion-base), transform var(--transicion-rapida);
}
.header__whatsapp:hover { background-color: #1EBE5A; transform: scale(1.06); }
.header__whatsapp img { width: 22px; height: 22px; }

/* --- Botón hamburguesa (solo móvil) --- */
.hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburguesa__barras {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-titulo);
  transition: background-color var(--transicion-rapida);
}
.hamburguesa__barras::before,
.hamburguesa__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: var(--color-titulo);
  transition: transform var(--transicion-base), top var(--transicion-base);
}
.hamburguesa__barras::before { top: -6px; }
.hamburguesa__barras::after  { top: 6px; }

/* Estado abierto: se convierte en una X */
.hamburguesa[aria-expanded="true"] .hamburguesa__barras { background-color: transparent; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barras::before { top: 0; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__barras::after  { top: 0; transform: rotate(-45deg); }

/* Botón de cierre dentro del panel móvil (X visible arriba a la derecha).
   Solo se muestra cuando el panel actúa como menú deslizante (ver el
   breakpoint @max-width:960px más abajo, donde se hace visible). */
.nav__cerrar {
  display: none;
  position: absolute;
  top: var(--esp-4);
  right: var(--esp-4);
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  cursor: pointer;
  color: var(--color-titulo);
}
.nav__cerrar:hover { border-color: var(--color-verde); color: var(--color-verde); }
.nav__cerrar svg { width: 18px; height: 18px; display: block; }

/* Capa oscura tras el menú móvil */
.superposicion-menu {
  position: fixed;
  inset: 0;
  background-color: rgba(44, 61, 34, 0.45);
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-menu);
  transition: opacity var(--transicion-base), visibility var(--transicion-base);
}
.superposicion-menu.activa { opacity: 1; visibility: visible; }

body.menu-abierto { overflow: hidden; }


/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.footer {
  background-color: var(--color-verde-profundo);
  color: var(--color-texto-inverso-suave);
  padding-top: var(--seccion-y);
}

.footer__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.2fr 1.3fr;
  gap: var(--esp-10) var(--esp-8);
  padding-bottom: var(--esp-12);
}

.footer__titulo {
  font-family: var(--fuente-sans);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-texto-inverso);
  margin-bottom: var(--esp-5);
}

.footer__descripcion {
  margin-top: var(--esp-4);
  font-size: var(--texto-sm);
  max-width: 30ch;
  line-height: 1.75;
}

.footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}
/* La navegación del footer usa dos columnas como en la referencia */
.footer__lista--dos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
}
.footer__enlace {
  color: var(--color-texto-inverso-suave);
  text-decoration: none;
  font-size: var(--texto-sm);
  transition: color var(--transicion-base);
}
.footer__enlace:hover { color: var(--color-dorado); }

/* Contacto con iconos */
.footer__contacto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-4);
}
.footer__contacto li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
}
.footer__contacto img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer__contacto a {
  color: var(--color-texto-inverso-suave);
  text-decoration: none;
}
.footer__contacto a:hover { color: var(--color-dorado); }

/* Redes sociales */
.footer__redes {
  display: flex;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}
.footer__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: var(--radio-full);
  transition: background-color var(--transicion-base), border-color var(--transicion-base);
}
.footer__red img { width: 18px; height: 18px; }
.footer__red:hover {
  background-color: rgba(201, 169, 97, 0.18);
  border-color: var(--color-dorado);
}

/* Formulario de suscripción */
.footer__suscripcion p {
  font-size: var(--texto-sm);
  margin-bottom: var(--esp-4);
  line-height: 1.7;
}
.formulario-suscripcion { display: grid; gap: var(--esp-3); }
.formulario-suscripcion input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: 46px;
  background-color: var(--color-crema);
  border: 1px solid transparent;
  border-radius: var(--radio-md);
  color: var(--color-titulo);
  font-size: var(--texto-sm);
}
.formulario-suscripcion input::placeholder { color: var(--color-texto-suave); }
.formulario-suscripcion .boton { min-height: 44px; padding-block: 0.65rem; }

/* Mensaje de respuesta de la suscripción */
.suscripcion-mensaje {
  font-size: var(--texto-sm);
  min-height: 1.25rem;
  margin: 0;
}
.suscripcion-mensaje--exito { color: #A8D5A2; }
.suscripcion-mensaje--error { color: #F2B8B5; }

/* Barra inferior */
.footer__base {
  border-top: 1px solid rgba(245, 242, 234, 0.16);
  padding-block: var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  font-size: var(--texto-xs);
}
.footer__legales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-6);
}
.footer__legales a {
  color: var(--color-texto-inverso-suave);
  text-decoration: none;
}
.footer__legales a:hover { color: var(--color-dorado); }


/* ==========================================================================
   8. WHATSAPP FLOTANTE
   ========================================================================== */

.whatsapp-flotante {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: var(--z-flotante);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background-color: #25D366;
  border-radius: var(--radio-full);
  box-shadow: var(--sombra-flotante);
  transition: transform var(--transicion-base), background-color var(--transicion-base);
}
.whatsapp-flotante:hover {
  background-color: #1EBE5A;
  transform: scale(1.07);
}
.whatsapp-flotante img { width: 30px; height: 30px; }


/* ==========================================================================
   9. COMPONENTES REUTILIZABLES
   ========================================================================== */

/* --- Tarjeta de producto (rejilla de líneas) --- */
.tarjeta-producto {
  display: flex;
  flex-direction: column;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion-base), box-shadow var(--transicion-base);
}
.tarjeta-producto:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-lg);
}
.tarjeta-producto__figura {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-arena);
}
.tarjeta-producto__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.tarjeta-producto:hover .tarjeta-producto__figura img { transform: scale(1.05); }

.tarjeta-producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--esp-5);
}
.tarjeta-producto__titulo {
  font-size: var(--texto-lg);
  margin-bottom: var(--esp-2);
  color: var(--color-verde-profundo);
}
.tarjeta-producto__texto {
  font-size: var(--texto-sm);
  line-height: 1.65;
  margin-bottom: var(--esp-5);
  flex: 1;
}
/* Toda la tarjeta es clicable a través del enlace del título.
   El pseudo-elemento cubre la tarjeta completa, así el área de clic es amplia
   sin anidar el enlace alrededor de todo el contenido. */
.tarjeta-producto__enlace {
  color: inherit;
  text-decoration: none;
}
.tarjeta-producto__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}
.tarjeta-producto { position: relative; }

/* --- Rejillas --- */
.rejilla {
  display: grid;
  gap: var(--esp-6);
}
.rejilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Franja de diferenciadores --- */
.franja-beneficios {
  background-color: var(--color-arena-suave);
  border-block: 1px solid var(--color-borde);
  padding-block: var(--esp-8);
}
.franja-beneficios__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.beneficio {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
}
.beneficio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--color-dorado-claro);
  border-radius: var(--radio-full);
  background-color: rgba(228, 211, 172, 0.22);
}
.beneficio__icono img { width: 24px; height: 24px; }
.beneficio__titulo {
  font-family: var(--fuente-sans);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-titulo);
  margin: 0 0 2px;
}
.beneficio__texto {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  line-height: 1.55;
  margin: 0;
}

/* --- Tarjeta de valor / característica --- */
.tarjeta-valor {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra-sm);
  height: 100%;
}
.tarjeta-valor__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--esp-4);
  background-color: var(--color-verde-suave);
  border-radius: var(--radio-full);
}
.tarjeta-valor__icono img { width: 26px; height: 26px; }
.tarjeta-valor h3 {
  font-size: var(--texto-lg);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-2);
}
.tarjeta-valor p {
  font-size: var(--texto-sm);
  line-height: 1.65;
  margin: 0;
}

/* --- Chips de selección (sabores, opciones) --- */
.grupo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}
.chip {
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-titulo);
  cursor: pointer;
  transition: background-color var(--transicion-base),
              border-color var(--transicion-base),
              color var(--transicion-base);
}
.chip:hover {
  border-color: var(--color-verde);
  color: var(--color-verde-oscuro);
}
.chip[aria-pressed="true"] {
  background-color: var(--color-verde-profundo);
  border-color: var(--color-verde-profundo);
  color: var(--color-blanco);
}

.chips-etiqueta {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fuente-sans);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-3);
}
.chips-etiqueta img { width: 16px; height: 16px; }

/* --- Insignias de atributo (Artesanal, Cultivos vivos…) --- */
.lista-insignias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.insignia {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-texto);
}
.insignia__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-dorado-claro);
  border-radius: var(--radio-full);
  background-color: rgba(228, 211, 172, 0.2);
  flex-shrink: 0;
}
.insignia__icono img { width: 18px; height: 18px; }

/* --- Acordeón accesible --- */
.acordeon {
  border-top: 1px solid var(--color-borde);
}
.acordeon__item { border-bottom: 1px solid var(--color-borde); }

.acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  width: 100%;
  padding: var(--esp-5) var(--esp-2);
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--fuente-sans);
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  color: var(--color-titulo);
  cursor: pointer;
  transition: color var(--transicion-base);
}
.acordeon__boton:hover { color: var(--color-verde); }
.acordeon__boton[aria-expanded="true"] {
  color: var(--color-verde-profundo);
  font-weight: var(--peso-semi);
}

.acordeon__icono {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
/* Signo "+" construido con dos barras; la vertical desaparece al abrir */
.acordeon__icono::before,
.acordeon__icono::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform var(--transicion-base), opacity var(--transicion-base);
}
.acordeon__icono::before {
  top: 50%; left: 0;
  width: 16px; height: 2px;
  transform: translateY(-50%);
}
.acordeon__icono::after {
  left: 50%; top: 0;
  width: 2px; height: 16px;
  transform: translateX(-50%);
}
.acordeon__boton[aria-expanded="true"] .acordeon__icono::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicion-base);
}
.acordeon__panel[data-abierto="true"] { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p {
  padding: 0 var(--esp-2) var(--esp-5);
  font-size: var(--texto-sm);
  line-height: 1.75;
  margin: 0;
  max-width: 68ch;
}

/* --- Breadcrumb --- */
.migas {
  padding-block: var(--esp-5);
  font-size: var(--texto-xs);
}
.migas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.migas__lista li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--color-texto-suave);
}
.migas__lista li + li::before {
  content: "›";
  color: var(--color-borde-fuerte);
}
.migas a {
  color: var(--color-texto);
  text-decoration: none;
}
.migas a:hover { color: var(--color-verde); text-decoration: underline; }
.migas [aria-current="page"] {
  color: var(--color-verde-profundo);
  font-weight: var(--peso-semi);
}

/* --- Bloque CTA final --- */
.bloque-cta {
  position: relative;
  background-color: var(--color-arena);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-6);
  overflow: hidden;
}
.bloque-cta__texto { max-width: 52ch; }
.bloque-cta h2 {
  font-size: var(--texto-2xl);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-2);
}
.bloque-cta p {
  font-size: var(--texto-base);
  margin: 0;
}
/* Adornos vegetales en las esquinas */
.bloque-cta__hoja {
  position: absolute;
  width: clamp(70px, 12vw, 130px);
  opacity: 0.5;
  pointer-events: none;
}
.bloque-cta__hoja--izq { left: -14px; bottom: -18px; }
.bloque-cta__hoja--der { right: -14px; bottom: -18px; transform: scaleX(-1); }


/* ==========================================================================
   10. SECCIONES DE LA PÁGINA DE INICIO
   ========================================================================== */

/* --- Hero principal --- */
.hero {
  position: relative;
  background-color: var(--color-arena);
  overflow: hidden;
}
/* La columna de texto es algo más ancha que la de imagen, como en la referencia:
   así el H1 respeta su salto de línea en dos renglones y los CTAs caben en fila. */
.hero__interior {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  min-height: clamp(460px, 62vh, 600px);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.hero__contenido { max-width: 40rem; }
.hero__titulo {
  /* Tamaño propio, algo menor que --texto-4xl, para que el titular respete
     su salto en dos líneas dentro de la columna de texto. */
  font-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.05rem);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-5);
}
/* La segunda línea del H1 en tono tierra, como la referencia */
.hero__titulo .linea-2 { color: #4A3B2A; display: block; }

.hero__texto {
  font-size: var(--texto-lg);
  max-width: 46ch;
  margin-bottom: var(--esp-8);
}
.hero__figura {
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--sombra-lg);
}
.hero__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Sección de historia (imagen + bloque verde) --- */
.historia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-md);
}
.historia__texto {
  background-color: var(--color-verde-profundo);
  color: var(--color-texto-inverso-suave);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.historia__texto h2 {
  color: var(--color-texto-inverso);
  font-size: var(--texto-2xl);
}
.historia__texto p { line-height: 1.8; }
.historia__texto .boton { align-self: flex-start; margin-top: var(--esp-4); }
.historia__figura {
  margin: 0;
  min-height: 320px;
}
.historia__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Sección de filosofía con imagen lateral --- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
}
.duo--invertido .duo__figura { order: 2; }
.duo__figura {
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--sombra-md);
}
.duo__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.duo__contenido h2 {
  color: var(--color-verde-profundo);
  font-size: var(--texto-2xl);
}

/* Lista con viñetas de check */
.lista-check {
  list-style: none;
  margin: var(--esp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-4);
}
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
  line-height: 1.65;
}
.lista-check img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
}
.lista-check strong {
  display: block;
  color: var(--color-titulo);
  font-weight: var(--peso-semi);
}

/* Franja de compromisos (bajo la historia) */
.franja-compromisos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-5);
  list-style: none;
  margin: 0;
  padding: var(--esp-6) 0 0;
}
.franja-compromisos li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-xs);
  color: var(--color-texto);
}
.franja-compromisos img { width: 22px; height: 22px; flex-shrink: 0; }


/* ==========================================================================
   11. PLANTILLA DE PÁGINA DE PRODUCTO
   ========================================================================== */

.producto-hero {
  background-color: var(--color-arena-suave);
  padding-bottom: var(--seccion-y);
}
.producto-hero__interior {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: start;
}

/* --- Galería --- */
.galeria__principal {
  margin: 0 0 var(--esp-4);
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-arena);
  box-shadow: var(--sombra-md);
}
.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Las 5 miniaturas se reparten en una sola fila, como en la referencia. */
.galeria__miniaturas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.galeria__miniatura {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radio-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color var(--transicion-base), opacity var(--transicion-base);
  opacity: 0.75;
}
.galeria__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galeria__miniatura:hover { opacity: 1; }
.galeria__miniatura[aria-current="true"] {
  border-color: var(--color-verde);
  opacity: 1;
}

/* --- Información del producto --- */
.producto-info__titulo {
  color: var(--color-verde-profundo);
  font-size: var(--texto-3xl);
  margin-bottom: var(--esp-2);
}
.producto-info__subtitulo {
  font-family: var(--fuente-sans);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  color: var(--color-titulo);
  margin-bottom: var(--esp-5);
}
.producto-info__descripcion {
  font-size: var(--texto-md);
  max-width: 48ch;
  margin-bottom: var(--esp-6);
}
.producto-info .lista-insignias { margin-bottom: var(--esp-8); }

/* Panel de selección de opciones */
.panel-opciones {
  background-color: var(--color-arena);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
}
.panel-opciones__grupo + .panel-opciones__grupo { margin-top: var(--esp-6); }
.panel-opciones .boton { margin-top: var(--esp-8); }

/* Resumen de la selección actual */
.resumen-seleccion {
  margin-top: var(--esp-5);
  font-size: var(--texto-sm);
  color: var(--color-texto);
  padding: var(--esp-3) var(--esp-4);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: var(--radio-md);
  border: 1px dashed var(--color-borde-fuerte);
}
.resumen-seleccion strong { color: var(--color-verde-profundo); }

/* --- Bloques informativos de 4 columnas --- */
.bloques-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background-color: var(--color-crema);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}
.bloque-info {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-right: 1px solid var(--color-borde);
}
.bloque-info:last-child { border-right: 0; }
.bloque-info__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--esp-4);
  border: 1px solid var(--color-dorado-claro);
  border-radius: var(--radio-full);
  background-color: rgba(228, 211, 172, 0.22);
}
.bloque-info__icono img { width: 22px; height: 22px; }
.bloque-info h3 {
  font-size: var(--texto-base);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-3);
}
.bloque-info p,
.bloque-info li {
  font-size: var(--texto-sm);
  line-height: 1.65;
}
.bloque-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}
.bloque-info li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}
.bloque-info li::before {
  content: "✓";
  color: var(--color-verde);
  font-weight: var(--peso-bold);
  flex-shrink: 0;
}

/* --- Tarjetas de opciones disponibles (leche animal / vegetal) --- */
.tarjeta-opcion {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background-color: var(--color-arena);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  min-height: 150px;
}
.tarjeta-opcion__texto {
  padding: var(--esp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tarjeta-opcion__texto h3 {
  font-size: var(--texto-lg);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-2);
}
.tarjeta-opcion__texto p {
  font-size: var(--texto-sm);
  line-height: 1.6;
  margin: 0;
}
.tarjeta-opcion__figura { margin: 0; }
.tarjeta-opcion__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 150px;
}

/* --- Tarjeta de producto relacionado (más compacta) --- */
.tarjeta-relacionado {
  position: relative;
  display: block;
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion-base), box-shadow var(--transicion-base);
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
}
.tarjeta-relacionado:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}
.tarjeta-relacionado__figura {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-arena);
}
.tarjeta-relacionado__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.tarjeta-relacionado:hover .tarjeta-relacionado__figura img { transform: scale(1.05); }
.tarjeta-relacionado__cuerpo {
  padding: var(--esp-4) var(--esp-5) var(--esp-5);
}
.tarjeta-relacionado__cuerpo h3 {
  font-size: var(--texto-base);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-2);
}
.tarjeta-relacionado__cuerpo p {
  font-size: var(--texto-sm);
  color: var(--color-texto);
  margin: 0 0 var(--esp-3);
  line-height: 1.55;
}


/* ==========================================================================
   12. PÁGINA NOSOTROS
   ========================================================================== */

/* Encabezado de página interior */
.encabezado-pagina {
  background-color: var(--color-arena);
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  text-align: center;
}
.encabezado-pagina h1 {
  color: var(--color-verde-profundo);
  font-size: var(--texto-3xl);
  margin-bottom: var(--esp-4);
}
.encabezado-pagina p {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--texto-lg);
}

/* Misión / visión / valores */
.tarjeta-mision {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--color-verde);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  height: 100%;
}
.tarjeta-mision h3 {
  color: var(--color-verde-profundo);
  font-size: var(--texto-lg);
}
.tarjeta-mision p { margin: 0; font-size: var(--texto-sm); line-height: 1.7; }

/* Línea de tiempo del proceso */
.proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-6);
  counter-reset: paso;
}
.proceso__paso {
  position: relative;
  padding-top: var(--esp-10);
}
.proceso__paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--fuente-serif);
  font-size: 1.75rem;
  font-weight: var(--peso-bold);
  color: var(--color-dorado);
  line-height: 1;
}
/* Línea conectora entre pasos */
.proceso__paso::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 3.25rem;
  right: calc(-1 * var(--esp-6));
  height: 1px;
  background-color: var(--color-borde-fuerte);
}
.proceso__paso:last-child::after { display: none; }
.proceso__paso h3 {
  font-size: var(--texto-base);
  color: var(--color-verde-profundo);
  margin-bottom: var(--esp-2);
}
.proceso__paso p { font-size: var(--texto-sm); line-height: 1.65; margin: 0; }

/* Galería de mosaico */
.mosaico {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-4);
}
.mosaico figure {
  margin: 0;
  border-radius: var(--radio-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-arena);
}
.mosaico figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La primera imagen ocupa dos columnas y dos filas */
.mosaico figure:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

/* Cifras destacadas */
.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.cifra__numero {
  display: block;
  font-family: var(--fuente-serif);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-bold);
  color: var(--color-verde);
  line-height: 1.1;
}
.cifra__texto {
  font-size: var(--texto-sm);
  color: var(--color-texto);
}


/* ==========================================================================
   13. PÁGINA CONTACTO
   ========================================================================== */

.contacto-rejilla {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: start;
}

/* Los canales se apilan con separación uniforme */
.lista-canales {
  gap: var(--esp-4);
  margin-top: var(--esp-6);
}

/* Tarjetas de canal de contacto */
.canal {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  text-decoration: none;
  transition: border-color var(--transicion-base), box-shadow var(--transicion-base);
}
.canal:hover {
  border-color: var(--color-verde);
  box-shadow: var(--sombra-md);
}
.canal__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background-color: var(--color-verde-suave);
  border-radius: var(--radio-full);
}
.canal__icono img { width: 24px; height: 24px; }
/* Los tres datos del canal se apilan en líneas separadas */
.canal__titulo,
.canal__dato,
.canal__nota { display: block; }
.canal__titulo {
  font-family: var(--fuente-sans);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-titulo);
  margin: 0 0 2px;
}
.canal__dato {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  color: var(--color-verde);
  margin: 0;
}
.canal__nota {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  margin: 3px 0 0;
  line-height: 1.5;
}

/* Separación de los subtítulos dentro de la columna de canales */
.contacto-rejilla h3 {
  margin-top: var(--esp-10);
  color: var(--color-verde-profundo);
  font-size: var(--texto-lg);
}
.contacto-rejilla figure { margin-top: var(--esp-8); }

/* Horarios */
.horarios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}
.horarios li {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  font-size: var(--texto-sm);
  padding-bottom: var(--esp-3);
  border-bottom: 1px dashed var(--color-borde);
}
.horarios li:last-child { border-bottom: 0; padding-bottom: 0; }
.horarios span:first-child { color: var(--color-titulo); font-weight: var(--peso-medio); }

/* --- Formulario --- */
.formulario {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
  box-shadow: var(--sombra-sm);
}
.campo { margin-bottom: var(--esp-5); }
.campo__etiqueta {
  display: block;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-titulo);
  margin-bottom: var(--esp-2);
}
.campo__opcional {
  font-weight: var(--peso-normal);
  color: var(--color-texto-suave);
}
.campo__control {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: 48px;
  background-color: var(--color-crema);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  font-size: var(--texto-base);
  color: var(--color-titulo);
  transition: border-color var(--transicion-base), box-shadow var(--transicion-base);
}
.campo__control:focus {
  border-color: var(--color-verde);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.14);
  outline: none;
}
textarea.campo__control {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}
select.campo__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-texto) 50%),
                    linear-gradient(135deg, var(--color-texto) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

/* Estado de error */
.campo__control[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: #FDF7F7;
}
.campo__error {
  display: block;
  min-height: 1.15rem;
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-error);
  font-weight: var(--peso-medio);
}

/* Consentimiento */
.campo-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}
.campo-consentimiento input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--color-verde);
  flex-shrink: 0;
  cursor: pointer;
}
.campo-consentimiento label {
  font-size: var(--texto-sm);
  line-height: 1.6;
  color: var(--color-texto);
  cursor: pointer;
}

/* Mensaje global del formulario */
.formulario__aviso {
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  margin-bottom: var(--esp-5);
  border: 1px solid;
}
.formulario__aviso--exito {
  background-color: var(--color-verde-suave);
  border-color: var(--color-verde);
  color: #1E5B22;
}
.formulario__aviso--error {
  background-color: #FDF1F0;
  border-color: var(--color-error);
  color: var(--color-error);
}
.formulario__aviso[hidden] { display: none; }

.formulario__nota {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  margin-top: var(--esp-4);
  line-height: 1.6;
}

/* Fila de dos campos */
.fila-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5);
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* --- Laptops pequeñas --- */
@media (max-width: 1100px) {
  .rejilla--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloques-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque-info:nth-child(2) { border-right: 0; }
  .bloque-info:nth-child(1),
  .bloque-info:nth-child(2) { border-bottom: 1px solid var(--color-borde); }
  .proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-8) var(--esp-6); }
  .proceso__paso:nth-child(2)::after { display: none; }
  .footer__rejilla { grid-template-columns: 1fr 1fr; }
}

/* --- Tablet: se activa el menú hamburguesa --- */
@media (max-width: 960px) {
  .hamburguesa { display: inline-flex; }

  /* Menú móvil como panel deslizante.
     Cerrado se desplaza fuera de la pantalla. Para que ese desplazamiento NO
     genere scroll horizontal, el panel permanece anclado a la derecha
     (right: 0) y se oculta con translateX; el contenedor .header lo recorta.
     Ver también la regla `.header { overflow: clip }` más abajo. */
  .nav {
    /* En escritorio .nav es `display:flex` para alinear los enlaces en
       fila. En móvil deja de ser una fila y pasa a ser el panel deslizante
       completo: se fuerza `block` porque `flex` + `position:fixed` con
       top/right/bottom puede colapsar la altura al contenido en vez de
       estirarse, y se fija `height`/`max-height` de forma redundante junto
       con `bottom:0` para que el panel cubra siempre el alto completo. */
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    max-height: 100vh;
    width: min(320px, 86vw);
    z-index: calc(var(--z-menu) + 1);
    /* Fondo sólido explícito (no depende de la variable de color por si
       algún navegador la resuelve con transparencia): garantiza que el
       panel nunca se vea translúcido sobre el contenido de atrás. */
    background-color: #FAF9F5;
    border-left: 1px solid var(--color-borde);
    box-shadow: -8px 0 30px rgba(63, 51, 34, 0.14);
    padding: calc(var(--altura-header) + var(--esp-6)) var(--esp-6) var(--esp-8);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transicion-base), visibility var(--transicion-base);
  }
  .nav.abierta { transform: translateX(0); visibility: visible; }

  /* El botón de cierre (X) solo existe como tal en el panel móvil */
  .nav__cerrar { display: inline-flex; }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav__lista li { border-bottom: 1px solid var(--color-borde); }
  .nav__enlace {
    padding: var(--esp-4) var(--esp-2);
    font-size: var(--texto-sm);
    letter-spacing: 0.06em;
  }
  .nav__enlace::after { display: none; }
  .nav__enlace[aria-current="page"] {
    color: var(--color-verde);
    border-left: 3px solid var(--color-verde);
    padding-left: var(--esp-4);
  }

  /* Hero apilado */
  .hero__interior {
    grid-template-columns: 1fr;
    gap: var(--esp-8);
    min-height: 0;
  }
  .hero__contenido { max-width: none; order: 1; }
  .hero__figura { order: 2; aspect-ratio: 16 / 10; }

  .franja-beneficios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Producto: galería arriba, info abajo */
  .producto-hero__interior { grid-template-columns: 1fr; }

  .duo,
  .historia,
  .contacto-rejilla { grid-template-columns: 1fr; }
  .duo--invertido .duo__figura { order: 0; }
  .historia__figura { min-height: 260px; order: -1; }

  .franja-compromisos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-8) var(--esp-6); }
}

/* --- Móvil grande --- */
@media (max-width: 720px) {
  :root { --altura-header: 68px; }

  .rejilla--5,
  .rejilla--3,
  .rejilla--2 { grid-template-columns: 1fr; }

  .bloques-info { grid-template-columns: 1fr; }
  .bloque-info { border-right: 0; border-bottom: 1px solid var(--color-borde); }
  .bloque-info:last-child { border-bottom: 0; }

  .tarjeta-opcion { grid-template-columns: 1fr; }
  .tarjeta-opcion__figura { order: -1; }
  .tarjeta-opcion__figura img { aspect-ratio: 16 / 9; min-height: 0; }

  .footer__rejilla { grid-template-columns: 1fr; gap: var(--esp-8); }
  .footer__base { flex-direction: column; align-items: flex-start; }

  .bloque-cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .bloque-cta__hoja { display: none; }

  .fila-campos { grid-template-columns: 1fr; gap: 0; }

  /* Mosaico: 2 columnas en móvil */
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }

  .proceso { grid-template-columns: 1fr; }
  .proceso__paso::after { display: none; }

  /* El botón flotante no debe tapar contenido en pantallas pequeñas */
  .whatsapp-flotante { width: 52px; height: 52px; }
  .whatsapp-flotante img { width: 27px; height: 27px; }
}

/* --- Móvil pequeño (320px) --- */
@media (max-width: 400px) {
  .franja-beneficios__lista,
  .franja-compromisos { grid-template-columns: 1fr; }

  .galeria__miniaturas { gap: var(--esp-2); }

  /* Los CTAs ocupan el ancho completo para facilitar el toque */
  .grupo-botones { flex-direction: column; align-items: stretch; }
  .grupo-botones .boton { width: 100%; }

  .logo__marca { font-size: 1.35rem; }
  .header__acciones { gap: var(--esp-2); }
  .cifras { grid-template-columns: 1fr; }
}

/* --- Pantallas grandes --- */
@media (min-width: 1500px) {
  :root { --ancho-contenido: 1280px; }
}


/* ==========================================================================
   15. ACCESIBILIDAD Y MOTION
   ========================================================================== */

/* Animación de entrada sutil al hacer scroll */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.revelar.visible {
  opacity: 1;
  transform: none;
}

/* Respeta la preferencia del sistema por menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
  .tarjeta-producto:hover,
  .tarjeta-relacionado:hover,
  .whatsapp-flotante:hover { transform: none; }
}

/* Modo de alto contraste */
@media (prefers-contrast: more) {
  :root {
    --color-texto: #3A3A3A;
    --color-texto-suave: #555555;
    --color-borde: #C4BBAC;
  }
}

/* Impresión */
@media print {
  .header, .footer, .whatsapp-flotante, .superposicion-menu { display: none !important; }
  body { background: #fff; color: #000; }
}