/* ═══════════════════════════════════════════════════════════════════════
   PÚBLICO — la cara de afuera: portada, inicio de sesión, registro y las
   demás pantallas de acceso.

   Va en oscuro por una razón concreta: son pantallas que se ven una vez y
   por poco tiempo, casi siempre antes de decidir si el producto vale la
   pena. Ahí la primera impresión pesa más que la comodidad de la vista, al
   revés que en el panel. La tinta deja que el haz de luz —lo único
   realmente brillante de la página— cargue con toda la atención.

   Necesita nucleo.css cargado antes, y <html class="mundo-oscuro">.
   ═══════════════════════════════════════════════════════════════════════ */

body {
    background: var(--ink-900);
    color: var(--text-1);
    min-height: 100vh;
}

.contenedor {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══ BARRA SUPERIOR ════════════════════════════════════════════════════ */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Arranca transparente sobre el haz y solo se opaca al bajar (la clase
       la pone la propia portada). Una barra sólida desde el primer píxel
       parte el degradado del encabezado en dos. */
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

.nav.fija {
    background: rgba(5,7,14,.78);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom-color: var(--border);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 68px;
}

.marca { display: flex; align-items: center; gap: 10px; }

.marca-icono {
    width: 32px; height: 32px;
    border-radius: 9px;
    /* El cian puro deja el ícono blanco en 2:1. Este degradado lo sube a
       3.7:1, que es el mínimo para un elemento gráfico. */
    background: linear-gradient(140deg, #1a6fd4, #0a8ec4);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: .85rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.marca-texto {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #fff;
}

.nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.nav-links .enlace {
    color: var(--text-2);
    font-size: .9rem;
    font-weight: 450;
    padding: 8px 13px;
    border-radius: var(--radius-sm);
    transition: color .16s, background .16s;
}
.nav-links .enlace:hover { color: #fff; background: rgba(255,255,255,.06); }

/* En pantalla chica se esconden los enlaces de sección, nunca los botones
   de acceso: son la razón de ser de esta página. */
@media (max-width: 760px) { .solo-escritorio { display: none !important; } }

/* ═══ ENCABEZADO ════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    overflow: hidden;
    /* Sube por debajo de la barra para que el haz pase detrás de ella. */
    margin-top: calc(-1 * 68px);
    padding: 168px 0 110px;
}

/* El haz: nace fuera del borde izquierdo y se abre hacia la derecha.
   Se desvanece abajo para que no choque con el borde de la sección. */
.hero .estelas {
    -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
            mask-image: linear-gradient(#000 62%, transparent 100%);
}

.hero-inner { position: relative; z-index: 1; max-width: 820px; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    margin-bottom: 26px;
    border-radius: 100px;
    border: 1px solid var(--border-fuerte);
    background: rgba(255,255,255,.04);
    color: var(--text-2);
    font-size: .8rem;
    font-weight: 450;
    transition: border-color .2s, color .2s;
}
.pill i { color: var(--cyan); font-size: .75rem; }
a.pill:hover { border-color: var(--accent); color: #fff; }

.hero h1 {
    font-size: clamp(2.3rem, 5.6vw, 4.1rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.045em;
    color: #fff;
    margin-bottom: 22px;
}

/* El énfasis sale del contraste, no de un degradado sobre el texto: la
   promesa queda en blanco pleno y el resto un paso atrás. */
.hero h1 .tenue { color: #8ea6c2; }

.hero .bajada {
    font-size: clamp(1rem, 1.9vw, 1.15rem);
    color: var(--text-2);
    max-width: 58ch;
    margin-bottom: 34px;
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }

.hero-notas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    color: var(--text-3);
    font-size: .86rem;
}
.hero-notas span { display: inline-flex; align-items: center; gap: 7px; }
.hero-notas i { color: var(--success); font-size: .75rem; }

/* ═══ SECCIONES ═════════════════════════════════════════════════════════ */
.seccion { position: relative; padding: 96px 0; }
.seccion.alterna { background: var(--surface); border-block: 1px solid var(--border); }

.seccion-titulo { max-width: 640px; margin-bottom: 52px; }

.seccion-titulo h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 500;
    letter-spacing: -.04em;
    color: #fff;
    margin-bottom: 12px;
}

.seccion-titulo p { color: var(--text-2); font-size: 1.02rem; max-width: 56ch; }

.seccion-titulo.centrado { margin-inline: auto; text-align: center; }
.seccion-titulo.centrado p { margin-inline: auto; }

/* ═══ REJILLA DE FUNCIONES ══════════════════════════════════════════════
   Seis capacidades separadas por un pelo de luz, no seis tarjetas iguales
   flotando. La retícula es la estructura: se lee como una tabla de
   contenidos del producto y no como un montón de cajas. */
.rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.funcion {
    padding: 34px 32px 38px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background .25s ease;
}

.funcion:hover { background: rgba(255,255,255,.025); }

/* El ícono encabeza la línea del título en vez de ir en su propio azulejo
   redondeado arriba: ese azulejo es la silueta exacta de la tarjeta de
   función de cualquier plantilla, y además metía una caja dentro de una
   celda que ya era una caja. Así la celda se lee como una entrada de
   índice, que es lo que es. */
.funcion h3 {
    display: flex;
    align-items: baseline;
    gap: 11px;
    font-size: 1rem;
    font-weight: 550;
    color: #fff;
    margin-bottom: 9px;
    letter-spacing: -.02em;
}

.funcion h3 i {
    color: var(--f-color, var(--accent));
    font-size: .92rem;
    width: 17px;
    flex-shrink: 0;
    text-align: center;
}

.funcion p { color: var(--text-2); font-size: .9rem; padding-left: 28px; }

@media (max-width: 900px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .rejilla { grid-template-columns: 1fr; } }

/* ═══ PASOS ═════════════════════════════════════════════════════════════
   Aquí la numeración sí carga información: es el orden en que ocurren las
   cosas. El hilo que los une lo dice sin palabras. */
.pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
}

.paso { position: relative; padding-top: 30px; }

/* El hilo que atraviesa los pasos, cortado en el último. */
.paso::before {
    content: '';
    position: absolute;
    top: 13px; left: 13px; right: -28px;
    height: 1px;
    background: linear-gradient(90deg, var(--border-fuerte), var(--border));
}
.paso:last-child::before { display: none; }

.paso-num {
    position: absolute;
    top: 0; left: 0;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--ink-900);
    border: 1px solid var(--border-fuerte);
    color: var(--cyan);
    font-family: var(--fuente-dato);
    font-size: .78rem;
    font-weight: 500;
    display: flex; align-items: center; justify-content: center;
}

.paso h3 {
    font-size: .98rem;
    font-weight: 550;
    color: #fff;
    margin: 18px 0 7px;
    letter-spacing: -.02em;
}

.paso p { color: var(--text-2); font-size: .89rem; }

@media (max-width: 900px) {
    .pasos { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
    .paso:nth-child(2n)::before { display: none; }
}
@media (max-width: 520px) {
    .pasos { grid-template-columns: 1fr; gap: 26px; }
    .paso::before { display: none; }
}

/* ═══ PLANES ════════════════════════════════════════════════════════════ */
.planes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

/* El plan recomendado no grita con un color distinto: se ilumina el borde,
   como si le diera la luz del haz. */
.plan.destacado {
    border-color: rgba(90,171,255,.45);
    background: linear-gradient(180deg, rgba(90,171,255,.07), transparent 42%), var(--surface);
}

.plan-cinta {
    position: absolute;
    top: 0; right: 24px;
    transform: translateY(-50%);
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--ink-700);
    border: 1px solid rgba(90,171,255,.45);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
}

.plan h3 {
    font-size: .95rem;
    font-weight: 550;
    color: var(--text-2);
    letter-spacing: -.01em;
}

.plan .precio {
    font-family: var(--fuente-dato);
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: -.05em;
    color: #fff;
    margin: 14px 0 4px;
    line-height: 1;
}
.plan .precio span {
    font-family: var(--fuente);
    font-size: .88rem;
    font-weight: 400;
    color: var(--text-3);
    letter-spacing: 0;
}

.plan .plan-sub {
    color: var(--text-3);
    font-size: .86rem;
    margin-bottom: 24px;
    min-height: 2.6em;
}

.plan ul {
    list-style: none;
    margin-bottom: 26px;
    flex: 1;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.plan li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    color: var(--text-2);
    padding: 6px 0;
}
.plan li i { color: var(--success); font-size: .72rem; margin-top: .45em; flex-shrink: 0; }
.plan li.apagado { color: var(--text-3); }
.plan li.apagado i { color: var(--text-3); }

.plan .btn { width: 100%; }

/* ═══ CIERRE ════════════════════════════════════════════════════════════ */
.cierre {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 110px 0;
    border-top: 1px solid var(--border);
}

.cierre .estelas {
    transform: scaleX(-1);
    opacity: .85;
    -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
            mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
}

.cierre-inner { position: relative; z-index: 1; }

.cierre h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: -.045em;
    color: #fff;
    margin-bottom: 14px;
}

.cierre p {
    color: var(--text-2);
    max-width: 46ch;
    margin: 0 auto 32px;
}

/* ═══ PIE ═══════════════════════════════════════════════════════════════ */
.pie {
    border-top: 1px solid var(--border);
    padding: 30px 0;
    font-size: .85rem;
    color: var(--text-3);
}

.pie-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pie a { color: var(--text-3); transition: color .16s; }
.pie a:hover { color: #fff; }
.pie-derecha { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   PANTALLAS DE ACCESO
   Login, registro, recuperar contraseña, verificar correo y cambio
   obligatorio: las seis comparten marcado, así que comparten estilo.
   ═══════════════════════════════════════════════════════════════════════ */
.wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

/* El haz entra por la izquierda y pasa por detrás de la tarjeta. Fijo al
   viewport: si el formulario crece (registro), la luz no se arrastra con
   el desplazamiento. */
body > .estelas {
    position: fixed;
    opacity: .75;
    -webkit-mask-image: radial-gradient(90% 70% at 40% 50%, #000, transparent);
            mask-image: radial-gradient(90% 70% at 40% 50%, #000, transparent);
}

.wrap .card {
    width: 100%;
    max-width: 424px;
    background: rgba(9,13,24,.78);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: subir .55s var(--salida) both;
}

/* Filo de luz en el canto superior de la tarjeta: un pelo, no una banda. */
.card-top {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan) 22%, var(--accent) 60%, transparent);
    opacity: .85;
}

.card-header {
    padding: 34px 34px 22px;
    text-align: center;
}

.logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    margin-bottom: 18px;
    border-radius: 13px;
    border: 1px solid var(--border-fuerte);
    background: rgba(255,255,255,.04);
    color: var(--cyan);
    font-size: 1.1rem;
}

.logo-title {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -.035em;
    color: #fff;
    margin-bottom: 6px;
}

.logo-sub {
    font-size: .88rem;
    font-weight: 400;
    color: var(--text-3);
    letter-spacing: 0;
    text-transform: none;
}

.card-body { padding: 8px 34px 30px; }

.wrap .field input,
.wrap .input {
    background: rgba(255,255,255,.035);
    border-color: var(--border-fuerte);
}
.wrap .field input:hover { border-color: rgba(255,255,255,.28); }
.wrap .field input:focus {
    background: rgba(255,255,255,.06);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(90,171,255,.16);
}

.btn-login, .btn-guardar {
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    border: none;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink-900);
    font-family: var(--fuente);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: box-shadow .18s, transform .12s, opacity .18s;
}
.btn-login:hover, .btn-guardar:hover { box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.btn-login:active, .btn-guardar:active { transform: scale(.985); }
.btn-login:disabled, .btn-guardar:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-login .spinner, .btn-guardar .spinner {
    border-color: rgba(5,7,14,.25);
    border-top-color: var(--ink-900);
}

.btn-secundario, .link-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-fuerte);
    background: transparent;
    color: var(--text-2);
    font-family: var(--fuente);
    font-size: .88rem;
    font-weight: 450;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
}
.btn-secundario:hover, .link-boton:hover {
    border-color: rgba(255,255,255,.3);
    color: #fff;
    background: rgba(255,255,255,.04);
}
.btn-secundario:disabled { opacity: .5; cursor: not-allowed; }

.caps-warn {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: .78rem;
    color: var(--warning);
}
.caps-warn.show { display: flex; }

.enlace-sutil {
    color: var(--text-3);
    font-size: .82rem;
    transition: color .16s;
}
.enlace-sutil:hover { color: var(--accent); }

.card-footer {
    padding: 18px 34px 24px;
    text-align: center;
    font-size: .86rem;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}
.card-footer a { color: #fff; font-weight: 500; }
.card-footer a:hover { color: var(--accent); }

/* El temblor del formulario cuando las credenciales no son correctas.
   Cuatro golpes cortos: suficiente para que se note, no tanto como para
   parecer una falla del navegador. */
@keyframes temblar {
    0%, 100% { transform: translateX(0); }
    22%      { transform: translateX(-6px); }
    44%      { transform: translateX(6px); }
    66%      { transform: translateX(-3px); }
    88%      { transform: translateX(3px); }
}

@media (max-width: 480px) {
    .card-header { padding: 28px 22px 18px; }
    .card-body   { padding: 8px 22px 26px; }
    .card-footer { padding: 16px 22px 20px; }
}

/* ── Campo de código ──────────────────────────────────────────────────────
   El código que llega por correo (verificar) y el token de recuperación
   (restablecer). Va en mono porque lo que se teclea aquí se está copiando
   carácter por carácter desde otra ventana: con ancho fijo se distingue el
   0 del O y el 1 del l, que es exactamente donde se equivoca la gente. */
#codigo {
    font-family: var(--fuente-dato);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
}

/* El de seis dígitos, además, se muestra grande y separado. El text-indent
   compensa el espacio que letter-spacing agrega DESPUÉS del último carácter
   y que si no deja el texto visiblemente corrido a la izquierda. */
.campo-codigo {
    font-size: 1.5rem;
    letter-spacing: 10px;
    text-indent: 10px;
    text-align: center;
    padding: 15px 14px;
}
.campo-codigo::placeholder { letter-spacing: 10px; }

.logo-sub strong { color: var(--text-2); font-weight: 550; }

.field small {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--text-3);
}