/* =========================================================
   BeeDony · Hoja de estilos principal
   Mobile-first: los estilos base son para celular y los
   @media (min-width: ...) agregan ajustes para pantallas grandes.
   ========================================================= */

:root {
  /* ---------- Paleta de marca (los únicos 4 colores) ---------- */
  --amarillo: #F6A41A;   /* acento: botones, chips, estado activo, resaltes */
  --azul:     #3F80CA;   /* secundario: bordes, puntos, foco, fondos suaves */
  --cafe:     #47250E;   /* texto principal, títulos, footer */
  --gris:     #707173;   /* texto secundario y de apoyo */

  /* Neutros */
  --blanco:   #FFFFFF;
  --crema:    #FFF9EC;   /* fondo general de la página */

  /* ---------- Tonos derivados (solo mezclas de la paleta) ----------
     Contrastes WCAG medidos (texto normal requiere 4.5:1):
       café/blanco 13.6 · café/amarillo 6.7 · gris/blanco 4.9 · gris/crema 4.7
       azul-oscuro/blanco 6.9 · blanco/azul 4.1 (NO para texto pequeño)
       blanco/amarillo 2.1 (NUNCA texto blanco sobre amarillo) */
  --amarillo-oscuro: color-mix(in srgb, var(--amarillo) 85%, var(--cafe));    /* hover de botones (café encima: 5.3) */
  --amarillo-suave:  color-mix(in srgb, var(--amarillo) 25%, var(--blanco));  /* chips, placeholders, activo del submenú */
  --azul-oscuro:     color-mix(in srgb, var(--azul) 72%, black);              /* enlaces y etiquetas en texto pequeño */
  --azul-suave:      color-mix(in srgb, var(--azul) 15%, var(--blanco));      /* fondos de secciones y hover */
  --gris-suave:      color-mix(in srgb, var(--gris) 40%, var(--blanco));      /* puntos inactivos del carrusel */

  /* ---------- Roles (usar estos en las reglas) ---------- */
  --texto:        var(--cafe);
  --texto-suave:  var(--gris);
  --enlace:       var(--azul-oscuro);
  --etiqueta:     var(--azul-oscuro);  /* "Presentación:", "Descripción:", familia */
  --exito:        var(--azul-oscuro);
  --error:        var(--cafe);

  /* ---------- TIPOGRAFÍA ----------
     Nunito Sans (Google Fonts, pesos 400 y 700): se carga con <link> en
     templates/base.html. Para usar OTRA fuente en los títulos: agrega su
     <link> en base.html y cambia solo --fuente-titulos (y --peso-titulos si
     esa fuente no tiene 700). Las demás fuentes de la lista son respaldo. */
  --fuente-titulos: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-texto:   "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --peso-titulos:   700;   /* peso cargado: sin negrita sintética */

  /* ---------- Medidas ---------- */
  --radio:      16px;
  --espacio:    1rem;   /* separación estándar entre bloques (16px) */
  --sombra:     0 6px 20px color-mix(in srgb, var(--cafe) 12%, transparent);
  --sombra-nav: 0 2px 10px color-mix(in srgb, var(--cafe) 12%, transparent);
  --ancho-max:  1120px;
  --alto-nav:   64px;
  --alto-logo:  36px;   /* celular; en escritorio ver @media min-width: 768px */

  /* ---------- Títulos de sección (.titulo-seccion / .subtitulo-seccion) ----------
     El color del título se redefine por fondo (ver .seccion-alterna).
     Contrastes (texto grande requiere 3:1): azul/crema 3.9 · café/azul-suave 11.4
     · gris/crema 4.7 (subtítulo). */
  --titulo-seccion-tamano:    clamp(2rem, 1.25rem + 3vw, 3.5rem);
  --titulo-seccion-color:     var(--azul);      /* fondo claro/crema */
  --titulo-seccion-linea:     var(--amarillo);  /* línea decorativa (no es texto) */
  --subtitulo-seccion-tamano: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  --subtitulo-seccion-color:  var(--gris);

  /* ---------- Tarjetas (.tarjeta: familia en Inicio y cuadro de producto) ---------- */
  --tarjeta-padding: 1.25rem 1.5rem 1.5rem;
  --gap-tarjetas:    1.5rem;   /* separación entre tarjetas en cuadrículas */
  --ancho-producto:  900px;    /* ancho máximo de la tarjeta de producto y del encabezado de Lanzamientos */
  --cubo-padding:    calc(var(--espacio) * 0.5);  /* bloques sin fondo: poco relleno */

  /* Negro: fuera de la paleta de marca. Excepción pedida SOLO para los
     títulos "Familia - Producto" de la página Lanzamientos. */
  --negro: #000000;

  /* Subtítulos de tarjeta (Contáctanos: Historia, Misión, Visión, Horarios...).
     Café sobre blanco 13.6:1; la barra amarilla es decorativa. */
  --subtitulo-tarjeta-tamano:   clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --subtitulo-tarjeta-color:    var(--cafe);
  --subtitulo-tarjeta-marcador: var(--amarillo);

  /* ---------- Cuadro de información del producto ----------
     Títulos "Descripción" y "Presentación" (.producto-titulo-bloque) y texto
     de la descripción y de los gramajes (.producto-texto).
     Contrastes: título azul-oscuro/blanco 6.9 · texto gris/blanco 4.9 ·
     chip café/amarillo 6.7 (el gris sobre amarillo daría 2.4: no se usa). */
  --titulo-bloque-producto-tamano: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --tamano-texto-producto:         1rem;
  --interlineado-texto-producto:   1.6;
}

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

/* El atributo hidden siempre oculta, aunque la clase defina display (p. ej.
   los puntos de un carrusel con un solo producto). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--crema);
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  color: var(--cafe);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
h3 { font-size: 1.2rem; }

a { color: var(--enlace); }
img { max-width: 100%; display: block; }

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

.seccion { padding-block: 3rem; }

/* Secciones con id a las que se llega por ancla (p. ej. /contactamos#informacion):
   el menú es sticky, así que se deja su altura libre arriba para no tapar el título. */
.seccion-ancla { scroll-margin-top: var(--alto-nav); }

/* Oculta un elemento a la vista, pero lo deja disponible para lectores de
   pantalla y buscadores (p. ej. el <h1> de la página Productos). */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.seccion-alterna {
  background: var(--azul-suave);
  --titulo-seccion-color: var(--cafe);  /* azul sobre azul-suave se ve apagado (3.4:1) */
}

/* Títulos de sección (Inicio: Lanzamientos y Productos; página Lanzamientos).
   Centrados, grandes, con la fuente de títulos y una línea corta debajo. */
.titulo-seccion {
  margin: 0 0 calc(var(--espacio) * 2);
  font-size: var(--titulo-seccion-tamano);
  color: var(--titulo-seccion-color);
  text-align: center;
  text-wrap: balance;          /* reparte las líneas si el título se parte */
  overflow-wrap: break-word;   /* nunca se sale de la pantalla en celular */
}
.titulo-seccion::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: calc(var(--espacio) * 0.75) auto 0;
  border-radius: 999px;
  background: var(--titulo-seccion-linea);
}

.subtitulo-seccion {
  max-width: 50ch;
  margin: 0 auto calc(var(--espacio) * 2);
  font-family: var(--fuente-texto);
  font-size: var(--subtitulo-seccion-tamano);
  line-height: 1.5;
  color: var(--subtitulo-seccion-color);
  text-align: center;
}
.centrado { text-align: center; margin-top: 2rem; }

.boton {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--amarillo);
  color: var(--cafe);        /* sobre amarillo siempre café, nunca blanco */
  font: bold 1rem var(--fuente-texto);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.boton:hover { background: var(--amarillo-oscuro); transform: translateY(-2px); }

/* ---------- Placeholders de imagen ----------
   Se usan mientras no existan las imágenes reales. Cada uno tiene en su
   atributo title la ruta esperada del archivo. */
.placeholder {
  display: grid;
  place-items: center;
  background: var(--amarillo-suave);
  color: var(--cafe);
  font-size: 3rem;
}

/* ---------- Navegación (sticky) ----------
   Fondo blanco: el logo (naranja y azul con contorno blanco) está pensado
   para fondo claro; sobre el azul de marca las letras "Dony" desaparecen. */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  box-shadow: var(--sombra-nav);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--alto-nav);
  position: relative;
}

/* Logo del menú (static/img/logo.png). La altura se limita con
   --alto-logo; el ancho se ajusta solo. */
.logo {
  display: flex;
  align-items: center;
  flex: none;
}
.logo img {
  height: var(--alto-logo);
  width: auto;
}

/* Nombre de marca en texto (footer). */
.marca {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: var(--peso-titulos);
  color: var(--amarillo);
  text-decoration: none;
  margin: 0;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--cafe);
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Móvil: el menú es un panel desplegable debajo de la barra. */
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.5rem 1rem 1rem;
  list-style: none;
  background: var(--blanco);
  box-shadow: var(--sombra-nav);
}
.nav-menu.abierto { display: block; }

.nav-menu a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  color: var(--cafe);
  text-decoration: none;
}
.nav-menu a:hover { background: var(--azul-suave); }
.nav-menu a.activo { background: var(--amarillo); color: var(--cafe); font-weight: bold; }

/* ---------- Submenú de Productos ----------
   Celular: va dentro del menú hamburguesa, debajo de "Productos", y se abre
   con el botón de flecha. Escritorio (ver @media min-width: 768px): flota
   debajo de "Productos". main.js añade .abierto a .tiene-submenu. */
.nav-item-fila {
  display: flex;
  align-items: center;
}
.nav-item-fila > a { flex: 1; }

.submenu-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;               /* área táctil mínima */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cafe);
  cursor: pointer;
}
.submenu-toggle:hover { background: var(--azul-suave); }
/* Flecha dibujada con bordes: apunta abajo cerrada y arriba abierta. */
.submenu-toggle .flecha {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.submenu-toggle[aria-expanded="true"] .flecha { transform: translateY(2px) rotate(225deg); }

.submenu {
  display: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0.5rem;
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--azul-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tiene-submenu.abierto .submenu { display: block; }

.nav-menu .submenu a {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: var(--cafe);
  white-space: nowrap;
}
.nav-menu .submenu a:hover,
.nav-menu .submenu a:focus-visible { background: var(--azul-suave); }
.nav-menu .submenu a.activo { background: var(--amarillo-suave); color: var(--cafe); }

@media (prefers-reduced-motion: reduce) {
  .submenu-toggle .flecha { transition: none; }
}

/* ---------- Mensajes flash ---------- */
.alerta {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radio);
  border-left: 5px solid;
  background: var(--blanco);
}
.alerta-exito { border-color: var(--azul); color: var(--exito); }
.alerta-error { border-color: var(--amarillo); color: var(--error); }

/* ---------- Carrusel ---------- */
/* --por-vista: cuántas tarjetas se ven a la vez. main.js la lee para calcular
   el desplazamiento, así que basta cambiarla aquí (o en un @media). */
.carrusel {
  --por-vista: 1;
  position: relative;
}
.carrusel:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 4px;
  border-radius: var(--radio);
}

.carrusel-ventana {
  overflow: hidden;
  border-radius: var(--radio);
}

.carrusel-pista {
  display: flex;
  transition: transform 0.45s ease;
}

.carrusel-slide {
  flex: 0 0 calc(100% / var(--por-vista));
  min-width: 0;
}

/* Carrusel de varias tarjetas (familias en Inicio): cada tarjeta tiene su
   propio borde y sombra, así que la ventana deja espacio alrededor para
   que la sombra no se corte y las tarjetas no queden pegadas. */
.carrusel-varios .carrusel-ventana {
  margin-inline: -0.5rem;
  border-radius: 0;
}
.carrusel-varios .carrusel-slide { padding: 0.5rem 0.5rem 1rem; }

/* Carruseles con tarjetas de mucho texto (macro carrusel con flechas_abajo o
   varios): las flechas van abajo, en la misma fila que los puntos, para no
   taparlo. */
.carrusel-flechas-abajo .carrusel-puntos {
  min-height: 2.5rem;
  align-items: center;
  margin-top: 0.25rem;
}
.carrusel-flechas-abajo .carrusel-btn {
  top: auto;
  bottom: 0;
  transform: none;
}
.carrusel-flechas-abajo .carrusel-prev { left: 0; }
.carrusel-flechas-abajo .carrusel-next { right: 0; }

/* Alineación de tarjetas (.carrusel-alineado, macro carrusel con filas=N).
   La pista es un grid con --filas filas compartidas y cada
   slide > tarjeta > contenedor de texto las hereda con subgrid. Así cada fila
   mide lo del elemento más alto de TODAS las tarjetas (también las que están
   fuera de vista) y todo queda en la misma línea. Cada columna mide
   100% / --por-vista, igual que con flex, así que main.js no cambia.
   Estructura esperada de la tarjeta: 1er hijo = imagen (fila 1),
   2do hijo = texto, con un elemento por cada fila restante. */
@supports (grid-template-rows: subgrid) {
  .carrusel-alineado .carrusel-pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / var(--por-vista));
    grid-template-rows: repeat(var(--filas), auto);
  }
  .carrusel-alineado .carrusel-slide,
  .carrusel-alineado .carrusel-slide > * {
    display: grid;
    grid-row: span var(--filas);
    grid-template-rows: subgrid;
  }
  /* El contenedor del texto ocupa desde la fila 2 hasta la última. */
  .carrusel-alineado .carrusel-slide > * > :nth-child(2) {
    display: grid;
    grid-row: 2 / -1;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

.carrusel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blanco) 90%, transparent);
  color: var(--cafe);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: var(--sombra);
  cursor: pointer;
}
.carrusel-prev { left: 0.5rem; }
.carrusel-next { right: 0.5rem; }
.carrusel-btn:hover { background: var(--amarillo); }

.carrusel-puntos {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.carrusel-punto {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gris-suave);
  cursor: pointer;
}
/* Sobre el fondo azul suave de .seccion-alterna los puntos inactivos van en
   blanco; si no, se confunden con el fondo. */
.seccion-alterna .carrusel-punto { background: var(--blanco); }
.carrusel-punto[aria-current="true"],
.seccion-alterna .carrusel-punto[aria-current="true"] { background: var(--azul-oscuro); }

@media (prefers-reduced-motion: reduce) {
  .carrusel-pista { transition: none; }
}

/* ---------- Hero (carrusel de inicio) ---------- */
/* Logo completo centrado al inicio de la página de Inicio. */
/* Es el <h1> de Inicio y también .contenedor (ancho máximo centrado con
   margin-inline: auto). Solo se anulan los márgenes verticales del h1: un
   "margin: 0" aquí quitaba también el margin-inline: auto y el logo quedaba
   corrido a la izquierda en pantallas de más de 1120px. */
.inicio-logo {
  display: flex;
  justify-content: center;
  margin-block: 0;
  padding-block: 2rem 1.5rem;
}
.inicio-logo img {
  width: clamp(220px, 45vw, 480px);   /* más pequeño en celular */
  max-width: 100%;
  height: auto;
}

.hero { padding-top: 0; }

/* Fotos del carrusel (data/carrusel.py). 3/2 es la proporción de las fotos
   (3261x2160): se ven completas, sin recortar el texto de los empaques, y el
   carrusel no cambia de altura. Si se sube una foto de otra proporción,
   cover la recorta centrada en vez de deformarla. El fondo cubre el hueco
   si una foto no carga. */
.hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--amarillo-suave);
}

/* ---------- Tarjeta de producto ---------- */
.producto {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

/* Imagen de producto (<img>) o su placeholder (<div>). El fondo cubre el
   hueco mientras carga o si falla. */
.producto-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--amarillo-suave);
}

/* Tarjeta resumen (Lanzamientos en Inicio): imagen, nombre y descripción
   juntos; el espacio sobrante (si la tarjeta se estira para igualar alturas)
   queda al final. */
.producto-info { padding: calc(var(--espacio) * 1.25); }
.producto-info h3 { margin: 0 0 calc(var(--espacio) * 0.75); }
.producto-info p { margin: 0 0 0.75rem; color: var(--texto-suave); }
.producto-info p:last-child { margin-bottom: 0; }

/* hyphens: auto parte palabras largas (idioma del <html lang="es">) para
   que el texto justificado no deje huecos grandes entre palabras. */
.producto-descripcion,
.familia-descripcion {
  text-align: justify;
  hyphens: auto;
}

.producto-familia {
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--etiqueta) !important;
}

/* Ficha del producto: etiquetas (dt) resaltadas, con la fuente de títulos
   porque funcionan como encabezado de cada dato, y el contenido (dd) debajo. */
.ficha { margin: 0; }
.ficha dt {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  color: var(--etiqueta);
}
.ficha dd {
  margin: 0 0 0.75rem;
  color: var(--texto-suave);
}
.ficha dd:last-child { margin-bottom: 0; }

/* Etiquetas tipo "chip" (productos de cada familia en Inicio). */
.chips {
  display: flex;
  flex-wrap: wrap;
  /* Si la lista es más alta que su contenido (p. ej. fila compartida del
     carrusel de familias), las etiquetas se quedan arriba sin estirarse. */
  align-items: flex-start;
  align-content: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: var(--amarillo-suave);
  color: var(--cafe);
  font-size: 0.85rem;
  font-weight: bold;
}
/* Variante destacada (gramajes del producto): misma forma que los chips de
   Inicio, en amarillo de la marca. Tamaño, peso e interlineado los hereda de
   .producto-texto (igual que la descripción); el texto va en café porque el
   gris de la descripción no contrasta sobre amarillo. */
.chips--destacado { gap: calc(var(--espacio) * 0.5); }
.chips--destacado li {
  padding: 0.2em 0.85em;
  background: var(--amarillo);
  color: var(--cafe);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ---------- Detalle de producto (Productos y Lanzamientos) ----------
   De arriba abajo: nombre centrado (.producto-encabezado), imagen grande y un
   solo cuadro (.tarjeta.producto-cuadro) con la descripción y, abajo, la
   presentación. Mismo ancho que la imagen (max-width de la tarjeta).

   Altura: el carrusel estira todas las diapositivas a la más alta (flex); la
   tarjeta es una columna flex (nombre, imagen, cuadro) donde solo el cuadro
   crece, y dentro del cuadro la presentación va al fondo (margin-top: auto).
   Así todos los productos del carrusel miden lo mismo y el espacio sobrante
   queda DENTRO del cuadro, entre la descripción y los chips; nombre, imagen y
   cuadro van siempre separados solo por var(--espacio).
   No usar aquí filas=N (subgrid): con max-width en la tarjeta, Firefox calcula
   la fila de la imagen con el ancho del carrusel y deja un hueco debajo. */
.producto-detalle {
  width: 100%;
  max-width: var(--ancho-producto);  /* ancho máximo cómodo en monitores grandes */
  margin-inline: auto;
  padding: 0.5rem 0.5rem 1rem; /* espacio para que no se corte la sombra del cuadro */
  gap: var(--espacio);       /* nombre ↔ imagen ↔ cuadro */
  background: none;
  box-shadow: none;
  overflow: visible;
}
.producto-detalle .producto-img {
  flex: none;
  aspect-ratio: 4 / 3;       /* misma proporción en todos los productos */
  border-radius: var(--radio);
}
.producto-encabezado {
  flex: none;
  text-align: center;
}
.producto-encabezado h3 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-wrap: balance;          /* títulos largos ("Azul - Alfa brownie") se reparten bien */
  overflow-wrap: break-word;   /* nunca se salen de la pantalla */
}
.producto-encabezado .producto-familia { margin: 0 0 0.25rem; }
/* Título "Familia - Producto" (solo página Lanzamientos, macro con
   familia_titulo): en negro (20:1 sobre crema). */
.titulo-lanzamiento { color: var(--negro); }

.producto-cuadro {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--espacio) * 1.5);
  padding: var(--tarjeta-padding);
}
.producto-presentacion { margin-top: auto; }

/* Títulos "Descripción" y "Presentación": UNA clase para los dos. */
.producto-titulo-bloque {
  margin: 0 0 calc(var(--espacio) * 0.5);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-bloque-producto-tamano);
  font-weight: var(--peso-titulos);
  letter-spacing: normal;
  line-height: 1.3;
  text-align: left;
  color: var(--etiqueta);
}
/* Texto de la descripción y de los gramajes: misma tipografía. */
.producto-texto {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--tamano-texto-producto);
  font-weight: normal;
  line-height: var(--interlineado-texto-producto);
  color: var(--texto-suave);
}

/* ---------- Inicio: Nosotros y familias ---------- */
.bloque {
  padding: 1.5rem;
  background: var(--blanco);
  border-radius: var(--radio);
  border-top: 5px solid var(--amarillo);
  box-shadow: var(--sombra);
}

/* Encabezado en dos bloques sin fondo (página Lanzamientos): título (2/3) y
   frase (1/3), misma altura y texto centrado. Una columna en pantallas
   pequeñas (ver @media 1024px). Reutiliza .titulo-seccion (azul, su color
   por defecto) y .subtitulo-seccion (aquí en café).
   Contrastes sobre crema: azul 3.9 (título grande, mínimo 3) · café 13. */
.encabezado-cubos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-tarjetas);
  max-width: var(--ancho-producto);
  margin: 0 auto calc(var(--espacio) * 2);
}
.cubo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--cubo-padding);
  text-align: center;
}
.cubo > .titulo-seccion,
.cubo > .subtitulo-seccion { margin: 0; }
.cubo--frase { --subtitulo-seccion-color: var(--cafe); }

/* Historia / Misión / Visión. En celular y tablet vertical: una columna
   (orden del HTML). En escritorio (ver @media min-width: 1024px): Historia
   ocupa 2 columnas y 2 filas; Misión y Visión se apilan en la tercera. */
.nosotros-grid {
  display: grid;
  gap: var(--gap-tarjetas);
  grid-template-columns: 1fr;
}

/* Texto justificado; hyphens: auto usa el lang="es" del <html> para partir
   palabras y evitar espacios grandes en las tarjetas angostas. */
.bloque p {
  margin: 0;
  text-align: justify;
  hyphens: auto;
}
/* En pantallas muy angostas (< 360px) el justificado deja huecos grandes
   entre palabras aun con guiones: ahí se alinea a la izquierda. */
@media (max-width: 359px) {
  .bloque p,
  .producto-detalle .producto-descripcion { text-align: left; }
}

/* Tarjeta blanca con sombra: tarjeta de familia (Inicio) y cuadro de
   información del producto (Productos y Lanzamientos). */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* Tarjeta de familia (carrusel de familias en Inicio). */
.familia-card {
  height: 100%;
  overflow: hidden;
}
/* Marco de la foto de familia (o del placeholder): su proporción fija define
   el alto. La <img> va posicionada en absoluto dentro, así no aporta su
   tamaño natural al cálculo de las filas del carrusel alineado. El fondo
   cubre el hueco mientras carga o si falla. */
.familia-img {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--amarillo-suave);
}
.familia-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.familia-info { padding: var(--tarjeta-padding); }
/* El nombre de la familia enlaza a /productos?familia=<id>. */
.familia-enlace { color: inherit; text-decoration: none; }
.familia-enlace:hover,
.familia-enlace:focus-visible { color: var(--enlace); text-decoration: underline; }
.familia-info p { margin: 0 0 1rem; color: var(--texto-suave); }
.familia-info .sabores-titulo {
  margin-bottom: 0.5rem;
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  color: var(--etiqueta);
}

/* ---------- Productos: pestañas de familia ---------- */
/* Sin el título visible, la sección empieza con las pestañas: menos espacio
   arriba. El menú es sticky (ocupa su lugar), así que no las tapa. */
.seccion-productos { padding-top: 1.5rem; }

/* Pestañas centradas; si no caben pasan a la siguiente línea, centradas.
   --tabs-fuente: tamaño del texto (crece con la pantalla entre 1.05 y 1.35rem). */
.tabs {
  --tabs-fuente: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.tab {
  min-height: 44px;          /* área táctil cómoda en celular */
  padding: 0.55em 1.4em;     /* en em: se ajusta solo al tamaño del texto */
  border: 2px solid var(--azul);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--azul-oscuro);
  font: bold var(--tabs-fuente) var(--fuente-texto);
  line-height: 1.2;
  cursor: pointer;
}
.tab:hover { background: var(--azul-suave); }
/* Activa: amarillo con texto café (6.7:1). */
.tab[aria-selected="true"] {
  border-color: var(--amarillo);
  background: var(--amarillo);
  color: var(--cafe);
}

/* ---------- Contáctanos ---------- */
/* Título de la página; la primera sección (Nosotros) va pegada debajo. */
.contacto-titulo { padding-top: 2.5rem; }
.contacto-titulo h1 { margin: 0; }
.contacto-titulo + .seccion { padding-top: 1.5rem; }

/* Información de la empresa: datos | mapa (2 columnas desde 768px). */
.info-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.info-datos h3 { margin: 1.5rem 0 0.5rem; }
.info-datos h3:first-child { margin-top: 0; }
/* Cada teléfono completo en una línea (no se parte a la mitad en celular). */
.info-datos a[href^="tel:"] { white-space: nowrap; }

/* Subtítulo dentro de una tarjeta (Contáctanos): fuente de títulos, café y
   una barra corta amarilla a la izquierda como acento de la marca. */
.subtitulo-tarjeta {
  display: flex;
  align-items: center;
  gap: calc(var(--espacio) * 0.6);
  font-size: var(--subtitulo-tarjeta-tamano);
  color: var(--subtitulo-tarjeta-color);
  overflow-wrap: break-word;
}
.subtitulo-tarjeta::before {
  content: "";
  flex: none;
  width: 5px;
  height: 1.1em;
  border-radius: 999px;
  background: var(--subtitulo-tarjeta-marcador);
}
.info-lista {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--texto-suave);
}
.info-datos > p { color: var(--texto-suave); }
/* Redes dentro de un cuadro blanco: color de enlace (en el footer son amarillas). */
.bloque .redes { justify-content: flex-start; }
.bloque .redes a,
.bloque .redes a:hover { color: var(--enlace); }
.bloque .redes a:hover { text-decoration: underline; }

.info-mapa {
  display: flex;
  flex-direction: column;
  gap: var(--espacio);
}
.mapa {
  flex: 1;
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--radio);
}

.contacto { display: grid; gap: 2rem; }

.formulario {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.formulario label { font-weight: bold; color: var(--cafe); margin-top: 0.6rem; }
.formulario input,
.formulario textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1.5px solid var(--gris);   /* 4.7:1 con el fondo: borde visible */
  border-radius: 10px;
  font: inherit;
  color: var(--texto);
  background: var(--crema);
}
.formulario input:focus,
.formulario textarea:focus {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  border-color: var(--azul);
  background: var(--blanco);
}
.formulario .boton { margin-top: 1rem; align-self: flex-start; }

/* ---------- Footer ---------- */
/* Fondo café: texto crema (13:1) y enlaces amarillos (6.7:1). */
.pie {
  background: var(--cafe);
  color: var(--crema);
  padding-block: 2rem;
}
.pie-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.redes a { color: var(--amarillo); text-decoration: none; }
.redes a:hover { color: var(--amarillo-suave); text-decoration: underline; }
.pie-copy { margin: 0; font-size: 0.85rem; opacity: 0.75; }

/* =========================================================
   Tablet en adelante
   ========================================================= */
@media (min-width: 768px) {
  :root { --alto-logo: 48px; }
  .nav-toggle { display: none; }

  .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: static;
    padding: 0;
    background: none;
    box-shadow: none;          /* la sombra es solo del panel desplegable en celular */
  }
  .nav-menu a { padding: 0.5rem 1rem; }

  /* Submenú flotante debajo de "Productos". */
  .tiene-submenu { position: relative; }
  .submenu-toggle { width: 1.75rem; margin-left: -0.25rem; }
  .submenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;            /* por encima de carruseles y contenido */
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
    margin: 0;
  }
  /* Puente invisible que cubre el hueco entre "Productos" y el submenú, para
     que no se cierre al bajar el mouse hacia él. */
  .submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.75rem;
  }

  .carrusel-varios { --por-vista: 2; }

  .carrusel-prev { left: 1rem; }
  .carrusel-next { right: 1rem; }

  .contacto { grid-template-columns: 1fr 1fr; align-items: start; }
  .info-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Escritorio
   ========================================================= */
@media (min-width: 1024px) {
  /* Historia abarca las dos filas, así su altura es igual a Misión + gap +
     Visión. Si Historia es más alta, las dos filas crecen por igual y
     Misión/Visión se estiran: no quedan huecos. */
  .nosotros-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "historia historia mision"
      "historia historia vision";
  }
  /* Las áreas se asignan solo aquí: fuera de este @media no existen y las
     tres tarjetas caerían en la misma celda. */
  .bloque-historia { grid-area: historia; }
  .bloque-mision   { grid-area: mision; }
  .bloque-vision   { grid-area: vision; }

  .encabezado-cubos { grid-template-columns: 2fr 1fr; }

  /* Detalle de producto: imagen más apaisada en escritorio. */
  .producto-detalle .producto-img { aspect-ratio: 16 / 9; }
  .producto-detalle .placeholder { font-size: 4rem; }
}