/* ============================================================
   GLAMORA — Hoja de estilos principal
   Estética: lujo minimalista, mobile-first.
   Estructura del archivo:
     1. Variables y reset
     2. Utilidades y tipografía base
     3. Marquesina de anuncios
     4. Header sticky + menú móvil + búsqueda
     5. Hero
     6. Grid de productos
     7. Banner promo
     8. Sección de confianza
     9. Nuestros clientes
    10. Footer
    11. Carrito (drawer lateral)
    12. Toast (aviso "agregado al carrito")
    13. Páginas internas (políticas, 404)
    14. Animaciones de aparición (scroll reveal)
    15. Desktop (media queries)
   ============================================================ */

/* ---------- 1. VARIABLES Y RESET ---------- */
:root {
  /* Paleta de la marca */
  --negro: #0B0B0B;
  --blanco: #FFFFFF;
  --gris-humo: #F5F5F4;
  --gris-medio: #8A8A86;
  --dorado: #C8A24B;

  /* Tipografías (se cargan desde Google Fonts en el HTML) */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', Arial, sans-serif;

  /* Medidas reutilizables */
  --ancho-max: 1200px;
  --alto-header: 64px;
  --alto-marquesina: 34px;
  --transicion: 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Compensa el header fijo cuando se navega con anclas (#coleccion, etc.) */
  scroll-padding-top: calc(var(--alto-header) + var(--alto-marquesina) + 10px);
}

body {
  font-family: var(--sans);
  color: var(--negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  /* Evita que el contenido quede oculto bajo la barra fija superior */
  padding-top: calc(var(--alto-header) + var(--alto-marquesina));
}

/* Cuando el menú móvil o el carrito están abiertos, bloqueamos el scroll del fondo */
body.sin-scroll {
  overflow: hidden;
}

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

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

button {
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

/* ---------- 2. UTILIDADES Y TIPOGRAFÍA BASE ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Título de sección: serif elegante con línea dorada debajo */
.titulo-seccion {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
}

.titulo-seccion::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--dorado);
  margin: 14px auto 0;
}

.subtitulo-seccion {
  text-align: center;
  color: var(--gris-medio);
  font-size: 0.9rem;
  margin-top: 10px;
}

/* Botón principal: borde negro que se "rellena" de dorado al pasar el mouse */
.btn {
  display: inline-block;
  padding: 14px 36px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color var(--transicion), border-color var(--transicion);
}

/* Capa dorada que sube desde abajo al hacer hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dorado);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s ease;
  z-index: -1;
}

.btn:hover {
  color: var(--negro);
  border-color: var(--dorado);
}

.btn:hover::before {
  transform: scaleY(1);
}

/* Variante clara: para usar sobre fondos oscuros */
.btn--claro {
  color: var(--blanco);
}

/* ---------- 3. MARQUESINA DE ANUNCIOS ---------- */
.marquesina {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--alto-marquesina);
  background: var(--negro);
  color: var(--blanco);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* La pista contiene el texto repetido; se desplaza en loop infinito.
   Como el contenido está duplicado, mover -50% y reiniciar es invisible. */
.marquesina__pista {
  display: flex;
  white-space: nowrap;
  animation: marquesina-scroll 28s linear infinite;
}

.marquesina__texto {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-right: 3em;
}

.marquesina__texto .dot {
  color: var(--dorado);
  padding: 0 0.6em;
}

@keyframes marquesina-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 4. HEADER STICKY ---------- */
.header {
  position: fixed;
  top: var(--alto-marquesina);
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--alto-header);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ECECEA;
  transition: box-shadow var(--transicion);
}

/* Sombra sutil cuando ya se hizo scroll (la agrega main.js) */
.header.con-sombra {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.header__interno {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Logo centrado de forma absoluta para que quede perfecto entre ambos lados.
   En móvil es más compacto para no chocar con los íconos de la derecha. */
.header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* compensa el letter-spacing del último carácter */
}

/* Pantallas muy angostas: logo aún más compacto */
@media (max-width: 360px) {
  .header__logo {
    font-size: 0.92rem;
    letter-spacing: 0.16em;
  }
}

/* Logo como imagen: oculto hasta confirmar que la foto carga bien
   (lo gestiona main.js). Si carga, se muestra y se oculta el texto. */
.header__logo-img {
  display: none;
  height: 40px;
  width: auto;
}

.header__logo-img.cargada {
  display: block;
}

.header__logo.con-imagen .header__logo-texto {
  display: none;
}

/* Menú de escritorio (oculto en móvil) */
.header__nav {
  display: none;
}

.header__nav a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 0;
  position: relative;
}

/* Subrayado dorado animado en hover */
.header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--dorado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}

.header__nav a:hover::after {
  transform: scaleX(1);
}

/* Íconos del lado derecho (búsqueda, WhatsApp, carrito) */
.header__acciones {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.icono-btn {
  width: 36px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--negro);
  transition: color var(--transicion);
  position: relative;
}

.icono-btn:hover {
  color: var(--dorado);
}

.icono-btn svg {
  width: 20px;
  height: 20px;
}

/* Contador de productos sobre el ícono del carrito */
.carrito-contador {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--dorado);
  color: var(--negro);
  font-size: 0.6rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  /* Oculto hasta que haya productos */
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--transicion), transform var(--transicion);
}

.carrito-contador.visible {
  opacity: 1;
  transform: scale(1);
}

/* Botón hamburguesa (solo móvil) */
.hamburguesa {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.hamburguesa span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--negro);
  position: relative;
}

.hamburguesa span::before,
.hamburguesa span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: var(--negro);
}

.hamburguesa span::before { top: -6px; }
.hamburguesa span::after  { top: 6px; }

/* --- Panel lateral del menú móvil --- */
.menu-movil {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(80vw, 320px);
  background: var(--blanco);
  z-index: 80;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 40px;
}

.menu-movil.abierto {
  transform: translateX(0);
}

.menu-movil__cerrar {
  align-self: flex-end;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gris-medio);
}

.menu-movil__logo {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  margin-bottom: 36px;
}

.menu-movil nav a {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-humo);
  transition: color var(--transicion), padding-left var(--transicion);
}

.menu-movil nav a:hover {
  color: var(--dorado);
  padding-left: 8px;
}

.menu-movil__pie {
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--gris-medio);
  letter-spacing: 0.08em;
}

/* Fondo oscuro detrás del menú móvil y del carrito */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 0.5);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
}

.velo.visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Overlay de búsqueda --- */
.busqueda {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--blanco);
  padding: 24px 20px 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-110%);
  transition: transform 0.35s ease;
}

.busqueda.abierta {
  transform: translateY(0);
}

.busqueda__interno {
  max-width: 640px;
  margin: 0 auto;
}

.busqueda__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--negro);
  padding-bottom: 10px;
}

.busqueda__fila svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gris-medio);
}

.busqueda__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: 1rem;
  background: transparent;
}

.busqueda__cerrar {
  font-size: 1.4rem;
  color: var(--gris-medio);
  line-height: 1;
}

/* Resultados de búsqueda en vivo */
.busqueda__resultados {
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 8px;
}

.busqueda__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 4px;
  border-bottom: 1px solid var(--gris-humo);
  font-size: 0.9rem;
  transition: background var(--transicion);
}

.busqueda__item:hover {
  background: var(--gris-humo);
}

.busqueda__item .precio {
  color: var(--gris-medio);
  font-size: 0.85rem;
  white-space: nowrap;
}

.busqueda__vacio {
  padding: 16px 4px;
  color: var(--gris-medio);
  font-size: 0.85rem;
}

/* ---------- 5. HERO ---------- */
.hero {
  /* Pantalla completa menos la barra fija superior */
  min-height: calc(100svh - var(--alto-header) - var(--alto-marquesina));
  background:
    /* Velo oscuro para que el texto siempre se lea sobre la foto */
    linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.35) 50%, rgba(11,11,11,0.65) 100%),
    /* Imagen del hero: sube tu foto como img/hero.jpg y aparecerá aquí.
       En móvil encuadramos hacia la modelo (75% 30%) para que la cara y las
       gafas se vean completas; en escritorio se vuelve a centrar más abajo. */
    url('../img/hero.jpg') 75% 30% / cover no-repeat,
    /* Respaldo elegante mientras no exista la foto */
    radial-gradient(ellipse at 30% 20%, #2a2a28 0%, var(--negro) 70%);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}

.hero__contenido {
  max-width: 720px;
}

.hero__etiqueta {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 18px;
}

.hero__titulo {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 9vw, 4.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.hero__subtitulo {
  margin: 18px auto 32px;
  max-width: 420px;
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* ---------- 6. GRID DE PRODUCTOS ---------- */
.seccion {
  padding: 64px 0;
}

.seccion--gris {
  background: var(--gris-humo);
}

/* Tabs de filtro: Todo / Gafas / Accesorios */
.filtros {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 36px;
  flex-wrap: wrap;
}

.filtro-btn {
  padding: 9px 22px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid #DDDDDA;
  color: var(--gris-medio);
  background: var(--blanco);
  transition: all var(--transicion);
}

.filtro-btn:hover {
  border-color: var(--negro);
  color: var(--negro);
}

.filtro-btn.activo {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}

/* Grid: 2 columnas en móvil, 3 en desktop (ver media query) */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 14px;
}

/* --- Tarjeta de producto --- */
.producto {
  display: flex;
  flex-direction: column;
}

.producto__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--gris-humo);
}

/* Las dos imágenes apiladas: la segunda aparece con fade al hover */
.producto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s ease, transform 0.6s ease;
}

.producto__img--alt {
  opacity: 0;
}

.producto__media:hover .producto__img--alt {
  opacity: 1;
}

.producto__media:hover .producto__img {
  transform: scale(1.04);
}

/* Placeholder elegante: aparece cuando la foto aún no existe.
   Lo activa productos.js al fallar la carga de la imagen. */
.producto__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: linear-gradient(160deg, #EFEFED 0%, #E4E4E1 100%);
}

.producto__media.sin-foto .producto__placeholder {
  display: grid;
}

.producto__media.sin-foto .producto__img,
.producto__media.sin-foto .producto__img--alt {
  display: none;
}

/* Monograma GB dentro del placeholder */
.producto__placeholder span {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #C9C9C5;
  border: 1px solid #D8D8D4;
  padding: 14px 18px;
}

/* Badge SALE -X% */
.badge-sale {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--negro);
  color: var(--blanco);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 5px 9px;
}

.badge-sale b {
  color: var(--dorado);
  font-weight: 600;
}

/* Badge AGOTADO: producto sin stock */
.badge-agotado {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #6E6E6A;
  color: var(--blanco);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
}

/* La foto de un producto agotado se atenúa para dar la pista visual */
.producto--agotado .producto__img {
  filter: grayscale(0.55) brightness(0.9);
  opacity: 0.85;
}

/* Botón deshabilitado de producto agotado */
.btn-agotado {
  padding: 11px 10px;
  border: 1px solid #D8D8D4;
  background: var(--gris-humo);
  color: var(--gris-medio);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: not-allowed;
  width: 100%;
}

/* Texto de la tarjeta */
.producto__info {
  padding: 12px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.producto__nombre {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
}

.producto__desc {
  font-size: 0.78rem;
  color: var(--gris-medio);
  line-height: 1.45;
}

.producto__precios {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}

.producto__precio {
  font-size: 0.95rem;
  font-weight: 600;
}

.producto__precio-antes {
  font-size: 0.8rem;
  color: var(--gris-medio);
  text-decoration: line-through;
}

/* Selector de variante (color/modelo) */
.producto__variante {
  margin-top: 8px;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--negro);
  border: 1px solid #DDDDDA;
  background: var(--blanco);
  width: 100%;
}

/* Botones de la tarjeta */
.producto__acciones {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-wsp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  background: var(--negro);
  color: var(--blanco);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--transicion), color var(--transicion);
}

.btn-wsp svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn-wsp:hover {
  background: var(--dorado);
  color: var(--negro);
}

.btn-agregar {
  padding: 10px;
  border: 1px solid var(--negro);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--blanco);
  transition: all var(--transicion);
}

.btn-agregar:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}

/* Mensaje cuando un filtro/búsqueda no tiene resultados */
.grid-vacio {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gris-medio);
  padding: 40px 0;
  font-size: 0.9rem;
}

/* ---------- 7. BANNER PROMO ---------- */
.promo {
  background: var(--negro);
  color: var(--blanco);
  text-align: center;
  padding: 72px 20px;
}

.promo__etiqueta {
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 16px;
}

.promo__titulo {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 7vw, 3.4rem);
  font-weight: 600;
  line-height: 1.18;
  max-width: 700px;
  margin: 0 auto;
}

.promo__texto {
  margin: 16px auto 30px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  max-width: 460px;
  line-height: 1.6;
}

/* ---------- 8. SECCIÓN DE CONFIANZA ---------- */
.confianza {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 20px;
  margin-top: 40px;
}

.confianza__item {
  text-align: center;
}

.confianza__item svg {
  width: 30px;
  height: 30px;
  color: var(--dorado);
  margin-bottom: 12px;
}

.confianza__item h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.confianza__item p {
  font-size: 0.78rem;
  color: var(--gris-medio);
  line-height: 1.5;
}

/* ---------- 9. NUESTROS CLIENTES ---------- */
.grid-clientes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 36px;
}

.cliente {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gris-humo);
  position: relative;
}

.cliente img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cliente:hover img {
  transform: scale(1.05);
}

/* Placeholder de cliente (mismo mecanismo que productos) */
.cliente__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: linear-gradient(160deg, #EFEFED 0%, #E4E4E1 100%);
}

.cliente.sin-foto .cliente__placeholder { display: grid; }
.cliente.sin-foto img { display: none; }

.cliente__placeholder span {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: #C9C9C5;
  letter-spacing: 0.1em;
}

/* ---------- 10. FOOTER ---------- */
.footer {
  background: var(--negro);
  color: var(--blanco);
  padding: 56px 0 32px;
  margin-top: 0;
}

.footer__monograma {
  display: block;
  margin: 0 auto 8px;
  width: 52px;
  height: 52px;
}

/* Logo real de la marca en el footer */
.footer__logo {
  display: block;
  margin: 0 auto 26px;
  height: 92px;
  width: auto;
}

.footer__marca {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  margin-bottom: 28px;
}

.footer__columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  text-align: center;
}

.footer h4 {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 14px;
  font-weight: 600;
}

.footer__enlaces a,
.footer__contacto a {
  display: block;
  padding: 5px 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transicion);
}

.footer__enlaces a:hover,
.footer__contacto a:hover {
  color: var(--dorado);
}

.footer__pago {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

/* Íconos de redes sociales */
.footer__redes {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.footer__redes a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blanco);
  transition: all var(--transicion);
}

.footer__redes a:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}

.footer__redes svg {
  width: 17px;
  height: 17px;
}

.footer__legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
}

/* ---------- 11. CARRITO (DRAWER LATERAL) ---------- */
.carrito {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 400px);
  background: var(--blanco);
  z-index: 80;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  display: flex;
  flex-direction: column;
}

.carrito.abierto {
  transform: translateX(0);
}

.carrito__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--gris-humo);
}

.carrito__titulo {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.carrito__cerrar {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gris-medio);
}

.carrito__lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px;
}

/* Mensaje cuando el carrito está vacío */
.carrito__vacio {
  text-align: center;
  color: var(--gris-medio);
  font-size: 0.88rem;
  padding: 48px 10px;
  line-height: 1.6;
}

/* Cada línea del carrito */
.carrito__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gris-humo);
}

.carrito__item-nombre {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
}

.carrito__item-variante {
  font-size: 0.75rem;
  color: var(--gris-medio);
  margin-top: 2px;
}

.carrito__item-precio {
  font-size: 0.85rem;
  margin-top: 6px;
}

/* Controles de cantidad − 1 + */
.cantidad {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  border: 1px solid #DDDDDA;
  width: fit-content;
}

.cantidad button {
  width: 26px;
  height: 26px;
  font-size: 0.95rem;
  color: var(--gris-medio);
  transition: color var(--transicion);
}

.cantidad button:hover {
  color: var(--negro);
}

.cantidad span {
  min-width: 24px;
  text-align: center;
  font-size: 0.82rem;
}

.carrito__item-quitar {
  font-size: 0.7rem;
  color: var(--gris-medio);
  text-decoration: underline;
  margin-top: 6px;
  transition: color var(--transicion);
}

.carrito__item-quitar:hover {
  color: var(--negro);
}

/* Pie del carrito: total + botón de WhatsApp */
.carrito__pie {
  padding: 18px 22px 24px;
  border-top: 1px solid var(--gris-humo);
}

.carrito__total {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.carrito__total b {
  font-size: 1.05rem;
}

.carrito__nota {
  font-size: 0.72rem;
  color: var(--gris-medio);
  margin-bottom: 14px;
  line-height: 1.5;
}

.carrito__pie .btn-wsp {
  width: 100%;
  padding: 14px;
  font-size: 0.75rem;
}

/* ---------- 12. TOAST ---------- */
/* Aviso flotante: "Producto agregado al carrito" */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 80px);
  background: var(--negro);
  color: var(--blanco);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 12px 22px;
  z-index: 95;
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
  white-space: nowrap;
}

.toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast b {
  color: var(--dorado);
  font-weight: 600;
}

/* ---------- 13. PÁGINAS INTERNAS (políticas, 404) ---------- */
.pagina-interna {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.pagina-interna h1 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.pagina-interna h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 40px 0 12px;
  padding-top: 10px;
}

.pagina-interna h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--dorado);
  margin-top: 10px;
}

.pagina-interna p,
.pagina-interna li {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #3A3A38;
  margin-bottom: 12px;
}

.pagina-interna ul {
  list-style: none;
  padding-left: 0;
}

.pagina-interna li::before {
  content: '—';
  color: var(--dorado);
  margin-right: 10px;
}

/* Página 404 */
.pagina-404 {
  min-height: calc(100svh - var(--alto-header) - var(--alto-marquesina));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.pagina-404 .numero {
  font-family: var(--serif);
  font-size: clamp(5rem, 22vw, 9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gris-humo);
  -webkit-text-stroke: 1px var(--gris-medio);
}

.pagina-404 h1 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 18px 0 10px;
}

.pagina-404 p {
  color: var(--gris-medio);
  font-size: 0.9rem;
  margin-bottom: 28px;
  max-width: 380px;
  line-height: 1.6;
}

/* ---------- 14. ANIMACIONES DE APARICIÓN (scroll reveal) ---------- */
/* Los elementos con .revelar comienzan invisibles y suben suavemente
   cuando entran en pantalla (lo controla IntersectionObserver en main.js) */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.revelar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respeto por usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquesina__pista {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- 15. DESKTOP ---------- */
@media (min-width: 768px) {
  :root {
    --alto-header: 72px;
  }

  /* En desktop aparece el menú de texto y se oculta la hamburguesa */
  .header__nav {
    display: flex;
    gap: 28px;
  }

  .hamburguesa {
    display: none;
  }

  .header__logo {
    font-size: 1.45rem;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
  }

  /* Logo en imagen un poco más grande en escritorio */
  .header__logo-img {
    height: 48px;
  }

  /* En escritorio la foto del hero se centra (la modelo queda a la derecha) */
  .hero {
    background-position: center;
  }

  .titulo-seccion {
    font-size: 2.2rem;
  }

  .seccion {
    padding: 96px 0;
  }

  /* Grid de 3 columnas con más aire */
  .grid-productos {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
  }

  /* En desktop los botones de la tarjeta van en fila */
  .producto__acciones {
    flex-direction: row;
  }

  .producto__acciones .btn-wsp {
    flex: 1.4;
  }

  .producto__acciones .btn-agregar {
    flex: 1;
  }

  .confianza {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }

  .grid-clientes {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .footer__columnas {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }

  .footer__redes {
    justify-content: flex-start;
  }

  .marquesina__texto {
    font-size: 0.7rem;
  }
}