/* ===== Degradados, 3D y movimiento extra ===== */
html{background:#0C0907}
body{background:transparent}
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 600px at 88% 6%,rgba(240,162,27,.17),transparent 62%),
  radial-gradient(800px 700px at 4% 42%,rgba(194,58,34,.15),transparent 62%),
  radial-gradient(900px 700px at 82% 92%,rgba(90,37,82,.32),transparent 62%),
  linear-gradient(180deg,#0C0907,#150E0A 50%,#0C0907)}

/* Barra de progreso */
#progress{position:fixed;inset:0 0 auto 0;height:4px;z-index:95;pointer-events:none}
#progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#C23A22,#F0A21B,#CDB16B)}

/* Hero */
.hero{position:relative;overflow:clip;background:none}
.hero::before{content:"";position:absolute;width:70vmax;height:70vmax;left:-25vmax;top:-25vmax;pointer-events:none;
  background:radial-gradient(circle,rgba(240,162,27,.26),transparent 62%);animation:deriva 14s ease-in-out infinite alternate}
.hero-txt{position:relative;z-index:1}
@keyframes deriva{to{transform:translate(18vmax,10vmax) scale(1.15)}}
.hero h1 em{color:var(--aji);background:linear-gradient(100deg,#FFD97A 0%,#F0A21B 45%,#E2552E 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-pic{perspective:1100px}
.hero-pic>img{scale:1.08;transition:rotate .25s var(--ease)}
.fall{filter:drop-shadow(0 12px 12px rgba(0,0,0,.55));translate:calc(var(--mx,0) * var(--dp,1) * -46px) calc(var(--my,0) * var(--dp,1) * -46px);
  transition:translate .3s var(--ease)}
.js .fall{animation:cae .9s var(--ease) forwards,mece 5.5s ease-in-out 2.4s infinite alternate}
@keyframes mece{from{rotate:-7deg}to{rotate:8deg}}

/* Botones 3D */
.btn{clip-path:none;border-radius:14px;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#F2705A 0%,#C23A22 48%,#8F2412 100%);
  box-shadow:0 6px 0 #6A190C,0 14px 20px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 8px rgba(0,0,0,.28);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.btn.oro{background:linear-gradient(180deg,#FBEBB2 0%,#CDB16B 50%,#9A7F35 100%);color:#1a1208;text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:0 6px 0 #6B5819,0 14px 20px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.2)}
.btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateX(-140%);
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.6) 50%,transparent 64%)}
.hero .btn::after{animation:brillo 4.8s ease-in-out 2s infinite}
@keyframes brillo{0%,55%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
@media (hover:hover){
  .btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 #6A190C,0 20px 26px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 8px rgba(0,0,0,.28)}
  .btn.oro:hover{box-shadow:0 9px 0 #6B5819,0 20px 26px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.2)}
  .btn:hover::after{animation:none;transform:translateX(140%);transition:transform .7s var(--ease)}
}
.btn:active{transform:translateY(5px) scale(.98);box-shadow:0 1px 0 #6A190C,0 3px 8px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.3);transition-duration:.06s}
.btn.oro:active{box-shadow:0 1px 0 #6B5819,0 3px 8px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.5)}
.btn:focus-visible{box-shadow:0 6px 0 #6A190C,inset 0 0 0 4px #0C0907,inset 0 0 0 7px #F5ECDD}

/* Chips y pestañas */
.chips-bar{background:linear-gradient(180deg,#0C0907 70%,rgba(12,9,7,0))}
.chip{background:linear-gradient(180deg,#2C2018,#17110D);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #070504}
.chip[aria-current="true"]{background:linear-gradient(180deg,#F5E2A0,#CDB16B 60%,#A38A40);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 #6B5819}
.tabs button{border-radius:12px;background:linear-gradient(180deg,#2C2018,#17110D);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #070504}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,#F5E2A0,#CDB16B 60%,#A38A40);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 #6B5819}

/* Tarjetas 3D */
.stars,.grid,.rates{perspective:1100px}
.card,.st,.rate{border-radius:16px;background:linear-gradient(160deg,#2E2017 0%,#17110D 55%,#0F0B08 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 28px rgba(0,0,0,.4);will-change:auto}
.js .card.rv,.js .st.rv,.js .rate.rv{transition:opacity .6s var(--ease),transform .6s var(--ease),rotate .25s var(--ease)}
.card .ph,.st .ph{background:linear-gradient(135deg,#5A3825,#2A180F)}
.card::after,.st::after,.rate::after{content:"";position:absolute;inset:-60%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.16),transparent 38%);
  transform:translate(var(--gx,0%),var(--gy,0%));transition:opacity .3s}
@media (hover:hover){.card:hover::after,.st:hover::after,.rate:hover::after{opacity:1}}
.rate{position:relative;overflow:hidden}
.card .ph .art,.st .ph .art{filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}
.card .peek{filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.tag{border-radius:8px}

/* Marquee */
.marquee{overflow:hidden;padding:12px 0;background:linear-gradient(90deg,#7A1826,#C23A22 45%,#F0A21B);color:var(--crema);
  font:400 clamp(20px,3vw,28px)/1 "Chelsea Market","DM Sans",sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.mq{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq span{display:inline-flex;align-items:center;gap:20px;padding-right:20px;white-space:nowrap}
.mq svg{width:40px;height:40px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
@keyframes mq{to{transform:translateX(-50%)}}

/* Decoraciones con parallax */
.deco-sec{position:relative;overflow:clip}
.deco-sec>.wrap{position:relative;z-index:1}
.deco{position:absolute;aspect-ratio:1/1;height:auto;pointer-events:none;z-index:0;filter:drop-shadow(0 16px 14px rgba(0,0,0,.55));
  translate:0 var(--py,0px);animation:mece 7s ease-in-out infinite alternate}

/* Anillo 3D */
.ring-sec{overflow:clip}
.ring-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:center}
.ring3d{perspective:1100px;height:clamp(260px,34vw,380px);display:grid;place-items:center}
.ring{position:relative;width:clamp(96px,13vw,150px);height:clamp(96px,13vw,150px);transform-style:preserve-3d;animation:spin 24s linear infinite}
.rf{position:absolute;inset:0;transform:rotateY(calc(var(--i) * 72deg)) translateZ(clamp(120px,17vw,210px));transform-style:preserve-3d}
.un{width:100%;height:100%;transform:rotateY(calc(var(--i) * -72deg));transform-style:preserve-3d}
.un svg{width:100%;height:100%;animation:unspin 24s linear infinite;filter:drop-shadow(0 14px 14px rgba(0,0,0,.55))}
@keyframes spin{to{transform:rotateY(360deg)}}
@keyframes unspin{to{transform:rotateY(-360deg)}}
.ring-sec{background:radial-gradient(700px 420px at 28% 50%,rgba(240,162,27,.14),transparent 70%)}

/* Escena sartén */
.scene{background:radial-gradient(800px 520px at 28% 55%,rgba(240,162,27,.16),transparent 70%)}
.pan{filter:drop-shadow(0 24px 24px rgba(0,0,0,.5))}

/* Tragos */
.tragos{position:relative;overflow:clip;background:linear-gradient(135deg,#7A3470 0%,#4B1C45 50%,#230B21 100%)}
.tragos::before{content:"";position:absolute;width:60vmax;height:60vmax;right:-20vmax;top:-20vmax;pointer-events:none;
  background:radial-gradient(circle,rgba(240,162,27,.28),transparent 62%);animation:deriva 16s ease-in-out infinite alternate}
.tragos .wrap{position:relative}
.tr-list li{border-radius:12px;background:linear-gradient(90deg,rgba(12,9,7,.7),rgba(12,9,7,.4))}
.glass{filter:drop-shadow(0 24px 22px rgba(0,0,0,.5))}
.bub circle{animation:burb 3.4s ease-in infinite}
.bub .b2{animation-delay:.9s;animation-duration:3.8s}.bub .b3{animation-delay:1.7s}.bub .b4{animation-delay:2.5s;animation-duration:3s}
@keyframes burb{0%{transform:translateY(0);opacity:0}15%{opacity:.7}100%{transform:translateY(-175px);opacity:0}}

/* Otras secciones */
.historia{background:linear-gradient(180deg,rgba(23,17,13,0),rgba(23,17,13,.9) 40%,rgba(23,17,13,0))}
.resenas{background:radial-gradient(800px 500px at 50% 0%,rgba(240,162,27,.12),transparent 70%)}
.rate .num{background:linear-gradient(180deg,#FFD97A,#F0A21B 60%,#C9650A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--aji)}
.foot{background:linear-gradient(180deg,#1B140F,#0A0705)}
.map iframe{border-radius:16px}
.ph-box,.pending{border-radius:12px}
.gal img{border-radius:14px}

/* Títulos palabra por palabra */
.js .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.js .w>i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .75s var(--ease);transition-delay:calc(var(--k) * 70ms)}
.js .rv.in .w>i{transform:none}

/* WhatsApp */
.wa-float{background:linear-gradient(180deg,#3FD27A,#1FA855 55%,#14803F);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 6px 0 #0F5F2E,0 14px 20px rgba(0,0,0,.5)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1FA855;z-index:-1;animation:pulso 2.6s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.8);opacity:0}}

@media (max-width:860px){
  .ring-grid{grid-template-columns:1fr}
  .deco{width:56px!important;opacity:.6}
  .mq svg{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .js .w>i{transform:none;transition:none}
  .hero::before,.tragos::before{display:none}
  .mq{transform:none}
  .fall,.hero-pic>img{translate:none}
}

/* Barra de demo */
.demo-bar{position:relative;z-index:96;text-align:center;padding:9px var(--pad);font:700 14px/1.3 "DM Sans",sans-serif;color:#1a1208;
  background:linear-gradient(90deg,#F0A21B,#FFD97A 50%,#F0A21B)}
.top{top:var(--demo-h,38px)}
@media (max-width:860px){.top{top:auto}}

/* Fotos referenciales y créditos */
.refb{position:absolute;left:8px;bottom:8px;z-index:2;font:700 12px/1 "DM Sans",sans-serif;padding:5px 9px;border-radius:8px;color:#F5ECDD;background:rgba(12,9,7,.78)}
.card .ph img,.st .ph img{object-position:50% 40%}
.credits{max-width:90ch;margin:28px auto 0;font-size:14px;opacity:.85}
.credits a{text-underline-offset:3px}

/* Más aire dentro de etiquetas */
.refb{padding:7px 12px;font-size:13px}
.tag{padding:5px 11px}
.demo-bar{padding:11px var(--pad)}