/* ============================================================
   KODESH L'ESSENCE
   Paleta: marfil y dorado mostaza (tomada de tu tema de Shopify)
   Hero: partido en dos, texto a la izquierda, imagen a sangre
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --ivory:   #fbfaf8;   /* fondo general: casi blanco, ligeramente cálido */
  --ivory-2: #efeeeb;   /* lienzo de las fotos: gris muy claro y neutro */
  --ivory-3: #e6e4e0;
  --ink:     #342e22;   /* marrón cálido, nunca negro puro */
  --ink-2:   #6a6050;
  --ink-3:   #9c917c;
  --line:    #e4e1da;
  --gold:    #b2912f;   /* mostaza: títulos y acentos */
  --gold-2:  #d4b95e;
  --espresso:#241d14;   /* panel oscuro del hero */
  --green:   #1f7a4d;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif:'Cormorant Garamond', Georgia, serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --wrap: 1360px;
  --nav-h: 116px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.1; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- 3. CSS DEFENSIVO (obligatorio) ---------- */
.reveal[data-split]{ opacity:1 !important; transform:none !important; }
.no-js .reveal{ opacity:1 !important; transform:none !important; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s }
.reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s }

/* ---------- 4. CINTA ---------- */
.ticker{
  background:var(--ink); color:var(--ivory); overflow:hidden;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  height:34px; display:flex; align-items:center;
}
.ticker-track{ display:flex; gap:56px; white-space:nowrap; animation:tick 34s linear infinite; padding-left:56px; }
.ticker span{ opacity:.85; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---------- 5. CABECERA ---------- */
.hdr{ position:sticky; top:0; z-index:900; background:var(--ivory); border-bottom:1px solid var(--line); }
.hdr-main{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:20px; padding:15px clamp(18px,4vw,48px); max-width:var(--wrap); margin:0 auto;
}
.hdr-logo{ display:flex; align-items:center; gap:11px; justify-self:center; }
.hdr-logo img{ width:30px; }
.hdr-logo b{ font-family:var(--serif); font-size:23px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.hdr-logo b i{ font-style:normal; color:var(--gold); }
.hdr-search{ display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:2px; padding:9px 14px; max-width:280px; background:rgba(255,255,255,.5); transition:border-color .3s; }
.hdr-search:focus-within{ border-color:var(--gold); }
.hdr-search input{ flex:1; border:0; outline:none; background:none; font:inherit; font-size:13.5px; min-width:0; color:var(--ink); }
.hdr-search input::placeholder{ color:var(--ink-3); }
.hdr-acc{ display:flex; align-items:center; gap:8px; justify-self:end; }
.icobtn{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:2px; transition:all .3s var(--ease); font-size:14px; }
.icobtn:hover{ background:var(--gold); color:var(--ivory); border-color:var(--gold); }
.icobtn.wa:hover{ background:var(--green); border-color:var(--green); }

.hdr-nav{ border-top:1px solid var(--line); }
.hdr-nav ul{ display:flex; justify-content:center; gap:clamp(14px,2.4vw,34px); list-style:none; margin:0; padding:0 clamp(18px,4vw,48px); overflow-x:auto; scrollbar-width:none; }
.hdr-nav ul::-webkit-scrollbar{ display:none; }
.hdr-nav a{ display:block; padding:13px 0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; border-bottom:2px solid transparent; transition:all .3s; }
.hdr-nav a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* ============================================================
   6. HERO
   Centrado, limpio y con el logo como protagonista.
   ============================================================ */
.hero{
  position:relative; min-height:clamp(560px,88vh,820px);
  display:grid; place-items:center; text-align:center;
  background:var(--ivory); overflow:hidden; border-bottom:1px solid var(--line);
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--shot,none) center/cover no-repeat; opacity:.9;
}
.hero::after{
  content:''; position:absolute; z-index:1;
  left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(92vw,780px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(212,185,94,.28) 0%, rgba(178,145,47,.08) 42%, transparent 68%);
  filter:blur(14px); animation:respira 9s ease-in-out infinite alternate;
}
@keyframes respira{ to{ transform:translate(-50%,-50%) scale(1.13); opacity:.72; } }
.hero .wrap{ position:relative; z-index:2; padding-top:64px; padding-bottom:64px; }

/* El logo, grande */
.hero-mark{
  width:clamp(120px,17vw,208px); margin:0 auto clamp(24px,3.4vw,40px);
  filter:drop-shadow(0 8px 26px rgba(178,145,47,.28));
}

/* El nombre, en el centro */
.hero-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,7.4vw,104px); line-height:.94;
  letter-spacing:.02em; text-transform:uppercase; margin-bottom:6px; text-wrap:balance;
}
.hero-name em{ display:block; font-style:italic; text-transform:none; color:var(--gold); font-size:.86em; letter-spacing:0; }

.hero-rule{ width:58px; height:1px; background:var(--gold); margin:clamp(24px,3vw,36px) auto; }
.hero-desc{ font-size:16px; line-height:1.7; color:var(--ink-2); max-width:56ch; margin:0 auto clamp(30px,4vw,42px); }

/* Frase principal: la misma familia serif del título, un peldaño
   más pequeña, en el marrón cálido de los textos de cuerpo. */
.hero-frase{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(19px,2.3vw,27px); line-height:1.4; color:var(--ink);
  max-width:34ch; margin:0 auto 12px;
}
/* Lema: tres golpes cortos, en versalitas espaciadas y en dorado,
   para que se lea como una firma y no como una frase más. */
.hero-lema{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  font-size:12.5px; letter-spacing:.34em; color:var(--gold);
  margin:0 auto clamp(30px,4vw,42px);
}
@media (max-width:560px){
  .hero-lema{ letter-spacing:.22em; }
}
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* sello giratorio, esquina inferior */
.seal{
  position:absolute; z-index:4; right:clamp(18px,4vw,54px); bottom:clamp(18px,4vw,44px);
  width:clamp(84px,9vw,116px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; pointer-events:none;
}
.seal svg{ width:100%; height:100%; animation:girar 24s linear infinite; }
.seal text{ font-family:var(--sans); font-size:8.2px; letter-spacing:.26em; text-transform:uppercase; fill:var(--gold); }
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .seal svg{ animation:none; } .hero::after{ animation:none; } }

/* ============================================================
   6b. VENTANA DE CORREO
   ============================================================ */
.news{
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center; padding:20px;
  background:rgba(36,29,20,.5); backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.news.on{ opacity:1; visibility:visible; }
.news-box{
  position:relative; width:min(440px,100%);
  background:var(--ivory); border:1px solid var(--line); border-radius:4px;
  padding:clamp(30px,5vw,44px) clamp(24px,4vw,38px);
  text-align:center; box-shadow:0 22px 60px rgba(36,29,20,.28);
  transform:translateY(18px) scale(.97); transition:transform .5s var(--ease);
}
.news.on .news-box{ transform:none; }
.news-x{
  position:absolute; top:11px; right:11px; width:34px; height:34px;
  display:grid; place-items:center; color:var(--ink-3); border-radius:2px; transition:all .3s;
}
.news-x:hover{ background:var(--ivory-2); color:var(--ink); }
.news-box img{ width:64px; margin:0 auto 18px; }
.news-box .eye{ font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.news-box h3{ font-family:var(--serif); font-size:clamp(26px,4vw,34px); margin-bottom:12px; }
.news-box p{ font-size:14px; color:var(--ink-2); margin:0 0 22px; }
.news-form{ display:flex; flex-direction:column; gap:10px; }
.news-form input{
  border:1px solid var(--line); border-radius:2px; background:#fff;
  padding:14px 16px; font:inherit; font-size:14.5px; color:var(--ink);
  outline:none; transition:border-color .3s; text-align:center;
}
.news-form input:focus{ border-color:var(--gold); }
.news-form input::placeholder{ color:var(--ink-3); }
.news-msg{ font-size:12.5px; min-height:18px; margin:4px 0 0; }
.news-msg.err{ color:#a33; } .news-msg.ok{ color:var(--green); }
.news-no{ margin-top:14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); transition:color .3s; }
.news-no:hover{ color:var(--ink); }
.news-legal{ margin-top:16px; font-size:10.5px; color:var(--ink-3); line-height:1.5; }

/* ---------- 7. BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 32px; border:1px solid var(--ink); border-radius:2px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  transition:all .35s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--ivory); }
.btn-solid{ background:var(--ink); color:var(--ivory); }
.btn-solid:hover{ background:var(--gold); border-color:var(--gold); }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--ivory); }
.btn-gold:hover{ background:var(--ink); border-color:var(--ink); }
.btn-wa{ background:var(--green); border-color:var(--green); color:#fff; }
.btn-wa:hover{ background:#166b41; border-color:#166b41; }
.btn-sm{ padding:11px 20px; font-size:9.5px; }

/* ---------- 8. SECCIONES ---------- */
.sec{ padding:clamp(50px,6.8vw,88px) 0; }
.sec.alt{ background:var(--ivory-2); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(24px,3.4vw,40px); }
.sec-head h2{ font-family:var(--serif); font-size:clamp(28px,3.8vw,44px); color:var(--gold); font-weight:400; }
.sec-head .lnk{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); border-bottom:1px solid var(--line); padding-bottom:3px; transition:all .3s; }
.sec-head .lnk:hover{ color:var(--gold); border-bottom-color:var(--gold); }
.sec-title-c{ text-align:center; margin-bottom:clamp(28px,4vw,46px); }
.sec-title-c .eye{ font-size:10.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.sec-title-c h2{ font-family:var(--serif); font-size:clamp(30px,4.4vw,52px); font-weight:400; }
.sec-title-c p{ color:var(--ink-2); max-width:56ch; margin:14px auto 0; }

/* ---------- 9. TIRA HORIZONTAL ---------- */
.rail-wrap{ position:relative; }
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(212px,1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:4px 0; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; }
.rail-nav{ position:absolute; top:36%; z-index:5; width:42px; height:42px; border-radius:50%; background:var(--ivory); color:var(--ink); border:1px solid var(--line); display:grid; place-items:center; box-shadow:0 3px 14px rgba(52,46,34,.1); transition:all .3s var(--ease); font-size:15px; }
.rail-nav:hover{ background:var(--gold); color:var(--ivory); border-color:var(--gold); }
.rail-nav[disabled]{ opacity:0; pointer-events:none; }
.rail-nav.prev{ left:-16px; } .rail-nav.next{ right:-16px; }

/* ---------- 10. FICHA DE PRODUCTO (caja, como tu Shopify) ---------- */
.pc{
  background:var(--ivory); border:1px solid var(--line); border-radius:3px;
  display:flex; flex-direction:column; text-align:center; position:relative;
  overflow:hidden;
  transition:border-color .55s var(--ease), box-shadow .55s var(--ease), transform .55s var(--ease);
}
.pc:hover{ border-color:var(--gold-2); box-shadow:0 10px 34px rgba(52,46,34,.09); transform:translateY(-2px); }
.pc-media{ position:relative; aspect-ratio:1/1; background:var(--ivory-2); display:grid; place-items:center; overflow:hidden; }
.pc-media img{
  width:100%; height:100%; object-fit:contain; padding:11%;
  transition:transform .7s var(--ease); mix-blend-mode:normal;
}
/* Tomas de ambiente: llenan la tarjeta, sin margen ni multiply */
.pc-media img.amb{ object-fit:cover; padding:0; mix-blend-mode:normal; }
.pc:hover .pc-media img{ transform:scale(1.06); }
.pc-media svg{ width:46%; max-width:114px; transition:transform .7s var(--ease); }
.pc:hover .pc-media svg{ transform:translateY(-5px); }
.pc-flag{ position:absolute; top:10px; left:10px; z-index:2; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; background:var(--gold); color:var(--ivory); padding:5px 10px; border-radius:2px; }
.pc-quick{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2; opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.pc:hover .pc-quick{ opacity:1; transform:none; }
.pc-quick .btn{ width:100%; background:var(--ivory); }
.pc-quick .btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--ivory); }
.pc-body{ padding:18px 14px 22px; display:flex; flex-direction:column; flex:1; }
.pc-brand{ font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.pc-name{
  font-family:var(--serif); font-size:22px; font-weight:400; line-height:1.18;
  margin-bottom:9px; flex:1; letter-spacing:.005em;
  text-wrap:balance;              /* evita nombres largos con una palabra sola abajo */
}
.pc-fam{ font-size:11px; color:var(--ink-3); }
.pc-fam b{ font-weight:400; color:var(--gold); }

/* ---------- 11. AZULEJOS DE FAMILIA ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.tile{
  position:relative; min-height:224px; padding:26px 22px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--ivory); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; transition:border-color .4s var(--ease);
}
.tile:hover{ border-color:var(--gold-2); }
.tile::before{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 20%, var(--tint,rgba(178,145,47,.18)) 0%, transparent 66%); transition:transform .7s var(--ease); }
.tile:hover::before{ transform:scale(1.22); }
.tile > *{ position:relative; z-index:1; }
.tile h3{ font-family:var(--serif); font-size:27px; margin-bottom:8px; }
.tile p{ font-size:12.5px; color:var(--ink-3); line-height:1.55; margin:0 0 12px; }
.tile .go{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* ---------- 12. MARCAS ---------- */
.brands{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.brand-c{ background:var(--ivory); border:1px solid var(--line); border-radius:3px; padding:24px 14px; text-align:center; transition:all .4s var(--ease); }
.brand-c:hover{ border-color:var(--gold-2); background:var(--ivory-2); }
.brand-c b{ display:block; font-family:var(--serif); font-size:21px; font-weight:400; margin-bottom:6px; }
.brand-c span{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- 13. CATÁLOGO ---------- */
/* El buscador va DENTRO de la página, no fijo arriba:
   se desplaza con el contenido y no roba pantalla. */
.cat-bar{ padding:0 0 4px; }
.cat-row{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.fld{ position:relative; border:1px solid var(--line); border-radius:2px; background:rgba(255,255,255,.45); padding:8px 28px 8px 12px; min-width:0; flex:0 1 auto; transition:border-color .3s; }
.fld:focus-within{ border-color:var(--gold); }
.fld label{ position:absolute; top:-7px; left:8px; background:var(--ivory); padding:0 5px; font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.fld select,.fld input{ width:100%; border:0; outline:none; background:none; font:inherit; font-size:13px; color:var(--ink); appearance:none; cursor:pointer; }
.fld.s{ flex:1 1 190px; min-width:150px; } .fld.s input{ cursor:text; }
.fld::after{ content:''; position:absolute; right:12px; top:50%; width:6px; height:6px; border-right:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.fld.s::after{ display:none; }
.cat-info{ margin-top:14px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.cat-info b{ color:var(--gold); font-weight:400; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); gap:16px; padding-top:22px; }
.empty{ grid-column:1/-1; text-align:center; padding:88px 20px; color:var(--ink-3); }
.empty h3{ font-family:var(--serif); font-size:32px; color:var(--ink); margin-bottom:10px; }
.more{ display:grid; place-items:center; padding:44px 0 80px; }

/* ---------- 14. FICHA LATERAL ---------- */
.ov{ position:fixed; inset:0; z-index:1000; background:rgba(36,29,20,.42); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:all .45s var(--ease); }
.ov.on{ opacity:1; visibility:visible; }
.dw{ position:fixed; top:0; right:0; bottom:0; z-index:1001; width:min(520px,100vw); background:var(--ivory); transform:translateX(100%); transition:transform .55s var(--ease); overflow-y:auto; overscroll-behavior:contain; }
.dw.on{ transform:none; }
.dw-x{ position:absolute; top:15px; right:15px; z-index:3; width:38px; height:38px; border:1px solid var(--line); border-radius:2px; display:grid; place-items:center; background:var(--ivory); transition:all .3s; }
.dw-x:hover{ background:var(--gold); color:var(--ivory); border-color:var(--gold); }
.dw-media{ aspect-ratio:1/1; background:var(--ivory-2); display:grid; place-items:center; border-bottom:1px solid var(--line); }
.dw-media img{ width:100%; height:100%; object-fit:contain; padding:9%; mix-blend-mode:normal; }
.dw-media svg{ width:34%; }
.dw-in{ padding:30px clamp(20px,5vw,38px) 44px; }
.dw-brand{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:11px; }
.dw-in h2{ font-family:var(--serif); font-size:clamp(30px,4vw,42px); font-weight:400; margin-bottom:14px; }
.dw-d{ font-family:var(--serif); font-size:19px; font-style:italic; line-height:1.5; color:var(--ink-2); margin-bottom:22px; }
/* Antes eran tres recuadros con borde; quedaban como pegatinas.
   Ahora una sola linea fina, separada por puntos dorados. */
.dw-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 8px;
  margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.dw-meta span + span::before{ content:'·'; color:var(--gold); margin-right:8px; }
.dw-meta .dw-top{ color:var(--gold); }

/* --- Ficha técnica: barras fijas, no interactivas.
   Es una valoración editorial nuestra, nunca "votos" inventados. --- */
/* OJO: esta clase se llamaba .ft y chocaba con el PIE DE PAGINA,
   que tambien usa .ft y tiene fondo oscuro a ancho completo. Por eso
   la ficha tecnica salia como un recuadro marron pegado encima. */
.tec{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.tec-row{ display:flex; align-items:center; gap:12px; min-width:0; }
.tec-lb{ flex:0 0 58px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.tec-bar{ flex:1 1 auto; min-width:40px; height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.tec-fill{ display:block; height:100%; background:var(--gold); border-radius:2px; }
.tec-vl{ flex:0 0 auto; font-size:12px; color:var(--ink-2); white-space:nowrap; }

/* --- "Se parece a": solo aparece si hay comparación verificada --- */
.cmp{ border-top:1px solid var(--line); padding-top:22px; margin-bottom:28px; }
.cmp-lb{ font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.cmp-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cmp-chip{
  display:inline-flex; flex-direction:column; gap:2px;
  font-size:13px; color:var(--ink); border:1px solid var(--line);
  border-radius:2px; padding:9px 14px; background:var(--ivory-2);
  transition:border-color .3s var(--ease);
}
.cmp-chip:hover{ border-color:var(--gold-2); }
.cmp-chip i{ font-style:normal; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cmp-legal{ font-size:10px; color:var(--ink-3); line-height:1.5; margin:0; }

/* ---------- 15c. CUÁNDO LLEVARLO / OCASIONES ---------- */
.wtw{ border-top:1px solid var(--line); padding-top:22px; margin-bottom:26px; }
.wtw-h{ font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.wtw-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:12px 10px; }
.wtw-c{ text-align:center; }
/* Emojis del sistema: se ven a todo color, así que no llevan
   color heredado. Tamaño algo mayor para que respiren. */
.wtw-ic{
  display:block; font-size:21px; margin-bottom:6px; line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.wtw-c[data-n="0"] .wtw-ic{ filter:grayscale(1); opacity:.45; }
.wtw-nm{ display:block; font-size:11px; color:var(--ink); margin-bottom:6px; }
.wtw-bar{ display:block; height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:5px; }
.wtw-bar i{ display:block; height:100%; background:var(--gold); border-radius:2px; }
.wtw-vl{ display:block; font-size:9.5px; color:var(--ink-3); }
/* atenuado cuando no encaja, resaltado cuando es el momento ideal */
.wtw-c[data-n="0"] .wtw-nm{ opacity:.45; }
.wtw-c[data-n="0"] .wtw-vl{ color:#a86a5c; }
.wtw-c[data-n="2"] .wtw-vl{ color:var(--gold); }
.wtw-c[data-n="2"] .wtw-nm{ font-weight:500; }
.wtw-nota{ font-size:10px; color:var(--ink-3); margin:14px 0 0; line-height:1.5; }

/* ---------- 15d. TABLA COMPARATIVA ---------- */
.cmpt{ border-top:1px solid var(--line); padding-top:22px; margin-bottom:26px; }
.cmpt-h{ font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.cmpt-scroll{ overflow-x:auto; scrollbar-width:thin; }
.cmpt-t{ border-collapse:collapse; width:100%; min-width:430px; }
.cmpt-t th{ text-align:left; font-weight:400; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); padding:10px 8px 10px 0; white-space:nowrap; }
.cmpt-t td{ padding:10px 8px; font-size:12.5px; color:var(--ink); vertical-align:top;
  border-top:1px solid var(--line); text-align:center; }
.cmpt-t thead td{ border-top:0; padding-bottom:14px; }
.cmpt-t td.es-este{ background:var(--ivory-2); }
.cmpt-p{ display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; }
.cmpt-md{ width:52px; height:52px; border-radius:3px; overflow:hidden; background:var(--ivory-2);
  display:grid; place-items:center; }
.cmpt-md img{ width:100%; height:100%; object-fit:contain; padding:8%; mix-blend-mode:normal; }
.cmpt-md svg{ width:60%; }
.cmpt-p b{ font-size:11.5px; font-weight:500; line-height:1.2; }
.cmpt-p i{ font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.cmpt-p:hover b{ color:var(--gold); }

/* ---------- 15e. RELACIONADOS (tiras horizontales) ---------- */
.rel{ border-top:1px solid var(--line); padding-top:22px; margin-bottom:26px; }
.rel-h{ font-family:var(--serif); font-size:21px; color:var(--ink); margin-bottom:16px; position:relative; padding-right:70px; }
.rel-h span{ display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.rel-todo{ position:absolute; right:0; bottom:3px; font-family:var(--sans); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rel-todo:hover{ color:var(--gold); }
.rel-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(104px,1fr);
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; }
.rel-row::-webkit-scrollbar{ display:none; }
.mini{ scroll-snap-align:start; text-align:center; display:flex; flex-direction:column; gap:7px; }
.mini-md{ aspect-ratio:1/1; background:var(--ivory-2); border:1px solid var(--line); border-radius:3px;
  display:grid; place-items:center; overflow:hidden; transition:border-color .35s var(--ease); }
.mini:hover .mini-md{ border-color:var(--gold-2); }
.mini-md img{ width:100%; height:100%; object-fit:contain; padding:10%; mix-blend-mode:normal;
  transition:transform .5s var(--ease); }
.mini-md img.amb, .cmpt-md img.amb, .cmpfull-md img.amb, .cmp-mini img.amb{
  object-fit:cover; padding:0; mix-blend-mode:normal;
}
.mini:hover .mini-md img{ transform:scale(1.06); }
.mini-md svg{ width:52%; }
.mini-mk{ font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.mini-nm{ font-size:11.5px; line-height:1.25; color:var(--ink); }
.mini:hover .mini-nm{ color:var(--gold); }

/* ---------- 15b. VALORACIONES Y RESEÑAS ---------- */
.rs{ border-top:1px solid var(--line); padding-top:22px; margin-bottom:28px; }
.rs-st{ color:var(--gold-2); letter-spacing:2px; font-size:14px; }
.rs-resumen{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.rs-resumen b{ font-size:15px; font-weight:600; }
.rs-resumen span{ font-size:12px; color:var(--ink-3); }
.rs-vacio{ font-size:13px; color:var(--ink-3); margin:0 0 16px; }
.rs-lista{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.rs-item{ border:1px solid var(--line); border-radius:3px; padding:14px 16px; }
.rs-item p{ font-size:13.5px; color:var(--ink); margin:8px 0 8px; line-height:1.5; }
.rs-item cite{ font-style:normal; font-size:11px; color:var(--ink-3); }
.rs-pendiente{ border-style:dashed; background:var(--ivory-2); }
.rs-pendiente cite b{ color:var(--gold); font-weight:600; }
.rs-gracias{ font-size:13.5px; color:var(--ink-2); background:var(--ivory-2); border-radius:3px; padding:14px 16px; margin:0 0 12px; }

.rs-form{ border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:9px; }
.rs-pick{ display:flex; gap:4px; }
.rs-pick button{ font-size:22px; line-height:1; color:var(--gold-2); padding:2px; transition:transform .2s; }
.rs-pick button:hover{ transform:scale(1.15); }
.rs-tx,.rs-nm{
  border:1px solid var(--line); border-radius:2px; background:#fff;
  padding:10px 12px; font:inherit; font-size:13.5px; color:var(--ink);
  outline:none; transition:border-color .3s; resize:vertical;
}
.rs-tx:focus,.rs-nm:focus{ border-color:var(--gold); }
.rs-msg{ font-size:12px; min-height:16px; margin:0; }
.rs-msg.err{ color:#a33; }
/* --- Pirámide olfativa, como la lámina de referencia ---
   Título corto y centrado ("Salida", "Secado", "Fondo"), y cada
   ingrediente con su medallón arriba y el nombre en cursiva
   debajo. La foto no lleva borde propio: ya trae su anillo
   dorado, y ponerle otro encima duplicaba el círculo. */
.pyr{ border-top:1px solid var(--line); padding-top:30px; margin-bottom:30px; }
.pyr-g{ text-align:center; margin-bottom:32px; }
.pyr-g:last-child{ margin-bottom:0; }
.pyr-tag{
  display:inline-block; font-family:var(--serif); font-weight:600;
  font-size:19px; color:var(--ink); letter-spacing:.02em;
  padding-bottom:6px; margin-bottom:20px;
  border-bottom:1.5px solid var(--gold);
}
.pyr-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px clamp(14px,3.5vw,26px); }

.ing{ display:flex; flex-direction:column; align-items:center; gap:9px; width:72px; }
.ing-c{
  width:72px; height:72px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--ivory-2);
  display:grid; place-items:center; overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
/* El anillo dorado lo dibuja el CSS, no la foto. Así encaja
   al píxel a cualquier tamaño y nunca sale cortado. */
.ing-c.foto{ border-color:var(--gold-2); background:var(--ivory-2); }
.ing:hover .ing-c{ transform:translateY(-3px); }
.ing:hover .ing-c{ border-color:var(--gold); }
.ing-c .nota-ico{ width:38px; height:38px; color:var(--gold); }
.ing-c .nota-img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  filter:var(--velo, sepia(.1) saturate(1.04));
  transition:filter .4s var(--ease);
}
.ing:hover .nota-img{ filter:none; }
.ing em{ font-style:italic; font-size:12.5px; color:var(--ink-2); line-height:1.2; }

.dw-acc{ display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line); padding-top:26px; }

/* ---------- 15. FRANJA DORADA ---------- */
.band{ background:var(--gold); color:var(--ivory); padding:clamp(40px,5.5vw,66px) 0; text-align:center; }
.band h2{ font-family:var(--serif); font-size:clamp(28px,4vw,44px); margin-bottom:12px; }
.band p{ margin:0 auto 26px; max-width:52ch; opacity:.9; font-size:15px; }
.band .btn{ border-color:var(--ivory); color:var(--ivory); }
.band .btn:hover{ background:var(--ivory); color:var(--gold); }

/* ---------- 16. OPINIONES ---------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.quote{ background:var(--ivory); border:1px solid var(--line); border-radius:3px; padding:32px 26px; }
.quote .st{ color:var(--gold-2); font-size:12px; letter-spacing:.24em; margin-bottom:14px; }
.quote p{ font-family:var(--serif); font-size:19px; line-height:1.45; margin:0 0 16px; }
.quote cite{ font-style:normal; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- 17. VÍDEOS ---------- */
.reels{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(194px,222px); gap:16px; overflow-x:auto; padding-bottom:14px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.reels::-webkit-scrollbar{ display:none; }
.reel{ position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--ivory-2); border:1px solid var(--line); border-radius:3px; scroll-snap-align:start; cursor:pointer; }
.reel img,.reel video{ width:100%; height:100%; object-fit:cover; }
.reel video{ position:absolute; inset:0; opacity:0; transition:opacity .4s; }
.reel.playing video{ opacity:1; }
.reel-p{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,rgba(36,29,20,0) 55%,rgba(36,29,20,.5) 100%); transition:opacity .4s; z-index:2; }
.reel.playing .reel-p{ opacity:0; pointer-events:none; }
.reel-p i{ font-style:normal; width:46px; height:46px; border-radius:50%; background:rgba(250,246,236,.92); color:var(--ink); display:grid; place-items:center; font-size:13px; transition:all .35s; }
.reel:hover .reel-p i{ background:var(--gold); color:var(--ivory); }

/* ---------- 18. HISTORIA ---------- */
.story{ display:grid; grid-template-columns:1fr 1fr; align-items:center; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.story-img{ background:var(--ivory-2); min-height:330px; display:grid; place-items:center; position:relative; }
.story-img::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%,rgba(212,185,94,.26) 0%,transparent 65%); }
.story-img img{ position:relative; width:min(42%,168px); }
.story-tx{ padding:clamp(30px,4.5vw,54px); }
.story-tx .eye{ font-size:10px; letter-spacing:.36em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.story-tx h2{ font-family:var(--serif); font-size:clamp(28px,3.6vw,42px); margin-bottom:18px; }
.story-tx p{ color:var(--ink-2); margin:0 0 24px; }

/* ---------- 18b. OPINIONES DE LA TIENDA (portada) ---------- */
.rs-tienda{ max-width:620px; margin:0 auto; text-align:left; }
.rs-tienda .rs-resumen{ justify-content:center; }
.rs-tienda .rs-vacio{ text-align:center; }

/* ---------- 19. PIE ---------- */
.ft{ background:var(--ink); color:var(--ivory); padding:54px 0 26px; }
.ft-grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:34px; padding-bottom:36px; border-bottom:1px solid rgba(250,246,236,.14); }
.ft-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ft-brand img{ width:32px; }
.ft-brand b{ font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; }
.ft-brand b i{ font-style:normal; color:var(--gold-2); }
.ft-col p{ font-size:13px; color:rgba(250,246,236,.62); margin:0 0 18px; max-width:36ch; }
.ft-col h4{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(250,246,236,.45); margin-bottom:16px; }
.ft-col ul{ list-style:none; margin:0; padding:0; }
.ft-col li{ margin-bottom:9px; }
.ft-col a{ font-size:13px; color:rgba(250,246,236,.8); transition:color .3s; }
.ft-col a:hover{ color:var(--gold-2); }
.ft-soc{ display:flex; gap:9px; }
.ft-soc a{ width:38px; height:38px; border:1px solid rgba(250,246,236,.22); border-radius:2px; display:grid; place-items:center; transition:all .3s; }
.ft-soc a:hover{ background:var(--gold-2); border-color:var(--gold-2); color:var(--ink); }
.ft-bot{ padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:11px; color:rgba(250,246,236,.45); }

/* ---------- 20. WHATSAPP FLOTANTE ---------- */
/* Círculo de WhatsApp, siempre visible abajo a la derecha */
.wafab{
  position:fixed; right:18px; bottom:18px; z-index:850;
  width:58px; height:58px; border-radius:50%;
  background:var(--green); color:#fff;
  display:grid; place-items:center; font-size:22px;
  box-shadow:0 6px 22px rgba(36,29,20,.26);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wafab:hover{ transform:scale(1.09); box-shadow:0 9px 28px rgba(31,122,77,.4); }
/* aro que late suave para que se vea sin molestar */
.wafab::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid var(--green); opacity:.5;
  animation:latido 2.8s var(--ease) infinite;
}
@keyframes latido{
  0%   { transform:scale(1);    opacity:.5; }
  70%  { transform:scale(1.28); opacity:0;  }
  100% { transform:scale(1.28); opacity:0;  }
}
@media (prefers-reduced-motion: reduce){ .wafab::after{ animation:none; } }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1000px){
  .story{ grid-template-columns:1fr; }
  .ft-grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:820px){
  :root{ --nav-h:104px; }
  .hero{ min-height:clamp(480px,80vh,640px); }
  .hdr-main{ grid-template-columns:1fr auto 1fr; }
  .hdr-search{ display:none; }
  .hdr-logo{ justify-self:center; }   /* el nombre, en el centro también en móvil */
  .rail-nav{ display:none; }
  .rail{ grid-auto-columns:minmax(158px,58vw); }
}
@media (max-width:600px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .hdr-logo b{ font-size:16px; } .hdr-logo img{ width:24px; }
  .pc-quick{ opacity:1; transform:none; }   /* en móvil no hay hover */
  .pc-name{ font-size:19px; }
  .ft-grid{ grid-template-columns:1fr; }
  .dw{ width:100%; }
  .tiles{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .ing, .ing-c{ width:72px; }
  .ing-c{ height:72px; }
  .ing-c .nota-ico{ width:45px; height:45px; }
  .ing em{ font-size:13.5px; }
  .pyr-g h4{ font-size:20px; }
  .brands{ grid-template-columns:repeat(2,1fr); gap:10px; }
}


/* ---------- 22. DETALLES DE ACABADO ---------- */
::selection{ background:var(--gold); color:var(--ivory); }
::-moz-selection{ background:var(--gold); color:var(--ivory); }

/* Foco visible y elegante para quien navega con teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:1px solid var(--gold); outline-offset:3px;
}

/* Barra de desplazamiento en tono marfil, no gris de sistema */
@supports (scrollbar-color: auto){
  html{ scrollbar-color: var(--line) var(--ivory); scrollbar-width: thin; }
}

/* El panel lateral entra con su propia sombra, se despega del fondo */
.dw{ box-shadow:-18px 0 50px rgba(36,29,20,.14); }

/* Las imágenes de producto nunca se estiran mientras cargan */
.pc-media img, .mini-md img, .cmpt-md img, .dw-media img{ background:transparent; }

/* Tipografía: cifras alineadas en tablas y fichas técnicas */
.cmpt-t, .tec-vl, .rs-resumen b{ font-variant-numeric: tabular-nums; }

/* ============================================================
   23. GALERÍA DE PRODUCTO
   ------------------------------------------------------------
   Sin columna de miniaturas: carrusel donde las imágenes
   vecinas asoman por los lados. El marco está normalizado
   (proporción fija + object-fit contain + margen interior),
   así un frasco alto y uno ancho ocupan el mismo hueco visual
   y ninguno se deforma ni se recorta.
   ============================================================ */
.gal{ position:relative; background:var(--ivory-2); border-bottom:1px solid var(--line); }

.gal-pista{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none;
  scroll-padding-inline:10%;
}
.gal-pista::-webkit-scrollbar{ display:none; }

/* Con una sola imagen ocupa todo. Con varias, deja asomar las vecinas. */
.gal-lam{ flex:0 0 100%; scroll-snap-align:center; cursor:zoom-in; }
.gal[data-total="2"] .gal-lam,
.gal[data-total="3"] .gal-lam,
.gal[data-total="4"] .gal-lam{ flex-basis:82%; }
.gal[data-total="2"] .gal-pista,
.gal[data-total="3"] .gal-pista,
.gal[data-total="4"] .gal-pista{ padding:0 9%; }

/* EL MARCO NORMALIZADO: misma proporción y mismo aire para todos */
/* DOS TRATAMIENTOS, según de dónde venga la foto:
   .rec  recorte sobre fondo claro -> se funde con el marfil
   .amb  toma de ambiente          -> llena el marco de borde a borde
   Así ninguna deja recuadro gris y las dos se ven intencionadas. */
.gal-marco{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; }
.gal-marco img{
  width:100%; height:100%; object-position:center;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
  user-select:none;
}
.gal-marco.rec{ padding:9%; }
.gal-marco.rec img{ object-fit:contain; mix-blend-mode:normal; }
.gal-marco.amb{ padding:0; background:var(--ivory-2); }
.gal-marco.amb img{ object-fit:cover; mix-blend-mode:normal; }
.gal-lam:hover .gal-marco img{ transform:scale(1.035); }
.gal-marco svg{ width:44%; max-width:150px; }
.gal-vacia .gal-marco{ background:var(--ivory-2); }

/* flechas: solo en pantalla grande, discretas */
.gal-fl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:rgba(250,246,236,.82); backdrop-filter:blur(6px);
  color:var(--ink); display:grid; place-items:center; font-size:17px;
  border:1px solid var(--line);
  transition:opacity .3s var(--ease), background .3s, transform .3s;
}
.gal-fl:hover{ background:var(--ivory); transform:translateY(-50%) scale(1.08); }
.gal-fl.prev{ left:10px; } .gal-fl.next{ right:10px; }
.gal-fl[disabled]{ opacity:0; pointer-events:none; }

/* posición: puntos y contador 1/4 */
.gal-puntos{ position:absolute; left:0; right:0; bottom:12px; z-index:3;
  display:flex; justify-content:center; gap:6px; }
.gal-puntos span{ width:5px; height:5px; border-radius:50%; background:var(--line);
  transition:all .35s var(--ease); }
.gal-puntos span.on{ background:var(--gold); width:16px; border-radius:3px; }
.gal-n{ position:absolute; right:12px; bottom:10px; z-index:3;
  font-size:10.5px; letter-spacing:.14em; color:var(--ink-3);
  background:rgba(250,246,236,.8); padding:3px 9px; border-radius:20px;
  font-variant-numeric:tabular-nums; }
.gal-n b{ color:var(--ink); font-weight:500; }

/* ---------- VISTA AMPLIADA ---------- */
.lupa{
  position:fixed; inset:0; z-index:2000; background:rgba(36,29,20,.94);
  display:grid; place-items:center; padding:clamp(16px,5vw,54px);
  opacity:0; transition:opacity .32s var(--ease);
}
.lupa.on{ opacity:1; }
.lupa-img{ max-width:min(1000px,92vw); max-height:82vh; display:grid; place-items:center; }
.lupa-img img{
  max-width:100%; max-height:82vh; object-fit:contain;
  transition:opacity .25s var(--ease);
  border-radius:3px; background:var(--ivory-2);
}
.lupa-x{
  position:absolute; top:18px; right:18px; z-index:3;
  width:42px; height:42px; border-radius:50%; color:var(--ivory);
  border:1px solid rgba(250,246,236,.28); display:grid; place-items:center;
  font-size:15px; transition:all .3s var(--ease);
}
.lupa-x:hover{ background:var(--ivory); color:var(--ink); }
.lupa-fl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; color:var(--ivory);
  border:1px solid rgba(250,246,236,.24); display:grid; place-items:center;
  font-size:22px; transition:all .3s var(--ease);
}
.lupa-fl:hover{ background:var(--ivory); color:var(--ink); }
.lupa-fl.prev{ left:clamp(10px,3vw,32px); } .lupa-fl.next{ right:clamp(10px,3vw,32px); }
.lupa-n{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:rgba(250,246,236,.6); font-size:11px; letter-spacing:.2em;
  font-variant-numeric:tabular-nums; }
.lupa-n b{ color:var(--ivory); }
.lupa-pie{ position:absolute; top:22px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:17px; color:rgba(250,246,236,.75);
  letter-spacing:.06em; }

/* ============================================================
   24. DESCRIPCIÓN EDITORIAL
   Separada por completo de las notas. Ancho de lectura
   controlado: nadie lee bien líneas de 120 caracteres.
   ============================================================ */
.desc{ border-top:1px solid var(--line); padding-top:24px; margin-bottom:28px; }
.desc-h{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px; }
.desc p{
  font-family:var(--serif); font-size:17.5px; line-height:1.72;
  color:var(--ink-2); margin:0 0 15px; max-width:62ch;
  text-wrap:pretty;
}
.desc p:last-child{ margin-bottom:0; }
.desc p::first-letter{ }

@media (max-width:600px){
  .gal[data-total="2"] .gal-lam,
  .gal[data-total="3"] .gal-lam,
  .gal[data-total="4"] .gal-lam{ flex-basis:88%; }
  .gal[data-total="2"] .gal-pista,
  .gal[data-total="3"] .gal-pista,
  .gal[data-total="4"] .gal-pista{ padding:0 6%; }
  .gal-fl{ display:none; }          /* en móvil se desliza con el dedo */
  .desc p{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
  .gal-marco img, .lupa, .lupa-img img{ transition:none; }
}


/* ============================================================
   25. ÍNDICE INTERACTIVO DE PORTADA
   ============================================================ */
.indice{ border-bottom:1px solid var(--line); background:var(--ivory); }
.indice ul{
  display:flex; justify-content:center; flex-wrap:wrap; gap:0;
  list-style:none; margin:0; padding:0;
}
.indice li{ position:relative; }
.indice li + li::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:12px; background:var(--line);
}
.indice a{
  display:block; padding:16px clamp(12px,2vw,26px);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); transition:color .3s var(--ease); position:relative;
}
.indice a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:10px; height:1px;
  background:var(--gold); transition:left .35s var(--ease), right .35s var(--ease);
}
.indice a:hover{ color:var(--gold); }
.indice a:hover::after{ left:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); }

/* ============================================================
   26. FILTROS AVANZADOS · FAVORITOS · COMPARADOR
   ============================================================ */
.cat-tgs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.tg{
  border:1px solid var(--line); border-radius:20px; padding:7px 16px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); background:rgba(255,255,255,.5);
  transition:all .3s var(--ease);
}
.tg:hover{ border-color:var(--gold-2); color:var(--ink); }
.tg.on{ background:var(--gold); border-color:var(--gold); color:#fff; }
.tg-x{ margin-left:auto; border-style:dashed; }

/* corazón de favorito en la tarjeta */
.pc-fav{
  position:absolute; top:8px; right:8px; z-index:3;
  width:32px; height:32px; border-radius:50%;
  background:rgba(250,246,236,.88); backdrop-filter:blur(4px);
  color:var(--ink-3); font-size:15px; line-height:1;
  display:grid; place-items:center;
  opacity:0; transform:scale(.85);
  transition:all .3s var(--ease);
}
.pc:hover .pc-fav{ opacity:1; transform:none; }
.pc-fav.on{ opacity:1; transform:none; color:#b3303c; }
.pc-fav:hover{ color:#b3303c; transform:scale(1.12); }
.pc-sold{
  position:absolute; top:8px; left:8px; z-index:2;
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink-3); color:#fff; padding:5px 10px; border-radius:2px;
}
.pc-flag.pc-new{ background:var(--green); }
.pc-corta{
  font-size:11.5px; color:var(--ink-3); line-height:1.45;
  margin:0 0 9px; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.pc-quick{ display:block; }
.pc-quick .btn{ width:100%; }

/* Comparar: icono discreto arriba a la izquierda, no una barra ancha */
.pc-cmp{
  position:absolute; top:8px; left:8px; z-index:3;
  width:32px; height:32px; border-radius:50%;
  background:rgba(250,246,236,.88); backdrop-filter:blur(4px);
  color:var(--ink-3); font-size:14px; line-height:1;
  display:grid; place-items:center;
  opacity:0; transform:scale(.85);
  transition:all .3s var(--ease);
}
.pc:hover .pc-cmp{ opacity:1; transform:none; }
.pc-cmp:hover{ color:var(--gold); transform:scale(1.12); }
.pc-cmp.on{ opacity:1; transform:none; background:var(--gold); color:#fff; }
/* Si hay bandera de "más vendido", el icono se mueve debajo */
.pc-flag ~ .pc-cmp{ top:40px; }

/* barra flotante del comparador */
.cmp-barra{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%,130%);
  z-index:900; display:flex; align-items:center; gap:12px;
  background:var(--ivory); border:1px solid var(--line); border-radius:40px;
  padding:9px 9px 9px 16px; box-shadow:0 10px 36px rgba(36,29,20,.16);
  transition:transform .45s var(--ease); max-width:calc(100vw - 32px);
}
.cmp-barra.on{ transform:translate(-50%,0); }
.cmp-items{ display:flex; }
.cmp-mini{
  width:34px; height:34px; border-radius:50%; overflow:hidden;
  border:2px solid var(--ivory); background:var(--ivory-2);
  display:grid; place-items:center; margin-left:-10px;
}
.cmp-mini:first-child{ margin-left:0; }
.cmp-mini img{ width:100%; height:100%; object-fit:contain; padding:10%; mix-blend-mode:normal; }
.cmp-mini svg{ width:56%; }
.cmp-txt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.cmp-x{ width:30px; height:30px; border-radius:50%; color:var(--ink-3); display:grid; place-items:center; font-size:12px; }
.cmp-x:hover{ background:var(--ivory-2); color:var(--ink); }

/* comparador a pantalla completa */
.cmpfull{
  position:fixed; inset:0; z-index:1500; background:rgba(36,29,20,.5);
  backdrop-filter:blur(5px); display:grid; place-items:center; padding:16px;
  opacity:0; transition:opacity .3s var(--ease);
}
.cmpfull.on{ opacity:1; }
.cmpfull-in{
  background:var(--ivory); border-radius:4px; width:min(1000px,100%);
  max-height:90vh; overflow:hidden; position:relative;
  padding:clamp(22px,4vw,38px);
  box-shadow:0 24px 70px rgba(36,29,20,.3);
}
.cmpfull-in h2{ font-family:var(--serif); font-size:clamp(26px,4vw,38px); margin-bottom:22px; }
.cmpfull-x{ position:absolute; top:14px; right:14px; width:38px; height:38px;
  border:1px solid var(--line); border-radius:2px; display:grid; place-items:center; }
.cmpfull-x:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.cmpfull-scroll{ overflow:auto; max-height:70vh; }
.cmpfull-t{ border-collapse:collapse; width:100%; min-width:520px; }
.cmpfull-t th{ text-align:left; font-weight:400; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); padding:11px 10px 11px 0; white-space:nowrap;
  position:sticky; left:0; background:var(--ivory); }
.cmpfull-t td{ padding:11px 10px; font-size:12.5px; border-top:1px solid var(--line);
  text-align:center; vertical-align:top; }
.cmpfull-t thead td{ border-top:0; padding-bottom:16px; }
.cmpfull-md{ display:grid; place-items:center; width:70px; height:70px; margin:0 auto 8px;
  background:var(--ivory-2); border-radius:3px; overflow:hidden; }
.cmpfull-md img{ width:100%; height:100%; object-fit:contain; padding:9%; mix-blend-mode:normal; }
.cmpfull-md svg{ width:58%; }
.cmpfull-t thead b{ display:block; font-size:12.5px; font-weight:500; }
.cmpfull-t thead i{ font-style:normal; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.cmpfull-t td.n2{ color:var(--gold); font-weight:500; }
.cmpfull-t td.n0{ color:var(--ink-3); opacity:.6; }

@media (max-width:600px){
  .indice a{ padding:13px 14px; font-size:10px; }
  .pc-fav{ opacity:1; transform:none; }
  .cmp-txt{ display:none; }
}

/* ============================================================
   27. VERSIÓN IMPRIMIBLE / PDF
   Al imprimir (o «Guardar como PDF») se limpia todo lo que
   no aporta en papel y el catálogo sale en dos columnas.
   ============================================================ */
@media print{
  .ticker, .hdr, .indice, .cat-bar, .cat-tgs, .wafab, .cmp-barra,
  .ov, .dw, .news, .rail-nav, .pc-quick, .pc-fav, .more, .ft{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .sec{ padding:12pt 0; }
  .grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10pt !important; }
  .pc{ break-inside:avoid; border:1px solid #ddd; }
  .pc-media{ background:#fff; }
  .hero{ min-height:auto; padding:20pt 0; }
  .reveal{ opacity:1 !important; transform:none !important; }
  a[href]::after{ content:''; }
  @page{ margin:14mm; }
}


/* ============================================================
   28. PULIDO FINAL
   ============================================================ */

/* Los botones de filtro se apelotonaban en móvil: ahora son
   una fila que se desliza, no un bloque de seis. */
@media (max-width:700px){
  .cat-tgs{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-left:calc(-1 * clamp(18px,4vw,48px));
    margin-right:calc(-1 * clamp(18px,4vw,48px));
    padding:0 clamp(18px,4vw,48px) 2px;
  }
  .cat-tgs::-webkit-scrollbar{ display:none; }
  .tg{ flex:0 0 auto; }
  .tg-x{ margin-left:0; }
}

/* La rejilla del catálogo, con más aire entre tarjeta y tarjeta */
.grid{ gap:18px; }
@media (min-width:1100px){ .grid{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); } }

/* La ficha entra con un desplazamiento muy corto, no de golpe */
.dw-in > *{ animation:subeFicha .5s var(--ease) both; }
.dw-in > *:nth-child(2){ animation-delay:.04s }
.dw-in > *:nth-child(3){ animation-delay:.08s }
.dw-in > *:nth-child(4){ animation-delay:.12s }
@keyframes subeFicha{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .dw-in > *{ animation:none } }

/* El nombre del perfume, sin viudas y con mejor partición */
.pc-name{ hyphens:auto; -webkit-hyphens:auto; }

/* El aro del botón de WhatsApp late solo al principio y para:
   un latido infinito acaba cansando. */
.wafab::after{ animation-iteration-count:6; }

/* Las fotos de ambiente, con un velo muy leve para que no
   compitan con el marfil de la página */
.pc-media img.amb{ filter:saturate(.96) brightness(1.02); }

/* Carga progresiva: mientras la imagen no está, el hueco tiene
   un latido suave en vez de quedarse en blanco */
.pc-media, .gal-marco{ background-image:linear-gradient(100deg,
  var(--ivory-2) 30%, rgba(255,255,255,.5) 50%, var(--ivory-2) 70%);
  background-size:200% 100%; animation:cargando 1.6s linear infinite; }
.pc-media:has(img[src]), .gal-marco:has(img[src]){ animation:none; background-image:none; }
@keyframes cargando{ to{ background-position:-200% 0 } }
@media (prefers-reduced-motion: reduce){ .pc-media, .gal-marco{ animation:none; background-image:none } }


/* <picture> envuelve al <img>: que no rompa la maquetación */
.pc-media picture, .gal-marco picture, .mini-md picture,
.cmpt-md picture, .cmpfull-md picture, .cmp-mini picture, .dw-media picture{
  display:contents;
}


/* ============================================================
   29. FOTOS CON TRANSPARENCIA
   Las fotos de producto se recortaron con canal alfa, así que
   el frasco se apoya directamente sobre el fondo de la página.
   Ya no hace falta ningún modo de fusión: el multiply que había
   antes era un apaño para fondos blancos y oscurecía los
   frascos oscuros.
   ============================================================ */
.pc-media img, .gal-marco img, .mini-md img,
.cmpt-md img, .cmpfull-md img, .cmp-mini img{
  mix-blend-mode:normal;
}

/* Sombra suave bajo el frasco: lo asienta en la página en vez
   de dejarlo flotando recortado */
.pc-media img:not(.amb){
  filter:drop-shadow(0 6px 14px rgba(52,46,34,.13));
}
.gal-marco.rec img{
  filter:drop-shadow(0 10px 26px rgba(52,46,34,.15));
}

/* Las de ambiente siguen llenando el marco, pero con las
   esquinas redondeadas y un filete, para que se lean como una
   fotografía intencionada y no como un recuadro pegado. */
.pc-media img.amb{
  border-radius:2px;
}
.gal-marco.amb img{ border-radius:3px; }


/* ============================================================
   30. REJILLA DE ESCAPARATE
   ------------------------------------------------------------
   Menos columnas y fotos mucho más grandes. Con tarjetas de
   230 px el frasco quedaba diminuto y el catálogo parecía un
   listado; a 3 columnas cada frasco se ve de verdad.

   Todas las tarjetas comparten EXACTAMENTE el mismo lienzo:
   misma proporción, mismo fondo, mismo margen interior. Da
   igual que la foto venga recortada o de ambiente, el hueco
   que ocupa es idéntico, y ahí está la uniformidad.
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:clamp(20px, 3vw, 44px);
}
@media (min-width:1500px){
  .grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:680px){
  .grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
}

/* La tarjeta pierde el marco: el protagonista es el frasco */
.pc{
  border:0; background:none; border-radius:0;
  box-shadow:none;
}
.pc:hover{ box-shadow:none; transform:none; border:0; }

/* EL LIENZO: idéntico en las 148 fichas */
.pc-media{
  aspect-ratio:1/1;
  background:var(--ivory-2);
  border-radius:2px;
  overflow:hidden;
  margin-bottom:18px;
  transition:background .4s var(--ease);
}
.pc:hover .pc-media{ background:#efe7d2; }
.pc-media img{
  width:100%; height:100%;
  object-fit:contain;
  padding:8%;
  transition:transform .8s var(--ease);
  mix-blend-mode:normal;
}
.pc:hover .pc-media img{ transform:scale(1.04); }
/* Las de ambiente llenan el lienzo, pero el lienzo es el mismo */
.pc-media img.amb{ object-fit:cover; padding:0; }

/* Texto centrado bajo la foto, como en una vitrina */
.pc-body{ text-align:center; padding:0 6px; }
.pc-brand{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
}
.pc-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(21px, 2.2vw, 29px);
  line-height:1.15; margin-bottom:10px; color:var(--ink);
}
.pc-corta{
  font-size:12.5px; line-height:1.5; color:var(--ink-3);
  max-width:34ch; margin:0 auto 10px;
}
.pc-fam{ font-size:11px; letter-spacing:.1em; color:var(--ink-3); }

/* Los iconos de favorito y comparar, más discretos sobre el lienzo */
.pc-fav, .pc-cmp{ background:rgba(255,255,255,.9); }
.pc-flag, .pc-sold{ font-size:8px; padding:4px 9px; }

/* El botón Pedir aparece bajo la foto al pasar por encima,
   sin taparla */
.pc-quick{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px; background:linear-gradient(transparent, rgba(243,236,217,.96) 45%);
  opacity:0; transform:translateY(6px);
  transition:all .35s var(--ease);
}
.pc:hover .pc-quick{ opacity:1; transform:none; }
@media (hover:none){ .pc-quick{ opacity:1; transform:none; } }

@media (max-width:680px){
  .pc-media{ margin-bottom:12px; }
  .pc-name{ font-size:17px; }
  .pc-corta{ display:none; }
  .pc-brand{ font-size:8.5px; letter-spacing:.22em; margin-bottom:6px; }
}


/* ============================================================
   31. ESCAPARATE AMPLIO
   ------------------------------------------------------------
   Paleta más fría y clara, y mucho más aire por tarjeta. El
   frasco manda: fondo casi blanco, lienzo gris neutro, y todo
   lo demás en gris medio para no competir.
   ============================================================ */
.grid{
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:clamp(26px, 4vw, 60px) clamp(20px, 3vw, 46px);
}
@media (min-width:1400px){ .grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:680px){ .grid{ grid-template-columns:repeat(2, 1fr); gap:26px 12px; } }

/* El lienzo: más alto que ancho, como en la referencia */
.pc-media{
  aspect-ratio:4/5;
  background:var(--ivory-2);
  border-radius:0;
  margin-bottom:22px;
}
.pc-media img{ padding:11%; }
.pc:hover .pc-media{ background:#eae8e4; }

/* Texto: nombre grande, y una sola línea de datos debajo */
.pc-body{ text-align:center; }
.pc-brand{
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:#a4a09a; margin-bottom:12px; font-weight:400;
}
.pc-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(23px, 2.4vw, 33px);
  line-height:1.1; margin-bottom:11px; color:#241f18;
}
.pc-fam{
  font-size:13px; letter-spacing:0; color:#8f8a83;
  text-transform:none; margin-bottom:16px;
}
.pc-fam b{ font-weight:400; color:inherit; }
.pc-corta{ display:none; }   /* la referencia no la lleva: menos ruido */

/* Pedir por WhatsApp: enlace discreto bajo la ficha, no un botón */
.pc-quick{
  position:static; opacity:1; transform:none;
  background:none; padding:0; text-align:center;
}
.pc-quick .btn{
  display:inline-flex; align-items:center; gap:9px;
  width:auto; border:0; padding:4px 0;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#6f6a63; background:none;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.pc-quick .btn::before{
  content:''; width:15px; height:15px; flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 15l-1.3 5 5.2-1.4A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1a12 12 0 0 1-6.5-5.7c-.5-.8-.8-1.7-.8-2.5 0-.9.5-1.4.7-1.6.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.3.4-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.1 1 2 1.3 2.3 1.4.3.1.5.1.6-.1l.8-1c.2-.2.4-.2.6-.1l2 .9c.2.1.4.2.4.3v.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 15l-1.3 5 5.2-1.4A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1a12 12 0 0 1-6.5-5.7c-.5-.8-.8-1.7-.8-2.5 0-.9.5-1.4.7-1.6.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.3.4-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.1 1 2 1.3 2.3 1.4.3.1.5.1.6-.1l.8-1c.2-.2.4-.2.6-.1l2 .9c.2.1.4.2.4.3v.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pc-quick .btn:hover{ color:var(--gold); border-bottom-color:var(--gold); background:none; }

/* Favorito y comparar: casi invisibles hasta que hace falta */
.pc-fav, .pc-cmp{
  background:rgba(255,255,255,.82); color:#9a958e;
  width:30px; height:30px; font-size:13px;
}
.pc-flag{ background:rgba(36,31,24,.82); font-size:8px; letter-spacing:.18em; }
.pc-flag.pc-new{ background:var(--green); }

@media (max-width:680px){
  .pc-media{ margin-bottom:14px; }
  .pc-name{ font-size:18px; }
  .pc-brand{ font-size:8.5px; letter-spacing:.24em; margin-bottom:7px; }
  .pc-fam{ font-size:11px; margin-bottom:10px; }
  .pc-quick .btn{ font-size:9.5px; letter-spacing:.14em; }
}


/* ============================================================
   32. LIENZO TRANSPARENTE
   ------------------------------------------------------------
   Las tarjetas pierden el fondo gris: los frascos se apoyan
   directamente sobre el blanco de la página. Funciona porque
   199 de las 322 fotos tienen canal alfa real.

   Las 13 que solo existen como toma de ambiente no se pueden
   recortar (son fotografías con fondo, no recortes), así que
   se les da un marco deliberado con esquinas suaves para que
   se lean como fotografía editorial y no como un fallo.
   ============================================================ */
.pc{ background:none; }
.pc-media{
  background:transparent;
  border:0; box-shadow:none;
}
.pc:hover .pc-media{ background:transparent; }
.pc-media img{
  mix-blend-mode:normal;      /* las fotos ya traen alfa: no hace falta fusión */
  padding:9%;
}

/* Las de ambiente: marco propio, esquinas suaves, algo más pequeñas
   para que el conjunto siga respirando igual */
.pc-media img.amb{
  padding:0;
  border-radius:3px;
  object-fit:cover;
  width:92%; height:92%;
  margin:4%;
  box-shadow:0 4px 18px rgba(36,31,24,.10);
}

/* Sombra bajo el frasco recortado: lo asienta en la página */
.pc-media img:not(.amb){
  filter:drop-shadow(0 10px 20px rgba(36,31,24,.12));
}

/* Lo mismo en la ficha ampliada */
.gal-marco{ background:transparent; }
.gal-marco.amb{ background:transparent; }
.gal-marco.amb img{ border-radius:4px; }
.mini-md, .cmpt-md, .cmpfull-md, .cmp-mini{ background:transparent; }

/* ============================================================
   33. PARALLAX EN LA PORTADA
   ------------------------------------------------------------
   NO se usa background-attachment: fixed. Safari en iOS lo
   ignora desde hace años, así que en iPhone no se vería nada,
   y en escritorio obliga a repintar en cada scroll.
   En su lugar movemos la capa con translate3d, que va en la
   tarjeta gráfica: funciona en iPhone y no cuesta rendimiento.
   ============================================================ */
.px{ position:relative; overflow:hidden; }
.px-capa{
  position:absolute; inset:-12% 0;
  background-position:center; background-size:cover;
  will-change:transform;
}
.px-vel{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .px-capa{ transform:none !important; }
}

/* ============================================================
   34. APARICIÓN AL HACER SCROLL
   Las tarjetas entran escalonadas, no todas de golpe.
   ============================================================ */
.pc{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.pc.visible{ opacity:1; transform:none; }
/* Red de seguridad: si el observador fallara, a los 4 s se ven igual */
.no-js .pc, .pc-forzada{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .pc{ opacity:1; transform:none; transition:none; }
}


/* ============================================================
   35. HUECO DE IMAGEN MÁS ALTO Y EL FRASCO MÁS GRANDE
   ------------------------------------------------------------
   Solo geometría: proporción, tamaño y centrado. No se toca
   ni un tamaño de letra ni la disposición de los textos.

   El hueco pasa de 4:5 a 5:7, bastante más vertical, que es
   la forma natural de un frasco. Y el margen interior baja
   del 9% al 4%, así el frasco ocupa casi todo el espacio en
   vez de nadar dentro de él.
   ============================================================ */
.pc-media{
  aspect-ratio:5/7;
  background:transparent;
  border:0; box-shadow:none; border-radius:0;
  display:grid; place-items:center;      /* centrado exacto en los dos ejes */
  margin-bottom:26px;
  overflow:visible;                      /* la sombra no se recorta */
}
.pc:hover .pc-media{ background:transparent; }

.pc-media img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  padding:4%;
  mix-blend-mode:normal;
}

/* Las de ambiente sí necesitan recorte, y algo menos de alto
   para que no dominen la fila */
.pc-media img.amb{
  width:94%; height:94%;
  margin:3%; padding:0;
  object-fit:cover;
  border-radius:3px;
}

/* La sombra crece con el frasco */
.pc-media img:not(.amb){
  filter:drop-shadow(0 14px 26px rgba(36,31,24,.14));
}
.pc:hover .pc-media img:not(.amb){
  filter:drop-shadow(0 20px 34px rgba(36,31,24,.18));
}

/* En la ficha ampliada, el mismo criterio */
.gal-marco{ aspect-ratio:5/7; background:transparent; overflow:visible; }
.gal-marco.rec{ padding:4%; }
.gal-marco.rec img{ object-fit:contain; }

@media (max-width:680px){
  .pc-media{ aspect-ratio:4/5; margin-bottom:16px; }
  .pc-media img{ padding:3%; }
}


/* ============================================================
   36. CORRECCIONES DE ESCAPARATE
   ============================================================ */

/* --- FALLO: en las tiras horizontales el enlace de WhatsApp
   quedaba montado sobre la foto. Al pasarlo a estático en el
   catálogo no se recolocó aquí. En las tiras no va: la tira es
   para descubrir, el pedido se hace al abrir la ficha. --- */
.rail .pc-quick{ display:none; }
.rail .pc-fav, .rail .pc-cmp{ display:none; }

/* --- Las 13 fotos de ambiente ocupan el MISMO hueco que un
   frasco recortado: contenidas, centradas y al mismo tamaño
   relativo. Así la fila tiene un ritmo único aunque la foto
   sea de otro estilo. --- */
.pc-media img.amb{
  width:78%; height:78%;
  margin:11%;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 8px 26px rgba(36,31,24,.16);
}
.pc:hover .pc-media img.amb{
  box-shadow:0 14px 34px rgba(36,31,24,.22);
}

/* ============================================================
   37. TIRA DE MÁS VENDIDOS
   ------------------------------------------------------------
   Antes eran tarjetas pequeñas con el botón encima. Ahora la
   misma pieza del catálogo: lienzo alto, frasco grande, nombre
   en serif y una línea de datos. Coherente con la rejilla.
   ============================================================ */
.rail{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(clamp(230px, 26vw, 330px), 1fr);
  gap:clamp(18px, 3vw, 44px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:8px;
}
.rail::-webkit-scrollbar{ display:none; }
.rail .pc{ scroll-snap-align:start; }
.rail .pc-media{
  aspect-ratio:5/7;
  background:transparent;
  margin-bottom:20px;
}
.rail .pc-media img{ padding:5%; }
.rail .pc-name{ font-size:clamp(19px, 1.9vw, 26px); }
.rail .pc-brand{ font-size:9.5px; letter-spacing:.3em; margin-bottom:10px; }
.rail .pc-fam{ font-size:12px; }
.rail .pc-corta{ display:none; }

/* La bandera de "más vendido" pierde la caja: solo un filete */
.rail .pc-flag{
  position:absolute; top:0; left:0; z-index:2;
  background:none; color:var(--gold);
  font-size:8.5px; letter-spacing:.26em; padding:0 0 6px;
  border-bottom:1px solid var(--gold);
}

.rail-nav{
  background:rgba(255,255,255,.94); border:1px solid var(--line);
  width:42px; height:42px;
}

@media (max-width:680px){
  .rail{ grid-auto-columns:minmax(62vw, 1fr); gap:16px; }
  .rail .pc-name{ font-size:18px; }
  .rail-nav{ display:none; }
}


/* ============================================================
   38. ENCUENTRA TU AROMA
   ============================================================ */
.ea{ max-width:820px; margin:0 auto; display:grid; gap:26px; }
.ea-g{ border:0; padding:0; margin:0; text-align:center; }
.ea-g legend{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px; padding:0; width:100%;
}
.ea-ops{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.ea-ops button{
  border:1px solid var(--line); border-radius:30px;
  padding:11px 22px; font-size:13px; color:var(--ink-2);
  background:rgba(255,255,255,.55);
  transition:all .3s var(--ease);
}
.ea-ops button:hover{ border-color:var(--gold-2); color:var(--ink); }
.ea-ops button.on{
  background:var(--ink); border-color:var(--ink); color:var(--ivory);
}
.ea-nota{
  text-align:center; font-size:12.5px; color:var(--ink-3);
  min-height:18px; margin:4px 0 0;
}
.ea-res{ margin-top:44px; }
.ea-res-h{
  text-align:center; font-family:var(--serif); font-size:22px;
  color:var(--gold); margin-bottom:26px;
}
.sec-sub{
  font-size:14px; color:var(--ink-3); margin:10px 0 0;
}
@media (max-width:680px){
  .ea{ gap:20px; }
  .ea-ops button{ padding:9px 16px; font-size:12px; }
}


/* ============================================================
   39. FALLO CORREGIDO: TIRAS EN BLANCO
   ------------------------------------------------------------
   La animación de aparición ponía TODAS las tarjetas a opacidad
   0, pero solo se observaban las de la rejilla del catálogo.
   Las de las tiras horizontales (Más vendidos, Para ti,
   Encuentra tu aroma) se quedaban invisibles para siempre:
   por eso salía el hueco en blanco bajo "12 perfumes para ti".

   Ahora el estado oculto se aplica SOLO dentro de .grid.
   ============================================================ */
.pc{ opacity:1; transform:none; }
.grid .pc{ opacity:0; transform:translateY(22px); }
.grid .pc.visible,
.grid .pc.pc-forzada{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .grid .pc{ opacity:1; transform:none; }
}

/* ============================================================
   40. PIRÁMIDE CON LAS ILUSTRACIONES KODESH
   ------------------------------------------------------------
   Las 88 láminas vienen ya normalizadas: sin aro propio, mismo
   fondo marfil, motivo centrado y al mismo tamaño. El aro lo
   dibuja el CSS, idéntico para todas: así la pirámide es
   simétrica aunque cada dibujo sea distinto.
   ============================================================ */
.pyr-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, 92px);
  justify-content:center;
  gap:20px clamp(12px,3vw,24px);
  align-items:start;                 /* todos los círculos a la misma altura */
}
.ing{ width:92px; gap:10px; }
.ing-c, .ing-c.foto{
  width:88px; height:88px;
  background:#faf8f3;                /* el mismo marfil que traen las láminas */
  border:1px solid var(--gold-2);
  box-shadow:0 0 0 4px #faf8f3, 0 0 0 5px rgba(181,146,76,.28);  /* doble filete fino */
}
.ing-c .nota-img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  filter:none;                       /* los colores tal cual los dibujaste */
}
.ing:hover .ing-c{ transform:translateY(-3px); box-shadow:0 0 0 4px #faf8f3, 0 0 0 5px var(--gold); }
.ing em{
  display:block; text-align:center;
  min-height:2.4em;                  /* nombres de 1 y 2 líneas alineados */
  font-size:12.5px; line-height:1.2;
}
@media (max-width:680px){
  .pyr-row{ grid-template-columns:repeat(auto-fit, 76px); gap:16px 10px; }
  .ing, .ing-c, .ing-c.foto{ width:72px; }
  .ing-c, .ing-c.foto{ height:72px; }
  .ing em{ font-size:11.5px; }
}

/* ============================================================
   41. ENCUENTRA TU AROMA · ÓRGANO DE DISCOS
   ------------------------------------------------------------
   Escritorio e iPad: 17 discos en órbita elíptica alrededor del
   perfume estrella. Móvil: los mismos discos en filas por grupo,
   la estrella debajo. Una sola estructura HTML para los dos.
   ============================================================ */
.ao{
  background:
    radial-gradient(ellipse at 50% 45%, rgba(212,175,55,.07), transparent 60%),
    var(--ivory);
  overflow:hidden;
}
.ao-cab{ text-align:center; margin-bottom:clamp(8px,2vw,24px); }
.ao-titulo{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,4vw,46px); letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin:6px 0 10px;
}
.ao-sub{ color:var(--ink-3); font-size:14px; margin:0 auto; max-width:46ch; }

/* ---------- escena ---------- */
.ao-escena{ position:relative; max-width:1080px; margin:0 auto; }
.ao-discos{ position:relative; }

/* ---------- disco ---------- */
.ao-disco{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%;
  aspect-ratio:1/1; border-radius:50%; padding:0; cursor:pointer;
  font-family:var(--serif); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; line-height:1.1; text-align:center;
  color:#4a4a4a; border:1px solid #e5e0d8;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 40%),
    linear-gradient(118deg, transparent 38%, rgba(165,152,135,.20) 39.5%, transparent 41.5%),
    linear-gradient(62deg, transparent 57%, rgba(165,152,135,.14) 58.2%, transparent 60%),
    linear-gradient(160deg, transparent 70%, rgba(165,152,135,.10) 71%, transparent 72.5%),
    radial-gradient(circle at 50% 50%, #f2eee9 55%, #e7e0d6 100%);
  box-shadow:
    0 9px 18px rgba(60,50,35,.13), 0 2px 4px rgba(60,50,35,.08),
    inset 0 -4px 7px rgba(120,105,85,.12), inset 0 2px 3px rgba(255,255,255,.95);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.ao-disco svg{
  width:30%; height:auto; fill:none; stroke:currentColor; stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round; opacity:.75;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.ao-disco span{ max-width:84%; }
.ao-disco:hover{ box-shadow:0 12px 24px rgba(60,50,35,.17), 0 3px 6px rgba(60,50,35,.08),
  inset 0 -4px 7px rgba(120,105,85,.12), inset 0 2px 3px rgba(255,255,255,.95); }
.ao-disco:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.ao-disco.on{
  color:#d4af37; border-color:rgba(212,175,55,.55);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.20) 0 6%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 50% 58%, #262626, #181818 58%, #0d0d0d);
  box-shadow:0 0 18px rgba(212,175,55,.45), 0 10px 20px rgba(0,0,0,.28),
    inset 0 1px 2px rgba(255,255,255,.14);
}
.ao-disco.on svg{ opacity:1; }
.ao-etq{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  white-space:nowrap;
}

/* ---------- centro ---------- */
.ao-centro{ text-align:center; z-index:2; }
.ao-centro.entra{ animation:aoEntra .55s cubic-bezier(.4,0,.2,1); }
@keyframes aoEntra{ from{ opacity:0; transform:translate(-50%,-46%) scale(.97); } to{ opacity:1; } }

.ao-estrella{ display:flex; flex-direction:column; align-items:center; }
.ao-afin{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#b48f2a;
  border:1px solid rgba(212,175,55,.5); border-radius:30px; padding:5px 12px; margin-bottom:6px;
  background:rgba(255,255,255,.6);
}
.ao-foto{
  width:58%; aspect-ratio:1/1; cursor:pointer; position:relative;
  background:radial-gradient(circle at 50% 55%, rgba(212,175,55,.16), rgba(212,175,55,0) 62%);
  border-radius:50%;
}
.ao-foto picture{ display:contents; }
.ao-foto img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 12px 20px rgba(36,31,24,.18));
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.ao-foto:hover img{ transform:scale(1.04); }
.ao-marca{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.ao-nombre{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.3vw,28px); line-height:1.1; margin:4px 0 3px; color:#241f18; }
.ao-fam{ font-size:12px; color:#8f8a83; }
.ao-notas{ list-style:none; display:flex; justify-content:center; gap:10px; margin:10px 0 12px; padding:0; }
.ao-notas li{ width:56px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.ao-notas img, .ao-notas i{
  width:40px; height:40px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid var(--gold-2); background:#faf8f3;
}
.ao-notas span{ font-size:10.5px; line-height:1.15; color:var(--ink-2); font-style:italic; font-family:var(--serif); }
.ao-acc{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.ao-acc .btn{ padding:11px 30px; }
.ao-wa{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6f6a63; border-bottom:1px solid transparent; }
.ao-wa:hover{ color:var(--gold); border-bottom-color:var(--gold); }

.ao-invita{ padding:10px; }
.ao-sello{ width:78px; height:auto; opacity:.9; margin:0 auto 12px; display:block; }
.ao-invita-t{ font-family:var(--serif); font-size:clamp(19px,2.1vw,25px); color:#241f18; margin:0 0 8px; }
.ao-invita-s{ font-size:13px; color:var(--ink-3); margin:0 auto; max-width:30ch; line-height:1.5; }
.ao-nada .ao-invita-t{ color:var(--gold); }

/* ---------- resultados ---------- */
.ao-res{ margin-top:clamp(24px,4vw,48px); }
.ao-contador{
  text-align:center; font-family:var(--serif); font-size:clamp(20px,2.4vw,26px);
  color:var(--gold); margin:0 0 28px; letter-spacing:.02em;
}
.ao-contador b{ font-weight:400; font-size:1.35em; }
.ao-contador::after{ content:''; display:block; width:48px; height:1px; background:var(--gold); margin:14px auto 0; }
.ao-mas-caja{ text-align:center; margin-top:30px; }

/* ---------- ESCRITORIO E IPAD: órbita ---------- */
@media (min-width:760px){
  .ao-escena{ aspect-ratio:4/3; }
  .ao-escena::before, .ao-escena::after{
    content:''; position:absolute; border-radius:50%; pointer-events:none;
    border:1px solid rgba(181,146,76,.22);
  }
  .ao-escena::before{ inset:7% 8%; }                     /* anillo por los discos */
  .ao-escena::after{ inset:23% 26%; border-color:rgba(181,146,76,.14); }   /* halo del centro */
  .ao-discos{ position:absolute; inset:0; }
  .ao-grupo{ display:contents; }
  .ao-disco{
    position:absolute; width:8.2%; transform:translate(-50%,-50%);
    font-size:clamp(8px,.92vw,11px);
  }
  .ao-disco:hover{ transform:translate(-50%,-53%); }
  .ao-disco.on{ transform:translate(-50%,-50%) scale(1.06); }
  .ao-etq{ position:absolute; transform:translate(-50%,-50%); }
  .ao-centro{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34%; max-width:360px; }
}

/* ---------- MÓVIL: filas por grupo ---------- */
@media (max-width:759px){
  .ao-discos{ display:grid; gap:22px; }
  .ao-grupo{ display:grid; grid-template-columns:repeat(var(--n,4), auto); justify-content:center; gap:10px 9px; }
  .ao-etq{ grid-column:1/-1; text-align:center; margin-bottom:2px; }
  .ao-disco{ width:clamp(58px,19.5vw,82px); font-size:8.5px; left:auto!important; top:auto!important; }
  .ao-disco.on{ transform:scale(1.05); }
  .ao-centro{ margin:30px auto 0; max-width:380px; }
  .ao-centro.entra{ animation-name:aoEntraM; }
  @keyframes aoEntraM{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  .ao-foto{ width:62%; }
}
@media (prefers-reduced-motion:reduce){
  .ao-disco, .ao-disco svg, .ao-foto img{ transition:none; }
  .ao-centro.entra{ animation:none; }
}

/* ============================================================
   42. NOTAS · VITRINAS EN ABANICO
   ------------------------------------------------------------
   Sala oscura de perfumería: luz cenital, suelo de mármol negro
   con filo dorado y reflejo. Diez vitrinas biseladas en abanico;
   la que tocas se endereza, se ensancha y se enciende.
   Escritorio: fila en perspectiva. iPad y móvil: carrusel táctil
   con ajuste por vitrina.
   ============================================================ */
.olf{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(212,175,55,.10), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(212,175,55,.05), transparent 60%),
    #070605;
  color:#efe3c4;
  padding:clamp(56px,7vw,100px) 0 clamp(40px,5vw,70px);
}
/* haces de luz cenital (god rays) */
.olf-luz{
  position:absolute; inset:-10% 0 30% 0; z-index:-1; pointer-events:none;
  background:
    conic-gradient(from 160deg at 50% -8%,
      transparent 0deg, rgba(255,226,160,.07) 4deg, transparent 8deg,
      transparent 12deg, rgba(255,226,160,.05) 15deg, transparent 19deg,
      transparent 22deg, rgba(255,226,160,.08) 25deg, transparent 29deg,
      transparent 31deg, rgba(255,226,160,.05) 34deg, transparent 38deg,
      transparent 40deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%);
  filter:blur(6px);
}
.olf-cab{ text-align:center; margin-bottom:clamp(28px,4vw,52px); }
.olf-sello{
  width:46px; height:auto; display:block; margin:0 auto 14px;
  filter:drop-shadow(0 0 12px rgba(212,175,55,.45)) sepia(.2) saturate(1.2);
}
.olf-titulo{
  font-family:var(--serif); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,4.2vw,50px); letter-spacing:.7em; margin:0 0 12px .7em;
  color:#efe3c4; text-shadow:0 0 28px rgba(212,175,55,.25);
}
.olf-sub{ font-size:11px; letter-spacing:.38em; text-transform:uppercase; color:#b89a55; margin:0; }
.olf-ayuda{ text-align:center; font-size:12.5px; color:rgba(239,227,196,.45); margin:26px 0 0; }

/* ---------- escena, suelo y reflejo ---------- */
.olf-escena{ position:relative; }
.olf-suelo{
  position:absolute; left:-6%; right:-6%; bottom:-110px; height:110px; z-index:0;
  border-top:1px solid rgba(212,175,55,.55);
  box-shadow:0 -1px 22px rgba(212,175,55,.28);
  background:
    linear-gradient(180deg, rgba(212,175,55,.08), transparent 30%),
    linear-gradient(100deg, transparent 30%, rgba(255,255,255,.035) 45%, transparent 60%),
    linear-gradient(180deg, #0d0b09, #070605);
}

/* ---------- fila ---------- */
.olf-fila{
  position:relative; z-index:1;
  display:flex; gap:10px; height:480px; perspective:1600px;
  margin-bottom:110px;                  /* hueco para el reflejo sobre el suelo */
}
.olf-p{
  flex:1 1 0; min-width:0; height:100%; position:relative;
  background:none; border:0; padding:0; margin:0; cursor:pointer; color:inherit; font:inherit;
  transform:rotateY(var(--gira,0deg)); transform-origin:50% 100%;
  filter:drop-shadow(0 0 7px rgba(212,175,55,.18));
  -webkit-box-reflect:below 2px linear-gradient(transparent 80%, rgba(255,255,255,.14));
  transition:flex-grow .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1),
             filter .45s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.olf-marco, .olf-in{
  position:absolute; inset:0;
  clip-path:polygon(0 7%, 16% 0, 84% 0, 100% 7%, 100% 100%, 0 100%);
}
/* bisel dorado fino */
.olf-marco{
  background:linear-gradient(160deg, #f6e3a6 0%, #b8923f 28%, #6d5421 55%, #d4af37 80%, #8a6a2a 100%);
  opacity:.75; transition:opacity .45s;
}
.olf-in{
  inset:1.5px; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 45% at 50% 40%, color-mix(in srgb, var(--t) 42%, transparent), transparent 72%),
    linear-gradient(180deg, #16120d 0%, #0b0907 60%, #060504 100%);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .olf-in{ background:radial-gradient(ellipse 80% 45% at 50% 40%, rgba(212,175,55,.18), transparent 72%),
    linear-gradient(180deg, #16120d 0%, #0b0907 60%, #060504 100%); }
}
.olf-foto{
  position:absolute; inset:0; background-size:cover; background-position:center; display:none;
}
.olf-p.con-foto .olf-foto{ display:block; }
.olf-p.con-foto .olf-ing{ display:none; }
.olf-ing{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:84%; max-width:230px; max-height:46%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));
}
.olf-foto, .olf-ing{
  opacity:.72; filter:brightness(.78) saturate(.85);
  transition:opacity .45s, filter .45s, transform .65s cubic-bezier(.4,0,.2,1);
}
.olf-ing{ filter:brightness(.78) saturate(.85) drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.olf-pie{
  position:absolute; left:0; right:0; bottom:0; padding:60px 8px 22px;
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  background:linear-gradient(180deg, transparent, rgba(5,4,3,.82) 45%, rgba(5,4,3,.95));
}
.olf-pie svg{
  width:24px; height:24px; fill:none; stroke:#d4af37; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}
.olf-nom{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(11px,1vw,14px); color:#f0dfb2; white-space:nowrap;
}
.olf-cnt{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(212,175,55,.7);
  max-height:0; opacity:0; overflow:hidden; transition:all .45s;
}

/* ---------- interacción ---------- */
@media (hover:hover) and (min-width:1025px){
  .olf-p:hover, .olf-p:focus-visible{ flex-grow:2.5; transform:rotateY(0deg) translateY(-4px); }
}
.olf-p.on{ flex-grow:2.5; transform:rotateY(0deg) translateY(-4px); }
.olf-p:hover, .olf-p:focus-visible, .olf-p.on{
  filter:drop-shadow(0 0 14px rgba(212,175,55,.45)) drop-shadow(0 0 2px rgba(255,220,140,.5));
  outline:none;
}
.olf-p:hover .olf-marco, .olf-p:focus-visible .olf-marco, .olf-p.on .olf-marco{ opacity:1; }
.olf-p:hover .olf-ing, .olf-p:focus-visible .olf-ing, .olf-p.on .olf-ing{
  opacity:1; filter:brightness(1.05) saturate(1.05) drop-shadow(0 14px 22px rgba(0,0,0,.6));
  transform:translate(-50%,-52%) scale(1.04);
}
.olf-p:hover .olf-foto, .olf-p.on .olf-foto{ opacity:1; filter:none; }
.olf-p:hover .olf-cnt, .olf-p:focus-visible .olf-cnt, .olf-p.on .olf-cnt{ max-height:20px; opacity:1; }
/* con una vitrina elegida, las demás se retiran un poco más a la penumbra */
.olf-fila.hay-activa .olf-p:not(.on):not(:hover) .olf-ing,
.olf-fila.hay-activa .olf-p:not(.on):not(:hover) .olf-foto{ opacity:.45; }

/* ---------- indicador sobre el catálogo ---------- */
.olf-chip{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0 22px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.olf-chip b{ font-weight:400; color:var(--gold); font-family:var(--serif); font-size:15px; letter-spacing:.08em; text-transform:none; }
.olf-chip button{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--gold-2); background:none;
  color:var(--gold); cursor:pointer; line-height:1; font-size:12px;
}
.olf-chip button:hover{ background:var(--gold); color:#fff; }

/* ---------- iPad y móvil: carrusel táctil ---------- */
@media (max-width:1024px){
  .olf-fila{
    height:auto; gap:14px; perspective:none;
    overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory;
    padding:6px 8vw 4px; margin:0 calc(-1 * var(--pad, 20px)) 110px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .olf-fila::-webkit-scrollbar{ display:none; }
  .olf-p{
    flex:0 0 clamp(168px,40vw,230px); height:auto; aspect-ratio:9/20; max-height:470px;
    transform:none; scroll-snap-align:center;
  }
  .olf-p.on{ flex-grow:0; transform:translateY(-4px); }
  .olf-cnt{ max-height:20px; opacity:1; }
  .olf-ing{ opacity:.85; filter:brightness(.9) drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
  .olf-nom{ font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .olf-p, .olf-ing, .olf-foto, .olf-marco, .olf-cnt{ transition:none; }
}
/* ajuste: nombres que caben en reposo, más grandes al abrirse; abanico más marcado */
.olf-fila{ perspective:1200px; }
.olf-nom{ font-size:clamp(9px,.74vw,11.5px); letter-spacing:.05em; transition:font-size .45s, letter-spacing .45s; }
.olf-p:hover .olf-nom, .olf-p:focus-visible .olf-nom, .olf-p.on .olf-nom{ font-size:clamp(12px,1vw,15px); letter-spacing:.16em; }
@media (max-width:1024px){ .olf-nom, .olf-p.on .olf-nom{ font-size:12.5px; letter-spacing:.1em; } }
@media (max-width:1024px){
  .olf-fila{ margin-bottom:46px; }
  .olf-suelo{ bottom:-46px; height:46px; }
}

/* ============================================================
   43. TRANSICIONES ENTRE SECCIONES DE LA PORTADA
   La sala oscura de Notas queda entre dos secciones claras: sin
   un degradado, el corte es brusco. Aquí se funde por arriba y
   por abajo con el color de la sección vecina.
   ============================================================ */
.olf::before, .olf::after{
  content:''; position:absolute; left:0; right:0; height:clamp(40px,6vw,90px);
  pointer-events:none; z-index:0;
}
.olf::before{ top:0; background:linear-gradient(180deg, var(--ivory), transparent); opacity:.22; }
.olf::after{ bottom:0; background:linear-gradient(0deg, var(--ivory), transparent); opacity:.16; }
.olf-wrap, .olf-luz{ position:relative; z-index:1; }

/* el ancla no queda debajo de la cabecera fija */
#top, #encuentra, #familias, #marcas, #para-ti, #experiencia, #contacto{
  scroll-margin-top:clamp(84px,12vh,132px);
}

/* ============================================================
   44. NOTAS EN CLARO
   ------------------------------------------------------------
   Misma arquitectura de vitrinas (abanico, bisel angular, filo
   dorado, reflejo en el suelo) pero con la paleta y la
   tipografía del resto de la web: marfil, oro y serif.
   Sustituye a la sala oscura de la sección 42.
   ============================================================ */
.olf{
  background:
    radial-gradient(ellipse 60% 50% at 50% 34%, rgba(212,175,55,.10), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, #f7f4ee 45%, var(--ivory) 100%);
  color:var(--ink);
}
.olf::before, .olf::after{ display:none; }          /* ya no hace falta fundir con lo oscuro */

/* luz cenital, ahora cálida y tenue sobre marfil */
.olf-luz{
  background:
    conic-gradient(from 160deg at 50% -8%,
      transparent 0deg, rgba(181,146,76,.10) 4deg, transparent 8deg,
      transparent 12deg, rgba(181,146,76,.07) 15deg, transparent 19deg,
      transparent 22deg, rgba(181,146,76,.11) 25deg, transparent 29deg,
      transparent 31deg, rgba(181,146,76,.07) 34deg, transparent 38deg,
      transparent 40deg);
  opacity:.75;
}
.olf-sello{ filter:none; opacity:1; }
.olf-titulo{ color:var(--gold); text-shadow:none; }
.olf-sub{ color:var(--ink-3); }
.olf-ayuda{ color:var(--ink-3); }

/* suelo: mármol claro pulido con filo dorado */
.olf-suelo{
  border-top:1px solid rgba(181,146,76,.45);
  box-shadow:0 -1px 16px rgba(181,146,76,.16);
  background:
    linear-gradient(180deg, rgba(181,146,76,.07), transparent 40%),
    linear-gradient(100deg, transparent 28%, rgba(255,255,255,.7) 45%, transparent 62%),
    linear-gradient(180deg, #f1ece3, var(--ivory));
}

/* vitrina */
.olf-p{
  filter:drop-shadow(0 10px 20px rgba(60,50,35,.13));
  -webkit-box-reflect:below 2px linear-gradient(transparent 78%, rgba(0,0,0,.10));
}
.olf-marco{
  background:linear-gradient(160deg, #e7c87f 0%, #b5924c 26%, #8d6f34 52%, #d9bb74 78%, #a8862f 100%);
  opacity:.85;
}
.olf-in{
  background:
    radial-gradient(ellipse 85% 50% at 50% 38%, color-mix(in srgb, var(--t) 16%, transparent), transparent 74%),
    linear-gradient(180deg, #fdfbf7 0%, #f4efe5 58%, #ece5d7 100%);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .olf-in{ background:linear-gradient(180deg,#fdfbf7,#ece5d7); }
}
.olf-ing{
  filter:none; opacity:1;
  max-height:52%; width:88%;
}
.olf-foto{ opacity:1; filter:none; }
/* pie legible sobre marfil */
.olf-pie{
  background:linear-gradient(180deg, transparent, rgba(253,251,247,.85) 42%, rgba(247,243,235,.97));
  padding:54px 8px 20px;
}
.olf-p.con-foto .olf-pie{
  background:linear-gradient(180deg, transparent, rgba(253,251,247,.9) 46%, #fbf8f2);
}
.olf-pie svg{ stroke:var(--gold); }
.olf-nom{ color:var(--ink); }
.olf-cnt{ color:var(--gold); }

/* estado activo: el oro manda, sin oscurecer */
.olf-p:hover, .olf-p:focus-visible, .olf-p.on{
  filter:drop-shadow(0 14px 26px rgba(60,50,35,.18)) drop-shadow(0 0 10px rgba(181,146,76,.45));
}
.olf-p.on .olf-marco{ opacity:1; }
.olf-p.on .olf-in{
  background:
    radial-gradient(ellipse 85% 50% at 50% 38%, color-mix(in srgb, var(--t) 24%, transparent), transparent 74%),
    linear-gradient(180deg, #fffdf9 0%, #f8f3e9 58%, #f0e8d8 100%);
}
.olf-p.on .olf-nom{ color:var(--gold); }
.olf-fila.hay-activa .olf-p:not(.on):not(:hover) .olf-ing,
.olf-fila.hay-activa .olf-p:not(.on):not(:hover) .olf-foto{ opacity:.6; }
@media (max-width:1024px){
  .olf-ing{ opacity:1; filter:none; }
}

/* ============================================================
   45. VITRINAS CON EL FRASCO INSIGNIA
   El cuerpo de cada vitrina lo ocupa el bodegón real del
   perfume más vendido de esa familia. La ilustración de la
   nota baja a sello pequeño en la esquina superior.
   ============================================================ */
.olf-prod{
  position:absolute; left:0; right:0; top:4%; height:62%;
  display:flex; align-items:center; justify-content:center;
}
.olf-prod picture{ display:contents; }
.olf-prod img{
  max-width:92%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(60,50,35,.16));
  transition:transform .65s cubic-bezier(.4,0,.2,1);
}
.olf-p:hover .olf-prod img, .olf-p.on .olf-prod img{ transform:scale(1.05); }
.olf-rep{
  position:absolute; left:6%; right:6%; top:68%;
  font-family:var(--serif); font-style:italic; font-size:11.5px; line-height:1.2;
  color:var(--ink-3); text-align:center;
  opacity:0; transition:opacity .4s;
}
.olf-p:hover .olf-rep, .olf-p.on .olf-rep{ opacity:1; }

/* la nota, ahora sello en la esquina */
.olf-ing{
  left:12%; top:9%; transform:none;
  width:clamp(26px,26%,54px); max-height:none; aspect-ratio:1/1; object-fit:contain;
  border-radius:50%; background:#fdfbf7; padding:5%;
  border:1px solid var(--gold-2);
  box-shadow:0 2px 8px rgba(60,50,35,.12);
}
.olf-p:hover .olf-ing, .olf-p:focus-visible .olf-ing, .olf-p.on .olf-ing{ transform:none; }
/* si algún día hay foto vertical propia, manda ella y el sello se queda */
.olf-p.con-foto .olf-prod, .olf-p.con-foto .olf-rep{ display:none; }
.olf-p.con-foto .olf-ing{ display:block; }
@media (max-width:1024px){
  .olf-rep{ opacity:1; font-size:12px; }
  .olf-ing{ width:clamp(30px,22%,48px); }
}
/* el sello toma un tinte de su familia: si no, el algodón blanco
   de Almizcle desaparecía sobre el círculo marfil */
.olf-ing{ background:color-mix(in srgb, var(--t) 12%, #fdfbf7); }
@supports not (background:color-mix(in srgb, red 50%, transparent)){ .olf-ing{ background:#f6f1e7; } }

/* ============================================================
   46. NOTAS Y MARCAS SIN CABECERA
   ------------------------------------------------------------
   Las dos secciones van directas a la fila de vitrinas, sin
   isotipo ni título encima. Se reduce el margen superior, que
   antes reservaba sitio para esa cabecera.
   ============================================================ */
.olf{ padding:clamp(34px,5vw,58px) 0 clamp(40px,5vw,70px); }

/* ============================================================
   47. MARCAS · MISMA VITRINA, CON EL LOGO DE LA CASA
   ------------------------------------------------------------
   Estructura idéntica a Notas (abanico, bisel, filo dorado,
   reflejo). Cada tarjeta es un enlace directo al catálogo
   filtrado por esa marca. El logo va en mar-logo: mientras no
   exista el archivo assets/img/marcas/<id>.png, se ve un
   monograma en dorado con las iniciales de la casa, nunca un
   icono de imagen rota.
   ============================================================ */
.mar .olf-p{ text-decoration:none; }
/* El sello del logo ocupa la misma esquina que el sello de nota
   en las vitrinas de Notas: el frasco insignia es el protagonista
   del cuerpo (reutiliza .olf-prod/.olf-rep tal cual). */
.mar-logo-caja{
  position:absolute; left:12%; top:9%;
  width:clamp(26px,26%,54px); aspect-ratio:1/1;
  background:#fdfbf7; border:1px solid var(--gold-2); border-radius:50%;
  box-shadow:0 2px 8px rgba(60,50,35,.12);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  z-index:2;
}
.mar-logo{
  max-width:78%; max-height:78%; width:auto; height:auto; object-fit:contain;
}
.mar-mono{
  display:none; font-family:var(--serif); font-weight:600; letter-spacing:.02em;
  font-size:clamp(11px,1.4vw,16px); color:var(--gold);
}
.mar-logo-caja.sin-logo .mar-logo{ display:none; }
.mar-logo-caja.sin-logo .mar-mono{ display:block; }
/* si no hay frasco insignia asignado, el sello vuelve a ser
   grande y centrado (comportamiento de reserva) */
.mar-p:not(:has(.olf-prod)) .mar-logo-caja{
  left:8%; right:8%; top:10%; bottom:34%; width:auto;
  border-radius:0; background:none; border:0; box-shadow:none;
}
.mar-p:not(:has(.olf-prod)) .mar-logo{ max-width:100%; max-height:100%; }
.mar-p:not(:has(.olf-prod)) .mar-mono{ font-size:clamp(30px,3.4vw,42px); }
.mar-p .olf-nom{ white-space:normal; line-height:1.18; padding:0 2px; }

/* ============================================================
   48. CABECERA FLOTANTE DEL CATÁLOGO (glassmorphism claro)
   ------------------------------------------------------------
   Vidrio esmerilado sobre el marfil de la web: blanco
   translúcido, blur, borde y acentos dorados finos. Los <select>
   reales quedan invisibles y AL TAMAÑO EXACTO de cada columna,
   por encima de su icono: pulsar la columna abre el desplegable
   nativo de siempre. Ni un evento de filtrado nuevo.
   ============================================================ */
.fc{
  position:relative; z-index:6;
  margin:0 auto clamp(20px,3vw,34px); padding:0 20px;
  max-width:var(--wrap);
}
.fc > .wrap{
  max-width:1180px; margin:0 auto; padding:0;
  display:flex; flex-direction:column; gap:16px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(181,146,76,.30);
  border-radius:28px;
  padding:clamp(16px,2.4vw,26px) clamp(16px,3vw,30px);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 24px 50px -18px rgba(60,50,35,.20), 0 2px 10px rgba(60,50,35,.06),
             inset 0 1px 0 rgba(255,255,255,.65);
}

/* ---------- 1. buscador cápsula ---------- */
.fc-buscar{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(181,146,76,.28);
  border-radius:999px; padding:13px 10px 13px 20px;
  box-shadow:inset 0 1px 2px rgba(60,50,35,.05);
  transition:border-color .3s, box-shadow .3s;
}
.fc-buscar:focus-within{
  border-color:var(--gold-2);
  box-shadow:inset 0 1px 2px rgba(60,50,35,.05), 0 0 0 4px rgba(181,146,76,.12);
}
.fc-ico-lupa{ width:19px; height:19px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; }
.fc-buscar input{
  flex:1; min-width:0; border:0; background:none; outline:0;
  font:15px/1.3 var(--sans); color:var(--ink); letter-spacing:.01em;
}
.fc-buscar input::placeholder{ color:var(--ink-3); }
.fc-ajustes{
  flex:none; width:38px; height:38px; border-radius:50%; border:1px solid rgba(181,146,76,.3);
  background:rgba(255,255,255,.7); color:var(--gold); display:grid; place-items:center;
  cursor:pointer; transition:background .3s, transform .3s;
}
.fc-ajustes:hover{ background:var(--gold); color:#fff; }
.fc-ajustes[aria-expanded="false"]{ transform:rotate(180deg); }
.fc-ajustes svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* ---------- 2. panel de selectores rápidos ---------- */
.fc-panel{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:2px;
  background:rgba(181,146,76,.14); border-radius:18px; overflow:hidden;
  transition:grid-template-rows .4s var(--ease), opacity .3s;
}
.fc-panel[hidden]{ display:none; }
.fc-col{
  position:relative; background:rgba(255,255,255,.72);
  padding:14px 6px 12px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:background .3s;
}
.fc-col:hover{ background:#fff; }
.fc-ico{ width:20px; height:20px; fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:2px; }
.fc-lbl{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.fc-val{
  font-family:var(--serif); font-size:15px; color:var(--ink); line-height:1.15;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fc-select{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:0; cursor:pointer; -webkit-appearance:none; appearance:none;
}
@media (max-width:900px){
  .fc-panel{ grid-template-columns:repeat(3, 1fr); }
  .fc-col{ padding:12px 4px 10px; }
}
@media (max-width:560px){
  .fc-panel{ grid-template-columns:repeat(2, 1fr); }
  .fc-val{ font-size:13.5px; }
}

/* ---------- 3. carrusel de notas ---------- */
.fc-notas{ display:flex; align-items:center; gap:8px; }
.fc-notas-fila{
  flex:1; display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
  padding:6px 2px 8px; scrollbar-width:none;
}
.fc-notas-fila::-webkit-scrollbar{ display:none; }
.fc-nota{
  flex:none; width:64px; display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer; scroll-snap-align:start;
}
.fc-nota-c{
  width:56px; height:56px; border-radius:50%; overflow:hidden;
  background:#fdfbf7; border:1px solid rgba(181,146,76,.35);
  box-shadow:0 4px 10px rgba(60,50,35,.10);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.fc-nota-c img{ width:100%; height:100%; object-fit:cover; display:block; }
.fc-nota span{
  font-size:10.5px; letter-spacing:.02em; color:var(--ink-2);
  white-space:nowrap; transition:color .3s;
}
.fc-nota:hover .fc-nota-c, .fc-nota:focus-visible .fc-nota-c{
  transform:translateY(-3px); box-shadow:0 10px 18px rgba(60,50,35,.16); border-color:var(--gold-2);
}
.fc-nota.on .fc-nota-c{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(181,146,76,.18), 0 8px 16px rgba(60,50,35,.16);
}
.fc-nota.on span{ color:var(--gold); font-weight:600; }
.fc-flecha{
  flex:none; width:32px; height:32px; border-radius:50%; border:1px solid rgba(181,146,76,.3);
  background:rgba(255,255,255,.75); color:var(--gold); font-size:17px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .3s;
}
.fc-flecha:hover{ background:var(--gold); color:#fff; }

/* ---------- pie: favoritos / ver todas ---------- */
.fc-pie{ display:flex; align-items:center; justify-content:space-between; padding-top:2px; }
.fc-fav{
  border:0; background:none; cursor:pointer; color:var(--ink-2);
  font-size:12.5px; letter-spacing:.06em; display:flex; align-items:center; gap:6px;
  transition:color .3s;
}
.fc-fav span{ color:#c0475a; font-size:15px; }
.fc-fav:hover, .fc-fav.on{ color:var(--gold); }
.fc-ver{
  font-size:12px; letter-spacing:.08em; color:var(--ink-3); border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.fc-ver:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- barra secundaria (lo que ya había) ---------- */
.cat-bar-sec{
  background:none; border:0; box-shadow:none; padding:0 0 clamp(16px,2.4vw,26px);
}
.cat-bar-sec .cat-tgs{ justify-content:center; }