/* ============================================================
   landing.css — sitio publico de RIG

   La pagina esta hecha como un libro de cuentas: renglones
   rayados, cifras alineadas a la derecha con numeros tabulares
   y doble raya bajo los totales. De ahi sale la estructura.

   Cinco colores, cada uno con un trabajo:
   tinta estructura, papel fondo, linea el rayado, azul el unico
   acento, verde solo el dinero que entro. El crema aparece una
   sola vez en toda la pagina.
   ============================================================ */

:root {
    --tinta: #1B191A;
    --tinta-70: #56524F;
    --tinta-45: #8B8682;
    --papel: #F2F0EB;
    --linea: #DCD8D2;

    --azul: #008BCE;
    --azul-texto: #01578A;
    --verde: #00695B;        /* el mismo verde de la barra del sistema */
    --verde-claro: #E3EFEC;
    --azul-claro: #E6EDF7;
    --crema: #F2E5DC;
   
    --fondo-verde: linear-gradient(145deg, #004d40 0%, #00695c 55%, #00897b 100%);
    --blanco: #FFFFFF;

    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 20px;
    --e5: 32px;
    --e6: 48px;
    --e7: 72px;

    --fuente: 'Archivo', system-ui, -apple-system, sans-serif;
    --ancho: 1140px;
}

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

/* La cabecera va pegada arriba y mide 68px, asi que al saltar a un ancla el
   titulo quedaba escondido detras de ella. El scroll-padding deja ese sitio
   libre; el scroll-margin cubre a los navegadores que aun no lo miran en el
   contenedor. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

/* La base del portatil sobresale a proposito (108% de ancho) para dar el gesto
   de computadora, y en pantallas angostas eso empujaba la pagina de lado: se
   podia arrastrar en horizontal y el contenido bailaba. 'clip' corta ese
   sobrante sin convertir a nadie en contenedor de scroll, que es lo que haria
   'hidden' y romperia la cabecera pegajosa. */
html, body { overflow-x: clip; }

:target,
section[id],
main[id] { scroll-margin-top: 84px; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0 0 var(--e3);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

p { margin: 0 0 var(--e4); max-width: 62ch; }

a { color: var(--azul-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

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

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
}

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

.saltar {
    position: absolute;
    left: -9999px;
    background: var(--tinta);
    color: var(--papel);
    padding: var(--e3) var(--e4);
    z-index: 100;
}
.saltar:focus { left: var(--e3); top: var(--e3); }

/* ============================================================
   Botones
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    min-height: 48px;
    padding: 0 var(--e4);
    border: 1.5px solid var(--tinta);
    font: inherit;
    font-weight: 600;
    background: var(--tinta);
    color: var(--papel);
    cursor: pointer;
    transition: background-color 120ms, color 120ms;
}
.btn:hover { text-decoration: none; background: var(--azul-texto); border-color: var(--azul-texto); }

.btn-linea {
    background: transparent;
    color: var(--tinta);
}
.btn-linea:hover { background: var(--tinta); color: var(--papel); }

/* Sobre la banda de tinta se invierten */
.cierre .btn { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.cierre .btn:hover { background: var(--crema); border-color: var(--crema); color: var(--tinta); }
.cierre .btn-linea { background: transparent; color: var(--papel); }
.cierre .btn-linea:hover { background: var(--papel); color: var(--tinta); }

.btn .material-icons { font-size: 20px; }

/* ============================================================
   Encabezado
   ============================================================ */

/* Clara y translucida: el bloque de color fuerte es la portada, no esta */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 250, 248, .9);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--linea);
}

.cabecera-fila {
    display: flex;
    align-items: center;
    gap: var(--e5);
    height: 68px;
}

/* En la cabecera va solo la marca: el lockup completo trae la bajada
   'PROGRAM' tan chica que a esta altura no se lee. El nombre se compone
   con la tipografia de la pagina, que si aguanta el tamaño. */
.marca { display: flex; align-items: center; gap: var(--e3); }
.marca:hover { text-decoration: none; }
.marca img { height: 34px; width: auto; display: block; }

.marca-nombre {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tinta);
    line-height: 1;
}
.marca-nombre b {
    font-weight: 400;
    color: var(--tinta-45);
    margin-left: 5px;
}

.menu { display: flex; gap: var(--e5); margin-left: auto; }

.menu a {
    color: var(--tinta-70);
    font-size: 15.5px;
    font-weight: 500;
    padding: var(--e1) 0;
    border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--verde); border-bottom-color: var(--verde); text-decoration: none; }

.cabecera-acciones { margin-left: var(--e5); }

@media (max-width: 940px) {
    .menu { display: none; }
    .cabecera-acciones { margin-left: auto; }
}

/* ============================================================
   Portada
   ============================================================ */


.portada {
    background: var(--fondo-verde);
    color: rgba(255, 255, 255, .82);
    padding: var(--e7) 0;
    position: relative;
    overflow: hidden;
}

.portada::before,
.portada::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    /* Decorativos: no deben comerse los clics de los botones */
    pointer-events: none;
}

/* Bastante mas grandes que los del login porque aqui la superficie tambien lo
   es: con el tamaño original se perderian en el ancho de la pagina. */
.portada::before {
    width: 620px; height: 620px;
    top: -260px; right: -180px;
}

.portada::after {
    width: 440px; height: 440px;
    bottom: -200px; left: -140px;
}

@media (max-width: 720px) {
    .portada::before { width: 380px; height: 380px; top: -170px; right: -130px; }
    .portada::after  { width: 280px; height: 280px; bottom: -130px; left: -110px; }
}

.portada-reja {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--e6);
    align-items: center;
    /* Por encima de los circulos del fondo */
    position: relative;
    z-index: 1;
}

.portada h1 {
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    letter-spacing: -0.04em;
    margin-bottom: var(--e4);
}

.portada-texto { font-size: 19px; color: rgba(255, 255, 255, .82); }

.portada-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    margin: var(--e5) 0 var(--e4);
}

.portada-nota {
    font-size: 14.5px;
    /* Al .62 de antes quedaba en 4.3:1 sobre el verde y hace falta 4.5 */
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

/* Botones sobre fondo oscuro */
.portada .btn, .cierre .btn {
    background: #fff; color: var(--tinta); border-color: #fff;
}
.portada .btn:hover, .cierre .btn:hover {
    background: #fff; border-color: #fff;
}
.portada .btn-linea, .cierre .btn-linea {
    background: transparent; color: #fff; border-color: rgba(255,255,255,.5);
}
.portada .btn-linea:hover, .cierre .btn-linea:hover {
    background: #fff; color: var(--tinta); border-color: #fff;
}

/* --- El portatil: marco sobrio para que mande la captura --- */

/* Marco de referencia de la grafica que se apoya encima */
.portatil { margin: 0; position: relative; }

.portatil-pantalla {
    background: var(--tinta);
    border: 1px solid #3A3739;
    border-radius: 10px 10px 0 0;
    padding: 10px 10px 0;
}

.portatil-pantalla img {
    display: block;
    width: 100%;
    border-radius: 4px 4px 0 0;
}

/* La base le da el gesto de computadora sin dibujar un aparato entero */
.portatil-base {
    height: 12px;
    background: #3A3739;
    border-radius: 0 0 10px 10px;
    margin: 0 auto;
    width: 104%;
    max-width: 104%;
    transform: translateX(-1.9%);
}

@media (max-width: 940px) {
    .portada { padding: var(--e6) 0; }
    .portada-reja { grid-template-columns: 1fr; gap: var(--e6); }
}

/* --- La grafica apoyada sobre el tablero --------------------------

   Dos capturas superpuestas en lugar de una: la de abajo es la pantalla de
   trabajo y la de arriba, mas chica y corrida a la derecha, el grafico. Se
   apoya sobre la esquina inferior porque ahi el tablero solo tiene los
   accesos rapidos: no tapa ninguna cifra.

   Se sale un poco del portatil a proposito —de ahi el gesto de 'flotando'—,
   y ese sobrante lo recorta el 'overflow-x: clip' del html sin mover la
   pagina de lado.                                                          */

.flotante {
    position: absolute;
    right: -4%;
    bottom: -12%;
    width: 62%;
    margin: 0;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(27, 25, 26, .18);
    transition: box-shadow .3s ease-out;
}

.flotante img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Al acercarse, la sombra se abre: refuerza que esta flotando encima */
.portatil:hover .flotante { box-shadow: 0 26px 60px rgba(27, 25, 26, .26); }

/* En una sola columna el sobrante se nota mas, asi que se mete hacia adentro */
@media (max-width: 940px) {
    .flotante { right: 0; bottom: -9%; width: 56%; }
}

@media (max-width: 480px) {
    .flotante { width: 64%; bottom: -7%; padding: 4px; }
}

/* --- Tarjetas de lo que va incluido ademas del sistema --- */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--e4);
}

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: var(--e4);
    /* Igual que los grupos: sobre el verde hace falta sombra de verdad, y en
       verde oscuro para que sea sombra y no una mancha gris */
    box-shadow: 0 10px 28px rgba(0, 40, 34, .18);
}

.tarjeta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--verde-claro);
    margin-bottom: var(--e3);
}

.tarjeta-ico .material-icons { font-size: 22px; color: var(--verde); }

.tarjeta h3 { font-size: 15px; margin-bottom: 4px; }
.tarjeta p  { font-size: 13px; color: var(--tinta-70); margin: 0; max-width: none; }

@media (max-width: 1000px) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .tarjetas { grid-template-columns: 1fr; } }

/* ============================================================
   Secciones
   ============================================================ */

.seccion {
    padding: var(--e7) 0;
    border-top: 1px solid var(--linea);
}

.seccion:first-of-type { border-top: none; }

.seccion-blanca {
    background: var(--blanco);
    border-top: none;
}

/* Seccion sobre el verde de la marca, el mismo del panel de entrar. Las
   tarjetas blancas encima ganan todo el contraste que les faltaba cuando el
   fondo era del color del papel, y de paso corta la seguidilla de secciones
   claras que venian una tras otra. */
.seccion-verde {
    background: var(--fondo-verde);
    border-top: none;
    position: relative;
    overflow: hidden;
}

/* Los mismos circulos tenues de la portada, para que las dos bandas verdes
   se reconozcan como la misma superficie */
.seccion-verde::before,
.seccion-verde::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.seccion-verde::before {
    width: 520px; height: 520px;
    top: -220px; left: -160px;
}

.seccion-verde::after {
    width: 380px; height: 380px;
    bottom: -180px; right: -120px;
}

/* El contenido, por encima de los circulos */
.seccion-verde > .ancho { position: relative; z-index: 1; }

.seccion-verde > .ancho > h2 { color: #fff; }
.seccion-verde .seccion-bajada { color: rgba(255, 255, 255, .82); }

@media (max-width: 720px) {
    .seccion-verde::before { width: 340px; height: 340px; top: -150px; left: -120px; }
    .seccion-verde::after  { width: 260px; height: 260px; bottom: -120px; right: -100px; }
}

.seccion > .ancho > h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: var(--e5);
}

/* --- Comparacion: dos columnas de un mismo renglon --- */

.comparacion {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.comparacion th {
    padding: 0 var(--e4) var(--e3) 0;
    border-bottom: 2px solid var(--tinta);
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta-45);
}

.comparacion td {
    padding: var(--e4) var(--e4) var(--e4) 0;
    border-bottom: 1px solid var(--linea);
    width: 50%;
}

.comparacion .hoy { color: var(--tinta-45); }
.comparacion .con-rig { font-weight: 500; }

@media (max-width: 700px) {
    .comparacion, .comparacion tbody, .comparacion tr, .comparacion td { display: block; width: 100%; }
    .comparacion thead { display: none; }
    .comparacion tr { border-bottom: 1px solid var(--linea); padding: var(--e3) 0; }
    .comparacion td { border: none; padding: var(--e1) 0; }
    .comparacion .hoy { text-decoration: line-through; }
}

/* --- Modulos, agrupados por el momento del trabajo --- */

/* Bajada de seccion: una linea que explica de que va lo que viene debajo */
.seccion-bajada {
    color: var(--tinta-70);
    font-size: 19px;
    margin: calc(var(--e4) * -1) 0 var(--e6);
    max-width: 62ch;
}

.grupos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e4);
}


.grupo {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-top: 4px solid var(--tinta);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 40, 34, .18);
}

/* La cabecera va sobre un tinte del color del grupo: separa el nombre del
   momento de lo que ese momento incluye. */
.grupo-cabeza {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4);
    border-bottom: 1px solid var(--linea);
}

/* El numero es lo que dice que esto va en orden: primero se anota, despues se
   vigila y al final se rinde. Sin el, las tres columnas parecian intercambiables. */
.grupo-paso {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.grupo h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.grupo ul { list-style: none; margin: 0; padding: 0 var(--e4); }

.grupo li {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--linea);
    font-weight: 500;
}
.grupo li:last-child { border-bottom: none; }

.grupo li .material-icons {
    font-size: 21px;
    padding: 7px;
    border-radius: 8px;
}

/* Cada grupo lleva su color: registrar en verde, controlar en azul,
   rendir cuentas en tinta. */
.grupo-verde  { border-top-color: var(--verde); }
.grupo-verde  .grupo-cabeza { background: var(--verde-claro); }
.grupo-verde  h3 { color: var(--verde); }
.grupo-verde  .grupo-paso { color: var(--blanco); background: var(--verde); }
.grupo-verde  li .material-icons { color: var(--verde); background: var(--verde-claro); }

.grupo-azul   { border-top-color: var(--azul); }
.grupo-azul   .grupo-cabeza { background: var(--azul-claro); }
.grupo-azul   h3 { color: var(--azul-texto); }
.grupo-azul   .grupo-paso { color: var(--blanco); background: var(--azul-texto); }
.grupo-azul   li .material-icons { color: var(--azul-texto); background: var(--azul-claro); }

.grupo-tinta  { border-top-color: var(--tinta); }
.grupo-tinta  .grupo-cabeza { background: #E7E5E0; }
.grupo-tinta  h3 { color: var(--tinta); }
.grupo-tinta  .grupo-paso { color: var(--papel); background: var(--tinta); }
.grupo-tinta  li .material-icons { color: var(--tinta); background: #E7E5E0; }

@media (max-width: 800px) { .grupos { grid-template-columns: 1fr; gap: var(--e5); } }

/* --- Informe de sede: la banda de crema, una sola en la pagina --- */

.informe-reja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e7);
    align-items: start;
}

.informe-reja h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: var(--e4);
}

.lineas-informe { list-style: none; margin: 0; padding: 0; }

.lineas-informe li {
    display: flex;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e3) 0;
    border-bottom: 1px solid rgba(27, 25, 26, 0.18);
    font-size: 16px;
}

.lineas-informe .num {
    color: var(--tinta-45);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}


@media (max-width: 800px) { .informe-reja { grid-template-columns: 1fr; gap: var(--e5); } }

/* --- Como empezar: aqui el orden si importa, por eso van numerados --- */

.pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e6);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
}

.paso {
    counter-increment: paso;
    padding-top: var(--e4);
    border-top: 2px solid var(--tinta);
}

.paso::before {
    content: counter(paso);
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--azul);
    margin-bottom: var(--e3);
}

.paso h3 { font-size: 19px; margin-bottom: var(--e2); }
.paso p { color: var(--tinta-70); font-size: 16px; margin: 0; }

@media (max-width: 800px) { .pasos { grid-template-columns: 1fr; gap: var(--e5); } }

.tambien {
    margin: var(--e6) 0 0;
    padding-top: var(--e4);
    border-top: 1px solid rgba(27, 25, 26, 0.18);
    font-size: 15px;
    color: var(--tinta-70);
    max-width: none;
}

/* ============================================================
   Cierre y pie
   ============================================================ */

.cierre {
    background: var(--fondo-verde);
    color: rgba(255, 255, 255, .85);
    padding: var(--e6) 0;
}

.cierre-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
}

.cierre h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: var(--e2); }
.cierre p { margin: 0; color: var(--crema); }

.cierre-acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

.pie {
    background: var(--tinta);
    color: var(--tinta-45);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: var(--e4) 0;
    font-size: 14.5px;
}

.pie-fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e4);
    justify-content: space-between;
}

.pie a { color: var(--crema); }

/* ============================================================
   Telefono
   ============================================================ */

@media (max-width: 480px) {
    body { font-size: 16px; }
    .seccion, .cierre { padding: var(--e6) 0; }
    .portatil-pantalla { padding: 6px 6px 0; }
    .portada-acciones .btn, .cierre-acciones .btn { width: 100%; justify-content: center; }
}

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

/* ============================================================
   Movimiento

   Las entradas al hacer scroll las maneja main/landing.js con un
   IntersectionObserver (ver mas abajo). Aqui quedan las respuestas al
   cursor, que son cosa del CSS.
   ============================================================ */

/* Respuestas al cursor */
.grupo, .tarjeta {
    transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out;
}
.grupo:hover, .tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(27, 25, 26, .09);
}
.tarjeta:hover { border-color: var(--verde); }

.grupo li .material-icons { transition: transform .2s ease-out; }
.grupo li:hover .material-icons { transform: scale(1.12); }

/* La grafica se apoya quieta sobre el tablero: al acercar el cursor solo se
   abre la sombra, que basta para decir que esta encima. */

.comparacion tbody tr { transition: background-color .2s ease-out; }
.comparacion tbody tr:hover { background: rgba(0, 105, 91, .05); }

.btn { transition: background-color .18s ease-out, border-color .18s ease-out,
                   color .18s ease-out, transform .18s ease-out; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }

/* ── Entradas al hacer scroll ──────────────────────────────────────────

   Todo lo de aqui cuelga de '.js-anim', la clase que el script del <head> le
   pone al <html> antes de pintar. Si el JS no corre, la clase no esta y no se
   esconde nada: la pagina se ve entera. Esa es la regla que rompia el
   ScrollReveal anterior, que escondia primero y preguntaba despues.

   La clase '.visible' la pone main/landing.js con un IntersectionObserver. */

/* Los selectores van dentro de :where() a proposito: asi no pesan, y la regla
   de '.visible' de mas abajo les gana sin tener que repetir la lista. Sin esto
   '.js-anim .portada h1' le ganaba a '.js-anim .visible' y el titulo no se
   revelaba nunca. */
.js-anim :where(
    .portada h1,
    .portada-texto,
    .portada-acciones,
    .portada-nota,
    .portatil,
    .seccion > .ancho > h2,
    .comparacion,
    .grupo,
    .tarjeta,
    .informe-reja > *,
    .paso,
    .tambien,
    .cierre-fila
) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1),
                transform .7s cubic-bezier(.2,.7,.3,1);
}

/* La pantalla entra inclinada y se endereza, como si se abriera */
.js-anim :where(.portatil) {
    transform: perspective(1200px) rotateX(14deg) translateY(28px) scale(.97);
    transition-duration: 1s;
}

.js-anim .visible {
    opacity: 1;
    transform: none;
}

/* Quien pide menos movimiento recibe el fundido y nada mas. La transicion NO
   se apaga: es la que cierra el revelado, y sin ella todo se quedaria en
   opacity 0 con la pagina vacia. */
@media (prefers-reduced-motion: reduce) {
    .grupo:hover, .tarjeta:hover, .btn:hover { transform: none; }

    .js-anim :where(
        .portada h1, .portada-texto, .portada-acciones, .portada-nota, .portatil,
        .seccion > .ancho > h2, .comparacion, .grupo, .tarjeta,
        .informe-reja > *, .paso, .tambien, .cierre-fila
    ) {
        transform: none;
        transition-duration: .35s;
    }
}

/* ============================================================
   Páginas de contenido (iglesias, ONG, informe, preguntas, blog)
   ============================================================ */

.pagina-cabeza {
    background: var(--fondo-verde);
    color: rgba(255, 255, 255, .85);
    padding: var(--e6) 0;
    position: relative;
    overflow: hidden;
}
.pagina-cabeza::before,
.pagina-cabeza::after,
.cierre::before,
.cierre::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    pointer-events: none;
}
.pagina-cabeza::before { width: 520px; height: 520px; top: -240px; right: -160px; }
.pagina-cabeza::after  { width: 360px; height: 360px; bottom: -220px; left: -120px; }
.pagina-cabeza > .ancho { position: relative; z-index: 1; }
.cierre { position: relative; overflow: hidden; }
.cierre::before { width: 420px; height: 420px; top: -220px; right: -120px; }
.cierre::after  { width: 300px; height: 300px; bottom: -200px; left: -90px; }
.cierre > .ancho { position: relative; z-index: 1; }
@media (max-width: 720px) {
    .pagina-cabeza::before { width: 340px; height: 340px; top: -170px; right: -130px; }
    .pagina-cabeza::after  { width: 240px; height: 240px; bottom: -150px; left: -100px; }
}
.pagina-cabeza h1 {
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    letter-spacing: -0.03em;
    margin-bottom: var(--e3);
    max-width: 22ch;
}
.pagina-bajada { font-size: 18.5px; max-width: 60ch; }
.pagina-meta { font-size: 14.5px; margin: 0; color: rgba(255, 255, 255, .75); }

.migas { font-size: 14px; margin-bottom: var(--e4); color: rgba(255, 255, 255, .7); }
.migas a { color: #fff; }
.migas span { margin: 0 2px; }

.articulo {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--e6) var(--e4);
    font-size: 17px;
    line-height: 1.7;
}
.articulo h2 { font-size: 1.55rem; margin: var(--e6) 0 var(--e3); }
.articulo h2:first-child { margin-top: 0; }
.articulo h3 { font-size: 1.2rem; margin: var(--e5) 0 var(--e2); }
.articulo p { max-width: none; }
.articulo ul, .articulo ol { padding-left: var(--e4); margin: 0 0 var(--e4); }
.articulo li { margin-bottom: var(--e2); }

.lista-check { list-style: none; padding-left: 0 !important; }
.lista-check li { position: relative; padding-left: 30px; }
.lista-check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--verde);
    font-weight: 700;
}

.lista-pasos li::marker { color: var(--verde); font-weight: 700; }

.nota {
    background: var(--azul-claro);
    border-left: 3px solid var(--azul);
    padding: var(--e3) var(--e4);
    font-size: 15.5px;
}

.tabla-envoltura { overflow-x: auto; margin: 0 0 var(--e4); }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tabla-simple th, .tabla-simple td {
    text-align: left;
    padding: var(--e2) var(--e3);
    border-bottom: 1px solid var(--linea);
    vertical-align: top;
}
.tabla-simple th { border-bottom: 2px solid var(--tinta); font-weight: 600; }

.caja-rig {
    margin-top: var(--e6);
    padding: var(--e5);
    background: var(--verde-claro);
    border-top: 3px solid var(--verde);
}
.caja-rig h2 { margin-top: 0; }

.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--e4) 0;
    list-style: none;
    position: relative;
    padding-right: var(--e5);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    color: var(--verde);
    font-size: 22px;
    line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 var(--e4); color: var(--tinta-70); }

.relacionados { padding: 0 var(--e4) var(--e6); }
.relacionados h2 { font-size: 1.3rem; margin-bottom: var(--e4); }
.relacionados-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.relacionado, .blog-tarjeta {
    display: block;
    padding: var(--e4);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-top: 3px solid var(--verde);
    color: var(--tinta);
}
.relacionado:hover, .blog-tarjeta:hover { text-decoration: none; border-color: var(--verde); }
.relacionado b { display: block; margin-bottom: var(--e1); }
.relacionado span { font-size: 14.5px; color: var(--tinta-70); }

.blog-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e4);
    padding-top: var(--e6);
    padding-bottom: var(--e6);
}
.blog-tarjeta time { font-size: 13.5px; color: var(--tinta-45); }
.blog-tarjeta h2 { font-size: 1.2rem; margin: var(--e2) 0; }
.blog-tarjeta p { font-size: 15px; color: var(--tinta-70); }
.blog-leer { color: var(--verde); font-weight: 600; font-size: 15px; }

@media (max-width: 860px) {
    .relacionados-lista, .blog-lista { grid-template-columns: 1fr; }
}

/* Pie con enlaces */
.pie-reja {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--e5);
    padding-top: var(--e4);
    padding-bottom: var(--e4);
}
.pie-reja nav, .pie-reja > div:last-child { display: flex; flex-direction: column; gap: var(--e2); }
.pie-marca { color: var(--papel); font-weight: 700; font-size: 17px; }
.pie-reja p { margin: var(--e2) 0 0; font-size: 14px; }
.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--e3);
    font-size: 13.5px;
}
@media (max-width: 760px) { .pie-reja { grid-template-columns: 1fr; } }

.ancho-texto { max-width: 820px; }
.faq-mas { margin: var(--e4) 0 0; font-weight: 600; }