:root {
  --fondo: #05080f;
  --fondo-2: #0a101c;
  --panel: rgba(255, 255, 255, .035);
  --linea: rgba(255, 255, 255, .09);
  --linea-2: rgba(255, 255, 255, .16);
  --texto: #fff;
  --suave: rgba(255, 255, 255, .64);
  --tenue: rgba(255, 255, 255, .5);
  --azul: #1877ff;
  --cielo: #6fd3f7;
  --rojo: #ff8f86;
  --fuente: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  --ancho: 70rem;
  --borde: clamp(1.25rem, 5vw, 2.5rem);
  --salida: cubic-bezier(.16, 1, .3, 1);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; color-scheme: dark; scrollbar-color: #1c2a44 var(--fondo); }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 1.0625rem/1.65 var(--fuente);
  -webkit-font-smoothing: antialiased; caret-color: var(--cielo); accent-color: var(--cielo);
  overflow-x: hidden;
}
::selection { background: var(--cielo); color: var(--fondo); }
:focus-visible { outline: 2px solid var(--cielo); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; text-underline-offset: .22em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
h1 span, h2 span { color: var(--cielo); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 1rem; top: -4rem; z-index: 20; background: #fff; color: #000; padding: .6rem 1rem; border-radius: 999px; }
.saltar:focus { top: 1rem; }

/* Aparición al hacer scroll: solo si hay JS, para no esconder contenido sin él */
.js [data-r] { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--salida) var(--d, 0s), transform .8s var(--salida) var(--d, 0s); }
.js [data-r].v { opacity: 1; transform: none; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--borde);
  background: rgba(5, 8, 15, .65); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--linea);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.nav.fuera { transform: translateY(-100%); }
.marca { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font: 700 1.55rem/1 "League Spartan", var(--fuente); letter-spacing: -.03em; }
.marca span { transform: translateY(.07em); }
.sol { width: 1.75rem; height: 1.75rem; flex: none; }
.nav nav { display: flex; gap: 2rem; font-size: .92rem; margin-right: auto; margin-left: 2.5rem; }
.nav nav a { text-decoration: none; color: var(--suave); transition: color .2s; }
.nav nav a:hover { color: #fff; }
.nav-der { display: flex; align-items: center; gap: .6rem; }
/* Acceso a los recursos, siempre visible: es a lo que llega quien viene de un video */
.pill-recursos {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem;
  font-size: .88rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; color: var(--cielo);
  background: rgba(111, 211, 247, .1); border: 1px solid rgba(111, 211, 247, .45); border-radius: 999px;
  transition: background .25s, border-color .25s, transform .3s var(--salida);
}
.pill-recursos:hover { background: rgba(111, 211, 247, .2); border-color: var(--cielo); transform: translateY(-2px); }
.pill-recursos i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--cielo); animation: latido 2s ease-in-out infinite; }
.corto { display: none; }
@media (max-width: 52rem) { .nav nav { display: none; } }
@media (max-width: 34rem) { .largo { display: none; } .corto { display: inline; } .nav { gap: .5rem; } .btn-nav, .pill-recursos { padding: .5rem .8rem; font-size: .82rem; } }

/* ---------- Botones ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 1rem/1.2 var(--fuente); letter-spacing: -.02em; text-decoration: none; text-align: center; color: #fff;
  transition: transform .3s cubic-bezier(.25, .46, .45, .94), box-shadow .3s, background .3s;
}
.btn .ico { transition: transform .3s var(--salida); }
.btn:hover .ico { transform: translateX(.25em); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
/* Botón principal: fondo oscuro, aro de luz y un brillo que lo recorre */
.btn-luz, .btn-nav {
  background: linear-gradient(#070c18, #070c18) padding-box, linear-gradient(120deg, var(--cielo), var(--azul) 55%, #0b3fa8) border-box;
  border: 1.5px solid transparent; overflow: hidden;
  box-shadow: 0 10px 40px -8px rgba(24, 119, 255, .65), 0 0 0 6px rgba(24, 119, 255, .08);
}
.btn-luz:hover, .btn-nav:hover { box-shadow: 0 14px 56px -6px rgba(24, 119, 255, .9), 0 0 0 8px rgba(111, 211, 247, .12); }
.btn-luz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%); animation: brillo 4.5s var(--salida) infinite 1.2s;
}
@keyframes brillo { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-nav { padding: .6rem 1.25rem; font-size: .88rem; box-shadow: 0 6px 24px -8px rgba(24, 119, 255, .7); }
.btn-blanco { background: #fff; color: #05080f; padding: .7rem 1.25rem; font-size: .92rem; }
.btn-blanco:hover { background: var(--cielo); }
.btn-borde { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--linea-2); padding: .8rem 1.4rem; font-size: .95rem; }
.btn-borde:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px var(--cielo); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.enlace { background: none; border: 0; padding: 0; color: var(--cielo); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh, 54rem); display: grid; place-items: center; padding: 8rem var(--borde) 6rem; text-align: center; isolation: isolate; overflow: hidden; }
.hero-luz {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 46% at 50% 56%, rgba(111, 211, 247, .34), transparent 70%),
    linear-gradient(180deg, var(--fondo) 0%, #0a2e7a 26%, #1466f0 55%, #0f4fc4 72%, var(--fondo) 100%);
  animation: respirar 9s ease-in-out infinite alternate;
}
.hero-luz::after { content: ""; position: absolute; inset: 0; background: var(--grano); mix-blend-mode: overlay; opacity: .55; }
@keyframes respirar { from { filter: brightness(.92) saturate(1); } to { filter: brightness(1.08) saturate(1.15); } }
.hero-in { max-width: 54rem; display: grid; justify-items: center; gap: 1.75rem; }
.pastilla {
  display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem;
  font-size: .85rem; color: rgba(255, 255, 255, .85);
  background: rgba(5, 8, 15, .35); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; backdrop-filter: blur(8px);
}
.pastilla i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--cielo); animation: latido 2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 211, 247, .7); } 50% { box-shadow: 0 0 0 .45rem rgba(111, 211, 247, 0); } }
.hero h1 span { display: block; color: #fff; opacity: .78; }
.hero-sub { max-width: 37rem; font-size: clamp(1.05rem, 2vw, 1.2rem); color: rgba(255, 255, 255, .82); }
.hero-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.hero-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.75rem; font-size: .88rem; color: rgba(255, 255, 255, .78); }
.hero-datos li { display: inline-flex; align-items: center; gap: .45rem; }

/* Recurso que llega desde un video */
.destacado { padding: 6rem var(--borde) 0; }
.destacado > div {
  max-width: var(--ancho); margin: 0 auto; padding: 1.5rem 1.75rem; display: grid; gap: 1rem;
  background: linear-gradient(120deg, rgba(24, 119, 255, .28), rgba(111, 211, 247, .1)); border: 1px solid rgba(111, 211, 247, .35); border-radius: 1.25rem;
}
.destacado h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: .3rem 0 .5rem; }
.destacado p { color: var(--suave); max-width: 44rem; }
.destacado + .hero { min-height: 0; padding-top: 5rem; }
@media (min-width: 48rem) { .destacado > div { grid-template-columns: 1fr auto; align-items: center; column-gap: 2.5rem; } }

/* ---------- Secciones ---------- */
.sec { max-width: calc(var(--ancho) + var(--borde) * 2); margin: 0 auto; padding: clamp(5rem, 11vw, 8.5rem) var(--borde) 0; }
.sec-cab { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.sec-cab.centro { margin-inline: auto; text-align: center; }
.sobre { margin-bottom: 1.1rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.sec-sub { margin-top: 1.25rem; color: var(--suave); font-size: 1.08rem; }
.sec-sub a { color: var(--cielo); }

/* Caminos */
.caminos { display: grid; gap: 1.25rem; max-width: 52rem; margin: 0 auto; }
@media (min-width: 46rem) { .caminos { grid-template-columns: 1fr 1fr; } }
.camino {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1.1rem; justify-items: start; align-content: start;
  padding: 2rem; min-height: 22rem;
  background: var(--panel); border: 1px solid var(--linea); border-radius: 1.4rem;
  transition: border-color .4s, transform .5s var(--salida);
}
/* El haz de luz diagonal que cruza cada tarjeta */
.camino::before {
  content: ""; position: absolute; z-index: -1; width: 45%; height: 190%; left: 6%; top: -45%;
  background: linear-gradient(180deg, var(--cielo), var(--azul)); filter: blur(46px); opacity: .5;
  transform: rotate(32deg); transition: opacity .5s, transform .9s var(--salida);
}
.camino-b::before { background: linear-gradient(180deg, var(--azul), #5a43ff); left: 12%; }
.camino:hover { border-color: var(--linea-2); transform: translateY(-4px); }
.camino:hover::before { opacity: .78; transform: rotate(32deg) translateX(22%); }
.camino-ico { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; font-size: 1.2rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: .85rem; backdrop-filter: blur(6px); }
.camino h3 { margin-top: 3.5rem; font-size: 1.9rem; }
.camino p { color: rgba(255, 255, 255, .8); font-size: 1rem; }
.camino .btn { margin-top: .5rem; }

/* Comparación */
.versus { display: grid; border: 1px solid var(--linea); border-radius: 1.25rem; overflow: hidden; background: var(--linea); gap: 1px; }
@media (min-width: 50rem) { .versus { grid-template-columns: 1fr 1fr; } }
.vs { display: flex; gap: 1.1rem; padding: 1.6rem 1.75rem; background: var(--fondo-2); transition: background .3s; }
.vs.si { background: #0c1730; }
.vs:hover { background: #111c36; }
.vs h3 { font-size: 1.08rem; letter-spacing: -.02em; }
.vs.no h3 { color: rgba(255, 255, 255, .72); }
.vs p { margin-top: .45rem; font-size: .96rem; color: var(--suave); }
.vs-ico { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: .6rem; }
.no .vs-ico { color: var(--rojo); background: rgba(255, 110, 100, .12); }
.si .vs-ico { color: var(--cielo); background: rgba(24, 119, 255, .25); }

/* Método */
.metodo { display: grid; gap: 3rem; }
.metodo-nav { display: none; }
@media (min-width: 58rem) {
  .metodo { grid-template-columns: 15rem 1fr; column-gap: 5rem; }
  .metodo-nav { display: grid; gap: 1.75rem; position: sticky; top: 7rem; align-self: start; }
}
.metodo-nav li { display: flex; align-items: center; gap: 1rem; color: var(--tenue); transition: color .4s; }
.metodo-nav b { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--linea-2); border-radius: 50%; font: 500 .8rem var(--mono); transition: background .4s, border-color .4s, color .4s, box-shadow .4s; }
.metodo-nav span { display: grid; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.metodo-nav strong { font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; text-transform: none; }
.metodo-nav .activo { color: #fff; }
.metodo-nav .activo b { background: var(--azul); border-color: var(--cielo); box-shadow: 0 0 28px -4px var(--azul); }
.metodo-pasos { display: grid; gap: clamp(3.5rem, 8vw, 6rem); justify-items: start; max-width: 40rem; }
.paso-m > b { font: 500 .85rem var(--mono); color: var(--cielo); }
.paso-m h3 { margin: .6rem 0 1rem; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 400; letter-spacing: -.04em; }
.paso-m p { color: var(--suave); }
.paso-m ul { margin-top: 1.5rem; display: grid; gap: .6rem; }
.paso-m li { position: relative; padding: .85rem 1.1rem .85rem 2.6rem; font-size: .96rem; background: var(--panel); border: 1px solid var(--linea); border-radius: .8rem; }
.paso-m li::before { content: ""; position: absolute; left: 1.1rem; top: 1.45rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--cielo); box-shadow: 0 0 10px var(--cielo); }

/* Tareas */
.tareas { display: grid; gap: 1.5rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 50rem) { .tareas { grid-template-columns: 17rem 1fr; gap: 2rem; } }
.tareas-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
@media (min-width: 50rem) { .tareas-tabs { display: grid; align-content: start; overflow: visible; } }
.tab {
  flex: none; padding: .8rem 1.15rem; text-align: left; cursor: pointer;
  background: none; border: 1px solid var(--linea); border-radius: .85rem; color: var(--suave);
  font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  transition: color .25s, background .25s, border-color .25s;
}
.tab:hover { color: #fff; border-color: var(--linea-2); }
.tab[aria-selected="true"] { color: #fff; background: rgba(24, 119, 255, .2); border-color: var(--azul); }
.tareas-panel {
  position: relative; overflow: hidden; isolation: isolate; min-height: 15rem;
  display: grid; align-content: end; gap: .9rem; padding: 2rem;
  background: var(--panel); border: 1px solid var(--linea); border-radius: 1.4rem;
}
.tareas-panel::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -22%; top: -55%; border-radius: 50%; background: var(--azul); filter: blur(70px); opacity: .5; }
.tareas-panel h3 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 400; letter-spacing: -.04em; }
.tareas-panel p { color: rgba(255, 255, 255, .8); max-width: 32rem; font-size: 1.08rem; }
.tareas-panel > * { animation: entrar .5s var(--salida) both; }

/* Biblioteca */
.filtros { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
.buscador input { width: 100%; max-width: 24rem; padding: .8rem 1.2rem; background: var(--panel); border: 1px solid var(--linea-2); border-radius: 999px; transition: border-color .2s; }
.buscador input::placeholder { color: var(--tenue); }
.buscador input:hover, .buscador input:focus { border-color: var(--cielo); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .45rem 1rem; cursor: pointer; background: none; border: 1px solid var(--linea-2); border-radius: 999px; font-size: .9rem; color: var(--suave); transition: border-color .2s, color .2s, background .2s; }
.chip:hover { border-color: var(--cielo); color: #fff; }
.chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: #05080f; }
.lista { display: grid; gap: 1.1rem; }
@media (min-width: 50rem) { .lista { grid-template-columns: 1fr 1fr; } }
.recurso {
  display: grid; gap: .9rem; align-content: start; padding: 1.75rem;
  background: var(--panel); border: 1px solid var(--linea); border-radius: 1.25rem; scroll-margin-top: 7rem;
  transition: border-color .3s, background .3s, transform .5s var(--salida);
}
.recurso:hover { border-color: rgba(111, 211, 247, .4); background: rgba(24, 119, 255, .07); transform: translateY(-3px); }
.mono { font: 500 .82rem/1.4 var(--mono); color: var(--cielo); }
.recurso h3 { margin-top: .4rem; font-size: 1.35rem; }
.recurso .desc { color: var(--suave); font-size: .98rem; }
.requiere { font-size: .9rem; color: var(--tenue); }
.requiere strong { font-weight: 500; color: rgba(255, 255, 255, .85); }
.temas { display: flex; flex-wrap: wrap; gap: .4rem; }
.temas li { padding: .15rem .65rem; font-size: .78rem; color: var(--suave); border: 1px solid var(--linea); border-radius: 999px; }
.recurso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .4rem; }
.vacio { color: var(--suave); }

/* Planes */
.planes { display: grid; gap: 1.1rem; }
@media (min-width: 56rem) { .planes { grid-template-columns: repeat(3, 1fr); } }
.plan { display: grid; gap: 1.25rem; align-content: start; padding: 2rem; background: var(--panel); border: 1px solid var(--linea); border-radius: 1.4rem; transition: border-color .3s, transform .5s var(--salida); }
.plan:hover { border-color: rgba(111, 211, 247, .45); transform: translateY(-4px); }
.plan ul, .recomendada ul { display: grid; gap: .65rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.plan li, .recomendada li, .cierre-lista li { display: flex; gap: .6rem; font-size: .96rem; color: rgba(255, 255, 255, .85); }
.plan li .ico, .recomendada li .ico, .cierre-lista .ico { color: var(--cielo); margin-top: .22em; }
.plan .para { margin-top: .6rem; color: var(--suave); font-size: .96rem; }
.plan .btn { margin-top: auto; justify-self: start; }

/* Preguntas */
.faq { max-width: 46rem; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 0; cursor: pointer; list-style: none; font-size: 1.2rem; font-weight: 500; letter-spacing: -.02em; transition: color .2s; }
.faq summary:hover { color: var(--cielo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--cielo); transition: transform .35s var(--salida); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.5rem; color: var(--suave); max-width: 40rem; }

/* Cierre */
.cierre { position: relative; isolation: isolate; text-align: center; display: grid; justify-items: center; padding-bottom: 1rem; }
.cierre::before { content: ""; position: absolute; z-index: -1; inset: 10% 5% -10%; background: radial-gradient(50% 55% at 50% 60%, rgba(24, 119, 255, .5), transparent 70%); }
.cierre > div { max-width: 40rem; display: grid; justify-items: center; }
.cierre .btn { margin-top: 2.25rem; }
.cierre-lista { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.75rem; }

/* Pie */
.pie { max-width: calc(var(--ancho) + var(--borde) * 2); margin: clamp(5rem, 11vw, 8rem) auto 0; padding: 3rem var(--borde) 2.5rem; border-top: 1px solid var(--linea); display: grid; gap: 2.5rem; font-size: .94rem; color: var(--suave); }
@media (min-width: 48rem) { .pie { grid-template-columns: 2fr 1fr 1fr; } }
.pie-marca p { margin-top: 1rem; max-width: 24rem; }
.pie .marca { color: #fff; }
.pie nav { display: grid; gap: .6rem; align-content: start; }
.pie h4 { margin-bottom: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.pie nav a { text-decoration: none; transition: color .2s; }
.pie nav a:hover { color: #fff; }
.pie-legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: .85rem; color: var(--tenue); }

/* ---------- Diagnóstico ---------- */
.diag { position: relative; max-width: 42rem; margin: 0 auto; padding: 7.5rem var(--borde) 5rem; }
.diag-luz { position: fixed; z-index: -1; inset: -30% -20% auto; height: 70vh; background: radial-gradient(50% 60% at 50% 0%, rgba(24, 119, 255, .5), transparent 70%); pointer-events: none; }
.avance { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; margin-bottom: clamp(2rem, 6vw, 3.25rem); }
.avance span { height: .3rem; border-radius: 999px; background: var(--linea-2); transition: background .5s var(--salida), box-shadow .5s; }
.avance span.hecho { background: var(--cielo); box-shadow: 0 0 12px rgba(111, 211, 247, .7); }
.paso h1 { font-size: clamp(2rem, 6vw, 3rem); }
.paso .ayuda { margin-top: .9rem; color: var(--suave); }
.paso { animation: entrar .5s var(--salida) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(.9rem); } }
.opciones { margin: 1.9rem 0 0; display: grid; gap: .6rem; border: 0; padding: 0; min-width: 0; }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; }
.opcion span { display: block; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--linea-2); border-radius: .95rem; font-weight: 500; transition: border-color .2s, background .2s, transform .3s var(--salida); }
.opcion:hover span { border-color: var(--cielo); transform: translateX(4px); }
.opcion input:focus-visible + span { outline: 2px solid var(--cielo); outline-offset: 3px; }
.opcion input:checked + span { background: rgba(24, 119, 255, .28); border-color: var(--cielo); }
.campo { margin-top: 1.5rem; display: grid; gap: .45rem; }
.campo span { font-weight: 500; }
.campo small { color: var(--tenue); font-size: .88rem; }
.campo input, .campo textarea { width: 100%; padding: .9rem 1.15rem; background: var(--panel); border: 1px solid var(--linea-2); border-radius: .95rem; }
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--cielo); outline: none; }
.error { margin-top: 1rem; color: var(--rojo); font-weight: 500; }
.pasos-nav { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.legal { margin-top: 1.5rem; font-size: .88rem; color: var(--tenue); }
.resultado .recomendada { margin-top: 2rem; padding: 1.9rem; display: grid; gap: 1.25rem; background: linear-gradient(140deg, rgba(24, 119, 255, .45), rgba(24, 119, 255, .12)); border: 1px solid rgba(111, 211, 247, .4); border-radius: 1.4rem; }
.resultado .recomendada .para { margin-top: .5rem; color: rgba(255, 255, 255, .8); }
.resultado h2 { font-size: 1.7rem; margin-top: 3rem; }
.ideas { margin-top: 1.1rem; display: grid; gap: .6rem; }
.ideas li { padding: 1rem 1.2rem; color: var(--suave); background: var(--panel); border: 1px solid var(--linea); border-radius: .9rem; }
.ideas strong { color: #fff; font-weight: 500; }
.resultado .acciones { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-r] { opacity: 1; transform: none; }
}

/* ---------- Escenas animadas del selector de tareas ---------- */
/* Cada pieza aparece en el segundo que indica --t. Sin animación, todo queda visible en su estado final. */
.esc {
  position: relative; min-height: 16rem; overflow: hidden; padding: 1.1rem 1.2rem;
  display: grid; align-content: start; gap: .6rem; font-size: .84rem; line-height: 1.45;
  background: rgba(5, 8, 15, .62); border: 1px solid var(--linea-2); border-radius: 1rem;
  box-shadow: 0 24px 50px -28px #000; backdrop-filter: blur(6px);
}
.esc p { color: rgba(255, 255, 255, .88); max-width: none; font-size: inherit; }
.esc [style*="--t"] { animation: surgir .6s var(--salida) var(--t) both; }
@keyframes surgir { from { opacity: 0; transform: translateY(.6rem); } }
.esc .tipeo { display: inline-block; white-space: nowrap; animation: escribir .9s steps(24) var(--t) both; }
@keyframes escribir { from { clip-path: inset(0 100% 0 0); } }
.esc-nota { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; font-size: .76rem; color: var(--cielo) !important; }

/* Correo */
.esc-barra { display: flex; align-items: center; gap: .35rem; padding-bottom: .55rem; border-bottom: 1px solid var(--linea); font-size: .74rem; color: var(--tenue) !important; }
.esc-barra i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--linea-2); }
.esc-barra span { margin-left: .5rem; }
.linea { display: flex; gap: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linea); }
.linea b { width: 3.4rem; font-weight: 400; color: var(--tenue); }
.esc-pie { position: relative; display: flex; align-items: center; gap: .8rem; margin-top: .3rem; }
.esc .esc-btn { padding: .4rem 1.1rem; border-radius: 999px; background: var(--azul); font-weight: 600; color: #fff; animation: clic .5s ease var(--t) both; }
@keyframes clic { 40% { transform: scale(.9); background: var(--cielo); color: var(--fondo); } }
.esc-ok { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--cielo); }
.esc .puntero { position: absolute; left: 2.6rem; top: .8rem; width: 1.25rem; height: 1.25rem; fill: #fff; stroke: var(--fondo); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); animation: llegar 1s var(--salida) var(--t) both; }
@keyframes llegar { from { opacity: 0; transform: translate(9rem, -6rem); } }

/* Conversación */
.glo { justify-self: start; max-width: 84% !important; padding: .5rem .85rem; background: rgba(255, 255, 255, .09); border-radius: .95rem .95rem .95rem .25rem; }
.glo.out { justify-self: end; background: var(--azul); color: #fff !important; border-radius: .95rem .95rem .25rem .95rem; }
.esc-chat .esc-nota { justify-self: end; }

/* Carga de datos */
.esc-datos { grid-template-columns: 5.4rem minmax(0, 1fr); align-content: center; align-items: center; gap: 1.1rem; }
.hoja { position: relative; overflow: hidden; height: 9rem; padding: .7rem .6rem; display: grid; gap: .4rem; align-content: start; background: #eef3fb; border-radius: .45rem; }
.hoja b { font-size: .56rem; letter-spacing: .08em; color: #05080f; }
.hoja i { height: .3rem; border-radius: 2px; background: #b9c5da; }
.hoja i:nth-of-type(even) { width: 68%; }
.escaner { position: absolute; inset: 0 0 auto; height: 2px; background: var(--azul); box-shadow: 0 0 14px 4px rgba(24, 119, 255, .8); animation: barrer 2.2s ease-in-out infinite alternate; }
@keyframes barrer { to { transform: translateY(8.9rem); } }
.tabla { display: grid; gap: .35rem; min-width: 0; font-variant-numeric: tabular-nums; }
.fila { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; gap: .6rem; padding: .42rem .65rem; background: var(--panel); border: 1px solid var(--linea); border-radius: .5rem; }
.fila span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fila.cab { padding-block: 0; background: none; border: 0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue) !important; }

/* Investigación */
.barra-b { display: flex; align-items: center; gap: .55rem; padding: .6rem .95rem; border: 1px solid var(--linea-2); border-radius: 999px; overflow: hidden; }
.barra-b .ico { color: var(--cielo); }
.fuentes { display: flex; flex-wrap: wrap; gap: .4rem; }
.fuentes span { padding: .2rem .7rem; font-size: .74rem; color: var(--cielo); border: 1px solid rgba(111, 211, 247, .45); border-radius: 999px; }
.resumen { display: grid; gap: .5rem; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--linea); border-radius: .75rem; }
.resumen b { font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.esc .resumen i { height: .42rem; border-radius: 999px; background: rgba(255, 255, 255, .24); transform-origin: left; animation: crecer .7s var(--salida) var(--t) both; }
.resumen i:nth-of-type(2) { width: 92%; } .resumen i:nth-of-type(3) { width: 97%; } .resumen i:nth-of-type(4) { width: 58%; }
@keyframes crecer { from { transform: scaleX(0); } }

/* Contenido */
.esc-cont { align-content: center; }
.idea { justify-self: center; padding: .6rem 1.1rem; text-align: center; font-weight: 500; color: #fff !important; background: var(--azul); border-radius: .75rem; }
.ramas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; }
.rama { position: relative; display: grid; gap: .38rem; padding: .7rem .65rem; background: var(--panel); border: 1px solid var(--linea-2); border-radius: .65rem; }
.rama::before { content: ""; position: absolute; left: 50%; top: -1.05rem; width: 1px; height: 1rem; background: var(--cielo); }
.rama b { font-size: .74rem; font-weight: 500; }
.rama i { height: .3rem; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.rama i:last-child { width: 60%; }
.esc-cont .esc-nota { justify-self: center; margin-top: .5rem; }

/* Tareas repetitivas */
.esc-flujo { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-content: center; align-items: start; gap: .5rem .3rem; text-align: center; }
.nodo { display: grid; justify-items: center; gap: .55rem; font-size: .76rem !important; }
.nodo span { display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.15rem; color: var(--cielo); background: rgba(24, 119, 255, .18); border: 1px solid rgba(111, 211, 247, .45); border-radius: .85rem; }
.cable { position: relative; width: clamp(1.25rem, 5vw, 3.5rem); height: 2px; margin-top: 1.5rem; background: var(--linea-2); }
.cable::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--cielo); box-shadow: 0 0 10px var(--cielo); animation: viajar 1.5s linear var(--t) infinite backwards; }
@keyframes viajar { 0% { left: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.esc-flujo .esc-nota { grid-column: 1 / -1; justify-self: center; margin-top: .8rem; }
/* En pantallas angostas la factura pasa arriba, para que la tabla tenga todo el ancho */
@media (max-width: 34rem) {
  .esc { padding: 1rem; font-size: .8rem; }
  .esc-datos { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .hoja { height: 4.2rem; grid-template-columns: 1fr 1fr; column-gap: .8rem; }
  .hoja b { grid-column: 1 / -1; }
  .escaner { animation-name: barrer-corto; }
}
@keyframes barrer-corto { to { transform: translateY(4.1rem); } }

/* ---------- Biblioteca arriba: invitación al diagnóstico y "ver todos" ---------- */
#recursos { padding-top: clamp(3rem, 7vw, 5rem); }
.recurso.promo { align-content: center; gap: 1.1rem; background: linear-gradient(140deg, rgba(24, 119, 255, .5), rgba(24, 119, 255, .12)); border-color: rgba(111, 211, 247, .45); }
.recurso.promo:hover { background: linear-gradient(140deg, rgba(24, 119, 255, .6), rgba(24, 119, 255, .18)); }
.recurso.promo h3 { margin: 0; font-size: 1.6rem; }
.recurso.promo .desc { color: rgba(255, 255, 255, .85); }
#mas { margin-top: 1.5rem; }

/* Llegada desde un video: el recurso y el diagnóstico, juntos */
.destacado > .dest { padding: 0; background: none; border: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 56rem) { .destacado > .dest { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.dest-rec, .dest-diag { display: grid; gap: .8rem; align-content: start; justify-items: start; padding: 1.75rem; border-radius: 1.25rem; }
.dest-rec { background: var(--panel); border: 1px solid var(--linea-2); }
.dest-diag { align-content: center; background: linear-gradient(140deg, rgba(24, 119, 255, .5), rgba(24, 119, 255, .12)); border: 1px solid rgba(111, 211, 247, .45); }
.dest-rec h2 { margin: 0; }
.dest-diag h3 { font-size: 1.5rem; }
.dest-diag p { color: rgba(255, 255, 255, .85); }
.dest .btn { margin-top: .4rem; }
/* Portada más baja: el comienzo de la biblioteca se ve sin scrollear */
.hero { min-height: 0; padding: 8.5rem var(--borde) 5.5rem; }
@media (max-width: 34rem) { .hero { padding: 6.5rem var(--borde) 4rem; } .hero-in { gap: 1.4rem; } }