/* Tu Essence · las dos portadas nuevas (Mosaico y Cine) + el cambio de logo de la barra de prueba. */
html[data-logo="gota"] .lg-estela, html[data-logo="estela"] .lg-gota { display: none; }
.lg { display: block; }
/* la gota de DENTRO (cabecera y pie): 3 interiores para probar; la puerta lleva su arte de siempre */
.marca-h .gv { display: none; }
html[data-gota="hoy"] .marca-h .gv-hoy, html[data-gota="liquido"] .marca-h .gv-liquido, html[data-gota="gema"] .marca-h .gv-gema { display: contents; }
/* el «Ver catálogo» de la PUERTA (19-oct): crema (hoy) · champán · ámbar, para que elija su amigo. Solo en Incandescente:
   en Esmeralda los dorados chocarían con el verde y se queda el crema */
html:not([data-tema="esmeralda"])[data-boton="champan"] .puerta-botones .btn-claro { background: linear-gradient(180deg, #f8ecd6 0%, #e9cfa2 55%, #d6ab6c 100%);
  color: #1a1108; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .35), 0 6px 22px rgba(228, 117, 8, .28); }
html:not([data-tema="esmeralda"])[data-boton="ambar"] .puerta-botones .btn-claro { background: linear-gradient(180deg, #f6cf93 0%, #e9a356 55%, #c7802f 100%);
  color: #1a1108; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 226, 180, .45), 0 6px 24px rgba(228, 117, 8, .4); }
.demo-logo, .demo-gota, .demo-boton, .demo-letra, .demo-entrada { display: flex; gap: 6px; flex-wrap: wrap; }
/* la barra enseña SOLO lo que cambia en la pantalla que se ve (19-oct, Danny: «le doy a uno y me lleva adentro… así evito confundirme»):
   en la PUERTA → Logo · Botón · Repetir · Color; DENTRO → Portada · Logo · Gota · Repetir · Color.
   (los enlaces «Portada …» recargan la página y, ya entrado, te dejaban dentro: en la puerta no salen) */
html.con-puerta :is(.demo-vers, .demo-gota) { display: none; }
/* las gotas solo existen con el Logo Gota: con la «e» sus botones no pintarían nada */
html[data-logo="estela"] .demo-gota { display: none; }
html:not(.con-puerta) .demo-boton { display: none; }
/* en el móvil la barra de prueba va en UNA línea que se desliza (partida en 3 se comía 115 px y empujaba los botones fuera de la pantalla) */
@media (max-width: 899px) {
  .demo-dentro { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .demo-dentro::-webkit-scrollbar { display: none; }
  .demo-dentro > *, .demo-dentro button, .demo-dentro a { flex: none; white-space: nowrap; }
  .demo-vers, .demo-logo, .demo-gota, .demo-boton, .demo-letra, .demo-entrada, .demo-tema { flex-wrap: nowrap; }
  .demo-tema { margin-left: 0; }
}

.portada { min-height: calc(100vh - 38px); min-height: calc(100svh - 38px); background: var(--fondo); }
.portada::after { display: none; }

/* ═══ MOSAICO: muro de escenas inclinado que se desliza sin fin — SALE SOLO, a pantalla completa y sin texto encima (Danny, 16-oct) ═══ */
.mz { position: absolute; inset: 0; overflow: hidden; }
/* en el móvil, tarjetas grandes (con 200 % el frasco ocupaba el 10-15 % del ancho y se veían 3 repetidas a la vez) */
.mz-muro { --gap: 12px; position: absolute; left: 50%; top: 50%; width: 250%; height: 190%; display: flex; gap: var(--gap); transform: translate(-50%, -50%) rotate(-14deg); }
.mz-col { flex: 1 1 0; min-width: 0; }
.mz-pista { display: flex; flex-direction: column; gap: var(--gap); animation: mz-subir var(--v, 40s) linear infinite; animation-direction: var(--dir, normal); will-change: transform; }
/* la costura del bucle: media pista + medio hueco (con el hueco fijo de antes, en PC saltaba 3 px) */
@keyframes mz-subir { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
.mz-t { position: relative; display: block; width: 100%; aspect-ratio: 9 / 14; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #000; cursor: pointer;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); -webkit-tap-highlight-color: transparent; }
.mz-t img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: mz-respirar 10s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes mz-respirar { 0%, 100% { transform: scale(1.05); } 50% { transform: scale(1.13); } }
.mz-t::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 232, 205, .2) 49%, transparent 60%); background-size: 320% 100%; animation: mz-barrido 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes mz-barrido { 0% { background-position: 130% 0; } 55%, 100% { background-position: -50% 0; } }
.mz-t:hover img { animation-play-state: paused; }
@media (min-width: 900px) { .mz-muro { --gap: 20px; width: 130%; height: 250%; } }

/* ═══ LA PUERTA (Danny, 16-oct): el muro a pantalla completa con la marca, una frase y SOLO 2 botones al centro; al entrar aparece la tienda ═══ */
html.con-puerta :is(.cab, .pie, main > :not(#puerta)) { display: none !important; }
html:not(.con-puerta) #puerta { display: none; }
.puerta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--fondo);
  min-height: 100vh; min-height: var(--alto, 100svh); }   /* la pantalla entera, medida al cargar (index.html): no se recoloca al bajar */
/* TODO AL CENTRO y con aire, como su referencia (la versión de lujo de la presentación de marca, captura de las 18:05): la gota de
   lujo, «TU ESSENCE», UNA frase y los 2 botones. El velo oscurece el centro para que se lea y deja vivo el muro alrededor; arriba a la
   derecha, la luz ámbar de la marca. */
.puerta .mz-velo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 50%, color-mix(in srgb, var(--fondo) 95%, transparent) 0%, color-mix(in srgb, var(--fondo) 82%, transparent) 55%, color-mix(in srgb, var(--fondo) 30%, transparent) 100%),
              radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--halo1) 30%, transparent), transparent 70%); }
.puerta-dentro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 40px 24px; pointer-events: none; }
.puerta-dentro > * { pointer-events: auto; }
.puerta-marca { display: flex; flex-direction: column; align-items: center; }
.puerta-marca .arte { display: block; width: 112px; height: auto; overflow: visible; }
.puerta-marca .lg-estela .arte { width: 150px; }
.puerta-nombre { display: block; width: 236px; height: auto; margin-top: 24px; overflow: visible; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* (sin uso desde que la frase salió de la vista) la frase, en segundo plano: más pequeña que el nombre y con sombra (grande y fina competía con la gota y se perdía sobre fotos claras) */
.puerta-frase { margin: 16px 0 0; max-width: 24ch; font: italic 400 17px/1.4 var(--serif); letter-spacing: .015em; color: var(--suave); text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .8); }
/* el reflejo de cristal de la gota, más visible (a .5 no se apreciaba) */
.puerta-marca .lg-gota .arte path[fill="#fff"] { opacity: .85; }
/* botones en MAYÚSCULAS ESPACIADAS, al ancho del nombre en el móvil (uno encima del otro) y en fila en PC */
.puerta-botones { display: flex; flex-direction: column; gap: 10px; width: 236px; margin-top: 40px; }
.puerta-botones .btn { width: 100%; height: 46px; padding: 0 18px; font: 500 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.puerta-aviso { min-height: 1.3em; margin: 12px 0 0; font: 400 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #f3cf9f; opacity: 0; transition: opacity .4s; }
.puerta-aviso.ver { opacity: 1; }
@media (min-width: 900px) {
  .puerta .mz-velo { background: radial-gradient(38% 46% at 50% 50%, color-mix(in srgb, var(--fondo) 92%, transparent) 0%, color-mix(in srgb, var(--fondo) 70%, transparent) 55%, color-mix(in srgb, var(--fondo) 25%, transparent) 100%),
                                 radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--halo1) 30%, transparent), transparent 70%); }
  .puerta-marca .arte { width: 200px; } .puerta-marca .lg-estela .arte { width: 260px; }
  .puerta-nombre { width: 420px; margin-top: 34px; } .puerta-frase { margin-top: 20px; font-size: 19px; }
  .puerta-botones { flex-direction: row; width: auto; gap: 14px; margin-top: 50px; } .puerta-botones .btn { width: auto; height: 52px; padding: 0 30px; font-size: 12.5px; }
}
/* tras entrar, la tienda empieza en la vitrina: sin el margen de 92 px que tenía cuando venía después de la portada */
html[data-version="mosaico"] .vitrina-cat { padding-top: 44px; }
/* al entrar: la puerta se aleja y se desenfoca; la tienda aparece subiendo */
html.saliendo .puerta { animation: puerta-sale .7s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes puerta-sale { to { opacity: 0; transform: scale(1.06); filter: blur(8px); } }
html.recien :is(.cab, main) { animation: tienda-entra .7s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes tienda-entra { from { opacity: 0; transform: translateY(16px); } }
/* ═══ LA ENTRADA de la puerta (Danny, 18:20: «dale una transición al iniciar, que se vea top para que ingrese»). Dos versiones para
   elegir en la barra de prueba (`data-entrada`); se repiten al volver a la puerta; sin movimiento para quien lo tiene desactivado. ═══ */
@media (prefers-reduced-motion: no-preference) {
  /* A · «LUZ» (~2 s): el muro sale de la oscuridad acercándose, la gota se enciende, el nombre se descubre y los botones suben */
  html.con-puerta[data-entrada="luz"] .puerta .mz { animation: pu-acerca 1.5s cubic-bezier(.2, .7, .2, 1) both; }
  html.con-puerta[data-entrada="luz"] .puerta .mz-velo { animation: pu-aparece 1.2s ease both; }
  html.con-puerta[data-entrada="luz"] .puerta-marca .arte { animation: pu-enciende 1.3s cubic-bezier(.2, .7, .2, 1) .35s both; }
  html.con-puerta[data-entrada="luz"] .puerta-nombre { animation: pu-descubre 1s cubic-bezier(.6, 0, .2, 1) .9s both; }
  html.con-puerta[data-entrada="luz"] .puerta-botones .btn { animation: pu-sube .75s cubic-bezier(.2, .7, .2, 1) 1.4s both; }
  html.con-puerta[data-entrada="luz"] .puerta-botones .btn + .btn { animation-delay: 1.55s; }
  /* B · «LA GOTA QUE CAE» (Danny, 18:22, ~2,7 s). En la oscuridad cae la gota, encendida y con una estela de luz; al llegar se
     aplasta; de su golpe sale UNA ONDA DE LUZ que es el borde que DESCUBRE el muro (mismo centro, mismo ritmo: si van por separado
     «parece una máscara, no una onda»); la gota se enciende y aparecen el nombre y los botones.
     · golpe, brillo y ondas con «forwards» (no «both»): durante su espera no deben pisar la caída ni asomar antes de tiempo.
     · el centro (--gy) lo pone portada.js sobre la gota de verdad; 38 % si no. */
  html.con-puerta[data-entrada="caida"] .puerta .mz { animation: pu-revela 1.4s cubic-bezier(.3, .6, .2, 1) 1s both; }
  html.con-puerta[data-entrada="caida"] .puerta-marca .arte { transform-origin: 50% 100%;
    animation: pu-cae .85s cubic-bezier(.5, 0, .9, .5) .15s both, pu-golpe .5s cubic-bezier(.2, .8, .3, 1.4) 1s forwards, pu-brilla .9s ease 1.1s forwards; }
  html.con-puerta[data-entrada="caida"] .puerta-marca .lg { position: relative; }
  html.con-puerta[data-entrada="caida"] .puerta-marca .lg::before, html.con-puerta[data-entrada="caida"] .puerta-marca .lg::after { content: ""; position: absolute;
    left: 50%; top: 53%; width: 0; height: 0; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
    border: 2px solid color-mix(in srgb, var(--luz) 85%, #fff); box-shadow: 0 0 22px 6px color-mix(in srgb, var(--luz) 55%, transparent), inset 0 0 18px 2px color-mix(in srgb, var(--luz) 40%, transparent);
    animation: pu-onda 1.4s cubic-bezier(.3, .6, .2, 1) 1s forwards; }
  html.con-puerta[data-entrada="caida"] .puerta-marca .lg::after { content: none; }   /* UNA sola onda: el 2.º aro, rezagado, sobraba */
  html.con-puerta[data-entrada="caida"] .puerta-nombre { animation: pu-descubre .9s cubic-bezier(.6, 0, .2, 1) 1.6s both; }
  html.con-puerta[data-entrada="caida"] .puerta-botones .btn { animation: pu-sube .7s cubic-bezier(.2, .7, .2, 1) 2s both; }
  html.con-puerta[data-entrada="caida"] .puerta-botones .btn + .btn { animation-delay: 2.12s; }
  @media (min-width: 900px) { html.con-puerta[data-entrada="caida"] .puerta-marca .lg::before { animation-name: pu-onda-pc; }
 }
}
.pu-puertas { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* C · «PUERTAS DE LUZ» (Danny, 18:46: «dame 2 mejores», ~2,6 s): en la oscuridad se enciende una rendija de luz dorada en el centro,
     se abre como DOS PUERTAS y la luz inunda el muro; la gota se enciende y salen el nombre y los botones. La puerta de entrada, literal. */
  html.con-puerta[data-entrada="puertas"] .pu-puertas { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .pu-puertas i { position: absolute; top: 0; bottom: 0; width: 50.5%; }
  .pu-puertas i:first-child { left: 0; background: linear-gradient(90deg, transparent 84%, rgba(255, 214, 160, .5) 84.3%, rgba(255, 214, 160, .5) 84.6%, transparent 84.9%) 0 50% / 100% 18% no-repeat, linear-gradient(90deg, #000 0%, #060403 72%, #16100a 100%); box-shadow: 8px 0 26px rgba(255, 176, 90, .5), inset -1px 0 0 rgba(255, 222, 170, .85); animation: pu-abre-izq 1.15s cubic-bezier(.7, 0, .2, 1) .6s both; }
  .pu-puertas i:last-child { right: 0; background: linear-gradient(270deg, transparent 84%, rgba(255, 214, 160, .5) 84.3%, rgba(255, 214, 160, .5) 84.6%, transparent 84.9%) 0 50% / 100% 18% no-repeat, linear-gradient(270deg, #000 0%, #060403 72%, #16100a 100%); box-shadow: -8px 0 26px rgba(255, 176, 90, .5), inset 1px 0 0 rgba(255, 222, 170, .85); animation: pu-abre-der 1.15s cubic-bezier(.7, 0, .2, 1) .6s both; }
  .pu-puertas::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; z-index: 1;
    background: linear-gradient(180deg, transparent, #ffe2b0 18%, #fff3dc 50%, #ffe2b0 82%, transparent); box-shadow: 0 0 22px 6px rgba(255, 176, 90, .75);
    animation: pu-rendija 1.5s ease both; }
  html.con-puerta[data-entrada="puertas"] .puerta .mz { animation: pu-fondo 1.6s cubic-bezier(.2, .7, .2, 1) .6s both; }
  html.con-puerta[data-entrada="puertas"] .puerta-marca .arte { animation: pu-enciende 1.1s cubic-bezier(.2, .7, .2, 1) 1.15s both; }
  html.con-puerta[data-entrada="puertas"] .puerta-nombre { animation: pu-descubre .9s cubic-bezier(.6, 0, .2, 1) 1.5s both; }
  html.con-puerta[data-entrada="puertas"] .puerta-botones .btn { animation: pu-sube .7s cubic-bezier(.2, .7, .2, 1) 1.9s both; }
  html.con-puerta[data-entrada="puertas"] .puerta-botones .btn + .btn { animation-delay: 2.02s; }
  /* D · «CASCADA» (~2,6 s): las fotos de los perfumes llegan volando, del centro hacia los lados, y ARMAN el muro; la gota se LLENA
     de ámbar de abajo arriba y se enciende; salen el nombre y los botones. Solo opacidad y transformaciones: son 60 fotos a la vez. */
  html.con-puerta[data-entrada="cascada"] .mz-t { animation: pu-llega .8s cubic-bezier(.2, .8, .2, 1) var(--e, 0s) both; }
  html.con-puerta[data-entrada="cascada"] .puerta-marca .arte { -webkit-mask-size: 100% 250%; mask-size: 100% 250%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: pu-llena 1.6s cubic-bezier(.45, 0, .3, 1) both; }
  html.con-puerta[data-entrada="cascada"] .puerta-nombre { animation: pu-descubre .9s cubic-bezier(.6, 0, .2, 1) 1.6s both; }
  html.con-puerta[data-entrada="cascada"] .puerta-botones .btn { animation: pu-sube .7s cubic-bezier(.2, .7, .2, 1) 2s both; }
  html.con-puerta[data-entrada="cascada"] .puerta-botones .btn + .btn { animation-delay: 2.12s; }
}
/* la rendija crece y se apaga mientras se abren las puertas (ensanchada a ×60 hacía una bruma crema que lavaba las fotos) */
@keyframes pu-rendija { 0% { transform: scaleY(0); opacity: 1; } 38% { transform: scaleY(1); opacity: 1; } 44% { opacity: 1; } 60% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes pu-abre-izq { to { transform: translateX(-102%); } }
@keyframes pu-abre-der { to { transform: translateX(102%); } }
/* la luz que entra por las puertas: las fotos se encienden cálidas y vuelven a su color */
@keyframes pu-fondo { from { transform: scale(1.08); filter: brightness(1.4) sepia(.3) saturate(1.45); } }
@keyframes pu-llega { from { opacity: 0; transform: translateY(60px) scale(.7) rotate(6deg); } }
/* se llena de abajo arriba con borde SUAVE (máscara que sube); al final la máscara se quita para no recortar el halo */
@keyframes pu-llena { 0% { -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 60%); mask-image: linear-gradient(to top, #000 40%, transparent 60%); -webkit-mask-position: 0 18%; mask-position: 0 18%; filter: brightness(1.8); }
  75% { filter: brightness(1.5); }
  99% { -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 60%); mask-image: linear-gradient(to top, #000 40%, transparent 60%); -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  100% { -webkit-mask-image: none; mask-image: none; filter: brightness(1); } }
@keyframes pu-acerca { from { opacity: 0; transform: scale(1.12); filter: brightness(.35); } }
@keyframes pu-aparece { from { opacity: 0; } }
@keyframes pu-enciende { 0% { opacity: 0; transform: scale(.8); filter: brightness(.3); } 55% { opacity: 1; filter: brightness(1.5); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } }
/* el nombre sale del desenfoque con un fundido suave (con un recorte desde el centro asomaba «ESSE» con la N partida) */
@keyframes pu-descubre { from { opacity: 0; filter: blur(10px); transform: scale(1.05); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes pu-sube { from { opacity: 0; transform: translateY(16px); } }
@keyframes pu-cae { from { transform: translateY(-38vh) scale(.8, 1.3); filter: brightness(1.6) drop-shadow(0 -30px 14px rgba(255, 168, 70, .6)); } to { transform: translateY(0) scale(.86, 1.18); filter: brightness(1.6) drop-shadow(0 -46px 18px rgba(255, 168, 70, .45)); } }
@keyframes pu-golpe { 0% { transform: scale(1.18, .78); } 45% { transform: scale(.94, 1.06); } 100% { transform: scale(1, 1); } }
@keyframes pu-brilla { 0% { filter: brightness(1.6); } 35% { filter: brightness(1.8) drop-shadow(0 0 22px var(--luz)); } 100% { filter: brightness(1); } }
/* la onda crece en TAMAÑO (no en escala: con escala su borde engordaba ×40) al mismo ritmo que el círculo que descubre el muro */
@keyframes pu-onda { 0% { width: 10px; height: 10px; opacity: 1; } 75% { opacity: .9; } 100% { width: 1900px; height: 1900px; opacity: 0; } }
@keyframes pu-onda-pc { 0% { width: 10px; height: 10px; opacity: 1; } 75% { opacity: .9; } 100% { width: 3600px; height: 3600px; opacity: 0; } }
@keyframes pu-revela { from { clip-path: circle(0% at 50% var(--gy, 38%)); } to { clip-path: circle(150% at 50% var(--gy, 38%)); } }

/* ═══ CINE: una escena a pantalla completa que se funde con la siguiente ═══ */
.ci { position: absolute; inset: 0; overflow: hidden; cursor: pointer; }
.ci-capa { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.8s ease; }
.ci-capa.activa { opacity: 1; z-index: 1; }
.ci-capa img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.14); }
.ci-capa.activa img { animation: ci-acercar 7.5s cubic-bezier(.2, .6, .2, 1) forwards; }
@keyframes ci-acercar { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.ci-brillo { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 226, 190, .16) 50%, transparent 60%); background-size: 300% 100%; animation: ci-barrido 7.5s ease-in-out infinite; }
@keyframes ci-barrido { 0% { background-position: 140% 0; } 50%, 100% { background-position: -60% 0; } }
.ci-polvo { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.ci-velo { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 50%, transparent), transparent 25%, transparent 45%, color-mix(in srgb, var(--fondo) 94%, transparent) 82%); }
.portada-cine .portada-dentro { z-index: 5; pointer-events: none; } .portada-cine .portada-texto { pointer-events: auto; }
.ci-pie { position: absolute; z-index: 6; display: flex; align-items: center; gap: 18px; }
.ci-barras { display: flex; gap: 6px; }
.ci-barras i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .38); transition: background .4s, width .4s; cursor: pointer; }
.ci-barras i.activa { width: 40px; background: var(--detalle); }
/* el botón dice el perfume que se ve: NOMBRE · Ver → */
.ci-ver { position: relative; z-index: 6; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(10, 6, 3, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--texto); font: 400 13.5px var(--sans); cursor: pointer; white-space: nowrap; }
.ci-nombre { font-size: 11.5px; letter-spacing: .14em; }
.ci-flecha { color: var(--detalle); }
/* móvil: la escena ocupa la parte de arriba y se funde en el fondo antes del título; las barras arriba como historias y el botón bajo el frasco */
@media (max-width: 899px) {
  .ci { bottom: 36%; }
  .ci-velo { background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 60%, transparent) 0%, transparent 17%, transparent 47%, color-mix(in srgb, var(--fondo) 88%, transparent) 58%, var(--fondo) 64%); }
  .ci-pie { display: contents; }
  .ci-barras { position: absolute; z-index: 6; left: 18px; right: 18px; top: calc(var(--cab) + 6px); }
  .ci-barras i, .ci-barras i.activa { flex: 1 1 0; width: auto; }
  .ci-ver { position: absolute; left: 18px; top: calc(var(--cab) + 20px); height: 34px; padding: 0 14px; gap: 10px; font-size: 13px; }
  .ci-nombre { font-size: 11px; }
}
@media (min-width: 900px) {
  .ci { left: 38%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
  .ci-velo { left: 0; background: linear-gradient(90deg, var(--fondo) 0%, var(--fondo) 34%, color-mix(in srgb, var(--fondo) 50%, transparent) 48%, transparent 62%),
                                  linear-gradient(0deg, color-mix(in srgb, var(--fondo) 60%, transparent), transparent 30%); }
  .portada-cine { align-items: center; }
  .ci-pie { bottom: 40px; right: max(36px, calc((100% - 1240px) / 2 + 36px)); gap: 22px; }   /* al margen de la cabecera */
  .ci-barras i { width: 30px; } .ci-barras i.activa { width: 54px; }
  .ci-ver { height: 48px; padding: 0 24px; font-size: 15px; }
  .ci-nombre { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .mz-pista, .mz-t img, .mz-t::after, .ci-brillo, .ci-capa.activa img { animation: none !important; } }
/* WhatsApp (Danny, 19:16: «debe ser verde… se caracteriza por ese color»): el ICONO en su verde → se reconoce al instante sin romper
   la paleta ámbar y negro (un botón entero verde chillón sí la rompería). Todos los botones de pedir usan el mismo icono. */
svg:has(> use[href="#i-wa"]) { color: #25d366; }

/* ═══ DENTRO DE LA TIENDA (Danny, 19:13: «adentro se ve el logo viejo de la gota… la letra de cada perfume, medio rara… "La vitrina",
   casi ni se lee vitrina») ═══ */
/* la marca de LUJO en la cabecera y el pie, la misma de la puerta */
.marca-h { display: flex; align-items: center; gap: 10px; }
.marca-h .arte { display: block; height: 44px; width: auto; overflow: visible; }
.lg-estela .marca-h .arte { height: 34px; }
.marca-h .marca-nombre { display: block; height: 12px; width: auto; overflow: visible; }
@media (min-width: 768px) { .cab-logo .marca-h .arte { height: 48px; } .cab-logo .lg-estela .marca-h .arte { height: 40px; } .cab-logo .marca-h .marca-nombre { height: 13px; } }
.pie-logo .marca-h .arte { height: 30px; } .pie-logo .marca-h .marca-nombre { height: 9px; }
/* la cursiva de los títulos en ámbar CLARO: el ámbar oscuro fino sobre negro casi no se leía («La vitrina») */
:is(.vitrina-cat, .notas, .contacto) h2 em { color: #f0b46c; }
/* los NOMBRES de los perfumes: 3 candidatas (las juzga Claude a ciegas; gana una) */
html[data-nombres="jost"] .tarjeta-nombre { font: 500 14px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
/* ganó CORMORANT a ciegas (8 · Jost 7 · Bodoni 6: «frágil y rara»); el nombre, centrado en un bloque de 2 líneas: los de 1 línea dejaban hueco sobre el precio */
html[data-nombres="cormorant"] .tarjeta-nombre { display: flex; align-items: center; justify-content: center; min-height: 2.2em; -webkit-line-clamp: unset; overflow: visible; font: 600 21px/1.08 'Cormorant Garamond', Georgia, serif; letter-spacing: .03em; }
@media (min-width: 720px) { html[data-nombres="jost"] .tarjeta-nombre { font-size: 15.5px; } html[data-nombres="cormorant"] .tarjeta-nombre { font-size: 24px; } }
/* ═══ Secciones de la tienda (Danny, 19:32): fuera las etiquetas de relleno sobre los títulos; el del catálogo, una FRASE corta y más
   pequeña; los PASOS legibles sobre el hueso (Bodoni fina en tinta clara «no se ve muy bien… es fácil omitir esa parte») y con 1-2-3 ═══ */
#vitrina-cat .sec-cab h2 { font-size: clamp(30px, 7.4vw, 50px); line-height: 1.06; }
#como-pedir .sec-cab h2 { font: 600 clamp(34px, 8vw, 58px)/1.02 'Cormorant Garamond', Georgia, serif; color: var(--tinta); letter-spacing: 0; }
#como-pedir .sec-cab h2 em { color: #8a4a12; }
#como-pedir .paso-num { font: 500 52px/1 var(--sans); font-style: normal; color: #8a4a12; margin-bottom: 10px; }
#como-pedir .pasos-lista h3 { font: 600 30px/1.05 'Cormorant Garamond', Georgia, serif; color: var(--tinta); }
#como-pedir .pasos-lista p { color: #3d3226; font-weight: 400; font-size: 16.5px; }
/* ═══ El INICIO DEL CATÁLOGO, minimalista (Danny eligió el boceto A, 19:47: «mucho ruido de texto… la mitad de la pantalla en el móvil
   se pierde… solo leo "Tu esencia" y me pongo a ver los perfumes»): la frase y UNA fila de filtros; fuera la cinta de notas de arriba y
   la línea «40 perfumes · ordenados…» (se queda para lectores de pantalla). El 1.er perfume empezaba a 458 de 844 px. ═══ */
html[data-version="mosaico"] .cinta { display: none; }
html[data-version="mosaico"] .vitrina-cat { padding-top: 0; }
html[data-version="mosaico"] #contador { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-version="mosaico"] .mando { margin: 12px 0 14px; }
html[data-version="mosaico"] .mando-dentro { flex-wrap: nowrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
html[data-version="mosaico"] .publico { flex: 1 1 auto; min-width: 0; }
html[data-version="mosaico"] .publico button { height: 34px; font-size: 13px; padding: 0 6px; }
html[data-version="mosaico"] .orden { flex: none; gap: 8px; }
/* ordenar = un icono ⇅ (el desplegable sigue ahí, invisible encima: al tocarlo abre las mismas opciones) */
html[data-version="mosaico"] .orden-sel { position: relative; flex: none; width: 42px; height: 42px; padding: 0; gap: 0; justify-content: center; }
html[data-version="mosaico"] .orden-sel span { display: none; }
html[data-version="mosaico"] .orden-sel select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; color: transparent; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eae5e0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v15M4 8l4-4 4 4M16 20V5M12 16l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 18px; }
/* ═══ LA PORTADA DE LA TIENDA (Danny, 19:56 y 20:10): «Tu esencia, en un frasco» sobre la imagen de la esencia cayendo en un frasco.
   2.ª vuelta: «el marco no va, se siente como algo encima, no parte de la web» → DE LADO A LADO, sin borde ni esquinas, y abajo se funde
   con la página · «más detalles de fondo… el texto con algo difuminado atrás» → la foto llena toda la portada (v2, con mármol, luces y
   humo) y la frase va sobre una NUBE oscura difuminada · el movimiento lo dará un VÍDEO real (cuando exista, sustituye a la foto). ═══ */
/* (su alto sale del de la pantalla MEDIDO AL CARGAR, --alto: con «vh», al esconder el navegador su barra crecía y todo lo de debajo
   saltaba 40 px — Danny, 26-oct: «cuando scrolleo se mueve la web») */
.vitrina-cat .pt { position: relative; overflow: hidden; height: clamp(320px, calc(var(--alto, 100svh) * .5), 460px); margin: 0 0 8px; background: #070504; }
.pt-img, .pt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.pt-img { animation: pt-acerca 18s ease-in-out infinite alternate; transform-origin: 62% 55%; }
@keyframes pt-acerca { from { transform: scale(1.02); } to { transform: scale(1.08); } }
/* abajo se funde con la página (que no parezca una tarjeta encima) y arriba, un velo suave bajo la cabecera */
.pt::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 55%, transparent) 0%, transparent 22%, transparent 62%, var(--fondo) 100%); }
.pt-texto { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; display: flex; align-items: center; max-width: 62%; padding: 0 26px; }
/* la NUBE difuminada detrás de la frase: se lee sin tapar el detalle de la foto */
.pt-texto::before { content: ""; position: absolute; z-index: -1; left: -14%; right: -18%; top: 22%; bottom: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 3, 2, .78), rgba(4, 3, 2, .45) 55%, transparent); filter: blur(14px); }
/* 19-oct, Danny: «el título lo veo muy pobre». Heredaba la letra FINA del texto (Jost 300, cursiva falsa): ahora habla el idioma
   del LOGO (la letra de títulos de la versión, Bodoni en «Editorial») y la cursiva es de verdad, en ámbar con un brillo dorado */
#vitrina-cat .pt-texto h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 6.8vw, 64px); line-height: 1.02;
  letter-spacing: -.015em; color: #f6ead8; text-shadow: 0 2px 22px rgba(0, 0, 0, .7); }
#vitrina-cat .pt-texto h2 em { display: inline-block; font-family: var(--serif); font-style: italic; padding-right: .06em; color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #fbe6c4 6%, #f0b46c 52%, #c7802f 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .65)); }
@media (max-width: 599px) { .vitrina-cat .pt { height: clamp(300px, calc(var(--alto, 100svh) * .46), 400px); } .pt-texto { max-width: 74%; padding: 0 18px; }
  #vitrina-cat .pt-texto h2 { font-size: clamp(34px, 9.4vw, 46px); }
  /* en el móvil la frase caía ENCIMA del frasco (la cursiva ámbar se perdía en el cristal): baja al mármol oscuro y el frasco se aparta a la derecha */
  .pt-texto { align-items: flex-end; padding-bottom: 26px; }
  .pt-texto::before { top: 38%; bottom: -4%; }
  .pt-img, .pt-video { object-position: 40% 50%; } }
/* ═══ PC (17-oct, Danny: «en PC se ve raro, muy grande» → eligió «C · entero y centrado»): en una franja tan ancha, «cover»
   ampliaba el vídeo al doble y solo se veía su 40 % central (el frasco, gigante). En PC el vídeo va ENTERO (16:9 a la altura de
   la franja) y centrado; detrás, la misma imagen ampliada, difuminada y oscura («modo ambiente»), y los lados del vídeo se funden
   con ella (sin marco: lo rechazó). La frase, sobre el humo de su izquierda (el juez: el frasco empieza en el 46 % del ancho). ═══ */
.pt-fondo { display: none; }
@media (min-width: 900px) {
  .vitrina-cat .pt { --h: clamp(420px, calc(var(--alto, 100svh) * .62), 600px); height: var(--h); }
  /* 2.ª vuelta (juez 7,5 / 6): el fundido de ~65 px CORTABA el candelabro de la derecha (brillo 100 → 30 en ese tramo) → fundido
     ancho y en curva (izquierda 14 %, derecha 22 %) y el fondo más luminoso, para que el paso de detalle a bruma no se adivine */
  .pt-fondo { display: block; position: absolute; inset: -90px; background: 50% 50% / cover no-repeat; filter: blur(64px) brightness(.58) saturate(1.2); }
  .pt-img, .pt-video { left: 50%; right: auto; width: min(100%, calc(var(--h) * 16 / 9)); transform: translateX(-50%); object-position: 50% 50%;
    --mascara: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 5%, rgba(0, 0, 0, .8) 10%, #000 14%, #000 78%, rgba(0, 0, 0, .82) 84%, rgba(0, 0, 0, .45) 92%, transparent 100%);
    -webkit-mask-image: var(--mascara); mask-image: var(--mascara); }
  .pt-img { animation: none; }   /* su acercamiento lento usa transform y descentraría la foto de reserva */
  .pt-texto { left: max(0px, calc(50% - min(50%, var(--h) * 8 / 9))); padding: 0 0 0 clamp(36px, 4vw, 64px); max-width: calc(min(100%, var(--h) * 16 / 9) * .42); }
}
/* pantallas muy anchas (la suya, 2560): con 600 px de alto el vídeo era el 40 % del ancho y «flotaba» → algo más alta (≈50 %) y la frase, mayor */
@media (min-width: 1800px) { .vitrina-cat .pt { --h: clamp(420px, calc(var(--alto, 100svh) * .62), 720px); } #vitrina-cat .pt-texto h2 { font-size: clamp(30px, 3vw, 76px); } }
@media (prefers-reduced-motion: reduce) { .pt-img { animation: none; } }
@media (prefers-reduced-motion: reduce) { .pt-img, .pt::before { animation: none; } }