/* =============================================================================
 *  DISA · v3 · views/assets/css/v3.css
 *  Identidad visual: tema claro, sólido y en grises, con un acento azul.
 *  Estilo de estudio de software: superficies blancas, líneas finas,
 *  tipografía sobria y un solo color de acento.
 *
 *  1) Variables y base      4) Encabezado y menús
 *  2) Tipografía            5) Secciones y tarjetas
 *  3) Botones               6) Formularios, herramientas y pie
 * ============================================================================= */

/* ============================ 1. Variables y base ======================== */
:root {
    /* Superficies */
    --fondo:        #f6f7f9;
    --fondo-2:      #eef1f4;
    --superficie:   #ffffff;
    --superficie-2: #f3f5f8;

    /* Grises de texto */
    --tinta:        #141b26;
    --texto:        #1f2933;
    --texto-2:      #4a5561;
    --texto-3:      #78838f;

    /* Líneas */
    --borde:        #e3e7ec;
    --borde-medio:  #d5dbe3;
    --borde-fuerte: #c2cbd6;

    /* Acento y neutro sólido */
    --acento:        #2b63e4;
    --acento-oscuro: #1f56c9;
    --acento-suave:  #eaf0fe;
    --grafito:       #1b2430;
    --grafito-2:     #27313f;

    /* Estados */
    --ok:    #0f7a5a;
    --aviso: #b4740a;
    --error: #c0392b;

    --radio:       16px;
    --radio-chico: 10px;
    --sombra:      0 10px 30px rgba(15, 23, 42, .08);
    --sombra-alta: 0 26px 60px rgba(15, 23, 42, .18);
    --sombra-encabezado:  0 8px 24px rgba(15, 23, 42, .08);
    --sombra-boton:       0 10px 22px rgba(15, 23, 42, .16);
    --sombra-boton-hover: 0 16px 30px rgba(15, 23, 42, .22);
    --degradado:   linear-gradient(135deg, var(--acento) 0%, var(--acento-oscuro) 100%);
    --ancho:       1180px;

    /* Botón principal: grafito sobre tema claro, claro sobre tema oscuro */
    --boton-primario:       var(--grafito);
    --boton-primario-texto: #ffffff;
    --boton-primario-hover: #111923;

    /* Tintes, avisos y detalles que también cambian con el tema */
    --borde-acento:    #b7cef9;
    --ok-suave:        #f2fbf7;
    --ok-borde:        #bfe3d5;
    --ok-tinta:        #0b5c46;
    --aviso-suave:     #fdf7ec;
    --aviso-borde:     #f3e4c9;
    --aviso-tinta:     #8a5806;
    --error-suave:     #fdf4f3;
    --error-borde:     #f2cdc7;
    --error-tinta:     #8f2b20;
    --nota-suave:      #f1f6fe;
    --nota-borde:      #d8e4fb;
    --resultado-desde: #f4f8ff;
    --numero-tenue:    #c5cfda;
    --hero-desde:      #ffffff;
    --retícula:        rgba(15, 23, 42, .04);
    --brillo-1:        rgba(47, 111, 237, .07);
    --brillo-2:        rgba(27, 36, 48, .05);
    --seleccion:       rgba(47, 111, 237, .18);
    --foco:            rgba(47, 111, 237, .16);
    --placeholder:     #868f9a;
    --icono-menu:      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23141b26' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");

    /* Nombres anteriores (compatibilidad) */
    --cian:        var(--acento);
    --cian-oscuro: var(--acento-oscuro);
    --azul:        var(--acento);
    --ambar:       var(--aviso);
    --rojo:        var(--error);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px 420px at 6% -8%, var(--brillo-1), transparent 60%),
        radial-gradient(760px 380px at 98% 0%, var(--brillo-2), transparent 62%);
    pointer-events: none;
    z-index: 0;
}

/* Capas: el encabezado queda arriba por su propia regla más abajo (z-index 1080).
   Ojo: no incluir "header.encabezado" aquí, porque la especificidad del selector
   (tipo + clase) anulaba el position: sticky del encabezado y el contenido del
   sitio se dibujaba por encima de los menús desplegables. */
main, .barra-superior, footer.pie { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; }

a { color: var(--acento); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--acento-oscuro); }

.saltar-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--boton-primario);
    color: var(--boton-primario-texto);
    padding: .7rem 1.2rem;
    z-index: 2000;
    border-radius: 0 0 var(--radio-chico) 0;
    font-weight: 600;
}
.saltar-contenido:focus { left: 0; }

::selection { background: var(--seleccion); }

/* ============================ 2. Tipografía ============================== */
h1, h2, h3, h4, h5, .marca-texto strong {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--tinta);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { color: var(--texto-2); }

.antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: .7rem;
}

.entradilla { font-size: 1.05rem; color: var(--texto-2); max-width: 62ch; }
.tenue { color: var(--texto-3); font-size: .9rem; }

.titulo-seccion { margin-bottom: 2.2rem; }
.titulo-seccion h2 { margin-bottom: .8rem; }

.texto-gradiente {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================ 3. Botones ================================= */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.4rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton i { font-size: 1.05em; }

.boton-primario { background: var(--boton-primario); color: var(--boton-primario-texto); box-shadow: var(--sombra-boton); }
.boton-primario:hover { background: var(--boton-primario-hover); color: var(--boton-primario-texto); box-shadow: var(--sombra-boton-hover); }

.boton-claro { background: var(--superficie); color: var(--tinta); border-color: var(--borde-medio); }
.boton-claro:hover { color: var(--tinta); border-color: var(--borde-fuerte); box-shadow: var(--sombra); }

.boton-fantasma { background: var(--superficie); border-color: var(--borde-medio); color: var(--texto); }
.boton-fantasma:hover { border-color: var(--acento); color: var(--acento-oscuro); }

.boton-borde { background: var(--superficie); border-color: var(--borde-fuerte); color: var(--texto); }
.boton-borde:hover { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-oscuro); }

.boton-whatsapp { background: #1faa53; color: #fff; }
.boton-whatsapp:hover { background: #25c061; color: #fff; }

.boton-chico { padding: .55rem 1rem; font-size: .85rem; }
.boton-bloque { width: 100%; }
.boton-texto { padding: 0; border: 0; background: none; color: var(--acento); }

.enlace-fuerte { color: var(--acento); font-weight: 600; }

/* ============================ 4. Encabezado y menús ====================== */
.barra-superior {
    background: var(--grafito);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: .82rem;
    color: #c3cbd5;
    padding: .5rem 0;
}
.barra-superior i { color: #8fb6ff; margin-right: .35rem; }
.barra-superior a { color: #e7ebf1; }
.barra-superior a:hover { color: #fff; }

.encabezado {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 1080;
    transition: box-shadow .2s ease, border-color .2s ease;
}
/* Nota: nada de backdrop-filter aquí. En Chromium convierte al encabezado en
   "backdrop root" y RECORTA los paneles desplegables hijos (solo se veía una
   franja del menú). El fondo blanco sólido cumple la misma función. */
.encabezado-solido { box-shadow: var(--sombra-encabezado); border-bottom-color: var(--borde-medio); }

.encabezado .navbar { padding: .55rem 0; }

.navbar-brand { gap: .85rem; }
.navbar-brand:hover .logotipo { transform: rotate(-4deg) scale(1.04); }
.logotipo { width: 42px; height: 42px; transition: transform .25s ease; }

.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-size: 1.22rem; letter-spacing: .06em; color: var(--tinta); }
.marca-texto small { font-size: .66rem; color: var(--texto-3); letter-spacing: .04em; text-transform: uppercase; }
/* Sin el nombre largo en la barra, el menú completo cabe entre 992 y 1199 px */
@media (min-width: 992px) and (max-width: 1199.98px) { .encabezado .marca-texto small { display: none; } }

.marca-texto-pie strong { font-size: 1.1rem; }

.navbar-toggler { border-color: var(--borde-medio); padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--foco); }
.navbar-toggler-icon {
    background-image: var(--icono-menu);
}

.offcanvas-menu { background: var(--superficie); color: var(--texto); border-left: 1px solid var(--borde); }
.offcanvas-menu .offcanvas-header { border-bottom: 1px solid var(--borde); }
.offcanvas-menu .btn-close-white { filter: none; opacity: .55; }

@media (min-width: 992px) {
    .offcanvas-menu { background: transparent; border: 0; }
    .offcanvas-menu .offcanvas-body { padding: 0; }
    .offcanvas-menu .offcanvas-title { display: none; }
}

.encabezado .nav-link {
    color: var(--texto-2);
    font-weight: 600;
    font-size: .95rem;
    padding: .6rem .85rem;
    border-radius: var(--radio-chico);
}
.encabezado .nav-link:hover,
.encabezado .nav-link.activo { color: var(--tinta); background: var(--superficie-2); }
.encabezado .nav-link.activo { color: var(--acento-oscuro); background: var(--acento-suave); }
.encabezado .dropdown-toggle::after { margin-left: .4rem; opacity: .45; }
.encabezado .nav-item.dropdown > .nav-link[aria-expanded="true"] { color: var(--tinta); background: var(--superficie-2); }

/* --- Paneles desplegables: sólidos, opacos y por encima del contenido --- */
.encabezado .dropdown-menu {
    z-index: 1200;
    background: var(--superficie);
    border: 1px solid var(--borde-medio);
    border-radius: 16px;
    box-shadow: var(--sombra-alta);
    padding: .8rem;
    margin-top: .5rem;
}

.encabezado .mega-menu {
    width: min(1040px, calc(100vw - 2.5rem));
    left: 0;
    right: auto;
    max-height: min(78vh, 720px);
    overflow-y: auto;
    padding: 1.15rem 1.25rem;
}
.encabezado .mega-menu-angosto { width: min(700px, calc(100vw - 2.5rem)); }

.mega-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem 1.6rem; }
.mega-columna { min-width: 0; }

.mega-grupo {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-3);
    margin: 0 0 .55rem;
}

.mega-lista, .mega-lista-doble { list-style: none; margin: 0; padding: 0; }
.mega-lista-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }

.mega-lista a, .lista-menu-item {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .55rem .6rem;
    border-radius: var(--radio-chico);
    color: var(--texto-2);
    transition: background .16s ease, color .16s ease;
}
.mega-lista a:hover, .lista-menu-item:hover { background: var(--superficie-2); color: var(--tinta); }
.mega-lista i, .lista-menu-item i { color: var(--acento); font-size: 1.05rem; margin-top: .15rem; }
.mega-lista strong, .lista-menu-item strong { display: block; color: var(--tinta); font-size: .92rem; font-weight: 600; }
.mega-lista small, .lista-menu-item small { display: block; color: var(--texto-3); font-size: .78rem; line-height: 1.45; }

.mega-pie {
    border-top: 1px solid var(--borde);
    margin-top: 1rem;
    padding-top: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .86rem;
}
.mega-pie a { color: var(--acento); font-weight: 600; }

.encabezado .lista-menu { width: min(430px, calc(100vw - 2.5rem)); padding: .7rem; }
.lista-menu-item + .lista-menu-item { margin-top: .15rem; }

/* Sin JavaScript el menú se abre al pasar el ratón */
@media (min-width: 992px) {
    html:not(.con-js) .encabezado .nav-item.dropdown:hover > .dropdown-menu,
    html:not(.con-js) .encabezado .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
}

/* En teléfono y tableta los paneles van dentro del menú lateral */
@media (max-width: 991px) {
    .encabezado .mega-menu, .encabezado .mega-menu-angosto, .encabezado .lista-menu {
        position: static !important;
        width: auto;
        max-height: none;
        transform: none !important;
        box-shadow: none;
        border: 0;
        background: var(--superficie-2);
        border-radius: var(--radio-chico);
        margin: .3rem 0 .7rem;
        padding: .6rem .7rem;
    }
    .mega-columnas { grid-template-columns: 1fr; gap: .6rem; }
    .mega-lista-doble { grid-template-columns: 1fr; }
}

/* ============================ 5. Secciones y tarjetas ==================== */
.seccion { padding: clamp(2.8rem, 6vw, 5.2rem) 0; }
.seccion-clara { background: var(--superficie); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion-ajustada { padding-top: 1.6rem; }
.seccion-cierre { padding-top: 2.4rem; }

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.6rem, 6vw, 4.8rem) 0 clamp(2.4rem, 5vw, 3.8rem);
    background: linear-gradient(180deg, var(--hero-desde) 0%, var(--fondo) 100%);
    border-bottom: 1px solid var(--borde);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--retícula) 1px, transparent 1px),
        linear-gradient(90deg, var(--retícula) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

.hero-titular { margin: 1rem 0 1.2rem; }
.hero-entradilla { font-size: 1.08rem; max-width: 60ch; }
.hero-botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.lista-chequeo { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.lista-chequeo li { display: flex; gap: .6rem; align-items: flex-start; color: var(--texto-2); margin-bottom: .55rem; }
.lista-chequeo i { color: var(--acento); margin-top: .2rem; }

.hero-panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 20px;
    padding: 1.4rem;
    box-shadow: var(--sombra);
}
.hero-panel-titulo { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: .9rem; }
.hero-panel-lista { list-style: none; margin: 0; padding: 0; }
.hero-panel-lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--borde);
    font-size: .92rem;
    color: var(--texto-2);
}
.hero-panel-lista li:last-child { border-bottom: 0; }
.hero-panel-lista strong { color: var(--tinta); font-weight: 600; }
.hero-panel-lista i { color: var(--acento); }

.etiqueta-linea {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    color: var(--acento-oscuro);
    background: var(--acento-suave);
    border: 1px solid var(--borde-acento);
    padding: .35rem .75rem;
    border-radius: 8px;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.5rem;
    height: 100%;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tarjeta:hover { transform: translateY(-4px); border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.tarjeta h3 { font-size: 1.1rem; margin: .9rem 0 .6rem; }
.tarjeta p { margin-bottom: 0; font-size: .95rem; }
.tarjeta-icono {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--acento-suave);
    border: 1px solid var(--borde-acento);
    color: var(--acento-oscuro);
    font-size: 1.3rem;
}
.tarjeta-plana { background: var(--superficie-2); }
.tarjeta-accion { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.tarjeta-accion:hover { color: inherit; }
.tarjeta-accion .flecha { margin-top: auto; padding-top: 1rem; color: var(--acento); font-weight: 600; font-size: .88rem; }
.tarjeta-numero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 800; color: var(--numero-tenue); line-height: 1; }
.tarjeta-destacada { border-color: var(--borde-acento); background: linear-gradient(165deg, var(--acento-suave), var(--superficie)); }

.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }

@media (max-width: 991px) {
    .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
}

.metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metrica { text-align: center; padding: 1.2rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.metrica-valor { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--tinta); line-height: 1; }
.metrica-etiqueta { font-size: .82rem; color: var(--texto-3); margin-top: .5rem; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.paso {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 1.2rem;
    padding: 1.3rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
}
.paso-numero { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--acento); }
.paso h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.paso p { margin-bottom: .5rem; font-size: .94rem; }
.paso-entregable { font-size: .84rem; color: var(--texto-3); }
.paso-entregable strong { color: var(--acento-oscuro); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
    font-size: .8rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    color: var(--texto-2);
}
.chip-acento { background: var(--acento-suave); border-color: var(--borde-acento); color: var(--acento-oscuro); }

.lista-puntos { list-style: none; padding: 0; margin: 0; }
.lista-puntos li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--texto-2); font-size: .95rem; }
.lista-puntos li::before {
    content: '';
    position: absolute;
    left: .3rem;
    top: .62rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acento);
}
.lista-negativa li::before { background: var(--aviso); }

.migas { border-bottom: 1px solid var(--borde); background: var(--superficie); }
.migas-lista { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem 0; margin: 0; font-size: .84rem; color: var(--texto-3); }
.migas-lista li + li::before { content: '/'; margin-right: .5rem; color: var(--borde-fuerte); }
.migas-lista a { color: var(--texto-2); }
.migas-lista a:hover { color: var(--acento); }
.migas-lista [aria-current] { color: var(--texto); }

.aviso-caja { padding-top: 1.2rem; }
.aviso {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--superficie);
}
.aviso i { font-size: 1.4rem; }
.aviso-ok { border-color: var(--ok-borde); background: var(--ok-suave); }
.aviso-ok i { color: var(--ok); }
.aviso-error { border-color: var(--error-borde); background: var(--error-suave); }
.aviso-error i { color: var(--error); }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla-disa { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-disa th, .tabla-disa td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-disa th { background: var(--superficie-2); color: var(--tinta); font-weight: 600; font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; }
.tabla-disa td { color: var(--texto-2); }
.tabla-disa tr:last-child td { border-bottom: 0; }
.tabla-disa strong { color: var(--tinta); }

.acordeon-disa .accordion-item { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: .7rem; overflow: hidden; }
.acordeon-disa .accordion-button {
    background: var(--superficie);
    color: var(--tinta);
    font-weight: 600;
    font-size: .98rem;
    box-shadow: none;
    padding: 1.05rem 1.2rem;
}
.acordeon-disa .accordion-button:not(.collapsed) { background: var(--acento-suave); color: var(--acento-oscuro); }
.acordeon-disa .accordion-button:focus { box-shadow: 0 0 0 3px var(--foco); }
.acordeon-disa .accordion-button::after { filter: none; opacity: .55; }
.acordeon-disa .accordion-body { color: var(--texto-2); background: var(--superficie); font-size: .95rem; }

.caja-interior {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.3rem;
}
.caja-aviso {
    border-left: 3px solid var(--aviso);
    background: var(--aviso-suave);
    border-top: 1px solid var(--aviso-borde);
    border-right: 1px solid var(--aviso-borde);
    border-bottom: 1px solid var(--aviso-borde);
    padding: 1rem 1.2rem;
    border-radius: var(--radio-chico);
    font-size: .92rem;
    color: var(--texto-2);
}
.caja-aviso strong, .caja-aviso .negrita { color: var(--aviso-tinta); }
.caja-nota {
    border-left: 3px solid var(--acento);
    background: var(--nota-suave);
    border-top: 1px solid var(--nota-borde);
    border-right: 1px solid var(--nota-borde);
    border-bottom: 1px solid var(--nota-borde);
}

.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.galeria figure { margin: 0; }
.galeria img { border-radius: var(--radio-chico); border: 1px solid var(--borde); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.galeria figcaption { font-size: .8rem; color: var(--texto-3); margin-top: .5rem; }
@media (max-width: 767px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.recurso-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem; }
.recurso-seccion + .recurso-seccion { margin-top: 1.6rem; border-top: 1px solid var(--borde); padding-top: 1.4rem; }
.recurso-seccion h3 { font-size: 1.05rem; }

/* ============================ 6. Formularios y herramientas ============== */
.formulario { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.6rem; }
.form-label { font-size: .86rem; font-weight: 600; color: var(--texto); margin-bottom: .35rem; }
.form-control, .form-select {
    background: var(--superficie);
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio-chico);
    color: var(--texto);
    padding: .7rem .85rem;
    font-size: .95rem;
}
.form-control:focus, .form-select:focus {
    background: var(--superficie);
    border-color: var(--acento);
    color: var(--texto);
    box-shadow: 0 0 0 3px var(--foco);
}
.form-control::placeholder { color: var(--placeholder); }
.form-select option { background: var(--superficie); color: var(--texto); }
.form-text { color: var(--texto-3); font-size: .8rem; }
.form-check-input { background-color: var(--superficie); border-color: var(--borde-medio); }
.form-check-input:checked { background-color: var(--acento); border-color: var(--acento); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--foco); }
.form-check-label { color: var(--texto-2); font-size: .9rem; }
.requerido { color: var(--error); }
.campo-trampa { position: absolute; left: -9999px; opacity: 0; height: 0; }

.mensaje-formulario { font-size: .92rem; padding: .9rem 1rem; border-radius: var(--radio-chico); margin-bottom: 1rem; display: none; }
.mensaje-formulario.visible { display: block; }
.mensaje-formulario.exito { background: var(--ok-suave); border: 1px solid var(--ok-borde); color: var(--ok-tinta); }
.mensaje-formulario.error { background: var(--error-suave); border: 1px solid var(--error-borde); color: var(--error-tinta); }

/* --- Cuestionario paso a paso --- */
.asistente { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; padding: 1.6rem; box-shadow: var(--sombra); }
.asistente-progreso { height: 6px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; margin-bottom: 1.4rem; }
.asistente-barra { height: 100%; width: 0; background: var(--degradado); transition: width .3s ease; }
.asistente-paso { display: none; }
.asistente-paso.activo { display: block; animation: aparecer .25s ease; }
.asistente-indice { font-size: .8rem; color: var(--texto-3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.asistente-pregunta { font-size: 1.3rem; margin-bottom: 1.2rem; }
.asistente-ayuda { font-size: .88rem; color: var(--texto-3); margin-bottom: 1.1rem; }
.asistente-contador { font-weight: 600; color: var(--acento-oscuro); }
.asistente-datos { background: var(--superficie-2); }

.opciones { display: grid; gap: .6rem; }
.opcion {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    background: var(--superficie);
    cursor: pointer;
    color: var(--texto-2);
    font-size: .95rem;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.opcion:hover { border-color: var(--acento); color: var(--texto); background: var(--acento-suave); }
.opcion input { accent-color: var(--acento); }
.opcion.marcada { border-color: var(--acento); background: var(--acento-suave); color: var(--tinta); }

.asistente-nav { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.4rem; }

.resultado {
    border: 1px solid var(--borde-acento);
    border-radius: 20px;
    background: linear-gradient(165deg, var(--resultado-desde), var(--superficie));
    padding: 1.6rem;
}
.resultado-etiqueta { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-oscuro); }
.resultado-lista { list-style: none; padding: 0; margin: 0; }
.resultado-lista li { padding: .5rem 0; border-bottom: 1px dashed var(--borde); display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; color: var(--texto-2); }
.resultado-lista li:last-child { border-bottom: 0; }
.resultado-lista strong { color: var(--tinta); }

.medidor { display: grid; gap: .5rem; }
.medidor-fila { display: grid; grid-template-columns: 140px 1fr 46px; gap: .8rem; align-items: center; font-size: .86rem; color: var(--texto-2); }
.medidor-barra { height: 8px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; }
.medidor-relleno { height: 100%; width: 0; background: var(--degradado); transition: width .4s ease; }
.medidor-valor { text-align: right; color: var(--tinta); font-weight: 600; }

.perfil-salida { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem; font-size: .93rem; color: var(--texto-2); }
.perfil-salida h4 { font-size: 1rem; color: var(--acento-oscuro); margin-top: 1.2rem; }
.perfil-salida h4:first-child { margin-top: 0; }
.perfil-salida ul { margin: .4rem 0 0 1.1rem; padding: 0; }
.perfil-salida li { margin-bottom: .3rem; }

/* ============================ 7. Pie y flotantes ======================= */
.pie { background: var(--fondo-2); border-top: 1px solid var(--borde); padding-bottom: 2rem; }

/* --- Bloque de cierre (módulo CTA): sólido, en grafito --- */
.cierre-caja {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: center;
    background: var(--grafito);
    border: 1px solid var(--grafito-2);
    border-radius: 22px;
    padding: 2rem;
    box-shadow: var(--sombra-alta);
}
.cierre-caja h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cierre-caja p { color: #b9c2cd; margin-bottom: .4rem; }
.cierre-caja .lista-chequeo li { color: #c9d2dc; }
.cierre-caja .lista-chequeo i { color: #8fb6ff; }
.cierre-caja .nota-botones { color: #9aa5b1; }
.cierre-botones { display: grid; gap: .7rem; }
.cierre-caja .boton-primario { background: #f2f5f9; color: #101720; box-shadow: none; }
.cierre-caja .boton-primario:hover { background: #ffffff; color: #101720; }
.cierre-caja .boton-fantasma { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24); color: #fff; }
.cierre-caja .boton-fantasma:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); color: #fff; }

/* --- Franja de cierre del pie --- */
.franja-cta { padding-top: 2.6rem; }
.franja-cta-caja {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: center;
    background: var(--superficie);
    border: 1px solid var(--borde-medio);
    border-left: 4px solid var(--acento);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--sombra);
}
.franja-cta-caja h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.franja-cta-caja p { margin-bottom: .4rem; }
.franja-cta-botones { display: grid; gap: .7rem; }
.franja-cta-caja .boton-claro { background: var(--boton-primario); color: var(--boton-primario-texto); border-color: var(--boton-primario); }
.franja-cta-caja .boton-claro:hover { background: var(--boton-primario-hover); color: var(--boton-primario-texto); }
.nota-botones { font-size: .82rem; color: var(--texto-3); margin: 0; text-align: center; }

.titulo-pie { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); margin-bottom: .9rem; }
.lista-pie { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.lista-pie li { margin-bottom: .45rem; }
.lista-pie a { color: var(--texto-2); }
.lista-pie a:hover { color: var(--acento); }
.texto-pie { font-size: .9rem; color: var(--texto-3); }

/* --- Marca del pie: aire entre el logotipo y el nombre --- */
.marca-pie { gap: 1rem; margin-bottom: 1.2rem; }
.marca-pie .logotipo { width: 40px; height: 40px; }
.marca-pie .marca-texto { gap: .15rem; }
.marca-pie .marca-texto small { text-transform: none; letter-spacing: 0; font-size: .74rem; line-height: 1.35; max-width: 30ch; }

.lista-datos { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .9rem; color: var(--texto-3); }
.lista-datos li { margin-bottom: .4rem; }
.lista-datos i { color: var(--acento); margin-right: .45rem; }
.lista-datos a { color: var(--texto-2); }
.lista-datos a:hover { color: var(--acento); }

.redes { display: flex; gap: .5rem; }
.redes a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--borde-medio);
    background: var(--superficie);
    color: var(--texto-2);
}
.redes a:hover { color: var(--acento); border-color: var(--acento); }

.pie-legal { border-top: 1px solid var(--borde-medio); margin-top: 2.6rem; padding-top: 1.4rem; font-size: .86rem; color: var(--texto-3); }
.pie-legal a { color: var(--texto-2); }
.pie-legal a:hover { color: var(--acento); }

/* --- Botón flotante de WhatsApp (esquina inferior derecha) ------------- */
/* Es el único acceso a WhatsApp dentro del cuerpo del sitio: el encabezado
   conserva el suyo y la franja del pie ya no lo repite. La tarjeta solo se
   ve al pulsar el botón (lo controla v3.js); el botón que se ve por omisión
   es solo el icono, flotando sobre la página. */
.whatsapp-flotante { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.whatsapp-boton {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: #1faa53;
    color: #fff;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-alta);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
}
.whatsapp-boton:hover { background: #25c061; transform: scale(1.06); }
.whatsapp-boton:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--foco); }
.whatsapp-tarjeta {
    width: min(320px, 88vw);
    background: var(--superficie);
    border: 1px solid var(--borde-medio);
    border-radius: var(--radio);
    padding: 1.1rem;
    box-shadow: var(--sombra-alta);
}
.whatsapp-titulo { color: var(--tinta); font-weight: 600; margin-bottom: .4rem; font-size: .98rem; }
.whatsapp-texto { font-size: .86rem; color: var(--texto-3); margin-bottom: .9rem; }
.whatsapp-pie { font-size: .82rem; color: var(--texto-3); margin-top: .7rem; text-align: center; }

@media (max-width: 640px) {
    .whatsapp-flotante { right: .9rem; bottom: .9rem; gap: .5rem; }
    .whatsapp-boton { width: 52px; height: 52px; font-size: 1.45rem; }
}


/* ============================ 8. Animaciones y utilidades ============== */
/* Una sola animación en todo el sitio: la entrada de la página (un
   desvanecido al cargar). No hay animaciones por bloques: se retiraron
   los elementos [data-animar] y su observador de desplazamiento. */
@keyframes entrada-pagina { from { opacity: 0; } to { opacity: 1; } }

body { animation: entrada-pagina .5s ease-out both; }

@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    html { scroll-behavior: auto; }
    .boton:hover { transform: none; }
    .asistente-paso.activo { animation: none; }
}

@media (max-width: 991px) {
    .franja-cta-caja, .cierre-caja { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.5rem; }
    .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paso { grid-template-columns: 56px 1fr; gap: .9rem; padding: 1rem; }
    .medidor-fila { grid-template-columns: 108px 1fr 40px; font-size: .8rem; }
    .hero { padding-top: 2.2rem; }
}

.con-js .solo-sin-js { display: none; }

.texto-centrado { text-align: center; }
.espacio-arriba { margin-top: 1.6rem; }
.espacio-abajo { margin-bottom: 1.6rem; }
.sin-lista { list-style: none; padding: 0; margin: 0; }
.negrita { font-weight: 600; color: var(--tinta); }

/* ============================ 9. Tema oscuro =============================
   Todo el tema oscuro sale de este bloque: se sobrescriben las variables de
   :root y solo unas cuantas piezas que Bootstrap dibuja con SVG en línea.
   El interruptor para cambiarlo está descrito en el punto 10.            */
[data-tema="oscuro"] {
    color-scheme: dark;

    /* Superficies */
    --fondo:        #11161d;
    --fondo-2:      #161c25;
    --superficie:   #1a212b;
    --superficie-2: #212a35;

    /* Grises de texto */
    --tinta:        #f1f5fa;
    --texto:        #e3e9f1;
    --texto-2:      #b4bfcc;
    --texto-3:      #8d99a8;

    /* Líneas */
    --borde:        #262f3b;
    --borde-medio:  #303b49;
    --borde-fuerte: #3f4c5d;

    /* Acento y neutro sólido (sobre oscuro el hover va más claro) */
    --acento:        #5b96ff;
    --acento-oscuro: #9dc2ff;
    --acento-suave:  #17233a;
    --grafito:       #0b1016;
    --grafito-2:     #232d3a;

    /* Estados */
    --ok:    #4ecfa3;
    --aviso: #e2a33c;
    --error: #ef8a7c;

    --borde-acento:    #2c4270;
    --ok-suave:        #10231d;
    --ok-borde:        #1f4a3c;
    --ok-tinta:        #7fe0bd;
    --aviso-suave:     #241d10;
    --aviso-borde:     #4a3a1b;
    --aviso-tinta:     #f0c778;
    --error-suave:     #251413;
    --error-borde:     #4d2b26;
    --error-tinta:     #f3a79b;
    --nota-suave:      #131f33;
    --nota-borde:      #24365a;
    --resultado-desde: #16233a;
    --numero-tenue:    #33404f;
    --hero-desde:      #161d27;
    --retícula:        rgba(255, 255, 255, .05);
    --brillo-1:        rgba(91, 150, 255, .10);
    --brillo-2:        rgba(255, 255, 255, .03);
    --seleccion:       rgba(91, 150, 255, .28);
    --foco:            rgba(91, 150, 255, .32);
    --placeholder:     #7c8794;

    --sombra:             0 10px 30px rgba(0, 0, 0, .45);
    --sombra-alta:        0 26px 60px rgba(0, 0, 0, .55);
    --sombra-encabezado:  0 8px 24px rgba(0, 0, 0, .50);
    --sombra-boton:       0 10px 22px rgba(0, 0, 0, .50);
    --sombra-boton-hover: 0 16px 30px rgba(0, 0, 0, .60);

    /* El botón principal se invierte: claro sobre oscuro */
    --boton-primario:       #f2f5f9;
    --boton-primario-texto: #0f141c;
    --boton-primario-hover: #ffffff;

    --icono-menu: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e6ecf4' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* El azulejo del logotipo conserva su azul; solo insinúa un borde */
[data-tema="oscuro"] .logotipo rect { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }

/* Flecha de los desplegables nativos (Bootstrap la pinta con un SVG negro) */
[data-tema="oscuro"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b4bfcc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Flecha del acordeón */
[data-tema="oscuro"] .acordeon-disa .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b4bfcc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
[data-tema="oscuro"] .acordeon-disa .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b96ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Cruz de cerrar del menú lateral */
[data-tema="oscuro"] .offcanvas-menu .btn-close-white { filter: invert(1); opacity: .7; }

/* ============================ 10. Interruptor de tema ==================== */
.interruptor-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 40px;
    height: 40px;
    padding: 0 .6rem;
    border: 1px solid var(--borde-medio);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-2);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.interruptor-tema:hover { background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--tinta); }
.interruptor-tema:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--foco); }
.interruptor-tema i { font-size: 1.05rem; line-height: 1; }
.interruptor-tema .bi-sun { display: none; }
[data-tema="oscuro"] .interruptor-tema .bi-moon-stars { display: none; }
[data-tema="oscuro"] .interruptor-tema .bi-sun { display: inline-block; }

/* Dentro de la barra superior (siempre en grafito) */
.interruptor-tema-barra {
    min-width: 34px;
    height: 28px;
    padding: 0 .5rem;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
    color: #dfe5ec;
}
.interruptor-tema-barra:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .34); color: #fff; }
.interruptor-tema-barra i { font-size: .92rem; }
.interruptor-tema-barra .interruptor-etiqueta { display: none; }

/* Dentro del panel lateral del móvil */
.interruptor-tema-menu { height: 36px; }
@media (min-width: 992px) { .interruptor-tema-menu { display: none !important; } }