/* ==========================================================================
   TIRAMISÚ BAKERY — Hoja de estilo principal
   ==========================================================================

   PALETA
     El magenta del logo (#A00164) sigue siendo EL color de la marca: es el
     de la cabecera, los botones y los precios. A su alrededor entra la paleta
     nueva de tonos rosados y tierra.

   Organización del archivo (busca estos títulos para ubicarte):
     1. Tipografías
     2. Variables de color y medidas
     3. Reinicio y base
     4. Piezas reutilizables (botones, títulos)
     5. Cabecera, navegación y buscador
     6. Slideshow de destacados
     7. Menú filtrable de la portada
     8. Tarjetas de producto
     9. Página de producto y resultados de búsqueda
    10. Botón flotante de WhatsApp
    11. Pie de página
    12. Pantallas pequeñas
   ========================================================================== */


/* ==========================================================================
   1. TIPOGRAFÍAS
   --------------------------------------------------------------------------
   Guardadas en nuestro propio servidor (static/fonts/) en vez de pedirlas a
   Google: privacidad para tus clientes, y compatibilidad con la regla
   "font-src 'self'" de nuestra Content-Security-Policy.
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.9212f6f9860f.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.72993dddf88a.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-800.af4d371a1027.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-500.9cb8cbb53800.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-400-italic.9cd12d294a2d.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-500-italic.9cd12d294a2d.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}


/* ==========================================================================
   2. VARIABLES
   ========================================================================== */

:root {
  /* --- El color de la marca, muestreado del logo --- */
  --magenta:        #A00164;
  --magenta-oscuro: #7A0049;
  --magenta-claro:  #C43A8B;

  /* --- Paleta de apoyo --- */
  --oat:    #E9D7C9;   /* "Oat milk"  — fondo de las tarjetas */
  --nude:   #DFAA98;   /* "Nude"      — detalles suaves */
  --wine:   #6E1B25;   /* "Wine"      — texto oscuro sobre fondos claros */
  --blush:  #B56271;   /* "Blush"     — acentos rosados */
  --fondo:  #A4777E;   /* fondo general del sitio */

  --fondo-oscuro: #8E646B;  /* variante del fondo, para alternar secciones */
  --oat-claro:    #F5EBE2;  /* avena aclarada, para paneles */

  --tinta:  #2A1418;   /* texto principal: casi negro, con matiz vino */
  --gris:   #6E5A5D;   /* texto secundario */
  --papel:  #FFFFFF;
  --linea:  #D8C3B4;   /* separadores sobre fondos claros */
  --linea-oscura: rgba(255,255,255,0.22);  /* separadores sobre el fondo rosa */

  /* Tipografías */
  --sans:  "Poppins", "Segoe UI", system-ui, sans-serif;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;

  /* Medidas repetidas */
  --ancho-max:  1200px;
  --radio:      18px;   /* esquinas redondeadas de las tarjetas */
  --radio-sm:   10px;
  --transicion: 200ms ease;
  --sombra:     0 10px 30px rgba(42, 20, 24, 0.16);
}


/* ==========================================================================
   3. REINICIO Y BASE
   ========================================================================== */

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

/* RED DE SEGURIDAD contra el desborde horizontal en el celular.
   Si algún contenido (un correo larguísimo, una tabla ancha) se pinta más
   allá del borde derecho, la página entera se vuelve más ancha que la
   pantalla: el encabezado se corta, y al alejar el zoom aparece una franja
   vacía fea a la derecha. `overflow-x: clip` corta todo en el borde del
   viewport, pase lo que pase. No sustituye a arreglar cada desborde (eso
   sigue siendo lo correcto): es el cinturón por si algo se escapa. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--fondo);      /* #A4777E, el rosa tierra */
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 24px;
}

:focus-visible {
  outline: 3px solid var(--papel);
  outline-offset: 3px;
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   4. PIEZAS REUTILIZABLES
   ========================================================================== */

.titulo-seccion {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--papel);
}
.titulo-seccion.oscuro { color: var(--wine); }

.barra-acento {
  width: 70px;
  height: 8px;
  border-radius: 4px;
  background: var(--oat);
  margin-bottom: 28px;
}
.barra-acento.centrada { margin-inline: auto; }
.barra-acento.magenta { background: var(--magenta); }

.subtitulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--oat);
  margin: 0 0 4px;
}
.subtitulo.oscuro { color: var(--blush); }

/* --- Botones --- */
.boton {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 2px solid var(--magenta);
  border-radius: 999px;          /* píldora */
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              transform var(--transicion), border-color var(--transicion);
}
.boton:hover { text-decoration: none; transform: translateY(-2px); }

.boton-lleno { background: var(--magenta); color: #fff; }
.boton-lleno:hover { background: var(--magenta-oscuro); border-color: var(--magenta-oscuro); }

.boton-vacio { background: transparent; color: var(--magenta); }
.boton-vacio:hover { background: var(--magenta); color: #fff; }

/* Sobre el fondo rosa oscuro necesitamos un botón claro */
.boton-crema {
  background: var(--oat); color: var(--wine); border-color: var(--oat);
}
.boton-crema:hover { background: var(--papel); border-color: var(--papel); }

.boton-contorno-claro {
  background: transparent; color: var(--papel); border-color: var(--papel);
}
.boton-contorno-claro:hover { background: var(--papel); color: var(--wine); }

.precio {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--magenta);
}

/* --- Mensajes del sistema --- */
.mensajes { list-style: none; margin: 0; padding: 16px 0 0; }
.mensaje {
  padding: 13px 18px;
  border-left: 5px solid var(--magenta);
  background: var(--oat-claro);
  border-radius: var(--radio-sm);
  margin-bottom: 10px;
  font-size: 0.94rem;
  color: var(--tinta);
}
.mensaje.error { border-left-color: #B3261E; background: #FDECEA; }
.mensaje.success { border-left-color: #1F7A3D; background: #E9F6EE; }


/* ==========================================================================
   5. CABECERA, NAVEGACIÓN Y BUSCADOR
   --------------------------------------------------------------------------
   La cabecera va en el magenta del logo, con el logo en blanco.
   ========================================================================== */

.cabecera {
  background: var(--magenta);
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 2px 14px rgba(42,20,24,0.22);
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 86px;
  flex-wrap: wrap;
}

.logo img { height: 50px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  /* flex-shrink: 0 impide que el menú se comprima y se corte cuando el
     buscador crece. Antes se salía de la pantalla en tamaños medianos. */
  flex-shrink: 0;
}

.nav a {
  color: var(--papel);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 6px 0;
  position: relative;
}
.nav a:hover { color: var(--oat); text-decoration: none; }

.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--oat);
  transition: width var(--transicion);
}
.nav a:hover::after,
.nav a.activo::after { width: 100%; }
.nav a.activo { color: var(--oat); }

/* --- Buscador ---
   flex: 1 1 220px = "puedes crecer, puedes encoger, tu tamaño ideal es 220px".
   Con max-width evitamos que se estire demasiado en pantallas anchas. */
.buscador { position: relative; flex: 1 1 220px; max-width: 340px; }

.buscador input {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 11px 46px 11px 20px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador input::placeholder { color: #9B8388; }
.buscador input:focus {
  outline: none;
  border-color: var(--oat);
  box-shadow: 0 0 0 4px rgba(233, 215, 201, 0.35);
}

.buscador button {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transicion);
}
.buscador button:hover { background: var(--magenta-oscuro); }
.buscador button svg { width: 17px; height: 17px; }


/* ==========================================================================
   6. SLIDESHOW DE PRODUCTOS DESTACADOS
   --------------------------------------------------------------------------
   Una sola "ventana" (.slider) con todas las diapositivas apiladas encima una
   de otra. Solo la que tiene la clase .activa es visible; el JavaScript va
   moviendo esa clase. Se desvanecen con opacity, no con desplazamiento.
   ========================================================================== */

.slider {
  position: relative;
  height: clamp(420px, 62vh, 620px);
  overflow: hidden;
  background: var(--magenta-oscuro);
}

.slide {
  position: absolute;
  inset: 0;                 /* atajo de top:0; right:0; bottom:0; left:0 */
  opacity: 0;
  /* visibility evita que una diapositiva invisible siga capturando clics */
  visibility: hidden;
  transition: opacity 700ms ease, visibility 700ms;
}
.slide.activa { opacity: 1; visibility: visible; }

.slide a.foto-enlace { display: block; height: 100%; }

.slide img {
  width: 100%; height: 100%;

  /* object-fit: cover llena todo el marco recortando lo que sobra, sin
     deformar la foto.

     object-position decide QUÉ parte se conserva al recortar. Por defecto es
     "50% 50%" (el centro), y ese era el problema: en estas fotos el pastel
     está abajo, así que el centro caía en la decoración navideña.

     El valor real lo pone cada producto desde la base de datos con un
     style="object-position: 46% 88%". Aquí solo dejamos el valor de respaldo. */
  object-fit: cover;
  object-position: 50% 70%;

  /* Antes había un transform: scale(1.04) que "acercaba" la foto un 4% extra.
     Sumado al recorte del formato ancho, dejaba fuera el postre. Eliminado:
     el movimiento bonito no vale perder el producto. */
}

/* Velo oscuro para que el texto blanco se lea sobre cualquier foto */
.slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(42, 20, 24, 0.78) 0%,
    rgba(42, 20, 24, 0.55) 42%,
    rgba(42, 20, 24, 0.15) 100%
  );
  pointer-events: none;   /* deja pasar los clics hacia la foto */
}

.slide .texto {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 24px;
  color: var(--papel);
  z-index: 2;
  pointer-events: none;   /* el clic atraviesa hasta el enlace de la foto */

  /* --- Por qué el texto tiene su propia transición ---
     Las fotos se cruzan (una se desvanece mientras la otra aparece). Si el
     texto hiciera lo mismo, durante ese cruce se leerían DOS títulos
     encimados, y se ve fatal.

     Solución: el texto de la que SALE desaparece rápido y sin retraso...   */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 260ms ease, transform 260ms ease;
}

/* ...y el de la que ENTRA aparece medio segundo después, cuando la foto
   anterior ya se fue del todo. Nunca coinciden en pantalla. */
.slide.activa .texto {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms ease 380ms, transform 520ms ease 380ms;
}

.slide .texto > * { pointer-events: auto; }

.slide .etiqueta-cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oat);
  margin-bottom: 12px;
}

.slide h2 {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.06;
  margin: 0 0 14px;
  max-width: 620px;
}
.slide h2 a { color: var(--papel); }
.slide h2 a:hover { color: var(--oat); text-decoration: none; }

.slide .desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  max-width: 480px;
  margin: 0 0 18px;
  opacity: 0.95;
}

.slide .precio-slide {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  color: var(--oat);
  line-height: 1;
  margin-bottom: 24px;
}

.slide .acciones-slide { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Rótulo "Nuestros favoritos", arriba a la derecha --- */
.rotulo-destacados {
  position: absolute;
  top: 22px; right: 24px;
  z-index: 6;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(42, 20, 24, 0.55);
  /* backdrop-filter desenfoca lo que está DETRÁS del elemento, como el vidrio
     esmerilado. Hace legible el rótulo sobre cualquier foto. */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--oat);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 17px;
  border-radius: 999px;
}

/* Puntito que late, para que se note que el slideshow va cambiando */
.rotulo-destacados .punto-vivo {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--oat);
  animation: latido 2.2s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

/* --- Flechas --- */
.slider .flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.86);
  color: var(--magenta);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transicion), transform var(--transicion);
}
.slider .flecha:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.slider .flecha.izq { left: 20px; }
.slider .flecha.der { right: 20px; }
.slider .flecha svg { width: 20px; height: 20px; }

/* --- Puntos indicadores --- */
.slider .puntos {
  position: absolute;
  bottom: 22px; left: 0; right: 0;
  z-index: 5;
  display: flex; justify-content: center; gap: 10px;
}
.slider .punto {
  width: 11px; height: 11px;
  border: 2px solid var(--papel);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--transicion), transform var(--transicion);
}
.slider .punto.activo { background: var(--papel); transform: scale(1.25); }


/* ==========================================================================
   7. MENÚ FILTRABLE DE LA PORTADA
   ========================================================================== */

.seccion { padding: 72px 0; }
.seccion.alterna { background: var(--fondo-oscuro); }
.seccion.crema { background: var(--oat-claro); }

.encabezado-seccion { margin-bottom: 34px; }
.encabezado-seccion.centrado { text-align: center; }

/* Fila de píldoras para elegir categoría */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}

.filtro {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 24px;
  border: 2px solid var(--oat);
  border-radius: 999px;
  background: transparent;
  color: var(--oat);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.filtro:hover { background: rgba(233,215,201,0.18); }
.filtro.activo {
  background: var(--oat);
  color: var(--wine);
}

/* Oculta las tarjetas que no pertenecen a la categoría elegida.
   El JavaScript solo pone o quita esta clase. */
.tarjeta.oculta { display: none; }

.pie-seccion { text-align: center; margin-top: 44px; }


/* ==========================================================================
   8. TARJETAS DE PRODUCTO
   ========================================================================== */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 26px;
}

.tarjeta {
  background: var(--oat-claro);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
}

/* La foto ya no es cuadrada: 4/3 la hace más baja y la tarjeta menos maciza */
.tarjeta .foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--nude);
}
.tarjeta .foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Valor de respaldo: cada producto lo sobrescribe con su punto focal. */
  object-position: 50% 65%;
  transition: transform 450ms ease;
}
.tarjeta:hover .foto img { transform: scale(1.07); }

.tarjeta .cuerpo {
  padding: 17px 18px 19px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tarjeta .categoria {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blush);
  margin: 0 0 7px;
}

.tarjeta h3 {
  font-size: 0.93rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 7px;
}
.tarjeta h3 a { color: var(--tinta); }
.tarjeta:hover h3 a { color: var(--magenta); }

.tarjeta .descripcion {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gris);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0 0 14px;
}

.tarjeta .pie {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tarjeta .precio { font-size: 1.3rem; }

.tarjeta .unidad {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--gris);
  text-align: right;
}

.cinta {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--magenta);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  z-index: 2;
}


/* ==========================================================================
   9. PÁGINA DE PRODUCTO Y BÚSQUEDA
   ========================================================================== */

.miga {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--oat);
  padding: 24px 0 0;
}
.miga a { color: var(--oat); }
.miga a:hover { color: var(--papel); }

.producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 34px 0 76px;
}

.producto .foto-grande {
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--sombra);
}
.producto .foto-grande img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 60%;   /* respaldo; el producto lo sobrescribe */
}

.producto .panel {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 40px 36px;
  box-shadow: var(--sombra);
}

.producto h1 {
  font-size: clamp(1.55rem, 3.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--tinta);
}

.producto .descripcion {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: #4A3438;
  margin: 0 0 24px;
}

.producto .precio-grande {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.6rem;
  color: var(--magenta);
  line-height: 1;
}

.producto .unidad-grande {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gris);
  margin: 6px 0 22px;
}

.ficha {
  border-top: 1px solid var(--linea);
  margin-top: 24px;
  padding-top: 18px;
  font-size: 0.92rem;
  color: var(--gris);
}
.ficha div { display: flex; gap: 10px; padding: 5px 0; }
.ficha strong { color: var(--tinta); font-weight: 600; min-width: 128px;
                flex-shrink: 0; }
/* Igual que en .datos-ficha: que un correo largo se parta en vez de salirse. */
.ficha span { min-width: 0; overflow-wrap: anywhere; }

.aviso-proximamente {
  margin-top: 24px;
  padding: 15px 18px;
  background: rgba(181, 98, 113, 0.14);
  border-left: 5px solid var(--magenta);
  border-radius: var(--radio-sm);
  font-size: 0.92rem;
}

/* --- Resultados de búsqueda --- */
.resumen-busqueda {
  color: var(--oat);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 30px;
}
.resumen-busqueda strong { color: var(--papel); font-style: normal; }

.sin-resultados {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 46px 34px;
  text-align: center;
  color: var(--gris);
}
.sin-resultados h3 {
  color: var(--wine); margin: 0 0 10px;
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.sin-resultados p { max-width: 460px; margin: 0 auto; }

.sin-resultados .icono-vacio {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  color: var(--blush);
}
.sin-resultados .icono-vacio svg { width: 100%; height: 100%; }

.sin-resultados .ayuda-contacto {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: 0.9rem;
}
.sugerencias { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
               margin-top: 18px; }
.sugerencias a {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; padding: 8px 17px; border-radius: 999px;
  background: var(--magenta); color: #fff;
}
.sugerencias a:hover { background: var(--magenta-oscuro); text-decoration: none; }


/* ==========================================================================
   10. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.whatsapp {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #25D366;          /* el verde oficial de WhatsApp */
  color: #fff;
  padding: 11px 20px 11px 13px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.whatsapp:hover {
  text-decoration: none; color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
}
.whatsapp svg { width: 27px; height: 27px; flex-shrink: 0; }


/* ==========================================================================
   11. PIE DE PÁGINA
   ========================================================================== */

.pie-sitio {
  background: var(--wine);
  color: #E2CFC4;
  padding: 56px 0 26px;
  font-size: 0.93rem;
}

.pie-sitio .columnas {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}

.pie-sitio img { height: 52px; margin-bottom: 15px; }

.pie-sitio h4 {
  color: var(--oat);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 15px;
}

.pie-sitio ul { list-style: none; margin: 0; padding: 0; }
.pie-sitio li { margin-bottom: 9px; }
.pie-sitio a { color: #E2CFC4; }
.pie-sitio a:hover { color: #fff; }

.pie-sitio .con-icono { display: flex; align-items: center; gap: 9px; }
.pie-sitio .con-icono svg { width: 17px; height: 17px; flex-shrink: 0; }

.pie-sitio .legal {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: #B99A93;
}


/* ==========================================================================
   12. PANTALLAS PEQUEÑAS
   ========================================================================== */

/* Por debajo de 1080px ya no caben logo + buscador + menú en una sola fila,
   así que el buscador se pasa a una segunda línea (order:3 lo manda al final). */
@media (max-width: 1080px) {
  .cabecera .contenedor { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .buscador { order: 3; flex: 1 1 100%; max-width: none; }
  .nav { margin-left: auto; gap: 20px; }
}

@media (max-width: 860px) {
  .producto { grid-template-columns: 1fr; gap: 28px; }
  .pie-sitio .columnas { grid-template-columns: 1fr; gap: 28px; }
  .slider .flecha { width: 40px; height: 40px; }
  .slider .flecha.izq { left: 10px; }
  .slider .flecha.der { right: 10px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .cabecera .contenedor { justify-content: center; gap: 14px; }

  /* El menú, como TIRA DESLIZABLE. Antes intentaba centrarse
     (justify-content: center) y, cuando no cabía, se cortaba por los DOS
     lados; peor aún, en un flex centrado que desborda, el lado izquierdo
     queda inalcanzable: no existe forma de scrollear hacia él. La solución
     es la de todas las apps: el menú arranca pegado a la izquierda y se
     desliza con el dedo hacia la derecha.
       · flex: 1 1 100%   -> ocupa su propia fila completa de la cabecera
       · min-width: 0     -> permiso para ser más angosto que su contenido
       · overflow-x: auto -> ahí nace el deslizamiento
       · nowrap + flex-shrink: 0 en los enlaces -> nada se parte ni se aplasta
     La barra de scroll se oculta (scrollbar-width) porque el dedo no la
     necesita y en iOS ni siquiera existiría. */
  .nav {
    margin-left: 0;
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; flex-shrink: 0; }
  .seccion { padding: 50px 0; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; }
  .tarjeta .cuerpo { padding: 13px 13px 15px; }
  .tarjeta h3 { font-size: 0.84rem; }
  .tarjeta .descripcion { display: none; }   /* en el celular estorba */
  .tarjeta .precio { font-size: 1.12rem; }
  .producto .panel { padding: 28px 22px; }
  .whatsapp { padding: 12px; }
  .whatsapp span { display: none; }          /* solo el icono en el celular */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .slide img { transform: none !important; }
}

/* ==========================================================================
   13. PÁGINAS DE CUENTA (entrar, registro, perfil, recuperar contraseña)
   --------------------------------------------------------------------------
   Todas comparten el mismo panel color avena centrado sobre el fondo rosa.
   Nada de formulario genérico de Django: mismos colores, mismas tipografías
   y mismo logo que el resto del sitio.
   ========================================================================== */

.pagina-cuenta {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 54px 24px 70px;
}

.panel-cuenta {
  width: 100%;
  max-width: 430px;
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 40px 38px 34px;
  box-shadow: var(--sombra);
}
/* Los formularios con más campos (registro, perfil) necesitan más aire */
.panel-cuenta.ancho { max-width: 560px; }

.cabecera-cuenta { text-align: center; margin-bottom: 26px; }

.cabecera-cuenta img {
  height: 52px; width: auto;
  margin: 0 auto 18px;
}

.cabecera-cuenta h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 0;
}

.subtitulo-cuenta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gris);
  margin: 9px 0 0;
}

/* --- Campos del formulario --- */
.campo-fila { margin-bottom: 18px; }

.campo-fila label {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 7px;
}

.campo-fila .obligatorio { color: var(--magenta); margin-left: 2px; }

/* La clase .campo se la pone estilizar() en forms.py a cada input */
.campo,
.campo-fila input[type="text"],
.campo-fila input[type="email"],
.campo-fila input[type="password"],
.campo-fila input[type="tel"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.97rem;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--linea);
  border-radius: var(--radio-sm);
  padding: 12px 15px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo::placeholder { color: #B0A09F; }

.campo:focus,
.campo-fila input:focus {
  outline: none;
  border-color: var(--magenta);
  /* El halo suave marca dónde está el cursor sin gritar */
  box-shadow: 0 0 0 4px rgba(160, 1, 100, 0.13);
}

.campo-fila.con-error .campo,
.campo-fila.con-error input { border-color: #B3261E; }

.ayuda-campo {
  font-size: 0.82rem;
  color: var(--gris);
  margin: 6px 0 0;
  line-height: 1.5;
}
/* Django genera la lista de reglas de contraseña como <ul> */
.ayuda-campo ul { margin: 5px 0 0; padding-left: 18px; }
.ayuda-campo li { margin-bottom: 3px; }

.error-campo {
  font-size: 0.84rem;
  color: #B3261E;
  font-weight: 600;
  margin: 6px 0 0;
}

.error-general {
  background: #FDECEA;
  border-left: 5px solid #B3261E;
  border-radius: var(--radio-sm);
  padding: 13px 16px;
  margin-bottom: 20px;
}
.error-general p { margin: 0; color: #8C1D18; font-size: 0.92rem; }

/* --- Botones y enlaces de estas páginas --- */
.boton.ancho-total { width: 100%; text-align: center; margin-top: 6px; }

.enlace-secundario {
  text-align: center;
  margin: 18px 0 0;
  font-size: 0.9rem;
}

.nota-bajo-panel {
  text-align: center;
  color: var(--oat);
  margin: 20px 0 0;
  font-size: 0.94rem;
}
.nota-bajo-panel a { color: var(--papel); font-weight: 600; text-decoration: underline; }
.nota-bajo-panel.tenue { font-size: 0.86rem; opacity: 0.8; margin-top: 8px; }

/* --- Bloques del perfil --- */
.dato-fijo {
  background: rgba(160, 1, 100, 0.06);
  border-radius: var(--radio-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.etiqueta-dato {
  display: block;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 3px;
}

.bloque-cuenta {
  border-top: 1px solid var(--linea);
  margin-top: 26px;
  padding-top: 22px;
}
.bloque-cuenta h2 {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wine);
  margin: 0 0 8px;
}

.mensaje-cuenta {
  background: rgba(181, 98, 113, 0.12);
  border-left: 5px solid var(--magenta);
  border-radius: var(--radio-sm);
  padding: 16px 18px;
  margin-bottom: 8px;
}
.mensaje-cuenta p { margin: 0 0 6px; }
.mensaje-cuenta p:last-child { margin-bottom: 0; }
.mensaje-cuenta.exito { background: #E9F6EE; border-left-color: #1F7A3D; }
.mensaje-cuenta.error { background: #FDECEA; border-left-color: #B3261E; }

/* --- Enlace "Mi cuenta" de la barra de navegación --- */
.nav a.enlace-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  padding: 7px 15px;
}
.nav a.enlace-cuenta::after { display: none; }  /* sin el subrayado del resto */
.nav a.enlace-cuenta:hover { background: rgba(255,255,255,0.14); color: #fff; }
.nav a.enlace-cuenta svg { width: 15px; height: 15px; }

@media (max-width: 620px) {
  .panel-cuenta { padding: 30px 22px 26px; }
  .pagina-cuenta { padding: 30px 16px 46px; }
}

/* ==========================================================================
   14. CARRITO, CHECKOUT Y PEDIDOS
   ========================================================================== */

/* --- Icono del carrito en la barra de navegación --- */
.nav a.enlace-carrito {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px;
}
.nav a.enlace-carrito::after { display: none; }
.nav a.enlace-carrito svg { width: 21px; height: 21px; }
.nav a.enlace-carrito:hover { color: var(--oat); }

/* La burbuja con el número de artículos */
.contador-carrito {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  background: var(--oat);
  color: var(--wine);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* --- Botón de agregar en la página de producto --- */
.form-agregar {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 26px;
  flex-wrap: wrap;
}
.form-agregar .boton { flex: 1 1 auto; }

.entrada-cantidad {
  width: 74px;
  font-family: var(--sans);
  font-size: 1rem;
  text-align: center;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--linea);
  border-radius: 999px;
  padding: 12px 8px;
}
.entrada-cantidad:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(160, 1, 100, 0.13);
}

/* --- Página del carrito --- */
.carrito-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 34px;
  align-items: start;
}

.carrito-lineas { display: flex; flex-direction: column; gap: 16px; }

.linea-carrito {
  display: grid;
  grid-template-columns: 108px 1fr auto auto;
  gap: 18px;
  align-items: center;
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 15px;
}

.linea-carrito .foto-linea {
  width: 108px; height: 88px;
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--nude);
}
.linea-carrito .foto-linea img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.categoria-linea {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--blush); margin: 0 0 4px;
}
.datos-linea h3 {
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0 0 5px;
}
.datos-linea h3 a { color: var(--tinta); }
.precio-unitario {
  font-family: var(--serif); font-style: italic;
  color: var(--gris); margin: 0; font-size: 0.95rem;
}
.anticipacion-linea { font-size: 0.78rem; color: var(--gris); margin: 3px 0 0; }

.acciones-linea { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.form-cantidad { display: flex; gap: 7px; align-items: center; }
.form-cantidad .entrada-cantidad { width: 62px; padding: 8px 6px; font-size: 0.9rem; }

.boton-mini {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 999px;
  border: 2px solid var(--magenta); background: transparent;
  color: var(--magenta); cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.boton-mini:hover { background: var(--magenta); color: #fff; }

.boton-quitar {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem; color: var(--gris);
  text-decoration: underline; padding: 2px;
}
.boton-quitar:hover { color: #B3261E; }

.subtotal-linea { text-align: right; min-width: 92px; }
.subtotal-linea .precio { font-size: 1.25rem; }

/* --- Resumen (carrito y checkout) --- */
.resumen-pedido {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 26px 24px;
  position: sticky;      /* se queda a la vista al bajar */
  top: 110px;
}
.resumen-pedido h2 {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--wine); margin: 0 0 16px;
}

.fila-resumen {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 0.92rem;
}
.fila-resumen.total {
  border-top: 2px solid var(--linea);
  margin-top: 10px; padding-top: 14px;
  font-size: 1rem;
}
.fila-resumen.total .precio { font-size: 1.5rem; }

.aviso-anticipacion {
  background: rgba(160, 1, 100, 0.08);
  border-radius: var(--radio-sm);
  padding: 11px 14px;
  font-size: 0.85rem;
  margin: 16px 0;
}

/* --- Checkout --- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 34px;
  align-items: start;
}
.checkout-form {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 30px 28px;
}
.checkout-form textarea.campo { resize: vertical; min-height: 84px; }

/* Las dos rutas: invitado o cuenta, al mismo nivel */
.dos-rutas {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 24px 26px;
  margin-bottom: 26px;
}
.dos-rutas .ruta h2 {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--wine); margin: 0 0 7px;
}
.dos-rutas .ruta p { margin: 0 0 12px; font-size: 0.9rem; color: var(--gris); }
.separador-rutas {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--nude); color: var(--wine);
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
}

/* --- Ficha del pedido --- */
.exito-pedido { text-align: center; margin-bottom: 30px; }
.icono-exito {
  width: 76px; height: 76px; margin: 0 auto 16px;
  color: var(--oat);
}
.icono-exito svg { width: 100%; height: 100%; }

.ficha-pedido {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 26px 26px 22px;
  margin-bottom: 20px;
}
.cabecera-ficha {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 16px; margin-bottom: 16px;
}
.numero-pedido {
  font-family: var(--serif); font-size: 1.4rem; color: var(--magenta);
}
.estado-pedido {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 7px 14px; border-radius: 999px;
  background: var(--nude); color: var(--wine);
}
.estado-pedido.estado-pagado,
.estado-pedido.estado-listo { background: #CDEBD8; color: #16653A; }
.estado-pedido.estado-cancelado { background: #F6D5D2; color: #8C1D18; }

.datos-ficha {
  border-top: 1px solid var(--linea);
  margin-top: 14px; padding-top: 14px;
  font-size: 0.9rem; color: var(--gris);
}
.datos-ficha div { display: flex; gap: 12px; padding: 4px 0; }
.datos-ficha strong {
  color: var(--tinta); font-weight: 600; min-width: 92px; flex-shrink: 0;
}
/* Un correo largo no tiene espacios por donde partirse, y en un celular se
   salía de la ficha. min-width:0 deja que el hijo de un flex se encoja (por
   defecto se niega), y overflow-wrap parte la palabra donde haga falta. */
.datos-ficha span { min-width: 0; overflow-wrap: anywhere; }

.acciones-pedido {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin: 24px 0;
}

.aviso-guardar {
  background: rgba(160, 1, 100, 0.09);
  border-left: 5px solid var(--magenta);
  border-radius: var(--radio-sm);
  padding: 16px 18px;
  font-size: 0.92rem;
}
.aviso-guardar p { margin: 0 0 6px; }
.aviso-guardar p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .carrito-layout, .checkout-layout { grid-template-columns: 1fr; }
  .resumen-pedido { position: static; }
  .dos-rutas { grid-template-columns: 1fr; text-align: center; }
  .separador-rutas { margin: 0 auto; }
}

@media (max-width: 620px) {
  .linea-carrito {
    grid-template-columns: 84px 1fr;
    grid-template-areas: "foto datos" "acciones subtotal";
    gap: 12px;
  }
  .linea-carrito .foto-linea { grid-area: foto; width: 84px; height: 72px; }
  .datos-linea { grid-area: datos; }
  .acciones-linea { grid-area: acciones; align-items: flex-start; }
  .subtotal-linea { grid-area: subtotal; }
}

/* ==========================================================================
   15. PÁGINAS DE PAGO
   ========================================================================== */

.pasos-pago {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
.paso-pago {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radio); padding: 16px 18px;
}
.paso-pago .num-paso {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--oat); color: var(--wine);
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem;
}
.paso-pago h2 {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--papel); margin: 3px 0 5px;
}
.paso-pago p { margin: 0; font-size: 0.86rem; color: var(--oat); }

.monto-pagar {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 24px 26px; text-align: center; margin-bottom: 18px;
}
.monto-pagar strong {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 2.8rem; color: var(--magenta); line-height: 1.1;
}

.tarjeta-banco {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 24px 26px; margin-bottom: 22px;
}
.tarjeta-banco h2 {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--wine); margin: 0 0 16px;
}
.dato-banco {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--linea);
  font-size: 0.94rem;
}
.dato-banco:last-of-type { border-bottom: 0; }
.dato-banco span { color: var(--gris); }
.dato-banco strong { text-align: right; }
.dato-banco.numero strong {
  font-family: var(--serif); font-size: 1.35rem; color: var(--magenta);
  letter-spacing: 0.04em;
}

.caja-comprobante {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 26px; margin-bottom: 22px;
}
.caja-comprobante h2 {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--wine); margin: 0 0 16px;
}
.caja-comprobante input[type="file"] {
  width: 100%; padding: 12px;
  background: var(--papel);
  border: 2px dashed var(--linea); border-radius: var(--radio-sm);
  font-size: 0.9rem; cursor: pointer;
}
.caja-comprobante input[type="file"]:hover { border-color: var(--magenta); }

.estado-pedido.estado-revision { background: #FDE8C8; color: #7A4B0A; }

/* ==========================================================================
   16. PANEL DE ESTADÍSTICAS
   ========================================================================== */

.encabezado-panel {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.acciones-panel { display: flex; gap: 10px; flex-wrap: wrap; }

.tarjetas-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.metrica {
  background: var(--oat-claro);
  border-radius: var(--radio); padding: 20px 22px;
}
.metrica.destacada { background: var(--magenta); }
.metrica.destacada .etiqueta-metrica { color: var(--oat); }
.metrica.destacada strong { color: #fff; }
.metrica.destacada small { color: rgba(255,255,255,0.8); }

.etiqueta-metrica {
  display: block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--blush); margin-bottom: 6px;
}
.metrica strong {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 2.1rem; color: var(--magenta); line-height: 1.1;
}
.metrica small { color: var(--gris); font-size: 0.82rem; }

.panel-caja {
  background: var(--oat-claro);
  border-radius: var(--radio);
  padding: 24px 26px; margin-bottom: 20px;
}
.panel-caja h2 {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--wine); margin: 0 0 16px;
}
.titulo-mini {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blush); margin: 0 0 8px;
}
.ayuda-panel { font-size: 0.9rem; color: var(--gris); margin: 0 0 12px; }

.dos-columnas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}

.tabla-stats { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla-stats th {
  text-align: left; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--blush);
  padding: 0 0 10px; border-bottom: 2px solid var(--linea);
}
.tabla-stats th:not(:first-child), .tabla-stats td.num { text-align: right; }
.tabla-stats td {
  padding: 11px 0; border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabla-stats tr:last-child td { border-bottom: 0; }
.precio-tabla {
  font-family: var(--serif); font-style: italic;
  color: var(--magenta); font-size: 1.02rem;
}
.correo-cliente { display: block; color: var(--gris); font-size: 0.78rem; }
.vacio { color: var(--gris); font-style: italic; text-align: center; padding: 20px 0; }

/* --- Gráfica --- */
.svg-grafica { width: 100%; height: auto; }
.svg-grafica .barra { fill: var(--magenta); transition: fill 160ms; }
.svg-grafica .barra:hover { fill: var(--blush); }
.svg-grafica .linea-guia { stroke: var(--linea); stroke-width: 1; }
.svg-grafica .etiqueta-eje {
  fill: var(--gris); font-size: 11px; font-family: var(--sans);
}

/* --- Bloques de código --- */
.bloque-sql {
  background: #2A1418; color: #F0DCD0;
  border-radius: var(--radio-sm);
  padding: 15px 17px; overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.78rem; line-height: 1.6; margin: 0;
  white-space: pre;
}
.bloque-sql.python { background: #22303C; }
.bloque-sql.pequeno { font-size: 0.7rem; max-height: 240px; overflow-y: auto; }

/* --- Agenda de producción --- */
.fila-agenda {
  display: grid; grid-template-columns: 62px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.fila-agenda:last-child { border-bottom: 0; }
.fecha-agenda { text-align: center; }
.fecha-agenda strong {
  display: block; font-family: var(--serif); font-size: 1.15rem;
  color: var(--magenta);
}
.fecha-agenda small { color: var(--gris); font-size: 0.7rem; text-transform: uppercase; }
.detalle-agenda { font-size: 0.92rem; }
.productos-agenda { color: var(--gris); font-size: 0.83rem; margin-top: 3px; }

@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .fila-agenda { grid-template-columns: 54px 1fr; }
  .fila-agenda .estado-pedido { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   17. CLASES DE UTILIDAD
   --------------------------------------------------------------------------
   Sustituyen a los atributos style="" que había repartidos por las plantillas.

   ¿Por qué el cambio? Para poder quitar 'unsafe-inline' de style-src en la
   Content-Security-Policy. Mientras exista UN SOLO atributo style= en el
   sitio, la CSP tiene que permitir estilos en línea, y eso deja abierta la
   puerta a que un atacante que logre inyectar HTML maquete la página a su
   gusto: tapar el precio real, poner un formulario falso encima del nuestro,
   esconder un aviso...

   Es la clase de trabajo aburrido que casi nadie hace, y por eso casi todos
   los sitios llevan 'unsafe-inline' para siempre.
   ========================================================================== */

.u-centrado      { text-align: center; }
.u-izquierda     { text-align: left; }
.u-sin-relleno   { padding: 0; }
.u-blanco        { color: #fff; }

.u-mt-12 { margin-top: 12px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-48 { margin-top: 48px; }
.u-mt-56 { margin-top: 56px; }
.u-mb-34 { margin-bottom: 34px; }
.u-mb-56 { margin-bottom: 56px; }
.u-mb-64 { margin-bottom: 64px; }

.u-pt-26 { padding-top: 26px; }
.u-pt-30 { padding-top: 30px; }
.u-pt-32 { padding-top: 32px; }

.u-ancho-640 { max-width: 640px; }
.u-ancho-720 { max-width: 720px; }
.u-ancho-760 { max-width: 760px; }
.u-ancho-800 { max-width: 800px; }

/* Títulos de categoría dentro del menú y de secciones secundarias */
.titulo-seccion.mediano { font-size: 1.35rem; }
.titulo-seccion.pequeno { font-size: 1.2rem; }
.titulo-seccion.categoria-menu { font-size: 1.3rem; }

.barra-acento.corta { width: 52px; height: 7px; margin-bottom: 24px; }
.barra-acento.mini  { width: 52px; height: 8px; }

/* Los tres pasos de "cómo pedir" */
.pasos-como {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.paso-como { text-align: center; }
.paso-como .numero-paso {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 2.4rem; color: var(--magenta); line-height: 1;
}
.paso-como h3 {
  font-size: 0.84rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 6px 0 8px;
}
.paso-como p { margin: 0; color: var(--gris); font-size: 0.95rem; }

/* Etiqueta de categoría en la página de producto */
.producto .panel .categoria {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--magenta); font-weight: 600; margin: 0 0 10px;
}

/* ==========================================================================
   18. ESTADO DEL PEDIDO PARA EL CLIENTE
   ========================================================================== */

.estado-cliente {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--oat-claro);
  border-radius: var(--radio);
  border-left: 5px solid var(--magenta);
  padding: 20px 22px; margin-bottom: 18px;
}
.estado-cliente .icono-estado {
  flex-shrink: 0; width: 34px; height: 34px; color: var(--magenta);
}
.estado-cliente .icono-estado svg { width: 100%; height: 100%; }
.estado-cliente .texto-estado strong {
  display: block; font-size: 1.02rem; font-weight: 800;
  letter-spacing: 0.01em; color: var(--tinta); margin-bottom: 3px;
}
.estado-cliente .texto-estado p {
  margin: 0; font-size: 0.93rem; color: var(--gris); line-height: 1.55;
}

/* Cada estado con su color, para que se distinga de un vistazo */
.estado-cliente.estado-c-revision   { border-left-color: #C77700; }
.estado-cliente.estado-c-revision .icono-estado { color: #C77700; }

.estado-cliente.estado-c-rechazado  { border-left-color: #B3261E; }
.estado-cliente.estado-c-rechazado .icono-estado { color: #B3261E; }

.estado-cliente.estado-c-pagado,
.estado-cliente.estado-c-preparando,
.estado-cliente.estado-c-listo,
.estado-cliente.estado-c-en_camino,
.estado-cliente.estado-c-entregado  { border-left-color: #1F7A3D; }
.estado-cliente.estado-c-pagado .icono-estado,
.estado-cliente.estado-c-preparando .icono-estado,
.estado-cliente.estado-c-listo .icono-estado,
.estado-cliente.estado-c-en_camino .icono-estado,
.estado-cliente.estado-c-entregado .icono-estado { color: #1F7A3D; }

/* Las píldoras de estado de la ficha */
.estado-pedido.estado-revision  { background: #FDE8C8; color: #7A4B0A; }
.estado-pedido.estado-rechazado { background: #F6D5D2; color: #8C1D18; }
.estado-pedido.estado-pagado,
.estado-pedido.estado-preparando { background: #D8EBDD; color: #16653A; }
.estado-pedido.estado-listo,
.estado-pedido.estado-en_camino,
.estado-pedido.estado-entregado { background: #CDEBD8; color: #16653A; }

/* ==========================================================================
   19. SELECTOR DE FECHA DE ENTREGA
   ========================================================================== */

#fechas-rapidas {
  display: flex; gap: 9px; flex-wrap: wrap; margin: 4px 0 12px;
}

.chip-fecha {
  display: flex; flex-direction: column; align-items: center;
  min-width: 62px; padding: 9px 11px;
  background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--radio-sm);
  cursor: pointer; font-family: var(--sans);
  transition: border-color var(--transicion), background var(--transicion),
              transform var(--transicion);
}
.chip-fecha:hover { border-color: var(--magenta); transform: translateY(-2px); }
.chip-fecha.elegido {
  background: var(--magenta); border-color: var(--magenta);
}
.chip-fecha.elegido .dia-chip,
.chip-fecha.elegido .num-chip,
.chip-fecha.elegido .mes-chip { color: #fff; }

.chip-fecha .dia-chip {
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blush);
}
.chip-fecha .num-chip {
  font-family: var(--serif); font-style: italic; font-size: 1.4rem;
  color: var(--magenta); line-height: 1.1;
}
.chip-fecha .mes-chip {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gris);
}

/* Aviso de las fechas reales en el checkout: es el momento en que el cliente
   se compromete, así que se ve claramente. */
.aviso-fecha-real {
  background: rgba(160, 1, 100, 0.08);
  border-left: 4px solid var(--magenta);
  border-radius: var(--radio-sm);
  padding: 13px 16px;
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.aviso-fecha-real strong { display: block; margin-bottom: 4px; color: var(--tinta); }
.aviso-fecha-real p { margin: 0; color: var(--gris); line-height: 1.55; }