@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(/fuentes/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(/fuentes/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fuentes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fuentes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --tinta:#0f172a;
  --texto:#334155;
  --suave:#475569;
  --marca:#6c5ce7;
  --marca-fuerte:#4334c4;
  --marca-honda:#2e2390;
  --lila:#efedfd;
  --lila-claro:#f8f7ff;
  --borde:#dcd7fb;
  --linea:#e2e8f0;
  --fondo:#ffffff;
  --gris:#f1f5f9;
  --titular:'Bricolage Grotesque',system-ui,sans-serif;
  --cuerpo:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ancho:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--cuerpo);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--tinta);font-family:var(--titular);font-weight:800;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(42px,7vw,76px)}
h2{font-size:clamp(30px,4.4vw,46px)}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--marca-fuerte)}
:focus-visible{outline:3px solid var(--marca);outline-offset:3px;border-radius:4px}

.saltar{position:absolute;left:16px;top:-64px;z-index:30;padding:10px 16px;border-radius:10px;background:var(--tinta);color:#fff}
.saltar:focus{top:12px}
.caja{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.bloque{padding:clamp(64px,9vw,112px) 0}
.bloque.lila{background:linear-gradient(180deg,var(--lila-claro),#fff)}
.cabeza{display:flex;flex-direction:column;gap:14px;max-width:720px;margin-bottom:44px}
.cabeza p{font-size:18px;color:var(--suave)}
.antetitulo{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--marca-fuerte)}
.antetitulo-blanco{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}

.tdw{display:inline-flex;align-items:baseline;gap:.22em;font-family:var(--titular);font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff;text-shadow:0 .02em .25em rgba(30,20,90,.25);white-space:nowrap}
.tdw .c{font-weight:500}
.tdw.l{color:var(--tinta);text-shadow:none}
.tdw.l .p{color:var(--marca)}
.tdw.gigante{font-size:clamp(34px,6.6vw,64px);letter-spacing:-.03em}
.tdg{position:relative;flex:none;display:block;width:.8em;height:.8em}
.tdg i{position:absolute;display:block;width:37.65%;height:37.65%;border-radius:25%;background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.14));box-shadow:inset 0 0 0 max(1px,.018em) rgba(255,255,255,.82),inset 0 .04em .06em rgba(255,255,255,.5),0 .03em .1em rgba(25,15,90,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}
.tdg i:nth-child(1){left:0;top:10.59%}
.tdg i:nth-child(2){left:0;top:62.35%}
.tdg i:nth-child(3){left:51.76%;top:62.35%}
.tdg s{position:absolute;display:block;left:50%;top:50%;width:0;height:0;text-decoration:none}
.tdg b{position:absolute;display:block;left:.08em;top:-.4em;width:.32em;height:.32em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#fff 55%,#ebe8ff 100%);box-shadow:0 0 .14em rgba(255,255,255,.75),0 .03em .08em rgba(25,15,90,.2)}
.tdg.l i{background:linear-gradient(140deg,rgba(108,92,231,.72),rgba(108,92,231,.26));box-shadow:inset 0 0 0 max(1px,.018em) rgba(108,92,231,.55),inset 0 .04em .06em rgba(255,255,255,.6),0 .03em .1em rgba(25,15,90,.12)}
.tdg.l b{background:radial-gradient(circle at 35% 30%,#9d92ff 0,#6c5ce7 60%,#5443d6 100%);box-shadow:0 0 .14em rgba(108,92,231,.45)}
.tdg.m s{animation:tdGiro 5s infinite}
.tdg.m b{animation:tdSale 5s infinite}
.tdg.m b::after{content:"";position:absolute;inset:0;border-radius:50%;animation:tdOnda 5s infinite}
@keyframes tdGiro{0%{transform:rotate(-1080deg);animation-timing-function:cubic-bezier(.22,.61,.2,1)}38%,100%{transform:rotate(0deg)}}
@keyframes tdSale{0%{transform:translate(-.24em,.24em) scale(.15);opacity:0;animation-timing-function:cubic-bezier(.22,.61,.2,1)}5%{opacity:1}38%,90%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes tdOnda{0%,37%{box-shadow:0 0 0 0 rgba(255,255,255,0)}39%{box-shadow:0 0 0 0 rgba(255,255,255,.85)}58%,100%{box-shadow:0 0 0 .2em rgba(255,255,255,0)}}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.boton:hover{transform:translateY(-1px)}
.boton.blanco{background:#fff;color:var(--marca-fuerte);box-shadow:0 8px 24px rgba(25,15,90,.25)}
.boton.vidrio{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.boton.vidrio:hover{background:rgba(255,255,255,.22)}
.boton.marca{background:var(--marca-fuerte);color:#fff}
.boton.marca:hover{background:var(--marca-honda)}
.boton.linea{color:var(--marca-fuerte);box-shadow:inset 0 0 0 1px var(--borde);background:#fff}

.barra{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linea)}
.barra .caja{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.marca-enlace{text-decoration:none;font-size:22px;display:inline-flex}
.menu-ancho{display:flex;align-items:center;gap:6px}
.menu-ancho a{padding:9px 13px;border-radius:10px;color:var(--texto);font-size:15px;font-weight:500;text-decoration:none}
.menu-ancho a:hover,.menu-ancho a[aria-current=page]{background:var(--lila);color:var(--marca-fuerte)}
.menu-ancho a.boton{margin-left:8px;padding:0 20px;min-height:42px;border-radius:999px;color:#fff;font-weight:600}
.menu-ancho a.boton:hover{background:var(--marca-honda);color:#fff}
.menu-movil{display:none;position:relative}
.menu-movil summary{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--borde);color:var(--marca-fuerte);font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil ul{position:absolute;right:0;top:54px;width:min(250px,calc(100vw - 48px));padding:8px;border-radius:16px;background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.18),inset 0 0 0 1px var(--linea)}
.menu-movil a{display:block;padding:12px 14px;border-radius:10px;color:var(--tinta);font-weight:500;text-decoration:none}
.menu-movil a:hover{background:var(--lila)}

.fondo-marca{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 82% 8%,rgba(143,132,255,.35) 0,rgba(143,132,255,0) 55%),linear-gradient(135deg,#5b4ae0 0%,#4334c4 55%,#2e2390 100%)}
.fondo-marca h1,.fondo-marca h2{color:#fff}
.portada .caja{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(60px,8vw,104px)}
.portada-texto{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.portada-texto>p{max-width:560px;font-size:20px;line-height:1.55;color:rgba(255,255,255,.94)}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.panel-vidrio{padding:24px;border-radius:24px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 24px 60px rgba(25,15,90,.3);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.panel-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-cabeza strong{font-family:var(--titular);font-size:24px;letter-spacing:-.02em}
.panel-cabeza span{font-size:13px;color:rgba(255,255,255,.88)}
.panel-vidrio li{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:13px;background:rgba(255,255,255,.14);font-size:15px}
.panel-vidrio li+li{margin-top:8px}
.panel-vidrio li.nueva{background:#fff;color:var(--marca-fuerte);font-weight:600}
.pagina-cabeza .caja{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding-top:clamp(52px,7vw,84px);padding-bottom:clamp(52px,7vw,84px)}
.pagina-cabeza p{max-width:640px;font-size:19px;color:rgba(255,255,255,.94)}

.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tarjeta{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:20px;background:linear-gradient(150deg,var(--lila),var(--lila-claro));box-shadow:inset 0 0 0 1px var(--borde)}
.tarjeta.enlace{color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.tarjeta.enlace:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--marca),0 16px 36px rgba(67,52,196,.14)}
.tarjeta .num{font-family:var(--titular);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em;color:var(--marca)}
.tarjeta .mas{margin-top:auto;padding-top:6px;color:var(--marca-fuerte);font-weight:600}

.lista{display:flex;flex-direction:column;gap:12px}
.lista li{position:relative;padding-left:30px}
.lista li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:5px;background:linear-gradient(140deg,var(--marca),#9d92ff)}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.plan{display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea),0 12px 32px rgba(15,23,42,.06)}
.plan.destacado{box-shadow:inset 0 0 0 2px var(--marca),0 16px 40px rgba(67,52,196,.14)}
.precio{font-family:var(--titular);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.04em;color:var(--tinta)}
.precio-nota{font-size:14px;color:var(--suave)}
.plan .boton{margin-top:auto;align-self:flex-start}

.pasos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pasos li{display:flex;flex-direction:column;gap:10px}
.pasos span{font-family:var(--titular);font-weight:800;font-size:40px;line-height:1;color:var(--marca)}

.dudas{display:flex;flex-direction:column;gap:10px;max-width:800px}
.dudas details{border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea)}
.dudas summary{padding:17px 20px;color:var(--tinta);font-weight:600;cursor:pointer}
.dudas details p{padding:0 20px 18px}

.aviso{padding:18px 20px;border-radius:14px;background:var(--lila);color:var(--tinta);font-size:15px}
.mt{margin-top:28px}

.contacto .caja{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:clamp(64px,8vw,96px);padding-bottom:clamp(64px,8vw,96px)}
.contacto p{max-width:600px;font-size:19px;color:rgba(255,255,255,.94)}

.legal{max-width:760px}
.legal h2{margin-top:36px;margin-bottom:10px;font-size:25px;letter-spacing:-.02em}
.legal p+p,.legal ul{margin-top:10px}
.legal ul{padding-left:20px;list-style:disc}
.legal li{margin-top:6px}
.fecha{color:var(--suave);font-size:15px}

.pie{background:#0b1020;color:#cbd5e1;font-size:15px}
.pie .caja{display:flex;flex-wrap:wrap;gap:28px 48px;justify-content:space-between;padding-top:48px;padding-bottom:36px}
.pie a{color:#e2e8f0;text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie-marca{display:flex;flex-direction:column;gap:14px;max-width:320px}
.pie-marca>a{font-size:22px;display:inline-flex}
.pie h2{margin-bottom:10px;color:#fff;font-family:var(--cuerpo);font-size:14px;font-weight:600;letter-spacing:0}
.pie li{padding:3px 0}
.pie-final{width:100%;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:#94a3b8}

.fallo{min-height:60vh;display:flex;align-items:center}

@media (max-width:920px){
  .portada .caja{grid-template-columns:1fr;gap:40px}
  .tres,.pasos{grid-template-columns:1fr}
}
@media (max-width:760px){
  .menu-ancho{display:none}
  .menu-movil{display:block}
  .dos{grid-template-columns:1fr}
  .barra .caja{min-height:64px}
  .marca-enlace{font-size:20px}
  .caja{padding-left:16px;padding-right:16px}
  .plan,.tarjeta{padding:24px}
  .boton{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tdg.m s,.tdg.m b,.tdg.m b::after{animation:none}
  .boton,.tarjeta.enlace{transition:none}
  .boton:hover,.tarjeta.enlace:hover{transform:none}
}
@media print{
  .barra,.contacto{display:none}
  .fondo-marca{background:none;color:var(--tinta)}
  .fondo-marca h1,.fondo-marca p{color:var(--tinta)}
}
