/* =====================================================================
   Archivo: public/assets/css/style.css
   Hoja de estilos del SITIO PÚBLICO de ZasTalent (landing).
   Se carga en welcome.blade.php (página de inicio), planes.blade.php
   (precios de los planes), terminos-publico.blade.php y también en
   empleado/dashboard.blade.php.
   Secciones: variables y reset, barra de navegación (con menú
   deslizante en celular), portada (hero), banda del salario mínimo
   (SMLMV), datos curiosos, pestañas con maquetas de los módulos,
   carrusel de módulos, legislación, pie de página, animación fade-in,
   estilos de login antiguos, tarjetas de planes y sección demo.
   ===================================================================== */

/* ── Variables globales ─────────────────────────────────── */
:root {
    --azul:    #1e3a5f;
    --azul2:   #2563a8;
    --verde:   #059669;
    --gris:    #f1f5f9;
    --borde:   #e2e8f0;
    --texto:   #1e293b;
    --suave:   #64748b;
    --error:   #dc2626;
}

/* Reset básico: quita márgenes por defecto y usa border-box en todo. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #fff; color: var(--texto); }

/* ── NAVBAR ─────────────────────────────────────────────── */
/* Barra superior fija (sticky) del landing: marca, enlaces y botón Ingresar. */
.navbar-rrhh {
    background: var(--azul);
    padding: 0 2rem;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
/* Marca: logo + texto "Zas / Talent" en dos líneas de colores. */
.brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.logo-navbar{
    height: 38px;
    width: auto;
    display: block;
    object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-line1 { color: #fff; font-size: 1.15rem; font-weight: 600; letter-spacing: .5px; }
.brand-line2 { color: #60a5fa; font-size: 1.15rem; font-weight: 800; }
/* Enlaces del menú; .activo resalta la sección actual con una línea
   azul debajo (la clase la pone el JS al hacer scroll o clic). */
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a {
    color: #94a3b8;
    font-size: .83rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.nav-links a:hover { color: #fff; }
/* Opción activa: la sección donde está el usuario (o la que oprimió) */
.nav-links a:not(.btn-ingresar) { position: relative; }
.nav-links a.activo { color: #fff; font-weight: 600; }
.nav-links a.activo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: #60a5fa;
}
/* Que el menú fijo no tape el título de la sección al saltar a ella */
#modulos, #legislacion, #contacto { scroll-margin-top: 62px; }
/* Botón "Ingresar" (lleva al login) y enlace "Volver". */
.btn-ingresar {
    background: var(--azul2);
    color: #fff !important;
    padding: .4rem 1.1rem;
    border-radius: 8px;
    font-weight: 600 !important;
    transition: background .2s !important;
}
.btn-ingresar:hover { background: #1d4ed8 !important; }

/* Botón hamburguesa (solo visible en celular) y cabecera del panel
   móvil (oculta en escritorio). */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    padding: .4rem;
    cursor: pointer;
}

.nav-links-header { display: none; }

/* Fondo oscuro que aparece detrás del menú móvil abierto (.open). */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    /* Por encima del banner de cookies (z-index: 2000) y su panel
       (2100): el panel deslizante ocupa toda la altura y no debe
       quedar tapado ni bloqueado por el banner. */
    z-index: 2450;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }
.nav-overlay[hidden] { display: none; }

/* En pantallas <= 860px los enlaces se convierten en un panel lateral
   que entra desde la derecha cuando el JS le pone la clase .open. */
@media (max-width: 860px) {
    /* El nav es sticky con z-index, así que crea su propio contexto
       de apilamiento: el panel .nav-links (que vive dentro) nunca
       puede quedar por encima de algo que tenga más z-index que el
       nav. Se sube el nav completo por encima del overlay (2450) y
       del banner de cookies (2000/2100) para que el panel se vea y
       reciba los toques en vez de quedar tapado por el overlay. */
    .navbar-rrhh { z-index: 2460; }
    .nav-toggle { display: block; }
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(300px, 82vw);
        z-index: 2460;
        background: var(--azul);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,.35);
    }
    .nav-links.open { transform: translateX(0); }
    .nav-links-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .nav-links-header span {
        color: #fff;
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 1.05rem;
    }
    .nav-close {
        background: none;
        border: none;
        color: #fff;
        font-size: 1.2rem;
        padding: .25rem;
        cursor: pointer;
    }
    .nav-links a {
        padding: .9rem 1.5rem;
        border-top: 1px solid rgba(255,255,255,.08);
        color: #fff;
    }
    .nav-links a.activo {
        background: rgba(96,165,250,.15);
        box-shadow: inset 3px 0 0 #60a5fa;
    }
    .nav-links a.activo::after { display: none; }
    .nav-links .btn-ingresar {
        margin: .75rem 1.25rem;
        justify-content: center;
    }
}

/* ── HERO — foto de fondo completa con texto superpuesto ── */
/* Portada a casi toda la pantalla: foto de fondo (hero-team.png),
   capa de degradado para que se lea el texto, mancha decorativa
   (blob), onda inferior (SVG), etiqueta, título, divisor, texto y
   botones (principal y de borde). */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: #0f2544;
}
.hero-photo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563a8 55%, #60a5fa 100%);
}
.hero-photo-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/hero-team.png') center/cover no-repeat;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        #0f2544 0%,
        rgba(15,37,68,.94) 28%,
        rgba(15,37,68,.72) 46%,
        rgba(15,37,68,.32) 65%,
        rgba(15,37,68,.05) 85%);
}
.hero-blob {
    position: absolute;
    z-index: 1;
    left: -80px;
    bottom: -100px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at 35% 35%, rgba(37,99,168,.55), rgba(37,99,168,0) 70%);
    border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%;
    pointer-events: none;
}
.hero-wave {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 60px;
    display: block;
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 620px;
    text-align: left;
    padding: 9rem clamp(1.5rem, 5vw, 3rem) 7rem clamp(1.5rem, 6vw, 4.5rem);
}
.hero-badge {
    display: inline-block;
    background: rgba(96,165,250,.15);
    border: 1px solid rgba(96,165,250,.3);
    color: #93c5fd;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: .3rem 1rem;
    border-radius: 20px;
    margin-bottom: 1.2rem;
}
.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}
.hero h1 span { color: #60a5fa; }
.hero-divider {
    width: 60px;
    height: 4px;
    margin: 1.3rem 0 1.4rem;
    border-radius: 2px;
    background: linear-gradient(90deg, #60a5fa, #2563a8);
}
.hero p {
    color: #bfdbfe;
    font-size: 1rem;
    max-width: 460px;
    margin: 0 0 2.2rem;
    line-height: 1.7;
}
.hero-btns {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}
.btn-hero-primary {
    background: var(--azul2);
    color: #fff !important;
    font-weight: 700;
    padding: .75rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .92rem;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.btn-hero-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.btn-hero-outline {
    background: transparent;
    color: #fff !important;
    font-weight: 600;
    padding: .72rem 1.8rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .92rem;
    border: 2px solid rgba(255,255,255,.35);
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.btn-hero-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* En celular la portada se centra y el degradado va de arriba a abajo. */
@media (max-width: 700px) {
    .hero { min-height: 76vh; align-items: flex-end; }
    .hero-overlay {
        background: linear-gradient(to bottom, rgba(15,37,68,.35) 0%, rgba(15,37,68,.75) 55%, rgba(15,37,68,.95) 100%),
                    linear-gradient(to right, rgba(15,37,68,.55), rgba(15,37,68,.55));
    }
    .hero-content {
        max-width: 100%;
        text-align: center;
        padding: 6rem 1.5rem 5.5rem;
    }
    .hero-badge { }
    .hero-divider { margin-left: auto; margin-right: auto; }
    .hero p { margin-left: auto; margin-right: auto; }
    .hero-btns { justify-content: center; }
}

/* ── PESTAÑAS INTERACTIVAS ──────────────────────────────── */
/* Pestañas: botones tipo "píldora" (.tab-btn; .active = seleccionada)
   y paneles (.tab-panel; solo el .active se muestra). Cada panel tiene
   texto con lista de chequeo a la izquierda y una maqueta a la derecha.
   El cambio de pestaña lo hace el JS del landing. */
.tabs-section { padding: 4.5rem 0 1rem; }

.tabs-nav-wrap {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2.5rem;
}
.tabs-nav {
    display: inline-flex;
    flex-shrink: 0;
    gap: .3rem;
    background: var(--gris);
    border-radius: 999px;
    padding: .35rem;
}
.tab-btn {
    border: none;
    background: transparent;
    color: var(--suave);
    font-size: .85rem;
    font-weight: 600;
    padding: .65rem 1.4rem;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.tab-btn:hover { color: var(--azul); }
.tab-btn.active { background: var(--azul); color: #fff; }

.tab-panel { display: none; }
.tab-panel.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding-bottom: 3.5rem;
}

.tab-panel-text h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.85rem;
    color: var(--azul);
    line-height: 1.25;
    margin-bottom: 1rem;
}
.tab-panel-text > p { color: var(--suave); font-size: .92rem; line-height: 1.65; margin-bottom: 1.5rem; }

.tab-check-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.tab-check-list li { display: flex; align-items: flex-start; gap: .7rem; }
.tab-check-list li i { color: var(--verde); font-size: 1.05rem; margin-top: .15rem; flex-shrink: 0; }
.tab-check-list li strong { display: block; font-size: .88rem; color: var(--texto); }
.tab-check-list li span { display: block; font-size: .8rem; color: var(--suave); }

.tab-link { color: var(--azul2); font-weight: 600; font-size: .88rem; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.tab-link:hover { text-decoration: underline; }

.tab-panel-visual { display: flex; justify-content: center; }
/* Tarjeta blanca que simula una pantalla del sistema (maqueta). */
.mock-card {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
    padding: 1.5rem;
    width: 100%;
    max-width: 380px;
}

/* Mockup: gestión de empleados */
.mock-emp-row { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--borde); }
.mock-emp-row:last-child { border-bottom: none; }
.mock-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: #dbeafe; color: var(--azul2);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.mock-emp-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mock-emp-info strong { font-size: .85rem; color: var(--texto); }
.mock-emp-info span { font-size: .75rem; color: var(--suave); }
.mock-badge-green { background: #d1fae5; color: #047857; font-size: .7rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; white-space: nowrap; }
.mock-badge-yellow { background: #fef3c7; color: #b45309; font-size: .7rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; white-space: nowrap; }

/* Mockup: nómina */
.mock-payslip-header { font-size: .78rem; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 1rem; }
.mock-payslip-row { display: flex; justify-content: space-between; font-size: .85rem; padding: .45rem 0; border-bottom: 1px dashed var(--borde); color: var(--texto); }
.mock-payslip-row.deduccion strong { color: var(--error); }
.mock-payslip-total { display: flex; justify-content: space-between; margin-top: .8rem; padding-top: .8rem; border-top: 2px solid var(--azul); font-size: .95rem; font-weight: 700; color: var(--azul); }

/* Mockup: permisos */
.mock-request-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.mock-request-row:last-child { border-bottom: none; }
.mock-request-row strong { display: block; font-size: .85rem; color: var(--texto); }
.mock-request-row span { display: block; font-size: .75rem; color: var(--suave); }

/* Mockup: prestaciones sociales */
.mock-progress-label { display: flex; justify-content: space-between; font-size: .82rem; color: var(--texto); margin-bottom: .5rem; font-weight: 600; }
.mock-progress-track { background: var(--gris); border-radius: 999px; height: 10px; overflow: hidden; }
.mock-progress-fill { height: 100%; background: var(--azul2); border-radius: 999px; }

/* Mockup: reportes y analítica */
.mock-chart-title { font-size: .8rem; font-weight: 700; color: var(--azul); margin-bottom: 1.2rem; }
.mock-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; height: 140px; }
.mock-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.mock-bar { width: 100%; max-width: 34px; background: linear-gradient(180deg, var(--azul2), var(--azul)); border-radius: 6px 6px 0 0; }
.mock-bar-col span { font-size: .68rem; color: var(--suave); margin-top: .5rem; }

/* En celular el panel de pestañas pasa a una sola columna con la
   maqueta arriba. */
@media (max-width: 767px) {
    .tab-panel.active { grid-template-columns: 1fr; gap: 2rem; }
    .tab-panel-visual { order: -1; }
    .tab-panel-text h3 { font-size: 1.5rem; }
}

/* ── MÓDULOS ────────────────────────────────────────────── */
/* Títulos y subtítulos generales de las secciones. */
.section-pad { padding: 5rem 0; }
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--azul);
    margin-bottom: .5rem;
}
.section-sub { color: var(--suave); font-size: .9rem; margin-bottom: 3rem; }

/* Carrusel infinito de módulos: la pista (.modulos-track) tiene los
   paneles duplicados y se desplaza -50% en bucle (animación marquee);
   se pausa al pasar el mouse. Cada .modulo-panel recibe sus colores
   por variables CSS (--panel-bg, --panel-fg, --panel-circle) desde
   el HTML. */
.modulos-carrusel-section {
    background: #eef2f7;
    padding: 6rem 0 6.5rem;
}
.modulos-carrusel-section .container { margin-bottom: 1rem; }

.modulos-carrusel {
    overflow: hidden;
    padding: .5rem 0 2.5rem;
}
.modulos-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: modulos-marquee 48s linear infinite;
}
.modulos-carrusel:hover .modulos-track {
    animation-play-state: paused;
}
@keyframes modulos-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.modulo-panel {
    flex: 0 0 400px;
    width: 400px;
    height: 350px;
    border-radius: 24px;
    background: var(--panel-bg, var(--azul));
    padding: 2rem 2.25rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modulo-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--panel-circle, rgba(255,255,255,.16));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--panel-fg, #fff);
    margin-bottom: 1.25rem;
}
.modulo-panel h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--panel-fg, #fff);
    margin-bottom: .8rem;
}
.modulo-panel p {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--panel-fg, #fff);
    opacity: .82;
    margin: 0;
}

@media (max-width: 480px) {
    .modulo-panel { flex-basis: 320px; width: 320px; height: 330px; }
}

/* ── LEGISLACIÓN ────────────────────────────────────────── */
/* Sección azul con tarjetas de las leyes laborales colombianas que el
   sistema tiene en cuenta (CST, seguridad social, etc.). */
.ley-section { background: var(--azul); padding: 4rem 0; }
.ley-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 1.4rem;
    height: 100%;
    transition: background .2s;
}
.ley-card:hover { background: rgba(255,255,255,.1); }
.ley-card .icon { font-size: 1.8rem; margin-bottom: .7rem; display: block; }
.ley-card h6 {
    color: #93c5fd;
    font-size: .77rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: .3rem;
}
.ley-card p { color: #94a3b8; font-size: .82rem; line-height: 1.55; margin: 0; }

/* ── FOOTER ─────────────────────────────────────────────── */
/* Pie de página: 4 columnas (marca, enlaces), redes sociales y
   copyright; en tablet 2 columnas y en celular 1. */
.footer-nuevo {
    background: #0b2545;
    color: #cbd5e1;
    padding: 3.5rem 1rem 1.5rem;
}

.footer-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-col h6 {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #fff;
    margin-bottom: 1rem;
}
.footer-col a {
    display: block;
    font-size: .85rem;
    color: #cbd5e1;
    text-decoration: none;
    margin-bottom: .65rem;
    transition: color .2s;
}
.footer-col a:hover { color: #fff; }

.footer-logo {
    height: 42px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 1rem;
}
.footer-marca p {
    font-size: .85rem;
    line-height: 1.6;
    color: #94a3b8;
    max-width: 300px;
    margin-bottom: 1.2rem;
}

.footer-redes { display: flex; gap: .6rem; }
.footer-redes a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: .9rem;
    transition: background .2s, transform .2s;
}
.footer-redes a:hover {
    background: var(--azul2);
    color: #fff;
    transform: translateY(-2px);
}

.footer-copy {
    padding-top: 1.5rem;
    text-align: center;
    font-size: .8rem;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .footer-marca { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .footer-cols { grid-template-columns: 1fr; }
}

/* ── ANIMACIÓN FADE-IN ──────────────────────────────────── */
/* Elementos que aparecen al hacer scroll: el JS (IntersectionObserver)
   les agrega .visible cuando entran en pantalla. */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── LOGIN ──────────────────────────────────────────────── */
/* Estilos de login que usan esta hoja (tarjeta, inputs con icono,
   ojo de contraseña, errores de validación y botón).
   NOTA: las pantallas de auth actuales usan login.css, que define
   las mismas clases; esto queda como versión anterior. */
body.login-body {
    background: linear-gradient(135deg, #0f2340 0%, #1e3a5f 50%, #2563a8 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.login-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.login-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem 2.2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.card-icon {
    width: 54px;
    height: 54px;
    background: #dbeafe;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--azul2);
    margin-bottom: 1.2rem;
}
.login-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.65rem;
    color: var(--azul);
    margin-bottom: .25rem;
}
.subtitulo { font-size: .82rem; color: #64748b; margin-bottom: 1.8rem; }
.form-label { font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .3rem; display: block; }
.input-wrap { position: relative; margin-bottom: .3rem; }
.input-wrap .ic {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .82rem;
    pointer-events: none;
}
.input-wrap .toggle {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: .82rem;
    padding: 0;
}
.input-wrap .toggle:hover { color: var(--azul2); }
.form-control {
    width: 100%;
    padding: .6rem .85rem .6rem 2.4rem;
    border: 1.5px solid var(--borde);
    border-radius: 9px;
    font-size: .88rem;
    font-family: 'Inter', sans-serif;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.form-control:focus { border-color: var(--azul2); box-shadow: 0 0 0 3px rgba(37,99,168,.1); }
.form-control.error-field { 
    border-color: var(--error); 
    background-color: #fff5f5;
}
.field-error { 
    font-size: .78rem; 
    color: var(--error); 
    margin-top: .25rem;
    margin-bottom: .5rem; 
    display: none; 
    font-weight: 500;
}
.field-error.show { display: block; }
.alert-error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: .7rem 1rem;
    font-size: .82rem;
    color: var(--error);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.2rem;
}
.btn-login {
    width: 100%;
    padding: .68rem;
    background: var(--azul2);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all .2s;
    margin-top: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-login:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,168,.35); }
.btn-login:disabled { background: #93c5fd; cursor: not-allowed; transform: none; }

/* ── PLANES ─────────────────────────────────────────────── */
/* Página planes.blade.php: encabezado azul y sección gris de planes. */
.planes-hero {
    background: var(--azul);
    padding: 5rem 0 3.5rem;
    text-align: center;
    color: #fff;
}
.planes-hero .section-title { color: #fff; }
.planes-hero .section-sub { color: #cbd5e1; margin-bottom: 0; }

.planes-section { background: var(--gris); padding: 4.5rem 0 5.5rem; }

/* Tarjeta de cada plan. .destacado = plan recomendado (fondo azul,
   un poco más grande). Contiene: etiqueta (.plan-badge), nombre,
   descripción, precio (y precio anterior con ahorro), equivalente
   mensual, límite de empleados, lista de características (con títulos
   y las no incluidas tachadas) y botón de compra (.plan-cta). */
.plan-card {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 18px;
    padding: 2.2rem 1.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .25s, box-shadow .25s;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }

.plan-card.destacado {
    background: var(--azul);
    border-color: var(--azul);
    box-shadow: 0 12px 34px rgba(30,58,95,.25);
    transform: scale(1.03);
}
.plan-card.destacado:hover { transform: scale(1.03) translateY(-4px); }

.plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--verde);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.plan-nombre {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--azul);
    margin-bottom: .3rem;
}
.plan-card.destacado .plan-nombre { color: #fff; }

.plan-descripcion {
    font-size: .82rem;
    color: var(--suave);
    margin-bottom: 1.3rem;
    min-height: 2.2rem;
}
.plan-card.destacado .plan-descripcion { color: #cbd5e1; }

.plan-precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: 1.6rem;
}
.plan-precio .valor {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--azul);
    line-height: 1;
}
.plan-card.destacado .plan-precio .valor { color: #fff; }
.plan-precio .periodo { font-size: .82rem; color: var(--suave); }
.plan-card.destacado .plan-precio .periodo { color: #93c5fd; }

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex: 1;
}
.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .85rem;
    color: var(--texto);
    padding: .5rem 0;
    border-top: 1px solid var(--borde);
}
.plan-features li:first-child { border-top: none; }
.plan-features li i { color: var(--verde); margin-top: .2rem; }
.plan-card.destacado .plan-features li { color: #e2e8f0; border-top-color: rgba(255,255,255,.15); }
.plan-card.destacado .plan-features li i { color: #4ade80; }

.plan-cta {
    display: block;
    text-align: center;
    background: var(--azul2);
    color: #fff !important;
    font-weight: 700;
    padding: .8rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .9rem;
    transition: all .2s;
}
.plan-cta:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.plan-card.destacado .plan-cta {
    background: #fff;
    color: var(--azul) !important;
}
.plan-card.destacado .plan-cta:hover { background: #eef2f7; }

.plan-tipo {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--azul2);
    margin-bottom: .2rem;
}
.plan-card.destacado .plan-tipo { color: #93c5fd; }

.plan-precio-antes {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--suave);
    margin-bottom: .3rem;
}
.plan-card.destacado .plan-precio-antes { color: #93c5fd; }
.plan-ahorro {
    background: #dcfce7;
    color: #166534;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .15rem .55rem;
}

.plan-equivalente {
    font-size: .8rem;
    color: var(--suave);
    margin: -1.2rem 0 1.4rem;
}
.plan-card.destacado .plan-equivalente { color: #cbd5e1; }

.plan-empleados {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--azul2);
    background: #e8f0fa;
    border-radius: 8px;
    padding: .55rem .8rem;
    margin-bottom: 1.2rem;
}
.plan-card.destacado .plan-empleados { background: rgba(255,255,255,.12); color: #fff; }

.plan-features li.plan-features-titulo {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--suave);
    border-top: none;
    padding: .9rem 0 .3rem;
}
.plan-features li.plan-features-titulo:first-child { padding-top: 0; }
.plan-card.destacado .plan-features li.plan-features-titulo { color: #93c5fd; }

.plan-features li.no-incluido { color: #94a3b8; text-decoration: line-through; }
.plan-features li.no-incluido i { color: #cbd5e1; }
.plan-card.destacado .plan-features li.no-incluido { color: #7890ad; }
.plan-card.destacado .plan-features li.no-incluido i { color: #7890ad; }

/* En pantallas medianas el plan destacado ya no se agranda. */
@media (max-width: 1199px) {
    .plan-card.destacado { transform: none; }
    .plan-card.destacado:hover { transform: translateY(-4px); }
}

/* ── DEMO ────────────────────────────────────────────────── */
/* Sección para pedir una demostración: fondo gris claro y caja azul
   con efecto al pasar el mouse. */
.demo-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.demo-cta-box {
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul2) 100%);
    transition: transform .25s, box-shadow .25s;
}
.demo-cta-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(30,58,95,.25);
}