.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rojo); color:#FFF; padding:12px 20px;   
  font-weight:700; border-radius:0 0 var(--r-1) 0;
}
.saltar:focus{ left:0 }


.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,10,10,.82);
  border-bottom:1px solid transparent;
  transition:background-color var(--t-corta) var(--e-ui),
             border-color var(--t-corta) var(--e-ui);
}

@supports (backdrop-filter: blur(12px)){
  .nav{ backdrop-filter:blur(12px); background:rgba(10,10,10,.62) }
}
.nav.scrolleado{ background:rgba(10,10,10,.92); border-bottom-color:var(--linea) }

.nav-caja{
  max-width:var(--max); margin-inline:auto; padding:0 var(--gutter);
  height:68px; display:flex; align-items:center; gap:var(--s-6);
}
.nav-marca{ display:block; flex:none }
.nav-marca img{ width:132px; height:auto }


.nav-links{ display:flex; gap:var(--s-4); margin-left:auto; position:relative }
.nav-links a{
  color:var(--texto-2); text-decoration:none; font-size:var(--fs-small);
  font-weight:500; padding:8px 14px; position:relative; border-radius:10px;
  transition:color var(--t-micro) var(--e-ui);
}
.nav-links a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--rojo); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-corta) var(--e-salida);
}


.nav-links a::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:12px;
  background:radial-gradient(circle,
    rgba(var(--rojo-rgb), .20) 0%, rgba(var(--rojo-rgb), .07) 50%, transparent 100%);
  opacity:0; transform:scale(.8);
  transition:opacity var(--t-media) var(--e-ui), transform var(--t-media) var(--e-salida);
  pointer-events:none;
}

.nav-links::before{
  content:''; position:absolute; inset:-10px -6px; z-index:-1; border-radius:18px;
  background:radial-gradient(ellipse at center,
    transparent 0%, rgba(var(--rojo-rgb), .10) 45%, transparent 80%);
  opacity:0; transition:opacity var(--t-media) var(--e-ui);
  pointer-events:none;
}

@media (hover:hover){
  .nav-links:hover::before{ opacity:1 }
  .nav-links a:hover{ color:var(--texto) }
  .nav-links a:hover::after{ transform:scaleX(1) }
  .nav-links a:hover::before{ opacity:1; transform:scale(1.9) }
  
  .tema-btn:hover{ box-shadow:0 0 0 1px var(--rojo-dim), 0 0 22px rgba(var(--rojo-rgb), .28) }
}

.nav-links a:focus-visible::before{ opacity:1; transform:scale(1.9) }

.nav-links a[aria-current="page"]{ color:var(--texto) }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1) }


@media (hover:none){
  .nav-links a::before, .nav-links::before{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .nav-links a::before{ transition:opacity var(--t-corta) linear; transform:none }
  .nav-links a:hover::before, .nav-links a:focus-visible::before{ transform:none }
}

.nav-cta{ min-height:40px; padding:0 20px; font-size:var(--fs-small); flex:none }


.nav-abrir{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:0; cursor:pointer; padding:0;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.nav-abrir span{
  display:block; height:2px; background:var(--texto); border-radius:2px;
  transition:transform var(--t-corta) var(--e-salida), opacity var(--t-micro);
}
.nav-abrir span:nth-child(1){ width:22px }
.nav-abrir span:nth-child(2){ width:15px }
.nav-abrir[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg) }
.nav-abrir[aria-expanded="true"] span:nth-child(2){ width:22px; transform:translateY(-4px) rotate(-45deg) }


.nav-movil{
  border-top:1px solid var(--linea); padding:var(--s-5) var(--gutter) var(--s-6);
  display:flex; flex-direction:column; gap:var(--s-2);
  background:rgba(10,10,10,.97);
  box-shadow:0 100vh 0 100vh rgba(5,6,10,.72);
}

.nav-movil[hidden]{ display:none }
.nav-movil a{
  color:var(--texto); text-decoration:none; font-size:var(--fs-lead);
  font-weight:600; padding:14px 0; border-bottom:1px solid var(--linea);
}
.nav-movil a:last-child{ border:0; margin-top:var(--s-4); justify-content:center }

@media (max-width:900px){
  .nav-links, .nav-cta{ display:none }
  .nav-abrir{ display:flex; margin-left:0 }
  
  .tema-btn{ margin-left:auto }
  .nav-caja{ gap:var(--s-3) }
}
@media (min-width:901px){
  .nav-movil{ display:none !important }
}


main{ padding-top:68px }


.wa-flota{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  transition:transform var(--t-corta) var(--e-salida);
}
.wa-flota svg{ width:30px; height:30px; fill:#fff }
@media (hover:hover){ .wa-flota:hover{ transform:scale(1.06) } }
@media (max-width:640px){ .wa-flota{ right:16px; bottom:16px } }


.pie{ border-top:1px solid var(--linea); padding-block:var(--s-9) var(--s-7) }
.pie-grid{
  display:grid; gap:var(--s-7);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.pie-marca{ grid-column:span 1 }
.pie-marca img{ width:150px; height:auto; margin-bottom:var(--s-4) }
.pie-marca p{ color:var(--texto-3); font-size:var(--fs-small); line-height:1.6 }
@media (min-width:900px){ .pie-marca{ grid-column:span 2; padding-right:var(--s-8) } }

.pie-col{ display:flex; flex-direction:column; gap:var(--s-3) }
.pie-col .label{ margin-bottom:var(--s-1) }

.pie-col a{
  color:var(--texto-2); text-decoration:none; font-size:var(--fs-small);
  transition:color var(--t-micro) var(--e-ui);
  
  display:block; width:fit-content; padding-block:11px;
}
.pie-col:has(a){ gap:0 }
.pie-col .label{ margin-bottom:calc(var(--s-1) - 6px) }
@media (hover:hover){ .pie-col a:hover{ color:var(--rojo-tinta) } }

.pie-fin{
  margin-top:var(--s-9); padding-top:var(--s-5); border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  color:var(--texto-3); font-size:var(--fs-small);
}




.num{
  font-family:'Archivo Black',sans-serif; color:var(--rojo-tinta);
  font-size:var(--fs-small); letter-spacing:.08em;
}

.eyebrow{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4) }
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--linea); max-width:80px }


.tira{
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
  margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--linea);
  font-size:var(--fs-small); color:var(--texto-2);
}
.tira b{ color:var(--texto); font-weight:600 }




.hero-serv{ padding-block:clamp(56px,9vh,110px) clamp(40px,6vh,72px); position:relative; overflow:hidden }
.hero-serv::before{
  content:''; position:absolute; inset:-30% -20% auto auto; width:min(700px,88vw); aspect-ratio:1;
  background:radial-gradient(circle at 60% 40%, rgba(var(--rojo-rgb), .09), transparent 62%); pointer-events:none;
}


.hero-serv::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(var(--fondo-rgb), 1)   0%,
    rgba(var(--fondo-rgb), .66) 40%,
    rgba(var(--fondo-rgb), 0)   72%);
}

.hero-serv > .envoltorio{ position:relative; z-index:2 }
.hero-serv .caja{ position:relative; z-index:2; max-width:900px }

.hero-serv h1{ font-size:clamp(2rem,1.1rem + 3.9vw, 4rem); line-height:1.06;
               letter-spacing:-.015em; text-wrap:balance }
.hero-serv .bajada{ margin-top:var(--s-5); max-width:58ch; font-size:var(--fs-lead); color:var(--texto-2) }


.hero-serv + section{ padding-top:clamp(28px,3.4vw,56px) }


.dolores{ display:grid; gap:var(--s-4); grid-template-columns:1fr }
@media (min-width:700px){ .dolores{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1060px){ .dolores{ grid-template-columns:repeat(4,1fr) } }
.dolor{
  border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); position:relative; overflow:hidden;
}

.dolor-foto{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--negro) }
.dolor-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.dolor-foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.82) 4%, rgba(0,0,0,.15) 62%);
}
.dolor-foto .horas{ position:absolute; z-index:2; left:var(--s-5); bottom:12px; color:var(--rojo-tinta) }
.dolor-cuerpo{ padding:var(--s-5) var(--s-6) var(--s-6) }
.dolor:has(.dolor-foto) > .dolor-cuerpo > p{ margin-top:0 }
.dolor > .horas{ padding:var(--s-6) var(--s-6) 0 }
.dolor > p{ padding:0 var(--s-6) var(--s-6) }
.dolor .horas{
  font-family:'Archivo Black',sans-serif; color:var(--rojo-tinta);
  font-size:clamp(30px,3.6vw,44px); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.dolor .horas small{ font-size:14px; color:var(--texto-3); font-family:'Archivo',sans-serif; font-weight:500 }
.dolor p{ margin-top:var(--s-4); color:var(--texto-2); font-size:var(--fs-small); line-height:1.55 }


.casos{ display:grid; gap:var(--s-4); grid-template-columns:1fr }
@media (min-width:820px){ .casos{ grid-template-columns:repeat(2,1fr); gap:var(--s-5) } }
@media (min-width:1060px){ .casos{ grid-template-columns:repeat(3,1fr) } }

.caso{
  border:1px solid var(--linea); border-radius:var(--r-2); overflow:hidden;
  background:var(--negro-elev); display:flex; flex-direction:column;
  transition:border-color var(--t-corta) var(--e-ui), transform var(--t-corta) var(--e-ui);
}
@media (hover:hover){ .caso:hover{ border-color:rgba(var(--rojo-rgb), .32); transform:translateY(-4px) } }

.caso-top{ padding:var(--s-6) var(--s-6) 0; display:flex; align-items:flex-start; gap:var(--s-4) }
.caso-ico{
  width:44px; height:44px; flex:none; border-radius:var(--r-2);
  background:var(--rojo-ghost); border:1px solid rgba(var(--rojo-rgb), .24);
  display:grid; place-items:center;
}
.caso-ico svg{ width:22px; height:22px; stroke:var(--rojo-tinta); fill:none; stroke-width:1.8;
               stroke-linecap:round; stroke-linejoin:round }
.caso h3{ font-size:var(--fs-h3); line-height:1.2 }
.caso-quien{ margin-top:6px; font-size:12px; color:var(--texto-3); letter-spacing:.04em; text-transform:uppercase }


.ad{ margin:var(--s-5) var(--s-6) var(--s-6); display:grid; gap:2px; border-radius:var(--r-2); overflow:hidden }
.ad-fila{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; font-size:var(--fs-small); line-height:1.5 }
.ad-antes{ background:rgba(255,255,255,.028); color:var(--texto-3) }
.ad-antes b{ color:var(--texto-2); font-weight:600 }
.ad-desp{ background:rgba(var(--rojo-rgb), .055); color:var(--texto) }
.ad-desp b{ color:var(--rojo-tinta); font-weight:700 }
.ad-et{
  flex:none; width:52px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; padding-top:2px;
}
.ad-antes .ad-et{ color:var(--texto-3) }
.ad-desp .ad-et{ color:var(--rojo-tinta) }


.planes{ display:grid; gap:var(--s-4); grid-template-columns:1fr }

@media (min-width:900px){ .planes{ grid-template-columns:repeat(3,1fr); gap:var(--s-5); align-items:stretch } }

.plan{
  --r-plan:16px;
  border:1px solid var(--linea); border-radius:var(--r-plan); padding:var(--s-6);
  background:var(--negro-elev); display:flex; flex-direction:column; height:100%;
  position:relative; text-align:center;
}

.plan.destacado{
  border:2px solid var(--rojo);
  
  box-shadow:0 0 0 5px rgba(var(--rojo-rgb), .22),
             0 20px 50px rgba(0,0,0,.42);
  overflow:hidden;   
}

.plan.destacado::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--rojo-hover), var(--rojo) 55%, var(--rojo-dim));
}

.plan-cinta{
  position:absolute; top:0; right:0;
  background:var(--rojo); color:#FFF   ; font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 11px;
  border-radius:0 calc(var(--r-plan) - 2px) 0 12px;
  display:inline-flex; align-items:center; gap:5px;
}
.plan-cinta .cinta-ico{ width:12px; height:12px; fill:currentColor; stroke:none; flex:none }

.plan-nom{ font-size:15px; color:var(--texto-3); font-weight:600; letter-spacing:0; text-transform:none }

.plan-val{
  margin-top:var(--s-4); font-family:'Archivo Black',sans-serif;
  font-size:clamp(38px,4.2vw,48px); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap;
}
.plan-per{
  
  font-family:'Archivo',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.02em; color:var(--texto-3);
}
.plan.destacado .plan-val{ color:var(--rojo-tinta) }



.plan{
  --texto:#F2F4FA; --texto-2:#C6CBD9; --texto-3:#A8ADBC;
  
  --rojo-tinta:#FF8A8F;
  color:var(--texto-2);
  
  --linea:rgba(255,255,255,.16);
}

.plan-nota{ margin-top:6px; font-size:12px; line-height:1.5; color:var(--texto-3); text-wrap:balance }

.plan ul{ list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; gap:9px; flex:1 }

.plan li{ display:flex; gap:9px; font-size:var(--fs-small); color:var(--texto-2); line-height:1.45; text-align:left }
.plan li svg{ width:16px; height:16px; flex:none; margin-top:2px; stroke:var(--rojo-tinta);
              fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.plan li.no{ color:var(--texto-3) }
.plan li.no svg{ stroke:var(--texto-3); stroke-width:2 }


.plan-filo{ width:100%; height:1px; border:0; background:var(--linea); margin:var(--s-5) 0 var(--s-5) }
.plan .btn{ width:100%; font-size:16px; letter-spacing:-.01em }

.plan-para{ margin-top:var(--s-5); color:var(--texto-3); font-size:12.5px; line-height:1.55;
            text-wrap:balance;   
            }

@media (min-width:900px){ .plan-para{ min-height:6.2em } }


.plan{
  --tx:0px; --ty:0px; --ty-in:0px; --ry:0deg; --sc:1;
  transform:translate3d(var(--tx), calc(var(--ty) + var(--ty-in)), 0) rotateY(var(--ry)) scale(var(--sc));
  transition:transform 520ms var(--e-salida), box-shadow 520ms var(--e-salida);
}
@media (min-width:900px){
  
  .planes{ perspective:1200px; perspective-origin:50% 42% }

  
  .planes:has(.destacado) .plan:has(~ .destacado){
    --tx:22px; --ry:9deg; --sc:.94; transform-origin:right center;
  }
  .planes:has(.destacado) .destacado ~ .plan{
    --tx:-22px; --ry:-9deg; --sc:.94; transform-origin:left center;
  }
  
  .planes:has(.destacado) .plan:has(+ .destacado){ --tx:10px; --ry:5deg; --sc:.968 }
  .planes:has(.destacado) .destacado + .plan{ --tx:-10px; --ry:-5deg; --sc:.968 }

  .plan.destacado{ --ty:-14px; z-index:2 }

  
  
  .plan.destacado{
    box-shadow:0 0 0 5px rgba(var(--rojo-rgb), .26),
               0 22px 56px rgba(0,0,0,.40),
               inset 0 1px 0 rgba(255,255,255,.10);
  }
  :root[data-tema="claro"] .plan.destacado{
    box-shadow:0 14px 38px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  }

  
  @media (hover:hover) and (pointer:fine){
    .planes:has(.destacado) .plan:has(~ .destacado):hover,
    .planes:has(.destacado) .destacado ~ .plan:hover{ --ry:0deg; --sc:1; z-index:3 }
  }
}


.anim .plan[data-entra]{ opacity:0; --ty-in:26px; transform:translate3d(var(--tx), calc(var(--ty) + var(--ty-in)), 0) rotateY(var(--ry)) scale(var(--sc)) }
.anim .plan[data-entra].visible{ opacity:1; --ty-in:0px; transform:translate3d(var(--tx), calc(var(--ty) + var(--ty-in)), 0) rotateY(var(--ry)) scale(var(--sc)) }


@media (prefers-reduced-motion:reduce){
  .plan{ transition:none }
  .anim .plan[data-entra]{ opacity:1; --ty-in:0px; transform:translate3d(var(--tx), calc(var(--ty) + var(--ty-in)), 0) rotateY(var(--ry)) scale(var(--sc)) }
}




.cierre-caja{ max-width:720px }
.cierre-caja h2{ font-size:clamp(1.8rem,1.1rem + 2.8vw,3rem) }
.cierre-botones{ margin-top:var(--s-6); display:flex; gap:var(--s-3); flex-wrap:wrap }


.hero-doble{ display:grid; gap:var(--s-7); grid-template-columns:1fr; align-items:center }
@media (min-width:980px){
  .hero-doble{ grid-template-columns:1.05fr .95fr; gap:var(--s-8) }
}


.mockup{
  border:1px solid var(--linea-2); border-radius:var(--r-2); overflow:hidden;
  background:#0E0E0E; box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
}
@media (max-width:979px){ .mockup{ transform:none } }
@media (prefers-reduced-motion:reduce){ .mockup{ transform:none } }

.mockup-barra{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; border-bottom:1px solid var(--linea); background:#141414;
}
.mockup-barra i{ width:9px; height:9px; border-radius:50%; background:#2E2E2E; flex:none }
.mockup-url{
  margin-left:8px; flex:1; background:#0B0B0B; border-radius:100px;
  padding:5px 12px; font-size:11px; color:var(--texto-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


.mockup-vista{ position:relative; aspect-ratio:1424/600; background:#0B0B0B }
.mockup-vista img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; transition:opacity 700ms var(--e-ui);
}
.mockup-vista img.activa{ opacity:1 }


.benef{ display:grid; gap:var(--s-4); grid-template-columns:1fr }
@media (min-width:640px){ .benef{ grid-template-columns:repeat(2,1fr) } }

@media (min-width:1040px){ .benef{ grid-template-columns:repeat(auto-fit, minmax(230px,1fr)) } }

.ben{
  position:relative; overflow:hidden;
  border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); padding:var(--s-6);
  transition:border-color var(--t-corta) var(--e-ui), transform var(--t-corta) var(--e-ui);
}
@media (hover:hover){
  .ben:hover{ border-color:rgba(var(--rojo-rgb), .3); transform:translateY(-4px) }
  .ben:hover .ben-ico{ opacity:.16; rotate:-4deg }
}

.ben-ico{
  position:absolute; top:-14px; right:-14px; width:104px; height:104px;
  opacity:.09; pointer-events:none;
  transition:opacity var(--t-media) var(--e-ui), rotate var(--t-media) var(--e-salida);
}
.ben-ico svg{ width:100%; height:100%; stroke:var(--rojo-tinta); fill:none; stroke-width:1.2;
              stroke-linecap:round; stroke-linejoin:round }
:root[data-tema="claro"] .ben-ico{ opacity:.14 }

.ben-dato{
  position:relative; font-family:'Archivo Black',sans-serif; color:var(--rojo-tinta);
  font-size:clamp(26px,3vw,34px); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin-bottom:var(--s-4);
}
.ben-dato small{
  display:block; margin-top:7px; font-family:'Archivo',sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3);
}
.ben h3{ position:relative; font-size:var(--fs-body); font-weight:700; line-height:1.25 }
.ben p{ position:relative; margin-top:10px; color:var(--texto-3); font-size:var(--fs-small); line-height:1.55 }
@media (prefers-reduced-motion:reduce){ .ben-ico{ transition:none } }


.form-wa{
  border:1px solid rgba(var(--rojo-rgb), .26); border-radius:var(--r-2);
  background:linear-gradient(180deg, rgba(var(--rojo-rgb), .05), var(--negro-elev) 46%);
  padding:var(--s-7) var(--s-6); max-width:560px;
}
@media (min-width:900px){ .form-wa{ padding:var(--s-8) } }
.campo{ margin-bottom:var(--s-5) }
.campo label{ display:block; font-size:var(--fs-small); color:var(--texto-2); margin-bottom:9px; font-weight:600 }
.campo input, .campo textarea, .campo select{
  width:100%; background:#0B0B0B; color:var(--texto);
  border:1px solid var(--linea-2); border-radius:var(--r-1);
  padding:13px 15px; font:inherit; font-size:var(--fs-small);
  transition:border-color var(--t-micro) var(--e-ui);
}
.campo textarea{ resize:vertical; min-height:88px }
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--rojo-tinta);
}
.campo input::placeholder, .campo textarea::placeholder{ color:#5A5A5A }
.form-wa .btn{ width:100% }
.form-nota{ margin-top:var(--s-4); font-size:12px; color:var(--texto-3); line-height:1.5; text-align:center }



.ilu{
  display:block; width:100%; height:auto; aspect-ratio:320/168;
  border-radius:var(--r-2); background:var(--negro-elev);
  border:1px solid var(--linea); margin-bottom:var(--s-5);
}

img.ilu{ object-fit:cover }


.pasos-3{
  display:grid; gap:var(--s-6);
  grid-template-columns:repeat(3, 1fr);
}


.paso3{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); overflow:hidden;
}

.paso3 .ilu{
  grid-area:1/1; margin:0; border:0; border-radius:0;
  aspect-ratio:3/2; width:100%;
}

.paso3 h3{
  grid-area:1/1; align-self:end; z-index:1;
  margin:0; padding:56px var(--s-5) var(--s-4);
  font-size:var(--fs-h4); line-height:1.15; color:var(--texto);
}

.pasos-3{ counter-reset:paso3 }
.paso3::before{
  counter-increment:paso3; content:counter(paso3);
  grid-area:1/1; justify-self:start; align-self:start; z-index:1;
  margin:var(--s-4); width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:13px;
  color:#000; background:var(--rojo);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.paso3 p{ grid-row:3; padding:var(--s-4) var(--s-5) 0; color:var(--texto-2) }
.paso3 .paso3-tiempo{
  grid-row:4; padding:var(--s-4) var(--s-5) var(--s-5);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  
  color:var(--rojo-tinta); font-weight:600;
}

@media (max-width:900px){
  .pasos-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  
  .pasos-3{ grid-template-columns:1fr; gap:var(--s-5) }
  .paso3 .ilu{ aspect-ratio:16/9 }
  .paso3 h3{ padding-top:44px }
}


.chat-marco{
  max-width:520px; border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); overflow:hidden; margin-bottom:var(--s-7);
}
.chat-barra{
  display:flex; align-items:center; gap:11px;
  padding:11px var(--s-5); border-bottom:1px solid var(--linea);
}
.chat-ava{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:linear-gradient(140deg, var(--rojo-dim), var(--rojo-ghost));
}
.chat-quien{ display:grid; line-height:1.25 }
.chat-quien b{ font-size:13.5px; font-weight:700 }
.chat-quien span{ font-size:11px; color:var(--rojo-tinta) }
.chat-hora{ margin-left:auto; font-size:11px; color:var(--texto-3) }

.chat{ list-style:none; padding:var(--s-5); display:grid; gap:9px }
.msg{
  max-width:82%; padding:9px 13px; border-radius:14px;
  font-size:13.5px; line-height:1.45; position:relative;
}

.msg.ellos{ justify-self:start; background:var(--fl-caja); border:1px solid var(--linea-2); border-bottom-left-radius:5px }
.msg.yo{
  justify-self:end; background:var(--rojo-ghost); color:var(--texto);
  border:1px solid rgba(var(--rojo-rgb), .22); border-bottom-right-radius:5px;
}
.msg-t{ display:block; margin-top:5px; font-size:10.5px; color:var(--texto-3); text-align:right }
.chat-pie{
  border-top:1px solid var(--linea); padding:11px var(--s-5);
  font-size:12px; color:var(--texto-3);
}


.reglas-foto{
  border-radius:var(--r-2); overflow:hidden; margin-bottom:var(--s-6);
  aspect-ratio:24/7; background:var(--negro);
}
@media (max-width:700px){ .reglas-foto{ aspect-ratio:16/9 } }
.reglas-foto img{ width:100%; height:100%; object-fit:cover; display:block }
.ilu .z{ fill:var(--rojo-ghost) }                       
.ilu .l{ fill:none; stroke:var(--linea-2); stroke-width:2 }   
.ilu .a{ fill:none; stroke:var(--rojo-dim); stroke-width:2; stroke-linecap:round }
.ilu .s{ fill:var(--rojo-dim) }                         
.ilu .t{ fill:var(--texto-3) }                          
.ilu .p{ fill:none; stroke:var(--rojo-dim); stroke-width:2; stroke-dasharray:4 5 }


.abanico{
  position:relative; display:flex; justify-content:center; align-items:center;
  min-height:clamp(300px, 34vw, 440px);
  
  --paso:clamp(84px, 10.5vw, 168px);
  --sube:clamp(8px, 1.4vw, 22px);
}

.ab-carta{
  position:absolute; display:block; text-decoration:none; color:inherit;
  width:clamp(140px, 14.5vw, 196px); aspect-ratio:390/844;
  border-radius:24px; overflow:hidden;
  border:2px solid #2A2A2A; background:#0B0B0B;
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  
  transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--rot)) scale(var(--sc));
  translate:0 0;
  transition:transform 540ms var(--e-salida), translate 540ms var(--e-salida),
             scale 400ms var(--e-salida), box-shadow 400ms var(--e-ui),
             border-color var(--t-corta) var(--e-ui);
}

.ab-carta:nth-child(1){ --rot:-11deg; --x:calc(var(--paso) * -1); --y:var(--sube); --sc:.88; z-index:1 }
.ab-carta:nth-child(2){ --rot:0deg;   --x:0;                      --y:0;           --sc:1;   z-index:3 }
.ab-carta:nth-child(3){ --rot:11deg;  --x:var(--paso);            --y:var(--sube); --sc:.88; z-index:2 }


.ab-carta::before{
  content:''; position:absolute; z-index:3; top:0; left:50%; translate:-50% 0;
  width:34%; height:15px; background:#0B0B0B; border-radius:0 0 11px 11px;
}
.ab-carta img{ width:100%; height:auto; display:block; aspect-ratio:390/844; object-fit:cover }


.ab-pie{
  position:absolute; z-index:2; inset:auto 0 0 0; padding:34px 14px 14px;
  background:linear-gradient(transparent, rgba(0,0,0,.88) 58%);
  opacity:0; transition:opacity var(--t-corta) var(--e-ui);
}
.ab-pie strong{ display:block; font-size:13px; font-weight:700; color:#fff }
.ab-pie span{ display:block; margin-top:2px; font-size:11px; color:rgba(255,255,255,.62) }

@media (hover:hover){
  .ab-carta:hover{
    translate:0 -26px; scale:1.06; z-index:10;
    border-color:rgba(var(--rojo-rgb), .5); box-shadow:0 34px 70px rgba(0,0,0,.6);
  }
  .ab-carta:hover .ab-pie{ opacity:1 }
  
  .ab-carta:hover ~ .ab-carta{ translate:34px 0 }
  
  .abanico:has(.ab-carta:nth-child(2):hover) > :nth-child(1),
  .abanico:has(.ab-carta:nth-child(3):hover) > :nth-child(-n+2),
  .abanico:has(.ab-carta:nth-child(4):hover) > :nth-child(-n+3){ translate:-34px 0 }
}

@media (hover:none){ .ab-pie{ opacity:1 } }



.abanico-pista{ display:none }
@media (max-width:700px){
  .abanico-pista{
    display:flex; align-items:center; gap:8px;
    margin:0 0 var(--s-3); color:var(--texto-3);
    font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  }
  .abanico-pista::after{
    content:''; width:22px; height:1px; background:currentColor;
    animation:pista-desliza 1.9s var(--e-ui) infinite;
  }
}
@keyframes pista-desliza{
  0%,100%{ transform:translateX(0);   opacity:.45 }
  50%    { transform:translateX(7px); opacity:1   }
}

@media (prefers-reduced-motion: reduce){
  .abanico-pista::after{ animation:none }
}

@media (max-width:700px){
  .abanico{
    display:flex; justify-content:flex-start; align-items:flex-start;
    min-height:0; overflow-x:auto; gap:var(--s-4);
    padding-block:var(--s-3); scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .ab-carta{
    position:static; flex:0 0 auto; width:min(58vw, 260px);
    transform:none; translate:0 0; scroll-snap-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .ab-carta{ transition:none }
}


.obra-hechos{ list-style:none; margin-top:var(--s-6); display:grid; gap:11px }
.obra-hechos li{ display:flex; gap:10px; font-size:var(--fs-small); color:var(--texto-2); line-height:1.5 }
.obra-hechos li::before{
  content:''; flex:none; width:7px; height:7px; margin-top:7px; border-radius:50%;
  background:var(--rojo-dim);
}


.integra{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(112px, 1fr));
}
.integra li{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center;
  border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); padding:18px 10px 14px;
  font-size:12px; color:var(--texto-3); min-height:88px;
  transition:border-color var(--t-corta) var(--e-ui), color var(--t-corta) var(--e-ui),
             transform var(--t-corta) var(--e-ui);
}

.integra img{
  width:26px; height:26px; display:block;
  filter:brightness(0) invert(1); opacity:.45;
  transition:opacity var(--t-corta) var(--e-ui);
}
:root[data-tema="claro"] .integra img{ filter:brightness(0); opacity:.55 }
@media (hover:hover){
  .integra li:hover{ border-color:rgba(var(--rojo-rgb), .35); color:var(--texto); transform:translateY(-3px) }
  .integra li:hover img{ opacity:1 }
}

.integra li.solo-texto{ font-size:13px; color:var(--texto-2); padding-block:22px }


.faq{ display:grid; gap:2px; max-width:820px }
.faq details{
  border:1px solid var(--linea); border-radius:var(--r-1);
  background:var(--negro-elev); overflow:hidden;
}
.faq details[open]{ border-color:var(--linea-2) }
.faq summary{
  cursor:pointer; list-style:none; padding:18px var(--s-5);
  font-size:var(--fs-body); font-weight:600; color:var(--texto);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:''; flex:none; width:11px; height:11px;
  border-right:2px solid var(--rojo); border-bottom:2px solid var(--rojo);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--t-corta) var(--e-salida);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px) }
@media (hover:hover){ .faq summary:hover{ color:var(--rojo-tinta) } }
.faq .resp{ padding:0 var(--s-5) 20px; color:var(--texto-2); font-size:var(--fs-small); line-height:1.65 }
.faq .resp b{ color:var(--texto); font-weight:600 }


.versus{ display:grid; gap:var(--s-4); grid-template-columns:1fr }
@media (min-width:820px){ .versus{ grid-template-columns:1fr 1fr; gap:var(--s-5) } }
.vs-caja{
  border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); padding:var(--s-6);
}
.vs-caja.mio{
  border-color:rgba(var(--rojo-rgb), .4);
  background:linear-gradient(180deg, rgba(var(--rojo-rgb), .05), var(--negro-elev) 42%);
}
.vs-tit{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); font-weight:600 }
.vs-caja.mio .vs-tit{ color:var(--rojo-tinta) }
.vs-caja ul{ list-style:none; margin-top:var(--s-5); display:grid; gap:12px }
.vs-caja li{ display:flex; gap:10px; font-size:var(--fs-small); line-height:1.5; color:var(--texto-3) }
.vs-caja.mio li{ color:var(--texto-2) }
.vs-caja li::before{ content:'—'; flex:none; color:var(--texto-3) }
.vs-caja.mio li::before{ content:'✓'; color:var(--rojo-tinta); font-weight:700 }
.vs-caja b{ color:var(--texto); font-weight:600 }


.micro-prueba{
  margin-top:var(--s-5); display:flex; flex-wrap:wrap; gap:10px var(--s-5);
  font-size:var(--fs-small); color:var(--texto-3); align-items:center;
}
.micro-prueba b{ color:var(--texto-2); font-weight:600 }
.micro-prueba .viva{
  display:inline-flex; align-items:center; gap:8px; color:var(--texto-2);
}
.micro-prueba .viva::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--rojo);
  
  box-shadow:0 0 0 1px rgba(var(--rojo-rgb), .28);
}


.flujo-marco{
  border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); overflow:hidden;
}
.flujo-barra{
  display:flex; align-items:center; gap:var(--s-3);
  padding:13px var(--s-5); border-bottom:1px solid var(--linea);
}
.flujo-punto{
  width:7px; height:7px; border-radius:50%; background:var(--rojo);
  box-shadow:0 0 8px rgba(var(--rojo-rgb), .7);
  animation:latir 2s var(--e-ui) infinite;
}
@keyframes latir{ 0%,100%{ opacity:1 } 50%{ opacity:.18 } }
.flujo-barra .label{ color:var(--texto-2) }
.flujo-pista{
  margin-left:auto; color:var(--texto-3); font-size:11px;
  font-variant-numeric:tabular-nums;
}

.flujo-marco{ container-type:inline-size }
.flujo-desliza{ display:none }
@container (max-width: 1024px){
  .flujo-desliza{ display:inline }
}


.flujo-visor{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  
  overscroll-behavior-x:contain;
}
.flujo-svg{ display:block; width:980px; min-width:980px; height:auto }

.flujo-svg-v{ display:none }


.fl-linea{ fill:none; stroke:var(--rojo-dim); stroke-width:1.5; stroke-dasharray:3 5; opacity:.75 }
.fl-punto{ fill:var(--rojo-tinta) }


.fl-caja{ fill:var(--fl-caja); stroke:var(--linea-2); stroke-width:1 }
.fl-caja-agente{ fill:var(--fl-agente); stroke:var(--rojo-tinta); stroke-width:1.2 }
.fl-caja-sale{ fill:var(--fl-caja); stroke:var(--linea); stroke-width:1 }

.fl-et{ font-family:'Archivo',sans-serif; font-weight:600; font-size:9.5px;
        letter-spacing:.12em; fill:var(--rojo-dim) }
.fl-tit{ font-family:'Archivo',sans-serif; font-weight:700; font-size:12.5px; fill:var(--texto) }
.fl-sub{ font-family:'Archivo',sans-serif; font-weight:400; font-size:10.5px; fill:var(--texto-3) }
.fl-agente-et{ fill:var(--rojo-tinta) }


.fl-pensando circle{ fill:var(--rojo-tinta); animation:pensar 1.2s var(--e-ui) infinite }
.fl-pensando circle:nth-child(2){ animation-delay:.4s }
.fl-pensando circle:nth-child(3){ animation-delay:.8s }
@keyframes pensar{ 0%,100%{ opacity:.15 } 50%{ opacity:1 } }


.fl-ok{ fill:#5FD068 }
.fl-curso{ fill:#E0A62B; animation:pensar 1.9s var(--e-ui) infinite }
.fl-curso.b{ animation-duration:2.3s; animation-delay:.35s }


.flujo-log{
  border-top:1px solid var(--linea); padding:11px var(--s-5);
  display:flex; gap:9px; align-items:flex-start;
  height:46px; overflow:hidden;
}
.flujo-log .fl-cursor{ color:var(--rojo-tinta); font-weight:700; flex:none; line-height:1.5 }
.flujo-log ul{ list-style:none; position:relative; flex:1; height:100% }
.flujo-log li{
  position:absolute; inset:0; font-size:12px; line-height:1.5; color:var(--texto-2);
  
  opacity:0; animation:renglon 23.4s linear infinite backwards;
}
@keyframes renglon{
  0%     { opacity:0; transform:translateY(6px) }
  1.5%   { opacity:1; transform:none }
  9.6%   { opacity:1; transform:none }
  11.1%  { opacity:0; transform:translateY(-6px) }
  100%   { opacity:0; transform:translateY(-6px) }
}
.flujo-log li:nth-child(1){ animation-delay:0s }
.flujo-log li:nth-child(2){ animation-delay:2.6s }
.flujo-log li:nth-child(3){ animation-delay:5.2s }
.flujo-log li:nth-child(4){ animation-delay:7.8s }
.flujo-log li:nth-child(5){ animation-delay:10.4s }
.flujo-log li:nth-child(6){ animation-delay:13s }
.flujo-log li:nth-child(7){ animation-delay:15.6s }
.flujo-log li:nth-child(8){ animation-delay:18.2s }
.flujo-log li:nth-child(9){ animation-delay:20.8s }


.flujo-pie{
  border-top:1px solid var(--linea); padding:12px var(--s-5);
  display:flex; flex-wrap:wrap; gap:var(--s-6) var(--s-7);
}
.flujo-pie div{ min-width:0 }
.flujo-pie 
dt{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--texto-3);
  margin-bottom:3px;
}
.flujo-pie dd{
  font-size:15px; color:var(--texto-2); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.flujo-pie .der{ margin-left:auto; text-align:right }

.flujo-pie .der dd{ font-size:11px; font-weight:400; color:var(--rojo-tinta) }


@media (max-width:700px){
  
  .flujo-svg{ display:none }
  .flujo-svg-v{ display:block; width:100%; height:auto }
  
  .flujo-visor{ overflow:visible; padding:var(--s-4) var(--s-4) var(--s-3) }
  .flujo-desliza{ display:none }
  .flujo-log{ padding-inline:var(--s-4) }
}


:root[data-tema="claro"] .flujo-punto{
  background:var(--rojo-dim); box-shadow:0 0 8px rgba(var(--rojo-rgb), .45);
}
:root[data-tema="claro"] .fl-punto,
:root[data-tema="claro"] .fl-pensando circle,
:root[data-tema="claro"] .fl-agente-et{ fill:var(--rojo-dim) }
:root[data-tema="claro"] .fl-caja-agente{ stroke:var(--rojo-dim) }
:root[data-tema="claro"] .flujo-log .fl-cursor{ color:var(--rojo-dim) }

:root[data-tema="claro"] .fl-ok{ fill:#2E7D34 }
:root[data-tema="claro"] .fl-curso{ fill:#9A6B00 }
:root[data-tema="claro"] .fl-linea{ opacity:1 }


@media (prefers-reduced-motion:reduce){
  .flujo-punto, .fl-pensando circle, .fl-curso{ animation:none }
  .fl-pensando circle, .fl-curso{ opacity:1 }
  .flujo-desliza::after{ animation:none }
  .flujo-log{ height:auto }
  .flujo-log li{ position:static; animation:none; opacity:1; margin-bottom:4px }
  .flujo-log li:not(:first-child){ display:none }
}




.yo-retrato{
  border-radius:var(--r-2); overflow:hidden; position:relative;
  border:1px solid var(--linea-2); background:var(--negro-elev);
}
.yo-retrato img{ width:100%; height:auto; display:block; aspect-ratio:1122/1402; object-fit:cover }

.yo-retrato::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(transparent, rgba(10,10,10,.5));
  pointer-events:none;
}
:root[data-tema="claro"] .yo-retrato::after{ background:linear-gradient(transparent, rgba(0,0,0,.18)) }


:root[data-tema="claro"] :root[data-tema="claro"] @media (max-width:860px){
  
      
  :root[data-tema="claro"]   :root[data-tema="claro"] }


.wa-flota.con-cara{ background:none; overflow:visible }
.wa-flota.con-cara img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:2px solid var(--rojo);
}

.wa-flota.con-cara .burbuja{
  position:absolute; right:-3px; bottom:-3px;
  width:24px; height:24px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; border:2px solid var(--negro);
}
.wa-flota.con-cara .burbuja svg{ width:13px; height:13px }


.vitrina3{
  display:grid; gap:var(--s-5); grid-template-columns:1fr;
}


@media (min-width:760px){
  .vitrina3{ grid-template-columns:repeat(2,1fr); gap:var(--s-6); align-items:start }
}

.pieza{ display:block; text-decoration:none; color:inherit; position:relative }
.pieza-marco{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--linea-2); background:var(--fl-caja);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  transition:transform var(--t-media) var(--e-salida), box-shadow var(--t-media) var(--e-salida),
             border-color var(--t-corta) var(--e-ui);
}

.pieza-marco::before{
  content:attr(data-url);
  display:block; padding:9px 12px 9px 58px; position:relative;
  font-size:11px; color:var(--texto-3); background:var(--negro-elev);
  border-bottom:1px solid var(--linea);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.pieza-marco::after{
  content:''; position:absolute; top:15px; left:14px;
  width:7px; height:7px; border-radius:50%; background:var(--linea-2);
  box-shadow:13px 0 0 var(--linea-2), 26px 0 0 var(--linea-2);
}
@media (hover:hover){
  .pieza:hover .pieza-marco{
    transform:translateY(-7px);
    box-shadow:0 28px 62px rgba(0,0,0,.55);
    border-color:rgba(var(--rojo-rgb), .42);
  }
}
@media (prefers-reduced-motion:reduce){ .pieza-marco{ transition:none } }

.pieza-marco img{ width:100%; height:auto; display:block; aspect-ratio:1424/600; object-fit:cover; object-position:top center }


.pieza-vivo{ position:relative; aspect-ratio:1424/600; background:#050805; overflow:hidden }
.pieza-vivo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.pieza-vivo iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  
  opacity:0; transition:opacity .45s ease;
  
  pointer-events:none;
}
.pieza-vivo iframe.lista{ opacity:1 }
@media (prefers-reduced-motion: reduce){ .pieza-vivo iframe{ transition:none } }
.pieza-txt{ margin-top:var(--s-4) }
.pieza-et{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--rojo-tinta); font-weight:700 }
:root[data-tema="claro"] .pieza-et{ color:var(--rojo-tinta) }
.pieza-txt h3{ margin-top:6px; font-size:var(--fs-body); font-weight:700 }
.pieza-txt p{ margin-top:6px; color:var(--texto-3); font-size:var(--fs-small); line-height:1.5 }




.anim [data-entra]{ opacity:0; transform:translateY(16px);
                    transition:opacity 450ms var(--e-salida), transform 450ms var(--e-salida) }
.anim [data-entra].visible{ opacity:1; transform:none }

[data-entra="1"]{ transition-delay:45ms }
[data-entra="2"]{ transition-delay:90ms }
[data-entra="3"]{ transition-delay:135ms }
@media (prefers-reduced-motion:reduce){
  .anim [data-entra]{ opacity:1; transform:none; transition:none }
}


.flujo-gana{
  margin-top:var(--s-5); text-align:center;
  color:var(--texto-2); font-size:var(--fs-body); line-height:1.5;
}



.calc{
  border:1px solid var(--linea); border-radius:var(--r-2);
  background:var(--negro-elev); padding:var(--s-6);
  display:grid; gap:var(--s-6);
}
@media (min-width:860px){ .calc{ grid-template-columns:1fr 1fr; gap:var(--s-8); padding:var(--s-8) } }
.calc-campo{ display:block; margin-bottom:var(--s-6) }
.calc-campo:last-child{ margin-bottom:0 }
.calc-campo > span{ display:block; color:var(--texto-2); font-size:var(--fs-small); line-height:1.4 }
.calc-valor{
  display:block; margin-top:6px; font-family:'Archivo Black',sans-serif;
  color:var(--rojo-tinta); font-size:clamp(22px,2.4vw,30px); line-height:1;
  font-variant-numeric:tabular-nums;
}
.calc 
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; margin-top:var(--s-3);
  height:44px; background:transparent; cursor:pointer;
  
  background-image:linear-gradient(var(--linea-2), var(--linea-2));
  background-size:100% 4px; background-position:center; background-repeat:no-repeat;
  border-radius:2px;
}

input[type=range]::-webkit-slider-runnable-track{ height:4px; background:transparent }
input[type=range]::-moz-range-track{ height:4px; background:transparent }
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--rojo); border:2px solid var(--negro); cursor:grab;
  
  margin-top:-11px;
}
.calc input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:var(--rojo); border:2px solid var(--negro); cursor:grab;
}
.calc input[type=range]:focus-visible{ outline:2px solid var(--rojo); outline-offset:6px }

.calc-salida{ border-top:1px solid var(--linea); padding-top:var(--s-6); display:grid; gap:var(--s-5); align-content:start }
@media (min-width:860px){ .calc-salida{ border-top:0; border-left:1px solid var(--linea); padding:0 0 0 var(--s-8) } }
.calc-linea > span{ display:block; color:var(--texto-3); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; font-weight:700 }
.calc-linea > b{
  display:block; margin-top:6px; font-family:'Archivo Black',sans-serif;
  font-size:clamp(26px,3.2vw,40px); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.calc-paga{ color:var(--texto-2); font-size:var(--fs-body); line-height:1.5 }
.calc-paga b{ color:var(--texto) }
.calc-nota{ margin-top:var(--s-5); color:var(--texto-3); font-size:var(--fs-small); line-height:1.5 }




.testi{
  position:relative; max-width:70ch;
  border:1px solid var(--rojo-dim); border-radius:var(--r-2);
  background:var(--negro-elev); padding:var(--s-7) var(--s-6);
  margin:0;
}
@media (min-width:720px){ .testi{ padding:var(--s-8) var(--s-7) } }

.testi::before{
  content:'\201C'; position:absolute; top:-.14em; right:.06em; z-index:0;
  font-family:'Archivo Black',sans-serif; font-size:clamp(120px,16vw,190px);
  
  line-height:1; color:var(--rojo-dim); opacity:.22; pointer-events:none;
}
.testi > *{ position:relative; z-index:1 }
.testi blockquote{ margin:0 }
.testi p{
  color:var(--texto); font-size:var(--fs-lead); line-height:1.6; text-wrap:pretty;
}
.testi figcaption{
  margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--linea);
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
}
.testi figcaption b{ display:block; color:var(--texto); font-weight:700 }
.testi .rubro{ display:block; margin-top:2px; color:var(--texto-3); font-size:var(--fs-small) }
.testi .abrir{
  margin-left:auto; color:var(--rojo-tinta); font-size:var(--fs-small); font-weight:700;
  text-decoration:none; padding-block:11px;
}
@media (hover:hover){ .testi .abrir:hover{ text-decoration:underline } }

.testi-corto{
  max-width:62ch; border:1px solid var(--rojo-dim); border-radius:var(--r-2);
  background:var(--negro-elev); padding:var(--s-6); margin:0;
}
.testi-corto blockquote{ margin:0 }
.testi-corto p{ color:var(--texto); font-size:var(--fs-lead); line-height:1.55; text-wrap:pretty }
.testi-corto figcaption{
  margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--linea);
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
}
.testi-corto figcaption b{ display:block; color:var(--texto); font-weight:700 }
.testi-corto .rubro{ display:block; margin-top:2px; color:var(--texto-3); font-size:var(--fs-small) }
.testi-corto .abrir{
  margin-left:auto; color:var(--rojo-tinta); font-size:var(--fs-small); font-weight:700;
  text-decoration:none; padding-block:11px;
}
@media (hover:hover){ .testi-corto .abrir:hover{ text-decoration:underline } }
.testi-nota{ margin-top:var(--s-5); color:var(--texto-3); font-size:var(--fs-small); line-height:1.5; max-width:60ch }



.cur-anillo, .cur-punto{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; translate:-100px -100px;
  
  opacity:1; transition:opacity 200ms var(--e-ui);
}

.cur-punto{
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px; background:var(--rojo);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.55), 0 0 10px rgba(var(--rojo-rgb), .55);
}
.cur-anillo{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:2px solid rgba(var(--rojo-rgb), .9);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.35),
             0 0 14px rgba(var(--rojo-rgb), .22);
  
  transition:scale 260ms var(--e-salida),
             background-color 260ms var(--e-ui), border-color 200ms var(--e-ui),
             opacity 200ms var(--e-ui);
}
:root[data-tema="claro"] .cur-anillo{ border-color:rgba(var(--rojo-rgb), .6) }
:root[data-tema="claro"] .cur-punto{ background:var(--rojo-tinta) }


.cur-anillo.activo{ scale:1.59; background:rgba(var(--rojo-rgb), .10); border-color:rgba(var(--rojo-rgb), .8) }
.cur-anillo.abrir{ scale:1.94 }

.cur-anillo.activo.fino{ scale:.5; background:transparent;
  border-color:rgba(var(--rojo-rgb), .55); box-shadow:0 0 8px rgba(var(--rojo-rgb), .3) }
.cur-anillo.apretado{ scale:.76 }

.cur-fuera .cur-anillo, .cur-fuera .cur-punto{ opacity:0 }


.cursor-propio, .cursor-propio a, .cursor-propio button,
.cursor-propio [role="button"], .cursor-propio summary{ cursor:none }
.cursor-propio input, .cursor-propio textarea, .cursor-propio select,
.cursor-propio input[type="range"]{ cursor:auto }
.cursor-propio input[type="range"]{ cursor:grab }


@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce){
  .cur-anillo, .cur-punto{ display:none }
  .cursor-propio, .cursor-propio *{ cursor:auto }
}


.fondo-hex{ position:fixed; inset:0; z-index:0; pointer-events:none }
.fondo-hex canvas{ position:absolute; inset:0; width:100%; height:100% }




:root[data-tema="claro"] .fondo-hex{ display:none }



.sistema{
  border:0; border-radius:0; background:none;
  padding:var(--s-7) 0;
  display:grid; gap:var(--s-7); grid-template-columns:1fr;
}
.sistema-lado{ display:flex; flex-direction:column }
.sistema-cifras{
  display:grid; gap:var(--s-5) var(--s-6); grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:var(--s-6); padding-top:var(--s-6); border-top:1px solid var(--linea);
}
.sistema-lado .obra-pie{ margin-top:var(--s-7); padding-top:0 }
@media (min-width:980px){
  
  .sistema{ padding:var(--s-8) 0; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:var(--s-8); align-items:start }
}
@media (min-width:980px){ .sistema-cifras{ grid-template-columns:repeat(3,1fr) } }


.hero-dos{ display:grid; gap:var(--s-7); grid-template-columns:1fr; align-items:center }
.hero-globo{ display:none }
@media (min-width:960px){
  .hero-dos{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--s-8) }
  .hero-globo{ display:block; justify-self:end; width:100%; max-width:420px }
}
.hero-globo canvas{ display:block; width:100%; aspect-ratio:1 }




.puerta, .caso, .plan, .obra, .vid-obra .vid-marco, .testi, .testi-corto{
  border-color:var(--negro-linea);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);   
}


.plan{
  background:linear-gradient(165deg, var(--azul-hondo), var(--azul-hondo-2));
  border-color:var(--azul);
}

.plan.destacado{ border-color:var(--rojo) }


.btn-primario{
  background:linear-gradient(180deg, var(--rojo-hover), var(--rojo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -1px 0 rgba(0,0,0,.30),
             0 6px 22px rgba(var(--rojo-rgb), .22);
}
.btn-fantasma{
  border-color:var(--negro-linea);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}


.msg.ellos{ background:rgba(46,91,216,.16); border:1px solid var(--negro-linea) }
.msg.yo{
  background:linear-gradient(180deg, rgba(var(--rojo-rgb), .22), rgba(var(--rojo-rgb), .12));
  border:1px solid var(--negro-linea);
}


.label.eyebrow::after{ background:linear-gradient(90deg, var(--azul), transparent) }


html::before{ background-size:20px 20px }
:root{ --punto:rgba(125,162,255,.13) }
:root[data-tema="claro"]{ --punto:rgba(46,91,216,.16) }



.mas{
  color:var(--rojo-tinta); font-weight:700; text-decoration:underline; text-underline-offset:3px;
  display:inline-block; padding-block:11px;
}





.pegada{ padding-top:0 }

.cabecera-chica{ margin-bottom:clamp(20px, 2.4vw, 34px) }
.cabecera-chica h2{ font-size:clamp(1.5rem, 3.1vw, 2.15rem) }


.faq .resp-lista{
  margin:0; padding:0 var(--s-5) 20px calc(var(--s-5) + 18px);
  color:var(--texto-2); font-size:var(--fs-small); line-height:1.6;
  display:grid; gap:10px;
}
.faq .resp-lista li::marker{ color:var(--rojo-tinta) }


:root .tarjeta, :root .dolor, :root .caso, :root .plan, :root .ben,
:root .paso3, :root .faq details, :root .vs-caja, :root .calc, :root .testi,
:root .testi-corto, :root .siempre, :root .rubro, :root .soy-yo,
:root .puerta, :root .vid-pieza, :root .form-wa{
  
  --texto:#F2F4FA; --texto-2:#C6CBD9; --texto-3:#A8ADBC;
  --rojo-tinta:#FF5C52; --linea:rgba(255,255,255,.16); --linea-2:rgba(255,255,255,.26);
  --negro-elev:var(--negro-elev-tarjeta);
  color:var(--texto-2);
  
  background:
    
    linear-gradient(150deg,
      rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 8%, rgba(255,255,255,0) 15%),
    
    linear-gradient(180deg, var(--metal-alto) 0%, var(--negro-elev) 42%, var(--metal-bajo) 100%);
  border:2px solid var(--rojo);
  box-shadow:
    0 0 0 2px rgba(var(--rojo-rgb), .12),   
    inset 0 1px 0 rgba(255,255,255,.34),    
    inset 0 -1px 0 rgba(0,0,0,.60),         
    inset 1px 0 0 rgba(255,255,255,.08),    
    inset -1px 0 0 rgba(0,0,0,.35),         
    0 12px 30px rgba(0,0,0,.36);
}


@media (hover:hover) and (pointer:fine){
  :root .tarjeta:hover, :root .dolor:hover, :root .caso:hover, :root .ben:hover,
  :root .paso3:hover, :root .vs-caja:hover, :root .testi:hover,
  :root .testi-corto:hover, :root .siempre:hover, :root .rubro:hover,
  :root .soy-yo:hover, :root .puerta:hover, :root .vid-pieza:hover{
    border-color:var(--rojo);
    box-shadow:
      0 0 0 4px rgba(var(--rojo-rgb), .34),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(0,0,0,.50),
      0 14px 34px rgba(var(--rojo-rgb), .18),
      0 10px 26px rgba(0,0,0,.34);
  }
}


:root .rubro-ico{
  opacity:.34; stroke:var(--rojo-dim); stroke-width:1.5;
  width:132px; height:132px; top:-20px; right:-18px;
}
@media (hover:hover) and (pointer:fine){
  :root .rubro:hover .rubro-ico{ opacity:.62; rotate:-6deg; stroke:var(--rojo) }
}


:root .rubro li::before{ background:var(--rojo-dim); height:2px; width:9px }



:root[data-tema="claro"] .msg.yo{ background:var(--rojo-ghost); border-color:rgba(var(--rojo-rgb), .3) }


:root .tarjeta .btn-fantasma,
:root .dolor .btn-fantasma,
:root .caso .btn-fantasma,
:root .plan .btn-fantasma,
:root .ben .btn-fantasma,
:root .paso3 .btn-fantasma,
:root .faq details .btn-fantasma,
:root .vs-caja .btn-fantasma,
:root .calc .btn-fantasma,
:root .testi .btn-fantasma,
:root .testi-corto .btn-fantasma,
:root .siempre .btn-fantasma,
:root .rubro .btn-fantasma,
:root .soy-yo .btn-fantasma,
:root .puerta .btn-fantasma,
:root .vid-pieza .btn-fantasma,
:root .form-wa .btn-fantasma,
:root .sistema .btn-fantasma{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.30);
  color:var(--texto);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
@media (hover:hover) and (pointer:fine){
:root .tarjeta .btn-fantasma:hover,
:root .dolor .btn-fantasma:hover,
:root .caso .btn-fantasma:hover,
:root .plan .btn-fantasma:hover,
:root .ben .btn-fantasma:hover,
:root .paso3 .btn-fantasma:hover,
:root .faq details .btn-fantasma:hover,
:root .vs-caja .btn-fantasma:hover,
:root .calc .btn-fantasma:hover,
:root .testi .btn-fantasma:hover,
:root .testi-corto .btn-fantasma:hover,
:root .siempre .btn-fantasma:hover,
:root .rubro .btn-fantasma:hover,
:root .soy-yo .btn-fantasma:hover,
:root .puerta .btn-fantasma:hover,
:root .vid-pieza .btn-fantasma:hover,
:root .form-wa .btn-fantasma:hover,
:root .sistema .btn-fantasma:hover{
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.48);
  }
}


:root .testi .rubro,
:root .testi-corto .rubro{
  background:none; border:0; box-shadow:none; padding:0; border-radius:0;
}