/* =====================================================================
   POLARIS — hoja de estilo única
   Identidad: azul noche institucional + oro polar. Seria, densa en datos,
   sin florituras. Es una herramienta de trabajo, no una landing.
   ===================================================================== */

:root {
    --navy-900: #0b1220;
    --navy-800: #111a2e;
    --navy-700: #172440;
    --navy-600: #1f2f52;
    --navy-500: #2b3f6b;

    --gold-500: #d8b25c;
    --gold-400: #e6c67d;
    --gold-300: #f0dba8;

    --ink-900: #0d1524;
    --ink-700: #33415c;
    --ink-500: #64748b;
    --ink-400: #8b97ab;
    --ink-300: #c3cbd8;
    --ink-200: #e2e7ee;
    --ink-100: #f1f4f8;
    --paper: #f7f9fc;
    --white: #fff;

    --good: #2f8f5b;
    --good-bg: #e8f5ee;
    --mid: #c68a1c;
    --mid-bg: #fdf3e0;
    --low: #c0392b;
    --low-bg: #fbeceb;
    --info-bg: #e9f0fb;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(13, 21, 36, .06), 0 4px 14px rgba(13, 21, 36, .06);
    --shadow-lg: 0 10px 40px rgba(13, 21, 36, .14);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --sidebar-w: 250px;
}

* { box-sizing: border-box; }

html, body {
    /* Red de seguridad: una palabra más ancha que su caja parte en vez de
       empujar la página. Solo entra en juego cuando no cabe de otro modo. */
    overflow-wrap: break-word;
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-900);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; }
p { margin: 0 0 .8em; }
small { font-size: .82rem; }

/* ---------- Estructura ---------- */

.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--navy-900);
    color: var(--ink-300);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    color: var(--white);
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__star { display: flex; flex: 0 0 auto; }
.brand__star img { display: block; width: 36px; height: 36px; }
.brand__text strong { display: block; font-size: 1.05rem; letter-spacing: .14em; }
.brand__word { display: block; width: 132px; height: auto; margin-bottom: 3px; }
.brand__text small {
    display: block;
    color: var(--ink-400);
    font-size: .56rem;
    letter-spacing: .04em;
    line-height: 1.35;
    text-transform: uppercase;
    /* Sin nowrap: el lema tiene 41 caracteres y en una sola línea se sale de
       la barra lateral. Parte en dos, que bajo el logotipo se lee igual. */
    max-width: 15em;
}

.ctx {
    margin: 0 12px 12px;
    padding: 10px 12px;
    background: var(--navy-700);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--gold-500);
}
.ctx__name { color: var(--white); font-weight: 600; font-size: .9rem; }
.ctx__meta { color: var(--ink-400); font-size: .76rem; }
.ctx__switch { display: inline-block; margin-top: 5px; color: var(--gold-400); font-size: .74rem; }

.nav { flex: 1; padding: 0 8px 14px; }
.nav__group {
    padding: 14px 12px 5px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-500);
}
.nav__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-300);
    font-size: .875rem;
    text-decoration: none;
}
.nav__item span { width: 16px; text-align: center; opacity: .7; font-size: .9em; }
.nav__item:hover { background: var(--navy-800); color: var(--white); text-decoration: none; }
.nav__item.is-active { background: var(--navy-600); color: var(--white); }
.nav__item.is-active span { opacity: 1; color: var(--gold-400); }
.nav__item--btn {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.badge {
    margin-left: auto;
    background: var(--gold-500);
    color: var(--navy-900);
    border-radius: 20px;
    padding: 0 6px;
    font-size: .7rem;
    font-weight: 700;
}
.sidebar__foot { padding: 8px; border-top: 1px solid var(--navy-700); }
.logout { margin: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: var(--white);
    border-bottom: 1px solid var(--ink-200);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar__title { margin: 0; font-size: 1.15rem; }
.topbar__user { display: flex; align-items: center; gap: 9px; font-size: .85rem; }
.topbar__name { color: var(--ink-700); }

.content { flex: 1; padding: 24px 28px 40px; max-width: 1280px; width: 100%; }

.foot {
    padding: 16px 28px 26px;
    color: var(--ink-500);
    font-size: .76rem;
    border-top: 1px solid var(--ink-200);
    max-width: 1280px;
}
.foot p { margin: 0; }

.blank { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Tarjetas ---------- */

.card {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.card--flat { box-shadow: none; }
.card--tight { padding: 14px 16px; }
.card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.card__head h2, .card__head h3 { margin: 0; }
@media (max-width: 620px) {
    /* En el teléfono el título se come el ancho y lo de la derecha —un
       desplegable de meses, un chip— queda reducido a una letra. Se apilan.
       Pero solo se estira lo que es un control: un chip estirado a todo el
       ancho parece un botón y no lo es. */
    .card__head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .card__head select, .card__head .btn { width: 100%; }
    .card__head > div:first-child { width: 100%; }
}
.card__sub { color: var(--ink-500); font-size: .84rem; margin: 2px 0 0; }

.grid { display: grid; gap: 18px; }
/* Un hijo de rejilla trae `min-width: auto` de serie: su anchura mínima es la
   de su contenido. Con una tabla ancha o un vídeo dentro, la pista se estira
   hasta ese contenido y arrastra la página entera a lo ancho — que es lo que
   pasaba en el iPhone. Con min-width:0 manda la pista, y el .table-wrap
   vuelve a hacer su propio scroll en vez de empujar. */
.grid > * { min-width: 0; }
/* min(Xpx, 100%) en vez de Xpx a secas: un mínimo fijo mayor que el hueco
   disponible obliga a la pista a ser más ancha que su contenedor y empuja la
   página. Dentro de una tarjeta con relleno, 320 no cabe en un móvil de 390. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 900px) { .grid--sidebar { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Métricas y puntuaciones ---------- */

.stat {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.stat__value { font-size: 1.7rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
               margin-bottom: 5px; }
.stat__label { color: var(--ink-500); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.stat__note { color: var(--ink-500); font-size: .78rem; margin-top: 3px; }

.score { font-variant-numeric: tabular-nums; font-weight: 700; }
.score--good { color: var(--good); }
.score--mid  { color: var(--mid); }
.score--low  { color: var(--low); }
.score--none { color: var(--ink-400); }

.meter { background: var(--ink-200); border-radius: 20px; height: 7px; overflow: hidden; }
.meter__fill { height: 100%; border-radius: 20px; background: var(--navy-600); transition: width .4s ease; }
.meter__fill.score--good { background: var(--good); }
.meter__fill.score--mid  { background: var(--mid); }
.meter__fill.score--low  { background: var(--low); }
.meter__fill.score--none { background: var(--ink-300); }

.dims { display: grid; gap: 12px; }
.dim__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .88rem; }
.dim__label { font-weight: 550; }
.dim__detail { color: var(--ink-500); font-size: .79rem; margin-top: 4px; }

.readiness {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.readiness__big {
    font-size: 3.4rem;
    font-weight: 750;
    line-height: 1.16;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.readiness__big sup { font-size: 1rem; font-weight: 500; color: var(--ink-400); }
.readiness__verdict { flex: 1; min-width: 240px; }

/* ---------- Etiquetas ---------- */

.chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 600;
    background: var(--ink-100);
    color: var(--ink-700);
    border: 1px solid var(--ink-200);
    white-space: nowrap;
}
.chip--good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.chip--mid  { background: var(--mid-bg);  color: var(--mid);  border-color: transparent; }
.chip--low  { background: var(--low-bg);  color: var(--low);  border-color: transparent; }
.chip--role { background: var(--navy-700); color: var(--gold-300); border-color: transparent; }
.chip--ghost { background: transparent; }

/* ---------- Avisos ---------- */

.note {
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: .87rem;
    margin-bottom: 14px;
    border-left: 3px solid var(--ink-300);
    background: var(--ink-100);
}
.note--info    { background: var(--info-bg); border-color: var(--navy-500); }
.note--good    { background: var(--good-bg); border-color: var(--good); }
.note--warning { background: var(--mid-bg);  border-color: var(--mid); }
.note--error   { background: var(--low-bg);  border-color: var(--low); }
.note--rule    { background: #fbf7ec; border-color: var(--gold-500); }
.note p:last-child { margin-bottom: 0; }
.note strong { font-weight: 650; }

.flash { position: sticky; top: 56px; z-index: 30; padding: 0 28px; }
.flash .note { box-shadow: var(--shadow); }

/* ---------- Formularios ---------- */

.field { margin-bottom: 14px; }
.field > label, .label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 4px;
}
.hint { display: block; color: var(--ink-500); font-size: .78rem; margin-top: 3px; font-weight: 400; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=url], input[type=search], select, textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9rem;
    color: var(--ink-900);
    background: var(--white);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy-500);
    box-shadow: 0 0 0 3px rgba(43, 63, 107, .12);
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%), linear-gradient(135deg, var(--ink-500) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }

.check { display: flex; align-items: flex-start; gap: 8px; font-size: .87rem; margin-bottom: 6px; }
.check input { margin-top: 3px; flex: 0 0 auto; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--navy-700);
    background: var(--navy-700);
    color: var(--white);
    font: inherit;
    font-size: .875rem;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--navy-600); border-color: var(--navy-600); text-decoration: none; color: var(--white); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--gold { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); }
.btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--ink-300); }
.btn--ghost:hover { background: var(--ink-100); color: var(--navy-900); }
.btn--danger { background: transparent; color: var(--low); border-color: #e5b5b0; }
.btn--danger:hover { background: var(--low-bg); color: var(--low); }
.btn--sm { padding: 4px 10px; font-size: .8rem; }
.btn--lg { padding: 11px 22px; font-size: .95rem; }
.btn--block { width: 100%; justify-content: center; }

.actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.actions--end { justify-content: flex-end; }

/* ---------- Tablas ---------- */

.table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.data th, table.data td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ink-200);
    vertical-align: top;
}
table.data th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-500);
    font-weight: 650;
    white-space: nowrap;
}
table.data tbody tr:hover { background: var(--ink-100); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Listas de módulos ---------- */

.item {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    background: var(--white);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.item__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.item__title { font-weight: 600; margin: 0; }
.item__meta { color: var(--ink-500); font-size: .79rem; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.item__body { margin-top: 9px; font-size: .89rem; color: var(--ink-700); }

.empty {
    text-align: center;
    padding: 44px 20px;
    color: var(--ink-500);
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius);
    background: var(--white);
}
.empty h3 { color: var(--ink-700); }
.empty p { max-width: 520px; margin: 0 auto .9em; }

/* ---------- Ataques ---------- */

.attack { border-left: 3px solid var(--navy-500); }
.attack--sev5 { border-left-color: var(--low); }
.attack--sev4 { border-left-color: #d9741f; }
.attack__persona { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: .85rem; }
.attack__q { font-size: 1.02rem; margin: 8px 0; font-weight: 500; }
.attack__quote { color: var(--ink-500); font-style: italic; font-size: .82rem; }

.persona-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.persona-pick label {
    display: flex; gap: 9px; align-items: flex-start;
    border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
    padding: 9px 11px; cursor: pointer; background: var(--white);
}
.persona-pick label:has(input:checked) { border-color: var(--navy-500); background: var(--info-bg); }
.persona-pick b { display: block; font-size: .86rem; }
.persona-pick small { color: var(--ink-500); font-style: italic; }

/* ---------- Chat / entrevistas ---------- */

.chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.turn { max-width: 78%; padding: 11px 14px; border-radius: 12px; font-size: .92rem; }
.turn--entrevistador { background: var(--navy-800); color: var(--ink-100); border-bottom-left-radius: 3px; align-self: flex-start; }
.turn--candidato { background: var(--white); border: 1px solid var(--ink-200); border-bottom-right-radius: 3px; align-self: flex-end; }
.turn__who { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .65; margin-bottom: 3px; }

/* ---------- Entrenador ---------- */

.stage {
    background: var(--navy-900);
    border-radius: var(--radius);
    padding: 18px;
    color: var(--ink-200);
    text-align: center;
}
.stage video {
    width: 100%;
    max-width: 520px;
    border-radius: var(--radius-sm);
    background: #000;
    transform: scaleX(-1);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.stage__q { color: var(--white); font-size: 1.15rem; font-weight: 550; margin-bottom: 14px; }
.timer { font-family: var(--mono); font-size: 2rem; color: var(--gold-400); font-variant-numeric: tabular-nums; }
.live {
    background: var(--navy-800);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    text-align: left;
    min-height: 68px;
    font-size: .89rem;
    color: var(--ink-300);
    margin-top: 12px;
    max-height: 190px;
    overflow-y: auto;
}
.rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; margin-right: 6px; animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- Academia ---------- */

.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--ink-200); }
.tl-item { position: relative; margin-bottom: 14px; }
.tl-item::before {
    content: ""; position: absolute; left: -24px; top: 16px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--white); border: 2px solid var(--ink-300);
}
.tl-item--done::before { background: var(--good); border-color: var(--good); }
.tl-item--partial::before { background: var(--mid); border-color: var(--mid); }
.tl-day { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500); font-weight: 700; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: .88rem; border-bottom: 1px solid var(--ink-100); }
.checklist li:last-child { border-bottom: 0; }
.checklist .tick { flex: 0 0 auto; font-weight: 700; }
.checklist .tick--ok { color: var(--good); }
.checklist .tick--no { color: var(--ink-400); }

/* ---------- Revisión del equipo ---------- */

.review {
    border: 1px solid var(--gold-500);
    background: #fbf7ec;
    border-radius: var(--radius);
    padding: 13px 15px;
    margin-bottom: 16px;
}
.review__who { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: #8a6d24; font-weight: 700; }
.review__note { margin: 5px 0 0; font-size: .93rem; }

/* ---------- Portada ---------- */

.hero {
    background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
    color: var(--white);
    padding: 70px 24px 76px;
    text-align: center;
}
.hero__star { margin-bottom: 10px; }
.hero__star img { display: inline-block; width: 132px; height: 132px; }
.hero h1 { font-size: 2.9rem; letter-spacing: .2em; margin-bottom: 6px; }
.hero__word { margin: 0 0 8px; line-height: 0; }
.hero__word img { width: min(420px, 78vw); height: auto; }
.hero__tag { color: var(--gold-300); font-size: 1.06rem; letter-spacing: .06em; margin-bottom: 22px; }
.hero__claim { max-width: 660px; margin: 0 auto 26px; color: var(--ink-300); font-size: 1.06rem; }
.hero__pillars { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 30px; color: var(--ink-300); font-size: .88rem; }

.public { max-width: 1080px; margin: 0 auto; padding: 44px 24px; }
.auth-wrap { max-width: 430px; margin: 0 auto; padding: 44px 22px; }
.auth-card { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand__mark { display: block; margin: 0 auto 10px; width: 76px; height: 76px; }
.auth-brand__word { display: block; margin: 0 auto 6px; width: 190px; height: auto; }
.auth-brand strong { display: block; letter-spacing: .2em; font-size: 1.3rem; }
.auth-brand small { color: var(--ink-500); letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }

/* ---------- Utilidades ---------- */

.muted { color: var(--ink-500); }
.small { font-size: .82rem; }
.mono { font-family: var(--mono); font-size: .85em; }
/* Lo que va en monoespaciada suele ser una URL, un código INE o una cabecera
   CSV: cadenas largas sin un solo espacio. Sin permiso para partir, estiran su
   caja y el exceso sube en cascada hasta desbordar la página entera. */
.mono, code, .hint code, td .mono { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 10px; }
.mt1 { margin-top: 10px; }
.mt2 { margin-top: 20px; }
.mb2 { margin-bottom: 20px; }
.center { text-align: center; }
.right { text-align: right; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex--between { justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.prose p { margin-bottom: .7em; }
.prose ul { margin: .4em 0 .8em; padding-left: 1.2em; }
.prose li { margin-bottom: .25em; }
.hidden { display: none !important; }

.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }

/* Indicador de espera en las llamadas al modelo, que tardan de 5 a 40 s */
.spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: -2px;
    margin-right: 7px;
    opacity: .8;
}
@keyframes spin { to { transform: rotate(360deg); } }

details.acc { border: 1px solid var(--ink-200); border-radius: var(--radius-sm); margin-bottom: 9px; background: var(--white); }
details.acc summary { padding: 9px 13px; cursor: pointer; font-weight: 550; font-size: .89rem; }
details.acc[open] summary { border-bottom: 1px solid var(--ink-200); }
details.acc .acc__body { padding: 13px; }

/* El botón de menú solo existe en pantallas pequeñas */
.sidebar__toggle { display: none; }

@media (max-width: 820px) {
    /* Antes, en un iPhone la barra lateral desplegada ocupaba 761px: se abría
       la aplicación y no se veía ni un dato, solo menú. Ahora es una cabecera
       compacta y el menú se despliega cuando se pide. */
    .app { flex-direction: column; }
    .sidebar {
        width: 100%; height: auto; flex: none;
        position: sticky; top: 0; z-index: 30;
    }
    .sidebar__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; padding-right: 8px;
    }
    .brand { padding: 10px 14px; }
    .brand__word { width: 116px; }

    .sidebar__toggle {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;                 /* objetivo táctil mínimo */
        background: transparent; border: 0; cursor: pointer;
        border-radius: var(--radius-sm);
    }
    .sidebar__toggle:hover { background: var(--navy-700); }
    .sidebar__burger,
    .sidebar__burger::before,
    .sidebar__burger::after {
        display: block; width: 20px; height: 2px; border-radius: 2px;
        background: var(--ink-200); transition: transform .18s ease, opacity .18s ease;
    }
    .sidebar__burger { position: relative; }
    .sidebar__burger::before,
    .sidebar__burger::after { content: ''; position: absolute; left: 0; }
    .sidebar__burger::before { top: -6px; }
    .sidebar__burger::after  { top:  6px; }

    /* Aspa cuando está abierto: el usuario ve cómo cerrarlo */
    .sidebar.is-open .sidebar__burger { background: transparent; }
    .sidebar.is-open .sidebar__burger::before { transform: translateY(6px) rotate(45deg); }
    .sidebar.is-open .sidebar__burger::after  { transform: translateY(-6px) rotate(-45deg); }

    .sidebar__panel { display: none; max-height: 70vh; overflow-y: auto; padding-bottom: 8px; }
    .sidebar.is-open .sidebar__panel { display: block; }

    /* El candidato activo se queda siempre a la vista: es el contexto de todo */
    .ctx { margin: 0 12px 10px; }

    .content { padding: 16px; }
    .topbar { padding: 12px 16px; }
    .topbar__title { font-size: 1rem; }
    .flash { padding: 0 16px; }
    .turn { max-width: 92%; }
}

@media print {
    .sidebar, .topbar, .foot, .actions, .flash { display: none !important; }
    .content { padding: 0; }
    .card { box-shadow: none; break-inside: avoid; }
}

/* ---------- EL MEDIDOR: silueta de preparación ---------- */

.figure {
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
}
.figure__svg { flex: 0 0 auto; }
.figure__svg svg { display: block; height: 300px; width: auto; }
.figure--medio .figure__svg svg { height: 190px; }

/* El llenado sube con una transición larga: se percibe como que la figura
   "gana nivel", no como un salto. */
.figure__fill { transition: y .9s cubic-bezier(.4,0,.2,1), height .9s cubic-bezier(.4,0,.2,1); }

.figure__side { flex: 1; min-width: 250px; }

.figure__score {
    font-size: 3.6rem;
    font-weight: 750;
    /* Con line-height por debajo de 1.15 el trazo que baja de la cifra se sale
       de su propia caja y muerde la etiqueta: las cajas no llegan a solaparse,
       así que el fallo no se ve midiendo, solo mirando. 1.16 y 8 px de hueco. */
    line-height: 1.16;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.figure--medio .figure__score { font-size: 2.4rem; }
.figure__of { font-size: .95rem; font-weight: 500; color: var(--ink-400); }
.figure__verdict { font-size: 1rem; font-weight: 550; margin: 6px 0 14px; }

.figure__legend { list-style: none; padding: 0; margin: 0; }
.figure__legend li {
    /* Caso normal: etiqueta a la izquierda y cifra a la derecha. Con la rejilla
       de cuatro columnas de la silueta, una etiqueta larga se desbordaba de la
       primera celda y aterrizaba encima de su propio número. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 8px 14px;
    padding: 5px 0;
    border-bottom: 1px solid var(--ink-100);
    font-size: .84rem;
}
/* La leyenda de la silueta sí tiene cuatro celdas: punto, zona, bloque y nota. */
.figure__legend--zonas li {
    grid-template-columns: 12px 68px 1fr 34px;
    align-items: center;
    gap: 8px;
}
.figure__legend li:last-child { border-bottom: 0; }
.figure__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-300); }
.figure__dot.score--good { background: var(--good); }
.figure__dot.score--mid  { background: var(--mid); }
.figure__dot.score--low  { background: var(--low); }
.figure__zone  { color: var(--ink-500); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.figure__block { color: var(--ink-900); }
.figure__pct   { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.figure__foot  { color: var(--ink-500); font-size: .78rem; margin: 12px 0 0; }

@media (max-width: 620px) {
    /* La silueta y su leyenda no caben en una fila de 390px: la leyenda se
       comprimía hasta partir cada renglón en tres. Se apilan. */
    .figure { gap: 14px; flex-direction: column; align-items: center; }
    .figure__svg svg { height: 200px; }
    .figure__side { min-width: 0; width: 100%; }
    .figure__score { font-size: 2.6rem; }
    .figure__legend--zonas li { gap: 8px; }
    .figure__zone { font-size: .7rem; }
    .table-wrap { margin: 0 -16px; padding: 0 16px; }
    .actions { flex-wrap: wrap; }
    .btn--lg { width: 100%; justify-content: center; }
}

/* ---------- Entrenamiento diario: el modal que aparece sin avisar ---------- */

.daily {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 200;
    animation: dailyIn .25s ease;
}
@keyframes dailyIn { from { opacity: 0; } to { opacity: 1; } }

.daily__box {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 26px;
}
.daily__eyebrow {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gold-500);
    font-weight: 700;
}
.daily__q { font-size: 1.18rem; font-weight: 550; margin: 10px 0 4px; line-height: 1.35; }
.daily__kind { color: var(--ink-500); font-size: .78rem; margin-bottom: 14px; }
.daily__progress { display: flex; gap: 5px; margin-bottom: 16px; }
.daily__dot { flex: 1; height: 4px; border-radius: 4px; background: var(--ink-200); }
.daily__dot.is-done { background: var(--good); }
.daily__dot.is-now  { background: var(--gold-500); }
.daily__result { border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 14px; }
.daily__result--ok  { background: var(--good-bg); border-left: 3px solid var(--good); }
.daily__result--bad { background: var(--mid-bg);  border-left: 3px solid var(--mid); }
.daily__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.daily__skip { background: none; border: 0; color: var(--ink-500); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; }

/* Espacio privado del candidato: se distingue del resto del panel a propósito,
   porque es el único bloque que su equipo no comparte. */
.card--private{
    border:1px solid var(--gold-500);
    background:linear-gradient(180deg,rgba(216,178,92,.10),transparent 60%);
}
.card--private h3{color:var(--gold-500);letter-spacing:.02em}


/* ---------- Propuestas del equipo ---------- */

/* Cada propuesta se lee como una ficha con firma: el nombre de quien la hizo
   es la mitad del valor del módulo. */
.sug {
    border: 1px solid var(--ink-200);
    border-left: 3px solid var(--navy-500);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--white);
}
.sug:last-child { margin-bottom: 0; }
.sug__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sug__head b { font-size: .97rem; }
.sug__by { color: var(--ink-500); margin: 0 0 8px; }
.sug__note {
    background: var(--ink-100); border-radius: var(--radius-sm);
    padding: 8px 10px; margin: 10px 0 0;
}


/* ---------- Ojo para ver la contraseña ---------- */

/* Una contraseña temporal de doce caracteres aleatorios, entregada en mano y
   tecleada a ciegas, se falla tres veces. El ojo no es un adorno. */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 44px; width: 100%; }
.campo-clave__ojo {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: transparent; border: 0; border-radius: var(--radius-sm);
    color: var(--ink-500); cursor: pointer;
}
.campo-clave__ojo:hover { color: var(--navy-700); background: var(--ink-100); }
.campo-clave__ojo:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 1px; }

/* La frase que explica la puerta, bajo la marca. Se usaba en el acceso sin
   tener regla: heredaba el párrafo por defecto y sonaba a texto suelto. */
.auth-hint {
    text-align: center;
    color: var(--ink-500);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 20px;
}
.auth-hint strong { color: var(--ink-900); }

.auth-forgot { text-align: center; margin: 14px 0 0; font-size: .86rem; }
.auth-forgot a { color: var(--ink-500); }
.auth-forgot a:hover { color: var(--navy-700); }

/* ═══════════════════════════════════════════════════════════════
   LANDING
   Fondo oscuro completo. La marca es azul marino y oro: sobre claro
   se veía como una plantilla; sobre oscuro se lee como algo caro.
   Un solo elemento dorado por pantalla, que es donde va el ojo.
   ═══════════════════════════════════════════════════════════════ */

.lp-hero {
    position: relative;
    min-height: min(92vh, 900px);
    display: flex; flex-direction: column; justify-content: center;
    background: #070c17;
    color: var(--white);
    padding: 80px 24px 0;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
}

/* La escena ocupa el fondo entero. Va detrás de todo, y encima lleva un velo
   oscuro: sin él, el texto blanco sobre el amanecer dorado se vuelve ilegible
   justo donde más importa. Legibilidad antes que espectáculo. */
.lp-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 52% at 50% 34%, rgba(7,12,23,.82) 0%, rgba(7,12,23,.42) 55%, transparent 78%),
        linear-gradient(180deg, rgba(7,12,23,.62) 0%, transparent 34%);
}


/* Quien tenga puesto «reducir movimiento» no ve nada moverse */
@media (prefers-reduced-motion: reduce) {
    .lp-bg img, .lp-cta { animation: none; transition: none; }
}

.lp-hero__in { position: relative; max-width: 800px; margin: 0 auto; }
.lp-hero__mark { width: 96px; height: 96px; margin-bottom: 14px;
                 filter: drop-shadow(0 6px 26px rgba(7,12,23,.85)); }
.lp-hero__word { margin: 0 0 10px; line-height: 0; }
.lp-hero__word img { width: min(300px, 64vw); height: auto; }
.lp-hero__eyebrow {
    margin: 0 0 40px; color: var(--gold-300);
    font-size: .74rem; letter-spacing: .32em; text-transform: uppercase;
}

.lp-hero__claim {
    font-size: clamp(2.4rem, 7.2vw, 4.6rem);
    line-height: 1.02; letter-spacing: -.03em; font-weight: 200;
    margin: 0 0 16px;
    text-shadow: 0 4px 40px rgba(7,12,23,.9);
}
.lp-hero__claim em {
    font-style: normal; font-weight: 700;
    background: linear-gradient(180deg, #f0dba8 0%, #d8b25c 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero__sub {
    font-size: clamp(1rem, 2.3vw, 1.32rem);
    color: var(--ink-200); font-weight: 300; margin: 0 0 22px;
    text-shadow: 0 2px 22px rgba(7,12,23,.9);
}
/* La frase que separa a POLARIS de una academia. Va con filo dorado a la
   izquierda porque es una afirmación, no un subtítulo más. */
.lp-hero__tesis {
    max-width: 30ch;
    margin: 0 auto 34px;
    padding: 12px 0 12px 18px;
    border-left: 2px solid var(--gold-300);
    text-align: left;
    color: rgba(232,237,245,.9);
    font-size: clamp(.95rem, 2.1vw, 1.12rem);
    font-weight: 300;
    line-height: 1.5;
    text-shadow: 0 2px 22px rgba(7,12,23,.9);
}
.lp-hero__tesis em { font-style: normal; font-weight: 600; color: #fff; }

/* Dos puertas: la de quien ya tiene acceso y la de quien viene de fuera. */
.lp-puertas {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: center;
}

.lp-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, #e6c67d 0%, #d8b25c 100%);
    color: #0b1220;
    padding: 17px 38px; border-radius: 999px;
    font-weight: 650; font-size: 1.04rem;
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(216,178,92,.34), 0 0 0 1px rgba(240,219,168,.5) inset;
    transition: transform .18s ease, box-shadow .18s ease;
}
.lp-cta:hover {
    text-decoration: none; color: #0b1220;
    transform: translateY(-2px);
    box-shadow: 0 18px 52px rgba(216,178,92,.46), 0 0 0 1px rgba(240,219,168,.7) inset;
}
.lp-cta--suave {
    background: transparent;
    color: var(--gold-300);
    box-shadow: 0 0 0 1px rgba(216,178,92,.5) inset;
    font-weight: 500;
}
.lp-cta--suave:hover {
    color: #0b1220;
    background: linear-gradient(180deg, #e6c67d 0%, #d8b25c 100%);
    box-shadow: 0 12px 40px rgba(216,178,92,.34);
}
.lp-cta span { transition: transform .18s ease; }
.lp-cta:hover span { transform: translateX(4px); }
.lp-hero__note {
    margin: 16px 0 0; color: rgba(226,231,238,.62);
    font-size: .78rem; letter-spacing: .08em;
}

/* Cifras sobre cristal: se apoyan en la escena sin taparla */
.lp-figures {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 980px; width: 100%; margin: 64px auto 0;
    background: rgba(7,12,23,.42);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(226,231,238,.12);
    border-radius: 16px 16px 0 0; border-bottom: 0;
}
.lp-figures div {
    padding: 22px 12px 26px; text-align: center;
    border-right: 1px solid rgba(226,231,238,.10);
}
.lp-figures div:last-child { border-right: 0; }
.lp-figures b {
    display: block; font-size: 1.85rem; font-weight: 200; line-height: 1.2;
    color: var(--gold-400); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.lp-figures span {
    display: block; margin-top: 4px; color: rgba(226,231,238,.62);
    font-size: .72rem; line-height: 1.35;
}

/* ---------- El problema real ---------- */

/* Esta sección era blanca y la frase se quedaba sin peso. En oscuro continúa
   el ambiente del vídeo: la película se funde en la afirmación en vez de
   cortar a un folio en blanco. */
.lp-stakes {
    background:
        radial-gradient(ellipse 90% 70% at 50% 0%, rgba(43,63,107,.42) 0%, transparent 62%),
        var(--navy-900);
    padding: 86px 24px 90px;
    border-top: 1px solid rgba(226,231,238,.08);
}
.lp-stakes__in { max-width: 700px; margin: 0 auto; text-align: center; }
.lp-stakes__big {
    font-size: clamp(1.55rem, 4.2vw, 2.4rem);
    font-weight: 300; line-height: 1.2; letter-spacing: -.02em;
    margin: 0 0 22px; color: var(--white);
    text-wrap: balance;
}
.lp-stakes__body {
    font-size: 1.02rem; line-height: 1.68;
    color: var(--ink-300); margin: 0 auto 22px; max-width: 60ch;
}
/* El remate va aislado por una línea dorada: es la frase que tiene que quedarse */
.lp-stakes__punch {
    position: relative; color: var(--white) !important;
    margin: 0 auto !important; max-width: 52ch;
    padding-top: 26px; font-size: 1.06rem !important;
}
.lp-stakes__punch::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 54px; height: 2px; background: var(--gold-500);
}
.lp-stakes__punch strong { color: var(--gold-400); }

/* ---------- Qué hace ---------- */

.lp-h2 {
    text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 400; letter-spacing: -.01em; margin: 0 0 8px;
}
.lp-what {
    background: linear-gradient(180deg, var(--white) 0%, var(--ink-100) 100%);
    padding: 84px 24px 90px;
}
.lp-what .lp-h2 { margin-bottom: 44px; }
.lp-what__grid {
    display: grid; gap: 16px; max-width: 1120px; margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Fichas con cuerpo propio: los separadores finos funcionaban en escritorio,
   pero apilados en un móvil se leían como un solo texto corrido de 1.200px. */
.lp-block {
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: 14px;
    padding: 26px 24px 24px;
    display: flex; flex-direction: column;
}
.lp-block__n {
    display: block; font-size: .78rem; letter-spacing: .22em;
    color: var(--gold-600, #b8912f); margin-bottom: 12px; font-variant-numeric: tabular-nums;
}
.lp-block h3 { font-size: 1.22rem; margin: 0 0 12px; letter-spacing: -.01em; }
.lp-block p { font-size: .94rem; line-height: 1.62; color: var(--ink-700); margin: 0 0 14px; flex: 1; }
.lp-block__edge {
    font-size: .88rem !important; color: var(--ink-900) !important;
    font-weight: 550; flex: 0 !important;
    background: linear-gradient(90deg, rgba(216,178,92,.14), transparent);
    border-left: 3px solid var(--gold-500);
    padding: 10px 12px; border-radius: 0 8px 8px 0; margin: 0 !important;
}

/* ---------- Las tres puertas ---------- */

.lp-doors { background: var(--navy-900); color: var(--white); padding: 84px 24px 90px; }
.lp-doors .lp-h2 { color: var(--white); }
.lp-doors__sub {
    text-align: center; color: var(--ink-400); margin: 0 auto 46px;
    max-width: 46ch; font-size: .95rem;
}
.lp-doors__grid {
    display: grid; gap: 18px; max-width: 1120px; margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    align-items: stretch;
}

.lp-door {
    display: flex; flex-direction: column;
    background: var(--navy-800);
    border: 1px solid rgba(226,231,238,.10);
    border-radius: 16px; padding: 30px 26px 26px;
    color: var(--ink-300); text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.lp-door:hover {
    text-decoration: none; color: var(--ink-300);
    transform: translateY(-4px);
    border-color: rgba(216,178,92,.42);
    background: var(--navy-700);
}
/* Efecto de aislamiento: la puerta del Candidato es la que debe recordarse */
.lp-door--main { background: var(--navy-700); border-color: rgba(216,178,92,.34); }

.lp-door__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(216,178,92,.45); color: var(--gold-400);
    font-size: .82rem; font-weight: 600; margin-bottom: 16px;
}
.lp-door h3 { color: var(--white); font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
.lp-door__who {
    margin: 3px 0 18px; color: var(--ink-500);
    font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
}
.lp-door ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.lp-door li {
    position: relative; padding: 8px 0 8px 18px;
    font-size: .88rem; line-height: 1.5;
    border-bottom: 1px solid rgba(226,231,238,.07);
}
.lp-door li::before {
    content: ''; position: absolute; left: 0; top: 16px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500);
}
.lp-door li:last-child { border-bottom: 0; }
/* La línea que dice qué NO puedes hacer es la que construye confianza */
.lp-door li.no { color: var(--ink-500); }
.lp-door li.no::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-500); }

.lp-door__go {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gold-400); font-weight: 600; font-size: .95rem;
}
.lp-door__go span { transition: transform .16s ease; }
.lp-door:hover .lp-door__go span { transform: translateX(4px); }

.lp-doors__foot {
    text-align: center; color: var(--ink-500);
    font-size: .86rem; margin: 40px auto 0; max-width: 60ch;
}
.lp-doors__foot a { color: var(--gold-400); }

/* ---------- El límite ---------- */

.lp-rule { background: var(--white); padding: 74px 24px 86px; }
.lp-rule__in { max-width: 660px; margin: 0 auto; }
/* Centrado solo el titular: es corto. Un párrafo largo centrado queda dentado
   por los dos lados y se lee mal — sobre todo en una columna estrecha. */
.lp-rule h2 { font-size: 1.3rem; font-weight: 600; margin: 0 0 18px; text-align: center; }
.lp-rule p {
    font-size: 1rem; line-height: 1.66; color: var(--ink-700);
    margin: 0 0 16px; max-width: none;
    text-align: left;
    /* Sin partir palabras: con el texto alineado a la izquierda el borde
       irregular es normal y no molesta, mientras que tres guiones seguidos a
       mitad de palabra sí se notan. La partición solo hace falta cuando se
       justifica, y justificar una columna estrecha en castellano abre ríos
       de espacio entre palabras — que es peor que el borde dentado. */
}
.lp-rule__law {
    font-size: .92rem !important; color: var(--ink-500) !important;
    line-height: 1.62; margin: 0 !important; max-width: none;
    padding-top: 14px; border-top: 1px solid var(--ink-100);
}

/* ---------- Móvil ---------- */

/* ---------- Tableta ---------- */

@media (max-width: 980px) {
    .lp-hero { min-height: min(84vh, 800px); }
    .lp-what__grid, .lp-doors__grid { gap: 14px; }
}

/* ---------- Móvil ---------- */

@media (max-width: 720px) {
    .lp-hero { padding: 46px 20px 0; min-height: min(86vh, 720px); }
    .lp-hero__mark { width: 70px; height: 70px; margin-bottom: 10px; }
    .lp-hero__eyebrow { margin-bottom: 26px; letter-spacing: .2em; font-size: .68rem; }
    .lp-hero__claim { margin-bottom: 10px; }
    /* Sin esto, «Ganar es el objetivo» parte en cuatro líneas desiguales */
    .lp-hero__sub { margin-bottom: 28px; max-width: 24ch; margin-left: auto; margin-right: auto; }
    .lp-cta { width: 100%; justify-content: center; padding: 16px 24px; }

    /* Cuatro cifras en una fila de 390px son ilegibles: dos por dos */
    .lp-figures {
        grid-template-columns: repeat(2, 1fr); margin-top: 44px;
        border-radius: 14px 14px 0 0;
    }
    .lp-figures div { padding: 18px 10px 20px; }
    .lp-figures div:nth-child(2) { border-right: 0; }
    .lp-figures div:nth-child(-n+2) { border-bottom: 1px solid rgba(226,231,238,.12); }
    .lp-figures b { font-size: 1.5rem; }
    .lp-figures span { font-size: .68rem; }

    .lp-stakes  { padding: 58px 20px 62px; }
    .lp-what    { padding: 56px 20px 62px; }
    .lp-doors   { padding: 58px 20px 64px; }
    .lp-rule    { padding: 52px 20px 60px; }

    /* Medidas de línea: en 390px un párrafo suelto se va a 46 caracteres y
       cansa. Con 38 se lee de un vistazo. */
    /* Con max-width hay que poner los márgenes automáticos o la caja se
       queda pegada a la izquierda, aunque el texto vaya centrado dentro. */
    .lp-stakes__body, .lp-stakes__punch, .lp-doors__sub {
        max-width: 38ch; margin-left: auto !important; margin-right: auto !important;
    }
    /* El bloque legal se lee seguido, no de un vistazo: ancho completo,
       alineado a la izquierda y con cuerpo suficiente para no cansar. */
    .lp-rule p      { max-width: none; font-size: .98rem; line-height: 1.64; }
    .lp-rule__law   { font-size: .9rem !important; line-height: 1.6; }
    .lp-rule h2     { font-size: 1.2rem; }
    .lp-stakes__big { font-size: 1.42rem; }
    .lp-stakes__punch { padding-top: 22px; }

    .lp-what__grid { gap: 12px; }
    .lp-block { padding: 22px 20px 20px; border-radius: 12px; }
    .lp-block h3 { font-size: 1.14rem; }

    .lp-doors__grid { gap: 12px; }
    .lp-door { padding: 24px 20px 22px; border-radius: 14px; }
    .lp-door h3 { font-size: 1.24rem; }
    .lp-door li { padding: 7px 0 7px 17px; font-size: .86rem; }
    /* Objetivo táctil: la tarjeta entera es el enlace, pero el «Entrar»
       necesita altura propia para que el dedo lo encuentre */
    .lp-door__go { padding: 6px 0; }

    .lp-rule h2 { font-size: 1.12rem; }
    .lp-rule__law { font-size: .8rem !important; }
}

/* ---------- Móvil pequeño ---------- */

@media (max-width: 380px) {
    .lp-hero { padding: 38px 16px 0; }
    .lp-stakes, .lp-what, .lp-doors, .lp-rule { padding-left: 16px; padding-right: 16px; }
    .lp-figures b { font-size: 1.35rem; }
}

/* ---------- Teléfono en horizontal ---------- */

/* 88vh de alto en un móvil tumbado deja 40px para el titular. Aquí el hero
   se compacta y las cifras se van: no caben y no hacen falta. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .lp-hero { min-height: auto; padding: 34px 24px 30px; }
    .lp-hero__mark { width: 52px; height: 52px; }
    .lp-hero__word img { width: 190px; }
    .lp-hero__eyebrow { margin-bottom: 16px; }
    .lp-hero__claim { font-size: 1.9rem; }
    .lp-hero__sub { font-size: .95rem; margin-bottom: 20px; }
    .lp-cta { width: auto; }
    .lp-figures { display: none; }
}

/* ---------- Fondos fotográficos ---------- */

/* La imagen va detrás de todo con un velo encima. El velo no es estética: la
   luminancia media de estas fotos es 59, 79 y 116, y el texto blanco sobre
   116 no se lee. Cada velo está calibrado contra la foto que cubre. */
.lp-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lp-bg picture, .lp-bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 42%;
    display: block;
}
/* Un acercamiento lentísimo: da vida sin que se note que se mueve */
.lp-bg:not(.lp-bg--video) img { animation: lp-acercar 26s ease-out forwards; }
@keyframes lp-acercar { from { transform: scale(1.07); } to { transform: scale(1); } }

/* Velos recalibrados: los anteriores tapaban la imagen hasta hacerla
   irreconocible. Con estos el contraste del titular sigue en 13:1 —el mínimo
   exigible es 4,5— y el naranja del atardecer se ve. Medido, no estimado. */
.lp-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 68% 50% at 50% 42%, rgba(7,12,23,.46) 0%, rgba(7,12,23,.14) 62%, transparent 84%),
        linear-gradient(180deg, rgba(7,12,23,.52) 0%, rgba(7,12,23,.06) 34%, rgba(7,12,23,.34) 74%, rgba(7,12,23,.80) 100%);
}
.lp-bg--fuerte::after {
    background:
        radial-gradient(ellipse 76% 56% at 50% 44%, rgba(7,12,23,.60) 0%, rgba(7,12,23,.34) 60%, rgba(7,12,23,.24) 84%),
        linear-gradient(180deg, rgba(7,12,23,.62) 0%, rgba(7,12,23,.36) 42%, rgba(7,12,23,.70) 100%);
}
.lp-bg--suave::after {
    background: linear-gradient(180deg, rgba(7,12,23,.34) 0%, rgba(7,12,23,.04) 40%, rgba(7,12,23,.56) 100%);
}

/* Vídeo del hero. El cartel se ve mientras carga y si el vídeo no arranca. */
.lp-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 45%;
    display: block; background: #070c17;
}
.lp-bg--video img { display: none; }

/* La sección de las puertas ahora lleva foto: necesita posición y aislamiento */
.lp-doors { position: relative; isolation: isolate; }
.lp-doors .lp-h2, .lp-doors__sub, .lp-doors__grid, .lp-doors__foot { position: relative; z-index: 1; }
/* Sobre foto, las tarjetas necesitan cuerpo propio o se pierden */
.lp-door { background: rgba(17,26,46,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lp-door--main { background: rgba(31,47,82,.86); }
.lp-door:hover { background: rgba(23,36,64,.92); }


/* ---------- Pie de la landing ---------- */

/* Cierra en oscuro, como abrió. La atribución a Tachyon va en su propia línea
   y con la misma jerarquía que Intelligentia: son la misma casa, y quien
   compra una herramienta para una campaña quiere saber quién hay detrás. */
.lp-foot {
    background: var(--navy-900);
    border-top: 1px solid rgba(226,231,238,.10);
    padding: 52px 24px 44px;
    color: var(--ink-400);
}
.lp-foot__in {
    max-width: 1120px; margin: 0 auto;
    display: grid; gap: 30px; align-items: start;
    grid-template-columns: 1fr 1fr auto;
}
.lp-foot__brand { display: flex; align-items: center; gap: 13px; }
.lp-foot__brand img:first-child { flex: 0 0 auto; opacity: .95; }
.lp-foot__word { display: block; width: 132px; height: auto; margin-bottom: 4px; }
.lp-foot__brand span {
    display: block; font-size: .64rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-500);
}
.lp-foot__claim { font-size: .84rem; line-height: 1.9; margin: 0; color: var(--ink-500); }
.lp-foot__claim a { color: var(--ink-300); }
.lp-foot__claim a:hover { color: var(--gold-400); }

.lp-foot__legal { text-align: right; }
.lp-foot__org {
    margin: 0 0 6px; font-size: .82rem; letter-spacing: .04em; color: var(--ink-300);
}
.lp-foot__org strong { color: var(--gold-400); font-weight: 600; letter-spacing: .04em;
                       white-space: nowrap; }
.lp-foot__sep { color: var(--navy-500); margin: 0 7px; }
.lp-foot__copy { margin: 0; font-size: .72rem; line-height: 1.55; color: var(--ink-500); }

@media (max-width: 860px) {
    .lp-foot__in { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .lp-foot__brand { justify-content: center; }
    .lp-foot__legal { text-align: center; }
    .lp-foot__claim { max-width: 40ch; margin: 0 auto; }
}
@media (max-width: 720px) {
    .lp-foot { padding: 44px 20px 38px; }
}

/* En acceso, registro y recuperación el pie va discreto y centrado */
.lp-foot--mini { background: transparent; border-top: 0; padding: 26px 20px 34px; text-align: center; }
.lp-foot--mini .lp-foot__org { color: var(--ink-500); margin-bottom: 4px; }
.lp-foot--mini .lp-foot__org strong { color: var(--navy-600); }
.lp-foot--mini .lp-foot__sep { color: var(--ink-300); }


/* ---------- Zona segura del iPhone ---------- */

/* Con viewport-fit=cover el fondo llega hasta el borde físico y pasa por
   debajo de la muesca, que es lo que hace que la barra de estado se funda con
   la página. Pero el CONTENIDO hay que apartarlo o la hora se come el logo.
   env() vale 0 en cualquier pantalla sin muesca, así que no estorba. */

.lp-hero { padding-top: calc(80px + env(safe-area-inset-top)); }
/* Antes el fondo se metía bajo la muesca, y la barra de estado enseñaba el
   vídeo. Ahora empieza justo debajo: la franja de arriba es negra y limpia. */
.lp-bg { top: 0; }

/* ---------- Franja de estado del iPhone ---------- */

/* LO QUE DE VERDAD PINTA ESA FRANJA.
   Safari rellena el área de la barra de estado con el color de fondo del
   DOCUMENTO, no con lo que se ve en pantalla. Con html { background: var(--paper) }
   —un blanco roto— la franja salía clara aunque debajo hubiera un vídeo negro.
   Ni theme-color ni un elemento fijo lo corrigen: hay que teñir el documento. */
/* El mismo azul marino que la base del bloque «Lo único que te importa es
   ganar»: la barra de estado se funde con la sección en vez de meter un negro
   ajeno a la paleta. */
/* OJO: solo el <html>, NUNCA el <body>.
   El <html> es de donde Safari saca el color de la barra de estado y lo que
   se ve al estirar la página. El <body> es la interfaz, y la de POLARIS es
   clara: teñirlo de azul marino dejaba los botones sin fondo sobre oscuro y
   los rótulos ilegibles. */
/* LANDING: oscura de arriba abajo, documento y cuerpo en azul marino. */
html.doc-marino, html.doc-marino body { background: var(--navy-900); }

/* APLICACIÓN: el documento oscuro —de ahí saca Safari el color de la barra de
   estado y el rebote al estirar—, pero el CUERPO claro. La interfaz de POLARIS
   es clara: teñir el body dejaba los botones sin fondo sobre oscuro y los
   rótulos ilegibles, en escritorio y en móvil por igual. */
html.doc-app { background: var(--navy-900); }
html.doc-app body { background: var(--paper); }
/* Las pantallas de acceso siguen claras: su barra de estado también,
   y ahí iOS pone la hora en negro, que es lo correcto sobre claro. */

/* Negro sólido detrás de la hora, la cobertura y la batería. iOS elige el
   color de esos iconos según la luminancia de lo que tienen debajo: sobre
   negro los pone en blanco por sí solo, sin que se le pueda pedir.
   Se pinta como elemento, no con theme-color, porque con viewport-fit=cover
   Safari muestra la página bajo la barra y el color declarado no manda.
   env() vale 0 en pantallas sin muesca, así que no aparece ninguna franja. */
body::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: #000;
    z-index: 9999;
    pointer-events: none;
}

/* El pie no debe quedar tapado por la barra de gestos de abajo */
.lp-foot { padding-bottom: calc(44px + env(safe-area-inset-bottom)); }

/* En horizontal la muesca está a un lado: sin esto, el texto queda debajo */
.lp-hero__in, .lp-stakes, .lp-what, .lp-doors, .lp-rule, .lp-foot__in {
    padding-left:  max(var(--lp-lado, 24px), env(safe-area-inset-left));
    padding-right: max(var(--lp-lado, 24px), env(safe-area-inset-right));
}

/* La aplicación: su cabecera pegajosa también */
.sidebar { padding-top: env(safe-area-inset-top); }
.auth-wrap { padding-top: calc(24px + env(safe-area-inset-top)); }

@media (max-width: 720px) {
    .lp-hero { padding-top: calc(46px + env(safe-area-inset-top)); }
    .lp-hero__in, .lp-stakes, .lp-what, .lp-doors, .lp-rule, .lp-foot__in { --lp-lado: 20px; }
}
@media (max-width: 380px) {
    .lp-hero__in, .lp-stakes, .lp-what, .lp-doors, .lp-rule, .lp-foot__in { --lp-lado: 16px; }
}

/* ---------- Controles flotantes ---------- */

/* Los dos botones de la landing —parar el vídeo y volver arriba— son la misma
   pieza: círculo, sin borde, sin sombra y con el fondo casi transparente.
   Comparten clase para que no puedan divergir con el tiempo. */
.lp-flota {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(7,12,23,.10);
    color: var(--gold-400);
    cursor: pointer;
    transition: color .18s ease, background .18s ease, opacity .25s ease,
                transform .25s ease, visibility .25s;
}
.lp-flota:hover { color: var(--gold-300); background: rgba(7,12,23,.22); }
.lp-flota:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.lp-flota svg { display: block; }

/* Control del vídeo: dentro del hero */
.lp-video__btn {
    position: absolute; z-index: 2;
    right: max(20px, env(safe-area-inset-right));
    bottom: 20px;
}

/* Volver arriba: fijo, y solo cuando ya se ha bajado */
.lp-arriba {
    position: fixed; z-index: 60;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden; transform: translateY(10px);
}
.lp-arriba.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 720px) {
    .lp-flota { width: 48px; height: 48px; background: rgba(7,12,23,.12); }
    .lp-video__btn { right: max(16px, env(safe-area-inset-right)); bottom: 16px; }
    .lp-arriba {
        right: max(16px, env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
    }
}
@media (prefers-reduced-motion: reduce) {
    .lp-arriba { transition: opacity .01s, visibility .01s; transform: none; }
    .lp-arriba.is-visible { transform: none; }
}


/* ---------- Ficha desplegable de usuario ---------- */

/* Va dentro de la propia tabla, en una fila que se despliega. Así se corrige
   un correo o se repone una contraseña sin salir de la lista y sin abrir
   ventanas nuevas. Funciona sin JavaScript: es un <details>. */
.fila-ficha > td { padding: 0 !important; border-bottom: 1px solid var(--ink-200); }
.ficha-usuario summary {
    cursor: pointer; padding: 8px 6px; font-size: .8rem; color: var(--navy-600);
    list-style: none;
}
.ficha-usuario summary::-webkit-details-marker { display: none; }
.ficha-usuario summary::before { content: "▸ "; }
.ficha-usuario[open] summary::before { content: "▾ "; }
.ficha-usuario summary:hover { color: var(--navy-900); }
.ficha-usuario__in { padding: 6px 6px 18px; background: var(--ink-100); border-radius: var(--radius-sm); }

/* Barra de consumo. Verde mientras sobra, ámbar al 70%, roja al 90%: el color
   avisa antes de que el corte sorprenda a nadie. */
.barra { height: 8px; border-radius: 99px; background: var(--ink-200); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 99px; background: var(--good);
              transition: width .5s ease; }
.barra span[style*="width:7"], .barra span[style*="width:8"] { background: var(--mid); }
.barra span[style*="width:9"], .barra span[style*="width:100"] { background: var(--low); }

/* Formulario dentro de una celda: en línea y que envuelva si no cabe, o el
   desplegable, la fecha y el botón se apilan y descuadran la fila. */
.fila-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fila-form select, .fila-form input { width: auto; min-width: 0; }

.fila-activa { background: var(--ink-100); }
.fila-activa td:first-child { font-weight: 600; }

/* ---------- Aviso de contrato ---------- */

/* En ámbar avisa; en rojo explica que se está en solo lectura. Nunca corta el
   acceso: perder al cliente a mitad de campaña por una factura pendiente sale
   más caro que la factura. */
.aviso-contrato {
    padding: 12px 28px; font-size: .88rem; line-height: 1.5;
    border-bottom: 1px solid var(--ink-200);
}
.aviso-contrato--aviso   { background: #fdf6e3; color: #7a5c12; }
.aviso-contrato--vencido { background: #fdecec; color: #8a1c1c; }
@media (max-width: 720px) { .aviso-contrato { padding: 11px 20px; font-size: .82rem; } }

/* Manuales: la marca de «esto NO» y las listas numeradas de puesta en marcha */
.tick--low { background: var(--low); color: #fff; }
.pasos { padding-left: 20px; margin: 0; }
.pasos li { margin-bottom: 12px; line-height: 1.6; }
.pasos li:last-child { margin-bottom: 0; }

/* Vídeo de demostración ------------------------------------------------
   Sin bordes ni sombra: el vídeo ya trae su propio marco dorado quemado en
   cada fotograma, y superponerle otro deja dos marcos concéntricos. */
.demo-video {
    display: block;
    width: 100%;
    /* max-width explícito: un <video> es un elemento reemplazado y su anchura
       mínima es la intrínseca del fichero —1280 px—, aunque se le ponga
       width:100%. Sin esto, en cuanto el móvil carga los metadatos, el visor
       empuja la página a lo ancho. */
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background: var(--navy-900, #0b1220);
}
/* En el teléfono se sirve el 4:5, que ocupa casi el doble de pantalla y trae
   el titular en grande. La clase la pone app.js al elegir el fichero, para
   que el hueco no se reserve con la proporción equivocada. */
.demo-video.is-vertical { aspect-ratio: 4 / 5; }

@media (max-width: 620px) {
    /* A sangre: el visor gana los 16 px de padding de la tarjeta a cada lado.
       Son 32 px más de vídeo, que en una pantalla de 390 es un 9 % más. */
    .demo-video { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); max-width: none; border-radius: 0; }
}