/* Estilos de las páginas corporativas del portal (home, metodología, sectores, quiénes somos,
   contacto). Van aparte de styles.css a propósito: ese fichero son 3.000 líneas de la landing
   de conversión, con sus animaciones y sus carruseles, y el portal no necesita casi nada de eso.
   Se carga DESPUÉS, así que puede ajustar lo que herede sin pelear por especificidad.

   Se reutilizan las variables, los botones y la rejilla de styles.css. Lo de aquí es la
   disposición propia del portal y nada más. */

/* ── Accesibilidad ──────────────────────────────────────────────────────────
   El enlace de salto es lo primero que encuentra quien navega con teclado: sin él hay que
   tabular por todo el menú en cada página para llegar al contenido. Está oculto hasta que
   recibe el foco, momento en el que tiene que verse de verdad. */
.saltar-al-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--cyan-neon);
    color: var(--bg-dark);
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-size: 0.85rem;
    text-decoration: none;
}

.saltar-al-contenido:focus {
    left: 0;
}

/* Foco visible en todo lo interactivo del portal. Va con :focus-visible para que no salte al
   hacer clic con el ratón, solo al llegar con teclado. */
.portal-header a:focus-visible,
.portal-nav a:focus-visible,
main a:focus-visible,
.footer a:focus-visible {
    outline: 2px solid var(--cyan-neon);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.portal-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.portal-nav .nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    transition: color 0.2s;
    white-space: nowrap;
}

.portal-nav .nav-link:hover,
.portal-nav .nav-link.activo {
    color: var(--cyan-neon);
}

/* La página en la que estás se marca también con algo que no sea solo color: quien no distingue
   el cian del gris necesita otra señal. */
.portal-nav .nav-link.activo {
    border-bottom: 1px solid var(--cyan-neon);
    padding-bottom: 2px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.portal-hero {
    padding: 150px 0 80px;
    text-align: center;
}

.portal-hero .badge {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    margin-bottom: 24px;
}

.portal-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5.2vw, 3.6rem);
    line-height: 1.12;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 900px;
    margin: 0 auto 26px;
}

/* Las dos mitades del titular en bloques distintos: la segunda es la que gira la frase, y en
   una sola línea larga se pierde. */
.portal-hero-title span {
    display: block;
}

.portal-hero-title .highlight-line {
    color: var(--orange-neon);
}

.portal-hero-sub {
    font-size: clamp(0.98rem, 1.6vw, 1.15rem);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto 36px;
}

.portal-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Secciones ────────────────────────────────────────────────────────────── */
.portal-section {
    padding: 60px 0;
}

.portal-section .container.narrow {
    max-width: 760px;
}

.portal-section .container.center {
    text-align: center;
}

.portal-lead {
    font-size: 1.02rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.portal-section p {
    color: var(--text-secondary);
    line-height: 1.75;
}

.portal-section .btn {
    margin-top: 24px;
}

/* ── Las tres fugas ───────────────────────────────────────────────────────── */
.fugas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.fuga-card {
    background: var(--surface-container-low);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 26px 24px;
}

.fuga-card h3 {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan-neon);
    margin-bottom: 12px;
}

.fuga-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Bloque del vertical activo ───────────────────────────────────────────── */
.vertical-destacado {
    background: var(--surface-container-low);
    border: 1px solid rgba(71, 234, 237, 0.25);
    border-radius: 16px;
    padding: 44px 40px;
    text-align: center;
}

.vertical-destacado .badge {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}

.vertical-destacado p {
    max-width: 560px;
    margin: 0 auto;
}

/* ── Un dato y su fuente ──────────────────────────────────────────────────────
   Van SIEMPRE juntos y en pantalla. La fuente no se esconde en una nota al pie ni en un
   tooltip: una cifra sin fuente a la vista es una cifra que hay que creerse, y la única
   ventaja de tener un dato bueno es que se puede comprobar.
   Se marca con <figure>/<figcaption> y no con dos <p> para que la relación entre el dato y su
   procedencia exista también para un lector de pantalla. */
.dato-con-fuente {
    margin: 28px auto 0;
    max-width: 560px;
    border-left: 3px solid var(--orange-neon);
    padding-left: 18px;
    text-align: left;
}

.dato-con-fuente .dato {
    font-size: 1.02rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 6px;
}

.dato-con-fuente .fuente {
    font-size: 0.76rem;
    color: rgba(186, 201, 201, 0.65);
    letter-spacing: 0.02em;
    margin: 0;
}

/* ── Cierre ───────────────────────────────────────────────────────────────── */
.portal-cierre {
    padding-bottom: 90px;
}

/* ── Móvil ────────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
    .portal-nav {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* El CTA del menú desaparece en móvil: el hero ya tiene el suyo dos dedos más abajo, y
       manteniéndolo la cabecera se parte en tres líneas. */
    .portal-nav .cta-secondary {
        display: none;
    }

    .portal-hero {
        padding: 120px 0 60px;
    }

    .vertical-destacado {
        padding: 32px 22px;
    }
}

/* ── Hero compacto (páginas interiores) ─────────────────────────────────────
   El home necesita aire; las interiores no: quien llega ahí ya sabe qué busca. */
.portal-hero.compacto {
    padding: 130px 0 40px;
    text-align: left;
}

.portal-hero.compacto .portal-hero-title {
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    margin-left: 0;
    margin-right: 0;
}

.portal-hero.compacto .portal-hero-sub {
    margin-left: 0;
    margin-right: 0;
}

.center-title {
    text-align: center;
}

/* ── Los cinco pasos ────────────────────────────────────────────────────────
   Es un <ol> de verdad: el orden es parte del contenido y con divs sueltos un lector de
   pantalla no lo transmite. El número se pinta con un contador para no depender del marcador
   por defecto, que no se puede estilar. */
.pasos {
    list-style: none;
    counter-reset: paso;
    padding: 0;
    margin: 30px 0 0;
}

.paso {
    counter-increment: paso;
    position: relative;
    padding-left: 58px;
    padding-bottom: 30px;
    border-left: 1px solid rgba(71, 234, 237, 0.18);
    margin-left: 17px;
}

.paso:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.paso::before {
    content: counter(paso);
    position: absolute;
    left: -17px;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-container-low);
    border: 1px solid var(--cyan-neon);
    color: var(--cyan-neon);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paso h3 {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan-neon);
    margin: 6px 0 10px;
}

.paso p {
    font-size: 0.94rem;
    margin: 0;
}

/* ── Lista de sectores a consulta ───────────────────────────────────────── */
.sectores-lista {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.sectores-lista li {
    background: var(--surface-container-low);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.sectores-cierre {
    font-size: 0.92rem;
    margin-top: 18px;
}

/* ── Formulario de contacto ─────────────────────────────────────────────── */
.contacto-form {
    max-width: 560px;
    margin-top: 10px;
}

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea {
    width: 100%;
    background: var(--surface-container-low);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
}

.campo input:focus-visible,
.campo textarea:focus-visible {
    outline: 2px solid var(--cyan-neon);
    outline-offset: 2px;
    border-color: var(--cyan-neon);
}

/* La casilla y su texto en línea, con el cuadro alineado a la primera línea. */
.campo-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.campo-consent input {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--cyan-neon);
}

.campo-consent label {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
}

.campo-consent input:focus-visible {
    outline: 2px solid var(--cyan-neon);
    outline-offset: 2px;
}

.consent-link {
    color: var(--cyan-neon);
    text-decoration: underline;
}

/* role="alert": el mensaje se anuncia solo al aparecer. Sin eso, quien usa lector de pantalla
   pulsa enviar y no se entera de que hay un error más arriba. */
.form-error {
    color: var(--orange-neon);
    font-size: 0.87rem;
    margin: 4px 0 14px;
}

.form-nota {
    font-size: 0.8rem;
    color: rgba(186, 201, 201, 0.6);
    margin-top: 14px;
}

.form-ok {
    background: var(--surface-container-low);
    border: 1px solid var(--cyan-neon);
    border-radius: 10px;
    padding: 22px 24px;
    max-width: 560px;
}

.form-ok p {
    margin: 0;
    color: var(--text-primary);
}

/* ── Blog ─────────────────────────────────────────────────────────────────────
   Dos piezas: el índice (lista de tarjetas) y la entrada (texto largo). La segunda es la única
   parte del portal pensada para LEERSE seguido, así que va más ancha de línea, más alta de
   interlineado y sin nada que compita al lado. */

.blog-lista {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.blog-card {
    background: var(--surface-container-low);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 28px 26px;
}

.blog-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.35;
    margin: 0 0 8px;
}

.blog-card-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--cyan-neon);
}

.blog-card-meta {
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: rgba(186, 201, 201, 0.65);
    margin: 0 0 12px;
}

.blog-card-resumen {
    font-size: 0.94rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
}

.blog-card-link {
    color: var(--cyan-neon);
    font-size: 0.86rem;
    text-decoration: none;
    letter-spacing: 0.03em;
}

.blog-card-link:hover {
    text-decoration: underline;
}

/* Estado vacío y aviso del 404. Sobrios a propósito: no son un error del visitante. */
.blog-vacio,
.blog-aviso {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.blog-aviso {
    border-left: 3px solid var(--orange-neon);
    padding: 4px 0 4px 16px;
    margin-bottom: 30px;
}

.blog-vacio-puente {
    margin-top: 14px;
}

.blog-vacio-puente a {
    color: var(--cyan-neon);
}

/* ── La entrada ───────────────────────────────────────────────────────────── */
.blog-title {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 12px;
}

.blog-meta {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: rgba(186, 201, 201, 0.65);
    margin: 0;
}

/* 68ch es el ancho de lectura cómodo. Por encima de ~75 el ojo pierde el renglón al saltar de
   línea, y este es el único sitio del portal donde hay párrafos largos de verdad. */
.blog-cuerpo {
    max-width: 68ch;
    padding-bottom: 20px;
}

.blog-cuerpo p,
.blog-cuerpo li {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.blog-cuerpo p {
    margin: 0 0 20px;
}

.blog-cuerpo h2 {
    font-family: var(--font-heading);
    font-size: 1.28rem;
    color: var(--cyan-neon);
    line-height: 1.35;
    margin: 42px 0 16px;
}

.blog-cuerpo h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
    margin: 30px 0 12px;
}

.blog-cuerpo ul,
.blog-cuerpo ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.blog-cuerpo li {
    margin-bottom: 10px;
}

.blog-cuerpo strong {
    color: var(--text-primary);
}

.blog-cuerpo a {
    color: var(--cyan-neon);
    text-decoration: underline;
}

.blog-cuerpo blockquote {
    border-left: 3px solid var(--orange-neon);
    padding-left: 18px;
    margin: 0 0 22px;
    color: var(--text-primary);
}

.blog-cuerpo img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.blog-volver {
    color: var(--cyan-neon);
    font-size: 0.88rem;
    text-decoration: none;
    letter-spacing: 0.03em;
}

.blog-volver:hover {
    text-decoration: underline;
}

.blog-articulo a:focus-visible,
.blog-card a:focus-visible,
.blog-volver:focus-visible {
    outline: 2px solid var(--cyan-neon);
    outline-offset: 3px;
}

/* ── Retratos (bloque "Quién está detrás" de /sobre) ──────────────────────────
   Las imágenes las pinta el servidor desde el CMS. Si un campo está vacío,
   `inyectarMedios` borra el <img> ENTERO, así que esta rejilla puede quedarse con
   una figura, con ninguna, o vacía del todo.

   Por eso el alto sale del contenido y no hay altura fija: un grid sin hijos mide
   cero y no deja un agujero en la página. NO se usa `:empty` para esconderla —
   entre las etiquetas borradas queda espacio en blanco y `:empty` no casaría. */
.retratos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.retrato { margin: 0; }

.retrato img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(71, 234, 237, 0.15);
}

.retrato figcaption {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Una sola figura no se estira a lo ancho de la fila: una foto de perfil a 700px
   de ancho queda ridícula. */
.retratos .retrato:only-child { max-width: 320px; }

/* ── Secciones añadidas desde el panel (lib/secciones-extra.js) ───────────────
   Genéricas, al final de la página. Deliberadamente sobrias: son un párrafo o una
   llamada a la acción, no piezas de la landing con neones. Si algún día chirrían
   con el resto, el sitio de arreglarlo es aquí, no en el generador.

   Sin `.reveal`: el portal no carga el IntersectionObserver que le quita el
   `opacity: 0`, así que una sección con esa clase nunca se vería. */
.portal-extra .section-title { margin-bottom: 14px; }
.portal-extra p { margin-bottom: 20px; }

.portal-extra-cta {
    border-top: 1px solid rgba(71, 234, 237, 0.12);
    border-bottom: 1px solid rgba(71, 234, 237, 0.12);
    background: rgba(71, 234, 237, 0.03);
}