:root{

  --abyss:#050506; --deep:#08080A; --night:#0E0E11; --veil:#141317;
  --card:#181619; --card-high:#231E22;
  --line:#332B2E; --line-soft:#241F22;

  --red-deep:#8E1710; --red:#D6291F; --red-bright:#FF3B2F;
  --coral:#FF6D5A; --blush:#FF9E92; --frost:#FFD9D3;
  --magenta:#FF2D74; --amber:#FFAE3B;

  --ink:#FFFFFF; --ink-soft:#A9A2A6; --ink-muted:#7A7076; --ink-faint:#554D52;

  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --display:clamp(2.125rem,5.4vw,3.9rem);
  --headline:clamp(1.75rem,4.4vw,3.25rem);
  --title:clamp(1.15rem,2.1vw,1.625rem);
  --lead:clamp(1rem,1.15vw,1.125rem);

  --gutter:clamp(1.25rem,4.4vw,3.5rem);
  --gap-seccion:clamp(5.25rem,9vw,10.5rem);
  --shell:1240px;

  --r-pill:999px; --r-card:18px; --r-card-lg:20px; --r-tile:12px;
  --ease-out:cubic-bezier(.215,.61,.355,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--abyss);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:transparent;color:var(--ink-soft);
  font:400 1rem/1.62 var(--sans);-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0;max-width:64ch}
h1,h2,h3{margin:0;font-family:var(--sans);color:var(--ink)}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:104px}

.suelo{position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,var(--night) 0%,var(--deep) 32%,var(--abyss) 68%,var(--deep) 100%)}
#destellos{position:fixed;top:0;left:0;right:0;height:105vh;z-index:-1;
  pointer-events:none;width:100%}

.shell{width:min(100% - (2 * var(--gutter)),var(--shell));margin-inline:auto}

.display{font-size:var(--display);font-weight:400;line-height:1.06;
  letter-spacing:-.038em;text-wrap:balance}
.headline{font-size:var(--headline);font-weight:400;line-height:1.08;
  letter-spacing:-.032em;text-wrap:balance}
.apagado{color:var(--ink-muted)}
.encendido{color:var(--red-bright)}
.lead{font-size:var(--lead);line-height:1.6;color:var(--ink-soft)}
.title{font-size:var(--title);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}

.pill{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;
  border-radius:var(--r-pill);background:rgba(24,22,25,.55);
  border:1px solid rgba(51,43,46,.75);
  font-size:.8125rem;font-weight:500;line-height:1;color:var(--blush)}
.pill i{font-family:var(--mono);font-style:normal;color:var(--coral)}
.chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:var(--r-pill);
  background:rgba(20,19,23,.7);border:1px solid var(--line-soft);
  font-size:.78125rem;font-weight:500;line-height:1;color:var(--ink-soft)}
.chip.acento{background:rgba(214,41,31,.22);border-color:rgba(255,59,47,.55);color:var(--frost)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  font:600 .9375rem/1 var(--sans);letter-spacing:-.006em;color:var(--ink);
  background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-bright));
  box-shadow:0 6px 22px rgba(255,59,47,.34);
  transition:box-shadow 220ms var(--ease-out),transform 220ms var(--ease-out)}
.btn-ghost{background:rgba(24,22,25,.45);border:1px solid var(--line);box-shadow:none;
  transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{box-shadow:0 6px 34px 1px rgba(255,59,47,.62);transform:translateY(-1px)}
  .btn-ghost:hover{background:var(--card);border-color:var(--red-bright);
    box-shadow:none;transform:none}
}

.cabecera{position:fixed;top:0;left:0;right:0;z-index:60;padding:16px var(--gutter) 0}
.capsula{width:min(100%,var(--shell));margin-inline:auto;
  display:flex;align-items:center;gap:18px;padding:12px 18px;
  border-radius:var(--r-pill);background:rgba(14,14,17,.82);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(51,43,46,.6);box-shadow:0 10px 30px rgba(5,5,6,.6)}
.marca{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.marca .tile{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--red-bright),var(--red-deep));
  box-shadow:0 0 18px rgba(255,59,47,.45);overflow:hidden}
.marca .tile img{width:22px;height:22px}
.marca b{display:block;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.15}
.marca span{display:block;font-size:.6875rem;color:var(--ink-muted);line-height:1.15}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto;
  font-size:.9375rem;font-weight:500;color:var(--frost)}
.nav a{padding:4px 0;transition:color 160ms var(--ease-out)}
.nav a[aria-current="true"]{color:var(--red-bright)}
@media (hover:hover){.nav a:hover{color:var(--ink)}}
.nav .btn{padding:11px 22px;font-size:.875rem}
.hamburguesa{display:none;margin-left:auto;width:38px;height:38px;border-radius:11px;
  background:rgba(24,22,25,.6);border:1px solid var(--line);cursor:pointer;
  color:var(--frost);align-items:center;justify-content:center}

.hero{padding:calc(132px + 16px) 0 calc(var(--gap-seccion) * .6)}
.hero .shell{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:48px;align-items:center}
.hero h1{margin:28px 0 0}
.hero .lead{margin-top:26px;max-width:460px}
.hero .lead b{color:var(--ink);font-weight:600}
.hero .acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.arte{position:relative;aspect-ratio:1;width:100%}
.arte canvas{width:100%;height:100%}

.reveal{opacity:0;transform:translateY(26px);
  transition:opacity 620ms var(--ease-out),transform 720ms var(--ease-out)}
.reveal.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

.intro{text-align:center;display:grid;justify-items:center;gap:18px}
.intro .lead{max-width:720px}

.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.tarjeta{position:relative;padding:26px;border-radius:var(--r-card);
  background:linear-gradient(135deg,var(--card),var(--veil));
  border:1px solid var(--line);
  transition:border-color 220ms var(--ease-out),box-shadow 220ms var(--ease-out),
             background 220ms var(--ease-out),transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .tarjeta:hover{background:linear-gradient(135deg,var(--card-high),var(--card));
    border-color:var(--red-bright);box-shadow:0 18px 40px -18px rgba(255,59,47,.55);
    transform:translateY(-3px)}
}
.tarjeta .icono{width:44px;height:44px;border-radius:var(--r-tile);display:grid;
  place-items:center;background:linear-gradient(135deg,var(--red),var(--red-deep));
  box-shadow:0 0 18px rgba(255,59,47,.4);color:var(--frost);margin-bottom:18px}
.tarjeta .icono svg{width:22px;height:22px}
.tarjeta h3{font-size:1.1875rem;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.tarjeta p{margin-top:10px;font-size:.9375rem;color:var(--ink-soft)}

.muestra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center;margin-top:var(--gap-seccion)}
.muestra:nth-child(even) .texto{order:2}
.muestra .texto p{margin-top:20px}
.muestra .etiquetas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.marco{position:relative;border-radius:var(--r-card-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--card)}
.marco img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.marco.vertical{aspect-ratio:9/16;max-height:620px;margin-inline:auto;max-width:360px}
.marco.vertical video{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(5,5,6,.32);color:var(--ink)}
.play b{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--red-bright),var(--red-deep));
  box-shadow:0 0 34px rgba(255,59,47,.55);padding-left:5px;font-size:22px}
.marco[data-reproduciendo] .play{display:none}

.metodo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;
  align-items:start}
.pasos{display:grid;gap:2px;border-radius:var(--r-card-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--line-soft)}
.paso{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px 26px;
  background:linear-gradient(135deg,var(--card),var(--veil));align-items:start;
  transition:background 220ms var(--ease-out)}
@media (hover:hover){.paso:hover{background:linear-gradient(135deg,var(--card-high),var(--card))}}
.paso .n{font-family:var(--mono);font-size:.8125rem;color:var(--coral);
  padding-top:4px;min-width:2.2em}
.paso h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.paso p{margin-top:6px;font-size:.9375rem;color:var(--ink-soft)}

.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;
  align-items:start}
.plan{padding:28px;border-radius:var(--r-card-lg);
  background:linear-gradient(135deg,var(--card),var(--veil));
  border:1px solid var(--line);display:grid;gap:18px}
.plan.destacado{background:linear-gradient(135deg,var(--card-high),var(--card));
  border-color:var(--red-bright);border-width:1.3px;
  box-shadow:0 24px 60px -30px rgba(255,59,47,.6)}
.plan .cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan .cabeza h3{font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:11px;font-size:.9375rem}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:11px;color:var(--ink-soft)}
.plan li svg{width:16px;height:16px;margin-top:.36em;color:var(--red-bright)}
.plan .cupos{font-family:var(--mono);font-size:.75rem;color:var(--amber)}
.plan .btn{width:100%}
.comun{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  padding-top:20px;border-top:1px solid var(--line-soft);font-size:.875rem;color:var(--ink-muted)}
.comun b{color:var(--blush);font-weight:500}

.contacto .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:56px;align-items:start}
.datos{display:grid;gap:14px;margin-top:32px;font-size:1rem}
.datos a{color:var(--coral)}
.datos .redes{display:flex;gap:20px;font-size:.9375rem}
.formulario{padding:30px;border-radius:var(--r-card-lg);
  background:linear-gradient(135deg,var(--card),var(--veil));border:1px solid var(--line)}
.campo{display:grid;gap:7px;margin-bottom:16px}
.campo label{font-size:.875rem;font-weight:500;color:var(--frost)}
.campo input,.campo textarea,.campo select{width:100%;min-height:50px;padding:13px 15px;
  font:400 17px/1.4 var(--sans);color:var(--ink);background:var(--abyss);
  border:1px solid var(--line);border-radius:12px;
  transition:border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.campo textarea{min-height:132px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;
  border-color:var(--red-bright);box-shadow:0 0 0 3px rgba(255,59,47,.18)}
.mas summary{cursor:pointer;color:var(--coral);font-size:.9375rem;margin-bottom:16px;
  list-style:none}
.mas summary::-webkit-details-marker{display:none}
.estado{min-height:22px;margin-top:12px;font-size:.9375rem;color:var(--ink-muted)}
.estado[data-estado="ok"]{color:var(--coral)}
.estado[data-estado="error"]{color:var(--red-bright)}

.pie{margin-top:var(--gap-seccion);padding:56px 0 40px;
  border-top:1px solid var(--line-soft);background:var(--abyss)}
.pie .shell{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));
  gap:40px;align-items:start}
.pie h4{margin:0 0 14px;font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted)}
.pie ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:.9375rem}
.pie li a{color:var(--ink-soft);transition:color 160ms var(--ease-out)}
@media (hover:hover){.pie li a:hover{color:var(--red-bright)}}
.pie .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;
  justify-content:space-between;padding-top:28px;margin-top:12px;
  border-top:1px solid var(--line-soft);font-size:.875rem;color:var(--ink-muted)}
.pie .legal a{color:var(--ink-muted);border-bottom:1px solid var(--line)}
@media (hover:hover){.pie .legal a:hover{color:var(--coral);border-color:var(--coral)}}

@media (max-width:1023px){
  .rejilla,.planes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .shell,.muestra,.metodo,.contacto .shell{grid-template-columns:1fr;gap:48px}
  .muestra:nth-child(even) .texto{order:0}
  .arte{max-width:420px;margin-inline:auto}
  .hero{padding-top:calc(108px + 16px)}
}
@media (max-width:719px){
  .rejilla,.planes{grid-template-columns:1fr}
  .pie .shell{grid-template-columns:1fr;gap:32px}
  .nav{display:none}
  .capsula.abierta{border-radius:26px;flex-wrap:wrap}
  .capsula.abierta .nav{display:grid;gap:4px;width:100%;margin:8px 0 0;
    padding-top:14px;border-top:1px solid var(--line-soft);font-size:1rem}
  .capsula.abierta .nav a{padding:10px 0}
  .capsula.abierta .nav .btn{margin-top:8px}
  .hamburguesa{display:flex}
}
.d60{transition-delay:60ms}
.d80{transition-delay:80ms}
.d120{transition-delay:120ms}
.d140{transition-delay:140ms}
.d200{transition-delay:200ms}
.d220{transition-delay:220ms}
.pt-sec{padding-top:var(--gap-seccion)}
.mt0{margin-top:0}
.mt16{margin-top:16px}
.mt20{margin-top:20px}
.mt22{margin-top:22px}
.mt28{margin-top:28px}
.w100{width:100%}
.pie-lema{margin-top:16px;font-size:.9375rem;max-width:34ch}