/* Lúmina · demo de perfumería. Oscuro, con ámbar y dorado. */
/* Lúmina · blanco y negro, simple. */
:root {
  --negro: #FFFFFF; --grafito: #F5F5F3; --grafito-2: #ECECE9; --linea: rgb(11 11 11 / .13); --linea-2: rgb(11 11 11 / .3);
  --crema: #0B0B0B; --humo: #6B6B6B; --oro: #0B0B0B; --oro-claro: #3A3A3A; --oro-os: #0B0B0B;
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --sans: "Figtree", system-ui, sans-serif;
  --suave: cubic-bezier(.16, 1, .3, 1); --pad: clamp(14px, 2.4vw, 36px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--negro); color: var(--crema); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--oro); color: var(--negro); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border: 1px solid var(--linea-2); border-radius: 2px; background: transparent; color: var(--crema); font: 600 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: background .4s, color .4s, border-color .4s; }
.btn:hover { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.btn--oro { background: var(--oro); border-color: var(--oro); color: var(--negro); }
.btn--oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); color: var(--negro); }
.btn--ancho { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- encabezado ---------- */
.cab { color: var(--crema); position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px var(--pad); transition: background .4s, padding .4s; }
.cab.sol { background: rgb(255 255 255 / .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cab__nav { --crema: #0B0B0B; --humo: #6B6B6B; --linea: rgb(11 11 11 / .13); display: flex; gap: clamp(14px, 2.4vw, 34px); }
.cab__nav a { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--crema); opacity: .78; transition: opacity .3s, color .3s; }
.cab__nav a:hover { opacity: 1; color: var(--oro-claro); }
.logo { font: 300 1.7rem/1 var(--serif); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; transition: opacity .25s; }

.cab__acc { display: flex; justify-content: flex-end; gap: 4px; }
.cab__btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; }
.cab__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cab__cuenta { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--oro); color: var(--negro); font: 700 .66rem/1 var(--sans); }
.cab { grid-template-columns: auto 1fr auto; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 0 !important; }
.cab > * { text-shadow: 0 1px 14px rgb(255 255 255 / .7); }
.cab__menu { display: grid; }
.logo { justify-self: center; }
.cab__nav { position: fixed; top: 62px; left: var(--pad); width: min(250px, calc(100vw - 2 * var(--pad))); flex-direction: column; gap: 0; padding: 6px 22px 10px; background: rgb(255 255 255 / .98); border: 1px solid var(--linea); border-radius: 3px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .35s, transform .45s var(--suave), visibility 0s .35s; }
.cab__nav.abierto { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.cab__nav a { padding: 15px 0; border-bottom: 1px solid var(--linea); opacity: 1; }
.cab__nav a:last-child { border-bottom: 0; }
@media (max-width: 860px) { .logo { font-size: 1.25rem; } }
/* ---------- secciones ---------- */
.sec { padding: clamp(40px, 5vw, 72px) var(--pad); }
.sec--claro { background: var(--grafito); }
.sec__in { max-width: 1280px; margin: 0 auto; }
.titulo { display: grid; gap: 18px; margin-bottom: clamp(18px, 2.6vw, 34px); }
.titulo--centro { justify-items: center; text-align: center; }
.titulo h2 { font: 300 clamp(2.4rem, 5.4vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.015em; }
.titulo h2 em { font-style: italic; color: var(--oro-claro); }
.titulo p { max-width: 54ch; color: var(--humo); }
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--suave), transform 1s var(--suave); }
.rv.vista { opacity: 1; transform: none; }

/* tarjetas */
.grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.card { display: grid; gap: 6px; align-content: start; }
.card__img { position: relative; display: block; aspect-ratio: 4 / 5; background: radial-gradient(70% 60% at 50% 40%, #ECECE9 0%, var(--grafito) 70%); border: 1px solid var(--linea); border-radius: 3px; overflow: hidden; transition: border-color .5s; margin-bottom: 10px; }
.card:hover .card__img { border-color: var(--oro-os); }
.card__img .pf { position: absolute; inset: 0; display: grid; place-items: center; padding: 8% 12% 12%; transition: transform .9s var(--suave); }
.card:hover .card__img .pf { transform: scale(1.05) translateY(-4px); }
.card__tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 10px; border-radius: 2px; background: var(--oro); color: var(--negro); font: 700 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.card__marca { font: 600 .66rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.card__nombre { font: 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.1 var(--serif); }
.card__conc { font-size: .8rem; color: var(--humo); }
.card__precio { margin-top: 6px; font: 600 1rem/1.2 var(--sans); }
.card__precio small { display: block; font-weight: 400; font-size: .72rem; color: var(--humo); letter-spacing: .06em; }
.card__precio em { display: block; font-style: normal; font-weight: 400; font-size: .8rem; color: var(--humo); margin-top: 2px; }
.pf { position: relative; }
.pf .frasco { width: 100%; height: 100%; }
.pf__img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; opacity: 0; transition: opacity .4s; }
.pf__img.ok { opacity: 1; }
.pf:has(.pf__img.ok) .frasco { visibility: hidden; }
@media (max-width: 1000px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* género */
.generos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.gen { position: relative; display: grid; align-content: end; min-height: clamp(280px, 38vw, 460px); padding: 26px; border: 1px solid var(--linea); border-radius: 3px; overflow: hidden; background: radial-gradient(80% 70% at 60% 30%, var(--c, #EFEFEC), var(--negro) 80%); transition: border-color .5s; }
.gen:hover { border-color: var(--oro-os); }
.gen .frasco { position: absolute; right: 8%; top: 8%; width: 46%; opacity: .92; transition: transform 1s var(--suave); }
.gen:hover .frasco { transform: translateY(-8px) scale(1.04); }
.gen h3 { position: relative; font: 300 clamp(2.2rem, 4vw, 3.4rem)/1 var(--serif); }
.gen p { position: relative; margin-top: 8px; color: var(--humo); font-size: .9rem; }
.gen span { position: relative; margin-top: 16px; font: 600 .68rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
@media (max-width: 800px) { .generos { grid-template-columns: minmax(0, 1fr); } .gen { min-height: 230px; } }

/* decants */
.decants { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.decants__tam { display: grid; gap: 14px; margin: 26px 0 30px; }
.decants__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.decants__fila b { font: 300 2rem/1 var(--serif); }
.decants__fila span { color: var(--humo); font-size: .9rem; }
.decants__visual-viejo { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.7fr; align-items: end; gap: 6%; padding: 6% 8% 0; min-height: 300px; border: 1px solid var(--linea); border-radius: 3px; background: radial-gradient(70% 70% at 50% 40%, #ECECE9, var(--grafito)); }
.decants__visual .frasco { width: 100%; }
.decants__visual .frasco:nth-child(1) { transform: scale(.7); transform-origin: bottom; }
.decants__visual .frasco:nth-child(2) { transform: scale(.82); transform-origin: bottom; }
@media (max-width: 860px) { .decants { grid-template-columns: minmax(0, 1fr); } }

/* cómo funciona / confianza */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.paso { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--linea-2); }
.paso b { font: 300 2.6rem/1 var(--serif); color: var(--oro); }
.paso h3 { font: 600 .78rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.paso p { color: var(--humo); font-size: .95rem; }
@media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pasos { grid-template-columns: minmax(0, 1fr); } }
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; cursor: pointer; list-style: none; font: 400 1.35rem/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--oro); transition: rotate .5s var(--suave); }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { padding: 0 0 22px; color: var(--humo); max-width: 62ch; }

/* pie */
.pie { padding: clamp(60px, 8vw, 100px) var(--pad) 30px; background: var(--negro); border-top: 1px solid var(--linea); }
.pie__grilla { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.pie .logo { display: inline-block; margin-bottom: 18px; }
.pie p, .pie li { color: var(--humo); font-size: .92rem; }
.pie h4 { margin: 0 0 16px; font: 600 .7rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--crema); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie a:hover { color: var(--oro-claro); }
.pie__base { max-width: 1280px; margin: 50px auto 0; padding-top: 24px; border-top: 1px solid var(--linea); color: var(--humo); font-size: .8rem; }
@media (max-width: 800px) { .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- colección ---------- */
.col-hero { padding: 150px var(--pad) 50px; background: radial-gradient(60% 90% at 80% 20%, #EFEFEC, var(--negro) 70%); border-bottom: 1px solid var(--linea); }
.col-hero__in { max-width: 1280px; margin: 0 auto; display: grid; gap: 16px; }
.col-hero h1 { font: 300 clamp(3rem, 7vw, 6rem)/1 var(--serif); letter-spacing: -.02em; }
.col-hero p { color: var(--humo); max-width: 52ch; }
.filtros { position: sticky; top: 60px; z-index: 20; background: rgb(255 255 255 / .97); border-bottom: 1px solid var(--linea); }
.filtros__in { max-width: 1280px; margin: 0 auto; padding: 14px var(--pad); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.seg { display: inline-flex; border: 1px solid var(--linea-2); border-radius: 2px; overflow: hidden; }
.seg button { padding: 11px 16px; background: none; border: 0; font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--humo); transition: background .3s, color .3s; }
.seg button + button { border-left: 1px solid var(--linea-2); }
.seg button.on { background: var(--crema); color: var(--negro); }
.campo { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); }
.campo select, .campo input { padding: 10px 12px; background: var(--grafito); border: 1px solid var(--linea-2); border-radius: 2px; color: var(--crema); font: 500 .85rem var(--sans); letter-spacing: 0; text-transform: none; }
.campo input { min-width: 190px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border: 1px solid var(--linea-2); border-radius: 30px; background: none; font: 500 .78rem/1 var(--sans); color: var(--humo); transition: all .3s; }
.chip.on { background: var(--oro); border-color: var(--oro); color: var(--negro); }
.col-lista { max-width: 1280px; margin: 0 auto; padding: 36px var(--pad) 100px; }
.col-cuenta { margin-bottom: 26px; color: var(--humo); font-size: .88rem; }
.vacio { padding: 80px 0; text-align: center; color: var(--humo); }
.vacio h3 { font: 300 2rem/1.1 var(--serif); color: var(--crema); margin-bottom: 10px; }

/* ---------- ficha ---------- */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
.prod__escena { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; background: radial-gradient(60% 55% at 50% 48%, var(--halo, #EFEFEC), var(--negro) 78%); overflow: hidden; }
.prod__escena .pf { width: min(34vw, 420px); aspect-ratio: 2 / 3; display: grid; place-items: center; }
.prod__escena .frasco { filter: drop-shadow(0 40px 40px rgb(0 0 0 / .2)); animation: flota 8s ease-in-out infinite; }
.prod__info { padding: 130px var(--pad) 80px; display: grid; gap: 22px; align-content: center; max-width: 640px; }
.migas { display: flex; flex-wrap: wrap; gap: 10px; font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--humo); }
.migas a:hover { color: var(--oro-claro); }
.migas b { color: var(--crema); font-weight: 600; }
.prod__marca { font: 600 .74rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.prod h1 { font: 300 clamp(2.8rem, 5.4vw, 4.8rem)/1 var(--serif); letter-spacing: -.015em; }
.prod__meta { color: var(--humo); font-size: .9rem; }
.prod__precio { font: 300 clamp(2rem, 3.2vw, 2.8rem)/1 var(--serif); }
.prod__precio small { display: block; margin-top: 8px; font: 400 .85rem/1.4 var(--sans); color: var(--humo); }
.prod__precio small b { color: var(--oro-claro); font-weight: 600; }
.tamanos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tam { padding: 16px 12px; display: grid; gap: 6px; text-align: left; background: none; border: 1px solid var(--linea-2); border-radius: 2px; transition: border-color .3s, background .3s; }
.tam b { font: 300 1.7rem/1 var(--serif); }
.tam span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--humo); }
.tam em { font-style: normal; font-size: .85rem; }
.tam.on { border-color: var(--oro); background: rgb(11 11 11 / .05); }
.compra { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.cant { display: inline-flex; align-items: center; border: 1px solid var(--linea-2); border-radius: 2px; }
.cant button { width: 46px; height: 54px; background: none; border: 0; font-size: 1.3rem; }
.cant output { min-width: 28px; text-align: center; font-weight: 600; }
.garantias { display: grid; gap: 10px; padding: 20px 0; border-block: 1px solid var(--linea); font-size: .9rem; color: var(--humo); }
.garantias li { display: flex; gap: 12px; align-items: center; list-style: none; }
.garantias svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.garantias { margin: 0; padding-inline: 0; }
.prod__desc { color: var(--humo); max-width: 52ch; }
.piramide { display: grid; gap: 0; }
.piramide__nivel { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--linea); }
.piramide__nivel h4 { margin: 0; font: 600 .68rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.piramide__nivel p { font: italic 300 1.35rem/1.3 var(--serif); }
.piramide__nivel:last-child { border-bottom: 1px solid var(--linea); }
.rel { padding: 80px var(--pad) 110px; background: var(--grafito); }
.rel .sec__in .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .prod { grid-template-columns: minmax(0, 1fr); } .prod__escena { position: relative; height: 62svh; } .prod__escena .pf { width: 56vw; } .prod__info { padding-top: 40px; } }

/* ---------- carrito ---------- */
.bolsa { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--linea-2); background: var(--grafito); color: var(--crema); overflow: hidden; }
.bolsa::backdrop { background: rgb(0 0 0 / .62); }
.bolsa[open] { display: flex; flex-direction: column; animation: entra-der .5s var(--suave); }
@keyframes entra-der { from { transform: translateX(40px); opacity: 0; } }
.bolsa__cab { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--linea); }
.bolsa__cab h2 { font: 300 1.9rem/1 var(--serif); }
.bolsa__cuerpo { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.linea { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.linea .pf { width: 62px; aspect-ratio: 4 / 5; background: var(--grafito-2); border-radius: 2px; display: grid; place-items: center; padding: 6px; }
.linea__t b { display: block; font: 400 1.15rem/1.15 var(--serif); }
.linea__t small { color: var(--humo); font-size: .78rem; }
.linea__der { text-align: right; display: grid; gap: 8px; justify-items: end; font-weight: 600; }
.mini { display: inline-flex; align-items: center; border: 1px solid var(--linea-2); border-radius: 2px; }
.mini button { width: 28px; height: 28px; background: none; border: 0; }
.mini output { min-width: 20px; text-align: center; font-size: .85rem; }
.quitar { background: none; border: 0; color: var(--humo); font-size: .72rem; text-decoration: underline; padding: 0; }
.bolsa fieldset { margin: 22px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
.bolsa legend { padding: 0; margin-bottom: 8px; font: 600 .68rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.opcion { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea-2); border-radius: 2px; cursor: pointer; font-size: .9rem; }
.opcion input { margin-top: 4px; accent-color: var(--oro); }
.opcion small { display: block; color: var(--humo); }
.opcion:has(input:checked) { border-color: var(--oro); background: rgb(11 11 11 / .04); }
.bolsa input[type="text"] { width: 100%; padding: 14px; background: var(--grafito-2); border: 1px solid var(--linea-2); border-radius: 2px; color: var(--crema); font: inherit; }
.bolsa__pie { padding: 18px 24px 24px; border-top: 1px solid var(--linea); display: grid; gap: 10px; background: var(--grafito); }
.totales { display: grid; gap: 6px; font-size: .92rem; color: var(--humo); }
.totales div { display: flex; justify-content: space-between; }
.totales .total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--linea); color: var(--crema); font: 400 1.5rem/1 var(--serif); }
.bolsa__vacia { padding: 60px 0; text-align: center; color: var(--humo); display: grid; gap: 18px; justify-items: center; }
.aviso { position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translate(-50%, 20px); padding: 14px 22px; background: var(--crema); color: var(--negro); border-radius: 2px; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s var(--suave); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.cerrar { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--linea-2); border-radius: 50%; }
.cerrar svg { width: 18px; height: 18px; fill: none; stroke: var(--crema); stroke-width: 1.6; stroke-linecap: round; }
.velo { position: fixed; inset: 0; z-index: 9999; background: var(--negro); pointer-events: all; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .rv { opacity: 1; transform: none; } html { scroll-behavior: auto; } }
html.llega body::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: var(--negro); }

.cab__cuenta[hidden] { display: none; }

/* FOTOS REALES · ocupan toda la tarjeta (la foto ya trae su propio fondo oscuro) */
.card__img .pf { padding: 0; }
.card__img .pf__img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__img .pf:has(.pf__img.ok) { padding: 0; }
.card:hover .card__img .pf:has(.pf__img.ok) { transform: scale(1.03); }
.prod__escena .pf:has(.pf__img.ok) { width: min(44vw, 560px); aspect-ratio: 4 / 5; border: 1px solid var(--linea); border-radius: 3px; overflow: hidden; }
.prod__escena .pf:has(.pf__img.ok) .pf__img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.linea .pf:has(.pf__img.ok) { padding: 0; overflow: hidden; }
.linea .pf:has(.pf__img.ok) .pf__img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .prod__escena .pf:has(.pf__img.ok) { width: min(78vw, 420px); } }


/* ---------- inicio ---------- */
.et { font: 600 .7rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--crema); }
.et::before { content: ""; display: block; width: 36px; height: 1px; background: var(--crema); margin-bottom: 20px; }
.cab.sobre-foto { --crema: #FFFFFF; background: none !important; border-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.cab.en-portada .logo { opacity: 0; }
.cab > * { text-shadow: none; }
.portada { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #111; }
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.34); transform-origin: 0% 46%; }
.portada__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .08) 24%, rgb(0 0 0 / .1) 70%, rgb(0 0 0 / .5) 100%); }
.marca-vuelo { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; pointer-events: none; }
.marca-vuelo__n { font: 300 clamp(2.2rem, 6vw, 6rem)/1 var(--serif); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: #FFFFFF; will-change: transform; text-shadow: 0 2px 40px rgb(0 0 0 / .35); }
.scroll-ind { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; color: #fff; transition: opacity .5s; }
.scroll-ind span { font: 600 .64rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.scroll-ind i { position: relative; width: 1px; height: 46px; background: rgb(255 255 255 / .35); overflow: hidden; display: block; }
.scroll-ind i::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: #fff; animation: baja 1.9s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes baja { 0% { top: -50%; } 70%, 100% { top: 100%; } }
.scroll-ind.oculto { opacity: 0; }
.enlace { display: inline-flex; align-items: center; gap: 10px; font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--crema); }
.enlace svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s var(--suave); }
.enlace:hover svg { transform: translateX(4px); }

/* catálogo */
.cat { padding: clamp(70px, 9vw, 130px) var(--pad); background: #fff; }
.cat__in { max-width: 1440px; margin: 0 auto; }
.cat__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(30px, 4vw, 56px); }
.cat__cab h2 { margin-top: 18px; font: 300 clamp(2.4rem, 5vw, 4.4rem)/1 var(--serif); letter-spacing: -.01em; }
.cat__cab h2 em { font-style: italic; }
.cat__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px) clamp(12px, 1.6vw, 24px); }
.cp { display: grid; gap: 4px; align-content: start; opacity: 0; transform: translateY(46px); transition: opacity 1s var(--suave), transform 1.1s var(--suave); transition-delay: calc(var(--i, 0) * 80ms); }
.cp.vista { opacity: 1; transform: none; }
.cp__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--grafito); margin-bottom: 12px; }
.cp__img .pf { position: absolute; inset: 0; display: grid; place-items: center; padding: 9% 16% 12%; transition: transform 1.1s var(--suave); }
.cp:hover .cp__img .pf { transform: scale(1.06); }
.cp__tag { position: absolute; top: 14px; left: 14px; z-index: 2; font: 600 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.cp__notas { position: absolute; inset: auto 0 0 0; padding: 40px 16px 16px; background: linear-gradient(0deg, rgb(255 255 255 / .96) 30%, rgb(255 255 255 / 0)); font: italic 400 1.05rem/1.25 var(--serif); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--suave); }
.cp:hover .cp__notas { opacity: 1; transform: none; }
.cp__marca { font: 600 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--humo); }
.cp__nom { font: 400 clamp(1.25rem, 1.8vw, 1.65rem)/1.1 var(--serif); }
.cp__pre { margin-top: 4px; font: 500 .85rem/1.2 var(--sans); }
@media (max-width: 1000px) { .cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat__cab { flex-direction: column; align-items: flex-start; } }

/* cinta que se mueve despacio hacia la izquierda */
.cinta { padding: clamp(60px, 8vw, 110px) 0; background: var(--grafito); overflow: hidden; }
.cinta__et { padding: 0 var(--pad); margin-bottom: 36px; }
.cinta__vent { overflow: hidden; }
.cinta__pista { display: flex; gap: clamp(10px, 1.1vw, 16px); width: max-content; padding-left: clamp(10px, 1.1vw, 16px); will-change: transform; backface-visibility: hidden; contain: layout paint; }
@keyframes cinta { to { transform: translateX(-50%); } }
.ct { flex: none; width: clamp(220px, 21vw, 320px); display: grid; gap: 4px; align-content: start; }
.ct__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; margin-bottom: 12px; }
.ct__img .pf { position: absolute; inset: 0; display: grid; place-items: center; padding: 9% 18% 12%; }
.ct__nom { font: 400 1.35rem/1.1 var(--serif); }
.ct__sub { font: 600 .62rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--humo); }
.ct--info { aspect-ratio: auto; align-content: center; min-height: 100%; padding: 34px 28px; background: #0B0B0B; color: #fff; }
.ct--info b { font: 300 clamp(1.8rem, 2.6vw, 2.5rem)/1.1 var(--serif); }
.ct--info span { margin-top: 14px; font: 600 .64rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
@media (prefers-reduced-motion: reduce) { .cp { opacity: 1; transform: none; } }

/* decants (sección simple) */
.decants__tam .btn { margin-top: 8px; justify-self: start; }
@media (max-width: 860px) {
  .portada__foto { transform: none; object-position: 56% 50%; }
  .gen p { max-width: 55%; }
}

/* pausa editorial */
.banner { color: #FFFFFF; --crema: #FFFFFF; --negro: #0B0B0B; position: relative; height: min(92svh, 940px); overflow: hidden; background: #111; }
.banner__foto { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 60% 50%; will-change: transform; }
.banner__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .1) 40%, rgb(0 0 0 / .62) 100%); }
.banner__txt { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(36px, 7vh, 80px); display: grid; gap: 20px; justify-items: start; }
.banner__txt h2 { font: 300 clamp(2rem, 4.6vw, 4rem)/1.05 var(--serif); letter-spacing: -.01em; }
@media (max-width: 860px) { .banner { height: 84svh; } .banner__foto { object-position: 72% 50%; } }

/* ---------- fotos de producto (fondo gris cálido, igual al de las imágenes) ---------- */
:root { --foto: #EAEAE8; }
.pf--foto { display: block; width: 100%; height: 100%; padding: 0 !important; background: var(--foto); }
.pf__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__img, .cp__img, .ct__img { background: var(--foto); }
.card__img .pf, .cp__img .pf, .ct__img .pf { padding: 0; }
.cp:hover .cp__img .pf, .card:hover .card__img .pf { transform: scale(1.04); }
.cp__notas { background: linear-gradient(0deg, rgb(234 234 232 / .97) 30%, rgb(234 234 232 / 0)); }
.prod__escena { background: var(--foto); }
.prod__escena .pf--foto { width: min(46vw, 640px); height: auto; aspect-ratio: 4 / 5; }
.prod__escena .frasco { filter: none; animation: none; }
.linea .pf--foto { padding: 0 !important; overflow: hidden; }
@media (max-width: 900px) { .prod__escena .pf--foto { width: min(86vw, 460px); } }
/* cinta con ambientes */
.ct--mood { width: auto; align-self: flex-start; }
.ct--mood img { display: block; height: clamp(300px, 28vw, 420px); width: auto; max-width: none; }
.ct__img { aspect-ratio: 4 / 5; width: 100%; }
.ct { width: auto; }
.ct > .ct__img { width: clamp(240px, 22vw, 340px); }
.ct__sub, .ct__nom { max-width: clamp(240px, 22vw, 340px); }
/* estilos con foto */
.gen { background: var(--foto); padding-bottom: 22px; }
.gen__foto { position: absolute; inset: 0 0 auto 0; width: 100%; height: calc(100% - 128px); object-fit: cover; object-position: 50% 62%; transition: transform 1.2s var(--suave); }
.gen:hover .gen__foto { transform: scale(1.04); }
.gen h3, .gen p, .gen span { position: relative; }
.gen h3, .gen p, .gen span { z-index: 2; }
@media (max-width: 800px) { .gen { min-height: 440px; } .gen__foto { object-position: 50% 60%; } }

/* ---------- más compacto: se aprovecha cada espacio ---------- */
.cat { padding: clamp(28px, 3.4vw, 52px) var(--pad) clamp(30px, 3.6vw, 56px); }
.cat__in { max-width: 1680px; }
.cat__cab { display: flex; justify-content: flex-start; align-items: baseline; gap: 22px; margin-bottom: clamp(14px, 1.8vw, 24px); }
.cat__cab .et { margin: 0; }
.cat__cab .et::before { display: none; }
.cat__cab h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.cat__grid { gap: clamp(8px, 1vw, 14px); }
.cp__img { margin-bottom: 8px; }
.cat__pie { margin: clamp(18px, 2.2vw, 30px) 0 0; text-align: center; }
.ver-todo { display: inline-flex; align-items: center; gap: 12px; padding: 0 0 7px; font: 600 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; border-bottom: 1px solid var(--crema); transition: gap .5s var(--suave); }
.ver-todo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ver-todo:hover { gap: 20px; }
.cinta { padding: clamp(24px, 3vw, 44px) 0 clamp(26px, 3.2vw, 46px); }
.cinta__et { margin-bottom: 16px; }
.banner { height: min(70svh, 700px); }
.gen { min-height: clamp(260px, 30vw, 400px); }
.generos { gap: clamp(8px, 1vw, 14px); }
.pie { padding: clamp(30px, 4vw, 52px) var(--pad) 20px; }
.pie__base { margin-top: 28px; padding-top: 18px; }
.decants { gap: clamp(20px, 4vw, 56px); }
.decants__fila { padding: 14px 0; }
.sec__in { max-width: 1680px; }
.col-hero { padding-top: 120px; padding-bottom: 28px; }
.col-lista { padding-top: 22px; padding-bottom: 60px; }
.grilla { gap: clamp(8px, 1vw, 14px); }
@media (max-width: 560px) { .cat__cab { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* =====================================================================
   STOCK MINIMALISTA · CINTA · DECANTS · PIE  (estilo demo-ropa: poco y limpio)
   ===================================================================== */
.cat { background: #F4F3EF; padding: clamp(40px, 5vw, 72px) var(--pad) clamp(34px, 4vw, 60px); }
.cat__in { max-width: 1680px; }
.cat__cab { display: grid; justify-items: center; gap: 16px; margin-bottom: clamp(20px, 2.6vw, 36px); text-align: center; }
.cat__linea { display: block; width: 44px; height: 1px; background: var(--crema); }
.cat__cab h2 { margin: 0; font: 300 clamp(2.4rem, 5vw, 4.4rem)/1 var(--serif); letter-spacing: -.01em; }
.cat__grid { gap: clamp(10px, 1.2vw, 16px); }
.cp { gap: 2px; padding: 10px 10px 18px; border: 1px solid var(--linea); border-radius: 20px; background: transparent; transition: opacity 1s var(--suave), transform 1.1s var(--suave), border-color .4s; transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s; }
.cp:hover { border-color: var(--linea-2); }
.cp__img { aspect-ratio: 4 / 5; border-radius: 12px; margin-bottom: 14px; }
.cp__nom { padding: 0 8px; font: 400 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--serif); }
.cp__pre { padding: 0 8px; font: 500 .88rem/1.2 var(--sans); letter-spacing: .04em; color: var(--humo); margin: 0; }
.cat__pie { margin-top: clamp(20px, 2.4vw, 34px); }

/* cinta épica: solo productos, foco en el del medio */
.cinta { position: relative; padding: clamp(34px, 4vw, 60px) 0 clamp(40px, 4.6vw, 68px); background: #0B0B0B; color: #fff; overflow: hidden; }
.cinta__fondo { position: absolute; left: 0; top: 50%; display: flex; width: max-content; transform: translate3d(0, -50%, 0); font: 300 clamp(9rem, 26vw, 26rem)/1 var(--serif); letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .1); white-space: nowrap; pointer-events: none; user-select: none; will-change: transform; }
.cinta__fondo span { padding-right: .5em; }
.cinta__vent { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.cinta__pista { gap: clamp(16px, 2vw, 32px); padding: 26px 0; }
.ct { flex: none; width: clamp(260px, 24vw, 400px); display: grid; gap: 16px; align-content: start; transform-origin: 50% 50%; will-change: transform, opacity; }
.ct > .ct__img { width: 100%; aspect-ratio: 4 / 5; margin: 0; border-radius: 14px; background: var(--foto); }
.ct__nom { max-width: none; text-align: center; font: 300 clamp(1.15rem, 1.6vw, 1.6rem)/1.1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ct__sub { display: none; }

/* decants */
.dec { padding: clamp(44px, 5.4vw, 80px) var(--pad) clamp(40px, 5vw, 72px); background: #fff; }
.dec__in { max-width: 1680px; margin: 0 auto; }
.dec__cab { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: clamp(24px, 3vw, 42px); }
.dec__cab h2 { margin: 0; max-width: 18ch; font: 300 clamp(2.2rem, 4.6vw, 4rem)/1.05 var(--serif); letter-spacing: -.01em; }
.dec__cab h2 em { font-style: italic; }
.dec__cab p { max-width: 46ch; color: var(--humo); }
.dec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--linea); }
.dec__item { display: grid; gap: 14px; align-content: space-between; min-height: clamp(220px, 26vw, 360px); padding: clamp(18px, 2.4vw, 36px); transition: background .5s var(--suave), color .5s var(--suave); }
.dec__item + .dec__item { border-left: 1px solid var(--linea); }
.dec__num { display: flex; align-items: baseline; gap: 12px; }
.dec__num b { font: 300 clamp(5rem, 13vw, 11rem)/.9 var(--serif); letter-spacing: -.04em; }
.dec__num i { font: 600 .8rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; font-style: normal; }
.dec__txt { font: 600 .7rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--humo); transition: color .5s; }
.dec__item:hover { background: #0B0B0B; color: #fff; }
.dec__item:hover .dec__txt { color: rgb(255 255 255 / .7); }
@media (max-width: 760px) { .dec__grid { grid-template-columns: minmax(0, 1fr); } .dec__item + .dec__item { border-left: 0; border-top: 1px solid var(--linea); } .dec__item { min-height: 160px; } }

/* pie */
.pie { --crema: #FFFFFF; --humo: rgb(255 255 255 / .6); --linea: rgb(255 255 255 / .16); padding: clamp(36px, 4vw, 60px) var(--pad) 18px; background: #0B0B0B; color: #fff; border-top: 0; overflow: hidden; }
.pie__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; max-width: 1680px; margin: 0 auto; }
.pie .pie__tag { font: 300 clamp(1.4rem, 2.2vw, 2rem)/1.2 var(--serif); color: #fff; }
.pie__cols { display: flex; gap: clamp(30px, 6vw, 100px); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie li, .pie li a { font: 500 .76rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .72); }
.pie li a:hover { color: #fff; }
.pie .pie__marca { margin: clamp(26px, 4vw, 56px) 0 0; font: 300 clamp(4rem, 19vw, 19rem)/.85 var(--serif); letter-spacing: .06em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .3); white-space: nowrap; user-select: none; }
.pie .pie__base { max-width: 1680px; margin: 14px auto 0; padding-top: 14px; border-top: 1px solid var(--linea); font-size: .74rem; color: var(--humo); }
.pie .pie__base b { color: #fff; font-weight: 600; }
.pie .pie__base a { color: #fff; text-decoration: underline; }
@media (max-width: 700px) { .pie__cols { gap: 28px; } }

/* =====================================================================
   TARJETAS DE COLECCIÓN (mismo estilo minimalista) + CELULAR
   ===================================================================== */
.card { display: grid; gap: 2px; align-content: start; padding: 10px 10px 18px; border: 1px solid var(--linea); border-radius: 20px; transition: border-color .4s; }
.card:hover { border-color: var(--linea-2); }
.card .card__img { margin-bottom: 14px; border: 0; border-radius: 12px; background: var(--foto); }
.card__nombre { padding: 0 8px; font: 400 clamp(1.3rem, 1.8vw, 1.75rem)/1.1 var(--serif); }
.card__precio { margin: 0; padding: 0 8px; font: 500 .88rem/1.2 var(--sans); letter-spacing: .04em; color: var(--humo); }
.col-lista { background: #F4F3EF; max-width: none; }
.col-lista > * { max-width: 1680px; margin-left: auto; margin-right: auto; }
/* encabezado: blanco (sin color) cuando pasa sobre el contenido, para que no se pise */
.cab.sol { background: rgb(255 255 255 / .96) !important; border-bottom: 1px solid var(--linea) !important; }

@media (max-width: 760px) {
  :root { --pad: 14px; }
  .cab { padding-block: 10px; }
  .logo { font-size: 1.15rem; }
  /* portada */
  .marca-vuelo__n { font-size: clamp(2rem, 10vw, 2.8rem); letter-spacing: .36em; padding-left: .36em; }
  /* catálogo */
  .cat { padding: 30px var(--pad) 34px; }
  .cat__cab h2 { font-size: 2.1rem; }
  .cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cp, .card { padding: 6px 6px 12px; border-radius: 14px; }
  .cp__img, .card .card__img { border-radius: 9px; margin-bottom: 10px; }
  .cp__nom, .card__nombre { padding: 0 5px; font-size: 1.12rem; }
  .cp__pre, .card__precio { padding: 0 5px; font-size: .78rem; }
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* cinta */
  .cinta { padding: 22px 0 28px; }
  .ct { width: 64vw; gap: 10px; }
  .cinta__pista { padding: 14px 0; gap: 12px; }
  .ct__nom { font-size: 1rem; }
  /* retrato: más bajo para que entre el logo completo */
  .banner { height: 54svh; }
  .banner__foto { object-position: 50% 50%; }
  .banner__txt { bottom: 22px; gap: 12px; }
  .banner__txt h2 { font-size: 1.7rem; }
  /* estilos: foto a la izquierda, texto a la derecha */
  .generos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gen { min-height: 0; display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; align-content: center; gap: 4px 16px; padding: 0 14px 0 0; border-radius: 14px; overflow: hidden; }
  .gen .gen__foto { position: static; grid-row: 1 / 4; width: 100%; height: auto; aspect-ratio: 4 / 5; object-position: 50% 55%; }
  .gen h3 { font-size: 1.9rem; align-self: end; }
  .gen p { max-width: none; margin: 0; font-size: .85rem; }
  .gen span { margin: 6px 0 0; align-self: start; }
  /* decants: tres columnas compactas */
  .dec { padding: 34px var(--pad); }
  .dec__cab h2 { font-size: 2rem; }
  .dec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dec__item { min-height: 150px; padding: 14px 10px; gap: 10px; }
  .dec__item + .dec__item { border-left: 1px solid var(--linea); border-top: 0; }
  .dec__num { gap: 4px; flex-wrap: wrap; }
  .dec__num b { font-size: 3.2rem; }
  .dec__num i { font-size: .62rem; }
  .dec__txt { font-size: .58rem; letter-spacing: .14em; }
  /* pie */
  .pie__top { flex-direction: column; gap: 20px; }
  .pie .pie__tag { font-size: 1.35rem; }
  /* colección: los filtros en una sola fila que se desliza, sin quedar fijos */
  .col-hero { padding: 92px var(--pad) 18px; }
  .col-hero h1 { font-size: 2.6rem; }
  .filtros { position: static; }
  .filtros__in { flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 10px var(--pad); scrollbar-width: none; }
  .filtros__in::-webkit-scrollbar { display: none; }
  .filtros__in > * { flex: none; }
  .chips { flex-wrap: nowrap; }
  .campo input { min-width: 150px; }
  .col-lista { padding: 16px var(--pad) 40px; }
  /* ficha */
  .prod__escena { height: auto; padding: 70px 0 10px; }
  .prod__escena .pf--foto { width: 100%; border-radius: 0; }
  .prod__info { padding: 22px var(--pad) 40px; gap: 16px; }
  .prod h1 { font-size: 2.5rem; }
  .rel { padding: 36px var(--pad) 50px; }
  .rel .sec__in .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compra { grid-template-columns: auto minmax(0, 1fr); }
  .compra .btn { padding-inline: 12px; font-size: .64rem; }
}

/* celular: todo en una fila que se desliza con el dedo (nada de 2 y 2) */
html { overflow-x: clip; }
@media (max-width: 760px) {
  .cat__grid, .grilla, .generos, .dec__grid {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 6px;
  }
  .cat__grid::-webkit-scrollbar, .grilla::-webkit-scrollbar, .generos::-webkit-scrollbar, .dec__grid::-webkit-scrollbar { display: none; }
  .cat__grid > *, .grilla > *, .generos > * { flex: 0 0 72%; scroll-snap-align: start; }
  .dec__grid > * { flex: 0 0 58%; scroll-snap-align: start; }
  .cp__nom, .card__nombre { font-size: 1.3rem; }
  .cp__pre, .card__precio { font-size: .84rem; }
  /* estilos: en la fila vuelven a ser tarjetas verticales */
  .gen { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 0 0 16px; border-radius: 14px; }
  .gen .gen__foto { grid-row: auto; width: 100%; aspect-ratio: 4 / 5; }
  .gen h3, .gen p, .gen span { padding: 0 14px; }
  .gen h3 { margin-top: 10px; font-size: 1.8rem; }
  /* decants: columnas con borde propio dentro de la fila */
  .dec__grid { border-block: 0; }
  .dec__item, .dec__item + .dec__item { border: 1px solid var(--linea); border-radius: 14px; min-height: 180px; }
  .dec__num b { font-size: 4rem; }
  .dec__txt { font-size: .62rem; }
  .col-lista .grilla { margin-top: 4px; }
}

/* cubre la página nueva hasta que los cuadraditos se abren */
html.llega body::after { background: #0B0B0B; }

/* =====================================================================
   FICHA MINIMALISTA (como la de la tienda de ropa)
   ===================================================================== */
.fi { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding: 74px var(--pad) 28px; background: var(--foto); }
.fi__top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fi__volver { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--linea-2); border-radius: 8px; font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: background .3s, color .3s; }
.fi__volver svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fi__volver:hover { background: var(--crema); color: #fff; }
.fi__migas { display: flex; gap: 8px; font: 600 .62rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--humo); }
.fi__migas b { color: var(--crema); }
.fi__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 48px); }
.fi__titulo h1 { font: 400 clamp(2.4rem, 4vw, 3.8rem)/1.02 var(--serif); letter-spacing: -.01em; }
.fi__precio { margin-top: 10px; font: 500 1.05rem/1 var(--sans); letter-spacing: .04em; }
.fi__notas { margin-top: 16px; font: italic 400 1.1rem/1.3 var(--serif); color: var(--humo); }
.fi__foto { display: grid; place-items: center; }
.fi__foto .pf--foto { width: min(100%, 560px); height: auto; aspect-ratio: 4 / 5; background: transparent; }
.fi__compra { display: grid; gap: 14px; justify-items: start; }
.fi__lbl { font-size: .82rem; color: var(--humo); }
.fi__lbl b { color: var(--crema); font-weight: 600; }
.fi__tams { display: flex; flex-wrap: wrap; gap: 8px; }
.fi__tams button { min-width: 64px; padding: 11px 14px; border: 1px solid var(--linea-2); border-radius: 8px; background: transparent; font: 600 .76rem/1 var(--sans); letter-spacing: .04em; transition: background .3s, color .3s, border-color .3s; }
.fi__tams button.on { background: var(--crema); border-color: var(--crema); color: #fff; }
.fi__fila { display: flex; gap: 10px; align-items: stretch; }
.fi__cant { display: inline-flex; align-items: center; border: 1.5px solid var(--crema); border-radius: 10px; }
.fi__cant button { width: 40px; height: 46px; background: none; border: 0; font-size: 1.1rem; }
.fi__cant output { min-width: 18px; text-align: center; font-weight: 600; }
.fi__btn { padding: 0 22px; border: 0; border-radius: 8px; background: var(--crema); color: #fff; font: 700 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; transition: opacity .3s; }
.fi__btn:hover { opacity: .85; }
.fi__wsp { font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--humo); border-bottom: 1px solid var(--linea-2); padding-bottom: 5px; }
.fi__wsp:hover { color: var(--crema); }
.rel { padding: clamp(36px, 4vw, 60px) var(--pad); background: #F4F3EF; }
.rel .cat__cab { margin-bottom: clamp(18px, 2vw, 28px); }
@media (max-width: 900px) {
  .fi { padding-top: 64px; min-height: 0; }
  .fi__migas { display: none; }
  .fi__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 12px; }
  .fi__titulo { text-align: center; order: 0; }
  .fi__titulo h1 { font-size: 2.3rem; }
  .fi__notas { margin-top: 8px; font-size: 1rem; }
  .fi__foto { order: 1; }
  .fi__foto .pf--foto { width: min(88vw, 440px); }
  .fi__compra { order: 2; justify-items: stretch; }
  .fi__tams button { flex: 1; }
  .fi__btn { flex: 1; }
  .fi__wsp { justify-self: center; }
}

/* retrato: sale de la banda negra con un difuminado largo, sin corte */
.banner__velo { background:
  linear-gradient(180deg, #0B0B0B 0%, rgb(11 11 11 / .86) 12%, rgb(11 11 11 / .45) 26%, rgb(11 11 11 / 0) 42%),
  linear-gradient(180deg, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .66) 100%); }
.cinta { padding-bottom: clamp(20px, 2.4vw, 36px); }
@media (max-width: 760px) {
  .banner { height: 62svh; }
  .banner__foto { inset: 0; height: 100%; transform: none !important; object-position: 50% 42%; }
  .banner__velo { background:
    linear-gradient(180deg, #0B0B0B 0%, rgb(11 11 11 / .8) 14%, rgb(11 11 11 / 0) 40%),
    linear-gradient(180deg, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .72) 100%); }
}
.banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: clamp(60px, 9vh, 110px); background: linear-gradient(180deg, rgb(245 245 243 / 0), #F5F5F3); pointer-events: none; z-index: 1; }
.banner__txt { z-index: 2; bottom: clamp(70px, 11vh, 120px); }
@media (max-width: 760px) { .banner__txt { bottom: 64px; } }
/* el logo del encabezado queda en el centro exacto de la pantalla (un ícono a la izquierda, dos a la derecha) */
.cab { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
.cab__menu { justify-self: start; }
.logo { justify-self: center; }
.cab__acc { justify-self: end; }

/* portada nueva: la cara a la derecha, el logo cae sobre el pelo oscuro */
.portada__foto { transform: none; object-position: 50% 40%; }
@media (max-width: 860px) { .portada__foto { object-position: 74% 50%; } }

/* segundo retrato: entra y sale fundido con las secciones claras */
.banner--claro .banner__foto { object-position: 40% 42%; }
.banner--claro .banner__velo { background:
  linear-gradient(180deg, #F5F5F3 0%, rgb(245 245 243 / .7) 8%, rgb(245 245 243 / 0) 26%),
  linear-gradient(90deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 55%),
  linear-gradient(180deg, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .55) 100%); }
.banner--claro::after { background: linear-gradient(180deg, rgb(255 255 255 / 0), #FFFFFF); }
@media (max-width: 760px) { .banner--claro .banner__foto { object-position: 56% 50%; } }

/* pie ordenado: frase · menú · contacto, el logo gigante y una línea final */
.pie { padding: clamp(40px, 5vw, 72px) var(--pad) 16px; }
.pie__in { max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: start; gap: 30px; }
.pie .pie__tag { margin: 0; font: 300 clamp(1.5rem, 2.2vw, 2.1rem)/1.2 var(--serif); color: #fff; }
.pie__nav { display: grid; gap: 12px; justify-items: start; }
.pie__nav a { font: 500 .74rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .75); transition: color .3s; }
.pie__nav a:hover { color: #fff; }
.pie__contacto { display: grid; gap: 8px; justify-items: start; }
.pie .pie__contacto p { margin: 0; font: 400 .9rem/1.4 var(--sans); color: rgb(255 255 255 / .65); }
.pie__wsp { margin-top: 8px; padding: 12px 18px; border: 1px solid rgb(255 255 255 / .35); border-radius: 8px; font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; transition: background .3s, color .3s; }
.pie__wsp:hover { background: #fff; color: #0B0B0B; }
.pie .pie__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin: 10px auto 0; font-size: .72rem; }
@media (max-width: 760px) {
  .pie { padding-top: 38px; text-align: center; }
  .pie__in { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
  .pie .pie__tag { font-size: 1.45rem; }
  .pie__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
  .pie__nav a { font-size: .68rem; }
  .pie__contacto { justify-items: center; gap: 4px; }
  .pie .pie__contacto p { font-size: .86rem; }
  .pie__wsp { margin-top: 12px; }
  .pie .pie__marca { margin-top: 28px; font-size: 21vw; }
  .pie .pie__base { flex-direction: column; align-items: center; text-align: center; font-size: .68rem; }
}
/* retratos: el botón con borde claro sobre la foto */
.banner .btn { border-color: rgb(255 255 255 / .55); color: #fff; }
.banner .btn:hover { background: #fff; color: #0B0B0B; border-color: #fff; }
@media (max-width: 760px) {
  /* el primer retrato trae LÚMINA en el medio: el texto va arriba, sobre la parte oscura, sin chocarlo */
  #banner .banner__txt { top: 64px; bottom: auto; }
  #banner .banner__txt h2 { font-size: 1.6rem; }
  .banner .btn { padding: 13px 20px; }
}
/* recuadro de vidrio para el texto de los retratos */
.banner__txt { right: auto; max-width: min(440px, calc(100% - 2 * var(--pad))); padding: clamp(20px, 2.2vw, 30px); gap: 14px;
  background: linear-gradient(135deg, rgb(255 255 255 / .12), rgb(255 255 255 / .03)); border: 1px solid rgb(255 255 255 / .22); border-radius: 18px;
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.banner__txt .et { color: rgb(255 255 255 / .8); }
.banner__txt .et::before { display: none; }
.banner__txt h2 { color: #fff; }
.banner .btn { margin-top: 4px; padding: 14px 22px; border: 0; border-radius: 10px; background: #fff; color: #0B0B0B; gap: 12px; }
.banner .btn::after { content: "→"; font-size: 1rem; letter-spacing: 0; transition: transform .4s var(--suave); }
.banner .btn:hover { background: #fff; color: #0B0B0B; }
.banner .btn:hover::after { transform: translateX(4px); }
@media (max-width: 760px) {
  .banner__txt { left: var(--pad); padding: 18px; border-radius: 14px; }
  #banner .banner__txt { top: 70px; }
}
.banner__txt { max-width: min(370px, calc(100% - 2 * var(--pad))); bottom: clamp(70px, 10vh, 110px); }
.banner__txt h2 { font-size: clamp(1.7rem, 2.5vw, 2.4rem); }
/* celular: recuadros chicos y compactos */
@media (max-width: 760px) {
  .banner__txt { max-width: 224px; padding: 12px 14px 14px; gap: 6px; border-radius: 12px; bottom: 58px; }
  #banner .banner__txt { top: auto; bottom: 58px; }
  .banner__txt .et { font-size: .52rem; letter-spacing: .26em; }
  .banner__txt h2, #banner .banner__txt h2 { font-size: 1.12rem; line-height: 1.15; }
  .banner .btn { margin-top: 4px; padding: 9px 12px; border-radius: 7px; font-size: .56rem; letter-spacing: .16em; gap: 8px; }
  .banner .btn::after { font-size: .8rem; }
}
/* portada: la cara más hacia el centro */
.portada__foto { transform: scale(1.16); transform-origin: 100% 42%; object-position: 100% 42%; }
@media (max-width: 860px) { .portada__foto { transform: none; object-position: 87% 50%; } }
/* portada: vuelve al encuadre anterior */
.portada__foto { transform: none; object-position: 50% 40%; }
@media (max-width: 860px) { .portada__foto { object-position: 74% 50%; } }
/* el texto oculto del buscador queda dentro de su campo (antes estiraba la página hacia el costado) */
.campo { position: relative; }
.sr { left: 0; top: 0; }

/* celular: el primer retrato usa la versión sin logo pegado, con la chica centrada */
@media (max-width: 760px) {
  #banner .banner__foto { object-position: 94% 50%; }
}

/* ficha en celular: foto arriba, nombre y precio en una línea, y la compra a mano sin bajar */
@media (max-width: 900px) {
  .fi { padding: 62px var(--pad) 22px; }
  .fi__top { gap: 0; }
  .fi__volver { padding: 8px 12px; font-size: .56rem; letter-spacing: .18em; border-radius: 7px; }
  .fi__cuerpo { gap: 12px; padding-top: 8px; }
  .fi__foto { order: 0; }
  .fi__foto .pf--foto { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: var(--foto); }
  .fi__foto .pf__foto { transform: scale(1.28); }
  .fi__titulo { order: 1; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; }
  .fi__titulo h1 { font-size: 1.9rem; }
  .fi__precio { margin: 0; font-size: 1rem; }
  .fi__notas { grid-column: 1 / -1; margin: 0; font-size: .95rem; }
  .fi__compra { order: 2; gap: 10px; }
  .fi__lbl { display: none; }
  .fi__tams button { padding: 11px 8px; }
  .fi__cant button { height: 48px; }
  .fi__wsp { margin-top: 2px; font-size: .6rem; }
}

/* retratos: solo la foto y un botón, centrado abajo */
.banner__txt, #banner .banner__txt { left: 0; right: 0; top: auto; bottom: clamp(64px, 10vh, 110px); max-width: none; margin: 0 auto; padding: 0; justify-items: center;
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.banner .btn { padding: 15px 26px; border-radius: 10px; font-size: .68rem; }
#banner .banner__foto { object-position: 62% 50%; }
@media (max-width: 760px) {
  .banner__txt, #banner .banner__txt { bottom: 56px; }
  .banner .btn { padding: 12px 20px; font-size: .6rem; }
  #banner .banner__foto { object-position: 94% 50%; }
}

/* pie mínimo */
.pie { padding: clamp(34px, 4vw, 56px) var(--pad) 16px; text-align: center; }
.pie .pie__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(20px, 3vw, 44px); }
.pie .pie__marca { margin: clamp(18px, 3vw, 40px) 0 0; }
.pie .pie__base { display: block; max-width: none; margin: 10px 0 0; padding-top: 12px; text-align: center; font-size: .7rem; }

/* pie: menú y WhatsApp, la marca gigante a todo el ancho y una línea final */
.pie { padding: clamp(26px, 3vw, 40px) var(--pad) 16px; text-align: left; overflow: hidden; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: clamp(16px, 2vw, 24px); border-bottom: 1px solid rgb(255 255 255 / .14); }
.pie .pie__nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px clamp(18px, 2.6vw, 40px); }
.pie .pie__nav a { position: relative; font: 500 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .72); }
.pie .pie__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--suave); }
.pie .pie__nav a:hover { color: #fff; }
.pie .pie__nav a:hover::after { transform: scaleX(1); }
.pie .pie__wsp { margin: 0; padding: 11px 16px; border: 1px solid rgb(255 255 255 / .3); border-radius: 30px; font: 600 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; white-space: nowrap; transition: background .3s, color .3s; }
.pie .pie__wsp span { display: inline-block; margin-left: 6px; transition: transform .4s var(--suave); }
.pie .pie__wsp:hover { background: #fff; color: #0B0B0B; }
.pie .pie__wsp:hover span { transform: translateX(3px); }
.pie .pie__marca { margin: clamp(10px, 1.6vw, 22px) 0 0; font: 300 calc((100vw - 2 * var(--pad)) / 4.6)/.82 var(--serif); letter-spacing: .02em; text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 0; background: linear-gradient(180deg, #FFFFFF 10%, rgb(255 255 255 / .55) 55%, rgb(255 255 255 / .04) 100%); -webkit-background-clip: text; background-clip: text; }
.pie .pie__marca.rv { transform: translateY(40px); transition: opacity 1.4s var(--suave), transform 1.4s var(--suave); }
.pie .pie__marca.rv.vista { transform: none; }
.pie .pie__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .14); font-size: .68rem; letter-spacing: .06em; color: rgb(255 255 255 / .5); text-align: left; }
.pie .pie__base a { color: rgb(255 255 255 / .8); text-decoration: underline; }
@media (max-width: 760px) {
  .pie__fila { flex-direction: column; gap: 18px; }
  .pie .pie__nav { justify-content: center; }
  .pie .pie__base { justify-content: center; text-align: center; }
}

/* ===== v79: encabezado más chico, menú lateral pegado al borde, bolsa mínima, pie simple ===== */
.cab { padding-block: 8px !important; }
.cab .cab__btn { width: 38px; height: 38px; }
.cab .cab__btn svg { width: 19px; height: 19px; }
.logo { font-size: 1.3rem; }
@media (max-width: 860px) { .cab { padding-block: 6px !important; } .logo { font-size: 1rem; } .cab .cab__btn svg { width: 18px; height: 18px; } }

/* menú: panel a lo alto desde el borde izquierdo, detrás de los íconos del encabezado */
.cab__nav { z-index: -1; position: fixed; inset: 0 auto 0 0; top: 0; width: min(380px, 86vw); height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 0; padding: 92px var(--pad) 30px; background: #FFFFFF; border: 0; border-radius: 0; box-shadow: 0 0 60px rgb(0 0 0 / .14); opacity: 1; visibility: hidden; transform: translateX(-102%); transition: transform .6s var(--suave), visibility 0s .6s; }
.cab__nav.abierto { visibility: visible; transform: none; transition: transform .6s var(--suave), visibility 0s; }
.cab__links { display: grid; }
.cab__nav .cab__links a { padding: 10px 0; border: 0; font: 300 clamp(2rem, 3vw, 2.6rem)/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: #0B0B0B; opacity: 0; transform: translateX(-14px); transition: opacity .5s, transform .6s var(--suave), color .3s; }
.cab__nav.abierto .cab__links a { opacity: 1; transform: none; }
.cab__nav.abierto .cab__links a:nth-child(2) { transition-delay: .05s; } .cab__nav.abierto .cab__links a:nth-child(3) { transition-delay: .1s; }
.cab__nav.abierto .cab__links a:nth-child(4) { transition-delay: .15s; } .cab__nav.abierto .cab__links a:nth-child(5) { transition-delay: .2s; }
.cab__links:hover a { color: #9A9A9A; }
.cab__nav .cab__links a:hover { color: #0B0B0B; }
.cab__nav .cab__wsp { align-self: flex-start; padding: 0; border: 0; font: 600 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #0B0B0B; opacity: .7; }
.cab__nav .cab__wsp:hover { opacity: 1; color: #0B0B0B; }
.cab.menu-on .cab__menu { color: #0B0B0B; text-shadow: none; }
.cab__menu svg path { transition: transform .45s var(--suave); transform-origin: 12px 12px; }
.cab.menu-on .cab__menu .l1 { transform: translateY(3px) rotate(45deg); }
.cab.menu-on .cab__menu .l2 { transform: translateY(-3px) rotate(-45deg); }
.menu-velo { position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / .35); opacity: 0; pointer-events: none; transition: opacity .5s; }
.menu-velo.on { opacity: 1; pointer-events: auto; }

/* bolsa mínima, blanca como en ropa */
.bolsa { --crema: #0B0B0B; --humo: #7A7A7A; --linea: rgb(11 11 11 / .1); --linea-2: rgb(11 11 11 / .18); width: min(420px, 100vw); background: #FFFFFF; color: #0B0B0B; border-left: 0; }
.bolsa::backdrop { background: rgb(0 0 0 / .35); }
.bolsa__cab { padding: 16px 22px; }
.bolsa__cab h2 { font: 300 1.5rem/1 var(--serif); }
.bolsa .cerrar { width: 36px; height: 36px; border: 0; }
.bolsa .cerrar svg { stroke: #0B0B0B; }
.bolsa__cuerpo { padding: 4px 22px; }
.linea { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 16px 0; }
.linea .pf { width: 72px; border-radius: 6px; background: var(--foto); }
.linea__t { display: grid; gap: 2px; justify-items: start; }
.linea__t b { font: 400 1.1rem/1.15 var(--serif); }
.linea__t small { font-size: .76rem; color: var(--humo); }
.linea__t .mini { margin-top: 8px; border-radius: 30px; border-color: var(--linea-2); }
.linea__der { gap: 6px; font-size: .9rem; }
.bolsa__pie { gap: 12px; padding: 16px 22px 22px; background: #FFFFFF; border-top: 1px solid var(--linea); }
.bolsa__ent { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--linea-2); border-radius: 30px; }
.bolsa__ent label { cursor: pointer; }
.bolsa__ent input { position: absolute; opacity: 0; pointer-events: none; }
.bolsa__ent span { display: block; padding: 10px; border-radius: 30px; text-align: center; font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--humo); transition: background .3s, color .3s; }
.bolsa__ent input:checked + span { background: #0B0B0B; color: #FFFFFF; }
.bolsa__ent input:focus-visible + span { outline: 2px solid #0B0B0B; outline-offset: 2px; }
.bolsa .bolsa__nombre { padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--linea-2); border-radius: 0; color: #0B0B0B; font: 400 .92rem/1.2 var(--sans); }
.bolsa .bolsa__nombre:focus { outline: none; border-color: #0B0B0B; }
.bolsa__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.bolsa__total span { font: 600 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.bolsa__total b { font: 400 1.6rem/1 var(--serif); }
.bolsa__nota { margin: -6px 0 0; font-size: .74rem; color: var(--humo); text-align: right; }
.bolsa .bolsa__wsp { padding: 17px; border-radius: 10px; border-color: #0B0B0B; background: #0B0B0B; color: #FFFFFF; }
.bolsa .bolsa__wsp:hover { background: #2A2A2A; }

/* pie: una fila y una línea */
.pie { padding: clamp(28px, 3vw, 40px) var(--pad) 18px !important; text-align: left; }
.pie .pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid rgb(255 255 255 / .14); }
.pie .pie__logo { font: 300 1.3rem/1 var(--serif); letter-spacing: .34em; text-transform: uppercase; color: #FFFFFF; }
.pie .pie__nav { gap: 10px clamp(22px, 3vw, 44px); }
.pie .pie__nav a { font: 400 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: none; }
.pie .pie__base { display: block; margin: 0; padding-top: 16px; border: 0; font-size: .7rem; letter-spacing: .04em; color: rgb(255 255 255 / .45); }
.pie .pie__base a { color: rgb(255 255 255 / .7); }
@media (max-width: 700px) {
  .pie { text-align: center; }
  .pie .pie__fila { flex-direction: column; gap: 18px; }
  .pie .pie__nav { justify-content: center; }
}

/* elegí por estilo: el frasco entero, sin recorte */
.gen .gen__foto { object-fit: contain; object-position: 50% 100%; padding-top: 18px; box-sizing: border-box; }
@media (max-width: 800px) { .gen .gen__foto { object-position: 50% 50%; padding: 14px 0 0; } }
.banner--claro { background: #E9E9E7; }
.bolsa input.bolsa__nombre[type="text"] { padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--linea-2); border-radius: 0; }
.menu-abierto .marca-vuelo { opacity: 0 !important; transition: opacity .3s; }
@media (max-width: 600px) {
  .cab__nav { width: 100vw; box-shadow: none; padding-top: 84px; }
  .cab.menu-on, .cab.menu-on.sobre-foto { --crema: #0B0B0B; }
}
@media (min-width: 801px) { .gen { min-height: clamp(400px, 38vw, 540px); } }

/* ===== v81: menos aire entre secciones ===== */
@media (min-width: 761px) {
  .cat { padding-top: 40px !important; padding-bottom: 36px !important; }
  .cinta { padding-top: 18px !important; padding-bottom: 18px !important; }
  .cinta__pista { padding-block: 8px !important; }
  .banner { height: min(62svh, 560px); }
  .sec.sec--claro { padding-block: 40px !important; }
  .sec__in > .titulo, .sec__in > header { margin-bottom: 0; }
  .dec { padding: 40px var(--pad) 44px !important; }
  .dec__cab { gap: 10px; margin-bottom: 24px; }
  .dec__item { min-height: 0; gap: 34px; padding: 24px 28px; }
  .rel { padding-block: 36px !important; }
  .col-hero { padding-top: 84px !important; }
  .fi { padding-top: 62px !important; }
  .fi__cuerpo { padding-top: 0 !important; margin-top: 0; }
  .fi__foto .pf--foto { width: min(100%, 480px); }
}
@media (min-width: 801px) { .gen { min-height: clamp(360px, 32vw, 460px); } }
@media (max-width: 760px) {
  .banner { height: 46svh; }
  .dec__item, .dec__item + .dec__item { min-height: 0; gap: 28px; }
  .col-hero { padding-top: 70px !important; }
  .rel { padding-block: 28px 34px !important; }
}
@media (min-width: 761px) {
  .fi { min-height: 0; padding-bottom: 24px !important; }
  .fi__cuerpo { padding-top: 14px !important; }
  .fi__foto .pf--foto { width: min(100%, 440px); }
}
#catalogo { padding-top: 28px !important; }
@media (max-width: 760px) { #catalogo { padding-top: 18px !important; } }
/* la última foto se funde con el pie negro */
#banner2::after { background: linear-gradient(180deg, rgb(11 11 11 / 0), #0B0B0B); }

/* ===== v85: difuminados suaves (curva, sin bandas) ===== */
.banner::after { display: none; }
#banner .banner__velo { background:
  linear-gradient(180deg, rgb(11 11 11 / 1.000) 0.0%, rgb(11 11 11 / 0.980) 3.8%, rgb(11 11 11 / 0.926) 7.7%, rgb(11 11 11 / 0.844) 11.5%, rgb(11 11 11 / 0.741) 15.3%, rgb(11 11 11 / 0.624) 19.2%, rgb(11 11 11 / 0.500) 23.0%, rgb(11 11 11 / 0.376) 26.8%, rgb(11 11 11 / 0.259) 30.7%, rgb(11 11 11 / 0.156) 34.5%, rgb(11 11 11 / 0.074) 38.3%, rgb(11 11 11 / 0.020) 42.2%, rgb(11 11 11 / 0.000) 46.0%),
  linear-gradient(0deg, rgb(245 245 243 / 1.000) 0.0%, rgb(245 245 243 / 0.980) 2.8%, rgb(245 245 243 / 0.926) 5.7%, rgb(245 245 243 / 0.844) 8.5%, rgb(245 245 243 / 0.741) 11.3%, rgb(245 245 243 / 0.624) 14.2%, rgb(245 245 243 / 0.500) 17.0%, rgb(245 245 243 / 0.376) 19.8%, rgb(245 245 243 / 0.259) 22.7%, rgb(245 245 243 / 0.156) 25.5%, rgb(245 245 243 / 0.074) 28.3%, rgb(245 245 243 / 0.020) 31.2%, rgb(245 245 243 / 0.000) 34.0%); }
#banner2 .banner__velo { background:
  linear-gradient(180deg, rgb(245 245 243 / 1.000) 0.0%, rgb(245 245 243 / 0.980) 3.3%, rgb(245 245 243 / 0.926) 6.7%, rgb(245 245 243 / 0.844) 10.0%, rgb(245 245 243 / 0.741) 13.3%, rgb(245 245 243 / 0.624) 16.7%, rgb(245 245 243 / 0.500) 20.0%, rgb(245 245 243 / 0.376) 23.3%, rgb(245 245 243 / 0.259) 26.7%, rgb(245 245 243 / 0.156) 30.0%, rgb(245 245 243 / 0.074) 33.3%, rgb(245 245 243 / 0.020) 36.7%, rgb(245 245 243 / 0.000) 40.0%),
  linear-gradient(0deg, rgb(11 11 11 / 1.000) 0.0%, rgb(11 11 11 / 0.980) 3.3%, rgb(11 11 11 / 0.926) 6.7%, rgb(11 11 11 / 0.844) 10.0%, rgb(11 11 11 / 0.741) 13.3%, rgb(11 11 11 / 0.624) 16.7%, rgb(11 11 11 / 0.500) 20.0%, rgb(11 11 11 / 0.376) 23.3%, rgb(11 11 11 / 0.259) 26.7%, rgb(11 11 11 / 0.156) 30.0%, rgb(11 11 11 / 0.074) 33.3%, rgb(11 11 11 / 0.020) 36.7%, rgb(11 11 11 / 0.000) 40.0%),
  linear-gradient(90deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / 0) 50%); }
@media (max-width: 760px) {
  #banner .banner__velo { background: linear-gradient(180deg, rgb(11 11 11 / 1.000) 0.0%, rgb(11 11 11 / 0.980) 3.3%, rgb(11 11 11 / 0.926) 6.7%, rgb(11 11 11 / 0.844) 10.0%, rgb(11 11 11 / 0.741) 13.3%, rgb(11 11 11 / 0.624) 16.7%, rgb(11 11 11 / 0.500) 20.0%, rgb(11 11 11 / 0.376) 23.3%, rgb(11 11 11 / 0.259) 26.7%, rgb(11 11 11 / 0.156) 30.0%, rgb(11 11 11 / 0.074) 33.3%, rgb(11 11 11 / 0.020) 36.7%, rgb(11 11 11 / 0.000) 40.0%), linear-gradient(0deg, rgb(245 245 243 / 1.000) 0.0%, rgb(245 245 243 / 0.980) 2.5%, rgb(245 245 243 / 0.926) 5.0%, rgb(245 245 243 / 0.844) 7.5%, rgb(245 245 243 / 0.741) 10.0%, rgb(245 245 243 / 0.624) 12.5%, rgb(245 245 243 / 0.500) 15.0%, rgb(245 245 243 / 0.376) 17.5%, rgb(245 245 243 / 0.259) 20.0%, rgb(245 245 243 / 0.156) 22.5%, rgb(245 245 243 / 0.074) 25.0%, rgb(245 245 243 / 0.020) 27.5%, rgb(245 245 243 / 0.000) 30.0%); }
  #banner2 .banner__velo { background: linear-gradient(180deg, rgb(245 245 243 / 1.000) 0.0%, rgb(245 245 243 / 0.980) 2.8%, rgb(245 245 243 / 0.926) 5.7%, rgb(245 245 243 / 0.844) 8.5%, rgb(245 245 243 / 0.741) 11.3%, rgb(245 245 243 / 0.624) 14.2%, rgb(245 245 243 / 0.500) 17.0%, rgb(245 245 243 / 0.376) 19.8%, rgb(245 245 243 / 0.259) 22.7%, rgb(245 245 243 / 0.156) 25.5%, rgb(245 245 243 / 0.074) 28.3%, rgb(245 245 243 / 0.020) 31.2%, rgb(245 245 243 / 0.000) 34.0%), linear-gradient(0deg, rgb(11 11 11 / 1.000) 0.0%, rgb(11 11 11 / 0.980) 3.0%, rgb(11 11 11 / 0.926) 6.0%, rgb(11 11 11 / 0.844) 9.0%, rgb(11 11 11 / 0.741) 12.0%, rgb(11 11 11 / 0.624) 15.0%, rgb(11 11 11 / 0.500) 18.0%, rgb(11 11 11 / 0.376) 21.0%, rgb(11 11 11 / 0.259) 24.0%, rgb(11 11 11 / 0.156) 27.0%, rgb(11 11 11 / 0.074) 30.0%, rgb(11 11 11 / 0.020) 33.0%, rgb(11 11 11 / 0.000) 36.0%); }
}
#banner { background: #0B0B0B; }
.sec--claro .generos { margin-top: 0; }
@media (min-width: 761px) { .sec.sec--claro { padding-block: 28px !important; } }
@media (max-width: 760px) { .sec.sec--claro { padding-block: 18px 24px !important; } }
.cat__linea { display: none !important; }
/* ficha: el gris de la foto pasa suave al blanco de abajo */
.fi { background: var(--foto); }
.rel { background: linear-gradient(180deg, #EAEAE8 0%, rgb(236 236 234) 18%, #F1F0ED 46%, #F4F3EF 72%) !important; }
@media (min-width: 761px) { .rel { padding-top: 12px !important; } } @media (max-width: 760px) { .rel { padding-top: 10px !important; } }
/* ficha: título, precio y notas con un ritmo parejo; foto sin aire de más */
.fi__titulo { display: grid; gap: 0; align-content: center; }
.fi__titulo h1 { font-size: clamp(2.1rem, 3.1vw, 3rem); line-height: 1.06; }
.fi__titulo .fi__precio { margin: 18px 0 0; font-size: 1.05rem; }
.fi__titulo .fi__notas { margin: 8px 0 0; padding-top: 0; }
@media (min-width: 761px) {
  .fi__foto .pf--foto { width: min(100%, 460px); aspect-ratio: 1 / 1; overflow: hidden; }
  .fi__foto .pf__foto { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 760px) {
  .fi__titulo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
  .fi__titulo h1 { font-size: 1.9rem; }
  .fi__titulo .fi__precio { margin: 0; }
  .fi__titulo .fi__notas { grid-column: 1 / -1; margin: 0; }
  .fi__foto .pf__foto { transform: scale(1.12); }
}

/* ===== v93: todos los perfumes, solo la grilla ===== */
.col-lista { padding: 76px var(--pad) clamp(40px, 5vw, 70px) !important; background: #FFFFFF; }
.col-lista .grilla { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(12px, 1.4vw, 20px); }
.col-lista .card { padding: 0; border: 0; border-radius: 0; gap: 0; }
.col-lista .card .card__img { margin-bottom: 14px; border-radius: 6px; overflow: hidden; }
.col-lista .card__nombre { padding: 0; font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.15 var(--serif); }
.col-lista .card__precio { padding: 0; margin-top: 4px; font: 400 .82rem/1.2 var(--sans); letter-spacing: .05em; color: #8A8A8A; }
.col-lista .card .pf__foto { transition: transform 1.1s var(--suave); }
.col-lista .card:hover .pf__foto { transform: scale(1.045); }
.col-lista .card:hover .card__nombre { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 1000px) { .col-lista .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .col-lista { padding: 62px 0 34px !important; }
  .col-lista .grilla { display: flex; gap: 12px; padding: 0 var(--pad); }
  .col-lista .grilla > * { flex: 0 0 78%; }
  .col-lista .card__nombre { font-size: 1.3rem; }
}
@media (max-width: 760px) {
  .col-lista { min-height: calc(100svh - 150px); display: flex; flex-direction: column; justify-content: center; }
  .col-lista .grilla > * { flex: 0 0 84%; }
}