/* ============================================================
   TELAS.CSS — Steal This Psycho
   Sistema de "telas" (acordeón exclusivo) + menú horizontal.

   El solape entre tela y franja de marca (--tela-solape, main.css) se
   aplica aquí a los 3 consumidores reales: site-header/menu-horizontal
   (main.css) y .triage-banner (este archivo).

   .triage-banner::before ya no recorta su fondo a ninguna silueta de
   pincel ni pinta un rectángulo de fondo recortado por un mask de
   opacidad (enfoque abandonado por leerse como "caja traslúcida con los
   bordes en fade", no como mancha con forma propia — mismo diagnóstico
   documentado en main.css junto a "TRAZO DE PINCEL EN FRANJA DE MARCA").
   El fondo visible es directamente --textura-cerda-fina.
   ============================================================ */
 
/* ------------------------------------------------------------
   0. CONTENEDOR PRINCIPAL DEL ACORDEÓN — "tela finita"
   [NUEVO] #contenedor-telas (index.html) no tenía max-width ni margin:
   cada .tela ocupaba el 100% del viewport, así que el papel melón se
   veía "infinito" (llenaba toda la pantalla) en vez de leerse como una
   hoja acotada flotando sobre la mesa oscura — a diferencia de
   .dir-container/.blog-container (Directorio/Bitácora), que SÍ tienen
   max-width + margin:auto y por eso se ven como una isla de papel bien
   definida, con --bg-dark visible alrededor. Mismo max-width que esos
   2 contenedores para que las 3 páginas compartan una sola proporción
   de "ancho de hoja" en todo el sitio. .menu-horizontal (sticky, vive
   FUERA de #contenedor-telas) recibe el mismo max-width + centrado para
   que quede alineado con el ancho de la tela que abre debajo.
   ------------------------------------------------------------ */
#contenedor-telas {
    max-width: 1250px;
    margin: 0 auto;
}
 
/* ------------------------------------------------------------
   1. MENÚ HORIZONTAL
   Layout: [grupo izq: 2 items] [LOGO central] [grupo der: 3 items]
   CAMBIO: grupos separados explícitamente con justify-content space-between
   para que el logo quede físicamente entre ellos.
   ------------------------------------------------------------ */
.menu-horizontal {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    /* [CAMBIO — deja de ser sticky, mismo criterio que .site-header
       (main.css)] --banner-alto ampliado hacía que el menú fijo tapara
       demasiado contenido al hacer scroll. margin-top reemplaza a
       'top' para conservar la separación del borde superior sin el
       hueco que dejaría position:relative + top. */
    margin-top: var(--franja-marca-top);
    min-height: var(--banner-alto);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.6rem 1.5rem;
    background: none;
    position: relative;
    z-index: 80;
    border-radius: var(--card-radius, 20px);
    flex-wrap: wrap;
}
 
/* SOLAPE CON EL MENÚ (index.html): el selector apunta a la clase
   .tela--abierta, no a #contenedor-telas — de las 4 .tela del acordeón
   solo una la tiene a la vez, así que en la práctica el margen negativo
   actúa una sola vez, sobre la tela realmente visible. margin-top
   negativo sube el fondo/textura de esa tela por detrás de
   .menu-horizontal (z-index:80).
   [RECALIBRADO — 2 intentos] .menu-horizontal dejó de ser sticky (fix
   bug de scroll tapando contenido). 1er intento: restar --tela-solape
   completo (~130-170px, sin tope) devoraba casi todo el espacio real
   del header, dejando el papel "infinito hacia arriba" sin mesa
   visible. 2do intento: un solape fijo de -28px resolvía eso pero dejó
   de escalar con --banner-alto — se veía "pegado" en vez de "absorbido"
   en el papel. Solución final: --tela-solape (main.css :root) ahora
   incluye su propio tope vía min(), así que sigue siendo responsivo al
   tamaño real de la mancha SIN volver a devorar el espacio del header.
   El contenido real NO se mueve: cada .tela-contenido compensa con su
   propio padding-top (ver más abajo, "Estado abierto"). */
.tela.tela--abierta:not(.tela--triage) {
    margin-top: calc(-1 * var(--tela-solape));
}
 
/* Grupos izquierdo y derecho de botones */
.menu-items-left,
.menu-items-right {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
 
/* Wrapper del logo — actúa como separador real entre grupos */
.menu-logo-row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
 
/* Logo central del menú — tamaño unificado con header compartido */
.menu-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand-neon);
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
    display: block;
    margin: 0 0.85rem;
}
.menu-logo:hover {
    transform: scale(1.1) rotate(-4deg);
    border-color: var(--brand-ladrillo);
    box-shadow: none;
}
 
.menu-item {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.84rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 500;
    /* [CAMBIO — usa el token único --halo-texto-variable (main.css :root)
       en vez de una sombra propia con un solo color fijo. --text-dim
       (rosa apagado) se quedaba casi invisible sobre zonas melón sin
       cerda; --text-light + halo de 2 direcciones da contraste real
       sin importar qué fondo real caiga detrás de cada letra. */
    text-shadow: var(--halo-texto-variable);
}
.menu-item:hover {
    color: var(--brand-neon);
    border-color: color-mix(in srgb, var(--v-vivo) 35%, transparent);
}
.menu-item.activo {
    background: var(--brand-neon);
    color: var(--acc-melon-clr);  /* [CONTRASTE AA] --text-light (3.26:1) → melón #f7cba3 (7.1:1 sobre #9d0707) */
    border-color: var(--brand-neon);
    box-shadow: none;
}
 
/* ------------------------------------------------------------
   2. COMPONENTE BASE: .tela — VELOCIDAD REDUCIDA A 0.35s
   ------------------------------------------------------------ */
.tela {
    position: relative;
    overflow: hidden;
    background: var(--acc-melon-osc);
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    /* margin-top en la transición: el solape con el menú (--tela-solape)
       anima parejo con el resto del acordeón — sin esto, el lienzo
       saltaría de golpe a su posición solapada mientras
       grid-template-rows/opacity siguen en transición suave. */
    transition:
        grid-template-rows 0.35s cubic-bezier(0.55, 0, 0.3, 1),
        margin-top 0.35s cubic-bezier(0.55, 0, 0.3, 1);
    border-radius: var(--card-radius, 20px);
}
 
/* ==========================================================================
   SISTEMA DE TELAS: CONFIGURACIÓN BASE Y ESTADOS DE TRANSICIÓN
   ========================================================================== */
 
.tela-contenido {
    overflow: hidden;
    min-height: 0;
    transform: scaleY(0.95);
    transform-origin: top;
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.55, 0, 0.3, 1),
        opacity 0.25s ease,
        padding 0.35s cubic-bezier(0.55, 0, 0.3, 1);
 
    --tela-heading-color: var(--melon-heading);
    --tela-text-color: var(--melon-text);
    /* [2026-08-05] Halo LIGERO de contacto para las telas de contenido:
       el texto de las telas (Servicios, Quiénes somos…) cae sobre
       --textura-canvas (grano de papel sutil), NO sobre las cerdas; el
       halo fuerte de --halo-texto-variable (4 direcciones, pensado para
       menú/header/banner/botones sobre --textura-cerda-fina) se veía
       recargado en el cuerpo de las telas. Este solo ancla las letras,
       sin borde ni aro. */
    --tela-text-halo: 0 1px 2px color-mix(in srgb, var(--tinta-negra) 40%, transparent);
    --tela-font-heading: var(--font-display, 'Space Grotesk', sans-serif);
    --tela-font-body: var(--font-body, 'Source Serif 4', serif);
}
 
/* --- Estado abierto --- */
.tela.tela--abierta {
    grid-template-rows: 1fr;
    background-color: var(--acc-melon-osc);
    background-image: var(--textura-canvas);
    background-size: 300px 300px;
}
 
.tela.tela--abierta:not(.tela--triage) > .tela-contenido {
    /* padding-top suma --tela-solape (ahora con tope, ver main.css
       :root) al 1rem base — compensa el margin-top negativo de
       .tela--abierta (arriba, "SOLAPE CON EL MENÚ"): el fondo sube
       detrás del menú, pero el contenido real (h2/p/botones) vuelve a
       su posición visual original, nunca detrás de la mancha ni oculto
       a la interacción. */
    padding: calc(1rem + var(--tela-solape)) 1.4rem 1rem;
    transform: scaleY(1);
    opacity: 1;
}
 
/* --- Estado cerrando --- */
.tela.tela--cerrando {
    grid-template-rows: 0fr;
}
.tela.tela--cerrando > .tela-contenido {
    transform: scaleY(0.95);
    opacity: 0;
}
 
/* ==========================================================================
   TIPOGRAFÍA ESTRUCTURAL DE TELA (USO DE VARIABLES DE CONTEXTO)
   ========================================================================== */
 
.tela:not(.tela--triage) > .tela-contenido > h2,
.tela:not(.tela--triage) > .tela-contenido > .header-tela h2 {
    font-family: var(--tela-font-heading);
    font-size: var(--text-xl, 1.6rem);
    color: var(--tela-heading-color);
    text-shadow: var(--tela-text-halo);
    margin-bottom: 1.2rem;
    letter-spacing: -0.02em;
}
 
.tela:not(.tela--triage) > .tela-contenido > p,

.tela:not(.tela--triage) > .tela-contenido > .tela-quienes-texto p {
    /* [FIX — texto invisible en "Quiénes somos"] Causa real encontrada en
       index.html: el <p> de esa tela vive dentro de
       <div class="tela-quienes-texto">, NO de <div class="intro-tela">
       (la única clase intermedia que este selector cubría). Como no
       matcheaba ningún selector propio, el párrafo heredaba color: var(
       --text-light) directo del <body> — un color CLARO pensado para
       fondo oscuro, aplicado sobre el fondo melón claro de la tela
       abierta: texto casi invisible por herencia por defecto, nunca por
       el valor de --melon-text (ese token nunca llegó a aplicarse aquí).
       Se añade la clase real usada en el HTML; no fue necesario tocar
       ningún color. */
    font-family: var(--tela-font-body);
    color: var(--tela-text-color);
    text-shadow: var(--tela-text-halo);
    line-height: 1.65;
    font-size: var(--text-base, 0.92rem);
}
 
/* ==========================================================================
   EXCEPCIONES DE CONTRASTE Y COMPONENTES TRANSPARENTES (TAREA 1 y 7)
   ========================================================================== */
 
.dir-card-frase {
    color: var(--texto-heading);
}
 
.cc-frase {
    color: var(--melon-heading);
}
 
.bitacora-card p {
    color: var(--texto-cuerpo);
}
/* ------------------------------------------------------------
   NAVEGACIÓN LATERAL — botones ‹ › para ciclar entre telas
   ------------------------------------------------------------ */
.nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* [CAMBIO — tinta de marcador] Antes: fondo color-mix, borde 1px.
       Ahora: sin caja, solo el glifo de flecha dibujado en tinta.
       La flecha se siente como trazada con marcador sobre la mesa. */
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, opacity 0.2s, transform 0.15s;
    opacity: 0;
    pointer-events: none;
    font-family: var(--font-body, inherit);
    /* Trazo ligeramente inclinado — simula mano humana */
    transform: translateY(-50%) rotate(-2deg);
}
.nav-arrow--left  { left: 0.75rem; }
.nav-arrow--right { right: 0.75rem; }
.nav-arrow--right { transform: translateY(-50%) rotate(2deg); }

.nav-arrow:hover {
    color: var(--brand-neon);
    transform: translateY(-50%) rotate(0deg) scale(1.15);
}
.nav-arrow--right:hover {
    transform: translateY(-50%) rotate(0deg) scale(1.15);
}
 
body.tela-activa .nav-arrow      { opacity: 1; pointer-events: auto; }
body.triage-open  .nav-arrow     { opacity: 0; pointer-events: none; }
body.triage-open {
    overflow: hidden;
}
 
@media (max-width: 480px) {
    .nav-arrow {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
    .nav-arrow--left  { left: 0.25rem; }
    .nav-arrow--right { right: 0.25rem; }
}
 
.triage-brand-logo {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand-neon);
    box-shadow: none;
    margin: 0 auto 1.8rem;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s;
}
.triage-brand-logo:hover {
    transform: scale(1.14) rotate(-5deg);
    border-color: var(--brand-ladrillo);
    box-shadow: none;
}
 
/* ------------------------------------------------------------
   3. TELA DEL TRIAGE — overlay full-screen
   ------------------------------------------------------------ */
.tela--triage {
    position: fixed;
    inset: 0;
    z-index: 500;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-dark) 96%, transparent);
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -5%, color-mix(in srgb, var(--acc-melon) 7%, transparent), transparent 65%),
        linear-gradient(color-mix(in srgb, var(--v-vivo) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--v-vivo) 5%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 18px 18px, 18px 18px;
    grid-template-rows: unset;
    transition: opacity 0.35s ease;
}
 
.tela--triage > .tela-contenido {
    position: relative;
    /* [FIX TRIAGE-MARGINS] Añadido padding horizontal para que el contenido
       no toque los bordes de la card. Antes padding:0 causaba desbordamiento
       en pantallas pequeñas. */
    padding: 0 1rem;
    background: var(--acc-melon-osc);
    background-image:
        linear-gradient(color-mix(in srgb, var(--v-grano) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--v-grano) 4%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
    width: min(92vw, 920px);
    max-width: none;
    height: calc(100vh - 3rem);
    height: calc(100dvh - 3rem);
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--v-ladrillo) transparent;
    border: var(--marco-grosor) solid var(--tinta-color);
    border-radius: var(--card-radius, 20px);
    box-shadow: 0 28px 64px -14px color-mix(in srgb, var(--tinta-negra) 60%, transparent);
    transform: scaleY(0.94);
    opacity: 0;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
        opacity 0.3s ease;
}
 
/* NUEVO: banner de marca — mismo lienzo que .menu-horizontal/.site-header
   (sin fondo propio en el elemento real), aloja solo el logo. El lienzo
   melón real vive en el padre común (.tela-contenido, "SOLAPE CON EL
   BANNER") y continúa detrás de este banner — la mancha de acuarela
   flota sobre el mismo papel, no sobre un bloque vino separado. */
.triage-banner {
    flex-shrink: 0;
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* [CORRECCIÓN — fallback de fondo] Mismo fix que .site-header/
       .menu-horizontal (main.css): si --textura-cerda-fina (SVG externo)
       no carga, background:none dejaba el banner del triage —el momento
       más sensible del recorrido del usuario— sin ningún color. Este
       degradado pinta detrás de ::before y es invisible cuando el SVG
       carga con normalidad. */
    background: linear-gradient(135deg, var(--v-oscuro), var(--v-vivo) 55%, var(--v-ladrillo));
    position: relative;
    isolation: isolate;
    z-index: 1;
}
/* Única capa de fondo visible: --textura-cerda-fina, mismo criterio que
   .site-header::before/.menu-horizontal::before (ver "TRAZO DE PINCEL
   EN FRANJA DE MARCA", main.css). */
.triage-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--textura-cerda-fina);
    background-size: auto 100%;
    background-repeat: repeat-x;
    pointer-events: none;
    z-index: -1;
}
/* Marco de tinta perimetral (solo borde inferior). */
.triage-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: var(--marco-grosor) solid var(--tinta-negra);
    filter: var(--filtro-tinta-ext);
    mask-image: var(--marco-guiones), var(--marco-desvanecido);
    -webkit-mask-image: var(--marco-guiones), var(--marco-desvanecido);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    pointer-events: none;
    z-index: 1;
}
 
.triage-cuerpo {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding: 0;
    isolation: isolate;
}
#triage-container,
.tela--triage .resultado-triage {
    width: 100%;
    flex-shrink: 0;
}
 
.tela--triage.tela--abierta > .tela-contenido::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: var(--marco-grosor) solid var(--tinta-color);
    border-radius: inherit;
    filter: var(--filtro-tinta-int);
    /* [FIX TRIAGE-MANCHAS] Opacidad aumentada de 0.6 a 0.8 para que las
       manchas de tinta sean más visibles sobre el fondo melón. */
    opacity: 0.8;
    mix-blend-mode: multiply;
    mask-image: var(--marco-desvanecido-perimetral);
    -webkit-mask-image: var(--marco-desvanecido-perimetral);
    pointer-events: none;
    z-index: -1;
}
.tela--triage.tela--abierta > .tela-contenido::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: var(--marco-grosor) solid var(--tinta-negra);
    border-radius: inherit;
    filter: var(--filtro-tinta-ext);
    mask-image: var(--marco-desvanecido-perimetral);
    -webkit-mask-image: var(--marco-desvanecido-perimetral);
    pointer-events: none;
    z-index: -1;
}
 
.tela--triage.tela--abierta > .tela-contenido {
    transform: scaleY(1);
    opacity: 1;
}
 
.tela--triage.tela--saliendo {
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------
   2c. TRIAGE EN MODO HOVER (banner compartido en todas las webs)
   El banner de triage (triage-banner.js) abre el overlay en modo
   'hover': el fondo deja de ser un velo casi opaco y pasa a ser un
   translúcido con backdrop-filter blur BAJO (5px, no alto) — la
   sección de la página se ve detrás, desenfocada, en vez de tapada.
   body.triage-hover-open se controla desde engine.js
   (iniciarTelaTriage('hover') / salirDeTriageHacia).
   ------------------------------------------------------------ */
body.triage-hover-open .tela--triage {
    background: color-mix(in srgb, var(--bg-dark) 42%, transparent);
    background-image: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.35s ease, backdrop-filter 0.35s ease;
}
body.triage-hover-open .tela--triage.tela--saliendo {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* ------------------------------------------------------------
   2d. BANNER DE TRIAGE POR PÁGINA — componente compartido
   (.triage-banner-page). Franja vino-acuarela al pie de cada web,
   mismo lienzo que .site-header/.menu-horizontal (main.css) y que
   .triage-banner (arriba): fondo real = degradado vino + cerda-fina
   en ::before + línea de marcador en ::after. Es una MANCHA sobre el
   papel, no una tarjeta elevada: sin box-shadow, con max-width
   alineado al resto del sitio. El hover/click lo conecta triage-banner.js.
   ------------------------------------------------------------ */
.triage-banner-page {
    max-width: 1250px;
    margin: 0 auto;
    margin-top: calc(2rem + var(--franja-marca-top));
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
    position: relative;
    isolation: isolate;
    border-radius: var(--card-radius, 20px);
    overflow: hidden;
    background: linear-gradient(135deg, var(--v-oscuro), var(--v-vivo) 55%, var(--v-ladrillo));
    transition: transform 0.25s ease, filter 0.25s ease;
}
.triage-banner-page::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--textura-cerda-fina);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: right 100px center;
    pointer-events: none;
    z-index: 0;
}
.triage-banner-page::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: var(--marco-grosor) solid var(--tinta-color);
    border-bottom: var(--marco-grosor) solid var(--tinta-color);
    filter: var(--filtro-tinta-int);
    opacity: 0.75;
    mask-image: var(--marco-guiones), var(--marco-desvanecido);
    -webkit-mask-image: var(--marco-guiones), var(--marco-desvanecido);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    pointer-events: none;
    z-index: 1;
}
.triage-banner-page > * {
    position: relative;
    z-index: 2;
}
.triage-banner-page:hover,
.triage-banner-page:focus-visible {
    transform: scale(1.01);
    filter: brightness(1.08);
}
.triage-banner-page-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand-neon);
    flex-shrink: 0;
    transition: transform 0.3s ease, border-color 0.3s;
}
.triage-banner-page:hover .triage-banner-page-logo {
    transform: scale(1.08) rotate(-4deg);
    border-color: var(--brand-ladrillo);
}
.triage-banner-page-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}
.triage-banner-page-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--text-xl, 1.6rem);
    font-weight: 700;
    color: var(--text-light);
    text-shadow: var(--halo-texto-variable);
    letter-spacing: -0.02em;
}
.triage-banner-page-cta {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--text-base, 0.92rem);
    font-weight: 600;
    color: var(--acc-melon-clr);  /* [CONTRASTE AA] --brand-neon (1.13-1.46:1) → melón #f7cba3 (5.41-9.71:1 sobre el vino) */
    text-shadow: var(--halo-texto-variable);
    letter-spacing: 0.5px;
}
.triage-banner-page-cta::after {
    content: " →";
}
@media (max-width: 480px) {
    .triage-banner-page {
        padding: 1.5rem 1rem;
        gap: 1rem;
    }
    .triage-banner-page-logo {
        width: 56px;
        height: 56px;
    }
    .triage-banner-page-title {
        font-size: 1.15rem;
    }
}
@media print {
    .triage-banner-page,
    .tela--triage {
        display: none !important;
    }
}
 
.quiz-skip-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--scrim-oscuro);
    border: 1px solid var(--brand-neon);
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.quiz-skip-container:hover {
    background: var(--v-oscuro);
    border-color: var(--brand-neon);
}
.quiz-skip-text {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    letter-spacing: 0.5px;
}
 
#triage-container {
    position: relative;
    z-index: 1;
    padding-top: 1.4rem;
}
#triage-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: var(--marco-grosor) solid var(--tinta-color);
    filter: var(--filtro-tinta-int);
    opacity: 0.75;
    mask-image: var(--marco-guiones), var(--marco-desvanecido);
    -webkit-mask-image: var(--marco-guiones), var(--marco-desvanecido);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    pointer-events: none;
}
 
.quiz-step { display: none; margin-top: 1rem; }
.quiz-step.active { display: block; }
.quiz-step h2 {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--text-md, 1.05rem);
    color: var(--texto-heading);
    line-height: 1.4;
    margin-bottom: 0.3rem;
}
 
.options-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
 
.quiz-btn {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: none;
    color: var(--texto-heading);  /* [CAMBIO] --texto-cuerpo → --texto-heading: melón legible */
    padding: 1.2rem 2rem;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--text-base, 1.05rem);
    font-weight: 600;
    line-height: 1.5;
    max-width: 520px;
    width: 100%;
    /* [2026-08-05] Halo fuerte de contacto: texto melón sobre las manchas
       sumi-e del ::before; separa las letras del ruido de las cerdas. */
    text-shadow: var(--halo-texto-variable);
    transition: color 0.2s, transform 0.15s;
}
.quiz-btn::before {
    content: "";
    position: absolute;
    inset: -12px;
    background-image: var(--textura-sumi-btn-01);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* [FIX TRIAGE-MANCHAS] Opacidad explícita para que las manchas sumi-e
       de los botones del triage sean más visibles sobre fondo melón. */
    opacity: 0.85;
    pointer-events: none;
    z-index: -1;
}
.quiz-btn:nth-child(3n+2)::before {
    background-image: var(--textura-sumi-btn-02);
    inset: -14px;
}
.quiz-btn:nth-child(3n+3)::before {
    background-image: var(--textura-sumi-btn-03);
    inset: -10px;
    opacity: 0.7;
}
.quiz-btn:hover {
    color: #fff;  /* [CONTRASTE AA] --c-neon (#9d0707, 1:1 sobre las manchas sumi) → blanco (≥12.8:1) */
    transform: translateX(4px);
}
 
.progress-container {
    height: 4px;
    /* [CAMBIO] Tinte visible sobre fondo melón */
    background: color-mix(in srgb, var(--acc-verdazul-osc) 50%, transparent);
    border-radius: 10px;
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--v-oscuro), var(--acc-melon));
    transition: width 0.3s ease;
    border-radius: 10px;
    position: relative;
    isolation: isolate;
}
.progress-bar::after {
    content: "";
    position: absolute;
    inset: -3px;
    background: inherit;
    border-radius: inherit;
    filter: var(--filtro-mancha-sm);
    mix-blend-mode: overlay;
    opacity: 0.7;
    pointer-events: none;
}
 
/* ------------------------------------------------------------
   4. CARD DE RESULTADO DEL TRIAGE — versión enriquecida
   ------------------------------------------------------------ */
.resultado-triage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1.5rem 1rem;
    max-width: min(480px, 100%);
    margin: 0 auto;
    animation: fadeInUp 0.35s ease both;
}
 
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
 
.resultado-avatar-wrap {
    position: relative;
    margin-bottom: 0.9rem;
}
.resultado-avatar-wrap .avatar {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    border-color: var(--c-neon);
    box-shadow: none;
}
 
.resultado-avatar-xl {
    width: min(104px, 22vw);
    height: min(104px, 22vw);
    box-shadow: none !important;
}
 
.resultado-nombre {
    font-family: var(--font-voice);
    font-size: 1.25rem;
    color: var(--texto-heading);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.resultado-especialidad {
    font-family: var(--font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--texto-heading);  /* [CAMBIO] --texto-cuerpo → --texto-heading: melón legible */
    margin-bottom: 0.6rem;
}
 
.resultado-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.resultado-chip {
    font-size: 0.65rem;
    padding: 0.22rem 0.65rem;
    border: 1px solid var(--c-neon);
    color: var(--text-light);
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--scrim-oscuro);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tinta-negra) 35%, transparent);
}
 
.resultado-titulo {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--texto-heading);
    margin-bottom: 0.5rem;
}
.resultado-texto {
    font-size: 0.88rem;
    color: var(--texto-cuerpo);
    line-height: 1.6;
    margin-bottom: 0.65rem;
    width: 100%;
    max-width: min(42ch, 100%);
}
 
.resultado-frase {
    font-family: var(--font-accent);
    font-style: normal;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.15;
    color: var(--melon-heading);
    text-align: center;
    width: 100%;
    max-width: min(40ch, 100%);
    margin-bottom: 0.85rem;
}
 
.resultado-divider {
    width: 100%;
    max-width: min(42ch, 100%);
    height: 3px;
    /* [CAMBIO] Divisor visible sobre fondo melón */
    background: radial-gradient(ellipse at center, var(--acc-melon), transparent 70%);
    margin: 0.2rem 0 0.75rem;
    border: none;
}
 
.resultado-section-label {
    font-family: var(--font-display);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--texto-cuerpo);
    font-weight: 700;
    width: 100%;
    max-width: min(42ch, 100%);
    text-align: left;
    margin-bottom: 0.6rem;
}
 
.resultado-mini-shelf {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    max-width: min(42ch, 100%);
    margin-bottom: 0.85rem;
}
.resultado-bita-item {
    background: color-mix(in srgb, var(--v-oscuro) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--v-oscuro) 20%, transparent);
    border-left: 2px solid var(--c-neon);
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    overflow: hidden;
}
.resultado-bita-item:hover { background: color-mix(in srgb, var(--v-oscuro) 14%, transparent); }
.resultado-bita-item:hover .resultado-bita-title {
    color: var(--c-neon);
}
.resultado-bita-title {
    font-family: var(--font-voice);
    font-size: 0.85rem;
    color: var(--texto-cuerpo);
    font-weight: 600;
    line-height: 1.3;
}
.resultado-bita-extracto {
    font-size: 0.7rem;
    color: var(--text-dim);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
.resultado-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    width: 100%;
    max-width: min(42ch, 100%);
    margin-top: 0.5rem;
}
.resultado-ctas .btn-secundario {
    flex: 0 1 auto;
    text-align: center;
}
 
/* ------------------------------------------------------------
   5. TELA ACOMPAÑANTES — cards de consultor
   ------------------------------------------------------------ */
.consultor-card {
    background: transparent;
    border-radius: var(--card-radius, 20px);
    padding: 1.5rem 1.25rem;
    min-width: 200px;
    max-width: 240px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--texto-heading);
    flex-shrink: 0;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
.consultor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--tinta-negra) 50%, transparent);
    border-color: var(--acc-verdazul);
}
.consultor-card:hover .cc-nombre {
    color: var(--c-neon);
}
.consultor-card:hover .cc-frase {
    color: var(--c-neon);
}
.consultor-card .avatar {
    width: var(--avatar-md);
    height: var(--avatar-md);
    margin: 0 auto 0.85rem;
}
 
.cc-header-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    margin-bottom: 0.75rem;
    border-bottom: var(--marco-grosor) solid var(--c-neon, var(--brand-neon));
}
.cc-header-tag {
    font-family: var(--font-display);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--melon-text);
}
.cc-header-reco,
.dir-card-reco {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--acc-melon-clr);
    background: var(--c-neon, var(--brand-neon));
    padding: 0.18rem 0.6rem;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--tinta-negra) 35%, transparent);
}
.dir-card-reco {
    display: inline-block;
    margin-top: 0.4rem;
}
 
.ver-ficha-link {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: var(--c-neon);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--tinta-negra) 40%, transparent);
}
.ver-ficha-link:hover {
    color: var(--c-neon);
}
 
.consultor-card.es-recomendado {
    box-shadow: inset 0 0 0 2px var(--c-neon);
}
.consultor-card.es-recomendado::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 26px;
    background: var(--c-neon);
    filter: var(--filtro-mancha-sm);
    border-radius: 50px;
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--tinta-negra) 40%, transparent);
}
.consultor-card.es-recomendado::after {
    content: "Recomendado para ti";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--acc-melon-clr);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.22rem 0.7rem;
    white-space: nowrap;
    font-weight: 700;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--tinta-negra) 40%, transparent);
}
 
.consultor-card--dir {
    min-width: 345px;
    max-width: 480px;
    text-align: left;
    padding: var(--card-pad);
    cursor: default;
}
.acomp-slot-central .consultor-card--dir {
    max-width: 100%;
}
/* Layout horizontal para la card central del carrusel */
.acomp-slot-central .consultor-card--dir .cc-head {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
}
.acomp-slot-central .consultor-card--dir .cc-head .cc-avatar {
    flex-shrink: 0;
}
.acomp-slot-central .consultor-card--dir .cc-body-row {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
/* Dos columnas: info izquierda + bitacora derecha */
.acomp-slot-central .consultor-card--dir .cc-content-split {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.acomp-slot-central .consultor-card--dir .cc-content-split .cc-bitacora-container {
    flex: 1 1 50%;
    min-width: 0;
}
.acomp-slot-central .consultor-card--dir .cc-content-split .cc-info-side {
    flex: 1 1 50%;
    min-width: 0;
}
.consultor-card--dir .dir-card-head {
    margin-bottom: 1rem;
}
.consultor-card--dir .dir-card-frase {
    margin-bottom: 1rem;
}
.consultor-card--dir .dir-card-ctas {
    margin-top: 0;
}
.consultor-card--dir:hover {
    transform: none;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--tinta-negra) 50%, transparent);
}
 
.ver-directorio-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--melon-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.ver-directorio-link:hover { color: var(--melon-heading); }
 
/* ------------------------------------------------------------
   6. TELA BITÁCORA — grid de artículos
   ------------------------------------------------------------ */
.bitacora-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--card-gap);
    margin-top: 1.5rem;
}
 
.blog-container .blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
 
.blog-container .blog-card {
    background: transparent;
    color: var(--texto-heading);  /* [CAMBIO] --texto-cuerpo → --texto-heading: melón legible */
    border-radius: var(--card-radius, 20px);
    /* [FIX CLIPPING] Eliminado overflow:hidden que recortaba las texturas
       de los botones. Fondo transparente = no necesario para border-radius. */
}
.blog-container .blog-card h3 {
    color: var(--texto-heading);
}
.blog-container .blog-card p {
    color: var(--texto-heading);  /* [CAMBIO] --texto-cuerpo → --texto-heading: melón legible */
}
.blog-card.es-recomendado {
    box-shadow: inset 0 2px 0 0 var(--c-neon);
}
.blog-card.es-recomendado .bitacora-badge {
    display: inline-block;
}
.blog-card:hover h3 {
    color: var(--c-neon);
}
.blog-card:hover p {
    color: var(--texto-cuerpo);
}
 
/* [FIX TINTA] Eliminado `border: none` que anulaba el MARCO ÚNICO
   (main.css:399-527). Sin ese fix, las bitacora-cards no tenían
   ninguna línea de tinta superior/inferior — las pseudo-capas ::before/::after
   del MARCO ÚNICO se declaraban pero el border real era none, así que
   no había línea que pintar. Solo resetamos left/right para que el
   marco de 2-lados funcione correctamente. */
.bitacora-card {
    background: transparent;
    border-top: var(--marco-grosor) solid var(--tinta-color);
    border-bottom: var(--marco-grosor) solid var(--tinta-color);
    border-left: none;
    border-right: none;
    border-radius: var(--card-radius, 20px);
    padding: var(--card-pad);
    position: relative;
    isolation: isolate;
    transition: border-color 0.2s, transform 0.2s;
    text-decoration: none;
    color: var(--texto-heading);  /* [CAMBIO] --texto-cuerpo → --texto-heading: melón legible */
    display: block;
}
.bitacora-card:hover {
    border-color: var(--acc-verdazul);
    transform: translateY(-2px);
}
.bitacora-card:hover h3 {
    color: var(--c-neon);
}
.bitacora-card:hover p {
    color: var(--texto-cuerpo);
}
.bitacora-card.es-recomendado {
    box-shadow: inset 0 2px 0 0 var(--c-neon);
}
.bitacora-card.es-recomendado .bitacora-badge {
    display: inline-block;
}
.bitacora-badge {
    position: relative;
    isolation: isolate;
    display: none;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.18rem 0.55rem;
    color: #fff;
    /* [CONTRASTE AA] Fondo de tinta propio: el blob neon de ::before es por-consultor
       (#ff0055 → blanco 3.99:1, falla). Sobre --v-oscuro el blanco pasa ≥19:1; el
       blob neon queda como halo detrás (z-index -1, inset -3px). */
    background: var(--v-oscuro);
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 0.6rem;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--tinta-negra) 40%, transparent);
}
.bitacora-badge::before {
    content: "";
    position: absolute;
    inset: -3px;
    background: var(--c-neon);
    border-radius: inherit;
    filter: var(--filtro-mancha-sm);
    pointer-events: none;
    z-index: -1;
}
.bitacora-autor-tag {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--c-neon);
    color: var(--text-light);
    background: var(--scrim-oscuro);
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.75rem;
}
.bitacora-card h3 {
    font-family: var(--font-voice);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--texto-heading);
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.bitacora-card p {
    font-size: 0.82rem;
    color: var(--texto-cuerpo);
    line-height: 1.55;
}

/* Tarjeta de preview de PDF en el teaser del index —差异化 visual
   respecto a .bitacora-card (links sociales): borde izquierdo melón,
   fondo sutil, indicador de tipo "Presentación". */
.pub-pdf-preview-card {
    display: block;
    text-decoration: none;
    background: color-mix(in srgb, var(--v-oscuro) 14%, transparent);
    border-left: 3px solid var(--acc-melon);
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    cursor: pointer;
}
.pub-pdf-preview-card:hover {
    background: color-mix(in srgb, var(--v-oscuro) 24%, transparent);
    border-left-color: var(--acc-melon-clr);
    transform: translateY(-2px);
}
.pub-pdf-preview-card h3 {
    font-family: var(--font-voice);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--texto-heading);
    margin-bottom: 0.35rem;
    line-height: 1.35;
}
.pub-pdf-preview-card p {
    font-size: 0.82rem;
    color: var(--texto-cuerpo);
    line-height: 1.55;
}
.pub-pdf-preview-card::after {
    content: 'Presentación ↗';
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--acc-melon);
}
.tela-quienes-texto { max-width: 640px; }
.tela-quienes-texto p + p { margin-top: 0.9rem; }
 
/* ------------------------------------------------------------
   8. DIRECTORIO Y BITÁCORA — contenedores como "tela"
   ------------------------------------------------------------ */
.dir-container,
.blog-container,
.pub-container {
    background: var(--acc-melon-osc);
    background-image:
        linear-gradient(color-mix(in srgb, var(--v-grano) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--v-grano) 4%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
    border-radius: 18px;
    /* [SOLAPE CON EL HEADER — --tela-solape con tope, ver main.css :root]
       Con .site-header en position:relative (ya no sticky), un solape
       sin límite (--banner-alto completo, ~130-170px) devoraba casi
       toda la altura real del header en el flujo, dejando el papel sin
       mesa (--bg-dark) visible arriba ("infinito hacia arriba"). Un
       solape fijo sin relación a --banner-alto tampoco es correcto: no
       escala si la mancha crece, se ve "pegado" en vez de "absorbido".
       --tela-solape resuelve esto con su propio tope (min(), main.css):
       sigue siendo proporcional a --banner-alto pero nunca devora más
       de una fracción pequeña del header. */
    margin: calc(-1 * var(--tela-solape)) auto 3rem;
}
.dir-container,
.pub-container {
    max-width: 1250px;
    /* padding-top suma --tela-solape (con tope) al 2rem base — compensa
       el margin-top negativo de arriba, mismo criterio que
       .tela-contenido en index.html. */
    padding: calc(2rem + var(--tela-solape)) 1.75rem 3rem;
}
 
/* ------------------------------------------------------------
   8b. PUBLICACIONES (publicaciones.html) — [AUDITORÍA] página nunca
   migrada al patrón "tela ancha melón" de arriba: sus clases (pub-*)
   no tenían NINGUNA regla en el proyecto (ni aquí ni en main.css),
   quedaba visualmente rota (sin fondo, sin tipografía, sin grillas).
   Se resuelve con el mismo vocabulario de tokens que dir-container/
   blog-container — cero paleta nueva.
   ------------------------------------------------------------ */
 
/* Duplicado de título: .site-header-title ya muestra "Publicaciones"
   (ver publicaciones.html header) — mismo caso ya resuelto para
   .blog-container .blog-intro h1 (arriba). Se oculta, no se borra del
   HTML (restricción del proyecto: solo CSS). */
.pub-redes > h1 {
    display: none;
}
 
.pub-redes {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-detail-soft);
}
.pub-intro {
    color: var(--texto-cuerpo);
    font-size: var(--text-base, 0.92rem);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
}
.pub-mail {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--texto-cuerpo);
}
.pub-mail a {
    color: var(--melon-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pub-mail a:hover {
    color: var(--v-vivo);
}
 
.pub-section {
    margin-top: 2.25rem;
}
.pub-section h2 {
    font-family: var(--font-display);
    font-size: var(--text-lg, 1.35rem);
    color: var(--texto-heading);
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--marco-grosor) solid var(--v-oscuro);
    display: inline-block;
}
 
/* Grilla de embeds (Instagram/TikTok/YouTube) — mismo ritmo que
   .publicaciones-grid (catalogo.css), reutilizado en vez de duplicar
   un tercer valor de minmax. */
.pub-embed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
/* Perfiles agrupados — 3 tarjetas en fila */
.pub-profiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.pub-profiles-grid > div {
    min-width: 0;
}
.pub-profiles-grid .pub-profile-card {
    width: 100%;
}
.pub-profiles-grid .pub-yt-channel {
    width: 100%;
}
/* RESET: cards con fondo oscuro (bg-panel-alt) dentro de .pub-container
   heredan el override melón (--text-dim → #17302e, 1.23:1 sobre #2a1512).
   Restauramos --text-dim al valor por defecto (verdazul 90% + bg-dark 10%,
   5.48:1 sobre bg-panel-alt) para que el texto secundario sea legible. */
.pub-container .pub-pdf-card,
.pub-container .pub-profile-card,
.pub-container .pub-yt-channel {
    --text-dim: color-mix(in srgb, var(--acc-verdazul-clr) 90%, var(--bg-dark) 10%);
}
 
/* SDKs externos: los widgets de Instagram/TikTok inyectan su propio
   iframe interno y fijan su ancho — 100% aquí evita que se desborden
   del grid (mismo min-width:0 que el resto del sitio usa para textos
   largos, aplicado aquí a un embed en vez de texto). */
.instagram-media,
.tiktok-embed {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Facebook Page Plugin — adaptar al contenedor, mismo patrón que IG/TikTok.
   El SDK inyecta un <div class="fb-page"> que contiene su propio iframe. */
.pub-fb-wrap {
    max-width: 500px;
    margin: 0 auto;
}
.pub-fb-wrap .fb-page,
.pub-fb-wrap iframe {
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
}
 
/* YouTube — iframe nativo (sin SDK), envuelto en .pub-yt-wrap para
   mantener proporción 16:9 sin depender del alto real del iframe. */
.pub-yt-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-detail-soft);
    background: var(--bg-panel-alt);
}
.pub-yt-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Tarjeta de perfil — IG / TikTok (mismo patrón que .pub-yt-channel) */
.pub-profile-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-detail-soft);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color var(--transition-speed);
}
.pub-profile-card:hover {
    border-color: var(--acc-verdazul);
}
.pub-profile-card-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.pub-profile-card--ig .pub-profile-card-icon {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}
.pub-profile-card--tk .pub-profile-card-icon {
    background: #000;
    color: #fff;
}
.pub-profile-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.pub-profile-card-name {
    font-family: var(--font-display);
    font-size: var(--text-base, 0.92rem);
    font-weight: 600;
    color: var(--texto-heading);
}
.pub-profile-card-cta {
    font-size: var(--text-sm, 0.82rem);
    color: var(--text-dim);
}

/* Tarjeta de canal YouTube — link card con icono + nombre */
.pub-yt-channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-detail-soft);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color var(--transition-speed);
}
.pub-yt-channel:hover {
    border-color: var(--acc-verdazul);
}
.pub-yt-channel-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--v-oscuro);
    color: var(--acc-melon-clr);
}
.pub-yt-channel-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.pub-yt-channel-name {
    font-family: var(--font-display);
    font-size: var(--text-base, 0.92rem);
    font-weight: 600;
    color: var(--texto-heading);
}
.pub-yt-channel-cta {
    font-size: var(--text-sm, 0.82rem);
    color: var(--text-dim);
}
 
/* Estado vacío — mismo texto/criterio que ya usa engine.js para las
   telas teaser de index.html (redes/publicaciones sin datos aún). */
.pub-vacio {
    font-size: 0.85rem;
    color: var(--texto-cuerpo);
    grid-column: 1 / -1;
}
 
/* Override .pdf-shelf grid from main.css — carousel needs flex, no max-height */
.pub-pdf-shelf {
    display: block;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    scrollbar-width: auto;
}
/* --- PRESENTACIONES — carrusel horizontal de PDFs (patrón acomp) --- */
.pub-pdf-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0 0.5rem;
    padding: 0 56px;
}
.pub-pdf-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
}
.pub-pdf-track {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pub-pdf-track::-webkit-scrollbar { display: none; }
.pub-pdf-card {
    position: relative;
    flex: 0 0 calc(50% - 0.375rem);
    min-width: 340px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: row;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-detail-soft);
    border-radius: 12px;
    overflow: hidden;
    min-height: 380px;
    transition: transform 0.2s, border-color 0.2s;
}
.pub-pdf-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--textura-cerda-fina);
    background-size: 280px 100%;
    opacity: 0.03;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}
.pub-pdf-card:hover {
    transform: translateY(-4px);
    border-color: var(--acc-verdazul);
}
.pub-pdf-info {
    flex: 0 0 38%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    border-right: 1px solid var(--border-detail-soft);
}
.pub-pdf-title {
    font-family: var(--font-voice, 'Source Serif 4', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--texto-heading);
    margin: 0;
    line-height: 1.25;
}
.pub-pdf-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0;
}
.pub-pdf-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.pub-pdf-btn {
    position: relative;
    isolation: isolate;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.55rem 1.1rem;
    border: none;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, transform 0.15s;
}
.pub-pdf-btn::before {
    content: "";
    position: absolute;
    inset: -8px;
    background-image: var(--textura-cerda-fina);
    background-size: 280px 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* [FIX] screen → multiply: sin migrar en el barrido a 100% multiply. */
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
}
.pub-pdf-btn:hover {
    transform: translateY(-1px);
}
.pub-pdf-btn--ver {
    color: var(--texto-heading);
}
.pub-pdf-btn--ver:hover {
    color: var(--c-neon);
}
.pub-pdf-btn--descargar {
    color: var(--text-dim);
}
.pub-pdf-btn--descargar:hover {
    color: var(--c-neon);
}
.pub-pdf-iframe {
    flex: 1;
    border: none;
    height: 100%;
    min-height: 380px;
}
.pub-pdf-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    color: var(--text-dim);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    font-family: inherit;
    transition: color 0.2s, transform 0.15s;
    flex-shrink: 0;
    transform: translateY(-50%) rotate(-2deg);
}
.pub-pdf-arrow--right { transform: translateY(-50%) rotate(2deg); }
.pub-pdf-arrow:hover {
    color: var(--brand-neon);
    transform: translateY(-50%) rotate(0deg) scale(1.15);
}
.pub-pdf-arrow--left  { left: 0; }
.pub-pdf-arrow--right { right: 0; }
.pub-pdf-counter {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-family: var(--font-mono);
}
 
.blog-container .blog-intro h1 { color: var(--melon-heading); }
.blog-container .blog-intro p  { color: var(--melon-text); }
 
/* [override de <style> inline] .blog-container vive en bitacora.html con
   padding:3rem 2rem 5rem (no editable) — se suma --tela-solape (con
   tope, ver main.css :root) solo al padding-top. "body .blog-container"
   gana por especificidad sin !important. */
body .blog-container {
    padding-top: calc(3rem + var(--tela-solape));
}
 
.especialidad-grid {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.especialidad-card {
    /* [CAMBIO — mancha sumi-e] Antes: background: var(--bg-panel-alt);
       border: 1px solid var(--border-detail); border-radius: 50px.
       Ahora: chip/mancha translúcida vino con textura de cerda sutil.
       Mantiene radius pill (50px) porque es un chip de filtro, no un
       botón de acción. Solo colores de la paleta. */
    position: relative;
    isolation: isolate;
    background: color-mix(in srgb, var(--v-oscuro) 28%, transparent);
    border: none;
    color: var(--bg-dark);  /* [CONTRASTE AA] verdazul-clr al 90% (1.22:1) → tinta #190808 (5.08:1 sobre el chip) */
    padding: 0.55rem 1.1rem;
    border-radius: 50px;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}
.especialidad-card::before {
    content: "";
    position: absolute;
    inset: -3px;
    background-image: var(--textura-cerda-fina);
    background-size: 180px 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: inherit;
    /* [FIX] screen → multiply: sin migrar en el barrido a 100% multiply. */
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
}
.especialidad-card:hover {
    /* [CONTRASTE AA] 36% → 60%: sobre el chip melón-vino el texto melón pasaba
       2.68:1; al 60% (L≈0.07) el blanco pasa 5.59:1. La mancha "se llena
       de tinta" en hover (default 28% < hover 60% < activa 65%). */
    background: color-mix(in srgb, var(--v-vivo) 60%, transparent);
    color: #fff;
}
.especialidad-card.activa {
    /* [CONTRASTE AA] 45% → 65%: estado activo = la mancha más llena de tinta
       (≥ hover), blanco sobre él pasa 5.95:1. */
    background: color-mix(in srgb, var(--v-vivo) 65%, transparent);
    color: #fff;
}
 
.dir-carrusel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.carrusel-arrow {
    /* [CAMBIO — tinta de marcador] Antes: fondo var(--bg-panel-alt),
       borde 1px. Ahora: sin caja, solo el glifo dibujado en tinta. */
    background: transparent;
    border: none;
    color: var(--text-dim);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    transition: color 0.2s, transform 0.15s;
    flex-shrink: 0;
    font-family: inherit;
    /* Trazo ligeramente inclinado — simula mano humana */
    transform: rotate(-2deg);
}
.carrusel-arrow:last-child {
    transform: rotate(2deg);
}
.carrusel-arrow:hover {
    color: var(--brand-neon);
    transform: rotate(0deg) scale(1.15);
}
.carrusel-counter {
    text-align: center;
    font-size: 0.72rem;
    color: var(--melon-text);
    margin-bottom: 2rem;
    letter-spacing: 1px;
}
 
/* border-top/bottom (no 4 lados) para alinearse con el MARCO ÚNICO —
   mismo motivo documentado junto a .bitacora-card, arriba. */
.dir-card-activa {
    flex: 1;
    max-width: 760px;
    background: transparent;
    border-top: var(--marco-grosor) solid var(--tinta-color);
    border-bottom: var(--marco-grosor) solid var(--tinta-color);
    border-left: none;
    border-right: none;
    border-radius: var(--card-radius, 20px);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--texto-heading);
    box-shadow: 0 24px 56px -12px color-mix(in srgb, var(--tinta-negra) 40%, transparent), inset 0 3px 0 0 var(--c-neon);
    transition: border-color 0.2s, box-shadow 0.2s;
    /* [FIX CLIPPING] Eliminado overflow:hidden que recortaba las texturas
       de los botones (::before con inset:-6px). El fondo es transparente,
       así que overflow:hidden no era necesario para border-radius. */
}
.dir-card-activa:hover {
    box-shadow: 0 24px 56px -12px color-mix(in srgb, var(--tinta-negra) 50%, transparent), inset 0 3px 0 0 var(--c-neon);
}
.dir-card-activa:hover .dir-card-frase {
    color: var(--c-neon);
}
 
.dir-card-head {
    position: relative;
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
}
.dir-card-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: var(--marco-grosor) solid var(--tinta-color);
    filter: var(--filtro-tinta-int);
    mask-image: var(--marco-guiones);
    -webkit-mask-image: var(--marco-guiones);
    pointer-events: none;
}
.dir-card-head .avatar {width: var(--avatar-lg); height: var(--avatar-lg); flex-shrink: 0; }
.dir-card-head h2 { font-family: var(--font-voice); font-weight: 600; font-size: 1.4rem; margin-bottom: 0.3rem; color: var(--c-neon); }
.dir-card-head .sub {
    color: var(--c-neon);
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}
.dir-card-head .extracto {
    font-size: 0.85rem;
    color: var(--texto-cuerpo);
    line-height: 1.55;
    margin-top: 0.3rem;
}
 
.dir-card-frase {
    font-family: var(--font-accent);
    font-style: normal;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--texto-heading);
    margin-bottom: 1.5rem;
}
 
.dir-card-divider {
    height: 3px;
    background: radial-gradient(ellipse at center, var(--acc-verdazul-osc), transparent 70%);
    margin: 0 0 1.25rem;
}
 
.dir-card-section-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-neon);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
 
.dir-card-bitacora {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.dir-card-bita-item {
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-detail-soft);
    border-left: 2px solid var(--c-neon);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.dir-card-bita-item:hover {
    background: color-mix(in srgb, var(--v-grano) 12%, transparent);
    border-left-color: var(--acc-verdazul);
}
.dir-card-bita-item:hover .dir-card-bita-title {
    color: var(--v-oscuro);
}
.dir-card-bita-title {
    font-size: 0.82rem;
    color: var(--texto-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}
.dir-card-bita-extracto {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--acc-verdazul-clr) 90%, var(--bg-dark) 10%);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
.dir-card-pubs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.dir-card-pub-chip {
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-detail-soft);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--acc-verdazul-clr) 90%, var(--bg-dark) 10%);
    line-height: 1.35;
}
.dir-card-pub-chip strong {
    display: block;
    font-size: 0.65rem;
    color: var(--c-neon);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.1rem;
}
 
.dir-card-ctas {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.dir-card-ctas .btn-wa-icon { flex-shrink: 0; }
.dir-card-ctas .btn-secundario { flex: 1; min-width: 140px; text-align: center; }
 
@media (min-width: 1100px) {
    .menu-logo {
        width: 100px;
        height: 100px;
    }
    .menu-item {
        padding: 0.65rem 1.4rem;
        font-size: 0.95rem;
    }
}
 
/* ------------------------------------------------------------
   9. RESPONSIVE ≤ 720px
   ------------------------------------------------------------ */
@media (max-width: 720px) {
    .menu-horizontal {
        gap: 0.25rem;
        padding: 0.5rem 0.5rem;
    }
    .menu-logo {
        /* [FIX MOBILE] Logo más grande para que sea reconocible en móvil */
        width: 64px;
        height: 64px;
        margin: 0 0.3rem;
    }
    .menu-item {
        padding: 0.35rem 0.6rem;
        font-size: 0.68rem;
    }
    /* [FIX MOBILE-MANCHA] Desplazada 120px más a la derecha para que
       la mancha de acuarela cubra la zona de publicaciones (que queda
       a la izquierda del logo en mobile). Antes estaba anclada a
       right:100px, con el override se mueve a right:220px. */
    .site-header::before,
    .menu-horizontal::before {
        background-position: right 220px center;
    }
    .tela.tela--abierta:not(.tela--triage) > .tela-contenido {
        padding: calc(1.75rem + var(--tela-solape)) 1.25rem 1.75rem;
    }
    .tela--triage > .tela-contenido {
        /* [FIX TRIAGE-MARGINS] Padding horizontal en mobile para que el
           contenido no toque los bordes. */
        padding: 0 0.75rem;
        width: 96%;
        height: calc(100vh - 1.5rem);
        height: calc(100dvh - 1.5rem);
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }
    .bitacora-grid {
        grid-template-columns: 1fr;
    }
    .dir-card-activa {
        padding: 1.75rem;
    }
    .dir-card-head {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .dir-card-frase { text-align: left; }
    .dir-carrusel { gap: 0.6rem; }
    .calendar-embed { height: 480px; }
}
 
@media (prefers-reduced-motion: reduce) {
    .tela,
    .tela > .tela-contenido,
    .tela--triage,
    .tela--triage.tela--saliendo,
    .resultado-triage {
        transition: none !important;
        animation: none !important;
    }
}
/* ============================================================
   10. CARRUSEL PREV·CURRENT·NEXT — ACOMPAÑANTES
   ============================================================ */
.acomp-swipe-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0 0.5rem;
    padding: 0 56px;
}
 
.acomp-swipe-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 1600px;
}
 
.acomp-swipe-track {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}
 
.acomp-slot-lateral {
    /* [FIX ESPACIO-MUERTO] Reducido de 180px a 150px para comprimir
       los laterales y dar más protagonismo al central. */
    flex: 0 0 150px;
    min-width: 0;
    opacity: 0.4;
    filter: blur(1.5px);
    transition: opacity 0.25s ease, filter 0.25s ease;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acomp-slot-lateral:hover {
    opacity: 0.6;
    filter: blur(0);
}
 
.acomp-slot-central {
    flex: 1 1 auto;
    min-width: 400px;
    max-width: 1400px;
    transform: scale(1.01);
    transform-origin: center top;
    z-index: 2;
    transition: transform 0.2s ease;
}
 
.acomp-slot--transitando {
    opacity: 0.55;
    transition: opacity 0.15s ease !important;
}
 
/* border-top/bottom (no 4 lados) — mismo motivo que .bitacora-card,
   arriba. El top usa --c-neon (color del consultor) como acento; el
   bottom usa --tinta-color (complementario) como el resto de las cards. */
/* [FIX ESPACIO-MUERTO] Reducido padding de 1.5rem a 1rem en laterales
   para aprovechar mejor el espacio de las 180px. El gap se redujo de
   0.6rem a 0.4rem. En el slot central se mantiene el padding original. */
.acomp-lateral-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem;
    background: transparent;
    border-top: var(--marco-grosor) solid var(--c-neon, var(--brand-neon));
    border-bottom: var(--marco-grosor) solid var(--tinta-color);
    border-left: none;
    border-right: none;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    text-align: center;
    color: var(--texto-heading);
    box-sizing: border-box;
    transition: border-color 0.2s, transform 0.2s;
}
.acomp-slot-central .acomp-lateral-inner {
    gap: 0.6rem;
    padding: 1.5rem 0.9rem;
}
.acomp-lateral-inner:hover {
    border-color: var(--acc-verdazul);
}
.acomp-lateral-inner:hover .acomp-lateral-nombre {
    color: var(--c-neon);
}
.acomp-lateral-avatar {
    /* [FIX ESPACIO-MUERTO] Avatar reducido de 0.9 a 0.75 del --avatar-md
       para que quepa mejor en el slot lateral de 150px. */
    width: calc(var(--avatar-md) * 0.75) !important;
    height: calc(var(--avatar-md) * 0.75) !important;
}
.acomp-lateral-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--texto-heading);
    line-height: 1.25;
    font-family: var(--font-display);
}
.acomp-lateral-tag {
    font-size: 0.68rem !important;
}
 
.acomp-swipe-counter {
    text-align: center;
    font-size: 0.72rem;
    color: var(--melon-text);
    letter-spacing: 1px;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-family: var(--font-mono);
}
 
.acomp-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* [CAMBIO — tinta de marcador] Antes: fondo var(--bg-panel-alt),
       borde 1px. Ahora: sin caja, solo el glifo dibujado en tinta. */
    background: transparent;
    border: none;
    color: var(--text-dim);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    font-family: inherit;
    transition: color 0.2s, transform 0.15s;
    flex-shrink: 0;
    /* Trazo ligeramente inclinado — simula mano humana */
    transform: translateY(-50%) rotate(-2deg);
}
.acomp-arrow--right {
    transform: translateY(-50%) rotate(2deg);
}
.acomp-arrow:hover {
    color: var(--brand-neon);
    transform: translateY(-50%) rotate(0deg) scale(1.15);
}
.acomp-arrow--right:hover {
    transform: translateY(-50%) rotate(0deg) scale(1.15);
}
.acomp-arrow--left  { left: 0; }
.acomp-arrow--right { right: 0; }
 
@media (max-width: 900px) {
    .acomp-swipe-shell {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0;
        align-items: center;
    }
    .acomp-arrow {
        position: static;
        transform: none;
        flex-shrink: 0;
    }
    .acomp-slot-lateral {
        display: none;
    }
    .acomp-slot-central {
        transform: none;
        max-width: 100%;
        flex: 1;
    }
    .acomp-swipe-viewport {
        flex: 1;
        min-width: 0;
    }
}
 
@media (max-width: 720px) {
    .acomp-arrow {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    /* [FIX MÓVIL] min-width:400px desbordaba la pantalla en móviles
       (<400px de ancho). En mobile solo se muestra el slot central
       (los laterales se ocultan a 900px), así que min-width debe
       ceder al ancho del contenedor. */
    .acomp-slot-central {
        min-width: 0;
    }
}
 
/* ============================================================
   12. ZONA VERDE-AZULADO — ESTRUCTURAL (PREVENTIVA)
   ============================================================ */
.tela--verdazul.tela--abierta {
    background: var(--acc-verdazul-osc);
}
.tela--verdazul.tela--abierta,
.tela--verdazul .dir-container,
.tela--verdazul .blog-container {
    --tinta-color: var(--v-vivo);
}
.tela--verdazul.tela--abierta > .tela-contenido h2 {
    color: var(--acc-verdazul-clr);
}
.tela--verdazul.tela--abierta > .tela-contenido p {
    color: color-mix(in srgb, var(--acc-verdazul-clr) 78%, transparent);
}
.tela--verdazul .zona-verdazul-alt {
    background: color-mix(in srgb, var(--acc-verdazul-osc) 80%, var(--bg-dark) 20%);
}

/* ============================================================
   13. TELA ARTÍCULO COMPLETO — sub-tela de la bitácora
   Renderiza el artículo completo con bitacora-render.js, reutilizando
   las clases de imprimible (.pdf-cuerpo, .pdf-notas, .pdf-bibliografia)
   pero con estilos adaptados a la web (fondo melón del acordeón, no
   hoja blanca imprimible).
   ============================================================ */
.tela--articulo .tela-contenido--articulo {
    max-width: 760px;
    margin: 0 auto;
}

.btn-volver-bitacora {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--border-detail-soft);
    color: var(--melon-text);
    padding: 0.45rem 1rem;
    border-radius: 50px;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    margin-bottom: 1.5rem;
}
.btn-volver-bitacora:hover {
    border-color: var(--brand-neon);
    color: var(--texto-heading);
}

.articulo-web-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 3px solid var(--v-vivo);
}

.articulo-web-titulo {
    font-family: var(--font-voice, 'Source Serif 4', serif);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--melon-heading);
    margin-bottom: 0.75rem;
}

.articulo-web-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.65rem;
}
.articulo-web-autor,
.articulo-web-especialidad,
.articulo-web-fecha,
.articulo-web-dificultad {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--v-oscuro) 15%, transparent);
    color: var(--melon-text);
}
.articulo-web-autor {
    border: 1px solid var(--c-neon);
    color: var(--c-neon);
    font-weight: 700;
}

.articulo-web-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.articulo-web-tag {
    font-size: 0.65rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--v-oscuro) 30%, transparent);
    color: var(--melon-text);
    border-radius: 50px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    letter-spacing: 0.3px;
}

.articulo-web-topicos {
    font-size: 0.75rem;
    color: var(--melon-text);
    font-family: var(--font-body, 'Source Serif 4', serif);
}
.articulo-web-topicos-label {
    font-weight: 700;
    color: var(--melon-heading);
}

/* Secciones del artículo web */
.articulo-web-extracto,
.articulo-web-cuerpo {
    margin-bottom: 1.5rem;
}

/* Reutilización de .pdf-cuerpo (numeración de línea) — mismo patrón
   que imprimible.css pero aplicado sobre fondo melón del acordeón */
.tela--articulo .pdf-cuerpo {
    counter-reset: linea;
}
.tela--articulo .pdf-cuerpo p {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 0.75rem;
    counter-increment: linea;
    font-family: var(--font-voice, 'Source Serif 4', serif);
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--melon-text);
    margin-bottom: 0.6rem;
}
.tela--articulo .pdf-cuerpo p::before {
    content: counter(linea);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.65rem;
    color: color-mix(in srgb, var(--v-oscuro) 55%, transparent);
    text-align: right;
    padding-top: 0.2rem;
    user-select: none;
}
.tela--articulo .pdf-linea-texto {
    min-width: 0;
    overflow-wrap: anywhere;
    display: block;
    text-indent: 1.5em;
}

/* Subtítulos de sección */
.tela--articulo .articulo-web-extracto h2,
.tela--articulo .articulo-web-cuerpo h2,
.tela--articulo .pdf-notas h2,
.tela--articulo .pdf-bibliografia h2 {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--melon-heading);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--v-vivo);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Notas al pie (web — bottom-sheet vía initNotaSheet) */
.tela--articulo .notas-lista {
    list-style: none;
}
.tela--articulo .nota-item {
    display: flex;
    gap: 0.6rem;
    font-family: var(--font-voice, 'Source Serif 4', serif);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--melon-text);
    margin-bottom: 0.5rem;
    break-inside: avoid;
}
.tela--articulo .nota-item-num {
    flex: 0 0 auto;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    color: var(--melon-text);
}
.tela--articulo .nota-item-texto {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Referencias clickeables (superíndice) */
.tela--articulo .nota-ref {
    cursor: pointer;
    color: var(--acc-verdazul-osc);
    font-weight: 700;
    transition: color 0.15s;
}
.tela--articulo .nota-ref:hover {
    color: var(--acc-melon-clr);
}

/* Bibliografía */
.tela--articulo .biblio-lista {
    list-style: none;
}
.tela--articulo .biblio-item {
    font-family: var(--font-voice, 'Source Serif 4', serif);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 0.45rem;
    padding-left: 1.5em;
    text-indent: -1.5em;
    overflow-wrap: anywhere;
    break-inside: avoid;
}
.tela--articulo .biblio-item a {
    color: var(--melon-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tela--articulo .pdf-bibliografia h3 {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--melon-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1rem 0 0.5rem;
}
.tela--articulo .pdf-bibliografia h3:first-of-type {
    margin-top: 0.25rem;
}

/* Botón de acciones al final */
.articulo-web-acciones {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-detail-soft);
    display: flex;
    justify-content: center;
}