/*
 * 12-ux-liquid-glass.css - Capa V2 UX 'Liquid Glass': variables extra, fondo con orbes, nav, hero, superficies glass, carrusel, beneficios, acciones y footer.
 * Origen: index.html, <style> #1 (lineas 82-352). Contenido identico al original.
 */
:root{
  --glass-bg:rgba(18,20,31,.52);
  --glass-bg-strong:rgba(20,22,35,.72);
  --glass-border:rgba(255,255,255,.15);
  --glass-hi:rgba(255,255,255,.22);
  --accent:#b8ffd9;
  --display:Impact,Anton,"Arial Black",system-ui,sans-serif;
  --ios:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 600px at var(--mx,50%) var(--my,20%),rgba(125,105,255,.11),transparent 65%),
    radial-gradient(700px 500px at 85% 75%,rgba(60,255,190,.055),transparent 65%),
    #080912;
  font-family:var(--ios);
  letter-spacing:-.01em;
}
body:before,body:after{
  content:"";position:fixed;z-index:-2;pointer-events:none;border-radius:50%;
  filter:blur(90px);opacity:.34;mix-blend-mode:screen;
}
body:before{
  width:38vw;height:38vw;left:-12vw;top:8vh;
  background:radial-gradient(circle,rgba(150,120,255,.17),transparent 68%);
  animation:orbFloatA 18s ease-in-out infinite alternate;
}
body:after{
  width:32vw;height:32vw;right:-8vw;bottom:3vh;
  background:radial-gradient(circle,rgba(80,255,200,.10),transparent 70%);
  animation:orbFloatB 22s ease-in-out infinite alternate;
}
@keyframes orbFloatA{to{transform:translate3d(12vw,8vh,0) scale(1.18)}}
@keyframes orbFloatB{to{transform:translate3d(-10vw,-9vh,0) scale(1.25)}}

.nav{
  background:rgba(11,12,20,.44)!important;
  border-color:rgba(255,255,255,.15)!important;
  backdrop-filter:blur(28px) saturate(190%);
  -webkit-backdrop-filter:blur(28px) saturate(190%);
  box-shadow:0 18px 60px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.12);
}
.brand{
  font-family:var(--ios)!important;font-weight:700!important;
  letter-spacing:-.08em!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.04);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.brand:hover{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 30px rgba(184,255,217,.14),inset 0 1px 0 rgba(255,255,255,.3)}

.hero{isolation:isolate}
.hero:after{
  content:"";position:absolute;inset:-20%;
  z-index:1;pointer-events:none;
  background:
    radial-gradient(500px 300px at var(--hero-x,50%) var(--hero-y,45%),rgba(255,255,255,.09),transparent 70%),
    linear-gradient(180deg,transparent 45%,rgba(5,7,14,.42) 100%);
  mix-blend-mode:screen;
  transition:background-position .3s ease;
}
.hero-media{
  transform:scale(1.06);
  filter:saturate(1.08) contrast(1.04);
  will-change:transform;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1s ease;
}
.hero-copy{z-index:2}
.hero-title{
  font-family:var(--display)!important;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:-.055em!important;
  line-height:.86!important;
  text-shadow:0 5px 35px rgba(0,0,0,.42),0 0 80px rgba(255,255,255,.08);
  transform:translateZ(0);
}
.hero-sub{font-family:var(--ios)!important;font-weight:500!important}
.eyebrow,.kicker,.navlinks,.navcta,.scrollcue{font-family:var(--ios)!important}

.section h2,.story-title,.cta-title{
  font-family:var(--display)!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  text-transform:uppercase;
}
.section h2 em,.cta-title em{font-family:var(--display)!important}

.glass{
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035) 42%,rgba(255,255,255,.018))!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.035),
    inset 12px 0 30px rgba(255,255,255,.015);
  backdrop-filter:blur(32px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter:blur(32px) saturate(190%) brightness(1.06);
  overflow:hidden;
}
.glass:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 18%,transparent 70%,rgba(255,255,255,.035));
  opacity:.7;
}
.glass:after{
  content:"";position:absolute;top:-70%;left:-25%;width:50%;height:220%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:rotate(18deg) translateX(-140%);
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
}
.glass:hover:after{transform:rotate(18deg) translateX(420%)}

.gallery-wrap{
  min-height:700px!important;
  border-radius:36px!important;
  background:
    radial-gradient(600px 300px at 50% 48%,rgba(160,140,255,.09),transparent 70%),
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  perspective:1600px;
}
.gallery-stage{
  position:relative!important;
  height:560px!important;
  min-height:560px!important;
  perspective:1600px!important;
  transform-style:preserve-3d!important;
  overflow:visible!important;
  touch-action:pan-y;
}
.gallery-stage:before{
  content:"";position:absolute;left:50%;top:50%;
  width:75%;height:55%;
  transform:translate(-50%,-50%) rotateX(65deg);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(170,150,255,.13),transparent 68%);
  filter:blur(25px);
  pointer-events:none;
}
.card{
  width:310px!important;
  height:470px!important;
  border-radius:32px!important;
  position:absolute!important;
  left:50%!important;top:50%!important;
  margin:0!important;
  transform-style:preserve-3d!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:rgba(20,22,32,.52)!important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
  backdrop-filter:blur(18px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(165%)!important;
  will-change:transform,filter,opacity;
  transition:box-shadow .55s ease,filter .55s ease,opacity .55s ease;
  cursor:grab;
}
.card:active{cursor:grabbing}
.card:before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.18),transparent 20%,transparent 65%,rgba(0,0,0,.18));
  mix-blend-mode:screen;
}
.card:after{
  content:"";position:absolute;z-index:4;inset:auto 10% 6% 10%;height:32%;
  background:radial-gradient(ellipse,rgba(0,0,0,.38),transparent 70%);
  filter:blur(18px);pointer-events:none;
}
.card img{
  width:100%!important;height:100%!important;object-fit:cover!important;
  transform:scale(1.015);
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .7s ease;
}
.card:hover{
  box-shadow:
    0 45px 110px rgba(0,0,0,.48),
    0 0 50px rgba(170,145,255,.10),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.card:hover img{transform:scale(1.075);filter:saturate(1.08) contrast(1.03)}
.card-info{z-index:5!important}
.card-name{
  font-family:var(--display)!important;
  text-transform:uppercase;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
.gallery-controls{position:relative;z-index:20}
.circle-btn{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.16)!important;
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 35px rgba(0,0,0,.2);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s ease,box-shadow .35s ease;
}
.circle-btn:hover{
  transform:translateY(-3px) scale(1.08);
  background:rgba(255,255,255,.13)!important;
  box-shadow:0 0 35px rgba(184,255,217,.10),inset 0 1px 0 rgba(255,255,255,.28);
}
.progress i{
  transition:transform .35s ease,opacity .35s ease,box-shadow .35s ease;
}
.progress i.active{transform:scale(1.55);box-shadow:0 0 18px rgba(184,255,217,.25)}

.benefit,.story-copy,.quote,.cta-card{
  transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s ease,border-color .65s ease;
}
.benefit:hover,.story-copy:hover,.quote:hover,.cta-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.23)!important;
  box-shadow:0 35px 110px rgba(0,0,0,.32),0 0 55px rgba(160,145,255,.07),inset 0 1px 0 rgba(255,255,255,.22);
}
.bicon{
  transition:transform .5s cubic-bezier(.2,.8,.2,1),text-shadow .5s ease;
}
.benefit:hover .bicon{transform:rotate(12deg) scale(1.16);text-shadow:0 0 28px rgba(184,255,217,.28)}

.action{
  backdrop-filter:blur(20px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(180%)!important;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,background .4s ease!important;
}
.action:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 35px rgba(184,255,217,.08);
}

.footer-name{
  font-family:var(--ios)!important;
  font-weight:700!important;
  font-size:clamp(48px,9vw,150px)!important;
  letter-spacing:-.075em!important;
  line-height:.82!important;
  text-transform:none!important;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.50));
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  text-shadow:0 15px 55px rgba(0,0,0,.18);
}
footer{
  position:relative;overflow:hidden;
  border-top-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.035))!important;
}
footer:before{
  content:"";position:absolute;left:50%;bottom:-45%;transform:translateX(-50%);
  width:70vw;height:65vw;border-radius:50%;
  background:radial-gradient(circle,rgba(160,145,255,.07),transparent 66%);
  pointer-events:none;
}
.footer-brand{position:relative;z-index:2;align-items:flex-end!important}
.footer-brand .brand{margin-bottom:5px}

@media(max-width:900px){
  .gallery-wrap{min-height:620px!important}
  .gallery-stage{height:480px!important;min-height:480px!important}
  .card{width:250px!important;height:390px!important;border-radius:28px!important}
}
@media(max-width:640px){
  .gallery-wrap{border-radius:26px!important}
  .gallery-stage{height:420px!important;min-height:420px!important}
  .card{width:220px!important;height:350px!important}
  .footer-name{font-size:clamp(52px,16vw,100px)!important}
}