/* ============================================================
   FRUTERÍA EBOREY — Estilos globales
   Desktop-first. Breakpoints: 1024px (tablet), 640px (móvil).
   ============================================================ */

:root {
  --verde-oscuro: #1B6B1B;
  --verde-lima: #6BBF00;
  --amarillo: #FFD700;
  --rojo: #CC2200;
  --naranja: #F08A1D;
  --blanco: #FFFFFF;
  --fondo-claro: #F7F7F2;
  --verde-footer: #0E3D0E;
  --marron-badge: #4E3200; /* texto sobre fondos amarillos: marrón oscuro, no negro */
  --whatsapp-verde: #25D366;
  --placeholder-imagen: #EAF3DE;
  --sombra: 0 4px 14px rgba(0, 0, 0, 0.12);
  --radio: 14px;
  --ease-material: cubic-bezier(0.4, 0, 0.2, 1);
  --transicion: 0.25s var(--ease-material);
  --header-height: 64px;
  --gris-borde: #E5E5E5;
  --gris-fondo-foto: #F5F5F5;
  --texto-card: #2C2C2A;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
  /* Hallazgo QA (móvil, H2): .sn-anim-derecha (about.html) usa
     transform: translateX(40px) antes de entrar en el viewport (revelado
     por IntersectionObserver, ver js/about.js); esa traslación cuenta para
     el scroll horizontal del documento aunque el elemento no quepa visto,
     dejando ~20-40px de scroll lateral falso desde la propia carga de la
     página. `overflow-x: clip` (NO `hidden`) es el candado: las tiras
     horizontales propias (categorías, tabla de cookies) ya usan su propio
     overflow-x:auto en un contenedor interno, así que no se ven afectadas.
     `hidden` en html/body rompe position:sticky en #header-principal (deja
     de ser el "scroller" implícito de la ventana y pasa a serlo html/body,
     cambiando el cálculo del contenedor de sticky) — bug real encontrado
     al implementar BUG 1.5; `clip` recorta el pintado igual mismo pero NO
     convierte html/body en un contenedor de scroll, así que sticky sigue
     funcionando. */
  overflow-x: clip;
  /* Auditoría navbar (bug real de fondo, no umbral/cooldown): el "scroll
     anchoring" del navegador (activo por defecto) compensa cambios de
     layout ajustando scrollY para mantener estable visualmente algún nodo
     de contenido — pero el colapso animado del header (`.header-inner-
     colapsable`, max-height, más abajo) ES un cambio de layout de ese
     tipo, así que cada cambio de estado del navbar generaba un ajuste de
     scrollY, que a su vez disparaba un evento 'scroll' real pero espurio
     (no venía del usuario) que la propia máquina de estados del navbar
     interpretaba como un cambio de dirección genuino — bucle infinito:
     cambia de estado → colapsa altura → scroll anchoring ajusta scrollY →
     scroll espurio → cambia de estado otra vez. `overflow-anchor: none` en
     el header (probado primero) no bastaba porque el nodo "anclado" por el
     navegador vive en el contenido, no en el header; desactivarlo aquí, en
     la raíz del documento, es la forma estándar de apagar el mecanismo
     entero para toda la página. */
  overflow-anchor: none;
}

body {
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  background: var(--fondo-claro);
  color: #222;
  line-height: 1.4;
  overflow-x: clip;
}

.hero-logo, .header-logo, .footer-logo, .drawer-header h2 {
  font-family: 'Baloo 2', sans-serif;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
input, textarea { font-family: inherit; }

.oculto { display: none; }
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   HERO (landing, index.html — pantalla completa)
   ============================================================ */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
}

/* Da recorrido de scroll (100vh) al parallax pinneado del hero de arriba.
   Se mantiene SIEMPRE presente, incluso con prefers-reduced-motion: si se
   ocultara, la página deja de tener scroll y el usuario no puede avanzar
   ni con la rueda ni con touch — solo se desactiva la ANIMACIÓN (ver
   js/common.js), nunca la capacidad de hacer scroll en sí. */
.scroll-space { height: 100vh; }

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--verde-lima), var(--verde-oscuro));
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%) scale(1);
  animation: kenBurns 20s ease-in-out infinite alternate;
}

/* BLOQUE 3: el vídeo nuevo se ve limpio a pantalla completa, sin tinte ni
   capa semi-transparente por encima — el contraste del texto ya no depende
   de un overlay global, sino de un degradado oscuro MUY sutil acotado solo
   a la zona del logo/subtítulo (ver .hero-content) y del contorno blanco
   que ya llevaba el logo (-webkit-text-stroke). El botón "Entrar" no lo
   necesita: ya tiene fondo sólido propio (.btn-cta-final). */

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 800px;
  animation: heroFadeScale 1s var(--ease-material) both;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.14) 55%, transparent 80%);
  border-radius: 32px;
}

.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  view-transition-name: site-logo;
}

.logo-linea-1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--verde-oscuro);
  -webkit-text-stroke: 2px var(--blanco);
  paint-order: stroke fill;
  letter-spacing: 0.02em;
}

.logo-linea-2 {
  font-size: 2.3rem;
  font-weight: 700;
  font-style: italic;
  color: var(--rojo);
  -webkit-text-stroke: 2px var(--blanco);
  paint-order: stroke fill;
  margin-top: -0.3rem;
}

.logo-o { color: var(--naranja); }

.logo-cinta {
  margin-top: 0.6rem;
  background: var(--amarillo);
  color: var(--marron-badge);
  font-weight: 700;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  font-size: 0.95rem;
}

.hero-tagline {
  font-size: 1.15rem;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  margin: 0;
}

.hero-cta-layer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.hero-cta { view-transition-name: cta-btn; }
.btn-entrar { animation: pulsoBoton 3.2s ease-in-out infinite; }

.hero-scroll-indicator { animation: bounceDown 1.6s ease-in-out infinite; }
.hero-scroll-indicator span {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  border-right: 3px solid var(--blanco);
  border-bottom: 3px solid var(--blanco);
  transform: rotate(45deg);
}

/* ============================================================
   HEADER PRINCIPAL (tienda.html — estilo Etsy, sticky)
   ============================================================ */
.header-principal {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--blanco);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

/* ---------- Hide/show en 2 fases al hacer scroll (navbar-oculto/parcial/completo) ----------
   Colapso por max-height (no grid-template-rows: en un contenedor de alto
   intrínseco -auto-, como .header-inner en móvil con varias filas, "0fr" se
   resuelve igual que "auto" al no haber espacio libre que repartir, así que
   nunca llega a colapsar). En desktop (bloque base de aquí abajo) el techo
   es 80px, EXACTO al alto real de .header-inner (fijo, no intrínseco, ver
   más abajo) — no una cifra generosa: un techo de 200px sobre un contenido
   de 80px dejaba una "zona muerta" del 60% del recorrido de la transición
   (200px→80px) sin ningún cambio visual, y todo el colapso real ocurría de
   golpe en el 40% final — eso era el salto brusco reportado, no la duración
   de la transición en sí. En 641-1024px y ≤640px SÍ se mantiene un techo de
   200px (ver media queries): ahí .header-inner pasa a alto intrínseco
   (varias filas, buscador propio) y JS no aplica estas clases en la
   práctica (ANCHO_MOVIL=1024) — es solo un respaldo defensivo, así que no
   vale la pena arriesgar recorte por ajustar esa cifra.
   navbar-completo (o sin clase) = todo visible; navbar-parcial = solo la
   barra fina de categorías; navbar-oculto = todo oculto. */
.header-inner-colapsable {
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* BUG 1.4: colapsar solo por max-height se veía "cortado" de golpe en vez
   de fluido — el contenido desaparecía en cuanto el overflow:hidden lo
   recortaba, sin más movimiento propio. Se añade transform+opacity al
   contenido interno para que además se deslice y se desvanezca durante los
   mismos 0.3s (misma curva que el max-height de arriba, para que ambas
   animaciones terminen exactamente a la vez), en vez de solo encogerse el
   hueco que lo contiene. */
.header-inner-colapsable > .header-inner {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Misma duración/curva que .header-inner-colapsable de arriba: durante
   navbar-oculto ambas piezas del header colapsan A LA VEZ (antes esta
   duraba 200ms — ver bloque de abajo, que la pisa — y la otra 300ms,
   así que una terminaba de golpe 100ms antes que la otra: se veía
   descoordinado, parte del "brusco" reportado). */
.header-secundaria {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-principal.navbar-parcial .header-inner-colapsable,
.header-principal.navbar-oculto .header-inner-colapsable {
  max-height: 0;
}
.header-principal.navbar-parcial .header-inner-colapsable > .header-inner,
.header-principal.navbar-oculto .header-inner-colapsable > .header-inner {
  transform: translateY(-16px);
  opacity: 0;
}
.header-principal.navbar-oculto .header-secundaria {
  max-height: 0;
}

/* ============================================================
   VOLVER AL INICIO (about.html — enlace sutil, sin header)
   ============================================================ */
.volver-inicio {
  display: inline-block;
  margin: 1.25rem 0 0 1.5rem;
  color: var(--verde-oscuro);
  font-size: 14px;
  font-weight: 600;
}
.volver-inicio:hover { text-decoration: underline; }

.header-inner {
  max-width: 1400px;
  height: 80px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  line-height: 1;
  view-transition-name: site-logo;
}
.header-logo-fruteria { font-size: 1.5rem; font-weight: 800; color: var(--verde-oscuro); }
.header-logo-eborey { font-size: 1.25rem; font-weight: 700; font-style: italic; color: var(--rojo); }

/* ---------- Botón "Categorías" ---------- */
.btn-categorias {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: #2C2C2A;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background var(--transicion);
}
.btn-categorias:hover { background: #F5F5F5; }
/* Pegado al buscador: sin separación grande entre ambos */
.btn-categorias + .header-buscador-wrap { margin-left: -0.5rem; }

/* ---------- Buscador ancho estilo píldora (~60% del header en desktop) ---------- */
.header-buscador-wrap {
  flex: 1 1 60%;
  position: relative;
  display: flex;
  align-items: center;
}
.header-buscador-input {
  width: 100%;
  height: 48px;
  padding: 0 72px 0 20px;
  border-radius: 24px;
  border: 1.5px solid #E5E5E5;
  background: var(--blanco);
  font-size: 15px;
}
.header-buscador-input:focus-visible {
  outline: none;
  border-color: var(--verde-oscuro);
}
.btn-buscar-lupa {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion);
}
.btn-buscar-lupa:hover { background: var(--verde-lima); }

/* ---------- Dropdown de sugerencias del buscador (resultados arriba, categorías abajo) ---------- */
.buscador-dropdown {
  /* position:fixed + top/left/width en JS (ver js/app.js), no relativo a
     .header-buscador-wrap: ese contenedor vive dentro de
     .header-inner-colapsable (overflow:hidden del hide/show del navbar) y
     recortaría el dropdown si se posicionara con position:absolute ahí. */
  position: fixed;
  background: var(--blanco);
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  z-index: 70;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.buscador-dropdown.oculto { display: none; }

.buscador-dropdown-titulo {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
  padding: 0.5rem 1.1rem 0.35rem;
  margin: 0;
}
.buscador-dropdown-vacio { padding: 1rem 1.1rem; color: #777; font-size: 0.9rem; margin: 0; }

.buscador-resultado {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 1.1rem;
  text-align: left;
  transition: background var(--transicion);
}
.buscador-resultado:hover, .buscador-resultado:focus-visible { background: var(--fondo-claro); }
.buscador-resultado-imagen { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; }
.buscador-resultado-imagen .producto-foto, .buscador-resultado-imagen .producto-placeholder { width: 100%; height: 100%; }
.buscador-resultado-info { flex: 1; min-width: 0; }
.buscador-resultado-nombre { font-size: 0.9rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-resultado-precio { font-size: 0.8rem; color: var(--verde-oscuro); font-weight: 700; margin: 0; }

.buscador-dropdown-separador { border: none; border-top: 1px solid #EEE; margin: 0.4rem 0; }

.buscador-categorias-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 1.1rem 0.6rem; }
.buscador-categoria-chip {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--fondo-claro);
  color: var(--verde-oscuro);
  font-size: 0.8rem;
  font-weight: 700;
  transition: background var(--transicion), color var(--transicion);
}
.buscador-categoria-chip:hover { background: var(--verde-lima); color: var(--blanco); }

/* ---------- Carrito ---------- */
.btn-carrito-header {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde-oscuro);
  transition: transform var(--transicion);
}
.btn-carrito-header:hover { transform: scale(1.1); }

.carrito-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--blanco);
}
.carrito-badge.oculto { display: none; }

/* ---------- Barra secundaria: categorías populares ---------- */
.header-secundaria {
  border-top: 0.5px solid #E5E5E5;
  max-height: 42px;
  overflow: hidden;
  /* 300ms: sincronizada con .header-inner-colapsable (ver bloque de hide/
     show del navbar más arriba) — ambas piezas del header colapsan a la
     vez en navbar-oculto, misma duración/curva para que terminen juntas. */
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-secundaria-inner {
  max-width: 1400px;
  width: 100%;
  height: 42px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.header-secundaria-inner::-webkit-scrollbar { display: none; }

.categoria-rapida {
  flex: 0 0 auto;
  font-size: 13px;
  color: #5F5E5A;
  padding: 0.3rem 0.1rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color var(--transicion);
}
.categoria-rapida:hover { border-bottom-color: #ccc; }
.categoria-rapida.activa { border-bottom-color: var(--verde-lima); font-weight: 700; }

/* Enlaces principales de la barra secundaria: Tienda / Recetas. Más grandes
   y con más peso que las categorías, y separados de ellas por un divisor. */
.nav-principal {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  color: #2C2C2A;
  padding: 0.3rem 0.1rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--transicion), border-color var(--transicion);
}
.nav-principal:hover { color: var(--verde-oscuro); }
.nav-principal.activa { color: var(--verde-oscuro); border-bottom-color: var(--verde-lima); }
.nav-divisor { flex: 0 0 auto; width: 1px; height: 20px; background: #DDD; margin: 0 0.2rem; }

/* ============================================================
   DRAWERS (izquierdo: categorías/filtros — derecho: carrito)
   ============================================================ */
.drawer-menu-contenido { display: flex; flex-direction: column; gap: 1.25rem; }

/* Redundante con el nav de .header-secundaria salvo en móvil, donde esa fila
   se oculta entera (ver UX 4, breakpoint 640px): ahí es la única forma de
   llegar a Inicio/Recetas desde el header. */
.drawer-nav-principal { display: none; flex-direction: column; gap: 0.5rem; }
.drawer-nav-principal a { font-weight: 700; color: var(--gris-oscuro, #2C2C2A); }
.drawer-nav-principal a:hover { color: var(--verde-oscuro); }

.filtro-seccion { display: flex; flex-direction: column; gap: 0.6rem; }
.filtro-titulo {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
}
.filtro-separador { border: none; border-top: 1px solid #eee; margin: 0; }

.lista-categorias-drawer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.categoria-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #333;
  text-align: left;
  transition: background var(--transicion), color var(--transicion);
}
.categoria-item:hover { background: var(--fondo-claro); }
.categoria-item.activa { background: var(--verde-lima); color: var(--blanco); }

.precio-rango { display: flex; align-items: center; gap: 0.5rem; }
.precio-input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
}
.precio-input:focus-visible { outline: 2px solid var(--verde-lima); border-color: var(--verde-lima); }

.btn-aplicar-precio {
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  align-self: flex-start;
  transition: background var(--transicion);
}
.btn-aplicar-precio:hover { background: var(--verde-lima); }

.orden-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  cursor: pointer;
}
.orden-opcion input { accent-color: var(--verde-oscuro); }

/* ============================================================
   SOBRE NOSOTROS
   ============================================================ */
/* BLOQUE 7: gradient mesh de fondo, animado, solo CSS (sin canvas/WebGL).
   .sobre-nosotros cubre toda la página en about.html, así que su propio
   fondo opaco tiene que cederle el paso (transparent) para que el mesh
   —fixed, detrás de todo— se vea; el tono base de fondo lo sigue poniendo
   el propio <body> (var(--fondo-claro)), que pinta el canvas por debajo de
   absolutamente todo. */
body.pagina-about .sobre-nosotros { background: transparent; }

.gradient-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.gradient-mesh-blob {
  position: absolute;
  width: 45vmax;
  height: 45vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  will-change: transform;
}
.gradient-mesh-blob--verde {
  top: -12%;
  left: -12%;
  background: #2D6A2E;
  animation: gradientMeshFlotar1 42s ease-in-out infinite;
}
.gradient-mesh-blob--naranja {
  top: 28%;
  right: -16%;
  background: #E8A838;
  animation: gradientMeshFlotar2 50s ease-in-out infinite;
}
.gradient-mesh-blob--crema {
  bottom: -18%;
  left: 22%;
  background: #F5F0E8;
  opacity: 0.5;
  animation: gradientMeshFlotar3 58s ease-in-out infinite;
}
@keyframes gradientMeshFlotar1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 6vh) scale(1.15); }
}
@keyframes gradientMeshFlotar2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vw, 8vh) scale(1.1); }
}
@keyframes gradientMeshFlotar3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5vw, -7vh) scale(1.2); }
}

.sobre-nosotros { background: var(--fondo-claro); padding: 120px 1.5rem; }

.sobre-titulo-bloque { max-width: 1200px; margin: 0 auto 3.5rem; text-align: center; }
.sobre-titulo-bloque h2 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 2rem;
  color: var(--verde-oscuro);
  margin: 0;
}
.sobre-titulo-linea {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--verde-lima);
  margin: 0.9rem auto 0;
  border-radius: 2px;
}

.sobre-nosotros-superior {
  max-width: 1000px;
  margin: 0 auto 5rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.sobre-parrafo {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #333;
  margin: 0 0 1.8rem;
}

.sobre-info { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.7rem; }
.sobre-info p { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--verde-oscuro); }
/* Tarjetas sutiles para separar ubicación/horario del texto del poema */
.sobre-info-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(27, 107, 27, 0.12);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
}
.sobre-horario { display: flex; flex-direction: column; gap: 0.35rem; }
.sobre-horario p { margin: 0; }

.sobre-redes { display: flex; gap: 1.3rem; }
.red-social {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.red-social svg { width: 28px; height: 28px; }
.red-social:hover {
  background: var(--verde-lima);
  transform: scale(1.15);
  box-shadow: 0 0 28px rgba(107, 191, 0, 0.75), 0 0 50px rgba(107, 191, 0, 0.35);
}

/* ---------- Carrusel vertical (Embla) ---------- */
.sobre-carrusel-wrap { height: 500px; }

.embla-vertical { display: flex; gap: 0.75rem; height: 100%; }

.embla-vertical__viewport {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radio);
  height: 100%;
  box-shadow: 0 0 30px rgba(107, 191, 0, 0.3), 0 0 60px rgba(27, 107, 27, 0.12);
  transition: box-shadow 0.5s ease;
}
.embla-vertical__container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.embla-vertical__slide {
  flex: 0 0 100%;
  min-height: 0;
  position: relative;
}
.carrusel-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.embla-vertical__miniaturas {
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 4px;
  overflow-y: auto;
}
.embla-miniatura {
  flex: 1;
  min-height: 60px;
  border-radius: 8px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  transition: opacity var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.embla-miniatura:hover { opacity: 0.9; transform: scale(1.05); }
.embla-miniatura.activa {
  opacity: 1;
  border-color: var(--verde-lima);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

/* ---------- Mapa / Cómo llegar ---------- */
.sobre-mapa-bloque { max-width: 900px; margin: 0 auto; text-align: center; }
.sobre-mapa-bloque h2 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.8rem;
  color: var(--verde-oscuro);
  margin: 0 0 1.5rem;
}

.mapa-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(107, 191, 0, 0.35), 0 0 80px rgba(27, 107, 27, 0.15);
  transition: box-shadow 0.4s ease;
}
.mapa-wrap:hover {
  box-shadow: 0 0 60px rgba(107, 191, 0, 0.525), 0 0 120px rgba(27, 107, 27, 0.225);
}
.mapa-iframe { width: 100%; height: 350px; border: 0; display: block; }

.mapa-placeholder {
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem;
  text-align: center;
  background: var(--gris-claro, #f4f4f0);
}
.mapa-placeholder p { max-width: 32ch; color: var(--verde-oscuro); margin: 0; }

/* ---------- Card con foto sobre el mapa (nice-to-have 5) ----------
   El embed gratuito de Google Maps no permite personalizar el marcador sin
   Maps JavaScript API (de pago); esta tarjeta con la foto real del local
   hace de "marcador" alternativo, superpuesta sobre el propio mapa. */
.mapa-card-negocio {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100% - 2rem);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}
.mapa-card-foto { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.mapa-card-info { min-width: 0; }
.mapa-card-nombre { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: var(--verde-oscuro); margin: 0; font-size: 0.95rem; }
.mapa-card-direccion { margin: 0.1rem 0 0; font-size: 0.8rem; color: #555; }
.mapa-card-horario {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .mapa-card-negocio { left: 0.5rem; bottom: 0.5rem; padding: 0.5rem 0.8rem 0.5rem 0.5rem; }
  .mapa-card-foto { width: 40px; height: 40px; }
  .mapa-card-horario { display: none; }
}

.mapa-botones {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.btn-mapa {
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform var(--transicion), background var(--transicion);
}
.btn-mapa-google { background: var(--verde-oscuro); color: var(--blanco); }
.btn-mapa-google:hover { background: var(--verde-lima); transform: scale(1.03); }

/* ---------- CTA final (reutilizado en index.html/carrito.html) ---------- */
.btn-cta-final {
  display: inline-block;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 800;
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), background var(--transicion);
}
.btn-cta-final:hover { background: var(--verde-lima); transform: scale(1.04); }

/* ---------- Tarjetas de navegación: Nuestros productos / Nuestras recetas ----------
   BLOQUE 6: rediseño con foto de fondo + zoom al hover (estilo Airbnb/21st
   dev). La foto vive en su propia capa (.navegacion-tarjeta-foto) para que
   el transform:scale() del zoom no afecte el resto del layout, recortada
   por el overflow:hidden de la tarjeta. En móvil (sin :hover real) el mismo
   efecto se activa por scroll vía IntersectionObserver (ver js/about.js),
   que añade/quita la clase .tarjeta-activa. */
.navegacion-tarjetas {
  max-width: 1000px;
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.navegacion-tarjeta {
  position: relative;
  display: block;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(107, 191, 0, 0.12);
  transition: box-shadow var(--transicion);
}
.navegacion-tarjeta:hover,
.navegacion-tarjeta.tarjeta-activa {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22), 0 0 32px rgba(107, 191, 0, 0.25);
}
.navegacion-tarjeta-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 0.4s ease;
}
.navegacion-tarjeta:hover .navegacion-tarjeta-foto,
.navegacion-tarjeta.tarjeta-activa .navegacion-tarjeta-foto {
  transform: scale(1.05);
}
.navegacion-tarjeta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.05) 80%);
  transition: opacity 0.4s ease;
}
.navegacion-tarjeta:hover .navegacion-tarjeta-overlay,
.navegacion-tarjeta.tarjeta-activa .navegacion-tarjeta-overlay {
  opacity: 0.72;
}
.navegacion-tarjeta-contenido {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.75rem;
  text-align: left;
  color: var(--blanco);
  transition: transform 0.4s ease;
}
.navegacion-tarjeta:hover .navegacion-tarjeta-contenido,
.navegacion-tarjeta.tarjeta-activa .navegacion-tarjeta-contenido {
  transform: translateY(-5px);
}
.navegacion-tarjeta-icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.navegacion-tarjeta h3 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.4rem;
  color: var(--blanco);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.navegacion-tarjeta p { color: rgba(255, 255, 255, 0.92); font-size: 0.95rem; margin: 0.3rem 0 0.6rem; }
.navegacion-tarjeta-cta { font-weight: 800; color: var(--amarillo); font-size: 1rem; }

@media (max-width: 640px) {
  .navegacion-tarjetas { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .navegacion-tarjeta { height: 260px; }
}

/* ---------- Reveal on scroll ---------- */
.sn-anim, .sn-anim-derecha, .sn-anim-mapa, .sn-anim-bounce {
  opacity: 0;
  transition: opacity 0.8s var(--ease-material), transform 0.8s var(--ease-material);
}
.sn-anim { transform: translateY(30px); }
.sn-anim-derecha { transform: translateX(40px); }
.sn-anim-mapa { transform: scale(0.95); }
.sn-anim-bounce { transform: translateY(20px); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

.sn-anim.visto, .sn-anim-derecha.visto, .sn-anim-mapa.visto, .sn-anim-bounce.visto {
  opacity: 1;
  transform: none;
}

.sn-delay-1 { transition-delay: 0.1s; }
.sn-delay-2 { transition-delay: 0.2s; }
.sn-delay-3 { transition-delay: 0.3s; }

/* ============================================================
   HOME DE TIENDA ESTILO ETSY (tienda.html, encima del grid)
   ============================================================ */
/* Con un filtro de categoría (o "solo locales") activo, se oculta todo el
   escaparate (hero + descubre + Fuerteventura) y el grid de resultados pasa
   a ser lo primero visible — igual que Etsy/Temu al filtrar. */
body.modo-filtro .vista-catalogo { display: none; }

.tienda-hero {
  max-width: 1400px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 400px;
  border-radius: 16px;
  overflow: hidden;
}
.tienda-hero-texto {
  background: var(--verde-lima);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  border-radius: 16px 0 0 16px;
}
.tienda-hero-texto h1 { font-family: 'Baloo 2', sans-serif; font-size: 2.1rem; color: var(--verde-oscuro); margin: 0; }
.tienda-hero-texto p { color: #2C2C2A; font-size: 1.05rem; margin: 0; }
.tienda-hero-texto .btn-cta-final { align-self: flex-start; }
.tienda-hero-imagen {
  background: #EAF3DE center 65% / cover no-repeat;
  border-radius: 0 16px 16px 0;
}

.tienda-descubre { max-width: 1400px; margin: 3.5rem auto 0; padding: 0 1.5rem; }
.tienda-descubre h2, .tienda-fuerteventura h2, .tienda-tambien-interesa h2, .tienda-novedades h2 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.6rem;
  color: var(--verde-oscuro);
  margin: 0 0 1.5rem;
}

.tienda-novedades { max-width: 1400px; margin: 3.5rem auto 0; padding: 0 1.5rem; }
.novedades-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
@media (max-width: 720px) {
  .novedades-grid { grid-template-columns: repeat(2, 1fr); }
}
.descubre-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.descubre-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
}
.descubre-circulo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--fondo-claro) center / cover no-repeat;
  color: var(--verde-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EEE;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.descubre-tarjeta:hover .descubre-circulo { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.descubre-texto { font-size: 0.85rem; font-weight: 700; color: #2C2C2A; }

.tienda-fuerteventura {
  max-width: 1400px;
  margin: 3.5rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: stretch;
}
.fuerteventura-banner {
  background: linear-gradient(160deg, rgba(10, 45, 10, 0.78) 0%, rgba(27, 107, 27, 0.65) 100%), url('assets/equipo-1-fachada.jpeg') center/cover no-repeat;
  color: var(--blanco);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.fuerteventura-banner h2 { color: var(--blanco); margin: 0; }
.fuerteventura-banner p { margin: 0; opacity: 0.9; font-size: 0.95rem; }
.fuerteventura-banner .btn-cta-final { align-self: flex-start; background: var(--verde-lima); color: var(--verde-oscuro); }
.fuerteventura-banner .btn-cta-final:hover { background: var(--amarillo); }
.fuerteventura-banner .btn-cta-final.activo { background: var(--amarillo); box-shadow: 0 0 0 2px var(--verde-oscuro) inset; }
.fuerteventura-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }

.tienda-tambien-interesa { max-width: 1400px; margin: 3.5rem auto 0; padding: 0 1.5rem 3rem; }
.tienda-tambien-interesa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.producto-card-horizontal {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--blanco);
  border: 1px solid #EEE;
  border-radius: 12px;
  padding: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.producto-card-horizontal:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.producto-horizontal-imagen { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
/* Variante compacta del badge de origen para la miniatura 64x64 de "También
   te puede interesar": el tamaño normal (pensado para cards de ~150px+)
   desbordaba la miniatura y tapaba el nombre del producto. */
.producto-horizontal-imagen .badge-origen {
  top: 2px;
  left: 2px;
  padding: 1px 4px;
  font-size: 6px;
  border-radius: 6px;
  letter-spacing: 0.2px;
  max-width: calc(100% - 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.producto-horizontal-imagen .producto-foto, .producto-horizontal-imagen .producto-placeholder { width: 100%; height: 100%; }
.producto-horizontal-info { flex: 1; min-width: 0; }
.producto-horizontal-info .producto-nombre { font-size: 0.85rem; font-weight: 700; margin: 0 0 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.producto-horizontal-info .producto-precio { font-size: 0.85rem; color: var(--verde-oscuro); font-weight: 700; margin: 0; }
.producto-card-horizontal .producto-btn-add { position: static; flex: 0 0 auto; }

@media (max-width: 1024px) {
  .tienda-hero { grid-template-columns: 1fr; min-height: 320px; }
  .tienda-hero-texto { border-radius: 16px 16px 0 0; }
  .tienda-hero-imagen { border-radius: 0 0 16px 16px; min-height: 200px; }
  .descubre-grid { grid-template-columns: repeat(4, 1fr); }
  .tienda-fuerteventura { grid-template-columns: 1fr; }
  .fuerteventura-grid { grid-template-columns: repeat(3, 1fr); }
  .tienda-tambien-interesa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .descubre-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .descubre-circulo { width: 84px; height: 84px; }
  .fuerteventura-grid { grid-template-columns: repeat(2, 1fr); }
  .tienda-tambien-interesa-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TIENDA / GRID DE PRODUCTOS
   ============================================================ */
.tienda {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
}

.tienda-encabezado { margin-bottom: 1.25rem; }
.tienda-encabezado h2 {
  margin: 0 0 0.3rem;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.6rem;
  color: var(--verde-oscuro);
}
.tienda-subtitulo { margin: 0; color: #777; font-size: 0.95rem; }
.tienda-subtitulo #tienda-categoria-nombre { font-weight: 700; color: #555; }
.tienda-contador { color: #999; }

.grid-productos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.grid-cargando, .mensaje-vacio {
  grid-column: 1 / -1;
  text-align: center;
  color: #666;
  padding: 3rem 0;
}

.tienda-ver-mas { text-align: center; margin-top: 2.5rem; }
.btn-ver-mas {
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.9rem 2.2rem;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), background var(--transicion);
}
.btn-ver-mas:hover { background: var(--verde-lima); transform: scale(1.03); }
.btn-ver-mas.oculto { display: none; }

.categoria-proximamente {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
  color: #888;
  font-weight: 700;
  font-size: 1.1rem;
}

.producto-card {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow var(--transicion);
  animation: apareceCard 0.5s ease both;
}
.producto-card:hover { box-shadow: var(--sombra); }
.producto-card:focus-visible { outline: 2px solid var(--verde-lima); outline-offset: 2px; }

.producto-card:nth-child(1) { animation-delay: 0.03s; }
.producto-card:nth-child(2) { animation-delay: 0.06s; }
.producto-card:nth-child(3) { animation-delay: 0.09s; }
.producto-card:nth-child(4) { animation-delay: 0.12s; }
.producto-card:nth-child(5) { animation-delay: 0.15s; }
.producto-card:nth-child(6) { animation-delay: 0.18s; }
.producto-card:nth-child(7) { animation-delay: 0.21s; }
.producto-card:nth-child(8) { animation-delay: 0.24s; }
.producto-card:nth-child(9) { animation-delay: 0.27s; }
.producto-card:nth-child(10) { animation-delay: 0.3s; }

.producto-imagen-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--transicion);
}
.producto-imagen-wrap:hover { border-color: var(--verde-lima); }

/* ---------- Placeholder tipográfico (capa 1: sin foto) / foto real (capa 2) ---------- */
.producto-placeholder,
.producto-foto {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 0 16px rgba(107, 191, 0, 0.18), 0 0 32px rgba(27, 107, 27, 0.08);
  transition: transform 0.3s ease, box-shadow var(--transicion);
}
.producto-placeholder {
  background: linear-gradient(150deg, #EAF3DE, #D5E8B0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem;
  text-align: center;
  overflow: hidden;
}
.producto-iniciales {
  font-family: 'Baloo 2', sans-serif;
  font-size: 72px;
  font-weight: 700;
  color: var(--verde-oscuro);
  line-height: 1;
}
.producto-nombre-mini {
  font-size: 0.7rem;
  color: #5F5E5A;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto-foto { object-fit: cover; display: block; }
/* Skeleton shimmer mientras la foto real carga (loading="lazy"): el fondo
   animado se ve hasta que la imagen pinta encima; al hacer load se quita la
   clase. Si la carga falla, ui-imagenes.js sustituye el <img> por el
   placeholder tipográfico. */
.producto-foto.cargando {
  background: linear-gradient(100deg, #ececec 25%, #f6f6f6 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: shimmerFoto 1.2s ease-in-out infinite;
}
@keyframes shimmerFoto {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.producto-imagen-wrap:hover .producto-placeholder,
.producto-imagen-wrap:hover .producto-foto {
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(107, 191, 0, 0.3), 0 0 44px rgba(27, 107, 27, 0.14);
}

.producto-badge-local {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s var(--ease-material), transform 0.5s var(--ease-material);
}
.producto-badge-local.visto { opacity: 1; transform: none; }

.producto-btn-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  transition: background var(--transicion), transform var(--transicion);
}
.producto-btn-add:hover { background: var(--verde-lima); transform: scale(1.1); }

.producto-info {
  padding: 0.6rem 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.producto-nombre {
  font-weight: 700;
  font-size: 0.88rem;
  color: #222;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.producto-precio {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--verde-oscuro);
  margin: 0;
}

/* ============================================================
   PÁGINA DE DETALLE DE PRODUCTO (producto.html)
   ============================================================ */
.producto-detalle {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.producto-detalle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.producto-detalle-foto {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.producto-detalle-foto .producto-placeholder,
.producto-detalle-foto .producto-foto { border-radius: 16px; }

.producto-detalle-badge { position: static; opacity: 1; transform: none; display: inline-flex; margin-bottom: 0.75rem; }

.producto-detalle-categoria { color: #888; font-size: 0.9rem; margin: 0 0 0.3rem; text-transform: uppercase; letter-spacing: 0.03em; }

.producto-detalle-nombre {
  font-family: 'Baloo 2', sans-serif;
  font-size: 28px;
  color: var(--verde-oscuro);
  margin: 0 0 0.6rem;
}

.producto-detalle-precio { font-size: 36px; font-weight: 800; color: #222; margin: 0 0 1rem; }

.producto-detalle-descripcion { color: #444; line-height: 1.6; margin: 0 0 1.5rem; max-width: 46ch; }

/* ---------- Selector de variante (Cafés: Grano/Molido) ---------- */
.selector-variante { margin-bottom: 1.25rem; }
.selector-variante label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
.variante-opciones { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn-variante {
  border: 2px solid #1B6B1B;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: white;
  color: #1B6B1B;
  transition: all 0.2s;
}
.btn-variante.activo {
  background: #1B6B1B;
  color: white;
}

.selector-cantidad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.selector-cantidad-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fondo-claro);
  color: var(--verde-oscuro);
  font-size: 1.2rem;
  font-weight: 700;
  transition: background var(--transicion);
}
.selector-cantidad-btn:hover { background: var(--verde-lima); color: var(--blanco); }
.selector-cantidad-input {
  width: 80px;
  height: 40px;
  text-align: center;
  border: 1.5px solid #E5E5E5;
  border-radius: 8px;
  font-size: 1rem;
}
.selector-cantidad-unidad { color: #777; font-size: 0.9rem; }

.producto-detalle-total { font-size: 1.2rem; font-weight: 700; color: var(--verde-oscuro); margin: 0 0 0.5rem; }
.producto-detalle-nota { font-size: 0.8rem; color: #888; margin: 0 0 1.5rem; }

.btn-anadir-detalle {
  display: block;
  width: 100%;
  max-width: 360px;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: background var(--transicion), transform var(--transicion);
}
.btn-anadir-detalle:hover { background: var(--verde-lima); }
.btn-anadir-detalle.btn-exito { background: var(--verde-lima); }
.btn-anadir-detalle:disabled,
.producto-btn-add:disabled {
  background: #bbb;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-anadir-detalle:disabled:hover,
.producto-btn-add:disabled:hover { background: #bbb; transform: none; }

.confirmacion-anadido {
  margin-top: 0.8rem;
  color: var(--verde-oscuro);
  font-weight: 700;
  background: #E7F5E1;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
}
/* Especificidad > .oculto para que el toggle de visibilidad no compita con el source order */
.confirmacion-anadido:not(.oculto) { display: inline-block; }

.volver-tienda { display: inline-block; margin-top: 1.5rem; font-size: 0.9rem; color: var(--verde-oscuro); font-weight: 600; }
.volver-tienda:hover { text-decoration: underline; }

.tambien-interesa { margin-top: 4rem; }
.tambien-interesa h2 { font-family: 'Baloo 2', sans-serif; color: var(--verde-oscuro); font-size: 1.4rem; margin-bottom: 1.25rem; }
.tambien-interesa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.relacionado-card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow var(--transicion);
}
.relacionado-card:hover { box-shadow: var(--sombra); }
.relacionado-foto { aspect-ratio: 1 / 1; }
.relacionado-info { padding: 0.6rem 0.7rem 0.8rem; }
.relacionado-nombre {
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 0 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.relacionado-precio { font-weight: 800; font-size: 0.85rem; color: var(--verde-oscuro); margin: 0; }

@media (max-width: 1024px) {
  .producto-detalle-grid { grid-template-columns: 1fr; gap: 2rem; }
  .producto-detalle-foto { max-width: 420px; }
  .tambien-interesa-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   DRAWER DEL CARRITO
   Desktop: panel lateral derecho. Móvil (≤640px): drawer desde abajo.
   ============================================================ */
.overlay-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  /* Por encima del banner de cookies (z-index 90): con el drawer del
     carrito convertido en columna flex con footer fijo abajo (Tramitar
     pedido/Seguir comprando), ese footer coincide en pantalla con la
     franja inferior donde vive el banner — si el overlay/drawer quedan
     por debajo, el banner tapa los botones y el pedido queda intramitable
     en el primer visitante que aún no ha aceptado/rechazado cookies. */
  z-index: 94;
}
.overlay-drawer.oculto { display: none; }

.drawer {
  position: fixed;
  top: 0;
  height: 100vh;
  background: var(--blanco);
  /* Por encima del banner de cookies (90) — ver nota en .overlay-drawer. */
  z-index: 95;
  padding: 1.5rem;
  overflow-y: auto;
  transition: transform var(--transicion);
}

.drawer-derecha {
  right: 0;
  width: min(420px, 100%);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
}
.drawer-derecha:not(.oculto) { transform: translateX(0); }
.drawer-derecha.oculto { transform: translateX(100%); }

.drawer-izquierda {
  left: 0;
  width: min(320px, 85%);
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
}
.drawer-izquierda:not(.oculto) { transform: translateX(0); }
.drawer-izquierda.oculto { transform: translateX(-100%); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.drawer-header h2 { margin: 0; font-size: 1.3rem; color: var(--verde-oscuro); }

.cerrar-drawer { font-size: 1.8rem; line-height: 1; color: #888; }
.cerrar-drawer:hover { color: var(--rojo); }

/* ---------- Drawer del carrito: layout compacto estilo Temu (TAREA 3.2) ----------
   #drawer-carrito se convierte en columna flex: header fijo arriba, lista
   con su propio scroll en medio, footer (barra de progreso + subtotal +
   CTAs) fijo abajo — a diferencia de #drawer-menu (categorías), que sigue
   siendo un único bloque con scroll simple (regla base .drawer). */
#drawer-carrito {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: hidden;
}
/* TAREA 3.3: la apertura/cierre del drawer del carrito la anima GSAP (ver
   js/app.js), con duraciones/easings distintos para abrir y cerrar — se
   desactiva la transición CSS de .drawer para que no compita con ella (en
   desktop desliza en X; en móvil, por el breakpoint de abajo, la propia
   hoja inferior desliza en Y — el JS detecta cuál toca). */
#drawer-carrito.drawer-derecha { transition: none; }
#drawer-carrito .drawer-header { padding: 1.5rem 1.5rem 0.75rem; margin-bottom: 0; flex: 0 0 auto; }
.drawer-carrito-contador { font-size: 0.9rem; font-weight: 500; color: #888; margin-left: 0.3rem; }

.lista-carrito { flex: 1; overflow-y: auto; padding: 0 1.5rem; display: flex; flex-direction: column; }

.carrito-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.carrito-item-foto {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
}
.carrito-item-foto .producto-foto,
.carrito-item-foto .producto-placeholder { width: 100%; height: 100%; border-radius: 8px; }
.carrito-item-foto .producto-nombre-mini { display: none; }

.carrito-item-cuerpo { flex: 1; min-width: 0; }
/* CAMBIO 2 (layout Shein): nombre en su propia línea (hasta 2 líneas con
   ellipsis), precio + controles +/- comparten la línea de abajo. */
.carrito-item-nombre {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carrito-item-fila-inferior { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.carrito-item-precio { flex: 0 0 auto; font-size: 13px; color: var(--verde-oscuro); margin: 0; }

.carrito-item-controles { display: flex; align-items: center; gap: 0.5rem; }
.carrito-item-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: var(--blanco);
  color: var(--verde-oscuro);
  font-weight: 700;
  transition: background var(--transicion);
}
.carrito-item-btn:hover { background: #f5f5f5; }
.carrito-item-cantidad { font-size: 16px; font-weight: 600; min-width: 24px; text-align: center; }
/* Borde verde de los controles +/- solo en el drawer móvil (CAMBIO 2) — el
   panel fijo de escritorio comparte estas mismas clases y no se toca. */
#drawer-carrito .carrito-item-btn { border-color: var(--verde-oscuro); }
/* Papelera oculta por defecto en el drawer móvil (CAMBIO 2): swipe-to-delete
   o long press queda pendiente — el botón sigue en el DOM (mismo patrón que
   el panel de escritorio, que sí la muestra) para poder revelarla más
   adelante sin tocar la lógica de eliminar. */
#drawer-carrito .btn-eliminar-panel { display: none; }

/* ---------- Aviso de peso orientativo (panel desktop y carrito.html —
   CAMBIO 2: ya no vive en el drawer móvil) ---------- */
.nota-peso-carrito {
  flex: 0 0 auto;
  background: #FBF3E3;
  color: #6B6B6B;
  font-size: 13px;
  line-height: 1.4;
  padding: 12px;
  border-radius: 8px;
  margin: 0.75rem 1.5rem 0;
}
.nota-peso-panel { margin: 0 1.25rem 1.25rem; }
.nota-peso-pagina { margin: 1rem 0; }

/* ---------- Barra de progreso hacia el mínimo de pedido (30€) ----------
   Restaura, en forma de texto+barra, la información que el drawer perdió al
   simplificarse a layout Shein (ver report-marketing-2026-08-07.md, hallazgo
   4.2): antes de la simplificación se sabía "cuánto falta"; ahora el botón
   deshabilitado solo decía "no alcanzado" sin cifra. */
.drawer-progreso-minimo { flex: 0 0 auto; padding: 12px 16px 4px; border-top: 1px solid rgba(0,0,0,0.07); }
.drawer-progreso-barra-track {
  height: 6px;
  background: #e8e8e8;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.drawer-progreso-barra-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease, background-color 0.3s;
  width: 0%;
  background: #f59e0b;
}
.drawer-progreso-barra-fill.alcanzado {
  background: #1B6B1B;
}
.drawer-progreso-texto {
  font-size: 12px;
  color: #666;
  margin: 0;
  text-align: center;
}
.drawer-progreso-texto.alcanzado {
  color: #1B6B1B;
  font-weight: 600;
}

/* ---------- Footer fijo del drawer (CAMBIO 2, layout Shein): solo total + CTA ---------- */
.drawer-carrito-footer { flex: 0 0 auto; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid #eee; }

.btn-tramitar-pedido {
  display: block;
  width: 100%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-size: 16px;
  font-weight: 600;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  transition: transform var(--transicion), background var(--transicion);
}
.btn-tramitar-pedido:hover:not(:disabled) { transform: scale(1.02); }
.btn-tramitar-pedido:disabled { background: #ccc; cursor: not-allowed; }

/* ---------- Panel fijo del carrito — SOLO DESKTOP ANCHO (>1200px), patrón Temu ----------
   No es el drawer de arriba: no se abre ni se cierra con click, siempre
   visible UNA VEZ que aparece. El drawer (#drawer-carrito) se queda
   intacto para <=1200px (móvil y tablet, incluida la franja 1024-1200 que
   antes mostraba el panel y tapaba el contenido — ahora usa el drawer, ver
   esMovilOTablet() en js/app.js, alineado al mismo breakpoint), sin tocar.
   CORRECCIÓN 1: oculto mientras el carrito esté vacío y no se haya añadido
   nunca nada — js/app.js añade la clase .panel-carrito-visible al <body>
   la primera vez que el carrito deja de estar vacío (con GSAP slideIn) y
   ya no se quita jamás, aunque el carrito vuelva a quedar vacío después. */
.panel-carrito-fijo { display: none; }

@media (min-width: 1201px) {
  /* Estilo Temu: el panel arranca en el borde superior real del viewport
     (top:0), no debajo del header — es el header el que se acorta para
     dejarle sitio (margin-right en .header-principal), igual que en main/
     .tienda/#grid-productos. Nota: el margin-right NO se repite en .tienda
     ni en #grid-productos aunque están dentro de <main> — ambos son
     descendientes suyos, así que ya heredan el hueco del margin-right de
     main; duplicarlo ahí encogería el grid dos veces (290px + 290px). */
  body.pagina-tienda main,
  body.pagina-tienda .header-principal { transition: margin-right 0.3s ease; }
  body.pagina-tienda.panel-carrito-visible main,
  body.pagina-tienda.panel-carrito-visible .header-principal { margin-right: 290px; }

  body.panel-carrito-visible .panel-carrito-fijo {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    height: 100vh;
    right: 0;
    width: 280px;
    background: var(--blanco);
    border-left: 1px solid #eee;
    z-index: 50; /* por debajo del header (60), que ya no lo pisa: el header
                    ahora solo cubre el ancho del grid (margin-right arriba) */
  }

  .panel-carrito-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #2D6A2E;
    color: var(--blanco);
    padding: 16px 20px;
  }
  .panel-carrito-subtotal-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.3rem;
    font-size: 14px;
    color: var(--blanco);
  }
  .panel-carrito-subtotal-valor {
    font-family: 'Baloo 2', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--blanco);
    margin: 0 0 0.9rem;
  }

  /* Zona única (Puerto del Rosario): un solo umbral de 30€, sin necesidad
     de marca de checkpoint intermedia (existía cuando había que referenciar
     dos mínimos posibles en la misma barra). */
  .panel-carrito-progreso { margin: 0 0 1rem; }
  .panel-carrito-progreso-barra {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
  }
  .panel-carrito-progreso-relleno {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--amarillo);
    transition: width 0.4s ease, background 0.4s ease;
  }
  .panel-carrito-progreso-relleno.completo { background: #8FD14F; }
  .panel-carrito-progreso-info { font-size: 0.7rem; color: rgba(255, 255, 255, 0.75); margin: 0.5rem 0 0; }
  .panel-carrito-progreso-texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0.5rem 0 0;
  }
  .panel-progreso-zona.panel-progreso-ok { color: #C6F0A8; font-weight: 700; }
  .panel-progreso-restante { font-weight: 700; color: var(--blanco); margin-top: 0.1rem; }
  .panel-progreso-detalle { opacity: 0.75; margin-top: 0.15rem; }

  /* Estilo Temu: botón muy contrastado sobre el header verde oscuro — lima
     de marca (no naranja, para no romper la paleta verde/lima ya usada en
     el resto de CTAs del sitio) + texto marrón oscuro, mismo patrón que
     .aviso-tpv sobre fondo amarillo/lima. */
  .btn-tramitar-pedido-panel {
    display: block;
    width: 100%;
    background: var(--verde-lima);
    color: var(--marron-badge);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 20px;
    border-radius: 24px;
    text-align: center;
    margin-bottom: 0.6rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform var(--transicion), background var(--transicion);
  }
  .btn-tramitar-pedido-panel:hover:not(:disabled) { transform: scale(1.02); background: #7ED321; }
  /* BUGFIX auditoria visual: contraste WCAG medido en el boton deshabilitado
     ("Pedido minimo no alcanzado"): #888 sobre #ccc daba ~2.2:1, por debajo
     del 4.5:1 minimo AA para texto normal (15.2px, no llega al umbral de
     texto grande aunque sea negrita). #555 sobre #ccc da ~4.6:1, ya AA. */
  .btn-tramitar-pedido-panel:disabled {
    background: #ccc;
    color: #555;
    box-shadow: none;
    cursor: not-allowed;
  }

  .panel-carrito-ir-cesta {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--blanco);
    text-decoration: underline;
  }
  .panel-carrito-ir-cesta:hover { opacity: 0.85; }

  .panel-carrito-lista { flex: 1; overflow-y: auto; padding: 1.25rem; }
  .panel-carrito-vacio { text-align: center; color: #999; font-size: 0.85rem; padding: 2rem 0; }

  .panel-carrito-fila {
    padding: 0 0 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
  }
  .panel-carrito-fila:last-child { border-bottom: none; margin-bottom: 0; }
  .panel-carrito-fila-foto {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
  }
  .panel-carrito-fila-foto .producto-foto,
  .panel-carrito-fila-foto .producto-placeholder { width: 100%; height: 100%; border-radius: 8px; }
  .panel-carrito-fila-foto .producto-nombre-mini { display: none; }
  .panel-carrito-fila-nombre {
    font-size: 13px;
    font-weight: 600;
    margin: 0.5rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .panel-carrito-fila-precio { font-size: 14px; font-weight: 700; color: var(--verde-oscuro); margin: 0.2rem 0 0; }
  .panel-carrito-fila-controles { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; }

  /* BUGFIX auditoria visual: el banner de cookies (fixed, bottom:0, z-index
     90, ~70px en desktop) tapaba la nota de peso orientativo del panel fijo
     (z-index 50, tambien bottom:0) en la primera visita, antes de aceptar o
     rechazar cookies -- mismo patron de bug ya corregido para el boton
     flotante de carrito en movil (.carrito-flotante-movil) y para el drawer,
     que faltaba aplicar aqui. Se reserva espacio con padding-bottom mientras
     el banner siga visible, en vez de moverlo, para no desplazar el resto
     del contenido del panel. */
  body:has(#banner-cookies:not(.oculto):not(.cerrando)) .panel-carrito-fijo {
    padding-bottom: 4.5rem;
  }

  /* BUGFIX auditoria visual: el toast "Producto anadido" (#toast-stack,
     fixed, right:1.25rem, z-index 200) cae justo dentro del ancho del
     panel fijo (right:0, width:280px, z-index 50) y tapa su cabecera
     (subtotal, barra de minimo y boton Tramitar pedido) cuando se anaden
     varios productos seguidos y los toasts se apilan -- elementos
     solapados de forma objetiva, no solo una cuestion de gusto. Se
     desplaza el stack de toasts a la izquierda del panel para que no lo
     cubra, solo cuando el panel esta visible en desktop ancho (de ahi que
     esta regla viva dentro de este @media y no fuera, donde se aplicaria
     tambien en movil/tablet sin panel real que evitar). */
  body.panel-carrito-visible .toast-stack { right: calc(280px + 1.25rem); }
}

.carrito-total-linea { font-size: 18px; font-weight: 700; color: var(--verde-oscuro); margin: 0 0 0.8rem; }

.form-pedido { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.form-pedido label { font-weight: 700; font-size: 0.85rem; margin-top: 0.5rem; }
.form-pedido input, .form-pedido select, .form-pedido textarea {
  padding: 0.6rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--blanco);
  color: inherit;
}
.form-pedido input:focus-visible, .form-pedido select:focus-visible, .form-pedido textarea:focus-visible {
  outline: 2px solid var(--verde-lima);
  border-color: var(--verde-lima);
}
.form-nota { font-size: 0.75rem; color: #888; margin: 0; }

/* ---------- Validación por campo (blur): borde rojo/verde + mensaje ---------- */
.form-pedido input.form-campo-invalido,
.form-pedido select.form-campo-invalido {
  border-color: #D64545;
}
.form-pedido input.form-campo-valido,
.form-pedido select.form-campo-valido {
  border-color: var(--verde-lima);
}
.form-error-mensaje {
  font-size: 0.78rem;
  color: #D64545;
  margin: -0.15rem 0 0;
}

.aviso-tpv {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFF4D6;
  color: var(--marron-badge);
  font-weight: 700;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
}
.aviso-tpv svg { flex: 0 0 auto; }

.btn-enviar-pedido {
  margin-top: 1rem;
  width: 100%;
  background: var(--amarillo);
  color: var(--marron-badge);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.9rem;
  border-radius: 999px;
  transition: transform var(--transicion);
}
.btn-enviar-pedido:hover { transform: scale(1.02); }

.confirmacion-pedido-pantalla {
  max-width: 420px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.confirmacion-pedido-pantalla:not(.oculto) { display: flex; }
.confirmacion-pedido-pantalla h2 { font-family: 'Baloo 2', sans-serif; color: var(--verde-oscuro); font-size: 1.5rem; margin: 0 0 0.5rem; }
.confirmacion-pedido-pantalla p { margin: 0.25rem 0; color: #555; }
.confirmacion-pedido-pantalla .confirmacion-nota { margin-top: 1.25rem; font-size: 0.85rem; }

.confirmacion-check {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.numero-pedido {
  display: inline-block;
  background: var(--fondo-claro);
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--verde-oscuro);
  letter-spacing: 0.06em;
  margin: 0.75rem 0 1.5rem;
}

.confirmacion-btn-whatsapp {
  display: block;
  width: 100%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 700;
  padding: 0.85rem;
  border-radius: 999px;
  margin-top: 0.5rem;
  transition: background var(--transicion), transform var(--transicion);
}
.confirmacion-btn-whatsapp:hover { background: var(--verde-lima); transform: scale(1.02); }

.confirmacion-btn-seguir {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--verde-oscuro);
}
.confirmacion-btn-seguir:hover { text-decoration: underline; }

.drawer-whatsapp-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--whatsapp-verde);
  font-weight: 700;
  font-size: 0.9rem;
}
.drawer-whatsapp-link:hover { text-decoration: underline; }

/* ============================================================
   PÁGINA DE CARRITO COMPLETO (carrito.html)
   ============================================================ */
.carrito-pagina { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.carrito-pagina-titulo { font-family: 'Baloo 2', sans-serif; color: var(--verde-oscuro); font-size: 1.8rem; margin: 0 0 1.5rem; }

.carrito-pagina-vacio {
  text-align: center;
  padding: 4rem 1rem;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  color: #555;
}
.carrito-pagina-vacio:not(.oculto) { display: flex; }

.carrito-pagina-grid { grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }
.carrito-pagina-grid:not(.oculto) { display: grid; }

.carrito-pagina-lista { display: flex; flex-direction: column; gap: 0.75rem; }

.carrito-fila {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0.75rem;
}
.carrito-fila-foto { width: 80px; height: 80px; flex: 0 0 auto; }
.carrito-fila-foto .producto-placeholder,
.carrito-fila-foto .producto-foto { border-radius: 10px; }
.carrito-fila-foto .producto-nombre-mini { display: none; }
.carrito-fila-nombre { font-weight: 700; margin: 0; }
.carrito-fila-categoria { font-size: 0.8rem; color: #888; margin: 0.15rem 0 0; }
.carrito-fila-precio-unitario { font-size: 0.85rem; color: #666; margin: 0.15rem 0 0; }
.carrito-fila-controles { display: flex; align-items: center; gap: 0.5rem; }
.carrito-fila-subtotal { font-weight: 800; color: var(--verde-oscuro); margin: 0; white-space: nowrap; }
.carrito-fila-eliminar { color: var(--rojo); padding: 0.4rem; transition: transform var(--transicion); }
.carrito-fila-eliminar:hover { transform: scale(1.1); }

.carrito-pagina-resumen {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  position: sticky;
  top: 6rem;
}
.carrito-pagina-total { font-size: 1.3rem; font-weight: 800; color: var(--verde-oscuro); margin: 0 0 0.8rem; }

/* ---------- Código postal de entrega (BLOQUE 2) + desglose de precios ---------- */
.carrito-cp-selector { margin-bottom: 1rem; }
.carrito-cp-selector label { display: block; font-weight: 700; margin-bottom: 0.4rem; font-size: 0.9rem; }
.carrito-cp-selector input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
}
.carrito-cp-resultado { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 700; min-height: 1.2em; }
.carrito-cp-valido { color: var(--verde-oscuro); }
.carrito-cp-invalido { color: var(--rojo); }

.carrito-resumen-precios { border-top: 1px solid #eee; padding-top: 0.8rem; margin-top: 0.5rem; }
.carrito-resumen-linea {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #555;
  margin: 0 0 0.4rem;
}

.carrito-banner-minimo {
  background: #FDEAEA;
  color: var(--rojo);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  margin: 0 0 0.8rem;
}
.carrito-banner-minimo-ok { background: #E7F5E1; color: var(--verde-oscuro); }

.btn-enviar-pedido:disabled {
  background: #ddd;
  color: #888;
  cursor: not-allowed;
}
.btn-enviar-pedido:disabled:hover { transform: none; }

@media (max-width: 1024px) {
  .carrito-pagina-grid { grid-template-columns: 1fr; }
  .carrito-pagina-resumen { position: static; }
  .carrito-fila { grid-template-columns: 60px 1fr auto; row-gap: 0.5rem; }
  .carrito-fila-foto { width: 60px; height: 60px; }
  .carrito-fila-subtotal { grid-column: 2; }
  .carrito-fila-eliminar { grid-column: 3; grid-row: 1 / 3; }
}

/* ============================================================
   BOTÓN WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp-flotante {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 55;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp-verde);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
  animation: pulso 4s ease-in-out infinite;
}

/* BUGFIX auditoria visual: el mismo problema que el comentario de abajo
   describe para .carrito-flotante-movil en movil afecta tambien a este
   boton en TODOS los anchos donde sigue activo (tablet, desktop, y movil
   en index.html, unica pagina donde el WhatsApp flotante no se sustituye
   por el del carrito) -- el banner de cookies (fixed, bottom:0, z-index
   90) lo deja casi totalmente tapado e inaccesible en la primera visita,
   antes de aceptar o rechazar. Sube por encima mientras el banner siga
   visible, igual que el boton de carrito. */
body:has(#banner-cookies:not(.oculto):not(.cerrando)) .whatsapp-flotante {
  bottom: 9.5rem;
}

/* Enlaces legales de la landing (index.html no tiene footer propio: es un
   hero a pantalla completa) — discretos en la esquina, sin restar peso al CTA. */
.landing-legal-links {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 55;
  display: flex;
  gap: 1rem;
}
.landing-legal-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  text-decoration: underline;
}
.landing-legal-links a:hover,
.landing-legal-links a:focus-visible {
  color: var(--blanco);
}

/* ---------- Botón flotante de carrito en móvil (sustituye a WhatsApp, FIX 5/6) ---------- */
.carrito-flotante-movil {
  display: none; /* se activa solo en móvil, ver media query abajo */
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 55;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
}
.carrito-badge-flotante {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border: 2px solid var(--blanco);
}
.carrito-badge-flotante.oculto { display: none; }

@media (max-width: 640px) {
  .whatsapp-flotante { display: none; }
  /* BLOQUE 1: index.html no tiene carrito (ni su botón flotante
     sustitutivo) — ahí el WhatsApp flotante se queda visible siempre. */
  body.pagina-landing .whatsapp-flotante { display: flex; }
  .carrito-flotante-movil { display: flex; }
  /* Hallazgo QA (móvil, H1): el banner de cookies (fixed, bottom:0, ~140px
     de alto en pantallas estrechas por el texto+botones envolviendo en 2
     líneas) tapaba el botón flotante de carrito, dejándolo pulsable pero
     con el toque interceptado por el banner — bloqueaba la compra desde
     el móvil en cualquier primera visita. Mientras el banner siga visible
     (sin :not(.oculto) ni .cerrando), el botón sube por encima de él. */
  body:has(#banner-cookies:not(.oculto):not(.cerrando)) .carrito-flotante-movil {
    bottom: 9.5rem;
  }
}

/* ============================================================
   FOOTER (CAMBIO 3: rediseño Daylight-style, verde Eborey)
   ============================================================ */
.footer-eborey {
  background: linear-gradient(180deg, #1B4A1B 0%, #0d2d0d 100%);
  color: #e8f5e8;
  padding: 48px 0 0;
  margin-top: auto;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr;
  gap: 40px;
}
.footer-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  margin-bottom: 12px;
}
.footer-logo .logo-fruteria {
  font-weight: 700;
  font-size: 14px;
  color: #6BBF00;
  letter-spacing: 1px;
}
.footer-logo .logo-eborey {
  font-weight: 700;
  font-size: 20px;
  color: #FFD700;
  letter-spacing: 2px;
}
.footer-tagline {
  font-size: 13px;
  color: #a8c8a8;
  line-height: 1.6;
  margin: 0;
}
.footer-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #6BBF00;
  margin: 0 0 16px;
  text-transform: uppercase;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  color: #c8e0c8;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-links a:hover { color: #ffffff; }
.footer-social-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.footer-social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background 0.2s;
}
.footer-social-icons a:hover { background: #1B6B1B; }
.footer-social-icons svg { width: 18px; height: 18px; fill: currentColor; }
.footer-address {
  font-style: normal;
  font-size: 13px;
  color: #a8c8a8;
  line-height: 1.7;
}
.footer-bottom {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 20px 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #7a9a7a;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a,
.footer-legal button.footer-btn-enlace {
  color: #7a9a7a;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.footer-legal a:hover,
.footer-legal button.footer-btn-enlace:hover { color: #c8e0c8; }

/* Responsive footer */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .footer-inner { grid-template-columns: 1fr; padding: 0 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* ============================================================
   TOAST "PRODUCTO AÑADIDO" (TAREA 3.1)
   ============================================================ */
.toast-stack {
  position: fixed;
  top: calc(var(--header-height, 80px) + 12px);
  right: 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}
.toast-carrito {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 280px;
  background: var(--blanco);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.toast-carrito-icono {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast-carrito-texto {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast-carrito-texto strong { color: var(--verde-oscuro); }

@media (max-width: 640px) {
  .toast-stack { right: 0.75rem; left: 0.75rem; }
  .toast-carrito { max-width: none; }
}

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */
.banner-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--blanco);
  color: #333;
  border-top: 3px solid var(--verde-oscuro);
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.banner-cookies p { margin: 0; font-size: 0.85rem; max-width: 640px; line-height: 1.5; }
.banner-cookies a { color: var(--verde-oscuro); text-decoration: underline; font-weight: 600; }
.banner-cookies-botones { display: flex; gap: 0.6rem; flex: 0 0 auto; }
/* Ambos botones con el mismo peso visual (mismo tamaño, mismo grosor de
   fuente, ambos con relleno/borde sólido a todo color): el RGPD/AEPD exige
   que "Solo necesarias" sea tan visible y accesible como "Aceptar", no un
   enlace secundario ni un borde tenue en gris. */
.btn-cookies-rechazar, .btn-cookies-aceptar {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 130px;
  white-space: nowrap;
}
.btn-cookies-rechazar { background: var(--blanco); color: var(--verde-oscuro); border: 2px solid var(--verde-oscuro); }
.btn-cookies-aceptar { background: var(--verde-oscuro); color: var(--blanco); }
.btn-cookies-rechazar:hover { background: var(--fondo-claro); }
.btn-cookies-aceptar:hover { filter: brightness(1.1); }
/* Cierre animado: primero se desvanece (.cerrando), luego se retira del layout (.oculto) */
.banner-cookies.cerrando { opacity: 0; transform: translateY(20px); pointer-events: none; }
.banner-cookies.oculto { display: none; }

/* ============================================================
   PÁGINAS LEGALES (aviso-legal.html, politica-cookies.html)
   ============================================================ */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--verde-oscuro);
  color: var(--blanco);
  flex-wrap: wrap;
}

.legal-header-logo { display: flex; flex-direction: column; line-height: 1; }
.legal-header-logo-fruteria { font-size: 1.1rem; font-weight: 800; color: var(--blanco); }
.legal-header-logo-eborey { font-size: 0.95rem; font-weight: 700; font-style: italic; color: var(--amarillo); }

.legal-volver { font-weight: 700; font-size: 0.9rem; color: var(--blanco); }
.legal-volver:hover { text-decoration: underline; }

.legal-contenido {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px;
  background: var(--blanco);
}

.legal-contenido h1 {
  font-size: 1.8rem;
  color: var(--verde-oscuro);
  margin-bottom: 1rem;
}

.legal-contenido h2 {
  font-size: 1.2rem;
  color: var(--verde-lima);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--verde-lima);
}

.legal-contenido p { margin: 0 0 1rem; line-height: 1.6; }
/* Escopado a enlaces de texto (prosa/listas), no a botones (.btn-cta-final,
   .btn-cta-outline): un selector genérico ".legal-contenido a" pisaba el
   color e insertaba subrayado en los CTA de como-hacer-un-pedido.html. */
.legal-contenido p a, .legal-contenido li a, .legal-contenido address a {
  color: var(--verde-oscuro);
  font-weight: 700;
  text-decoration: underline;
}

.legal-datos {
  list-style: none;
  margin: 1rem 0;
  padding: 1rem 1.2rem;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.legal-datos li { padding: 0.3rem 0; font-size: 0.95rem; }

.tabla-cookies-wrap { overflow-x: auto; margin: 1rem 0; }
.tabla-cookies {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.tabla-cookies th, .tabla-cookies td {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #eee;
}
.tabla-cookies th { background: var(--verde-oscuro); color: var(--blanco); font-weight: 700; }
.tabla-cookies tbody tr:last-child td { border-bottom: none; }

.btn-cta-outline {
  display: inline-block;
  background: transparent;
  color: var(--verde-oscuro);
  font-weight: 800;
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  border: 2px solid var(--verde-oscuro);
  transition: background var(--transicion), color var(--transicion);
}
.btn-cta-outline:hover { background: var(--verde-oscuro); color: var(--blanco); }

/* ---------- Pasos numerados (como-hacer-un-pedido.html) ---------- */
.pasos-pedido { list-style: none; margin: 2rem 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.paso-pedido { display: flex; gap: 1.2rem; align-items: flex-start; }
.paso-numero {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paso-texto h3 { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--verde-oscuro); }
.paso-texto p { margin: 0; line-height: 1.6; }

.pedido-cta-final { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--verde-lima); text-align: center; }
.pedido-cta-final h2 { border-bottom: none; padding-bottom: 0; }
.pedido-cta-botones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Cards de pago (formas-de-pago.html) ---------- */
.pago-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.5rem 0; }
.pago-tarjeta { background: var(--fondo-claro); border-radius: var(--radio); padding: 1.5rem; text-align: center; }
.pago-icono { font-size: 2.5rem; margin-bottom: 0.5rem; }
.pago-tarjeta h3 { margin: 0 0 0.4rem; color: var(--verde-oscuro); }
.pago-tarjeta p { margin: 0; font-size: 0.9rem; line-height: 1.5; }

@media (max-width: 640px) {
  .pago-tarjetas { grid-template-columns: 1fr; }
  .paso-pedido { gap: 0.9rem; }
}

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes kenBurns {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes heroFadeScale {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes pulsoBoton {
  0% { box-shadow: 0 0 0 0 rgba(27, 107, 27, 0.5); }
  15% { box-shadow: 0 0 0 12px rgba(27, 107, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 107, 27, 0); }
}

@keyframes apareceCard {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  15% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ============================================================
   TABLET — hasta 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .hero-content { max-width: 640px; }

  /* Header de tienda: botón Categorías pasa a solo icono */
  .btn-categorias span { display: none; }
  .btn-categorias { padding: 0.55rem; border-radius: 50%; }

  .header-secundaria-inner { gap: 18px; justify-content: flex-start; }

  /* BLOQUE 1: landing (index.html) sin scroll en móvil/tablet — el hero
     ocupa el 100vh exacto y es la única pantalla; la única salida es el
     botón "Entrar" (redirección directa, ver js/common.js), no hay scroll
     que revele nada debajo. */
  body.pagina-landing { overflow: hidden; height: 100vh; }
  .hero-scroll-indicator { display: none; }

  /* Fix preventivo QA: drawer de categorías (#drawer-menu) reportado como
     no-scrollable/no-clickeable en algunos móviles reales — .drawer ya
     trae overflow-y:auto y height:100vh (regla base más arriba); esto
     refuerza el scroll con !important + touch-action explícito por si
     algún estilo inline o de terceros llegara a pisarlo. Sin max-height:
     el drawer es a pantalla completa por diseño (position:fixed, top:0,
     height:100vh) — limitarlo dejaría un hueco vacío debajo. */
  #drawer-menu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1100;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
}

/* Respaldo visual para la franja tablet (641-1024px), mismo patrón que el
   bloque de <=640px de más abajo: js/common.js ya no aplica
   navbar-parcial/navbar-oculto en este rango (ANCHO_MOVIL ahora es 1024),
   pero si por lo que sea esas clases llegaran a aplicarse el header no debe
   colapsar — el icono del carrito quedaba clipeado e inaccesible tras hacer
   scroll, sin ninguna alternativa (el botón flotante de carrito solo existe
   <=640px). Se muestra también aquí como red de seguridad adicional. */
@media (min-width: 641px) and (max-width: 1024px) {
  .header-principal.navbar-parcial .header-inner-colapsable,
  .header-principal.navbar-oculto .header-inner-colapsable {
    max-height: 200px;
  }
  .header-principal.navbar-parcial .header-inner-colapsable > .header-inner,
  .header-principal.navbar-oculto .header-inner-colapsable > .header-inner {
    transform: none;
    opacity: 1;
  }
  .header-principal.navbar-oculto .header-secundaria {
    max-height: none;
  }
  .whatsapp-flotante { display: none; }
  /* index.html no tiene carrito (ni su botón flotante sustitutivo) —
     ahí el WhatsApp flotante se queda visible siempre, igual que en móvil. */
  body.pagina-landing .whatsapp-flotante { display: flex; }
  .carrito-flotante-movil { display: flex; }
}

/* ============================================================
   MÓVIL — hasta 640px
   ============================================================ */
@media (max-width: 640px) {
  .logo-linea-1 { font-size: 2rem; }
  .logo-linea-2 { font-size: 1.8rem; }
  .hero-tagline { font-size: 1rem; }

  .sobre-nosotros { padding: 3rem 1.25rem; }
  .sobre-nosotros-superior { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
  .sobre-carrusel-wrap { height: 360px; }

  /* BUG 1.5 / BLOQUE EXTRA B: navbar fijo permanente en móvil — logo,
     buscador y carrito nunca se ocultan ni cambian de tamaño al hacer
     scroll. El JS (js/common.js) ya no aplica navbar-parcial/oculto por
     debajo de este mismo breakpoint, pero esta regla es el respaldo
     visual: si por lo que sea esas clases llegaran a aplicarse (p.ej. se
     cambia de ancho sin disparar un evento de scroll), el colapso y el
     fade/slide del contenido quedan anulados igualmente — el resultado
     visual siempre es el de navbar-completo. z-index más alto que en
     desktop porque en móvil el navbar debe quedar por encima de
     absolutamente todo (drawers, banner de cookies, etc.). */
  .header-principal {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .header-principal.navbar-parcial .header-inner-colapsable,
  .header-principal.navbar-oculto .header-inner-colapsable {
    max-height: 200px;
  }
  .header-principal.navbar-parcial .header-inner-colapsable > .header-inner,
  .header-principal.navbar-oculto .header-inner-colapsable > .header-inner {
    transform: none;
    opacity: 1;
  }
  .header-principal.navbar-oculto .header-secundaria {
    max-height: none;
  }

  /* Header de tienda: colapsa a 2 filas — [Categorías][logo][carrito] + buscador ancho debajo */
  .header-inner {
    height: auto;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
  }
  /* BUG móvil 1B/1C: .header-inner-colapsable hereda de la regla base
     max-height:80px (pensada para el .header-inner de 1 fila de escritorio,
     ver más arriba) también en navbar-completo (sin clase especial) — aquí
     .header-inner ya pasa a 2 filas (logo+iconos y buscador debajo) por el
     flex-wrap de arriba, así que ese techo de 80px recorta la segunda fila
     entera (el buscador queda invisible/cortado bajo el overflow:hidden).
     Las reglas de navbar-parcial/oculto de más abajo ya suben ese techo a
     200px, pero solo para esos dos estados — faltaba para el estado base. */
  .header-inner-colapsable {
    max-height: 200px;
  }
  .btn-categorias { order: 1; }
  .header-inner .header-logo { order: 2; margin: 0 auto; }
  .btn-carrito-header { order: 4; min-width: 44px; min-height: 44px; }
  .header-buscador-wrap { order: 5; flex: 1 1 100%; margin-left: 0; }
  .btn-categorias + .header-buscador-wrap { margin-left: 0; }

  .header-secundaria-inner { justify-content: flex-start; scroll-snap-type: x proximity; }
  .categoria-rapida, .nav-principal { scroll-snap-align: start; }

  /* UX 4: en móvil la fila de Inicio/Tienda/Recetas + chips de categorías
     (header-secundaria) solo añadía altura sin aportar nada que el drawer de
     categorías no cubra ya — se oculta entera y el nav principal pasa a
     vivir dentro del propio drawer (.drawer-nav-principal). */
  .header-secundaria { display: none; }
  .drawer-nav-principal { display: flex; }

  /* El botón de categorías pasa a ser la puerta de entrada principal a la
     navegación en móvil: se agranda para un objetivo táctil más claro. */
  .btn-categorias { padding: 0.75rem; }
  .btn-categorias svg { width: 24px; height: 24px; }

  .volver-inicio { margin: 1rem 0 0 1.1rem; }

  .tienda { padding: 1.5rem 1rem 7rem; }
  .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .producto-iniciales { font-size: 60px; }
  .producto-nombre-mini { display: none; }

  /* Áreas táctiles mínimas de 44x44px en móvil (WCAG 2.5.5 / hallazgo QA H6) */
  .producto-btn-add { width: 44px; height: 44px; right: 6px; bottom: 6px; }
  .selector-cantidad-btn { width: 44px; height: 44px; }
  .receta-producto-btn-add { width: 44px; height: 44px; }
  .carrito-item-btn { width: 44px; height: 44px; }
  /* Hallazgo QA (ronda cierre Etsy): botón "×" de cerrar drawer medía
     29x31px y el enlace "Eliminar" del carrito 64x21px — ambos por debajo
     del mínimo táctil. */
  .cerrar-drawer {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carrito-item-eliminar { min-height: 44px; display: flex; align-items: center; padding: 0.4rem 0; }

  /* Drawer del carrito: pasa a hoja inferior (el drawer izquierdo sigue lateral) */
  .drawer-derecha {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .drawer-derecha:not(.oculto) { transform: translateY(0); }
  .drawer-derecha.oculto { transform: translateY(100%); }

  .whatsapp-flotante { width: 50px; height: 50px; right: 1rem; bottom: 1rem; }

  .banner-cookies { flex-direction: column; align-items: stretch; padding: 1rem; }
  .banner-cookies-botones { width: 100%; }
  .btn-cookies-rechazar, .btn-cookies-aceptar { flex: 1; text-align: center; }
}

/* ============================================================
   PÁGINA DE RECETA (receta.html)
   ============================================================ */
.receta-detalle { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.receta-detalle-imagen {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--verde-lima), var(--verde-oscuro));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  margin: 1.25rem 0 1.5rem;
  box-shadow: 0 0 30px rgba(107, 191, 0, 0.3), 0 0 60px rgba(27, 107, 27, 0.12);
}
.receta-detalle-imagen span {
  color: var(--blanco);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.receta-detalle-imagen img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

.receta-detalle-titulo { font-family: 'Baloo 2', sans-serif; font-size: 2rem; color: var(--verde-oscuro); margin: 0 0 1.25rem; }

.receta-mini-cards { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.receta-mini-card {
  flex: 1 1 160px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  color: var(--verde-oscuro);
}
.receta-mini-card-label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.03em; }
.receta-mini-card-valor { font-weight: 800; font-size: 1rem; }

.receta-detalle-descripcion { font-size: 1.05rem; line-height: 1.7; color: #444; margin-bottom: 2.5rem; }

.receta-seccion { margin-bottom: 3rem; }
.receta-seccion h2 { font-family: 'Baloo 2', sans-serif; color: var(--verde-oscuro); font-size: 1.3rem; margin: 0 0 1.1rem; }

.receta-productos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-bottom: 1.5rem; }
.receta-producto-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0.7rem;
}
.receta-producto-foto { width: 56px; height: 56px; flex: 0 0 auto; }
.receta-producto-foto .producto-placeholder,
.receta-producto-foto .producto-foto { border-radius: 8px; }
.receta-producto-foto .producto-nombre-mini { display: none; }
.receta-producto-info { flex: 1; min-width: 0; }
.receta-producto-nombre { font-weight: 700; font-size: 0.9rem; margin: 0; }
.receta-producto-cantidad { font-size: 0.8rem; color: var(--verde-oscuro); font-weight: 700; margin: 0.1rem 0 0; }
.receta-producto-btn-add {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 700;
  transition: background var(--transicion);
}
.receta-producto-btn-add:hover { background: var(--verde-lima); }

.btn-anadir-todos {
  display: block;
  width: 100%;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 800;
  font-size: 1.1rem;
  padding: 1.1rem;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: background var(--transicion), transform var(--transicion);
}
.btn-anadir-todos:hover { background: var(--verde-lima); transform: scale(1.02); }

.receta-ingredientes-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.selector-raciones { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; }

.receta-ingredientes-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ingrediente-fila { border-bottom: 1px solid #eee; padding-bottom: 0.5rem; }
.ingrediente-check { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.ingrediente-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--verde-oscuro); }
.ingrediente-check:has(input:checked) .ingrediente-nombre { text-decoration: line-through; color: #999; }
.ingrediente-cantidad { font-weight: 800; color: var(--verde-oscuro); min-width: 70px; }
.ingrediente-nombre { color: #333; }

.receta-pasos { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.receta-pasos li { line-height: 1.7; color: #333; padding-left: 0.3rem; }

.receta-nutricion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.receta-nutricion-card {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1.1rem 0.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.receta-nutricion-card strong { font-size: 1.3rem; color: var(--verde-oscuro); }
.receta-nutricion-card span { font-size: 0.75rem; color: #888; }

@media (max-width: 640px) {
  .receta-productos-grid { grid-template-columns: 1fr; }
  .receta-nutricion-grid { grid-template-columns: repeat(2, 1fr); }
  .receta-detalle-titulo { font-size: 1.5rem; }
}

/* ============================================================
   BOTÓN ELIMINAR PRODUCTO — panel fijo (desktop) y drawer (móvil/tablet)
   del carrito. Reutiliza la misma clase en ambos: elimina la línea entera
   de un click (no depende de bajar la cantidad hasta el mínimo).
   ============================================================ */
.btn-eliminar-panel {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s;
  padding: 4px 8px;
  margin-left: auto;
}
.btn-eliminar-panel:hover {
  opacity: 1;
}

/* ============================================================
   BANNER SUPERIOR DE ENVÍO (todas las páginas)
   ============================================================ */
.banner-envio {
  background: #2D6A2E;
  color: white;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 200;
}
/* BUG móvil 1A: a 13px el texto completo no cabe en una fila por debajo de
   ~430px de ancho y partía en 2 líneas, empujando el resto del header hacia
   abajo. Reducir tamaño/padding en vez de recortar el mensaje con ellipsis
   (el texto completo — envío + mínimo — es información que sí debe verse
   entera, no solo su principio). */
@media (max-width: 480px) {
  .banner-envio {
    font-size: 11px;
    padding: 6px 10px;
    letter-spacing: 0;
  }
}

/* ============================================================
   BADGES DE ORIGEN (canario / gallego / local FTV)
   Sustituyen a .producto-badge-local en las cards y en el detalle de
   producto: mismo hueco visual (top-left de la foto), pero con
   mensaje diferenciado según el origen real del producto.
   ============================================================ */
.badge-origen {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s var(--ease-material), transform 0.5s var(--ease-material);
}
.badge-origen.visto { opacity: 1; transform: none; }
.badge-canario {
  background: #FFF8E7;
  color: #B8860B;
  border: 1px solid #DAA520;
}
.badge-gallego {
  background: #E8F0FE;
  color: #1A56DB;
  border: 1px solid #3B82F6;
}
.badge-local {
  background: #F0F7F0;
  color: #2D6A2E;
  border: 1px solid #2D6A2E;
}
/* En el detalle de producto (producto.html) el badge es estático, no flotante */
.producto-detalle-badge.badge-origen { position: static; opacity: 1; transform: none; display: inline-flex; margin-bottom: 0.75rem; }

/* ============================================================
   SECCIÓN "POR QUÉ ELEGIRNOS" (tienda.html)
   ============================================================ */
.por-que-elegirnos {
  padding: 40px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.pqe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pqe-item {
  text-align: center;
  padding: 24px 16px;
  background: #F5F0E8;
  border-radius: 16px;
}
.pqe-icono {
  font-size: 32px;
  margin-bottom: 12px;
}
.pqe-item h4 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 16px;
  color: #1B6B1B;
  margin: 0 0 4px;
}
.pqe-item p {
  font-size: 13px;
  color: #666;
  margin: 0;
}
@media (max-width: 768px) {
  .pqe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .pqe-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   POP-UP DE BIENVENIDA (index.html, tienda.html — una sola vez)
   ============================================================ */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.popup-overlay.oculto { display: none; }
.popup-card {
  background: white;
  border-radius: 20px;
  padding: 40px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.popup-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
}
.popup-icono { font-size: 48px; margin-bottom: 16px; }
.popup-card h2 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 24px;
  color: #1B6B1B;
  margin: 0 0 12px;
}
.popup-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 20px;
}
.popup-info {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  color: #666;
  margin-bottom: 24px;
}
.popup-cta {
  display: inline-block;
  width: 100%;
}

/* ============================================================
   ACCESIBILIDAD — prefers-reduced-motion
   Desactiva Ken Burns, pulse, parallax y demás animaciones/transiciones
   (incluidas las View Transitions, ver css/transitions.css).
   ============================================================ */
@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;
  }
}