/* Navegación principal, tarjetas con detalle, estado vacío y pirámide olfativa. */
:root{--oro:#c9a96a;--oro-osc:#8a6d2b}

/* Navegación */
.nv{margin-top:2px;position:relative}
/* Flecha que indica que hay más pestañas a la derecha (se oculta al llegar al final). */
.nv::after{content:"›";position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;padding:0 2px 2px 16px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 55%);color:var(--oro-osc);font-size:22px;font-weight:700;pointer-events:none;transition:opacity .2s}
.nv.fin::after{opacity:0}
@media(min-width:900px){.nv::after{display:none}}
.nv-s{display:flex;align-items:stretch;gap:22px;overflow-x:auto;scrollbar-width:none;padding:0 2px;-webkit-overflow-scrolling:touch;
 -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.nv-s::-webkit-scrollbar{display:none}
.ni{flex:none;position:relative;display:inline-flex;align-items:center;gap:6px;padding:11px 2px 10px;border:0;background:none;color:#555;
 font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.ni::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:2px;background:var(--oro);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
.ni:hover{color:#000}
.ni:hover::after{transform:scaleX(.45)}
.ni[aria-current=page]{color:#000;font-weight:700}
.ni[aria-current=page]::after{transform:scaleX(1)}
.ni svg{display:block;flex:none}
.ni[aria-expanded=true] svg:last-child{transform:rotate(180deg)}
.ni:focus-visible,.mi:focus-visible,.dx:focus-visible,.vn:focus-visible,.nb:focus-visible,.ci:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
@media(max-width:560px){.nv-s{gap:16px}.ni{font-size:10.5px;letter-spacing:.1em}.nh span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(min-width:900px){.nv-s{gap:34px;-webkit-mask-image:none;mask-image:none}.ni{font-size:12.5px}}
.mm{position:absolute;left:0;right:0;top:100%;height:0}
.mp{position:absolute;top:2px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;z-index:8}
.mi{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:0;border-radius:8px;background:none;color:#111;font-size:14px;text-align:left;cursor:pointer}
.mi span{font-size:12px;color:var(--mute)}
.mi:hover{background:#f6f2e8}
.mi.on{font-weight:700;background:#f6f2e8;box-shadow:inset 3px 0 0 var(--oro)}

/* Tarjetas: imagen y nombre abren el detalle sin cambiar su aspecto */
.ci{display:block;width:100%;padding:0;border:0;background:#fff;cursor:pointer}
.nb{padding:0;border:0;background:none;color:inherit;text-align:left;font-family:inherit}
.nb:hover{text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:3px}
.vn{align-self:flex-start;margin:6px 0 2px;min-height:32px;padding:0 12px;border:1px solid #d8c7a0;border-radius:99px;background:#fbf7ee;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--oro-osc);cursor:pointer}
.vac p{margin:0 0 12px}
.va{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.va button{padding:9px 16px;border:1px solid #000;border-radius:99px;background:#fff;color:#000;font-size:13px}
.va button:first-child:not(:last-child){background:#000;color:#fff}

/* Detalle del perfume */
.dt{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.dt[hidden]{display:none}
.dlock{overflow:hidden}
.dp{position:relative;background:#fff;width:100%;max-width:760px;max-height:92%;overflow-y:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.dx{position:sticky;top:0;float:right;z-index:2;width:38px;height:38px;margin:-4px -4px 0 8px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:22px;line-height:1;color:#000;padding:0 0 3px}
.dh{display:flex;gap:14px;align-items:center}
.dimg{flex:0 0 38%;max-width:240px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dimg img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:#fff}
.dm{min-width:0;flex:1}
.dm h2{margin:2px 0 6px;font-size:20px;line-height:1.2}
.dprice{font-size:18px;font-weight:700;margin-bottom:10px}
.dbuy .add{height:40px;padding:0 20px}
.dbuy .qty button{width:40px;height:40px}
.pir{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.pir h3{margin:0 0 10px;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.pir h3::after{content:"";display:block;width:34px;height:2px;margin-top:8px;background:var(--oro)}
.fam{margin:0 0 12px;font-size:14px}
.fam span{display:inline-block;margin-right:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-osc)}
.pyr{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 14px}
.tier{border:1px solid #e6d9b8;border-radius:10px;padding:10px 12px;text-align:center}
.t1{width:68%;background:#fcf9f1}
.t2{width:84%;background:#f7efdc}
.t3{width:100%;background:#f0e3c3}
.th{display:flex;flex-direction:column;align-items:center;margin-bottom:7px}
.th b{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#000}
.th span{font-size:11px;color:#6b5b2e}
.pn{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.pn li{padding:4px 10px;border:1px solid #d8c796;border-radius:99px;background:#fff;font-size:12.5px;line-height:1.2}
.dest{margin:0 0 14px;text-align:center}
.dest b{display:block;margin-bottom:7px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.res{margin:0 0 10px;font-size:14px;line-height:1.5;color:#222}
.gn{margin:0 0 10px;font-size:12.5px;color:#444}
.parc{margin:0 0 10px;font-size:12.5px;color:#6b5b2e}
.aviso{margin:0 0 8px;font-size:11.5px;line-height:1.45;color:var(--mute)}
.src{margin:0;font-size:11.5px;color:var(--mute)}
.src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pend{margin:0 0 6px;font-size:15px;font-weight:700}
.pd{margin:0;font-size:13px;color:var(--mute);line-height:1.5}
@media(min-width:700px){
.dt{align-items:center}
.dp{border-radius:18px;padding:24px 28px 26px;max-height:90%}
.dh{gap:22px}
.dm h2{font-size:26px}
.pyr{max-width:560px;margin-left:auto;margin-right:auto}
.pn li{font-size:13px}
}

/* Avisos de la app (instalación, actualización, sin conexión) */
#avisos{position:fixed;left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.pwa-c{pointer-events:auto;width:100%;max-width:560px;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #3a3226;border-radius:14px;background:#000;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.35);font-size:13.5px;line-height:1.4}
.pwa-c p{margin:0;flex:1}
.pwa-n{color:#f3e2b6}
.pwa-b{display:flex;align-items:center;gap:8px;flex:none}
.pwa-upd{flex-wrap:wrap}
.pwa-upd .pwa-n{flex:1 0 100%}
.pwa-p{height:36px;padding:0 16px;border:0;border-radius:99px;background:linear-gradient(135deg,#f3e2b6,#c9a96a);color:#000;font-size:13px;font-weight:700;white-space:nowrap}
.pwa-s{height:36px;padding:0 10px;border:0;background:none;color:#d9bd83;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.pwa-x{flex:none;width:34px;height:34px;border:1px solid #555;border-radius:50%;background:none;color:#fff;font-size:20px;line-height:1;padding:0 0 2px}
.pwa-off{border-color:#7a5c1e;background:#1b1508}
.pwa-inst .pwa-t{flex:1}
.pwa-inst ol{margin:8px 0 0;padding-left:20px;color:#e6e6e6;font-size:13px}
.pwa-inst li{margin:2px 0}
.pwa-c button:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
@media(max-width:420px){.pwa-upd .pwa-b{flex:1 0 100%;justify-content:flex-end}.pwa-c{padding:11px 12px}}

/* Compra desde el detalle: cantidad, Comprar ahora y Agregar al carrito */
.dcomp{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dq{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dql{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.dqc{display:inline-flex;align-items:center;border:1px solid #000;border-radius:99px;overflow:hidden;background:#fff}
.dqb{width:44px;height:44px;border:0;background:#fff;color:#000;font-size:22px;line-height:1;padding:0 0 2px}
.dqb:disabled{color:#bdbdbd;cursor:not-allowed}
.dqb:not(:disabled):active{background:#f1ead8}
.dqc output{min-width:44px;text-align:center;font-size:17px;font-weight:700}
.dsub{font-size:13px;color:#444;font-weight:600}
.dact{display:flex;flex-direction:column;gap:8px}
.dbuy-n,.dbuy-a{height:48px;border-radius:12px;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer}
.dbuy-n{border:1px solid #000;background:#000;color:#fff}
.dbuy-a{border:2px solid #000;background:#fff;color:#000}
.dbuy-n:active{background:#222}.dbuy-a:active{background:#f1ead8}
.dcomp button:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.dcart{margin:8px 0 0;font-size:12.5px;color:#444;min-height:1px}
.dok{margin-top:10px;padding:10px 12px;border:1px solid #d8c796;border-radius:10px;background:#fcf9f1;font-size:13.5px}
.dok[hidden]{display:none}
.dok p{margin:0 0 8px}
.dokb{display:flex;gap:8px;flex-wrap:wrap}
.dokb button{height:38px;padding:0 14px;border-radius:99px;border:1px solid #000;background:#fff;color:#000;font-size:13px;font-weight:600}
.dokb button:last-child{background:#000;color:#fff}
.cnota{margin:8px 0;padding:8px 10px;border:1px solid #d8c796;border-radius:8px;background:#fcf9f1;font-size:12.5px;line-height:1.4}
.wan{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--mute);text-align:center}
@media(min-width:700px){.dact{flex-direction:row}.dact button{flex:1}}

/* Fila de compra como en la referencia: cantidad + Comprar ahora, y Agregar al carrito debajo */
.dfila{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.dfila .dqc{flex:none;border:1px solid #000;border-radius:12px;height:48px}
.dfila .dqb{height:46px}
.dfila .dbuy-n{flex:1;min-width:0}
.dcomp>.dbuy-a{display:block;width:100%}
.dsub{margin:8px 0 0;font-size:13px;color:#444;font-weight:600;min-height:0}
.dsub:empty{display:none}
.dcart:empty{display:none}
.dact{display:none}
/* lupa y foto ampliada */
.dimg{position:relative}
.dz{position:absolute;top:8px;right:8px;width:38px;height:38px;padding:0;border:1px solid #d8d8d8;border-radius:50%;background:rgba(255,255,255,.95);color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer}
.dz[hidden]{display:none}
.dz:hover{border-color:#000}
.dz:focus-visible,.zx:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.zm{position:fixed;inset:0;z-index:12;background:#fff;display:flex;flex-direction:column}
.zm[hidden]{display:none}
.zx{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:2;width:44px;height:44px;border:1px solid #d8d8d8;border-radius:50%;background:#fff;color:#000;font-size:26px;line-height:1;padding:0 0 3px}
.zs{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:56px 12px 36px;-webkit-overflow-scrolling:touch}
.zs img{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;transition:width .2s}
.zm.zoomed .zs{align-items:flex-start;justify-content:flex-start;padding:56px 0 36px}
.zm.zoomed .zs img{max-width:none;max-height:none;width:200%;cursor:zoom-out}
@media(min-width:700px){.zm.zoomed .zs img{width:160%}}
.zh{position:absolute;bottom:10px;left:0;right:0;margin:0;text-align:center;font-size:12px;color:var(--mute);pointer-events:none}

/* Botón flotante «Hable con nosotros» (WhatsApp) */
.wf{position:fixed;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:6;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 13px;border:1px solid #c9a96a;border-radius:99px;background:#000;color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.wf svg{flex:none;color:#d9bd83}
.wf:focus-visible{outline:2px solid #c9a96a;outline-offset:3px}
.wf:active{background:#222}
#avisos{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
@media(max-width:699px){.wf span{display:none}.wf{padding:0;width:48px;height:48px;justify-content:center}}
.nfv{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#c8102e;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:0}
.ml{font-size:12px;color:var(--mute);line-height:1.2;margin-top:1px}
.dml{font-size:13px;color:var(--mute);margin:2px 0 4px}
/* Pestana MARCAS resaltada: siempre en dorado oscuro, en negrita y con la linea dorada visible. */
.ni[data-nav=marcas]{color:var(--oro-osc);font-weight:700}
.ni[data-nav=marcas]::after{transform:scaleX(1)}
.ni[data-nav=marcas][aria-current=page]{color:#000}