/* ===========================================================================
   Sitio comercial NEIVELA  (www.neivela.com.mx)
   ---------------------------------------------------------------------------
   Hoja de estilo del SITIO PÚBLICO. NO la comparte con el CRM: el CRM usa
   wwwroot/app.css y no se toca desde aquí. Si cambias algo en este archivo no
   puedes afectar a ningún cliente.

   Los colores, radios, botones y tipografía salen tal cual del SISTEMA DE
   DISEÑO de la marca (neivela_sistema_diseno.html del paquete de marca).
   Si algún día cambia la marca, se cambian estas variables y el sitio entero
   se reacomoda solo.
   =========================================================================== */

:root {
    /* Paleta oficial */
    --teal: #1C4E5C;          /* Horizon Teal — color principal */
    --teal-oscuro: #123640;   /* Hover del botón principal y fondos profundos */
    --teal-medio: #2E6D7E;    /* Ligas y botones fantasma */
    --sage: #A8CCB9;          /* Luminous Sage — acentos suaves */
    --sage-suave: #DCEDE4;
    --oro: #E6B978;           /* Innovation Gold — llamadas a la acción */
    --oro-oscuro: #C2924E;
    --tinta: #16323B;         /* Ink — texto sobre fondo claro */
    --crema: #F4FAF9;         /* Fondo base de la marca */
    --blanco: #FFFFFF;

    /* Textos y líneas */
    --cuerpo: #46626B;
    --tenue: #647A81;
    --linea: #DAE6E8;
    --linea-clara: #EDF4F4;
    --agua: #E2F0F3;          /* Hover de botón secundario */
    --sobre-oscuro: #B9D4D8;  /* Texto sobre fondos teal */

    /* Anchos y márgenes FLUIDOS: el sitio tiene que verse bien lo mismo en un
       celular de 360 px que en un monitor de 2560. El margen lateral crece con la
       pantalla en vez de quedarse fijo, y el contenido tiene dos anchos: el normal
       (lectura cómoda) y el amplio, para la barra de arriba, que debe pegarse a
       las orillas y no quedar flotando en medio. */
    --ancho: 1320px;
    --ancho-amplio: none;   /* la barra de arriba y el pie van de orilla a orilla */
    --margen-lateral: clamp(20px, 4vw, 56px);
    --radio: 16px;
    --radio-chico: 10px;
    --sombra: 0 1px 3px rgba(28, 78, 92, .05);
    --sombra-alta: 0 12px 32px rgba(18, 54, 64, .13);
}

/* En monitores grandes el contenido se ensancha un poco más. No se deja crecer
   sin límite a propósito: una línea de texto de 2000 px es incómoda de leer. */
@media (min-width: 1700px) {
    :root { --ancho: 1480px; }
}

@media (min-width: 2200px) {
    :root { --ancho: 1680px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--blanco);
    color: var(--tinta);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--teal-medio); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .45em; color: var(--tinta); }

h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 700; letter-spacing: -.015em;
     /* El navegador reparte los renglones para que ninguno quede huérfano.
        Donde no exista, el titular simplemente se parte como siempre. */
     text-wrap: balance; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 1em; }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen-lateral);
}

/* Para la barra de arriba y el pie: TODO el ancho de la pantalla, para que el
   logo quede pegado a la izquierda y el menú a la derecha. Sin esto, en un
   monitor grande el logo aparecía flotando casi a la mitad. */
.contenedor-amplio {
    width: 100%;
    max-width: var(--ancho-amplio);
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 64px);
}

/* --- Encabezado ---------------------------------------------------------- */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
}

.encabezado .contenedor-amplio {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 76px;
}

.logo { display: flex; align-items: center; }

/* El logo crece un poco con la pantalla: en un monitor grande, 36 px se veía
   diminuto contra tanto espacio. */
.logo img { height: clamp(30px, 2.6vw, 42px); width: auto; }

.navegacion {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;
}

.navegacion a:not(.boton) {
    color: var(--cuerpo);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
}

.navegacion a:not(.boton):hover { color: var(--teal); }

/* --- Botones (del sistema de diseño) ------------------------------------- */

.boton {
    display: inline-block;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: var(--radio-chico);
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
    white-space: nowrap;
}

.boton:hover { transform: translateY(-1px); }

.boton-principal { background: var(--teal); color: var(--blanco); }
.boton-principal:hover { background: var(--teal-oscuro); }

.boton-secundario {
    background: var(--blanco);
    color: var(--teal);
    border-color: var(--teal);
}
.boton-secundario:hover { background: var(--agua); }

.boton-oro { background: var(--oro); color: var(--tinta); }
.boton-oro:hover { background: var(--oro-oscuro); }

.boton-borde-claro {
    background: transparent;
    color: var(--blanco);
    border-color: rgba(255, 255, 255, .45);
}
.boton-borde-claro:hover { background: rgba(255, 255, 255, .1); border-color: var(--blanco); }

/* --- Secciones ----------------------------------------------------------- */

section { padding: 88px 0; }

.seccion-crema { background: var(--crema); }

.seccion-teal { background: var(--teal-oscuro); color: var(--blanco); }
.seccion-teal h2, .seccion-teal h3 { color: var(--blanco); }
.seccion-teal p { color: var(--sobre-oscuro); }

.titulo-seccion { max-width: 680px; margin-bottom: 46px; }

.titulo-seccion p {
    font-size: 1.06rem;
    color: var(--cuerpo);
    margin-bottom: 0;
}

.seccion-teal .titulo-seccion p { color: var(--sobre-oscuro); }

.antetitulo {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 14px;
}

.seccion-teal .antetitulo { color: var(--oro); }

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

.portada {
    padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 7vw, 96px);
    background:
        radial-gradient(760px 380px at 88% -10%, rgba(168, 204, 185, .34), transparent 62%),
        linear-gradient(180deg, var(--crema) 0%, var(--blanco) 100%);
    border-bottom: 1px solid var(--linea);
    overflow: hidden;
}

/* Una sola columna en pantallas chicas; dos en cuanto hay lugar, para que el
   texto no quede solo con medio metro de vacío a su derecha. */
.portada .contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
}

@media (min-width: 1024px) {
    .portada .contenedor { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
}

.portada-texto { max-width: 620px; min-width: 0; }

.portada .entrada {
    font-size: clamp(1.05rem, 1.9vw, 1.24rem);
    color: var(--cuerpo);
    max-width: 600px;
    margin-bottom: 32px;
}

.acciones { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

.nota-portada {
    margin-top: 26px;
    font-size: .9rem;
    color: var(--tenue);
    margin-bottom: 0;
}

.eslogan {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal-medio);
    margin-bottom: 18px;
}

/* --- Vista del sistema en la portada ------------------------------------
   Es una ILUSTRACIÓN, no una captura: está hecha con HTML y CSS siguiendo la
   pantalla de ejemplo del sistema de diseño de la marca. Sirve para que el lado
   derecho de la portada muestre de qué se trata en vez de quedar vacío. Al ser
   texto y cajas (no una imagen), se ve nítida en cualquier resolución y pesa
   cero.
   ------------------------------------------------------------------------- */

.portada-visual { min-width: 0; }

.mock {
    border-radius: 18px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    box-shadow: var(--sombra-alta);
    overflow: hidden;
    font-size: clamp(10px, .92vw, 13px);
}

.mock-barra {
    display: flex;
    gap: 6px;
    padding: 11px 14px;
    background: var(--crema);
    border-bottom: 1px solid var(--linea);
}

.mock-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--linea);
}

.mock-cuerpo { display: grid; grid-template-columns: 34% 1fr; }

@media (min-width: 480px) {
    .mock-cuerpo { grid-template-columns: 30% 1fr; }
}

.mock-menu {
    background: var(--teal-oscuro);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mock-marca {
    color: var(--blanco);
    font-weight: 700;
    letter-spacing: .08em;
    font-size: .92em;
    margin-bottom: 14px;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock-liga {
    color: #A9C4C8;
    padding: 7px 9px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock-liga.on { background: var(--teal); color: var(--blanco); font-weight: 600; }

.mock-panel { background: var(--crema); padding: 16px 15px; min-width: 0; }

.mock-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 13px;
}

.mock-encabezado b { color: var(--tinta); font-size: 1.25em; }
.mock-encabezado span { color: var(--tenue); white-space: nowrap; }

.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; }

.mock-stat {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 9px 10px;
    min-width: 0;
}

.mock-stat b { display: block; color: var(--teal); font-size: 1.35em; line-height: 1.2; }
.mock-stat span { color: var(--tenue); font-size: .86em; }

.mock-cita {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 9px;
    align-items: center;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    min-width: 0;
}

.mock-hora { font-weight: 700; color: var(--teal); white-space: nowrap; }

.mock-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sage-suave);
    color: var(--teal);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .82em;
}

.mock-quien { min-width: 0; }
.mock-quien b { display: block; color: var(--tinta); font-size: .96em; }
.mock-quien span { color: var(--tenue); font-size: .86em; }
.mock-quien b, .mock-quien span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mock-etiqueta {
    font-size: .8em;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 99px;
    white-space: nowrap;
}

.mock-etiqueta.verde { background: #E3F2EA; color: #276B4E; }
.mock-etiqueta.oro { background: #FBF0DC; color: #8A5E12; }

/* --- Rejillas y tarjetas ------------------------------------------------- */

.rejilla {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 26px;
    box-shadow: var(--sombra);
}

.tarjeta h3 { color: var(--teal); }

.tarjeta p { color: var(--cuerpo); font-size: .97rem; }

.tarjeta p:last-child { margin-bottom: 0; }

.tarjeta ul {
    margin: 14px 0 0;
    padding-left: 19px;
    color: var(--cuerpo);
    font-size: .94rem;
}

.tarjeta li { margin-bottom: 6px; }

/* Los iconos son SVG de trazo, no emoji: el emoji lo dibuja cada teléfono a su
   manera y rompe la línea gráfica de la marca. Estos heredan el color, así que
   basta cambiar `color` para reteñirlos. */
.icono {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sage-suave);
    color: var(--teal);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.icono svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Bloque del diferenciador ------------------------------------------- */

.bolsas {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    margin-top: 42px;
}

.bolsa {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(168, 204, 185, .28);
    border-radius: var(--radio);
    padding: 24px;
}

.bolsa h3 { font-size: 1.02rem; color: var(--sage); margin-bottom: .45em; }

.bolsa p { font-size: .94rem; margin-bottom: 0; }

/* --- Lista de módulos ---------------------------------------------------- */

/* Columnas por tramos, no automáticas: con 14 módulos, dejarlo automático hacía
   4 y 5 columnas en monitores anchos y la lista se volvía ilegible. */
.modulos {
    display: grid;
    gap: 0 clamp(24px, 3vw, 44px);
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

.grupos-modulos {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .grupos-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grupos-modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grupo-modulos h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-medio);
    margin-bottom: 4px;
}

/* --- La función que nos distingue, fuera de la lista -------------------- */

.modulo-estrella {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--blanco);
    border: 1px solid var(--sage);
    border-left: 4px solid var(--oro);
    border-radius: var(--radio);
    padding: 22px 26px;
    margin-bottom: clamp(28px, 3.5vw, 44px);
    text-decoration: none;
    box-shadow: var(--sombra);
    transition: box-shadow .18s ease, transform .18s ease;
}

.modulo-estrella:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.modulo-estrella .icono { margin-bottom: 0; flex: none; background: var(--oro); color: var(--tinta); }

.modulo-estrella-texto { flex: 1 1 260px; }
.modulo-estrella-texto strong { display: block; color: var(--teal); font-size: 1.06rem; font-weight: 700; }
.modulo-estrella-texto span { color: var(--cuerpo); font-size: .95rem; }

.modulo-estrella-liga { color: var(--teal-medio); font-weight: 600; font-size: .92rem; white-space: nowrap; }

.modulos li {
    padding: 15px 0 15px 28px;
    border-bottom: 1px solid var(--linea);
    position: relative;
}

.modulos li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 23px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oro);
}

.modulos strong { display: block; font-weight: 600; font-size: .98rem; }

.modulos span { color: var(--tenue); font-size: .9rem; }

/* --- Contacto ------------------------------------------------------------ */

.contacto-caja {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 46px;
    box-shadow: var(--sombra-alta);
    text-align: center;
}

.contacto-caja .entrada {
    color: var(--cuerpo);
    max-width: 540px;
    margin: 0 auto 30px;
    font-size: 1.04rem;
}

.contacto-caja .acciones { justify-content: center; }

.datos-contacto {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--linea);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 38px;
    justify-content: center;
    font-size: .94rem;
    color: var(--tenue);
}

.datos-contacto a { text-decoration: none; font-weight: 600; color: var(--teal); }
.datos-contacto a:hover { text-decoration: underline; }

/* --- Pie ----------------------------------------------------------------- */

.pie {
    background: var(--teal-oscuro);
    color: var(--sobre-oscuro);
    padding: 52px 0 38px;
    font-size: .92rem;
}

.pie img { height: 34px; margin-bottom: 18px; }

.pie p { max-width: 460px; }

.pie-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(168, 204, 185, .22);
    margin-top: 28px;
    padding-top: 22px;
}

.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; }

.pie-ligas { display: flex; flex-wrap: wrap; gap: 22px; }

/* --- Páginas de texto legal --------------------------------------------- */

.documento {
    max-width: 780px;
    margin: 0 auto;
    padding: 60px 28px 88px;
    color: var(--cuerpo);
}

.documento h1 { color: var(--tinta); }

.documento h2 {
    margin-top: 2em;
    font-size: 1.28rem;
    color: var(--teal);
    letter-spacing: 0;
    text-transform: none;
}

.documento ul { padding-left: 21px; }

.documento li { margin-bottom: 8px; }

.documento strong { color: var(--tinta); }

.aviso-borrador {
    background: #FBF0DC;
    border: 1px solid var(--oro);
    border-radius: var(--radio-chico);
    padding: 17px 21px;
    font-size: .93rem;
    color: #8A5E12;
    margin-bottom: 32px;
}

.aviso-borrador strong { color: #8A5E12; }

/* --- Pantallas chicas ---------------------------------------------------- */

@media (max-width: 900px) {
    .navegacion a:not(.boton) { display: none; }
}

@media (max-width: 780px) {
    section { padding: 62px 0; }
    .contacto-caja { padding: 32px 22px; }
    .pie-fila { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
    /* En pantallas muy angostas el menú lateral de la ilustración estorba más de
       lo que aporta: se quita y queda solo la agenda, que es lo que se entiende. */
    .mock-cuerpo { grid-template-columns: 1fr; }
    .mock-menu { display: none; }
    .acciones .boton { flex: 1 1 100%; text-align: center; }
}

/* ===========================================================================
   VIDA: apariciones, movimiento y profundidad
   ---------------------------------------------------------------------------
   Todo lo de aquí abajo es adorno: quita esta parte y el sitio sigue
   funcionando y viéndose completo. Dos cosas importantes:

     - Lo que ESCONDE algo para luego mostrarlo cuelga siempre de ".con-vida",
       una clase que pone /sitio/vida.js. Si ese archivo no carga, nada se
       esconde y la página se ve entera.
     - Quien tiene apagado el movimiento en su equipo no ve nada de esto: al
       final del archivo se cancela todo para esas personas.
   =========================================================================== */

/* --- La portada entra en escena ----------------------------------------- */

@keyframes entra-desde-abajo {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes entra-la-pantalla {
    from { opacity: 0; transform: translateY(26px) scale(.975); }
    to   { opacity: 1; transform: none; }
}

@keyframes flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.con-vida .portada-texto > * {
    animation: entra-desde-abajo .62s cubic-bezier(.22, .85, .3, 1) both;
}

/* Cada renglón de la portada entra un pelín después del anterior. */
.con-vida .portada-texto > *:nth-child(1) { animation-delay: .05s; }
.con-vida .portada-texto > *:nth-child(2) { animation-delay: .13s; }
.con-vida .portada-texto > *:nth-child(3) { animation-delay: .21s; }
.con-vida .portada-texto > *:nth-child(4) { animation-delay: .29s; }
.con-vida .portada-texto > *:nth-child(5) { animation-delay: .37s; }

.con-vida .portada-visual {
    animation: entra-la-pantalla .8s cubic-bezier(.22, .85, .3, 1) both;
    animation-delay: .22s;
}

/* La ilustración respira: se mece muy despacio. Lo justo para que la portada
   no se sienta una foto pegada. */
.con-vida .mock { animation: flota 7.5s ease-in-out infinite; }

/* --- Las secciones aparecen al bajar ------------------------------------ */

.con-vida .titulo-seccion,
.con-vida .tarjeta,
.con-vida .bolsa,
.con-vida .pasos li,
.con-vida .preguntas,
.con-vida .grupo-modulos,
.con-vida .contacto-caja {
    /* El contenido NUNCA arranca invisible. Antes empezaba en opacity 0 y, si el
       visitante bajaba rápido o el vigía tardaba, se topaba con un hueco en
       blanco del tamaño del bloque —pasó con las funciones y con los pasos—.
       Ahora la aparición es solo un deslizamiento corto: aunque el efecto no
       llegue a correr, lo que se ve es la página completa, nunca un vacío. */
    opacity: .999;
    transform: translateY(14px);
    transition: transform .55s cubic-bezier(.22, .85, .3, 1);
}

.con-vida .a-la-vista,
.con-vida.todo-visible .titulo-seccion,
.con-vida.todo-visible .tarjeta,
.con-vida.todo-visible .bolsa,
.con-vida.todo-visible .pasos li,
.con-vida.todo-visible .preguntas,
.con-vida.todo-visible .grupo-modulos,
.con-vida.todo-visible .contacto-caja {
    opacity: 1;
    transform: none;
}

/* El movimiento apagado en el equipo del visitante manda: nada se desliza. */
@media (prefers-reduced-motion: reduce) {
    .con-vida .titulo-seccion,
    .con-vida .tarjeta,
    .con-vida .bolsa,
    .con-vida .pasos li,
    .con-vida .preguntas,
    .con-vida .grupo-modulos,
    .con-vida .contacto-caja { transform: none; transition: none; }
}

/* --- La palabra que importa, subrayada en oro --------------------------- */

.resalte {
    position: relative;
    white-space: nowrap;
}

.resalte::after {
    content: "";
    position: absolute;
    left: -.04em;
    right: -.04em;
    bottom: .04em;
    height: .3em;
    background: var(--oro);
    opacity: .42;
    border-radius: 3px;
    z-index: -1;
}

h1 { position: relative; z-index: 0; }

/* --- La barra de arriba se compacta al bajar ---------------------------- */

.encabezado {
    transition: box-shadow .25s ease, background .25s ease;
}

.encabezado .contenedor-amplio { transition: min-height .25s ease; }

.encabezado.compacta {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 6px 22px rgba(18, 54, 64, .09);
}

.encabezado.compacta .contenedor-amplio { min-height: 64px; }

/* --- Profundidad: las tarjetas responden al puntero --------------------- */

.tarjeta {
    transition: transform .22s cubic-bezier(.22, .85, .3, 1),
                box-shadow .22s ease,
                border-color .22s ease;
}

.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(18, 54, 64, .11);
    border-color: var(--sage);
}

.icono { transition: transform .22s cubic-bezier(.34, 1.4, .5, 1), background .22s ease; }

.tarjeta:hover .icono { transform: scale(1.08) rotate(-4deg); background: var(--sage); }

.bolsa {
    transition: transform .22s cubic-bezier(.22, .85, .3, 1),
                background .22s ease,
                border-color .22s ease;
}

.bolsa:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .11);
    border-color: rgba(168, 204, 185, .55);
}

/* Los módulos se marcan al pasar encima: el punto dorado crece y el renglón
   se recorre apenas. Ayuda a leer una lista de catorce cosas. */
.modulos li { transition: transform .18s ease; }
.modulos li:hover { transform: translateX(4px); }
.modulos li::before { transition: transform .18s ease, box-shadow .18s ease; }
.modulos li:hover::before { transform: scale(1.45); box-shadow: 0 0 0 4px rgba(230, 185, 120, .22); }

/* --- El botón principal, con brillo al pasar ---------------------------- */

.boton { position: relative; overflow: hidden; }

.boton-principal::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
}

.boton-principal:hover::after { animation: brillo .7s ease; }

@keyframes brillo {
    to { left: 140%; }
}

.boton-principal:hover { box-shadow: 0 8px 20px rgba(28, 78, 92, .26); }

/* --- La sección oscura, como un panel que flota ------------------------- */

.seccion-teal {
    border-radius: clamp(0px, 3.2vw, 44px);
    margin: 0 clamp(0px, 2.2vw, 30px);
    background:
        radial-gradient(720px 340px at 12% 0%, rgba(46, 109, 126, .55), transparent 64%),
        radial-gradient(560px 300px at 92% 108%, rgba(230, 185, 120, .16), transparent 62%),
        var(--teal-oscuro);
    overflow: hidden;
}

/* --- La ilustración: dos pantallas que se turnan ------------------------
   Las dos ocupan la MISMA casilla, encimadas. Así el recuadro no cambia de
   alto al cambiar de pantalla (se queda del tamaño de la más grande) y no
   brinca el resto de la portada.
   ----------------------------------------------------------------------- */

.mock-panel { display: grid; }

.mock-pantalla {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* La que se va, se va rápido y sin esperar. */
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/* La que llega espera a que la anterior haya terminado de irse. Si entraran al
   mismo tiempo se verían los dos textos encimados un instante y se ve sucio. */
.mock-pantalla.on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .34s ease .2s, transform .34s ease .2s, visibility .34s .2s;
}

/* Sin JavaScript no hay clase "on" que se mueva: se queda la agenda, que es
   la que trae "on" escrita en el HTML. */

.mock-liga { transition: background .35s ease, color .35s ease; }

.mock-etiqueta { transition: background .35s ease, color .35s ease; }

.mock-cita { transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease; }

/* El momento en que el cliente confirma: el renglón se ilumina un instante. */
.mock-cita.recien {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(168, 204, 185, .3);
    transform: translateX(2px);
}

/* Pantalla de oportunidades */

.mock-total {
    background: var(--teal-oscuro);
    border-radius: 10px;
    padding: 11px 12px;
    margin-bottom: 11px;
}

.mock-total b {
    display: block;
    color: var(--oro);
    font-size: 1.75em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.mock-total span { color: #A9C4C8; font-size: .86em; }

.mock-op {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 10px;
    align-items: baseline;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
}

.mock-op-nombre {
    color: var(--tinta);
    font-size: .94em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock-op-monto {
    color: var(--teal);
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mock-op-barra {
    grid-column: 1 / -1;
    display: block;
    height: 4px;
    border-radius: 99px;
    background: var(--linea-clara);
    overflow: hidden;
}

.mock-op-barra i {
    display: block;
    height: 100%;
    width: var(--llena, 100%);
    border-radius: 99px;
    background: linear-gradient(90deg, var(--sage), var(--teal-medio));
    transform-origin: left center;
}

/* Las barras se llenan cada vez que se entra a esta pantalla. */
.mock-pantalla.on .mock-op-barra i { animation: se-llena .8s cubic-bezier(.22, .85, .3, 1) .24s both; }
.mock-pantalla.on .mock-op:nth-child(4) .mock-op-barra i { animation-delay: .33s; }
.mock-pantalla.on .mock-op:nth-child(5) .mock-op-barra i { animation-delay: .42s; }

@keyframes se-llena {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Los números que suben no deben bailar de ancho mientras cuentan. */
.mock-stat b { font-variant-numeric: tabular-nums; }

/* --- Movimiento apagado -------------------------------------------------
   Si en su equipo pidieron menos movimiento, se respeta: todo queda quieto y
   visible. vida.js tampoco arranca nada en ese caso; esto es el cinturón por
   si algo se colara.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .con-vida .titulo-seccion,
    .con-vida .tarjeta,
    .con-vida .bolsa,
    .con-vida .grupo-modulos,
    .con-vida .contacto-caja,
    .con-vida .portada-texto > *,
    .con-vida .portada-visual {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- Cómo empieza: los cuatro pasos -------------------------------------- */

.pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    counter-reset: paso;
}

.pasos li {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 26px;
    box-shadow: var(--sombra);
    position: relative;
}

.paso-numero {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--blanco);
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 14px;
}

.pasos h3 { color: var(--teal); margin-bottom: .35em; }
.pasos p { color: var(--cuerpo); font-size: .97rem; margin-bottom: 0; }

/* --- Preguntas frecuentes ------------------------------------------------ */

/* Se abren y cierran con <details>, sin JavaScript: si algo fallara al cargar,
   las respuestas siguen ahí y siguen siendo legibles. */
.preguntas {
    max-width: 820px;
    border-top: 1px solid var(--linea);
}

.preguntas details {
    border-bottom: 1px solid var(--linea);
}

.preguntas summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 44px 20px 0;
    font-weight: 600;
    color: var(--tinta);
    position: relative;
}

.preguntas summary::-webkit-details-marker { display: none; }

/* La cruz que gira: cerrada es un "+", abierta es una "×". */
.preguntas summary::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -6px;
    background:
        linear-gradient(var(--teal-medio), var(--teal-medio)) center/13px 1.8px no-repeat,
        linear-gradient(var(--teal-medio), var(--teal-medio)) center/1.8px 13px no-repeat;
    transition: transform .2s ease;
}

.preguntas details[open] summary::after { transform: rotate(45deg); }

.preguntas summary:hover { color: var(--teal); }

.preguntas summary:focus-visible {
    outline: 2px solid var(--teal-medio);
    outline-offset: 3px;
    border-radius: var(--radio-chico);
}

.preguntas details p {
    color: var(--cuerpo);
    font-size: .97rem;
    margin: 0 0 22px;
    padding-right: 44px;
    max-width: 68ch;
}

/* Botón de tercera línea: para el camino que no obliga a hablar con nadie. */
.boton-fantasma {
    background: transparent;
    color: var(--teal-medio);
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.boton-fantasma:hover { color: var(--teal); background: var(--agua); text-decoration: none; }

/* --- Impresión y PDF ----------------------------------------------------- */

/* La página se manda en PDF de vez en cuando (por correo, por WhatsApp). Sin
   esto salía en blanco y negro, con el menú encimado y las tarjetas partidas a
   la mitad entre una hoja y otra. */
@page { margin: 14mm 12mm; }

@media print {
    /* Los fondos de color son parte de la marca: se imprimen. */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Nada de movimiento ni de barras pegadas al bajar. */
    .con-vida .titulo-seccion,
    .con-vida .tarjeta,
    .con-vida .bolsa,
    .con-vida .pasos li,
    .con-vida .preguntas,
    .con-vida .grupo-modulos,
    .con-vida .contacto-caja { transform: none; transition: none; }

    .con-vida .mock { animation: none; }
    .encabezado { position: static; background: var(--blanco); }
    .navegacion .boton { display: none; }

    section { padding: 34px 0; }

    /* Que nada se parta a la mitad entre dos hojas. */
    .tarjeta, .bolsa, .pasos li, .grupo-modulos, .contacto-caja,
    .preguntas details, .modulo-estrella, .titulo-seccion {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    h2, h3 { break-after: avoid; page-break-after: avoid; }

    /* En papel no hay a dónde dar clic: las respuestas van todas abiertas. */
    .preguntas details > *:not(summary) { display: block; }
    .preguntas summary::after { display: none; }

    /* La liga de WhatsApp no sirve en una hoja; el dato de contacto sí. */
    .acciones .boton { border: 1.5px solid var(--teal); color: var(--teal); background: var(--blanco); }
}