/* ============================================================
   LAYTON PARFUMS — sitio público
   Paleta: blanco, negro y escala de grises (acento gris plata).
   OJO: la escala de grises es solo la ESTETICA (fondos, textos, botones,
   header, footer, bordes). Todo lo que tiene color propio lo conserva:
   las fotos, el video, los logos de las marcas, y las senales de estado
   (disponible/agotado, mensajes de exito/error). No poner filtros de
   grises sobre imagenes — ya se probo y el dueño pidio revertirlo.
   Tipografía: Cormorant Garamond (editorial) + sans-serif limpia (funcional).
   Sin dependencias externas de CSS/JS más allá de Google Fonts.
   ============================================================ */

:root {
  --color-ink: #1f1f1f;
  --color-ink-deep: #111111;
  --color-off-white: #f6f6f6;
  --color-light-grey: #e4e4e4;
  --color-black: #0a0a0a;
  --color-white: #ffffff;
  --color-silver: #b3b3b3;
  --color-silver-soft: rgba(179, 179, 179, 0.16);
  --color-text-muted: #6e6e6e;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Helvetica Neue', Arial, sans-serif;

  --header-height: 96px;

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-off-white);
  color: var(--color-black);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.01em; margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.eyebrow { text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.72rem; color: var(--color-text-muted); }
.section-heading { text-align: center; margin-bottom: 48px; }
.section-heading .eyebrow { display: block; margin-bottom: 10px; }
.section-heading h1, .section-heading h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }

/* Texto que no se ve en pantalla pero que Google y los lectores de pantalla
   si leen. Utilidad general, hoy sin uso. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid transparent;
  border-radius: 1px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium),
    box-shadow 0.35s var(--ease-premium), transform 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium);
}
.btn-primary { background: var(--color-ink); color: var(--color-off-white); border-color: var(--color-ink); }
.btn-primary:hover { background: var(--color-ink-deep); box-shadow: 0 10px 24px rgba(17, 17, 17, 0.25); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-off-white); }
.btn-outline-light { background: transparent; border-color: rgba(246, 246, 246, 0.7); color: var(--color-off-white); }
.btn-outline-light:hover { background: var(--color-off-white); color: var(--color-ink); border-color: var(--color-off-white); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-block { display: block; width: 100%; }

/* ---------- Header ---------- */
.nav-toggle-checkbox { display: none; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 28px 0;
  background: rgba(18, 18, 18, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background-color 0.45s var(--ease-premium), padding 0.35s var(--ease-premium),
    box-shadow 0.45s var(--ease-premium), backdrop-filter 0.45s var(--ease-premium);
}
body.home-page .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.site-header.is-scrolled { padding: 18px 0; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }

/* Cuando el hero pasa a fondo claro (al terminar la intro del video), el
   header sigue siendo transparente: sus letras claras dejarian de leerse, asi
   que pasan a negro. Al hacer scroll el header recupera su fondo oscuro y
   vuelven al blanco de siempre. */
body.hero-is-light .site-header:not(.is-scrolled) .logo,
body.hero-is-light .site-header:not(.is-scrolled) .main-nav a,
body.hero-is-light .site-header:not(.is-scrolled) .search-toggle,
body.hero-is-light .site-header:not(.is-scrolled) .cart-toggle { color: var(--color-ink); }

/* Las barritas del menu de celular se pintan con "background", no con "color". */
body.hero-is-light .site-header:not(.is-scrolled) .nav-toggle-label span {
  background: var(--color-ink);
  transition: background-color 1.8s var(--ease-premium), transform 0.3s ease, opacity 0.3s ease;
}

body.hero-is-light .site-header:not(.is-scrolled) .search-form input {
  border-color: rgba(31, 31, 31, 0.28); background: rgba(31, 31, 31, 0.04); color: var(--color-ink);
}
body.hero-is-light .site-header:not(.is-scrolled) .search-form input::placeholder { color: rgba(31, 31, 31, 0.5); }

body.hero-is-light .site-header .logo,
body.hero-is-light .site-header .main-nav a,
body.hero-is-light .site-header .search-toggle,
body.hero-is-light .site-header .cart-toggle,
body.hero-is-light .site-header .search-form input { transition: color 1.8s var(--ease-premium), border-color 1.8s var(--ease-premium), background-color 1.8s var(--ease-premium); }

.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.logo { color: var(--color-off-white); text-decoration: none; font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 0.14em; }

.main-nav { display: flex; align-items: center; }
.main-nav a { color: var(--color-off-white); text-decoration: none; margin-left: 28px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; position: relative; padding-bottom: 3px; }
.main-nav a:first-child { margin-left: 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--color-silver); transition: width 0.3s var(--ease-premium); }
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.search-form input {
  padding: 8px 14px; border: 1px solid rgba(246, 246, 246, 0.35); border-radius: 1px;
  background: rgba(246, 246, 246, 0.06); color: var(--color-off-white); font-size: 0.8rem; width: 170px;
  transition: border-color 0.3s ease, width 0.3s ease;
}
.search-form input::placeholder { color: rgba(246, 246, 246, 0.55); }
.search-form input:focus { outline: none; border-color: var(--color-silver); width: 210px; }

.search-toggle { display: none; background: none; border: none; color: var(--color-off-white); cursor: pointer; align-items: center; padding: 4px; }

.cart-toggle { position: relative; background: none; border: none; color: var(--color-off-white); cursor: pointer; display: flex; align-items: center; padding: 4px; }
.cart-count {
  position: absolute; top: -6px; right: -8px; background: var(--color-silver); color: var(--color-black);
  font-size: 0.62rem; font-weight: 600; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Pantalla completa de búsqueda en mobile: independiente del menú de navegación. */
.search-overlay {
  display: none; position: fixed; inset: 0; z-index: 160;
  background: var(--color-ink-deep); flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 24px;
}
.search-overlay.is-open { display: flex; }
.search-overlay-close { position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--color-off-white); font-size: 2rem; line-height: 1; cursor: pointer; }
.search-overlay-form { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 420px; border-bottom: 1px solid rgba(246, 246, 246, 0.4); padding-bottom: 14px; }
.search-overlay-form input {
  flex: 1; background: none; border: none; color: var(--color-off-white); font-size: 1.2rem; font-family: var(--font-sans);
}
.search-overlay-form input::placeholder { color: rgba(246, 246, 246, 0.5); }
.search-overlay-form input:focus { outline: none; }
.search-overlay-form button { background: none; border: none; color: var(--color-off-white); cursor: pointer; display: flex; padding: 0; }

.nav-close { display: none; }

.nav-toggle-label { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav-toggle-label span { width: 24px; height: 1.5px; background: var(--color-off-white); display: block; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle-checkbox:checked ~ .site-header .nav-toggle-label span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .site-header .nav-toggle-label span:nth-child(2) { opacity: 0; }
.nav-toggle-checkbox:checked ~ .site-header .nav-toggle-label span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Contenido: deja lugar para el header fijo, salvo en la home donde el hero va debajo del header transparente */
.page-content { padding-top: var(--header-height); }
body.home-page .page-content { padding-top: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* "dvh" descuenta las barras del navegador en celulares, que con "vh" quedan
     fuera de la cuenta y descentran el bloque. Los navegadores que no la
     entienden se quedan con la línea de arriba. */
  min-height: 100dvh;
  /* El header es fijo y transparente sobre el hero (no ocupa lugar en el
     layout), así que el alto útil es la pantalla entera y el centro del flex
     es el centro visual. */
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
  background: #181818;
  color: var(--color-off-white);
}

/* Fondo del hero: video en loop, con el poster como respaldo mientras carga
   o si el navegador no puede reproducirlo. */
.hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--color-ink-deep); }
.hero-video { width: 100%; height: 100%; object-fit: cover; transition: opacity 1.8s var(--ease-premium); }

/* Al terminar, el video se va del todo: su lugar lo toma el fondo claro. */
.hero.is-video-done .hero-video { opacity: 0; }

.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 17, 17,0.55) 0%, rgba(17, 17, 17,0.45) 45%, rgba(17, 17, 17,0.72) 100%);
  box-shadow: inset 0 0 220px rgba(0,0,0,0.5);
  transition: opacity 1.8s var(--ease-premium);
}

/* Fondo claro del final. Arranca invisible y aparece cuando termina la intro,
   justo cuando el oscurecimiento se va. */
.hero-final-bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.8s var(--ease-premium);
}

.hero.is-video-done .hero-overlay { opacity: 0; }
.hero.is-video-done .hero-final-bg { opacity: 1; }

/* El bloque (nombre + frase + botón) va centrado en el hero. El relleno es
   simétrico a propósito: el centrado lo resuelve el "align-items: center" del
   hero, no el padding. Antes acá había 48vh arriba y 0 abajo, que era lo que
   lo empujaba al cuarto inferior de la pantalla. */
.hero-inner { position: relative; z-index: 2; max-width: 680px; padding: 24px; }

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

/* El nombre ocupa su lugar desde el principio (aunque no se vea) para que nada
   se mueva cuando aparece al terminar la intro. */
/* El nombre solo se ve sobre el fondo claro del final, por eso va en oscuro. */
.hero-inner h1 { font-size: clamp(3.2rem, 7.5vw, 5.5rem); margin: 0 0 26px; opacity: 0; color: var(--color-ink); }

/* La frase y el boton aparecen antes, sobre el video oscuro, y tienen que
   pasar a oscuro cuando el fondo se aclara. */
.hero-tagline {
  font-size: 1.2rem; color: var(--color-light-grey); margin-bottom: 42px; opacity: 0;
  transition: color 1.8s var(--ease-premium);
}
.hero.is-video-done .hero-tagline { color: var(--color-text-muted); }

.hero .btn { opacity: 0; }
.hero .btn-outline-light { transition-duration: 1.8s; }
.hero.is-video-done .btn-outline-light { border-color: rgba(31, 31, 31, 0.45); color: var(--color-ink); }
.hero.is-video-done .btn-outline-light:hover {
  background: var(--color-ink); color: var(--color-off-white); border-color: var(--color-ink);
  transition-duration: 0.35s;
}

/* El nombre entra ultimo: primero se va el oscurecimiento y aparece el fondo
   claro, y recien despues se escribe el nombre encima. El fondo tiene 1.8s de
   transicion, pero con este easing ya se ve entero cerca de los 0.9s: el
   delay deja una pausa corta sobre el beige ya asentado y arranca el nombre. */
.hero.is-video-done .hero-inner h1 {
  animation: heroFadeUp 1.6s var(--ease-premium) forwards;
  animation-delay: 1.1s;
}

.hero-inner.is-revealed .hero-tagline { animation: heroFadeUp 1.3s var(--ease-premium) forwards; animation-delay: 0.6s; }
.hero-inner.is-revealed .btn { animation: heroFadeUp 1.3s var(--ease-premium) forwards; animation-delay: 1s; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Secciones generales de home ---------- */
.featured-section, .catalog-section, .page-section { padding: 96px 24px; }
.brands-editorial { padding: 96px 24px; text-align: center; }

.values-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; padding: 80px 24px; border-top: 1px solid var(--color-light-grey); }
.value-item h3 { margin-bottom: 10px; font-size: 1.4rem; }
.value-item p { color: var(--color-text-muted); font-size: 0.92rem; }

.page-lead { max-width: 640px; color: var(--color-text-muted); font-size: 1.05rem; }
.contact-list { list-style: none; padding: 0; font-size: 1.05rem; }
.contact-list li { margin-bottom: 14px; }

/* ---------- Carrusel (base genérica, reutilizada por destacados y marcas) ---------- */
.carousel-slide { display: none; }
.carousel-slide.is-active { display: block; animation: carouselFade 0.6s ease; }
@keyframes carouselFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Carrusel de destacados ---------- */
.featured-carousel { position: relative; max-width: 1020px; margin: 0 auto; }
.featured-carousel .carousel-slide.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.carousel-slide-image { aspect-ratio: 4 / 5; background: var(--color-light-grey); overflow: hidden; }
.carousel-slide-image img { width: 100%; height: 100%; object-fit: cover; }
.carousel-slide-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.12em; color: #9a9a9a; }

.carousel-slide-info .eyebrow { margin-bottom: 10px; display: block; }
.carousel-slide-info h3 { font-size: 2.1rem; margin-bottom: 14px; }
.carousel-slide-info .carousel-price { font-size: 1.2rem; margin-bottom: 18px; }
.carousel-slide-info p.carousel-notes { color: var(--color-text-muted); margin-bottom: 28px; font-style: italic; }

.carousel-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  background: var(--color-white); border: 1px solid var(--color-light-grey); width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.3s ease, transform 0.3s ease;
}
.carousel-arrow:hover { border-color: var(--color-ink); transform: translateY(-50%) scale(1.06); }
.carousel-arrow.prev { left: -60px; }
.carousel-arrow.next { right: -60px; }
.carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-light-grey); border: none; cursor: pointer; padding: 0; transition: background-color 0.3s ease, transform 0.3s ease; }
.carousel-dot.is-active { background: var(--color-ink); transform: scale(1.2); }

/* ---------- Sección editorial ---------- */
.editorial-section { display: grid; grid-template-columns: 1.15fr 0.85fr; margin: clamp(40px, 5vw, 72px) 0 96px; }
/* La foto se achica un 13% en los dos lados a la vez —el alto por min-height y
   el ancho por el margen— así la proporción del recuadro no cambia y el
   recorte de cada imagen queda idéntico al de antes. El margen es porcentual
   (se mide contra la columna de la grilla), no un valor fijo en píxeles, para
   que la reducción sea la misma en cualquier pantalla. El hueco que deja
   separa la foto del panel de texto: ese es el aire que faltaba. */
/* El recuadro acompaña la forma de las fotos, que son verticales (0.5625).
   Con un marco apaisado, "cover" las recortaba muchísimo: solo se veía el 31%
   de cada composición. Con 9/10 —casi cuadrado— se ve el 62,5%, y ni siquiera
   el zoom lento lo baja de 60%.
   Va como aspect-ratio y no como min-height fijo para que la proporción no
   cambie con el ancho de la pantalla: en un monitor grande, un alto fijo
   volvería a dejar el marco apaisado y el recorte volvería. El min-height es
   solo una red por si el navegador no entiende aspect-ratio. */
/* 15/16 = 0.9375 es lo más horizontal que admite el formato de las fotos sin
   bajar del 60% de composición visible (visible = 0.5625 / proporción).
   Los dos márgenes son porcentuales sobre la columna de la grilla, así que el
   equilibrio se mantiene en cualquier ancho: el de la izquierda separa la foto
   del borde de la página y el de la derecha, sumado al padding del texto, deja
   un hueco prácticamente igual del otro lado. */
/* Recuadro apaisado 5/4 y bastante más chico que antes. Las fotos son
   verticales (0.5625), así que apaisar el marco cuesta composición visible:
   con "cover" se ve 0.5625 / proporción, o sea el 45% con este 5/4.
   No se usa "contain" a propósito: la foto entraría por altura y quedaría de
   apenas 225px de ancho con franjas de 138px a cada lado — más chica todavía.
   Los márgenes laterales son porcentuales sobre la columna de la grilla: el de
   la izquierda separa la foto del borde y el de la derecha, sumado al padding
   del bloque de texto, deja el mismo aire del otro lado. */
.editorial-image {
  position: relative; aspect-ratio: 5 / 4; min-height: 220px;
  margin-left: 21%; margin-right: 13.5%;
  background: var(--color-ink-deep); overflow: hidden;
}
.editorial-image img { width: 100%; height: 100%; object-fit: cover; }
/* Monograma de la casa. Queda fijo mientras las fotos cambian por detrás,
   así la secuencia entera sigue leyéndose como una sola pieza de marca. */
.editorial-image::after {
  content: "LP"; position: absolute; bottom: 8px; right: 24px; font-family: var(--font-display);
  font-size: 9rem; line-height: 1; color: rgba(246, 246, 246,0.16); z-index: 3; pointer-events: none;
}

/* ---------- Secuencia editorial (fotos que se funden una en otra) ----------
   Las fotos y sus textos se definen en EDITORIAL_SLIDES (app/routes/main.py)
   y el avance lo maneja initEditorialSlideshow() en site.js.
   No lleva flechas ni puntos a propósito: es ambientación, no un carrusel
   que el visitante tenga que operar. */
.editorial-slideshow {
  /* Duración del fundido entre una foto y la siguiente. El tiempo que cada
     foto queda quieta vive en site.js (HOLD); si se cambia el fundido acá,
     actualizar también FADE allá. */
  --fade: 1.2s;
  /* Recorrido del zoom lento. Es más largo que el ciclo de una foto a
     propósito: así el movimiento nunca llega a frenarse a la vista.
     Se acortó junto con el ciclo (23/08) para que el recorrido que llega a
     hacerse siga siendo el mismo; si se cambian HOLD o FADE en site.js,
     reajustar este valor en la misma proporción. */
  --drift: 4.8s;
  /* Curva simétrica: hace que la foto que entra y la que sale sumen
     siempre opacidad 1, sin el bajón gris en la mitad del fundido. */
  --ease-fade: cubic-bezier(0.45, 0, 0.55, 1);
}
.editorial-slide {
  position: absolute; inset: 0; margin: 0; z-index: 1;
  opacity: 0; transition: opacity var(--fade) var(--ease-fade);
}
.editorial-slide.is-active { opacity: 1; }

/* Zoom muy leve mientras la foto está en pantalla (efecto Ken Burns).
   La dirección se alterna entre una foto y la siguiente para que la
   secuencia no se sienta mecánica. */
.editorial-slide img { transform: scale(1.04); transition: transform var(--drift) linear; }
.editorial-slide.is-active img { transform: scale(1); }
.editorial-slide:nth-child(even) img { transform: scale(1); }
.editorial-slide:nth-child(even).is-active img { transform: scale(1.04); }

/* Velo apenas perceptible: integra fotos de luz muy distinta con el gris
   del bloque de texto de al lado y sostiene el texto sobreimpreso. */
.editorial-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(17, 17, 17, 0.12) 0%,
    rgba(17, 17, 17, 0) 40%,
    rgba(17, 17, 17, 0.55) 100%);
}
/* Texto sobreimpreso. Cormorant Garamond en su peso más liviano y con
   mucho espaciado entre letras: es el registro de etiqueta de perfume, no
   el de un pie de foto. Va abajo a la izquierda para no chocar con el
   monograma LP, que está abajo a la derecha. */
.editorial-slide-caption {
  position: absolute; left: 48px; bottom: 44px; z-index: 2; max-width: 56%;
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.25;
  letter-spacing: 0.1em; color: var(--color-off-white);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
  /* Esta regla gobierna la SALIDA (corta y sin demora, para que el texto no
     se superponga con la foto siguiente). La entrada se define abajo. */
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s var(--ease-fade), transform 0.6s var(--ease-fade);
}
/* Filete fino que se abre delante del texto, como una firma que se traza. */
.editorial-slide-caption::before {
  content: ""; display: block; height: 1px; width: 0; margin-bottom: 18px;
  background: rgba(246, 246, 246, 0.65);
  transition: width 0.6s var(--ease-fade);
}
.editorial-slide.is-active .editorial-slide-caption {
  opacity: 1; transform: translateY(0);
  /* Entra después de la foto, no junto con ella: primero se resuelve la
     imagen y recién ahí aparece el texto. */
  transition: opacity 0.9s var(--ease-fade) 0.35s, transform 1s var(--ease-premium) 0.35s;
}
.editorial-slide.is-active .editorial-slide-caption::before {
  width: 52px; transition: width 0.9s var(--ease-premium) 0.5s;
}

/* Si el visitante pidió menos movimiento, la sección queda en una sola foto
   quieta (site.js no arranca la secuencia) y sin zoom. */
@media (prefers-reduced-motion: reduce) {
  /* La cinta de marcas queda quieta y se puede recorrer a mano. */
  .brand-marquee { overflow-x: auto; }
  .brand-marquee-track { animation: none; }

  .editorial-slide, .editorial-slide-caption,
  .editorial-slide-caption::before,
  .editorial-slide.is-active .editorial-slide-caption::before { transition-duration: 0.01ms; }
  .editorial-slide img,
  .editorial-slide.is-active img,
  .editorial-slide:nth-child(even) img,
  .editorial-slide:nth-child(even).is-active img { transform: none; transition: none; }
}
/* El texto va escrito directamente sobre el fondo de la página: sin panel,
   sin borde ni sombra. Antes tenía un fondo gris que ocupaba toda la celda de
   la grilla, y era eso lo que hacía que el bloque midiera casi lo mismo que la
   foto. Sin ese fondo, el bloque pasa a ser el texto y nada más.
   El "max-width" lo mantiene angosto dentro de su columna, así queda aire a la
   derecha y la foto conserva el peso visual. El padding vertical se saca
   porque el centrado ya lo resuelve "justify-content: center". */
.editorial-text {
  background: transparent; border: 0; box-shadow: none;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 528px; padding: 0 64px;
}
.editorial-text .eyebrow { margin-bottom: 16px; }
.editorial-text h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: 20px; }
.editorial-text p { color: #474747; max-width: 420px; }

/* ---------- Universo olfativo (notas / materias primas) ---------- */
.notes-carousel { position: relative; max-width: 1080px; margin: 44px auto 0; }
.notes-carousel .carousel-slide.is-active { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.note-tile { display: block; text-align: center; text-decoration: none; color: inherit; }
.note-tile-image { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--color-light-grey); }
.note-tile-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-premium); }
.note-tile:hover .note-tile-image img { transform: scale(1.08); }
.note-tile-label { margin-top: 14px; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.03em; color: var(--color-ink); }

/* ---------- Marcas (home): cinta continua de logos ---------- */
/* El recorrido de la animación es siempre -50% de la pista, que es exactamente
   una copia de la lista de marcas: por eso el bucle cierra sin salto. La
   duración la calcula initMarcasMarquee() en site.js a partir del ancho real,
   para que la velocidad no cambie si mañana se agregan o sacan marcas. */
.brand-marquee {
  margin-top: 44px;
  overflow: hidden;
  /* Los extremos se desvanecen: las marcas entran y salen sin borde duro. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brand-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: brandMarquee var(--marquee-duracion, 60s) linear infinite;
  will-change: transform;
}
/* La separación va como margen del ítem y no como "gap": así cada marca ocupa
   exactamente lo mismo y media pista equivale a una copia justa. Con "gap"
   sobraría un hueco al cerrar el bucle y el salto se vería. */
.brand-marquee .brand-carousel-item { flex: 0 0 234px; margin-right: 48px; }

@keyframes brandMarquee { to { transform: translateX(-50%); } }

.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }

.brand-carousel-item {
  display: flex; align-items: center; justify-content: center; height: 130px;
  text-decoration: none; color: inherit; opacity: 0.75; background: var(--color-off-white);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}
.brand-carousel-item:hover { opacity: 1; transform: scale(1.06); }
.brand-carousel-item img { max-width: 100%; max-height: 84px; object-fit: contain; mix-blend-mode: multiply; }
.brand-carousel-placeholder {
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.06em;
  color: var(--color-ink); text-align: center; padding: 0 10px;
}

/* ---------- Marcas (página /marcas) ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--color-light-grey); }
.brand-card {
  display: block; background: var(--color-white); padding: 44px 24px; text-decoration: none; color: inherit; text-align: center;
  transition: background-color 0.4s var(--ease-premium), opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}
.brand-card:hover { transform: scale(1.02); }
.brand-card img { max-width: 100px; max-height: 60px; margin: 0 auto 16px; }
.brand-card h3 { margin: 0 0 10px; font-size: 1.3rem; }
.brand-card p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }

/* ---------- Grilla de productos y cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px; }

.product-card { display: flex; flex-direction: column; }
.product-card-link { text-decoration: none; color: inherit; display: block; }
.product-card-image { position: relative; aspect-ratio: 3 / 4; background: var(--color-light-grey); overflow: hidden; }
.product-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s var(--ease-premium); }
.product-card:hover .product-card-img { transform: scale(1.045); }
.product-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: var(--font-display); letter-spacing: 0.1em; color: #9a9a9a; font-size: 1rem; }

.product-card-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(17, 17, 17,0) 40%, rgba(17, 17, 17,0.35) 100%);
  opacity: 0; transition: opacity 0.4s var(--ease-premium);
}
.product-card:hover .product-card-overlay { opacity: 1; }
.product-card-overlay span { border: 1px solid var(--color-off-white); color: var(--color-off-white); padding: 10px 22px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; transform: translateY(10px); opacity: 0; transition: transform 0.4s var(--ease-premium) 0.05s, opacity 0.4s var(--ease-premium) 0.05s; }
.product-card:hover .product-card-overlay span { transform: translateY(0); opacity: 1; }

.product-card-badge { position: absolute; top: 12px; right: 12px; background: var(--color-black); color: var(--color-white); font-size: 0.66rem; padding: 4px 10px; letter-spacing: 0.06em; text-transform: uppercase; z-index: 2; }

.product-card-body { padding: 20px 2px 4px; transition: transform 0.4s var(--ease-premium); }
.product-card:hover .product-card-body { transform: translateY(-2px); }
.product-card-brand { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin: 0 0 6px; }
.product-card-name { font-size: 1.2rem; margin: 0 0 8px; }
.product-card-meta { font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 10px; }
.product-card-price { font-size: 1rem; margin: 0; }

.empty-state { color: var(--color-text-muted); padding: 60px 0; text-align: center; font-family: var(--font-display); font-size: 1.2rem; }

/* ---------- Filtros del catálogo ---------- */
.filters-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 32px 0 56px; padding: 24px; background: var(--color-white); border: 1px solid var(--color-light-grey); }
.filters-bar input, .filters-bar select { padding: 10px 12px; border: 1px solid var(--color-light-grey); border-radius: 1px; font-size: 0.85rem; background: var(--color-white); font-family: var(--font-sans); }
.filters-bar input[type="search"] { flex: 1 1 200px; }
.filters-bar input[type="number"] { width: 115px; }
.filter-checkbox { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.clear-filters { font-size: 0.8rem; color: var(--color-text-muted); text-decoration: underline; }
.active-note-filter { margin-top: 6px; font-style: italic; color: var(--color-text-muted); }

/* ---------- Ficha de producto ---------- */
.product-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; padding: 64px 24px 96px; }

.product-gallery-main { aspect-ratio: 3 / 4; background: var(--color-light-grey); overflow: hidden; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease; }
.product-gallery-placeholder { aspect-ratio: auto; height: 100%; }
.product-gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.product-gallery-thumbs img { width: 76px; height: 76px; object-fit: cover; border: 1px solid var(--color-light-grey); cursor: pointer; opacity: 0.65; transition: opacity 0.3s ease, border-color 0.3s ease; }
.product-gallery-thumbs img:hover { opacity: 1; }
.product-gallery-thumbs img.is-active { opacity: 1; border-color: var(--color-ink); }

.product-brand a { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--color-text-muted); text-decoration: none; }
.product-info h1 { font-size: clamp(2rem, 3vw, 2.6rem); margin: 8px 0 16px; }
.product-price { font-size: 1.4rem; margin: 0 0 14px; }
.product-price-old { text-decoration: line-through; color: #999; font-size: 0.9rem; margin-left: 12px; }
.product-availability { display: inline-block; padding: 5px 14px; border-radius: 12px; font-size: 0.78rem; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.05em; }
/* Verde y rojo a proposito: son senales de estado, no estetica. */
.product-availability.is-available { background: #e3ecd9; color: #2f4a23; }
.product-availability.is-unavailable { background: #f3dcdc; color: #7a2222; }

.product-specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 0.92rem; margin-bottom: 28px; }
.product-specs dt { color: var(--color-text-muted); }
.product-specs dd { margin: 0; }

/* Perfil aromático: una línea discreta, con el mismo tratamiento de
   versalitas que los "eyebrow" del resto del sitio. No es una etiqueta ni un
   botón: solo texto, para no competir con el nombre del perfume. */
.product-aroma-profile {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted); line-height: 1.9; margin-bottom: 20px;
}
.product-description { color: #333; margin-bottom: 28px; }
.product-notes { border-top: 1px solid var(--color-light-grey); padding-top: 24px; margin-bottom: 32px; }
.product-notes h2 { font-size: 1.2rem; margin-bottom: 14px; }
.product-notes .olfactory-family { font-style: italic; color: #555; margin-bottom: 12px; }
.product-notes p { font-size: 0.92rem; margin: 8px 0; }

.product-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--color-light-grey); }
.qty-stepper button { background: none; border: none; width: 38px; height: 46px; cursor: pointer; font-size: 1.1rem; font-family: var(--font-sans); }
.qty-stepper input { width: 40px; border: none; text-align: center; font-size: 0.95rem; -moz-appearance: textfield; }
.btn-whatsapp { background: #ffffff; border: 1px solid var(--color-ink); color: var(--color-ink); }
.btn-whatsapp:hover { background: var(--color-ink); color: var(--color-off-white); }

/* ---------- Carrito (drawer) ---------- */
.cart-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-premium); z-index: 200; }
.cart-overlay.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--color-white); z-index: 201; transform: translateX(100%);
  transition: transform 0.5s var(--ease-premium); display: flex; flex-direction: column;
  box-shadow: -12px 0 44px rgba(0, 0, 0, 0.18);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 26px 28px; border-bottom: 1px solid var(--color-light-grey); }
.cart-drawer-header h2 { font-size: 1.4rem; }
.cart-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }

.cart-items { flex: 1; overflow-y: auto; padding: 8px 28px; }
.cart-empty { color: var(--color-text-muted); text-align: center; padding: 48px 0; font-family: var(--font-display); font-size: 1.1rem; }
.cart-item { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--color-light-grey); }
.cart-item-image { width: 68px; height: 68px; object-fit: cover; background: var(--color-light-grey); flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-brand { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 2px; }
.cart-item-name { font-size: 1rem; margin: 0 0 8px; }
.cart-item-row { display: flex; justify-content: space-between; align-items: center; }
.cart-item-qty { display: flex; align-items: center; border: 1px solid var(--color-light-grey); }
.cart-item-qty button { background: none; border: none; width: 26px; height: 28px; cursor: pointer; font-size: 0.95rem; }
.cart-item-qty span { width: 24px; text-align: center; font-size: 0.85rem; }
.cart-item-remove { background: none; border: none; color: #a33; font-size: 0.75rem; text-decoration: underline; cursor: pointer; padding: 0; }
.cart-item-price { font-size: 0.9rem; }

.cart-drawer-footer { padding: 24px 28px; border-top: 1px solid var(--color-light-grey); }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 18px; }
.cart-checkout-hint { font-size: 0.76rem; color: var(--color-text-muted); text-align: center; margin: 12px 0 0; }

/* ---------- Login ---------- */
.auth-form { max-width: 380px; margin: 100px auto; }
.auth-form h1 { font-size: 1.8rem; margin-bottom: 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-size: 0.9rem; }
.input { width: 100%; padding: 11px 14px; border: 1px solid var(--color-light-grey); border-radius: 1px; font-family: var(--font-sans); font-size: 0.95rem; background: var(--color-white); }
.error { color: #a33; font-size: 0.85rem; margin: 4px 0 0; }

/* ---------- Mensajes flash ---------- */
.flash-container { margin: 16px auto; }
.flash { padding: 12px 16px; margin-bottom: 8px; border-radius: 2px; font-size: 0.9rem; }
/* Verde, rojo y azul a proposito: son senales de estado, no estetica. */
.flash-success { background: #e3ecd9; color: #2f4a23; }
.flash-error { background: #f3dcdc; color: #7a2222; }
.flash-info { background: #dfe6ea; color: #2c4a5a; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink-deep); color: var(--color-light-grey); padding: 72px 0 20px; margin-top: 40px; font-size: 0.88rem; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(228, 228, 228, 0.15); margin-bottom: 24px; }
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.1em; margin: 0 0 12px; color: var(--color-off-white); }
.footer-tagline { color: rgba(228, 228, 228, 0.75); max-width: 320px; }
.footer-links, .footer-social { display: flex; flex-direction: column; gap: 10px; }
.footer-links h4, .footer-social h4 { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(228, 228, 228, 0.5); margin: 0 0 6px; }
.footer-links a, .footer-social a { color: var(--color-light-grey); text-decoration: none; }
.footer-links a:hover, .footer-social a:hover { color: var(--color-silver); }
.footer-copy { text-align: center; color: rgba(228, 228, 228, 0.5); font-size: 0.78rem; margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  /* Debajo de 900px las flechas redondas no tienen lugar sin pisar el
     contenido del carrusel: se ocultan y queda el swipe + los puntos. */
  .carousel-arrow { display: none; }

  .product-detail { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px 72px; }
  .editorial-section { grid-template-columns: 1fr; }
  /* En una sola columna la foto va de borde a borde: los márgenes laterales
     sobran y el alto lo sigue marcando el aspect-ratio de arriba. */
  .editorial-image { margin-left: 0; margin-right: 0; }
  /* En pantalla angosta el monograma LP ocupa buena parte del ancho, así que
     el texto se acerca al borde y se acorta el filete para no chocar. */
  .editorial-slide-caption { left: 26px; bottom: 26px; max-width: 62%; letter-spacing: 0.08em; }
  .editorial-slide-caption::before { margin-bottom: 12px; }
  .editorial-slide.is-active .editorial-slide-caption::before { width: 38px; }
  /* En una sola columna el texto va debajo de la foto: acá sí necesita aire
     arriba y abajo, y el ancho lo da la pantalla. */
  .editorial-text { max-width: none; padding: 44px 28px; }
  .brand-marquee .brand-carousel-item { flex-basis: 200px; margin-right: 40px; }
  .notes-carousel .carousel-slide.is-active { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .featured-carousel .carousel-slide.is-active { grid-template-columns: 1fr; gap: 28px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  :root { --header-height: 78px; }
  .nav-toggle-label { display: flex; }

  /* El buscador inline de escritorio se reemplaza por el ícono + pantalla completa. */
  .search-form { display: none; }
  .search-toggle { display: flex; }

  /* El menú de navegación pasa a ser una pantalla completa propia, con fondo
     sólido, para que no se vea la página de atrás transparentándose. Se anima
     con un deslizamiento + fade en vez de aparecer de golpe. */
  .main-nav {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px; position: fixed; inset: 0; background: var(--color-ink-deep); z-index: 150;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(8%);
    transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium), visibility 0s linear 0.45s;
  }
  .nav-toggle-checkbox:checked ~ .site-header .main-nav {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0);
    transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium), visibility 0s linear 0s;
  }
  .main-nav a { margin-left: 0; font-size: 1rem; }

  .nav-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 20px; left: 20px; width: 40px; height: 40px;
    color: var(--color-off-white); cursor: pointer;
    transition: transform 0.3s var(--ease-premium), opacity 0.3s var(--ease-premium);
  }
  .nav-close:hover, .nav-close:active { transform: translateX(-4px); opacity: 0.75; }

  /* En celular el video se ve entero: con "cover" quedaba tan ampliado que se
     perdian los costados (y el nombre del final salia cortado). */
  .hero-video { object-fit: contain; object-position: center 28%; }

  .hero-inner { padding: 20px; }
  .hero-inner h1 { font-size: 2.6rem; }
  .values-section { grid-template-columns: 1fr; padding: 56px 24px; }
  .filters-bar { flex-direction: column; align-items: stretch; }
  .filters-bar input[type="number"] { width: 100%; }
  .brand-marquee .brand-carousel-item { flex-basis: 160px; margin-right: 32px; }
  .brand-carousel-item { height: 100px; }
  .notes-carousel .carousel-slide.is-active { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .featured-section, .catalog-section, .page-section, .brands-editorial { padding: 64px 20px; }
  .cart-drawer { width: 100%; }
}

/* En celular el menú debe fijarse a la pantalla, no al encabezado filtrado.
   El color explícito también evita heredar la tinta oscura del hero claro. */
@media (max-width: 720px) {
  body .nav-toggle-checkbox:checked ~ .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .main-nav {
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding: 72px 24px 32px;
    overflow-y: auto;
  }
  body .site-header .main-nav a,
  body.hero-is-light .site-header:not(.is-scrolled) .main-nav a {
    color: var(--color-off-white);
    transition: none;
  }
  body:has(.nav-toggle-checkbox:checked) { overflow: hidden; }

  /* Reservamos lugar para el encabezado y mostramos el bloque completo sobre
     el fondo final, evitando que la frase se cruce con las fotos del video. */
  .hero { box-sizing: border-box; padding-top: 112px; padding-bottom: 32px; }
  .hero-inner { width: 100%; max-width: 420px; min-width: 0; padding: 24px; box-sizing: border-box; }
  .hero-inner h1 { font-size: clamp(2.2rem, 9vw, 2.6rem); margin-bottom: 22px; }
  .hero-tagline { font-size: 1rem; line-height: 1.65; margin-bottom: 30px; text-wrap: pretty; }
  .hero-inner.is-revealed .hero-tagline,
  .hero-inner.is-revealed .btn { animation: none; opacity: 0; }
  .hero.is-video-done .hero-inner.is-revealed .hero-tagline,
  .hero.is-video-done .hero-inner.is-revealed .btn {
    animation: heroFadeUp 1.3s var(--ease-premium) 1.1s forwards;
  }
}

/* El SVG encapsula el dibujo original y su transparencia para que Safari
   no dependa del soporte de máscaras CSS por luminancia. */
.hero-inner:has(.hero-wordmark) { width: 100%; max-width: 800px; box-sizing: border-box; }
.hero-inner .hero-wordmark { width: 100%; margin: 0 auto 26px; }
.hero-wordmark img {
  display: block; width: 100%; height: auto; aspect-ratio: 6 / 1;
}
.hero-inner:has(.hero-wordmark) .hero-tagline { max-width: 632px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
  .hero-inner:has(.hero-wordmark) { max-width: 520px; padding-left: 20px; padding-right: 20px; }
  .hero-inner .hero-wordmark { margin-bottom: 28px; }
}