/* ============================================================================
   ARCHIVO: css/styles.css
   ============================================================================
   Aquí vive TODO el diseño visual del sitio: colores, tipografías, tamaños,
   espaciados y animaciones. No afecta los textos ni las fotos (eso está en
   js/products.js) — este archivo solo controla CÓMO SE VE todo.

   MAPA DEL ARCHIVO (búscalos con Ctrl+F, cada uno tiene un título así):
     - :root                 -> colores y fuentes generales (¡lo más útil!)
     - Botones (.btn)        -> estilo de todos los botones del sitio
     - Video destacado       -> el video debajo de "Recetarios digitales"
     - Announcement bar      -> la franja marrón de arriba de todo
     - Header                -> logo, menú (Inicio/Recetarios/Contacto) y carrito
     - Hero                  -> el banner grande con fotos que rotan
     - Sections / Categories -> separación entre secciones y tarjetas de categoría
     - Filters               -> los botones "Todos / Muffins / Bizcochos..."
     - Product grid          -> la grilla de tarjetas de producto
     - Footer                -> pie de página (marca, enlaces, redes, copyright)
     - Cart drawer           -> el panel del carrito que se abre a la derecha
     - Product detail page   -> la página individual de cada producto
     - Contact page          -> la página de contacto
     - @media (max-width)    -> ajustes para pantallas de celular
     - Interacciones         -> animaciones (scroll, vista rápida, WhatsApp flotante, etc.)

   Un archivo CSS funciona así: cada bloque empieza con un ".nombre-de-clase"
   o "#nombre-de-id" seguido de { }. Ese nombre tiene que coincidir con la
   clase que ves en el HTML (class="..." o id="...") para que el estilo se
   aplique ahí. No necesitas entender todo, solo encontrar el bloque correcto
   y cambiar el valor que quieras (color, tamaño, espacio, etc.).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400&family=Red+Hat+Display:wght@500;600;700&display=swap');

/* ----------------------------------------------------------------------------
   :root — COLORES Y FUENTES GENERALES DE TODO EL SITIO
   ----------------------------------------------------------------------------
   Estas son "variables": defines un color UNA vez aquí, y se usa en todo el
   sitio con var(--nombre-de-la-variable). Si algún día quieres cambiar la
   paleta de colores de la marca, este es el ÚNICO lugar donde tienes que
   tocar algo — el cambio se aplica automáticamente en todas partes.

     --color-bg            -> fondo general de las páginas (blanco)
     --color-surface       -> un gris muy clarito, para cajas suaves (ej: el
                              aviso de "producto digital" en la página de
                              producto, o el fondo de las fotos mientras cargan)
     --color-brand         -> EL COLOR PRINCIPAL DE LA MARCA (el marrón).
                              Se usa en: la franja de arriba, el fondo del
                              header, los títulos de sección, el precio de
                              los productos, los botones de categoría, etc.
     --color-brand-dark    -> una variante más oscura del marrón (por si se
                              necesita en algún hover, actualmente casi no se usa)
     --color-footer-bg     -> el fondo beige claro del pie de página
     --color-footer-text   -> el color de texto (marrón oscuro) del pie de página
     --color-text           -> el color de texto normal del resto del sitio
     --color-border         -> el gris clarito de los bordes/líneas divisorias
     --color-black           -> el "negro" que se usa en botones y el ícono
                                del carrito (es un negro suave, no 100% puro)
     --font-body            -> la tipografía principal (con serifas, la que
                                se usa en títulos y textos largos)
     --font-accent          -> la tipografía de palo seco que se usa en
                                botones, menú y textos en mayúsculas
     --max-width            -> el ancho máximo que puede tener el contenido
                                antes de dejar espacio en blanco a los lados
                                en pantallas muy anchas

   👉 EJEMPLO: si quisieras que el marrón de la marca fuera más rojizo,
   solo cambiarías el valor de --color-brand aquí abajo, ej:
      --color-brand: #a13a1e;
   y ese nuevo color se vería automáticamente en TODO el sitio.
   ---------------------------------------------------------------------- */
:root{
  --color-bg: #ffffff;
  --color-surface: #f7f6f3;
  --color-brand: #864a1e;
  --color-brand-dark: #5c330f;
  --color-footer-bg: #e9e4e0;
  --color-footer-text: #433625;
  --color-text: #2b2b2b;
  --color-border: #e9e6de;
  --color-black: #1a1a1a;
  --font-body: 'Newsreader', serif;
  --font-accent: 'Red Hat Display', sans-serif;
  --max-width: 1200px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

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

a{ color: inherit; text-decoration: none; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.accent{
  font-family: var(--font-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   BOTONES (.btn) — estilo compartido por TODOS los botones del sitio
   ----------------------------------------------------------------------------
   Por defecto son "outline" (borde negro, fondo transparente) y se rellenan
   de negro al pasar el mouse. .btn-whatsapp los pinta de verde (para el
   botón de finalizar compra). Si cambias algo aquí, afecta a la vez a los
   botones "Agregar al carrito", "Compra ahora" del banner, "Vista rápida
   completa", etc.
   ---------------------------------------------------------------------- */
.btn{
  display: inline-block;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 28px;
  border: 1px solid var(--color-black);
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  color: var(--color-black);
  transition: background .2s ease, color .2s ease;
}
.btn:hover{ background: var(--color-black); color: #fff; }

.btn-outline{
  background: transparent;
  color: var(--color-black);
}

.btn-whatsapp{
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  width: 100%;
}
.btn-whatsapp:hover{
  background: #1ebe57;
  border-color: #1ebe57;
  color: #fff;
}

/* ----------------------------------------------------------------------------
   VIDEO DESTACADO — el video que se ve debajo de "Recetarios digitales"
   ----------------------------------------------------------------------------
   "padding" es el espacio en blanco arriba/abajo del video. Si algún día
   ves que queda mucho o poco espacio entre el último producto y el video,
   se ajusta aquí (primer número = espacio arriba, segundo = espacio abajo).
   El video en sí (qué archivo se reproduce) se cambia en index.html, no aquí.
   ---------------------------------------------------------------------- */
.video-destacado{
  padding: 16px 0 48px;
}
.video-destacado__player{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--color-surface);
}

/* ----------------------------------------------------------------------------
   ANNOUNCEMENT BAR — la franja marrón angosta hasta arriba de todo
   ----------------------------------------------------------------------------
   Es la que dice "Todas nuestros recetarios son en español". El TEXTO se
   cambia en el HTML (index.html, producto.html, etc., buscando la clase
   announcement-bar), aquí solo se controla su apariencia (color, tamaño).
   ---------------------------------------------------------------------- */
.announcement-bar{
  display: block;
  background: var(--color-brand);
  color: #fdf8f3;
  text-align: center;
  padding: 12px 20px;
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.announcement-bar em{ font-style: italic; }
.announcement-bar:hover{ opacity: .92; }

/* ----------------------------------------------------------------------------
   HEADER — logo, menú de navegación y botón del carrito
   ----------------------------------------------------------------------------
   Tiene DOS filas:
     .site-header__top -> fila de arriba: logo centrado + ícono del carrito
     .site-nav          -> fila de abajo: Inicio / Recetarios digitales / Contacto
   El menú de abajo (.site-nav) se OCULTA en celular (ver el bloque
   @media al final del archivo) porque no hay espacio suficiente.
   ---------------------------------------------------------------------- */
.site-header{
  background: #ffffff;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-border);
}
.site-header__top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.logo-link{ grid-column: 2; justify-self: center; }
.site-header img.logo{ height: 38px; width: auto; }
.site-header__top .cart-button{ grid-column: 3; justify-self: end; }

.site-nav{
  display: flex;
  justify-content: center;
  gap: 32px;
  font-family: var(--font-accent);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}
.site-nav a{ opacity: .75; color: var(--color-black); }
.site-nav a:hover{ opacity: 1; }

.cart-button{
  position: relative;
  background: none;
  border: none;
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cart-button svg{ width: 22px; height: 22px; }
.cart-count{
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------------------------
   HERO — el banner grande con fotos que rotan solas (arriba de la home)
   ----------------------------------------------------------------------------
   Las fotos y textos de este carrusel se editan en js/products.js (busca
   HERO_SLIDES). Aquí solo se controla el tamaño y la animación:
     .hero          -> alto del banner completo (height / min-height)
     .hero-slide    -> cada foto individual (se muestra/oculta con "active")
     hero-zoom      -> la animación de zoom lento tipo cine (más abajo del
                       archivo, en la sección "Interacciones")
   ---------------------------------------------------------------------- */
.hero{
  position: relative;
  height: 68vh;
  min-height: 480px;
  overflow: hidden;
}
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-slide.active{ opacity: 1; }
.hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
}
.hero-slide-content{
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  z-index: 2;
}
.hero-slide-content h1{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 5vw, 46px);
  margin: 0 0 16px;
  text-transform: lowercase;
}
.hero-dots{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-dots button{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
}
.hero-dots button.active{ background: #fff; }

/* ----------------------------------------------------------------------------
   SECTIONS — espacio en blanco arriba/abajo de cada sección de la página
   ----------------------------------------------------------------------------
   "section" le pone 64px de espacio arriba y abajo a TODAS las secciones
   por defecto. Las 2 líneas de abajo son excepciones puntuales para que no
   quede demasiado espacio entre la sección de categorías y la de productos.
   Si algún día ves demasiado (o muy poco) espacio en blanco entre dos
   secciones, es aquí donde se ajusta.
   ---------------------------------------------------------------------- */
section{ padding: 64px 0; }
.categorias{ padding-bottom: 32px; }
#productos{ padding-top: 32px; padding-bottom: 24px; }
.section-heading{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.section-heading h2{
  color: var(--color-brand);
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 12px;
}
.section-heading p{
  margin: 0;
  opacity: .8;
  line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   CATEGORIES — las 4 tarjetas de categoría (Muffins, Bizcochos, etc.)
   ----------------------------------------------------------------------------
   Los nombres y fotos de las categorías se editan en js/products.js
   (busca CATEGORIAS). Aquí solo se controla el tamaño/forma de las tarjetas.
   "aspect-ratio: 1/1" las hace cuadradas — cámbialo a "4/5" si las
   quisieras más altas/rectangulares, como estaban antes.
   ---------------------------------------------------------------------- */
.categorias-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.categoria-card{
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: block;
}
.categoria-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.categoria-card:hover img{ transform: scale(1.05); }
.categoria-card span{
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .06em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ----------------------------------------------------------------------------
   FILTERS — los botones "Todos / Muffins / Bizcochos / NY Style / Brownies"
   ----------------------------------------------------------------------------
   Se generan solos a partir de las categorías de js/products.js (no hace
   falta escribirlos a mano en el HTML). Aquí solo se controla su estilo:
   ".filtro-btn.active" es el botón que está seleccionado en cada momento.
   ---------------------------------------------------------------------- */
.filtros{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.filtro-btn{
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--color-brand);
  background: transparent;
  color: var(--color-brand);
  cursor: pointer;
}
.filtro-btn.active{
  background: var(--color-brand);
  color: #fff;
}

/* ----------------------------------------------------------------------------
   PRODUCT GRID — la grilla de tarjetas de productos ("Recetarios digitales")
   ----------------------------------------------------------------------------
   Cada tarjeta se arma sola por producto a partir de js/products.js. Piezas
   de una tarjeta:
     .producto-card__img    -> la foto (fondo si la foto no llena el marco)
     .producto-card__title  -> el nombre del producto
     .producto-card__price  -> el precio (en €)
     .add-cart-btn          -> el botoncito "+" redondo sobre la foto, que
                               se expande y dice "Agregar" al pasar el mouse
     .quick-view-btn        -> el ícono de "ojo" (vista rápida) arriba a la
                               derecha de la foto
   "grid-template-columns: repeat(4, 1fr)" = 4 columnas en pantallas
   grandes. En celular baja a 2 columnas (ver @media al final del archivo).
   ---------------------------------------------------------------------- */
.productos-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.producto-card{
  background: transparent;
  display: flex;
  flex-direction: column;
}
.producto-card__img{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--color-surface);
}
.producto-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.producto-card:hover .producto-card__img img{ transform: scale(1.045); }
.producto-card__body{
  padding: 14px 2px 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.producto-card__title{
  font-size: 14.5px;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  color: var(--color-text);
}
.producto-card__price{
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--color-brand);
  white-space: nowrap;
}
.add-cart-btn{
  position: absolute;
  right: 10px;
  bottom: 10px;
  height: 34px;
  min-width: 34px;
  border-radius: 17px;
  border: 1px solid var(--color-brand);
  background: rgba(255,255,255,.95);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background .2s ease, color .2s ease, padding .25s ease, min-width .25s ease;
}
.add-cart-btn__icon{
  display: flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
}
.add-cart-btn__icon svg{ width: 16px; height: 16px; }
.add-cart-btn__label{
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: max-width .25s ease, opacity .2s ease .05s;
}
.add-cart-btn:hover{
  background: var(--color-brand);
  color: #fff;
  padding-right: 12px;
}
.add-cart-btn:hover .add-cart-btn__label{
  max-width: 90px;
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   FOOTER — el pie de página completo (marca, enlaces, redes, copyright)
   ----------------------------------------------------------------------------
   Los textos y links del footer se editan directamente en cada archivo
   HTML (buscando <footer class="site-footer">). Como el footer se repite
   igual en todas las páginas, si cambias algo ahí (ej: agregar una red
   social nueva), recuerda repetir el mismo cambio en TODOS los .html:
   index.html, producto.html, contacto.html, privacidad.html,
   reembolsos.html y terminos.html.
   ---------------------------------------------------------------------- */
.site-footer{
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 56px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-logo-text{
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--color-footer-text);
}
.footer-brand p{ opacity: .8; line-height: 1.6; max-width: 340px; }
.footer-col h4{
  font-family: var(--font-accent);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  opacity: .9;
}
.footer-col a{
  display: block;
  opacity: .8;
  margin-bottom: 10px;
  font-size: 14px;
}
.footer-col a:hover{ opacity: 1; }
.footer-bottom{
  border-top: 1px solid rgba(67,54,37,.2);
  padding-top: 20px;
  font-size: 13px;
  opacity: .7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* Social icons */
.social-icons{
  display: flex;
  gap: 10px;
}
.social-icons a{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(67,54,37,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-footer-text);
  opacity: .85;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.social-icons a:hover{
  background: var(--color-footer-text);
  color: var(--color-footer-bg);
  opacity: 1;
}
.social-icons svg{ width: 16px; height: 16px; }

/* Policy dropdown */
.policy-dropdown{ margin-bottom: 10px; }
.policy-dropdown summary{
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 14px;
  opacity: .8;
}
.policy-dropdown summary::-webkit-details-marker{ display: none; }
.policy-dropdown:hover summary{ opacity: 1; }
.policy-dropdown ul{
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 14px;
}
.policy-dropdown li a{
  display: block;
  padding: 6px 0;
  color: var(--color-footer-text);
  font-size: 13px;
  opacity: .8;
}
.policy-dropdown li a:hover{ opacity: 1; }

/* Policy pages */
.policy-content{
  max-width: 720px;
  margin: 0 auto;
}
.policy-content h1{
  color: var(--color-brand);
  font-size: clamp(26px, 4vw, 34px);
  margin: 0 0 28px;
}
.policy-content h2{
  color: var(--color-brand);
  font-size: 19px;
  margin: 32px 0 12px;
}
.policy-content p{ line-height: 1.75; margin: 0 0 14px; }
.policy-content ul{ margin: 0 0 14px; padding-left: 20px; }
.policy-content li{ line-height: 1.7; margin-bottom: 8px; }
.policy-content a{ text-decoration: underline; }

/* ----------------------------------------------------------------------------
   CART DRAWER — el panel del carrito que se desliza desde la derecha
   ----------------------------------------------------------------------------
   Se abre al hacer clic en el ícono del carrito o al agregar un producto.
   La LÓGICA (qué productos tiene, el total, el mensaje de WhatsApp) está
   en js/cart.js — aquí solo se controla la apariencia visual del panel.
   ---------------------------------------------------------------------- */
.cart-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.cart-overlay.open{ opacity: 1; pointer-events: auto; }

.cart-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100%);
  background: #fff;
  z-index: 91;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open{ transform: translateX(0); }
.cart-drawer__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer__header h3{
  margin: 0;
  color: var(--color-brand);
  font-family: var(--font-accent);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .06em;
}
.cart-close{
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.cart-items{
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}
.cart-item{
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-item img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
}
.cart-item__info{ flex: 1; }
.cart-item__title{ font-size: 14px; margin: 0 0 6px; }
.cart-item__price{ font-size: 13px; opacity: .75; }
.cart-item__qty{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.cart-item__qty button{
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
}
.cart-item__remove{
  background: none;
  border: none;
  text-decoration: underline;
  font-size: 12px;
  cursor: pointer;
  opacity: .6;
  margin-top: 6px;
}
.cart-empty{
  text-align: center;
  padding: 60px 20px;
  opacity: .6;
}
.cart-drawer__footer{
  padding: 20px 24px 24px;
  border-top: 1px solid var(--color-border);
}
.cart-subtotal{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-accent);
  font-weight: 700;
  margin-bottom: 14px;
}
.cart-note{
  font-size: 12px;
  opacity: .65;
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   PRODUCT DETAIL PAGE — la página individual de cada producto (producto.html)
   ----------------------------------------------------------------------------
   Esta es UNA SOLA plantilla que se rellena automáticamente con los datos
   del producto que corresponda (según el ?id= que tenga el link). El texto
   fijo de "producto digital descargable, no se aceptan devoluciones..." que
   ves en TODAS las páginas de producto está en js/render.js, no aquí.
   ---------------------------------------------------------------------- */
.producto-detalle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.producto-detalle__img{ aspect-ratio: 4/5; overflow: hidden; }
.producto-detalle__img img{ width: 100%; height: 100%; object-fit: cover; }
.producto-detalle__info h1{
  color: var(--color-brand);
  font-size: clamp(26px, 4vw, 34px);
  margin: 0 0 10px;
}
.producto-detalle__price{
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-brand);
  margin-bottom: 20px;
}
.producto-detalle__desc{ line-height: 1.7; margin-bottom: 24px; white-space: pre-line; }
.producto-detalle__qty{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.producto-detalle__qty button{
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  font-size: 16px;
}
.producto-detalle__aviso{
  margin-top: 28px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 1.7;
  opacity: .85;
}
.volver-link{
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--font-accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .7;
}
.volver-link:hover{ opacity: 1; }

/* ----------------------------------------------------------------------------
   CONTACT PAGE — estilos de la página contacto.html
   ----------------------------------------------------------------------------
   El texto y los botones (WhatsApp / correo) se editan directamente en
   contacto.html, aquí solo se controla que quede centrado y con buen ancho.
   ---------------------------------------------------------------------- */
.contacto-box{
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.contacto-box h1{ color: var(--color-brand); margin-bottom: 12px; }
.contacto-box p{ line-height: 1.7; margin-bottom: 28px; }
.contacto-links{ display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* ----------------------------------------------------------------------------
   RESPONSIVE — ajustes automáticos para pantallas angostas (celulares)
   ----------------------------------------------------------------------------
   Todo lo que está dentro de este bloque @media SOLO se aplica cuando la
   pantalla mide 900px de ancho o menos (o sea, en celulares y tablets
   chicas). Es donde se pasa de 4 a 2 columnas, se oculta el menú de texto
   del header, etc. Si algo se ve mal específicamente en celular pero bien
   en computadora, revisa aquí primero.
   ---------------------------------------------------------------------- */
@media (max-width: 900px){
  .categorias-grid{ grid-template-columns: repeat(2, 1fr); }
  .productos-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; }
  .producto-detalle{ grid-template-columns: 1fr; }
  .site-nav{ display: none; }
}

/* ============================================================================
   INTERACCIONES — animaciones y efectos (scroll, vista rápida, etc.)
   ============================================================================
   Todo lo que viene de aquí en adelante son detalles "de lujo" que no son
   estructura ni contenido, sino animaciones para que el sitio se sienta
   más vivo: aparición suave al hacer scroll (.reveal), el zoom lento de las
   fotos del banner (hero-zoom), la vista rápida en ventana emergente
   (.quick-view-*), la animación de "vuelo" hacia el carrito
   (.fly-to-cart), el mensajito de confirmación (.toast) y la burbuja
   verde de WhatsApp que flota abajo a la derecha (.whatsapp-float).
   No suelen necesitar edición, pero puedes ajustar tiempos/tamaños si algo
   se siente muy lento o muy rápido.
   ============================================================================ */

body{
  animation: page-fade-in .5s ease both;
}
@keyframes page-fade-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* Scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  body{ animation: none; }
}

/* Nav underline */
.site-nav a{
  position: relative;
  padding-bottom: 4px;
}
.site-nav a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--color-black);
  transition: width .25s ease;
}
.site-nav a:hover::after{ width: 100%; }

/* Hero Ken Burns */
.hero-slide img{
  transform: scale(1.02);
}
.hero-slide.active img{
  animation: hero-zoom 6s ease-out forwards;
}
@keyframes hero-zoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}

/* Quick view */
.quick-view-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.producto-card:hover .quick-view-btn{
  opacity: 1;
  transform: translateY(0);
}
.quick-view-btn svg{ width: 18px; height: 18px; color: var(--color-brand); }

/* Quick view modal */
.quick-view-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.quick-view-overlay.open{ opacity: 1; pointer-events: auto; }
.quick-view-modal{
  background: #fff;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  transform: translateY(16px) scale(.98);
  transition: transform .25s ease;
}
.quick-view-overlay.open .quick-view-modal{ transform: translateY(0) scale(1); }
.quick-view-modal img{ width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.quick-view-modal__body{ padding: 32px; }
.quick-view-modal__body h3{ color: var(--color-brand); margin: 0 0 10px; font-size: 22px; }
.quick-view-modal__body .precio{ font-family: var(--font-accent); font-weight: 700; color: var(--color-brand); margin-bottom: 14px; }
.quick-view-modal__body p.desc{ line-height: 1.6; font-size: 14px; opacity: .85; margin-bottom: 20px; }
.quick-view-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
}
@media (max-width: 700px){
  .quick-view-modal{ grid-template-columns: 1fr; }
  .quick-view-modal img{ min-height: 200px; }
}

/* Fly to cart */
.fly-to-cart{
  position: fixed;
  z-index: 120;
  border-radius: 6px;
  pointer-events: none;
  transition: all .7s cubic-bezier(.3,.6,.3,1);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.cart-count.bump{
  animation: cart-bump .4s ease;
}
@keyframes cart-bump{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.5); }
  100%{ transform: scale(1); }
}

/* Toast */
.toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-black);
  color: #fff;
  padding: 12px 22px;
  font-family: var(--font-accent);
  font-size: 13px;
  letter-spacing: .03em;
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Floating WhatsApp button
   (el número de WhatsApp al que lleva este botón NO se cambia aquí — se
   cambia en cada archivo .html, buscando TU_NUMERO_WHATSAPP, y también en
   js/cart.js) */
.whatsapp-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 80;
  animation: whatsapp-pulse 2.4s ease-in-out infinite;
  transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }
.whatsapp-float svg{ width: 28px; height: 28px; color: #fff; }
@keyframes whatsapp-pulse{
  0%, 100%{ box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 10px rgba(37,211,102,0); }
}