/* =====================================================================================
   Tema editorial de SinPar: papel y tinta.
   Referencia: prensa de datos (titulares en serif, filetes finos, tablas sobrias, un solo color de enlace).
   Sin degradados, sin sombras decorativas, esquinas casi rectas. Se carga despues de style.css.
   ===================================================================================== */

:root {
    /* Papel y tinta */
    --papel: #f7f5f0;
    --papel-2: #efece4;
    --superficie: #ffffff;
    --tinta: #16130f;
    --tinta-2: #4a463f;
    --tinta-3: #6b655a;
    --regla: #dcd7ca;
    --regla-2: #bcb5a4;

    /* Color: un azul tinta para enlaces y datos; el amarillo de la marca solo como subrayado de marcador */
    --enlace: #1c4a86;
    --enlace-fuerte: #10315c;
    --marcador: #ffd94d;
    --acento: #f2c230;

    /* Compatibilidad con style.css */
    --negro: #16130f;
    --azul: #1c4a86;
    --azul-claro: #1c4a86;
    --gris-fondo: #f7f5f0;
    --gris-claro: #efece4;
    --gris-borde: #dcd7ca;
    --gris-texto: #4a463f;
    --rojo: #b42318;
    --verde: #2a7a4b;
    --ambar: #96650a;
    --diputado: #1c4a86;
    --senador: #b42318;

    --radio: 3px;
    --sombra-menu: 0 6px 18px rgba(22, 19, 15, 0.14);

    /* Tipografia: serif del sistema para titulares, sans del sistema para la interfaz, Oswald solo en la marca y en cifras */
    --serif: "Source Serif 4", "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-marca: "Oswald", "Arial Narrow", sans-serif;
    --font-display: var(--sans);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--marcador); color: var(--tinta); }

/* ---------- Titulos ---------- */
h1, h2, h3, h4, .card .nombre {
    font-family: var(--serif);
    text-transform: none;
    color: var(--tinta);
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font-size: 1.55rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; }
h3 { font-weight: 700; letter-spacing: -0.005em; }
main { max-width: 1160px; padding: 36px 28px 72px; }
main > h1:first-child { margin-top: 0; }
main > h1 + p.nota, main > h1 + p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; color: var(--tinta-2); max-width: 46rem; margin-top: 0; }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--enlace-fuerte); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; }

/* ---------- Cabecera: como el titulo de un periodico ---------- */
header.top {
    background: var(--papel);
    border-top: 5px solid var(--tinta);
    border-bottom: 1px solid var(--regla-2);
    padding: 15px 28px 13px;
    gap: 18px;
}
header.top a.brand, .brand {
    font-family: var(--font-marca);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 27px;
    letter-spacing: 1px;
    color: var(--tinta);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.brand:hover { color: var(--tinta); text-decoration: none; }
.brand-marca { flex: none; display: block; }
.brand-desc { font-family: var(--serif); font-style: italic; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta-2); margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--regla-2); line-height: 1.2; }
.buscador-global { flex: 1 1 300px; max-width: 430px; }
.buscador-global input {
    background: #fff;
    border: 1px solid var(--regla-2);
    border-radius: var(--radio);
    padding: 9px 14px;
    font-size: 14px;
}
.buscador-global input:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px var(--marcador); }
.buscador-global-resultados { border-radius: var(--radio); box-shadow: var(--sombra-menu); border: 1px solid var(--regla-2); }

nav.tabs {
    background: var(--papel);
    border-bottom: 1px solid var(--tinta);
    padding: 0 24px;
    gap: 2px;
    align-items: center;
}
nav.tabs a {
    font-family: var(--sans);
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--tinta-2);
    padding: 11px 13px 9px;
    border-bottom: 3px solid transparent;
}
nav.tabs a:hover { color: var(--tinta); border-bottom-color: var(--regla-2); text-decoration: none; }
nav.tabs a.activo { color: var(--tinta); border-bottom-color: var(--tinta); }
.fecha-datos { margin-left: auto; font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; padding-left: 16px; }

/* Menu "Nosotros" y cuenta */
.menu-boton { font-family: var(--sans); text-transform: none; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--tinta-2); border-radius: var(--radio); padding: 7px 10px; }
.menu-boton:hover { color: var(--tinta); background: var(--papel-2); }
.menu-boton.activo { border-bottom: 1px solid transparent; color: var(--tinta); background: var(--marcador); }
.menu-boton[aria-expanded="true"] { border-color: var(--regla-2); background: #fff; }
.menu-lista { border-radius: var(--radio); box-shadow: var(--sombra-menu); border: 1px solid var(--regla-2); padding: 6px; }
.menu-lista a { border-radius: 2px; font-size: 14.5px; padding: 9px 12px; color: var(--tinta); }
.menu-lista a:hover, .menu-lista a:focus-visible { background: var(--papel-2); color: var(--tinta); text-decoration: none; }
.cuenta-menu { font-size: 14px; gap: 14px; }
.cuenta-menu a { color: var(--enlace); font-weight: 600; }
.cuenta-correo { color: var(--tinta-2); font-weight: 500 !important; }
.cuenta-premium { font-family: var(--sans); background: var(--marcador); color: var(--tinta); border-radius: 2px; padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.link-inline { color: var(--enlace); font-size: 14px; font-weight: 600; }

/* ---------- Botones ---------- */
.nf-enviar, a.nf-enviar, .boton {
    font-family: var(--sans);
    text-transform: none;
    letter-spacing: .01em;
    font-size: 15px;
    font-weight: 700;
    background: var(--tinta);
    color: var(--papel);
    border: 1px solid var(--tinta);
    border-radius: var(--radio);
    padding: 12px 22px;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .12s, color .12s;
}
.nf-enviar:hover, a.nf-enviar:hover, .boton:hover { background: #2f2a22; color: #fff; text-decoration: none; transform: none; box-shadow: none; }
.boton-borde { background: transparent; color: var(--tinta); }
.boton-borde:hover { background: var(--papel-2); color: var(--tinta); }
.btn-pdf {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    background: #fff;
    color: var(--tinta);
    border: 1px solid var(--tinta);
    border-radius: var(--radio);
    padding: 8px 14px;
    box-shadow: none;
    text-decoration: none;
}
.btn-pdf:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--tinta); }

/* ---------- Paneles, tablas y pestanas de la plataforma ---------- */
.seccion, .seccion-grafico {
    background: var(--superficie);
    border: 1px solid var(--regla);
    border-top: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: none;
    padding: 22px 26px 24px;
    margin-bottom: 20px;
}
.seccion h2 { font-size: 1.25rem; margin: 0 0 14px; letter-spacing: -0.008em; }
.seccion h3 { font-family: var(--sans); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3); margin: 22px 0 8px; }
.seccion p.nota, .nota { color: var(--tinta-2); font-size: 14px; }
.seccion.bloqueo { background: var(--papel); border-top-color: var(--regla-2); border-style: dashed; border-width: 1px; }
.seccion.pendiente h2, .seccion.pendiente p, .vacio { color: var(--tinta-3); }
.vacio { font-style: normal; }
.stats { gap: 0; }
.stat { background: transparent; border: none; border-left: 1px solid var(--regla-2); border-radius: 0; box-shadow: none; padding: 2px 24px; text-align: left; min-width: 0; }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-valor { font-family: var(--font-marca); font-size: 30px; font-weight: 700; color: var(--tinta); }
.stat-label { font-size: 12px; color: var(--tinta-2); text-transform: none; letter-spacing: 0; }

table.datos { background: transparent; border: none; border-radius: 0; font-size: 14px; }
table.datos > tbody { display: table; width: 100%; }
/* Tablas con encabezado y cuerpo (Administracion): ocupan todo el ancho y las columnas coinciden */
table.datos.completa { display: table; width: 100%; border-collapse: collapse; }
table.datos.completa > tbody { display: table-row-group; width: auto; }
table.datos.completa th { text-align: left; }
table.datos th, table.datos td { padding: 9px 12px; border-bottom: 1px solid var(--regla); font-variant-numeric: tabular-nums; }
table.datos th { background: transparent; color: var(--tinta-3); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--tinta); }
table.datos tr:nth-child(even) td { background: transparent; }
table.datos tr:hover td { background: var(--papel); }
table.datos td a { color: var(--enlace); font-weight: 600; }
.datos th.ordenable:hover { color: var(--tinta); }

.minitabs { gap: 2px 26px; margin: 4px 0 24px; border-bottom: 1px solid var(--regla-2); }
.minitab-btn {
    background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none;
    padding: 8px 1px 9px; margin-bottom: -1px; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--tinta-2);
}
.minitab-btn:hover { color: var(--tinta); border-bottom-color: var(--regla-2); }
.minitab-btn.activo { background: none; color: var(--tinta); border-bottom-color: var(--tinta); }

.outer-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 3px solid var(--tinta); border-left: 1px solid var(--regla); margin: 22px 0 26px; }
.outer-tabs .outer-tab-btn { max-width: none; }
.outer-tab-btn {
    background: transparent; border: none; border-right: 1px solid var(--regla); border-bottom: 1px solid var(--regla);
    border-radius: 0; box-shadow: none; padding: 15px 20px 16px; text-align: left; transition: background .12s;
}
.outer-tab-btn:hover { background: var(--papel-2); }
.outer-tab-btn.activo { background: #fff; box-shadow: inset 4px 0 0 var(--tinta); }
.outer-tab-btn .tab-titulo { font-family: var(--serif); font-size: 1.08rem; letter-spacing: -0.005em; color: var(--tinta); text-transform: none; }
.outer-tab-btn .tab-desc { color: var(--tinta-2); font-size: 13.5px; }
@media (max-width: 960px) { .outer-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .outer-tabs { grid-template-columns: 1fr; } }

.pill, .badge { border-radius: 2px; }
.alerta { border-radius: 2px; padding: 3px 10px 3px 8px; font-weight: 700; background: var(--papel-2); border-left: 3px solid currentColor; }
.alerta.critico { background: #fbe9e6; color: #97170f; }
.alerta.alto { background: #fbefd9; color: #7d4a00; }
.alerta.medio { background: #e7eef8; color: #1c4a86; }
.alerta.bajo { background: var(--papel-2); color: var(--tinta-2); }
.estado-banner { border-radius: 2px; background: #fff7d6; border-left-color: #c79a00; color: #5e4700; }

/* Formularios y filtros */
.campo { background: #fff; border: 1px solid var(--regla-2); border-radius: var(--radio); padding: 8px 13px; }
.campo label { color: var(--tinta-3); text-transform: none; font-size: 12px; letter-spacing: 0; }
.buscador input { background: #fff; border: 1px solid var(--regla-2); border-radius: var(--radio); box-shadow: none; padding: 14px 16px; }
.buscador input:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px var(--marcador); }
.desplegable-btn { border-radius: var(--radio); border-color: var(--regla-2); }
.desplegable-btn:hover { border-color: var(--tinta); }
.nf-campo input[type="text"], .nf-campo input[type="email"], .nf-campo input[type="tel"], .nf-campo select, .nf-campo textarea {
    border: 1px solid var(--regla-2); border-radius: var(--radio); background: #fff;
}
.nf-campo input:focus, .nf-campo select:focus, .nf-campo textarea:focus { border-color: var(--tinta); outline: 3px solid var(--marcador); outline-offset: 0; }
.nosotros-form { background: #fff; border: 1px solid var(--regla); border-top: 3px solid var(--tinta); border-radius: var(--radio); box-shadow: none; padding: 24px 28px 26px; }

/* Listado de parlamentarios */
.grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.card { background: #fff; border: 1px solid var(--regla); border-radius: var(--radio); box-shadow: none; padding: 10px 12px; transition: border-color .12s; }
.card:hover { transform: none; border-color: var(--tinta); }
.card .foto-wrap { width: 52px; height: 65px; }
.card img { width: 52px; height: 65px; border-radius: 2px; border: none; border-bottom: 3px solid var(--anillo, var(--tinta)); object-fit: cover; background: var(--papel-2); }
.card .foto-wrap .cargo-badge { bottom: 0; right: -7px; width: 17px; height: 17px; border-radius: 2px; font-size: 9.5px; border: 2px solid #fff; }
.card .nombre { font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.card .meta { color: var(--tinta-2); }
.badge { padding: 2px 7px; font-size: 10.5px; letter-spacing: .03em; }
.seccion-titulo { font-family: var(--sans); color: var(--tinta); font-size: 12.5px; font-weight: 800; letter-spacing: .09em; border-bottom: 1px solid var(--tinta); }
.cargo-titulo { color: var(--tinta-3); }
.contador { color: var(--tinta-2); letter-spacing: .06em; }

/* Ficha */
.ficha-header {
    background: #fff; border: 1px solid var(--regla); border-top: 3px solid var(--tinta); border-radius: var(--radio);
    box-shadow: none; padding: 24px 28px; gap: 28px; margin-bottom: 22px;
}
.ficha-header img { width: 108px; height: 135px; border-radius: 2px; object-fit: cover; box-shadow: none; border: 1px solid var(--regla); background: var(--papel-2); }
.ficha-header h1 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem); letter-spacing: -0.02em; margin-bottom: 6px; }
.ficha-header .meta { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; color: var(--tinta-2); }
.foto-credito { color: var(--tinta-3); }

/* Cajas del panel: la informacion de la semana */
.resumen-semanal { background: #fff; color: var(--tinta); border: 1px solid var(--regla); border-top: 3px solid var(--tinta); border-radius: var(--radio); box-shadow: none; }
.resumen-semanal-cabecera { font-family: var(--sans); font-weight: 800; font-size: 11.5px; letter-spacing: .09em; color: var(--tinta-3); }
.resumen-semanal strong { color: var(--tinta); }
.resumen-semanal a { color: var(--enlace); }
.resumen-semanal li { font-size: 14.5px; }

/* Avisos Premium dentro de la plataforma */
.panel-premium { background: #fffbe8; border: 1px solid #ead98a; border-left: 4px solid var(--acento); border-radius: var(--radio); box-shadow: none; }
.premium-etiqueta { background: var(--marcador); color: var(--tinta); border-radius: 2px; padding: 1px 8px; font-weight: 800; }

/* Modal */
.modal-caja { border-radius: var(--radio); box-shadow: var(--sombra-menu); border-top: 3px solid var(--tinta); padding: 26px 28px; }
.modal-cabecera h2 { font-size: 1.25rem; }

/* ---------- Pie ---------- */
footer.pie { background: var(--papel); color: var(--tinta-2); text-align: left; padding: 0; margin-top: 72px; font-size: 14px; border-top: 5px solid var(--tinta); }
footer.pie a { color: var(--tinta); text-decoration: none; }
footer.pie a:hover { text-decoration: underline; color: var(--tinta); }
.pie-datos { border-bottom: 1px solid var(--regla-2); padding: 11px max(28px, calc(50% - 552px)); font-size: 12.5px; display: flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.pie-datos .punto { width: 8px; height: 8px; border-radius: 50%; background: #2a7a4b; flex: none; }
.pie-datos strong { color: var(--tinta); }
.pie-cuerpo { max-width: 1160px; margin: 0 auto; padding: 40px 28px 26px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.25fr; gap: 36px; }
.pie-marca .brand { font-size: 26px; }
.pie-marca p { margin: 12px 0 0; max-width: 300px; line-height: 1.55; font-family: var(--serif); font-style: italic; color: var(--tinta-2); }
.pie-titulo { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 12px; }
.pie-cuerpo nav, .pie-cuerpo address { display: flex; flex-direction: column; gap: 8px; }
.pie-cuerpo address { font-style: normal; overflow-wrap: anywhere; }
.pie-legal { max-width: 1160px; margin: 0 auto; padding: 16px 28px 34px; border-top: 1px solid var(--regla); color: var(--tinta-3); font-size: 12.5px; }
.pie-legal p { margin: 0; }
@media (max-width: 980px) { .pie-cuerpo { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pie-cuerpo { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; } }

/* =====================================================================================
   Paginas publicas: portada, planes, Nosotros, ingreso, contacto y textos legales
   ===================================================================================== */
main.ancho-completo { max-width: none; padding: 0; }
.contenedor { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* Portada */
.portada { padding: 46px 0 40px; border-bottom: 1px solid var(--tinta); }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.portada-kicker { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 16px; padding-top: 12px; border-top: 3px solid var(--tinta); max-width: 23rem; }
.portada h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 20px; }
.portada-bajada { font-family: var(--serif); font-size: 1.25rem; line-height: 1.55; color: var(--tinta-2); max-width: 34rem; margin: 0 0 28px; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.portada-acciones .enlace-flecha { font-weight: 700; }
.portada-nota { margin: 16px 0 0; font-size: 14px; color: var(--tinta-3); }
.grafico-congreso { margin: 0; }
.grafico-congreso-titulo { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--tinta); }
.hemiciclos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: end; }
.hemiciclo { text-align: center; }
.hemiciclo svg { width: 100%; height: auto; display: block; }
.hemiciclo-titulo { margin: 4px 0 0; font-size: 13px; color: var(--tinta-2); }
.hemiciclo-titulo strong { font-family: var(--font-marca); font-size: 22px; color: var(--tinta); font-weight: 700; margin-right: 3px; }
.leyenda-tabla { width: 100%; border-collapse: collapse; margin: 14px 0 0; font-size: 13.5px; }
.leyenda-tabla td { padding: 5px 0; border-top: 1px solid var(--regla); }
.leyenda-tabla td:first-child { width: 18px; }
.leyenda-tabla i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.leyenda-tabla td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.grafico-congreso figcaption { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-3); }

/* Cifras en linea, sin tarjetas */
.numeros { padding: 26px 0; border-bottom: 1px solid var(--regla-2); }
.numeros-fila { display: grid; grid-template-columns: repeat(4, 1fr); }
.numero { padding: 4px 26px; border-left: 1px solid var(--regla-2); }
.numero:first-child { border-left: none; padding-left: 0; }
.numero-valor { display: block; font-family: var(--font-marca); font-size: 46px; font-weight: 700; line-height: 1.05; color: var(--tinta); font-variant-numeric: tabular-nums; }
.numero-texto { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--tinta-2); }

/* Secciones con titulo a la izquierda y contenido a la derecha */
.seccion-editorial { padding: 44px 0 6px; }
.seccion-editorial + .seccion-editorial { border-top: 1px solid var(--regla-2); margin-top: 38px; }
.se-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 48px; }
.se-cabecera h2 { font-size: 1.75rem; margin: 0 0 10px; }
.se-cabecera p { margin: 0; color: var(--tinta-2); font-size: 15px; line-height: 1.55; max-width: 21rem; }
.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.indice li { display: grid; grid-template-columns: 44px minmax(0, 12.5rem) minmax(0, 1fr); gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--regla); align-items: baseline; }
.indice .i-num { font-family: var(--font-marca); font-size: 15px; color: var(--tinta-3); }
.indice .i-titulo { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.indice .i-texto { color: var(--tinta-2); font-size: 15.5px; line-height: 1.55; }
.definiciones { margin: 0; border-top: 1px solid var(--tinta); }
.definiciones div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--regla); }
.definiciones dt { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.definiciones dd { margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.55; }
.nota-al-pie { margin: 16px 0 0; font-size: 14px; color: var(--tinta-2); max-width: 46rem; }

/* Ingreso: «Ya tengo cuenta» (solo el correo) o «Crear cuenta» (nombre, correo, sector y aceptar). */
.login-modos { display: inline-flex; margin: 4px 0 18px; border: 1px solid var(--tinta); border-radius: var(--radio); overflow: hidden; }
.login-modos[hidden] { display: none; }
.login-modo { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 18px; background: var(--superficie); color: var(--tinta); border: 0; cursor: pointer; }
.login-modo + .login-modo { border-left: 1px solid var(--tinta); }
.login-modo[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.login-modo:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; }
#formCorreo[data-modo="existente"] .solo-nuevo { display: none; }
#lgPerfilExtra[hidden] { display: none; }

/* Comisiones: tarjetas en rejilla (nombre + total de miembros). La que se abre ocupa todo el ancho y muestra su tabla. */
.nota-total { margin: 0 0 6px; }
.rejilla-comisiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 10px; align-items: stretch; margin: 0 0 22px; }
.rejilla-comisiones > details.seccion { margin: 0; padding: 12px 14px; border-top-width: 1px; }
.rejilla-comisiones > details.seccion[open] { grid-column: 1 / -1; padding: 18px 22px 20px; border-top: 3px solid var(--tinta); }
.rejilla-comisiones .comision-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rejilla-comisiones summary h2 { font-size: 0.98rem; line-height: 1.3; letter-spacing: 0; align-items: flex-start; }
.rejilla-comisiones summary h2::before { margin-top: 0.3em; }
.rejilla-comisiones summary .nota { display: block; margin: 6px 0 0 21px; font-size: 12.5px; }
.total-miembros { flex: none; min-width: 2.2rem; text-align: center; padding: 1px 8px; font-size: 13px; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; color: var(--tinta); background: var(--papel); border: 1px solid var(--regla-2); border-radius: var(--radio); }

/* Como contratar */
.como-premium { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; border-top: 1px solid var(--tinta); padding-top: 22px; }
.como-premium h2 { font-size: 1.25rem; margin: 0 0 6px; }
.como-premium p { margin: 0 0 6px; color: var(--tinta-2); max-width: 44rem; }

/* Cierre de la portada */
.cierre { margin-top: 50px; border-top: 5px solid var(--tinta); padding: 34px 0 6px; }
.cierre .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; }
.cierre h2 { font-size: 1.9rem; margin: 0 0 6px; }
.cierre p { margin: 0; color: var(--tinta-2); font-family: var(--serif); font-size: 1.1rem; max-width: 34rem; }
body.portada-pagina footer.pie { margin-top: 44px; }

/* Encabezado de paginas internas publicas (planes, Nosotros) */
.pagina-cabecera { background: transparent; color: var(--tinta); border-bottom: 1px solid var(--tinta); }
.pagina-cabecera .contenedor { padding-top: 46px; padding-bottom: 30px; }
.pagina-cabecera h1 { color: var(--tinta); margin: 0 0 10px; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); letter-spacing: -0.03em; }
.pagina-cabecera p { margin: 0; color: var(--tinta-2); font-family: var(--serif); font-size: 1.25rem; max-width: 40rem; line-height: 1.5; }
.pagina-cuerpo { padding-top: 38px; padding-bottom: 8px; }

/* Nosotros */
.nosotros-titulo { display: none; }
.nosotros { gap: 52px; }
.nosotros-indice-titulo { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; }
.nosotros-indice a { border-radius: 0; }
.nosotros-indice a.activo { color: var(--tinta); border-left-color: var(--tinta); background: transparent; font-weight: 800; }
.nosotros-seccion h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.02em; }
.nosotros-seccion h3 { font-size: 1.1rem; }
.nosotros-bajada { font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; color: var(--tinta-2); }
.nosotros-tarjetas { gap: 0; border-top: 1px solid var(--tinta); }
.nosotros-tarjeta { background: transparent; border: none; border-bottom: 1px solid var(--regla); border-radius: 0; box-shadow: none; padding: 14px 4px 14px 0; gap: 3px; }
.nosotros-tarjeta strong { font-family: var(--serif); font-size: 1.08rem; text-transform: none; letter-spacing: 0; color: var(--tinta); }
.nosotros-tarjeta span { color: var(--tinta-2); font-size: 15px; line-height: 1.5; }
.nosotros-bloque { background: #fff; border: 1px solid var(--regla); border-top: 3px solid var(--tinta); border-radius: var(--radio); box-shadow: none; padding: 20px 24px; }
.nosotros-persona { background: #fff; border: 1px solid var(--regla); border-radius: var(--radio); box-shadow: none; padding: 16px 18px; }
.nosotros-iniciales { background: var(--tinta); color: var(--papel); font-family: var(--font-marca); font-weight: 700; border-radius: 2px; }
.nosotros-contactos li { background: #fff; border: 1px solid var(--regla); border-radius: var(--radio); }

/* Ingreso, contacto y textos legales */
.contacto-publico { max-width: 640px; margin: 0 auto; padding-top: 12px; }
.legal { max-width: 760px; background: #fff; border: 1px solid var(--regla); border-top: 3px solid var(--tinta); border-radius: var(--radio); box-shadow: none; padding: 44px 52px 48px; margin: 6px auto 0; }
.legal h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.legal h2 { font-size: 1.2rem; margin: 30px 0 8px; }
.legal p { line-height: 1.75; color: #26221c; font-family: var(--serif); font-size: 1.05rem; }
.legal .nota { font-family: var(--sans); }
.legal-datos { background: var(--papel); border: 1px solid var(--regla); border-radius: var(--radio); }
@media (max-width: 600px) { .legal { padding: 28px 22px 32px; } }
.cuenta-datos dt { color: var(--tinta-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .portada-rejilla { grid-template-columns: 1fr; gap: 40px; }
    .numeros-fila { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
    .numero:nth-child(3) { border-left: none; padding-left: 0; }
    .se-rejilla { grid-template-columns: 1fr; gap: 22px; }
    .brand-desc { display: none; }
}
@media (max-width: 720px) {
    main { padding: 26px 16px 52px; }
    header.top { padding: 12px 16px; }
    nav.tabs { padding: 0 8px; }
    .fecha-datos { display: none; }
    .contenedor { padding: 0 18px; }
    .portada { padding-top: 30px; }
    .indice li { grid-template-columns: 34px 1fr; }
    .indice .i-texto { grid-column: 2; }
    .definiciones div { grid-template-columns: 1fr; }
    .como-premium, .cierre .contenedor { grid-template-columns: 1fr; }
    .ficha-header { padding: 20px 18px; }
    .stat { padding: 2px 16px; }
}
@media (max-width: 460px) {
    .hemiciclos { grid-template-columns: 1fr; }
    .numero-valor { font-size: 38px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Enlaces externos */
.enlace-externo { font-size: 14px; font-weight: 600; }

/* Notas largas de cada pagina, plegadas: una frase a la vista y el detalle a un clic */
.como-leer { max-width: 46rem; margin: 2px 0 20px; }
.como-leer summary { cursor: pointer; display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--enlace); list-style: none; }
.como-leer summary::-webkit-details-marker { display: none; }
.como-leer summary::after { content: " +"; }
.como-leer[open] summary::after { content: " –"; }
.como-leer p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--tinta-2); border-left: 3px solid var(--regla-2); padding-left: 14px; }

/* Equipo y valores: filas parejas, sin tarjetas huérfanas */
.nosotros-equipo { grid-template-columns: 1fr; }
.nosotros-persona { gap: 22px; padding: 22px 24px; }
.nosotros-persona img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center top; border: 1px solid var(--regla-2); }
.nosotros-iniciales { width: 96px; height: 96px; }
.nosotros-persona p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.nosotros-persona .enlace-externo { display: inline-block; margin-top: 10px; }
.nosotros-etiqueta { font-weight: 700; color: var(--tinta); }
@media (max-width: 520px) { .nosotros-persona { flex-direction: column; gap: 12px; } }
.nosotros-tarjetas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 32px; }

/* Planes: cinco planes en dos grupos */
.planes-grupo { margin: 0 0 40px; }
.planes-grupo > h2 { font-size: 1.25rem; margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--tinta); }
.planes-rejilla { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planes-rejilla.planes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--regla); border-top: 3px solid var(--tinta); padding: 22px 22px 20px; border-radius: var(--radio); }
.plan h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 4px; }
.plan-etiqueta { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 7px; background: var(--marcador, #ffe36e); color: var(--tinta); font: 700 11px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.plan-para { margin: 0; color: var(--tinta-2); }
.plan-precio { margin: 14px 0 0; padding: 12px 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); font-weight: 700; }
.plan-antes { margin: 16px 0 0; font-weight: 700; font-size: 14px; }
.plan ul { list-style: none; margin: 12px 0 22px; padding: 0; flex: 1; }
.plan li { position: relative; padding: 0 0 0 22px; margin: 0 0 9px; line-height: 1.5; color: var(--tinta-2); }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--verde); }
.plan .boton { align-self: flex-start; }
.boton-claro { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); }
.boton-claro:hover { background: var(--tinta); color: var(--papel); }
@media (max-width: 900px) { .planes-rejilla, .planes-rejilla.planes-2 { grid-template-columns: 1fr; } }

/* Pago con tarjeta (Planes) y suscripcion (Mi cuenta) */
.pago-resumen { margin: 0 0 14px; color: var(--tinta-2); line-height: 1.55; }
.pago-prueba { margin: 0 0 14px; padding: 9px 12px; background: var(--marcador, #ffe36e); color: var(--tinta); font-size: 13.5px; line-height: 1.45; border-radius: var(--radio); }
.modal-caja .nf-consent a { color: var(--enlace); }
#cuSuscripcion { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--regla); }
#cuSuscripcion h2 { font-size: 1.15rem; margin: 0 0 10px; }
#cuSuscripcion [hidden] { display: none !important; }
.cuenta-datos { grid-template-columns: 9.5rem minmax(0, 1fr); }
#cuSuscripcion .nf-acciones { margin-bottom: 18px; }