/* E-SPACE · sitio web. Paleta de la marca: grafito, azul de acento y texto claro. Sin fuentes ni librerías externas. */
:root {
  --fondo: #15171b; --grafito: #1b1d22; --panel: #22252c; --panel2: #2a2d35; --linea: rgba(255,255,255,.10);
  --texto: #eef1f4; --suave: #a6acb5; --acento: #3fa2ff; --boton: #1f6fd6; --boton-hover: #2e82e8;
  --ok: #3ccf8e; --ambar: #f5b335; --rojo: #f2665c; --violeta: #bf8cff;
  --radio: 18px; --ancho: 1120px;
  --fuente: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 17px/1.65 var(--fuente); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.6em; } h3 { font-size: 1.25rem; margin-top: 1.4em; } h4 { font-size: 1.05rem; color: var(--acento); margin-top: 1.2em; }
p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.3em; } li { margin: .25em 0; }
code, kbd { font-family: "Cascadia Mono", Consolas, monospace; font-size: .9em; background: var(--panel2); border: 1px solid var(--linea); border-radius: 6px; padding: .1em .4em; }
kbd { border-bottom-width: 2px; }
.contenedor { width: min(var(--ancho), 100% - 32px); margin: 0 auto; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--boton); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; } .saltar:focus { left: 8px; }

/* cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(21,23,27,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { min-height: 64px; }
.marca { display: flex; align-items: center; } .marca img { height: 34px; display: block; }
/* héroe */
.heroe { position: relative; overflow: hidden; padding: 84px 0 120px; text-align: center;
  background: radial-gradient(ellipse 900px 520px at 50% 42%, rgba(63,162,255,.22), rgba(63,162,255,0) 70%), radial-gradient(ellipse 1600px 800px at 50% 70%, #2a2d35 0%, #202228 50%, #15171b 100%); }
.heroe::after { content: ""; position: absolute; left: -30%; right: -30%; bottom: -10px; height: 300px; transform-origin: 50% 0; transform: perspective(520px) rotateX(64deg);
  background-image: linear-gradient(rgba(63,162,255,.5) 2px, transparent 2px), linear-gradient(90deg, rgba(63,162,255,.5) 2px, transparent 2px); background-size: 90px 90px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 90%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 90%); opacity: .8; }
.heroe .contenedor { position: relative; z-index: 1; }
.heroe .logo-grande { width: min(560px, 82%); filter: drop-shadow(0 0 28px rgba(63,162,255,.5)); margin-bottom: 26px; }
.heroe p.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 760px; margin: 0 auto 26px; color: #dbe1e8; }
.insignia { display: inline-block; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); border: 1px solid rgba(245,179,53,.5); border-radius: 999px; padding: 4px 14px; margin-bottom: 18px; }
.botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.boton { display: inline-block; padding: 13px 24px; border-radius: 999px; background: var(--boton); color: #fff; font-weight: 600; border: 1px solid transparent; }
.boton:hover { background: var(--boton-hover); text-decoration: none; }
.boton.sec { background: transparent; border-color: var(--linea); color: var(--texto); } .boton.sec:hover { background: var(--panel2); }

/* secciones y tarjetas */
section.bloque { padding: 56px 0; } section.bloque.alt { background: var(--grafito); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.titulo-seccion { text-align: center; max-width: 760px; margin: 0 auto 34px; } .titulo-seccion h2 { margin-top: 0; } .titulo-seccion p { color: var(--suave); }
.cuadricula { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; }
.tarjeta h3 { margin-top: 0; font-size: 1.15rem; } .tarjeta p:last-child { margin-bottom: 0; }
.tarjeta .icono { width: 44px; height: 44px; border-radius: 12px; background: rgba(63,162,255,.14); display: grid; place-items: center; margin-bottom: 12px; font-size: 1.4rem; }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: 14px; }
.pasos > li { counter-increment: paso; position: relative; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px 18px 70px; margin: 0; }
.pasos > li::before { content: counter(paso); position: absolute; left: 18px; top: 16px; width: 38px; height: 38px; border-radius: 50%; background: var(--boton); color: #fff; font-weight: 700; display: grid; place-items: center; }
.pasos > li strong:first-child { display: block; font-size: 1.08rem; margin-bottom: 2px; }
.dos-col { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; align-items: start; } @media (max-width: 820px) { .dos-col { grid-template-columns: 1fr; } }
.figura { margin: 0 0 1.2em; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; text-align: center; }
.figura img { border-radius: 12px; } .figura figcaption { color: var(--suave); font-size: .92rem; margin-top: 8px; }
.aviso { border-left: 4px solid var(--acento); background: rgba(63,162,255,.09); padding: 14px 18px; border-radius: 0 12px 12px 0; margin: 0 0 1.2em; }
.aviso.ambar { border-color: var(--ambar); background: rgba(245,179,53,.09); } .aviso.rojo { border-color: var(--rojo); background: rgba(242,102,92,.09); } .aviso.ok { border-color: var(--ok); background: rgba(60,207,142,.09); }
.aviso strong { color: var(--texto); }

/* tablas */
.tabla-caja { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--linea); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { background: var(--panel2); font-weight: 600; white-space: nowrap; } tr:last-child td { border-bottom: 0; } td:first-child { white-space: nowrap; }

/* etiquetas de estado */
.chip { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 10px; border: 1px solid; white-space: nowrap; vertical-align: middle; }
.chip.hecho { color: var(--ok); border-color: rgba(60,207,142,.5); background: rgba(60,207,142,.1); }
.chip.marcha { color: var(--acento); border-color: rgba(63,162,255,.5); background: rgba(63,162,255,.1); }
.chip.plan { color: var(--ambar); border-color: rgba(245,179,53,.5); background: rgba(245,179,53,.1); }
.chip.idea { color: var(--violeta); border-color: rgba(191,140,255,.5); background: rgba(191,140,255,.1); }

/* páginas con índice lateral */
.pagina { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; padding: 40px 0 70px; }
.indice { position: sticky; top: 84px; align-self: start; font-size: .92rem; max-height: calc(100vh - 100px); overflow: auto; border-right: 1px solid var(--linea); padding-right: 14px; }
.indice strong { display: block; margin-bottom: 8px; color: var(--suave); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.indice a { display: block; color: var(--suave); padding: 5px 8px; border-radius: 8px; border-left: 2px solid transparent; } .indice a:hover { color: var(--texto); text-decoration: none; background: var(--panel); }
.indice a.activo { color: var(--texto); border-left-color: var(--acento); background: var(--panel); }
@media (max-width: 960px) { .pagina { grid-template-columns: minmax(0, 1fr); } .indice { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--linea); padding: 0 0 14px; } }
.encabezado-pagina { padding: 54px 0 8px; border-bottom: 1px solid var(--linea); background: radial-gradient(ellipse 800px 260px at 20% 0, rgba(63,162,255,.14), transparent 70%); }
.encabezado-pagina p { color: var(--suave); max-width: 760px; font-size: 1.1rem; }
.contenido { min-width: 0; }
.contenido h2:first-child { margin-top: 0; }
.gesto-marco { max-width: 100%; }
body { overflow-x: hidden; }

/* gestos animados (mismas cuentas que el tutorial de la app) */
.gestos { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.4em; }
@media (max-width: 560px) { .gestos { grid-template-columns: 1fr; } }
.gesto { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 14px 16px; text-align: center; }
.gesto h4 { margin: 0 0 6px; } .gesto p { color: var(--suave); font-size: .92rem; margin: 6px 0 0; }
.gesto-marco { width: 100%; aspect-ratio: 340 / 300; position: relative; background: rgba(255,255,255,.06); border-radius: 18px; overflow: hidden; }
.g-escena { position: absolute; left: 50%; top: 50%; width: 340px; height: 300px; transform-origin: 0 0; }
.g-obj { position: absolute; left: 105px; top: 105px; width: 130px; height: 90px; border-radius: 14px; background: rgba(63,162,255,.5); }
.g-mano { position: absolute; width: 153.6px; height: 192px; left: 170px; top: 150px; margin: -50.56px 0 0 -48px; transform-origin: 48px 50.56px; pointer-events: none; }
.g-punto { position: absolute; left: 155px; top: 135px; width: 30px; height: 30px; border-radius: 50%; }
.g-etq { position: absolute; left: 10px; right: 10px; top: 8px; font-size: 22px; line-height: 1.15; color: rgba(238,241,244,.7); text-align: center; }

/* pie */
.pie { border-top: 1px solid var(--linea); background: var(--grafito); padding: 38px 0 26px; color: var(--suave); font-size: .95rem; }
.pie .cols { display: grid; gap: 24px; grid-template-columns: 1.4fr 1fr 1fr; } @media (max-width: 720px) { .pie .cols { grid-template-columns: 1fr; } }
.pie img.logo { height: 30px; margin-bottom: 10px; } .pie a { color: var(--suave); display: block; padding: 2px 0; } .pie a:hover { color: var(--texto); }
.pie .legal { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: .85rem; }
/* planes y precios */
.tarjeta.plan { position: relative; display: flex; flex-direction: column; }
.tarjeta.plan.destacado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.tarjeta.plan .insignia { position: absolute; top: -12px; right: 18px; }
.tarjeta.plan .precio { font-size: 2rem; font-weight: 700; margin: .2em 0 .1em; line-height: 1.15; }
.tarjeta.plan .precio small { font-size: .85rem; font-weight: 400; color: var(--suave, #9aa3ad); }
.tarjeta.plan .detalle { color: var(--suave, #9aa3ad); margin: .2em 0 .8em; }
.tarjeta.plan ul { padding-left: 1.1em; margin: .4em 0 0; }
.tarjeta.plan li { margin: .35em 0; }
.nota-precios { color: var(--suave, #9aa3ad); font-size: .92rem; margin-top: 14px; }
details { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; margin: 0 0 10px; }
details summary { cursor: pointer; font-weight: 600; }
details p { margin: .7em 0 0; }
.completar { background: rgba(245,179,53,.16); border: 1px dashed rgba(245,179,53,.6); border-radius: 6px; padding: 0 .4em; color: var(--ambar); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ============ Menú con desplegables, idioma y cabecera ============ */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.barra { display: flex; align-items: center; gap: 14px; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.grupo { position: relative; }
.grupo-boton { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--texto); padding: 9px 13px; border-radius: 999px; font: inherit; font-size: .95rem; cursor: pointer; opacity: .88; }
.grupo-boton:hover, .grupo.abierto .grupo-boton, .grupo.activo .grupo-boton { background: var(--panel2); opacity: 1; }
.grupo.activo .grupo-boton { box-shadow: 0 0 0 1px rgba(63,162,255,.5) inset; }
.flecha { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .15s; }
.grupo.abierto .flecha { transform: rotate(-135deg) translate(-1px, -1px); }
.panel { display: none; position: absolute; top: 100%; left: 0; min-width: 320px; padding: 8px; background: var(--grafito); border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.5); z-index: 60; }
.grupo.abierto .panel { display: block; }
@media (hover: hover) and (min-width: 981px) { .grupo:hover .panel, .grupo:focus-within .panel { display: block; } }
.panel a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--texto); }
.panel a:hover, .panel a:focus-visible { background: var(--panel2); text-decoration: none; }
.panel a strong { display: block; font-weight: 600; }
.panel a span { display: block; color: var(--suave); font-size: .86rem; line-height: 1.35; margin-top: 2px; }
.acciones-cabecera { display: flex; align-items: center; gap: 10px; flex: none; }
.idioma { display: inline-flex; gap: 6px; align-items: center; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--linea); color: var(--suave); font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.idioma:hover { background: var(--panel2); color: var(--texto); text-decoration: none; }
.idioma .sep { opacity: .4; }
body[data-lang="es"] .idioma span:nth-child(1), body[data-lang="en"] .idioma span:nth-child(3) { color: var(--acento); }
.sesion { color: var(--texto); font-size: .92rem; padding: 7px 10px; }
.boton.chico { padding: 8px 16px; font-size: .92rem; }
.menu-boton { display: none; margin-left: auto; background: var(--panel2); color: var(--texto); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; font: inherit; cursor: pointer; }
.pie-titulo { display: block; color: var(--texto); margin-bottom: 6px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
@media (max-width: 980px) {
  .menu-boton { display: block; margin-left: auto; }
  .barra { flex-wrap: wrap; row-gap: 0; }
  .acciones-cabecera { order: 2; margin-left: 0; }
  .menu-boton { order: 3; }
  .nav { display: none; order: 4; position: static; width: 100%; flex-direction: column; align-items: stretch; margin: 0; padding: 6px 0 14px; border-top: 1px solid var(--linea); }
  .nav.abierto { display: flex; }
  .grupo-boton { width: 100%; justify-content: space-between; padding: 13px 10px; border-radius: 10px; }
  .panel { position: static; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 12px; }
  .grupo.abierto .panel { display: block; }
  .cabecera .boton.chico { display: none; }
}

/* ============ Intro de marca ============ */
.intro { display: none; position: fixed; inset: 0; z-index: 1000; background: #15171b; align-items: center; justify-content: center; animation: intro-seguridad .01s 3.2s forwards; }
.intro.activa { display: flex; }
.intro-logo { width: min(150px, 34vw); height: auto; opacity: 0; filter: drop-shadow(0 0 24px rgba(63,162,255,.5)); }
html.con-intro { overflow: hidden; }
@keyframes intro-seguridad { to { visibility: hidden; opacity: 0; } }

/* ============ Héroe: malla en movimiento muy suave ============ */
.heroe::after { animation: malla 14s linear infinite; }
@keyframes malla { from { background-position: 0 0, 0 0; } to { background-position: 0 90px, 0 0; } }
.heroe .logo-grande { animation: pulso 6s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { filter: drop-shadow(0 0 22px rgba(63,162,255,.42)); } 50% { filter: drop-shadow(0 0 38px rgba(63,162,255,.7)); } }
@media (prefers-reduced-motion: reduce) { .heroe::after, .heroe .logo-grande { animation: none; } .intro { display: none !important; } }

/* ============ Formularios ============ */
.formulario { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; margin: 0 0 1.4em; display: grid; gap: 14px; }
.formulario .campo { display: grid; gap: 6px; }
.formulario label, .formulario legend { font-weight: 600; font-size: .95rem; }
.formulario .ayuda { color: var(--suave); font-size: .86rem; font-weight: 400; }
.formulario input[type="text"], .formulario input[type="email"], .formulario select, .formulario textarea { width: 100%; font: inherit; color: var(--texto); background: var(--grafito); border: 1px solid var(--linea); border-radius: 10px; padding: 11px 13px; }
.formulario textarea { min-height: 120px; resize: vertical; }
.formulario .doble { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .formulario .doble { grid-template-columns: 1fr; } }
.formulario fieldset { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 14px 12px; margin: 0; }
.formulario .opcion { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 6px 0; }
.formulario .opcion input { margin-top: .35em; }
.formulario .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-estado { min-height: 1.4em; margin: 0; font-weight: 600; }
.form-estado.ok { color: var(--ok); } .form-estado.error { color: var(--rojo); }
.formulario button[type="submit"] { justify-self: start; cursor: pointer; font: inherit; font-weight: 600; }
.formulario button[disabled] { opacity: .6; cursor: progress; }

/* ============ Blog, recursos, educación, preguntas ============ */
.entrada .fecha, .entrada-pagina .fecha { color: var(--suave); font-size: .9rem; margin: 0 0 6px; }
.entrada h3 a { color: var(--texto); }
.entrada-pagina { max-width: 780px; padding: 40px 0 70px; }
.entrada-pagina h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.entrada-pagina h2 { margin-top: 1.5em; }
.vacio { border: 1px dashed var(--linea); border-radius: var(--radio); padding: 22px; color: var(--suave); background: rgba(255,255,255,.02); }
.vacio strong { color: var(--texto); }
.tarjeta .etiquetas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.tarjeta .boton { margin-top: 8px; }
.grupo-preguntas { margin: 2em 0 .6em; }
.cita { border-left: 3px solid var(--acento); padding: 4px 0 4px 16px; color: var(--suave); }

.ayuda { color: var(--suave); font-size: .9rem; }