/* =====================================================================
   Kosmetikz: hoja publica. Tema oscuro unico (no se invierte ninguna
   seccion a mitad de scroll). Radio 0 en todo: el lujo aqui es arista.
   Ratios WCAG medidos sobre --papel (#140b10); ver la entrega.
   ===================================================================== */
:root {
  color-scheme: dark;                 /* sin esto el select y los checkbox nativos salen negro sobre negro */
  --papel:     #140b10;               /* fondo: ebano con hue ciruela, sale del fondo de las fotos */
  --papel-2:   #1c1016;               /* superficie de cards y formularios */
  --papel-3:   #2a1820;               /* superficie elevada, NO lleva texto chico encima sin medir */
  --tinta:     #f3ebe3;               /* marfil: 16.4:1 sobre papel */
  --tinta-2:   #b9a7ac;               /* vison: texto secundario, 8.3:1 sobre papel */
  --tinta-3:   #8f7d83;               /* captions largos y legales: 4.9:1 sobre papel */
  --acento:    #d8bb8f;               /* champan: CTA y detalles, 10.5:1 sobre papel */
  --acento-osc:#9d7f58;               /* bordes y decoracion, NO lleva texto */
  --linea:     rgba(216,187,143,.20);
  --error:     #f0a3a3;               /* 9.1:1 sobre papel */
  --ok:        #b7d3b0;

  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans:  'Jost', 'Futura', system-ui, sans-serif;
  --ease:  cubic-bezier(.16,1,.3,1);  /* una sola curva en todo el sitio */
  --ancho: 1200px;
  --gut:   clamp(1rem, 4vw, 2.5rem);
  --sec:   clamp(4.5rem, 10vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 300 1.0625rem/1.65 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Grano de pelicula fijo: textura sin blur, pointer-events fuera */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--acento); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; margin: 0; }
p { margin: 0; }

.saltar { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--acento); color: var(--papel); padding: .75rem 1rem; }
.saltar:focus { left: 1rem; top: 1rem; }

.contenedor { width: min(100% - 2 * var(--gut), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--sec); }

/* Lo pequeno en uppercase con tracking: la firma de la casa */
.eyebrow, .btn, .label, .cap { font: 500 .75rem/1.2 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.eyebrow { color: var(--acento); display: inline-flex; align-items: center; gap: .9rem; }
.eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--acento-osc); }

.titulo-sec { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 18ch; }
.texto-sec  { color: var(--tinta-2); max-width: 52ch; margin-top: 1.1rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3.25rem; padding: 0 2rem; border: 1px solid var(--acento); cursor: pointer;
  transition: transform .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease), gap .5s var(--ease);
}
.btn-oro   { background: var(--acento); color: #1a0f0a; }          /* 11.5:1 */
.btn-oro:hover { background: #e6cda6; }
.btn-linea { background: rgba(20,11,16,.35); color: var(--tinta); border-color: rgba(243,235,227,.55); } /* scrim: fantasma sobre foto */
.btn-linea:hover { border-color: var(--acento); color: var(--acento); }
.btn:hover { transform: translateY(-2px); gap: 1.15rem; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-bloque { width: 100%; }
.flecha { display: inline-block; width: 1.4rem; height: 1px; background: currentColor; position: relative; }
.flecha::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

.link-sub { font: 500 .75rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--acento);
  display: inline-flex; gap: .8rem; align-items: center; padding-block: .6rem; transition: gap .5s var(--ease); }
.link-sub:hover { gap: 1.2rem; }

/* ---------- Barra demo y cabecera ---------- */
.demo-barra { background: #24141c; color: var(--tinta-2); text-align: center; font-size: .68rem; letter-spacing: .04em; height: 2rem; display: grid; place-items: center; padding-inline: var(--gut); position: relative; z-index: 60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cab { position: sticky; top: 0; z-index: 50; transition: background-color .6s var(--ease), border-color .6s var(--ease); border-bottom: 1px solid transparent; }
.cab-in { width: min(100% - 2 * var(--gut), 1320px); margin-inline: auto; height: 4.25rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.cab.fija, body:not(.sobre-hero) .cab { background: rgba(20,11,16,.94); border-color: var(--linea); }
/* Sobre el hero la cabecera flota transparente; no usamos backdrop-filter (congela iPhone) */
/* Sobre el hero: fija bajo la barra demo (2rem) y sube a top 0 al hacer scroll, solo con transform */
.sobre-hero .cab { position: fixed; left: 0; right: 0; top: 2rem; transition: transform .6s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease); }
.sobre-hero .cab.fija { transform: translateY(-2rem); }
.sobre-hero .cab:not(.fija) { background: linear-gradient(rgba(20,11,16,.6), rgba(20,11,16,0)); }

.logo { font: 400 1.15rem/1 var(--serif); letter-spacing: .42em; padding-left: .42em; justify-self: center; transition: letter-spacing .6s var(--ease); }
.cab.fija .logo { letter-spacing: .36em; }
.cab-nav { display: none; gap: 1.75rem; }
.cab-nav a, .cab-cercle, .idiomas a, .bolsa { font: 400 .75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); transition: color .4s var(--ease); padding-block: .5rem; }
.cab-nav a:hover, .cab-nav a[aria-current], .cab-cercle:hover, .idiomas a[aria-current], .idiomas a:hover, .bolsa:hover { color: var(--tinta); }
.cab-der { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.cab-cercle, .idiomas { display: none; }
.idiomas { gap: .6rem; }
.bolsa { display: inline-flex; align-items: center; gap: .55rem; color: var(--tinta); }
.bolsa span:first-child { display: none; }
.bolsa-n { min-width: 1.6rem; height: 1.6rem; display: inline-grid; place-items: center; border: 1px solid var(--acento-osc); color: var(--acento); font-size: .72rem; letter-spacing: 0; transition: transform .5s var(--ease); }
.bolsa-n.late { animation: late .7s var(--ease); }
@keyframes late { 40% { transform: scale(1.25); } }
.cab-menu { justify-self: start; width: 2.75rem; height: 2.75rem; background: none; border: 0; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.cab-menu span { width: 22px; height: 1px; background: var(--tinta); display: block; }
.cab-menu span + span { width: 14px; }

.menu-movil { border: 0; padding: 5rem var(--gut) 2rem; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: var(--papel); color: var(--tinta); }
.menu-movil::backdrop { background: rgba(0,0,0,.6); }
.menu-movil nav { display: grid; gap: .25rem; }
.menu-movil nav a { font: 400 2rem/1.35 var(--serif); padding-block: .3rem; }
.menu-cerrar { position: absolute; top: 1.25rem; right: var(--gut); background: none; border: 1px solid var(--linea); padding: .7rem 1rem; cursor: pointer; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; }
.menu-idiomas { margin-top: 2.5rem; display: flex; gap: 1.5rem; color: var(--tinta-2); }

@media (min-width: 1024px) {
  .cab-menu { display: none; }
  .cab-nav, .cab-cercle, .idiomas { display: flex; }
  .bolsa span:first-child { display: inline; }
}

/* ---------- Toast de bolsa ---------- */
.toast { position: fixed; z-index: 80; right: var(--gut); bottom: calc(1.25rem + env(safe-area-inset-bottom)); left: var(--gut);
  max-width: 26rem; margin-left: auto; background: var(--papel-2); border: 1px solid var(--acento-osc); padding: 1rem 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .95rem;
  transform: translateY(1rem); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.toast.ver { transform: none; opacity: 1; }
.toast a { color: var(--acento); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }

/* =====================================================================
   HERO: el unico gesto audaz. Escenas con zoom lento + velo doble +
   titular revelado por mascara + polvo dorado en canvas.
   ===================================================================== */
.hero { position: relative; min-height: 100dvh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-escenas { position: absolute; inset: 0; z-index: -2; }
.hero-escenas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  opacity: 0; transform: scale(1.12); transition: opacity 1.8s var(--ease), transform 9s linear; }
.hero-escenas img.activa { opacity: 1; transform: scale(1.02); }
/* El video no lleva zoom: ya trae su propio movimiento. Mismo encuadre que la foto para que el relevo no salte */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity 1.8s var(--ease); }
.hero-video.activa { opacity: 1; }
/* Velo doble: radial para que el texto contraste, lineal para el peso abajo. Sin blur. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(20,11,16,.92) 0%, rgba(20,11,16,.55) 45%, rgba(20,11,16,0) 75%),
    linear-gradient(0deg, rgba(20,11,16,.95) 0%, rgba(20,11,16,.35) 40%, rgba(20,11,16,.15) 70%, rgba(20,11,16,.55) 100%); }
.hero-polvo { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; }

.hero-copy { width: min(100% - 2 * var(--gut), var(--ancho)); margin-inline: auto; padding-bottom: clamp(6rem, 14vh, 9rem); padding-top: 8rem; }
.hero h1 { font-size: clamp(2.7rem, 7vw, 6rem); line-height: 1.04; max-width: 16ch; margin-top: 1.5rem; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .08em; }
.hero h1 .l > span { display: block; transform: translateY(105%); transition: transform 1.4s var(--ease); }
.hero-sub { color: var(--tinta); opacity: .86; max-width: 34ch; margin-top: 1.5rem; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }

/* Linea de brillo champan bajo el eyebrow: un destello que cruza cada 6 s */
.brillo { display: block; width: min(14rem, 50vw); height: 1px; background: var(--acento-osc); position: relative; overflow: hidden; margin-top: 1.25rem; }
.brillo::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #fff3dc, transparent); transform: translateX(-120%); animation: brillo 6s var(--ease) 2.2s infinite; }
@keyframes brillo { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(320%); } }

/* Entrada orquestada: todo nace oculto y el body.cargado lo revela en cascada */
.hero .entra { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.cargado .hero .entra { opacity: 1; transform: none; }
.cargado .hero h1 .l > span { transform: none; }
.d1 { transition-delay: .15s !important; } .d2 { transition-delay: .3s !important; } .d3 { transition-delay: .45s !important; }
.d4 { transition-delay: .7s !important; }  .d5 { transition-delay: .95s !important; } .d6 { transition-delay: 1.15s !important; }

.hero-pie { position: absolute; left: 0; right: 0; bottom: 1.75rem; width: min(100% - 2 * var(--gut), var(--ancho)); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; }
.rayas { display: flex; gap: .6rem; }
.raya { width: 2.75rem; height: 1.75rem; background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.raya::before, .raya::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(243,235,227,.3); }
.raya::after { background: var(--acento); transform: scaleX(0); transform-origin: left; }
.raya.activa::after { animation: progreso 7s linear forwards; }
.hero.pausa .raya.activa::after { animation-play-state: paused; }
@keyframes progreso { to { transform: scaleX(1); } }
.scroll-cue { display: none; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--tinta-2); align-items: center; gap: .9rem; }
.scroll-cue i { width: 1px; height: 2.75rem; background: rgba(243,235,227,.25); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--acento); animation: cae 2.4s var(--ease) infinite; }
@keyframes cae { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
@media (min-width: 768px) { .scroll-cue { display: inline-flex; } .hero-escenas img { object-position: 60% 50%; } }

/* ---------- Reveal en scroll (IntersectionObserver en kz.js) ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.visto { opacity: 1; transform: none; }
.rv.r2 { transition-delay: .12s; } .rv.r3 { transition-delay: .24s; } .rv.r4 { transition-delay: .36s; }

/* ---------- Ventajas (franja bajo el hero) ---------- */
.ventajas { border-block: 1px solid var(--linea); }
.ventajas ul { list-style: none; margin: 0; padding: 1.4rem 0; display: grid; gap: .8rem; text-align: center; }
.ventajas li { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-2); }
@media (min-width: 768px) { .ventajas ul { grid-template-columns: repeat(3, 1fr); } .ventajas li + li { border-left: 1px solid var(--linea); } }

/* ---------- Categorias: mosaico asimetrico, no 4 cards iguales ---------- */
.cats-cab { display: grid; gap: 1rem; margin-bottom: 3rem; }
.cats { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.cat { position: relative; display: block; overflow: hidden; background: var(--papel); aspect-ratio: 4 / 5; }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); opacity: .82; }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,11,16,.9) 0%, rgba(20,11,16,0) 55%); }
.cat-txt { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.4rem; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.cat h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.cat .cap { color: var(--acento); font-size: .68rem; transition: transform .6s var(--ease); }
.cat:hover img { transform: scale(1.05); opacity: 1; }
.cat:hover .cap { transform: translateX(4px); }
@media (min-width: 640px) { .cats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .cats { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .cat { aspect-ratio: auto; min-height: 20rem; }
  .cat:first-child { grid-row: span 2; }
  .cat:last-child { grid-column: span 2; }
  .cats-cab { grid-template-columns: 1fr; }
}

/* ---------- Tarjetas de producto ---------- */
.grid-prod { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
@media (min-width: 1024px) { .grid-prod { grid-template-columns: repeat(4, 1fr); gap: 3.5rem 1.75rem; } }
.prod { display: flex; flex-direction: column; }
.prod-img { position: relative; overflow: hidden; background: var(--papel-2); aspect-ratio: 4 / 5; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.prod:hover .prod-img img { transform: scale(1.05); }
.prod-sello { position: absolute; top: .75rem; left: .75rem; background: rgba(20,11,16,.82); border: 1px solid var(--linea); padding: .4rem .6rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); }
.prod-cat { margin-top: 1.1rem; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--tinta-3); }
.prod h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); margin-top: .45rem; line-height: 1.25; }
.prod-precio { margin-top: .5rem; color: var(--acento); font-size: .98rem; letter-spacing: .04em; }
.prod-rapido { margin-top: 1rem; }
.prod-rapido .btn { min-height: 2.75rem; padding: 0 1rem; width: 100%; font-size: .66rem; letter-spacing: .24em; }

.dest-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 3rem; }

/* ---------- Split ritual: imagen + texto ---------- */
.ritual { display: grid; gap: 2.5rem; align-items: center; }
.ritual-img { position: relative; }
.ritual-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ritual-img::after { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--acento-osc); z-index: -1; }
.ritual-txt .titulo-sec { margin-top: 1.25rem; }
.ritual-txt .btn { margin-top: 2.25rem; }
@media (min-width: 1024px) { .ritual { grid-template-columns: 5fr 6fr; gap: 7rem; } }

/* ---------- Manifiesto a ancho completo ---------- */
.manif { text-align: center; border-block: 1px solid var(--linea); }
.manif blockquote { margin: 0 auto; max-width: 26ch; font: italic 400 clamp(1.7rem, 3.6vw, 2.9rem)/1.25 var(--serif); }
.manif cite { display: block; margin-top: 2rem; font: 500 .72rem/1 var(--sans); font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: var(--acento); }

/* ---------- Banda del Cercle (foto de fondo con velo) ---------- */
.banda { position: relative; overflow: hidden; isolation: isolate; min-height: 34rem; display: grid; align-items: center; }
.banda > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; z-index: -2; }
.banda::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,11,16,.95) 0%, rgba(20,11,16,.78) 45%, rgba(20,11,16,.2) 100%); }
.banda .texto-sec { color: var(--tinta); opacity: .86; }
.banda .btn { margin-top: 2.25rem; }

/* ---------- Tienda ---------- */
.pag-cab { padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: 2.5rem; }
.pag-cab h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin-top: 1rem; }
.filtros { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; border-block: 1px solid var(--linea); padding-block: 1rem; margin-bottom: 3rem; }
.chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.chips a { white-space: nowrap; padding: .65rem 1rem; border: 1px solid transparent; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); transition: color .4s var(--ease), border-color .4s var(--ease); }
.chips a:hover { color: var(--tinta); }
.chips a[aria-current] { border-color: var(--acento-osc); color: var(--acento); }
.orden { display: flex; align-items: center; gap: .75rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); }
.orden select { background: var(--papel-2); border: 1px solid var(--linea); padding: .6rem 2rem .6rem .8rem; letter-spacing: .04em; text-transform: none; font-size: .9rem; color: var(--tinta); }
@media (min-width: 768px) { .chips { margin: 0; padding: 0; } }
.vacio { text-align: center; padding: 5rem 1rem; color: var(--tinta-2); }
.vacio .btn { margin-top: 1.75rem; }

/* ---------- Ficha de producto ---------- */
.ficha { display: grid; gap: 2.5rem; padding-top: 2rem; }
.ficha-img { background: var(--papel-2); }
.ficha-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.migas { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-3); display: flex; gap: .6rem; flex-wrap: wrap; }
.migas a:hover { color: var(--tinta); }
.ficha h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); margin-top: 1.25rem; }
.ficha-precio { font: 400 1.5rem/1 var(--serif); color: var(--acento); margin-top: 1.25rem; }
.ficha-resumen { color: var(--tinta-2); margin-top: 1.5rem; max-width: 46ch; font-size: 1.1rem; }
.ficha-compra { display: flex; gap: .75rem; margin-top: 2.25rem; flex-wrap: wrap; }
.ficha-compra .btn { flex: 1 1 14rem; }
.cant { display: inline-flex; border: 1px solid var(--linea); height: 3.25rem; }
.cant button { width: 2.75rem; background: none; border: 0; cursor: pointer; font-size: 1.1rem; color: var(--tinta-2); }
.cant button:hover { color: var(--tinta); }
.cant input { width: 2.75rem; text-align: center; background: none; border: 0; -moz-appearance: textfield; appearance: textfield; }
.cant input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ficha-notas { margin-top: 2.5rem; border-top: 1px solid var(--linea); }
.ficha-notas details { border-bottom: 1px solid var(--linea); }
.ficha-notas summary { list-style: none; cursor: pointer; padding: 1.15rem 0; display: flex; justify-content: space-between; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; }
.ficha-notas summary::-webkit-details-marker { display: none; }
.ficha-notas summary::after { content: "+"; color: var(--acento); font-size: 1rem; transition: transform .4s var(--ease); }
.ficha-notas details[open] summary::after { transform: rotate(45deg); }
.ficha-notas details > div { padding-bottom: 1.4rem; color: var(--tinta-2); max-width: 60ch; }
.ficha-notas dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin: 0; }
.ficha-notas dt { color: var(--tinta-3); }
.ficha-notas dd { margin: 0; }
@media (min-width: 1024px) {
  .ficha { grid-template-columns: 7fr 5fr; gap: 5.5rem; align-items: start; }
  .ficha-info { position: sticky; top: 6.5rem; }
}

/* ---------- Bolsa y checkout ---------- */
.bolsa-layout { display: grid; gap: 3rem; padding-bottom: var(--sec); }
@media (min-width: 1024px) { .bolsa-layout { grid-template-columns: 7fr 4fr; gap: 4.5rem; align-items: start; } .resumen { position: sticky; top: 6.5rem; } }
.linea-b { display: grid; grid-template-columns: 6rem 1fr; gap: 1.25rem; padding-block: 1.5rem; border-bottom: 1px solid var(--linea); }
.linea-b:first-child { border-top: 1px solid var(--linea); }
.linea-b img { width: 6rem; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papel-2); }
.linea-b h3 { font-size: 1.2rem; }
.linea-b .meta { color: var(--tinta-3); font-size: .9rem; margin-top: .3rem; }
.linea-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.linea-acc form { display: flex; gap: .75rem; align-items: center; }
.btn-texto { background: none; border: 0; padding: .6rem 0; cursor: pointer; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-2); border-bottom: 1px solid transparent; }
.btn-texto:hover { color: var(--tinta); border-bottom-color: var(--acento-osc); }
.importe { color: var(--acento); }

.resumen { background: var(--papel-2); border: 1px solid var(--linea); padding: clamp(1.5rem, 3vw, 2.25rem); }
.resumen h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }
.resumen dl { display: grid; grid-template-columns: 1fr auto; gap: .8rem; margin: 0; }
.resumen dt { color: var(--tinta-2); }
.resumen dd { margin: 0; text-align: right; }
.resumen .tot { border-top: 1px solid var(--linea); padding-top: 1rem; margin-top: .4rem; font: 400 1.35rem/1 var(--serif); color: var(--tinta); }
.resumen .btn { margin-top: 1.75rem; }
.nota-envio { margin-top: 1rem; font-size: .9rem; color: var(--tinta-2); }
.mini-lineas { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1rem; }
.mini-lineas li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1rem; align-items: center; font-size: .95rem; }
.mini-lineas img { width: 3.5rem; aspect-ratio: 4/5; object-fit: cover; }
.mini-lineas small { display: block; color: var(--tinta-3); }

/* ---------- Formularios: label encima, error debajo, gap 8px ---------- */
.form-bloque { border: 0; margin: 0 0 2.5rem; padding: 0; }
.form-bloque legend { font: 400 1.6rem/1.2 var(--serif); margin-bottom: 1.25rem; padding: 0; }
.campos { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .campos-2 { grid-template-columns: 1fr 1fr; } .campos-3 { grid-template-columns: 2fr 1fr 1fr; } }
.campo { display: grid; gap: 8px; }
.campo label, .label { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 3.25rem; padding: .85rem 1rem; background: var(--papel-2);
  border: 1px solid #7a6670; color: var(--tinta); border-radius: 0; font-size: 1rem; /* borde 3.6:1 sobre papel, 3.4:1 sobre papel-2 */
  transition: border-color .4s var(--ease); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); }
.campo input::placeholder { color: var(--tinta-3); }
.campo .err { color: var(--error); font-size: .85rem; }
.campo.mal input, .campo.mal select { border-color: var(--error); }
.alerta { border: 1px solid var(--error); color: var(--error); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.alerta-ok { border-color: var(--ok); color: var(--ok); }
.metodos { display: grid; gap: .6rem; }
@media (min-width: 640px) { .metodos { grid-template-columns: repeat(3, 1fr); } }
.metodo { position: relative; }
.metodo input { position: absolute; opacity: 0; }
.metodo span { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; border: 1px solid #7a6670; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: border-color .4s var(--ease), color .4s var(--ease); color: var(--tinta-2); }
.metodo input:checked + span { border-color: var(--acento); color: var(--acento); }
.metodo input:focus-visible + span { outline: 1px solid var(--acento); outline-offset: 3px; }
.demo-pago { margin-top: 1rem; font-size: .92rem; color: var(--tinta-2); border-left: 1px solid var(--acento-osc); padding-left: 1rem; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font-size: .95rem; color: var(--tinta-2); }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--acento); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.codigo-fila { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; }
.codigo-fila .btn { min-height: 3.25rem; padding: 0 1.25rem; }

/* ---------- Gracias ---------- */
.gracias { text-align: center; padding-block: var(--sec); max-width: 40rem; }
.gracias h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-top: 1.25rem; }
.gracias p { color: var(--tinta-2); margin-top: 1.25rem; }
.gracias .resumen { text-align: left; margin-top: 3rem; }
.gracias .btn { margin-top: 2.5rem; }
.sello-demo { display: inline-block; margin-top: 1.5rem; border: 1px solid var(--acento-osc); color: var(--acento); padding: .55rem .9rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; }

/* =====================================================================
   LANDING Le Cercle: una sola pagina, una sola accion.
   ===================================================================== */
.lp-hero { position: relative; min-height: 100dvh; display: grid; align-items: center; overflow: hidden; isolation: isolate; padding-block: 7rem 4rem; }
.lp-hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; z-index: -2; animation: respira 18s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.lp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 100% at 0% 50%, rgba(20,11,16,.96) 0%, rgba(20,11,16,.8) 45%, rgba(20,11,16,.25) 100%),
              linear-gradient(0deg, rgba(20,11,16,.85), rgba(20,11,16,0) 50%); }
.lp-grid { display: grid; gap: 3rem; align-items: center; }
.lp-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.8rem); margin-top: 1.4rem; max-width: 14ch; }
.lp-sub { margin-top: 1.5rem; max-width: 42ch; color: var(--tinta); opacity: .86; }
.lp-ventajas { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.4rem; max-width: 30rem; }
.lp-ventajas li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; }
.lp-ventajas b { display: block; font: 400 1.2rem/1.2 var(--serif); }
.lp-ventajas span { color: var(--tinta-2); font-size: .95rem; }
.lp-ventajas i { font: italic 400 1.4rem/1 var(--serif); color: var(--acento); font-style: italic; }
.lp-form { background: rgba(28,16,22,.94); border: 1px solid var(--acento-osc); padding: clamp(1.5rem, 4vw, 2.75rem); }
.lp-form h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 1.75rem; }
.lp-form .btn { margin-top: 1.75rem; }
.lp-priv { margin-top: 1rem; font-size: .85rem; color: var(--tinta-3); }
.lp-ok { text-align: center; }
.lp-ok .codigo { display: block; margin: 1.5rem auto; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--serif); letter-spacing: .14em; color: var(--acento); border: 1px solid var(--acento-osc); padding: 1.1rem; }
@media (min-width: 1024px) { .lp-grid { grid-template-columns: 7fr 5fr; gap: 5rem; } }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); margin-top: 0; }
.pie-in { width: min(100% - 2 * var(--gut), var(--ancho)); margin-inline: auto; padding-block: 4.5rem 3rem; display: grid; gap: 2.5rem; }
.pie .logo { display: inline-block; padding-left: 0; }
.pie-marca p { margin-top: 1rem; color: var(--tinta-2); max-width: 30ch; }
.pie-col { display: grid; gap: .65rem; align-content: start; }
.pie-col h2 { font: 500 .7rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--acento); margin-bottom: .6rem; }
.pie-col a, .pie-col span { color: var(--tinta-2); font-size: .95rem; }
.pie-col a:hover { color: var(--tinta); }
.pie-legal { width: min(100% - 2 * var(--gut), var(--ancho)); margin-inline: auto; padding-block: 1.5rem 2rem; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; color: var(--tinta-3); }
@media (min-width: 768px) { .pie-in { grid-template-columns: 2fr 1fr 1fr; } }
/* Firma w00pz: los dos 00 en titileo neon */
.w00pz { color: var(--tinta-2); letter-spacing: .06em; }
.w00pz .neon { color: #ff4fd8; text-shadow: 0 0 6px #ff4fd8, 0 0 14px rgba(255,79,216,.6); animation: neon 3.2s infinite; }
.w00pz .n2 { animation-delay: .7s; }
@keyframes neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .35; } }

/* ---------- Movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rv, .hero .entra { opacity: 1; transform: none; }
  .hero h1 .l > span { transform: none; }
  .hero-escenas img { transform: none; }
  .hero-polvo { display: none; }
  html { scroll-behavior: auto; }
}

/* Ajustes de pagina */
.tienda-grid { padding-bottom: var(--sec); }
.campo-codigo { margin-block: 1.5rem .25rem; }

/* A 390 el tracking de .32em parte el eyebrow en dos lineas y la raya decorativa se le monta */
@media (max-width: 639px) {
  .eyebrow { letter-spacing: .2em; font-size: .68rem; }
  .eyebrow::before { width: 1.25rem; flex: none; }
}
/* El consentimiento es una frase larga: nunca en uppercase (se lee mal) */
.campo label.check { text-transform: none; letter-spacing: .01em; font-size: .92rem; color: var(--tinta-2); }