/* Dolce Bella · Willemstad, Curazao
   Concepto: su portada. Negro, marco dorado doble, seda dorada y brillo.
   Letras: Cinzel (titulares, mayusculas clasicas) + Jost (texto). */
:root{
  --negro:#0b0a08;
  --negro-2:#15130e;
  --oro:#d8b45a;
  --oro-claro:#f0d791;
  --oro-osc:#7a5a1c;
  --crema:#f5ecd8;
  --gris:#a89c84;
  --linea:rgba(216,180,90,.25);
  --f-display:'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-texto:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --barra-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --oro-grad:linear-gradient(100deg,var(--oro-osc),var(--oro) 25%,var(--oro-claro) 50%,var(--oro) 75%,var(--oro-osc));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-h) + 10px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--crema);font:300 18px/1.7 var(--f-texto);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-style:normal;background:var(--oro-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}
.saltar{position:absolute;left:-999px;top:8px;z-index:300;background:var(--oro);color:var(--negro);padding:8px 14px}
.saltar:focus{left:12px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

.etiqueta{margin:0 0 18px;font:500 12px/1 var(--f-texto);letter-spacing:.42em;text-transform:uppercase;color:var(--oro)}
.h2{font:500 clamp(36px,5.4vw,80px)/1.08 var(--f-display);letter-spacing:.02em;margin:0;text-wrap:balance}
.cabeza{max-width:1240px;margin:0 auto 56px;padding:0 var(--gutter);text-align:center}
.cabeza .sub{margin-left:auto;margin-right:auto}
.sub{color:var(--gris);margin:20px 0 0;max-width:50ch;text-wrap:pretty}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;font:500 14px/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-position .8s var(--ease),color .4s,border-color .4s,transform .3s var(--ease)}
.btn-oro{background:var(--oro-grad);background-size:250% 100%;background-position:100% 0;color:var(--negro)}
.btn-oro:hover{background-position:0 0;transform:translateY(-2px)}
.btn-linea{border-color:var(--oro);color:var(--oro-claro)}
.btn-linea:hover{background:rgba(216,180,90,.12)}
.btn-chico{min-height:42px;padding:0 18px;font-size:12px}

/* Precarga */
.precarga{display:none}
.js .precarga{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--negro);animation:precarga-fuera 0s 5s forwards}
.marco-pre,.pre-nombre{grid-area:1/1}
.marco-pre{width:min(80vw,460px);height:min(30vw,170px);overflow:visible}
.marco-pre rect{fill:none;stroke:var(--oro);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200}
.pre-nombre{margin:0;font:500 clamp(30px,6vw,52px)/1 var(--f-display);letter-spacing:.08em;color:var(--crema);opacity:0}
@keyframes precarga-fuera{to{visibility:hidden;opacity:0}}

/* Barra */
.barra{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:20px;height:calc(var(--barra-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));transition:background .4s,box-shadow .4s}
.barra.solida{background:rgba(11,10,8,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linea)}
.marca{font:500 22px/1 var(--f-display);letter-spacing:.1em;text-decoration:none;padding:9px 14px;border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:3px}
.barra-nav{display:none;gap:34px;margin-left:auto}
.barra-nav a{text-decoration:none;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--crema);opacity:.8;transition:opacity .3s,color .3s}
.barra-nav a:hover{opacity:1;color:var(--oro-claro)}
.barra .btn{margin-left:auto;flex-shrink:0}
@media (max-width:480px){.marca{font-size:17px;padding:7px 10px}}
@media (min-width:900px){.barra-nav{display:flex}.barra .btn{margin-left:8px}}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:calc(var(--barra-h) + 30px) var(--gutter) 90px}
.brillo,.seda{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.seda path{fill:none;stroke:url(#oro);stroke-width:1;opacity:.55}
.hero-centro{display:grid;justify-items:center;text-align:center;gap:28px;max-width:900px}
.marco-hero{position:relative;padding:clamp(30px,5vw,56px) clamp(22px,6vw,80px);background:rgba(11,10,8,.82);border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:8px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.marco-hero .etiqueta{margin-bottom:22px}
.titular{margin:0;font:500 clamp(38px,9.4vw,112px)/1.05 var(--f-display);letter-spacing:.05em}
.t-letras{display:inline-block}
.t-letras .palabra{display:inline-block;white-space:nowrap}
.t-letras .letra{display:inline-block}
.raya{display:block;height:1px;margin:24px auto 18px;width:100%;background:linear-gradient(90deg,transparent,var(--oro) 20%,var(--oro) 80%,transparent);transform-origin:center}
.lineas{margin:0;font:400 clamp(11px,1.4vw,15px)/1.6 var(--f-texto);letter-spacing:.32em;text-transform:uppercase;color:var(--oro-claro)}
.hero-sub{max-width:52ch;margin:0;color:#dcd2bd;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.bajar{position:absolute;left:50%;bottom:24px;width:1px;height:46px;margin-left:-.5px;overflow:hidden}
.bajar span{display:block;width:1px;height:100%;background:linear-gradient(transparent,var(--oro));animation:caer 2.2s var(--ease) infinite}
@keyframes caer{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* Productos */
.productos{padding:130px 0 120px;border-top:1px solid var(--linea)}
.tarjetas{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:1240px;display:grid;gap:22px}
.tarjeta{position:relative;padding:44px 32px 36px;text-align:center;background:linear-gradient(170deg,#17140d,#0e0c08);border:1px solid var(--linea);transition:border-color .5s,transform .5s var(--ease)}
.tarjeta::before{content:"";position:absolute;inset:8px;border:1px solid rgba(216,180,90,.12);pointer-events:none;transition:border-color .5s}
.tarjeta:hover{border-color:var(--oro);transform:translateY(-6px)}
.tarjeta:hover::before{border-color:rgba(216,180,90,.4)}
.dibujo{width:96px;height:128px;margin:0 auto 22px;overflow:visible}
.dibujo path{fill:none;stroke:var(--oro);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tarjeta h3{margin:0 0 12px;font:500 26px/1.2 var(--f-display);letter-spacing:.06em}
.tarjeta p{margin:0 0 22px;color:var(--gris);font-size:16.5px}
.enlace{font:500 13px/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--oro-claro);text-decoration:none}
.enlace:hover{text-decoration:underline;text-underline-offset:5px}
@media (min-width:860px){.tarjetas{grid-template-columns:repeat(3,1fr)}}

/* Envios */
.envios{padding:130px 0 120px;background:radial-gradient(ellipse at 50% 0%,rgba(216,180,90,.12),transparent 60%),var(--negro-2);border-top:1px solid var(--linea)}
.ruta-caja{max-width:1000px;margin:0 auto 50px;padding:0 var(--gutter)}
.ruta{width:100%;overflow:visible}
.arco{fill:none;stroke:var(--oro);stroke-width:2;stroke-dasharray:6 8}
.punto circle{fill:var(--oro-claro);stroke:var(--negro);stroke-width:3}
.punto text{fill:var(--crema);font:500 22px var(--f-display);letter-spacing:.08em;text-anchor:middle}
.avion path{fill:var(--oro-claro)}
.envios-cuerpo{max-width:1240px;margin:0 auto;padding:0 var(--gutter);display:grid;gap:40px;align-items:start}
.ventajas{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ventajas li{padding:22px 24px;border:1px solid var(--linea);display:grid;gap:4px;background:rgba(11,10,8,.5)}
.ventajas b{font:500 21px/1.2 var(--f-display);letter-spacing:.04em;color:var(--oro-claro)}
.ventajas span{color:var(--gris);font-size:16px}
.calculadora{padding:34px 30px;border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:6px;background:var(--negro);display:grid;gap:20px}
.calc-titulo{margin:0;font:500 24px/1.2 var(--f-display);letter-spacing:.04em}
.calc-campo{display:flex;align-items:center;border-bottom:1px solid var(--oro)}
.calc-campo input{flex:1;min-width:0;background:transparent;border:0;color:var(--crema);font:500 clamp(40px,6vw,56px)/1.2 var(--f-display);padding:4px 0;outline:none}
.calc-campo input::-webkit-inner-spin-button{opacity:.4}
.moneda{font:500 16px var(--f-texto);letter-spacing:.2em;color:var(--oro)}
.calc-filas{display:grid;gap:4px}
.calc-filas p{display:flex;justify-content:space-between;margin:0;padding:8px 0;border-bottom:1px dotted var(--linea);color:var(--gris);font-size:16px}
.calc-filas b{font-weight:500;color:var(--crema);font-variant-numeric:tabular-nums}
.calc-filas .total b{font:500 22px var(--f-display);color:var(--oro-claro)}
.calc-nota{margin:0;font-size:14px;color:var(--gris)}
.anuncio{max-width:420px;margin:60px auto 0;padding:0 var(--gutter);text-align:center}
.anuncio img{border:1px solid var(--linea);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.anuncio figcaption{margin-top:12px;font-size:14px;color:var(--gris);letter-spacing:.1em}
@media (min-width:900px){.envios-cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px}}
.calc-campo input{width:100%}

/* Contacto */
.contacto{padding:130px var(--gutter)}
.cont-marco{max-width:820px;margin:0 auto;padding:clamp(34px,6vw,70px);text-align:center;border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:8px}
.datos{list-style:none;margin:36px 0;padding:0;text-align:left}
.datos li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--linea)}
.datos span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gris);padding-top:4px}
.datos a,.datos b{font-weight:500;text-decoration:none;color:var(--crema)}
.datos a:hover{color:var(--oro-claro)}
.cont-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* Pie */
.pie{padding:80px var(--gutter) calc(110px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--linea);color:var(--gris);font-size:14px;letter-spacing:.12em}
.pie-marca{margin:0 0 14px;font:500 clamp(40px,7vw,80px)/1 var(--f-display);letter-spacing:.1em;color:var(--crema)}
.pie p{margin:6px 0}
.pie a{color:var(--oro-claro)}

.wa-flotante{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .precarga{display:none!important}
}

/* ===== Nivel 2: 3D y fotos ===== */
/* Hero en dos columnas: texto y frasco 3D */
.hero-rejilla{display:grid;gap:10px;align-items:center;width:100%;max-width:1360px}
.escena-3d{position:relative;order:-1;height:min(46vh,380px)}
.frasco-3d{width:100%;height:100%;display:block}
.escena-pie{position:absolute;left:0;right:0;bottom:-6px;margin:0;text-align:center;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
@media (min-width:980px){
  .hero-rejilla{grid-template-columns:1.1fr .9fr;gap:30px}
  .escena-3d{order:0;height:min(78vh,680px)}
  .hero-centro{justify-items:start;text-align:left}
  .hero-cta{justify-content:flex-start}
}

/* Tarjetas con foto que aparece al pasar el cursor */
.tarjeta{overflow:hidden;isolation:isolate}
.tarjeta-foto{position:absolute;inset:0;z-index:-1;opacity:.42;transition:opacity .6s var(--ease)}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.7);transform:scale(1.08);transition:transform 1.2s var(--ease),filter .6s}
.tarjeta-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,8,.45),rgba(11,10,8,.92) 70%)}
.tarjeta:hover .tarjeta-foto{opacity:.65}
.tarjeta:hover .tarjeta-foto img{transform:scale(1);filter:none}

/* Sueros */
.sueros{display:grid;gap:50px;align-items:center;padding:130px var(--gutter);max-width:1240px;margin:0 auto;border-top:1px solid var(--linea)}
.sueros-foto{position:relative;margin:0 auto;width:min(100%,460px);perspective:1000px}
.sueros-foto img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:8px;transform-style:preserve-3d;will-change:transform}
.ref{position:absolute;left:14px;bottom:14px;padding:6px 10px;background:rgba(11,10,8,.75);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.sueros-texto>p{color:#dcd2bd;max-width:44ch}
.pasos-suero{list-style:none;margin:26px 0 32px;padding:0}
.pasos-suero li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--linea);color:var(--crema)}
.pasos-suero span{font:500 15px var(--f-display);color:var(--oro)}
@media (min-width:900px){.sueros{grid-template-columns:.9fr 1.1fr;gap:90px}}

/* Vitrina: anillo 3D */
.vitrina{padding:130px 0 150px;overflow:hidden;border-top:1px solid var(--linea)}
.anillo-escena{position:relative;height:clamp(360px,52vw,520px);perspective:1000px;cursor:grab;touch-action:pan-y}
.anillo-escena.arrastrando{cursor:grabbing}
.anillo{position:absolute;left:50%;top:44%;width:0;height:0;transform-style:preserve-3d}
.pieza{position:absolute;left:calc(var(--w) / -2);top:calc(var(--h) / -2);width:var(--w);height:var(--h);margin:0;--w:clamp(150px,20vw,240px);--h:calc(var(--w) * 1.35);backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--oro);background:#000;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.pieza img{width:100%;height:100%;object-fit:cover}
.pieza figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 10px;background:linear-gradient(transparent,rgba(11,10,8,.9));font:500 14px/1.2 var(--f-display);letter-spacing:.06em;text-align:center;color:var(--oro-claro)}
.piso{position:absolute;left:10%;right:10%;bottom:4%;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(216,180,90,.25),transparent 70%);filter:blur(10px)}
@media (prefers-reduced-motion:reduce){
  .anillo-escena{height:auto;perspective:none}
  .anillo{position:static;width:auto;height:auto;display:flex;gap:12px;overflow-x:auto;padding:0 var(--gutter)}
  .pieza{position:relative;left:auto;top:auto;flex:0 0 200px;height:270px}
}

/* ===== Nivel 3 ===== */
/* Anuncio de envios en negro y oro: tarjeta que se voltea en 3D */
.anuncio-escena{max-width:460px;margin:70px auto 0;padding:0 var(--gutter);perspective:1400px}
.anuncio-oro{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:none;cursor:pointer;color:var(--crema);transform-style:preserve-3d;transition:transform 1s var(--ease)}
.anuncio-oro.volteada{transform:rotateY(180deg)}
.cara-a,.cara-b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 26px;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(216,180,90,.22),transparent 60%),#0d0b08;border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:-10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(216,180,90,.35)}
.cara-b{transform:rotateY(180deg);justify-content:space-between}
.a-tit1{font:500 13px/1 var(--f-texto);letter-spacing:.5em;text-transform:uppercase;color:var(--oro)}
.a-tit2{font:500 clamp(30px,7vw,42px)/1 var(--f-display);letter-spacing:.04em;background:var(--oro-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.a-tit3{font:400 clamp(18px,4vw,24px)/1.2 var(--f-display);letter-spacing:.06em}
.banderas{width:88%;margin:16px 0 8px;overflow:visible}
.banderas rect,.banderas path{fill:none;stroke:var(--oro);stroke-width:1.6;stroke-linejoin:round}
.b-cw rect{fill:rgba(216,180,90,.06)}.b-co rect{fill:rgba(216,180,90,.06)}
.a-toca{margin-top:6px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.b-lista{display:grid;gap:10px;width:100%;text-align:left}
.b-lista span{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--linea);font-size:14px;color:var(--gris)}
.b-lista b{font:500 17px/1.2 var(--f-display);color:var(--oro-claro);letter-spacing:.04em}
.b-wa{font:500 18px/1 var(--f-display);color:var(--crema);padding:12px 18px;border:1px solid var(--oro)}
.b-lema{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}

/* Videos en paneles 3D */
.movimiento{padding:130px 0 120px;border-top:1px solid var(--linea);overflow:hidden}
.paneles{display:grid;gap:18px;max-width:1240px;margin:0 auto;padding:0 var(--gutter);perspective:1200px}
.panel{position:relative;margin:0;border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:6px;background:#000;overflow:hidden;transform-style:preserve-3d;will-change:transform;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.panel video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:9/14}
.p-centro video{aspect-ratio:auto;height:100%}
.panel figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 14px;background:linear-gradient(transparent,rgba(11,10,8,.9));font:500 18px/1 var(--f-display);letter-spacing:.06em;text-align:center;color:var(--oro-claro)}
@media (min-width:860px){
  .paneles{grid-template-columns:1fr 1.25fr 1fr;align-items:center;gap:28px}
  .p-centro{aspect-ratio:9/14}
}