/* ==========================================================================
   BIANCHINI AGROTECH — SECCIONES NUEVAS
   --------------------------------------------------------------------------
   Estilos de los bloques que se sumaron a la home y de las páginas
   /funciones y /soluciones. Usa los tokens de base_tokens.css y las
   utilidades de animaciones.css; no redefine ninguno de los dos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ESTRUCTURA COMÚN
   -------------------------------------------------------------------------- */
.ag-seccion { padding: var(--e-seccion) 5%; }
.ag-ancho   { max-width: var(--ancho); margin-inline: auto; }
.ag-angosto { max-width: 780px; margin-inline: auto; }

.ag-oscura  { background: var(--tinta-900); color: var(--texto-inv); }
.ag-oscura h2, .ag-oscura h3 { color: var(--texto-inv); }
.ag-oscura p  { color: var(--texto-inv-2); }
.ag-clara   { background: var(--papel-2); }

.ag-encabezado { max-width: 760px; margin: 0 auto var(--e-7); text-align: center; }
.ag-volanta {
    display: inline-flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-micro); font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tinta-600);
    background: var(--tinta-100); padding: 6px 14px; border-radius: var(--r-full);
    margin-bottom: var(--e-4);
}
.ag-oscura .ag-volanta { background: rgba(255,255,255,.10); color: var(--acento); }
.ag-titulo   { font-size: var(--t-h2); font-weight: 900; color: var(--tinta-900);
               line-height: 1.15; margin: 0 0 var(--e-4); letter-spacing: -.02em; }
.ag-oscura .ag-titulo { color: var(--texto-inv); }
.ag-bajada   { font-size: var(--t-cuerpo); color: var(--texto-2); line-height: 1.65; margin: 0; }
.ag-oscura .ag-bajada { color: var(--texto-inv-2); }

/* ==========================================================================
   1. MAPA DE MÓDULOS
   --------------------------------------------------------------------------
   La grilla que muestra el sistema entero de un vistazo. Cada ficha abre un
   panel `popover` con el detalle, así nadie tiene que scrollear 8000px para
   enterarse de que existe el módulo de cheques.
   ========================================================================== */
.mapa-grupos { display: grid; gap: var(--e-6); }
.mapa-grupo-titulo {
    display: flex; align-items: center; gap: var(--e-3);
    font-size: var(--t-micro); font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--texto-3); margin: 0 0 var(--e-3);
}
.mapa-grupo-titulo::after {
    content: ""; flex: 1; height: 1px; background: var(--linea);
}
.mapa-grilla {
    display: grid; gap: var(--e-3);
    /* auto-FIT, no auto-fill, con techo de 260px.
       Los grupos tienen entre 2 y 4 módulos. Con `auto-fill` el navegador
       crea igual las 5 columnas que entrarían y deja media fila vacía a la
       derecha: se lee como si faltara algo. Con `auto-fit` esas columnas
       vacías se colapsan.
       El techo de 260px cumple dos cosas: que un grupo de 2 no se estire
       como cartel, y que en un monitor de 1280 entren exactamente 4 y no 3
       (con 280 quedaba justo afuera y Postventa partía 3 + 1 huérfana).
       Y `justify-content: center` hace que la fila corta se lea como una
       decisión de diseño y no como un hueco. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 260px));
    justify-content: center;
}
.modulo-ficha {
    --tono: var(--tinta-600);
    position: relative; display: flex; flex-direction: column; gap: 6px;
    text-align: left; padding: var(--e-4); min-height: 128px;
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--r-3); cursor: pointer; font: inherit; color: inherit;
    transition: transform var(--v-rapido) var(--ease-salida),
                box-shadow var(--v-rapido) var(--ease-salida),
                border-color var(--v-rapido) var(--ease-salida);
    overflow: hidden;
}
.modulo-ficha::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--tono); transform: scaleX(0); transform-origin: left;
    transition: transform var(--v-medio) var(--ease-salida);
}
.modulo-ficha:hover, .modulo-ficha:focus-visible {
    transform: translateY(-4px); box-shadow: var(--s-3); border-color: var(--tono);
}
.modulo-ficha:hover::before, .modulo-ficha:focus-visible::before { transform: scaleX(1); }
.modulo-ficha .mf-icono  { font-size: 1.6rem; line-height: 1; }
.modulo-ficha .mf-nombre { font-weight: 800; color: var(--tinta-900); font-size: .95rem;
                           line-height: 1.25; }
.modulo-ficha .mf-frase  { font-size: .8rem; color: var(--texto-3); line-height: 1.45; }
.modulo-ficha .mf-mas {
    margin-top: auto; font-size: var(--t-micro); font-weight: 700; color: var(--tono);
    opacity: 0; transform: translateX(-4px);
    transition: opacity var(--v-rapido), transform var(--v-rapido);
}
.modulo-ficha:hover .mf-mas, .modulo-ficha:focus-visible .mf-mas { opacity: 1; transform: none; }

/* --- El panel que se abre --------------------------------------------- */
.panel-modulo .pm-cabecera {
    padding: var(--e-6) var(--e-6) var(--e-4);
    background: linear-gradient(160deg, var(--tinta-900), var(--tinta-700));
    color: var(--texto-inv); border-radius: var(--r-4) var(--r-4) 0 0;
    position: relative;
}
.panel-modulo .pm-icono  { font-size: 2.2rem; display: block; margin-bottom: var(--e-2); }
.panel-modulo .pm-nombre { font-size: 1.4rem; font-weight: 900; margin: 0 0 6px; color: #fff; }
.panel-modulo .pm-frase  { margin: 0; color: var(--acento); font-weight: 600; font-size: .98rem; }
.panel-modulo .pm-cerrar {
    position: absolute; top: var(--e-3); right: var(--e-3);
    width: 34px; height: 34px; border-radius: var(--r-full); border: none;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem;
    cursor: pointer; line-height: 1;
    transition: background var(--v-rapido);
}
.panel-modulo .pm-cerrar:hover { background: rgba(255,255,255,.3); }
.panel-modulo .pm-cuerpo { padding: var(--e-5) var(--e-6) var(--e-6); }
.panel-modulo .pm-dolor {
    background: var(--peligro-bg); border-left: 3px solid var(--peligro);
    padding: var(--e-3) var(--e-4); border-radius: 0 var(--r-1) var(--r-1) 0;
    font-size: var(--t-chico); color: var(--texto); margin: 0 0 var(--e-4);
}
.panel-modulo .pm-dolor b { color: var(--peligro); }
.panel-modulo .pm-texto { color: var(--texto-2); line-height: 1.65; margin: 0 0 var(--e-4);
                          font-size: var(--t-chico); }
.panel-modulo ul.pm-lista { list-style: none; padding: 0; margin: 0 0 var(--e-5); display: grid; gap: 10px; }
.panel-modulo ul.pm-lista li {
    display: grid; grid-template-columns: 20px 1fr; gap: var(--e-2);
    font-size: var(--t-chico); color: var(--texto); line-height: 1.5;
}
.panel-modulo ul.pm-lista li::before { content: "✓"; color: var(--ok); font-weight: 900; }
.panel-modulo .pm-pie {
    display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center;
    padding-top: var(--e-4); border-top: 1px solid var(--linea);
}
.panel-modulo .pm-roles { font-size: var(--t-micro); color: var(--texto-3); }
.panel-modulo .pm-roles b { color: var(--texto-2); }

.ag-boton-linea {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
    font-size: var(--t-chico); color: var(--tinta-600); text-decoration: none;
    border: 1px solid var(--tinta-200); border-radius: var(--r-full);
    padding: 8px 16px; background: var(--papel);
    transition: background var(--v-rapido), border-color var(--v-rapido), color var(--v-rapido);
}
.ag-boton-linea:hover { background: var(--tinta-900); border-color: var(--tinta-900); color: var(--acento); }

/* ==========================================================================
   2. SELECTOR DE ROL
   ========================================================================== */
.roles-botones {
    display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center;
    margin-bottom: var(--e-6);
}
.rol-chip {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 18px; border-radius: var(--r-full); font: inherit;
    font-size: var(--t-chico); font-weight: 700;
    border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--texto-2);
    transition: all var(--v-rapido) var(--ease-salida);
}
.rol-chip:hover { border-color: var(--tinta-400); color: var(--tinta-700); transform: translateY(-2px); }
.rol-chip[aria-pressed="true"] {
    background: var(--tinta-900); border-color: var(--tinta-900);
    color: var(--acento); box-shadow: var(--s-2);
}
.rol-panel { display: none; }
.rol-panel.activo { display: block; }
.rol-resultado {
    display: grid; gap: var(--e-3);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.rol-item {
    background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--tinta-500);
    border-radius: var(--r-2); padding: var(--e-4); text-decoration: none; color: inherit;
    display: block; transition: transform var(--v-rapido), box-shadow var(--v-rapido);
}
.rol-item:hover { transform: translateY(-3px); box-shadow: var(--s-2); }
.rol-item strong { display: block; color: var(--tinta-900); font-size: .95rem; margin-bottom: 4px; }
.rol-item span   { font-size: var(--t-micro); color: var(--texto-3); line-height: 1.5; }

/* ==========================================================================
   3. UN DÍA EN LA CONCESIONARIA
   ========================================================================== */
.dia-tarjeta {
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-3);
    padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3);
    box-shadow: var(--s-1); position: relative;
}
.dia-hora {
    font-size: 1.6rem; font-weight: 900; color: var(--tinta-900);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
}
.dia-quien {
    font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--tinta-500);
}
/* OJO CON LA ESPECIFICIDAD (bug real que hubo acá):
   la sección es .ag-oscura y tiene la regla `.ag-oscura p { color: blanco }`,
   que vale 0-1-1. Pero las tarjetas del carril son BLANCAS. Un `.dia-que`
   suelto vale 0-1-0 y perdía, así que el texto salía blanco sobre blanco y
   la tarjeta se veía vacía. Calificarlo con la tarjeta lo lleva a 0-2-0 y
   gana. Lo mismo vale para cualquier tarjeta clara que se meta adentro de
   una sección oscura. */
.dia-tarjeta .dia-que {
    font-size: var(--t-chico); color: var(--texto-2); line-height: 1.6;
    margin: 0; flex: 1;
}
.dia-modulo {
    font-size: var(--t-micro); font-weight: 700; color: var(--tinta-600);
    text-decoration: none; border-top: 1px dashed var(--linea-fuerte); padding-top: var(--e-3);
}
.dia-modulo:hover { color: var(--tinta-900); }
.dia-pista {
    text-align: center; font-size: var(--t-micro); color: var(--texto-3);
    margin-top: var(--e-2);
}

/* ==========================================================================
   4. MAPA DE GEOMARKETING (SVG dibujado)
   ========================================================================== */
.geo-lienzo {
    position: relative; border-radius: var(--r-4); overflow: hidden;
    background: var(--tinta-950); box-shadow: var(--s-4);
    border: 1px solid rgba(255,255,255,.08);
}
.geo-lienzo svg { display: block; width: 100%; height: auto; }
.geo-leyenda {
    display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: center;
    margin-top: var(--e-4); font-size: var(--t-micro); color: var(--texto-inv-2);
}
.geo-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.geo-punto { width: 10px; height: 10px; border-radius: var(--r-full); display: inline-block; }

/* ==========================================================================
   5. LISTA DE CAPACIDADES (usada en varias secciones)
   ========================================================================== */
ul.ag-lista { list-style: none; padding: 0; margin: var(--e-5) 0 0; display: grid; gap: var(--e-3); }
ul.ag-lista li {
    display: grid; grid-template-columns: 24px 1fr; gap: var(--e-3);
    line-height: 1.6; font-size: var(--t-chico);
}
ul.ag-lista li::before {
    content: "→"; color: var(--tinta-500); font-weight: 900;
}
.ag-oscura ul.ag-lista li { color: var(--texto-inv-2); }
.ag-oscura ul.ag-lista li::before { color: var(--acento); }
ul.ag-lista li b { color: var(--tinta-900); }
.ag-oscura ul.ag-lista li b { color: #fff; }

/* ==========================================================================
   6. TARJETAS GENÉRICAS
   ========================================================================== */
.ag-tarjetas {
    display: grid; gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ag-tarjeta {
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-3);
    padding: var(--e-5); box-shadow: var(--s-1);
    transition: transform var(--v-rapido) var(--ease-salida), box-shadow var(--v-rapido);
}
.ag-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--s-3); }
.ag-tarjeta .at-icono { font-size: 1.8rem; display: block; margin-bottom: var(--e-3); }
.ag-tarjeta h3 { font-size: var(--t-h3); color: var(--tinta-900); margin: 0 0 var(--e-2); font-weight: 800; }
.ag-tarjeta p  { font-size: var(--t-chico); color: var(--texto-2); line-height: 1.6; margin: 0; }
.ag-oscura .ag-tarjeta {
    background: rgba(255,255,255,.05); border-color: var(--linea-inv);
}
.ag-oscura .ag-tarjeta h3 { color: #fff; }
.ag-oscura .ag-tarjeta p  { color: var(--texto-inv-2); }

/* ==========================================================================
   7. DIAGNÓSTICO (reemplaza a la calculadora de dos sliders)
   ========================================================================== */
.diag-caja {
    background: var(--papel); border-radius: var(--r-4); box-shadow: var(--s-3);
    border: 1px solid var(--linea); overflow: hidden;
    display: grid; grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 860px) { .diag-caja { grid-template-columns: 1fr; } }

.diag-preguntas { padding: var(--e-6); }
.diag-paso { border-bottom: 1px solid var(--linea); padding: var(--e-4) 0; }
.diag-paso:first-child { padding-top: 0; }
.diag-paso:last-child  { border-bottom: none; }
.diag-pregunta { font-weight: 700; color: var(--tinta-900); font-size: var(--t-chico);
                 margin: 0 0 var(--e-3); display: block; }
.diag-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.diag-op {
    cursor: pointer; padding: 8px 15px; border-radius: var(--r-full);
    border: 1px solid var(--linea-fuerte); background: var(--papel);
    font: inherit; font-size: var(--t-micro); font-weight: 700; color: var(--texto-2);
    transition: all var(--v-rapido) var(--ease-salida);
}
.diag-op:hover { border-color: var(--tinta-400); transform: translateY(-1px); }
.diag-op[aria-pressed="true"] { background: var(--tinta-600); border-color: var(--tinta-600); color: #fff; }

.diag-slider { width: 100%; margin-top: var(--e-2); }
.diag-valor  { font-weight: 800; color: var(--tinta-700); font-variant-numeric: tabular-nums; }

.diag-resultado {
    background: linear-gradient(165deg, var(--tinta-900), var(--tinta-800));
    color: var(--texto-inv); padding: var(--e-6); display: flex; flex-direction: column;
}
.diag-resultado h3 { color: #fff; font-size: var(--t-h3); margin: 0 0 var(--e-2); font-weight: 800; }
.diag-sub { font-size: var(--t-micro); color: var(--texto-inv-3); margin: 0 0 var(--e-5); }
.diag-precio {
    font-size: 2.6rem; font-weight: 900; color: var(--acento); line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.diag-precio-pie { font-size: var(--t-micro); color: var(--texto-inv-3); margin: 6px 0 var(--e-5); }
.diag-modulos { list-style: none; padding: 0; margin: 0 0 var(--e-5); display: grid; gap: 7px; }
.diag-modulos li {
    display: flex; align-items: center; gap: 9px; font-size: var(--t-chico);
    color: var(--texto-inv-2); background: rgba(255,255,255,.06);
    padding: 9px 13px; border-radius: var(--r-2);
    animation: ag-aparecer .4s var(--ease-salida) both;
}
.diag-modulos li .dm-ico { font-size: 1.05rem; }
.diag-nota {
    margin-top: auto; font-size: var(--t-micro); color: var(--texto-inv-3);
    line-height: 1.55; border-top: 1px solid var(--linea-inv); padding-top: var(--e-3);
}

/* ==========================================================================
   8. PREGUNTAS FRECUENTES
   ========================================================================== */
.faq-lista { max-width: 780px; margin-inline: auto; }

/* ==========================================================================
   9. PÁGINAS /funciones Y /soluciones
   ========================================================================== */
.pag-heroe {
    background: linear-gradient(160deg, var(--tinta-900) 0%, var(--tinta-700) 100%);
    color: var(--texto-inv); padding: calc(var(--e-8) + 40px) 5% var(--e-8);
}
.pag-heroe .ag-ancho { max-width: 900px; }
.pag-migas { font-size: var(--t-micro); color: var(--texto-inv-3); margin-bottom: var(--e-4); }
.pag-migas a { color: var(--texto-inv-2); text-decoration: none; }
.pag-migas a:hover { color: var(--acento); text-decoration: underline; }
.pag-h1 {
    font-size: var(--t-display); font-weight: 900; line-height: 1.08;
    margin: 0 0 var(--e-4); letter-spacing: -.03em; color: #fff;
}
.pag-frase { font-size: 1.2rem; color: var(--acento); font-weight: 600; margin: 0 0 var(--e-4); }
.pag-intro { font-size: var(--t-cuerpo); color: var(--texto-inv-2); line-height: 1.7; margin: 0;
             max-width: var(--ancho-texto); }
.pag-icono-grande { font-size: 3.2rem; display: block; margin-bottom: var(--e-4); }

.pag-cuerpo { padding: var(--e-seccion) 5%; }
.pag-cuerpo h2 { font-size: var(--t-h2); color: var(--tinta-900); font-weight: 900;
                 margin: 0 0 var(--e-4); letter-spacing: -.02em; }
.pag-cuerpo p  { color: var(--texto-2); line-height: 1.75; max-width: var(--ancho-texto); }

.pag-relacionados { display: grid; gap: var(--e-3);
                    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pag-rel {
    display: flex; gap: var(--e-3); align-items: flex-start; text-decoration: none;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-3);
    padding: var(--e-4); transition: transform var(--v-rapido), box-shadow var(--v-rapido);
}
.pag-rel:hover { transform: translateY(-3px); box-shadow: var(--s-2); }
.pag-rel .pr-ico { font-size: 1.5rem; }
.pag-rel strong  { display: block; color: var(--tinta-900); font-size: .92rem; margin-bottom: 3px; }
.pag-rel span    { font-size: var(--t-micro); color: var(--texto-3); line-height: 1.45; }

.pag-cta {
    background: var(--tinta-900); color: var(--texto-inv); text-align: center;
    padding: var(--e-8) 5%; border-top: 4px solid var(--acento);
}
.pag-cta h2 { color: #fff; font-size: var(--t-h2); margin: 0 0 var(--e-3); font-weight: 900; }
.pag-cta p  { color: var(--texto-inv-2); margin: 0 auto var(--e-5); max-width: 560px; }

/* ==========================================================================
   10. AJUSTES FINOS SOBRE LO QUE YA EXISTÍA
   ========================================================================== */

/* El video pesa 9 MB: que no se descargue hasta que alguien lo pida. */
.video-container-wrapper video { background: #000; }

/* Enlaces salteadores para quien navega con teclado o lector de pantalla. */
.saltar-al-contenido {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--tinta-900); color: var(--acento); padding: 12px 20px;
    border-radius: 0 0 var(--r-2) 0; font-weight: 700; text-decoration: none;
}
.saltar-al-contenido:focus { left: 0; }

/* ==========================================================================
   11. MOCKUPS DE LAS SECCIONES NUEVAS
   --------------------------------------------------------------------------
   Son pantallas del sistema dibujadas con CSS, no capturas. Pesan nada,
   se leen en cualquier tamaño y no quedan viejas cuando cambia la interfaz.
   ========================================================================== */

/* --- Ficha de máquina (Postventa) ------------------------------------- */
.ficha-maquina {
    background: var(--papel); border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-3); overflow: hidden; box-shadow: var(--s-3);
    font-size: var(--t-chico);
}
.fm-barra {
    display: flex; align-items: center; gap: 6px;
    background: var(--papel-3); padding: 10px var(--e-4);
    border-bottom: 1px solid var(--linea);
}
.fm-punto { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--linea-fuerte); }
.fm-ruta  { margin-left: var(--e-3); font-size: var(--t-micro); color: var(--texto-3); font-weight: 600; }
.fm-cabecera {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3);
    padding: var(--e-4); border-bottom: 1px solid var(--linea);
}
.fm-cabecera strong { display: block; color: var(--tinta-900); font-size: 1.02rem; }
.fm-cabecera span   { font-size: var(--t-micro); color: var(--texto-3); }
.fm-chip {
    font-size: var(--t-micro); font-weight: 800; padding: 5px 11px;
    border-radius: var(--r-full); white-space: nowrap;
}
.fm-chip-ok { background: var(--ok-bg); color: var(--ok); }
.fm-fila {
    display: grid; grid-template-columns: 124px 1fr; gap: var(--e-3);
    padding: 11px var(--e-4); border-bottom: 1px solid var(--papel-3);
    transition: background var(--v-medio) var(--ease-suave);
}
.fm-fila.destacada { background: color-mix(in oklab, var(--acento) 22%, transparent); }
.fm-rotulo { font-size: var(--t-micro); color: var(--texto-3); font-weight: 700;
             text-transform: uppercase; letter-spacing: .05em; }
.fm-valor  { color: var(--texto); line-height: 1.45; }
.fm-valor em { color: var(--texto-3); font-style: normal; font-size: var(--t-micro); }
.fm-pie {
    display: flex; flex-wrap: wrap; gap: var(--e-4); padding: var(--e-3) var(--e-4);
    background: var(--papel-2); font-size: var(--t-micro); color: var(--texto-3); font-weight: 600;
}

/* --- Pasos de postventa ------------------------------------------------ */
.paso-postventa {
    border-left: 2px solid var(--linea); padding-left: var(--e-5);
    transition: border-color var(--v-medio) var(--ease-suave), opacity var(--v-medio);
}
.paso-postventa.activo { border-left-color: var(--acento); }
.pp-numero {
    display: block; font-size: var(--t-micro); font-weight: 900; letter-spacing: .12em;
    color: var(--tinta-400); margin-bottom: var(--e-2);
}
.paso-postventa.activo .pp-numero { color: var(--tinta-700); }
.paso-postventa h3 {
    font-size: var(--t-h3); color: var(--tinta-900); font-weight: 800;
    margin: 0 0 var(--e-3); line-height: 1.25;
}
.paso-postventa p { color: var(--texto-2); line-height: 1.7; margin: 0 0 var(--e-4);
                    font-size: var(--t-chico); max-width: 52ch; }

/* --- Cartera de cheques ------------------------------------------------ */
.cartera {
    background: var(--papel); border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-3); overflow: hidden; box-shadow: var(--s-3);
}
.cartera-cabecera {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--e-4); background: var(--tinta-900); color: #fff;
    font-weight: 800; font-size: var(--t-chico);
}
.cartera-total { color: var(--acento); font-variant-numeric: tabular-nums; }
.cheque-fila {
    display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
    padding: var(--e-4); border-bottom: 1px solid var(--papel-3);
}
.cheque-fila:last-of-type { border-bottom: none; }
.cf-izq strong { display: block; color: var(--tinta-900); font-size: .92rem; }
.cf-izq span   { font-size: var(--t-micro); color: var(--texto-3); }
.cf-der { text-align: right; }
.cf-monto {
    display: block; font-weight: 800; color: var(--texto);
    font-variant-numeric: tabular-nums; font-size: .95rem;
}
.cf-estado {
    display: inline-block; margin-top: 3px; font-size: var(--t-micro); font-weight: 700;
    padding: 3px 9px; border-radius: var(--r-full);
}
.cf-en-cartera { background: var(--papel-3);    color: var(--texto-3); }
.cf-proximo    { background: var(--alerta-bg);  color: var(--alerta); }
.cf-vencido    { background: var(--peligro-bg); color: var(--peligro); }
.cartera-pie {
    padding: var(--e-3) var(--e-4); background: var(--papel-2);
    font-size: var(--t-micro); color: var(--texto-3); line-height: 1.5;
    border-top: 1px solid var(--linea);
}

/* --- Cita dura (el remate de una sección) ------------------------------ */
.cita-dura {
    margin-top: var(--e-5); padding: var(--e-4) var(--e-5);
    background: var(--tinta-50); border-left: 3px solid var(--tinta-600);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    font-size: var(--t-chico); color: var(--texto-2); line-height: 1.65;
}
.cita-dura b { color: var(--tinta-900); }
.ag-oscura .cita-dura { background: rgba(255,255,255,.06); border-left-color: var(--acento);
                        color: var(--texto-inv-2); }
.ag-oscura .cita-dura b { color: #fff; }

/* ==========================================================================
   12. LA BARRA DE ARRIBA SE ACHICA AL BAJAR
   --------------------------------------------------------------------------
   La clase la pone secciones.js. Sin JavaScript la barra queda como estaba:
   un poco más alta, y nada más.
   ========================================================================== */
.navbar { transition: padding var(--v-medio) var(--ease-salida),
                      box-shadow var(--v-medio) var(--ease-salida),
                      background-color var(--v-medio) var(--ease-salida); }
.navbar-compacta {
    box-shadow: var(--s-2);
    backdrop-filter: blur(10px);
    background-color: color-mix(in oklab, var(--papel) 88%, transparent);
}
.navbar-compacta .logo-img { scale: .88; transition: scale var(--v-medio) var(--ease-salida); }
.logo-img { transition: scale var(--v-medio) var(--ease-salida); transform-origin: left center; }

/* En pantallas chicas el menú tiene más items que antes: que no se amontone. */
@media (max-width: 980px) {
    .nav-links { display: none; }
}

/* La línea de cierre de la lista del diagnóstico: no es un módulo, es el
   resumen de los que no entraron. Se distingue para que no se lea como uno más. */
.diag-modulos .dm-resto {
    background: none; border: 1px dashed var(--linea-inv);
    color: var(--texto-inv-3); font-style: italic; justify-content: center;
}

/* --- Panel del asistente ----------------------------------------------- */
.asistente-panel {
    max-width: 840px; margin-inline: auto;
    background: rgba(255,255,255,.05); border: 1px solid var(--linea-inv);
    border-radius: var(--r-4); overflow: hidden;
}
.ap-barra {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--e-4) var(--e-5); background: rgba(0,0,0,.25);
    border-bottom: 1px solid var(--linea-inv);
}
.ap-titulo { font-weight: 800; color: #fff; font-size: var(--t-chico); }
.ap-fecha  { font-size: var(--t-micro); color: var(--texto-inv-3); }
.ap-lista  {
    list-style: none; margin: 0; padding: var(--e-3);
    display: grid; gap: 8px;
}
.ap-item {
    display: grid; grid-template-columns: 34px 1fr auto; gap: var(--e-3);
    align-items: center; padding: var(--e-3) var(--e-4);
    background: rgba(255,255,255,.04); border-radius: var(--r-2);
    border: 1px solid transparent;
    transition: background var(--v-rapido), border-color var(--v-rapido);
}
.ap-item:hover { background: rgba(255,255,255,.09); border-color: var(--linea-inv); }
.ap-ico { font-size: 1.3rem; }
.ap-texto strong { display: block; color: #fff; font-size: .93rem; margin-bottom: 3px; }
.ap-texto span   { font-size: var(--t-micro); color: var(--texto-inv-3); line-height: 1.5; }
.ap-etiqueta {
    font-size: var(--t-micro); font-weight: 800; color: var(--acento);
    background: rgba(247,255,77,.12); padding: 5px 11px; border-radius: var(--r-full);
    white-space: nowrap;
}
.ap-pie {
    padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea-inv);
    font-size: var(--t-micro); color: var(--texto-inv-3); line-height: 1.55;
}
@media (max-width: 620px) {
    .ap-item { grid-template-columns: 28px 1fr; }
    .ap-etiqueta { grid-column: 2; justify-self: start; }
}

/* --- Registro de auditoría --------------------------------------------- */
.registro {
    background: var(--papel); border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-3); overflow: hidden; box-shadow: var(--s-3);
    font-size: var(--t-micro);
}
.reg-cabecera {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--e-4); background: var(--tinta-900); color: #fff;
    font-weight: 800; font-size: var(--t-chico);
}
.reg-hoy { color: var(--acento); font-weight: 700; }
.reg-encabezados, .reg-fila {
    display: grid; grid-template-columns: 52px 84px 1fr 1.3fr; gap: var(--e-2);
    padding: 10px var(--e-4); align-items: center;
}
.reg-encabezados {
    background: var(--papel-3); color: var(--texto-3); font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
}
.reg-fila { border-bottom: 1px solid var(--papel-3); }
.reg-fila:last-child { border-bottom: none; }
.reg-hora  { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.reg-quien { font-weight: 700; color: var(--tinta-800); }
.reg-donde { color: var(--texto-2); }
.reg-cambio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reg-cambio em { font-style: normal; color: var(--texto-3); font-weight: 700; }
.reg-antes {
    background: var(--peligro-bg); color: var(--peligro);
    padding: 2px 7px; border-radius: var(--r-1); text-decoration: line-through;
}
.reg-despues {
    background: var(--ok-bg); color: var(--ok);
    padding: 2px 7px; border-radius: var(--r-1); font-weight: 700;
}
.reg-flecha { color: var(--texto-3); }
.reg-alto   { background: color-mix(in oklab, var(--peligro) 7%, transparent); }
@media (max-width: 760px) {
    .reg-encabezados { display: none; }
    .reg-fila { grid-template-columns: 1fr; gap: 4px; }
    .reg-quien::before { content: "· "; }
}

/* ==========================================================================
   13. ARREGLO DE ESPECIFICIDAD EN /funciones
   --------------------------------------------------------------------------
   `.pag-cuerpo h2` (0-1-1) le gana a `.mapa-grupo-titulo` (0-1-0), así que
   los rótulos de grupo salían con el tamaño de un título de sección: VENTAS
   ocupaba media pantalla. Calificarlo con el contenedor lo lleva a 0-2-0.
   Es el mismo choque que hubo con .dia-que; cuando una utilidad chica vive
   adentro de un contenedor que estiliza por etiqueta, hay que calificarla.
   ========================================================================== */
.pag-cuerpo h2.mapa-grupo-titulo {
    font-size: var(--t-micro); font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--texto-3); margin: 0 0 var(--e-3);
}

/* En el celular el techo de 260px deja márgenes al pepe a los costados.
   Abajo de 560px la ficha ocupa el ancho disponible. */
@media (max-width: 560px) {
    .mapa-grilla { grid-template-columns: 1fr; }
    .modulo-ficha { min-height: 0; }
}

/* ==========================================================================
   14. LÍNEA DE PRUEBAS DEL HERO
   --------------------------------------------------------------------------
   Las tres razones para seguir leyendo, abajo de los botones de la portada.
   Van acá y no como estilo suelto en index.php porque tienen que compensar
   el `margin-bottom: 60px` de `.hero-actions` (styles.css): un margen
   negativo escrito a mano en el HTML queda huérfano el día que alguien
   toque ese 60px y nadie se entera hasta verlo desfasado.
   ========================================================================== */
.hero-pruebas {
    margin: -38px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--texto-2, #555);
}

/* En el celular los botones se apilan y el hueco se achica solo: ahí el
   margen negativo sobra y encima los tres avisos entran mejor en columna. */
@media (max-width: 700px) {
    .hero-pruebas {
        margin-top: -20px;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
}

/* --------------------------------------------------------------------------
   RED DE CONTENCIÓN DE LA PALABRA QUE ROTA EN EL HERO
   --------------------------------------------------------------------------
   `.hero-title span` (styles.css) es un inline-block con un min-width que
   le reserva el lugar a la palabra más larga, para que el título no se mueva
   mientras se tipea. Lo que le faltaba era el nowrap: sin él, una palabra más
   ancha que la caja se PARTE EN DOS ADENTRO del span y el título crece un
   renglón entero en cada vuelta del ciclo.

   Es lo que pasaba con "tus vendedores." (455px contra una caja de 380).
   La lista de main.js ya está medida y entra, así que esto no cambia nada
   hoy: está para que el día que alguien agregue una palabra sin medirla, se
   corra de costado en vez de hacer saltar la portada.
   -------------------------------------------------------------------------- */
.hero-title span {
    white-space: nowrap;
}

/* ==========================================================================
   15. LA PANTALLA DEL CRM ADENTRO DEL PANEL APRETABLE
   --------------------------------------------------------------------------
   EL PROBLEMA QUE ARREGLA
   El panel del mapa de módulos es el momento de más interés de toda la home:
   el visitante acaba de tocar justo el módulo que le importa. Hasta ahora
   recibía tres párrafos y una lista. Se iba sin haber visto el sistema.

   CÓMO FUNCIONA
   Dos estados sobre el MISMO popover, con una clase:

     · normal   → miniatura recortada de 260px de alto, a media escala.
                  Se reconoce la pantalla sin comerse el panel.
     · ampliado → el panel crece de 780px a 1280px y la pantalla va a tamaño
                  natural. 1280 es donde la grilla del CRM muestra todas sus
                  columnas; abajo de eso se reacomoda y se ve como un celular.

   POR QUÉ `transform: scale` Y NO `zoom`
   `zoom` recalcula el layout, así que la grilla del CRM cambiaría de columnas
   al achicarse y la miniatura no se parecería a la pantalla real. `scale`
   dibuja lo mismo más chico: es una foto, que es justo lo que queremos.
   El contenedor compensa el ancho para que la miniatura llene la caja.
   ========================================================================== */
.panel-modulo .pm-vista {
    margin: 0 0 var(--e-5);
    border-top: 1px solid var(--linea);
    padding-top: var(--e-4);
}
.panel-modulo .pm-vista-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3); margin-bottom: var(--e-3); flex-wrap: wrap;
}
.panel-modulo .pm-vista-rotulo {
    font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; color: var(--texto-3);
}
.panel-modulo .pm-ampliar {
    border: 1px solid var(--linea-fuerte); background: var(--papel);
    color: var(--tinta-900); font: inherit; font-size: var(--t-micro);
    font-weight: 700; padding: 6px 12px; border-radius: var(--r-full);
    cursor: pointer; white-space: nowrap;
    transition: background var(--v-rapido), border-color var(--v-rapido);
}
.panel-modulo .pm-ampliar:hover {
    background: var(--tinta-900); border-color: var(--tinta-900); color: #fff;
}
/* Un solo botón que dice dos cosas según el estado. */
.panel-modulo .pm-ampliar-cerrar { display: none; }
.panel-modulo.pm-ampliado .pm-ampliar-abrir  { display: none; }
.panel-modulo.pm-ampliado .pm-ampliar-cerrar { display: inline; }

.panel-modulo .pm-miniatura {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: var(--r-2);
    background: var(--papel-2);
    cursor: zoom-in;
}
/* El degradado de abajo avisa que la pantalla sigue, sin cortarla en seco. */
.panel-modulo .pm-miniatura::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 70px;
    background: linear-gradient(to top, var(--papel), transparent);
    pointer-events: none;
}
.panel-modulo .pm-miniatura-lupa {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    background: var(--tinta-900); color: #fff; border-radius: var(--r-full);
    width: 38px; height: 38px; display: grid; place-items: center;
    font-size: 1rem; box-shadow: var(--s-2); pointer-events: none;
}
/* 200% de ancho compensa el scale(.5): la foto llena la caja. */
.panel-modulo .pm-miniatura-lienzo {
    transform: scale(.5);
    transform-origin: top left;
    width: 200%;
    pointer-events: none;
}
.panel-modulo .pm-miniatura-lienzo .crm-shot { margin: 0; }

/* ------------------------------- AMPLIADO ------------------------------- */
.panel-modulo.pm-ampliado { max-width: min(96vw, 1280px); }
.panel-modulo.pm-ampliado .pm-miniatura {
    height: auto; overflow: visible; cursor: zoom-out;
}
.panel-modulo.pm-ampliado .pm-miniatura::after,
.panel-modulo.pm-ampliado .pm-miniatura-lupa { display: none; }
.panel-modulo.pm-ampliado .pm-miniatura-lienzo {
    transform: none; width: 100%; pointer-events: auto;
}

/* Ampliado, lo que interesa es la pantalla: el texto se corre al costado en
   dos columnas para no empujarla abajo del pliegue. */
@media (min-width: 900px) {
    .panel-modulo.pm-ampliado .pm-cuerpo {
        display: grid;
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        gap: 0 var(--e-6);
        align-items: start;
    }
    .panel-modulo.pm-ampliado .pm-vista {
        grid-column: 2; grid-row: 1 / span 4;
        border-top: 0; padding-top: 0; margin-bottom: 0;
    }
}

/* En celular la miniatura se achica más: a media escala una pantalla de
   escritorio en 360px de ancho no se lee, y el modo ampliado tampoco tiene
   lugar. Ahí conviene mostrar menos alto y mandar a la página completa. */
@media (max-width: 700px) {
    .panel-modulo .pm-miniatura { height: 190px; }
    .panel-modulo .pm-miniatura-lienzo { transform: scale(.38); width: 263%; }
    .panel-modulo.pm-ampliado .pm-miniatura-lienzo { transform: none; width: 100%; }
}

/* ==========================================================================
   16. EL PANEL SCROLLEA: QUE LA ✕ NO SE VAYA CON EL SCROLL
   --------------------------------------------------------------------------
   Desde que el panel tiene `max-height` + `overflow:auto` (ver animaciones.css
   §8), el contenido largo se recorre adentro del panel. Eso destapó otro
   problema: la cabecera —y con ella el botón de cerrar— se iba para arriba y
   el visitante quedaba en el medio de una pantalla del CRM sin salida visible.
   Con Escape se cierra igual, pero eso lo sabe una de cada diez personas.

   La cabecera queda pegada arriba. El botón ✕ vive adentro de ella en
   position:absolute, así que viaja con la cabecera sin tocar nada más.
   ========================================================================== */
.panel-modulo .pm-cabecera {
    position: sticky;
    top: 0;
    z-index: 4;
}

/* La miniatura tiene su propia cabecerita con el botón de agrandar. También
   se pega, un renglón más abajo, para poder achicar sin volver arriba. */
.panel-modulo .pm-vista-cab {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--papel);
    padding-block: 6px;
}

/* ==========================================================================
   17. EL PANEL EN CELULAR
   --------------------------------------------------------------------------
   En 375px de ancho el panel ocupa casi toda la pantalla, así que cada píxel
   de cabecera es uno menos de contenido. Se achica todo un escalón y la
   miniatura pasa a mostrar menos alto: en un teléfono, una pantalla de
   escritorio a escala se lee como una textura, no como una pantalla — lo que
   sirve ahí es reconocerla y tocar "ver en grande".
   ========================================================================== */
@media (max-width: 700px) {
    .panel-modulo .pm-cabecera { padding: var(--e-4) var(--e-4) var(--e-3); }
    .panel-modulo .pm-icono    { font-size: 1.7rem; margin-bottom: 4px; }
    .panel-modulo .pm-nombre   { font-size: 1.15rem; }
    .panel-modulo .pm-frase    { font-size: .9rem; }
    .panel-modulo .pm-cuerpo   { padding: var(--e-4); }

    /* El botón de agrandar, a lo ancho: con el pulgar es mucho más fácil. */
    .panel-modulo .pm-vista-cab { flex-direction: column; align-items: stretch; }
    .panel-modulo .pm-ampliar   { width: 100%; padding: 10px 12px; }
}

/* Ampliado en una pantalla chica no tiene sentido —no hay a dónde agrandar—
   así que se comporta igual que la miniatura abierta: el CRM a su ancho real
   y scroll horizontal adentro del marco, como en el sistema de verdad. */
@media (max-width: 899px) {
    .panel-modulo.pm-ampliado .pm-miniatura { overflow-x: auto; }
}

/* ==========================================================================
   18. LAS GUÍAS  (/guias/<slug>, plantilla guia.php)
   --------------------------------------------------------------------------
   Una guía es un texto largo que alguien lee de verdad, así que manda la
   legibilidad: medida de línea corta, interlineado alto y una jerarquía que
   se entienda de un vistazo al scrollear.
   ========================================================================== */
.guia .guia-meta {
    color: rgba(255,255,255,.72); font-size: var(--t-micro);
    margin: var(--e-3) 0 0; letter-spacing: .02em;
}

/* --- LA RESPUESTA CORTA ---------------------------------------------------
   El bloque más importante de la página. Va arriba de todo y se distingue a
   propósito: es lo que lee el apurado y lo que extrae una IA. */
.guia-respuesta {
    background: var(--papel-2); border-left: 4px solid var(--ok);
    border-radius: 0 var(--r-3) var(--r-3) 0;
    padding: var(--e-5) var(--e-5) var(--e-5) var(--e-6);
    margin: 0 0 var(--e-7);
}
.guia-respuesta-rotulo {
    display: block; font-size: var(--t-micro); font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em; color: var(--ok);
    margin-bottom: var(--e-2);
}
.guia-respuesta p {
    margin: 0; font-size: 1.12rem; line-height: 1.7; color: var(--texto);
    max-width: none;
}

.guia-bloque { margin-bottom: var(--e-7); }
.guia-bloque h2 {
    font-size: var(--t-h3); color: var(--tinta-900); font-weight: 900;
    line-height: 1.25; margin: 0 0 var(--e-4);
}
.guia-bloque p { margin: 0 0 var(--e-4); }
.guia-bloque .ag-lista { margin-bottom: var(--e-4); }

/* Lo que sale de la operación propia, marcado como lo que es. */
.guia-propio {
    background: var(--papel-3, #eef2f7); border-radius: var(--r-2);
    padding: var(--e-3) var(--e-4); font-size: var(--t-micro);
    color: var(--texto-2); line-height: 1.6; margin: 0;
}

/* --- LA TABLA -------------------------------------------------------------
   Es lo más citable de la guía, así que se lee bien o no sirve. En celular
   scrollea adentro de su caja: la página NUNCA se mueve de costado. */
.guia-tabla-caja {
    overflow-x: auto; border: 1px solid var(--linea);
    border-radius: var(--r-3); background: var(--papel);
}
.guia-tabla { width: 100%; border-collapse: collapse; min-width: 520px; }
.guia-tabla th {
    background: var(--papel-2); color: var(--tinta-900); text-align: left;
    font-size: var(--t-micro); font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; padding: 12px 14px;
    border-bottom: 2px solid var(--linea-fuerte);
}
.guia-tabla td {
    padding: 13px 14px; border-bottom: 1px solid var(--linea);
    font-size: var(--t-chico); color: var(--texto-2); line-height: 1.55;
    vertical-align: top;
}
.guia-tabla tr:last-child td { border-bottom: 0; }
.guia-tabla .col-clave { color: var(--tinta-900); font-weight: 700; }
.guia-tabla-pie {
    font-size: var(--t-micro); color: var(--texto-3);
    margin: var(--e-3) 0 0; line-height: 1.6;
}

/* --- LOS PASOS ------------------------------------------------------------ */
.guia-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); }
.guia-pasos li { display: grid; grid-template-columns: 34px 1fr; gap: var(--e-3); align-items: start; }
.guia-pasos .gp-n {
    width: 30px; height: 30px; border-radius: var(--r-full);
    background: var(--tinta-900); color: var(--acento);
    display: grid; place-items: center; font-weight: 900; font-size: .9rem;
}
.guia-pasos .gp-txt { display: grid; gap: 3px; }
.guia-pasos .gp-txt strong { color: var(--tinta-900); font-size: 1.02rem; }
.guia-pasos .gp-txt span { color: var(--texto-2); font-size: var(--t-chico); line-height: 1.6; }

/* --- EL CIERRE: MIRAR EL CRM O WHATSAPP -----------------------------------
   Va en todas las guías, siempre en el mismo lugar. Dos caminos porque son
   dos personas distintas: la que quiere mirar sola y la que quiere preguntar. */
.guia-cierre {
    background: linear-gradient(160deg, var(--tinta-900), var(--tinta-700));
    color: var(--texto-inv); padding: var(--e-8) 5%; text-align: center;
}
.guia-cierre h2 {
    color: #fff; font-size: var(--t-h2); font-weight: 900;
    margin: 0 0 var(--e-3); line-height: 1.2;
}
.guia-cierre p {
    color: rgba(255,255,255,.85); max-width: 58ch; margin: 0 auto var(--e-5);
    line-height: 1.7;
}
.guia-cierre-botones {
    display: flex; gap: var(--e-3); justify-content: center; flex-wrap: wrap;
}
.guia-cierre-nota {
    font-size: var(--t-micro); color: rgba(255,255,255,.6);
    margin: var(--e-5) auto 0;
}

@media (max-width: 700px) {
    .guia-respuesta { padding: var(--e-4); border-radius: 0 var(--r-2) var(--r-2) 0; }
    .guia-respuesta p { font-size: 1.02rem; }
    .guia-cierre { padding: var(--e-7) var(--e-4); }
    /* A ancho completo se tocan mucho mejor con el pulgar. */
    .guia-cierre-botones { flex-direction: column; }
    .guia-cierre-botones .btn-primary { width: 100%; text-align: center; }
}

/* ==========================================================================
   19. FORMULARIO: LA DESCRIPCIÓN OBLIGATORIA Y EL DIAGNÓSTICO ADJUNTO
   --------------------------------------------------------------------------
   El aviso de abajo del campo cambia mientras la persona escribe (main.js):
   gris al principio, rojo si le falta, verde cuando ya está.
   ========================================================================== */
.mensaje-ayuda {
    margin: 6px 0 0; font-size: .82rem; line-height: 1.45; color: var(--texto-3);
    max-width: none;
}
.mensaje-ayuda.falta { color: var(--peligro); font-weight: 600; }
.mensaje-ayuda.ok    { color: var(--ok);      font-weight: 600; }
/* :user-invalid y no :invalid: el campo vacío es inválido desde que carga la
   página, y pintarlo de rojo antes de que la persona lo toque es retarla por
   adelantado. :user-invalid recién se prende después de que interactuó.
   El !important le gana al estilo en línea que el textarea ya traía. */
#mensaje:user-invalid { border-color: var(--peligro) !important; }

.diag-adjunto {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    margin: 0 0 16px; padding: 12px 14px;
    background: var(--acento-suave); border: 1px solid var(--acento-fuerte);
    border-left: 4px solid var(--tinta-900); border-radius: var(--r-2);
    font-size: .86rem; line-height: 1.45;
}
.diag-adjunto[hidden] { display: none; }
.diag-adjunto-rotulo { font-weight: 800; color: var(--tinta-900); }
.diag-adjunto-texto  { color: var(--texto-2); flex: 1 1 220px; }
.diag-adjunto-quitar {
    border: 0; background: none; padding: 4px; cursor: pointer;
    font: inherit; font-size: .8rem; color: var(--texto-3); text-decoration: underline;
}

/* ==========================================================================
   20. "¿TE PASA ESTO?" — el cierre de cada sección  (ag_te_pasa)
   --------------------------------------------------------------------------
   Tarjeta blanca propia, con su color de texto: así se lee igual en las
   secciones claras y en las oscuras sin una variante para cada una.
   ========================================================================== */
.te-pasa {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 20px;
    max-width: 780px; margin: var(--e-7) auto 0; padding: 18px 22px;
    background: var(--papel); color: var(--texto);
    border: 1px solid var(--linea); border-radius: var(--r-3); box-shadow: var(--s-2);
    text-align: left;
}
/* En presupuestos y objetivos la sección es una grilla de dos columnas
   (.feature-section, styles.css): sin esto el bloque caía en una sola. */
.feature-section > .te-pasa { grid-column: 1 / -1; margin-top: 0; width: 100%; }
.te-pasa-pregunta {
    margin: 0; flex: 1 1 260px; max-width: none;
    font-weight: 800; font-size: 1.02rem; line-height: 1.35; color: var(--tinta-900);
}
.te-pasa-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.te-pasa-wa {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: var(--r-full);
    background: #25D366; color: #fff; font-weight: 700; font-size: .92rem;
    text-decoration: none; white-space: nowrap;
    transition: background var(--v-rapido), transform var(--v-rapido);
}
.te-pasa-wa:hover { background: #1ebe5a; transform: translateY(-1px); }
.te-pasa-ver {
    padding: 10px 2px; font-weight: 700; font-size: .92rem; white-space: nowrap;
    color: var(--tinta-700); text-decoration: none;
}
.te-pasa-ver:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .te-pasa { padding: 16px; }
    .te-pasa-botones { width: 100%; }
    .te-pasa-wa { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   21. EL PUESTO ELEGIDO  (secciones.js → selectorDeRol)
   ========================================================================== */
.rol-recorrido {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 10px; margin-top: var(--e-5);
}
.rol-recorrido-rotulo {
    width: 100%; text-align: center;
    font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texto-3);
}
.rol-salto {
    padding: 8px 14px; border-radius: var(--r-full);
    background: var(--tinta-900); color: #fff; text-decoration: none;
    font-size: .88rem; font-weight: 700;
    transition: background var(--v-rapido), transform var(--v-rapido);
}
.rol-salto:hover { background: var(--tinta-700); transform: translateY(-1px); }

/* "Para vos" en el mapa de módulos. ::after porque ::before ya es la raya de
   color de arriba de la ficha. */
.modulo-ficha.para-vos { border-color: var(--tono); box-shadow: 0 0 0 2px var(--tono); }
.modulo-ficha.para-vos::after {
    content: "⭐ Para vos";
    position: absolute; top: 10px; right: 10px;
    padding: 3px 8px; border-radius: var(--r-full);
    background: var(--acento); color: var(--tinta-900);
    font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}

/* ==========================================================================
   22. EL INICIO EN CELULAR: UN BOTÓN EN LA PRIMERA PANTALLA
   --------------------------------------------------------------------------
   En un teléfono de 375 x 812 la primera pantalla era título + párrafo y los
   dos botones quedaban debajo del borde: la persona tenía que bajar para
   encontrar qué tocar. Ahora los botones van enseguida del título y el
   párrafo después. Mismo contenido, mismo orden en el HTML (Google y los
   lectores de pantalla lo leen igual): sólo cambia dónde se dibuja.
   ========================================================================== */
@media (max-width: 768px) {
    .hero-section { padding-top: 112px; padding-bottom: 40px; min-height: 0; }
    .hero-content { display: flex; flex-direction: column; }
    .hero-title    { order: 1; margin-bottom: 18px; }
    .hero-actions  { order: 2; margin: 0 0 22px; }
    .hero-subtitle { order: 3; margin-bottom: 18px; font-size: 1.05rem; }
    .hero-pruebas  { order: 4; }

    /* El video subió al segundo lugar: sus cuatro tarjetas de abajo, una
       debajo de la otra, empujaban el mapa de módulos más de media pantalla.
       De a dos entran en la mitad del alto. */
    .video-features-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 24px !important; }
    .v-feature-card { padding: 14px !important; }
    .v-feature-card span { font-size: 22px !important; margin-bottom: 6px !important; }
    .v-feature-card h4 { font-size: 13.5px !important; }
    .v-feature-card p  { font-size: 12px !important; }
    #recorrido-plataforma { padding: 48px 16px !important; }
}

/* ==========================================================================
   23. SECCIONES PLEGADAS  (secciones.js → plegarSecciones)
   --------------------------------------------------------------------------
   Alto fijo en px y no en vh: lo que se quiere mostrar —título, bajada y el
   arranque del mockup— mide lo mismo en cualquier pantalla. El pie (degradé +
   botón + "¿Te pasa esto?") ocupa ~330px de eso.

   overflow: clip y no hidden: `hidden` convierte a la sección en un
   contenedor con scroll propio, y un Tab hacia algo de abajo del corte la
   haría scrollear POR DENTRO, dejando la sección rota a la vista. `clip`
   recorta sin eso. `hidden` queda de respaldo para navegadores viejos.
   ========================================================================== */
section.plegada {
    position: relative;
    max-height: 900px;
    overflow: hidden;
    overflow: clip;
}
section.plegada:focus { outline: none; }

section.plegada > .pliegue {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 120px 16px 30px;
    background: linear-gradient(to bottom,
                transparent 0,
                var(--fondo-pliegue, #fff) 110px,
                var(--fondo-pliegue, #fff) 100%);
    /* Sin grid-column A PROPÓSITO: en las secciones que son grilla
       (.feature-section), un elemento absoluto CON grid-column se mide contra
       su celda y no contra la sección, y el pie quedaba más angosto que el
       recorte. Sin él, se mide contra la sección entera.
       direction: ltr por las secciones invertidas (`direction: rtl`). */
    direction: ltr;
}
section.plegada > .pliegue .te-pasa { margin: 0 auto; width: 100%; }

.pliegue-abrir {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: var(--r-full);
    border: 2px solid var(--tinta-900); background: var(--papel); color: var(--tinta-900);
    font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
    box-shadow: var(--s-2);
    transition: background var(--v-rapido), color var(--v-rapido);
}
.pliegue-abrir:hover, .pliegue-abrir:focus-visible { background: var(--tinta-900); color: #fff; }

@media (max-width: 768px) {
    section.plegada { max-height: 860px; }
    section.plegada > .pliegue { padding: 100px 14px 24px; gap: 14px; }
}

/* ==========================================================================
   24. LA PORTADA MÁS CORTA EN CELULAR
   --------------------------------------------------------------------------
   El mapa de módulos medía 4 pantallas: 16 fichas, una debajo de la otra.
   Es el índice de la página y no se pliega; va de a dos, que es la mitad.
   La frase de cada ficha se corta en tres renglones: el detalle completo
   está en el panel que se abre al tocarla.
   ========================================================================== */
@media (max-width: 560px) {
    .mapa-grilla { grid-template-columns: 1fr 1fr; gap: 10px; }
    .modulo-ficha { padding: 12px; gap: 4px; min-height: 0; }
    .modulo-ficha .mf-icono  { font-size: 1.35rem; }
    .modulo-ficha .mf-nombre { font-size: .86rem; }
    .modulo-ficha .mf-frase  {
        font-size: .75rem;
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    }
    .modulo-ficha .mf-mas { display: none; }
    /* En una ficha de 160px el cartel "Para vos" arriba a la derecha pisaba
       el ícono: pasa a ocupar su propio renglón. */
    .modulo-ficha.para-vos::after { position: static; align-self: flex-start; order: -1; margin-bottom: 2px; }

    /* Las tres guías del final: el recuadro con el emoji medía 180px de alto
       por tarjeta. El estilo está en línea en el HTML, de ahí el !important. */
    #academia-recursos .seo-card > div:first-child { height: 90px !important; font-size: 2.2rem !important; }
}