/* =========================================================================
   Huellitas al Corazon — hoja de estilos unica
   Direccion: expediente en papel calido. Tinta negra, papel hueso, un solo
   acento (el naranja del logo). Una sola familia tipografica: los metadatos
   se distinguen por tamano, tracking y color, no por cambiar de fuente.
   ========================================================================= */

/* --- 1. Reset ---------------------------------------------------------- */

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

img, svg { display: block; max-width: 100%; height: auto; }

table { border-collapse: collapse; border-spacing: 0; }

button, input { font: inherit; color: inherit; }


/* --- 2. Tokens --------------------------------------------------------- */

:root {
    /* Color */
    --papel:        #faf8f5;
    --papel-alto:   #ffffff;
    --papel-hondo:  #f2ede6;
    --tinta:        #14110f;   /* 17.7:1 sobre papel */
    --tinta-2:      #3d3733;   /* 11.0:1 */
    --tinta-3:      #6b615a;   /*  5.7:1 — minimo para texto normal */
    --acento:       #fd5700;   /* naranja del logo: decorativo o texto grande */
    --acento-tinta: #b83c00;   /*  5.4:1 — el que si puede llevar texto pequeno */
    --linea:        rgb(20 17 15 / 0.13);
    --linea-fuerte: rgb(20 17 15 / 0.26);

    /* Tipografia: una sola familia en todo el sitio */
    --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --texto-meta:      0.8125rem;                                      /* 13px */
    --texto-chico:     clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);       /* 15 -> 16 */
    --texto-base:      clamp(1.0625rem, 1.015rem + 0.24vw, 1.1875rem); /* 17 -> 19 */
    --texto-subtitulo: clamp(1.25rem, 1.09rem + 0.8vw, 1.5rem);        /* 20 -> 24 */
    --texto-h2:        clamp(1.75rem, 1.45rem + 1.35vw, 2.375rem);     /* 28 -> 38 */
    --texto-cifra:     clamp(1.625rem, 1.25rem + 1.7vw, 2.5rem);       /* 26 -> 40 */
    --texto-h1:        clamp(2.625rem, 1.55rem + 5vw, 5.625rem);       /* 42 -> 90 */

    /* Ritmo */
    --ancho-medida: 44rem;   /* texto: ~68 caracteres por linea */
    --ancho-laminas: 56rem;  /* fotos y anexos: hasta el borde de la columna */
    --ancho-contenido: 56rem; /* tope de la columna derecha, para que no quede coja */
    --canal-ancho:     17rem;  /* columna izquierda: titulo sticky y linea del tiempo */
    --canal-hueco:     clamp(2.5rem, 4vw, 4.5rem);
    --pie-cierre: 1.75rem;   /* mismo aire arriba y abajo de la firma */
    /* El hero respira mas arriba que abajo: debajo ya viene el indice. */
    --hero-arriba: clamp(3.5rem, 2rem + 6vw, 8rem);
    --hero-abajo:  clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
    /* La marca (logo + nombre) mide igual en el hero y en el pie. 8.4vw es el
       maximo que cabe: el conjunto ocupa unas 10 veces el tamano de letra. */
    --marca-tamano: clamp(1.5rem, 8.4vw, 8rem);
    --espacio-seccion: clamp(3.75rem, 2.5rem + 5.5vw, 7.5rem);
    --radio: 3px;

    /* Movimiento */
    --curva: cubic-bezier(0.16, 1, 0.3, 1);
}


/* --- 3. Base ----------------------------------------------------------- */

body {
    background-color: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: var(--texto-base);
    line-height: 1.6;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Grano de papel: una tesela chica que el navegador rasteriza una sola vez. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

h1, h2, h3 { line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }

p { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--acento-tinta);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: rgb(253 87 0 / 0.18); }


/* --- 4. Utilidades ----------------------------------------------------- */

.contenedor {
    width: 100%;
    max-width: 92rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
}

.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.saltar-al-contenido {
    position: absolute;
    top: 0.5rem; left: 0.5rem;
    z-index: 99;
    padding: 0.6rem 1rem;
    background: var(--tinta);
    color: var(--papel);
    border-radius: var(--radio);
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 160ms var(--curva);
}

.saltar-al-contenido:focus-visible { transform: translateY(0); }

/*
 * Etiquetas de metadato. Antes esto era una monoespaciada; ahora es la misma
 * familia del cuerpo, diferenciada por tamano, versalitas y tracking.
 */
.fecha, .col__nota, .aliados__rol, .pendientes__titulo,
.indice__numero, .canal__fecha {
    font-size: var(--texto-meta);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1.3;
}


/* --- 5. Encabezado ----------------------------------------------------- */

.encabezado {
    /* El aire de arriba lo pone .encabezado__marca, para que sea exactamente
       el mismo que el de debajo del subtitulo. */
    padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    border-bottom: 1px solid var(--linea-fuerte);
}

/* Mismo bloque que el pie: logo y nombre en una linea, y debajo el texto.
   Aqui el texto es la descripcion; alla, los enlaces. */
.encabezado__marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(0.875rem, 0.5rem + 1.5vw, 1.5rem);
    padding-block: var(--hero-arriba) var(--hero-abajo);
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--marca-tamano);
    line-height: 1.05;
    white-space: nowrap;
}

.marca__logo {
    width: auto;
    height: 0.98em;
    color: var(--tinta);
    flex: none;
}

.titulo-principal {
    font-size: 1em;   /* lo manda .marca, para que logo y nombre vayan a la par */
    letter-spacing: -0.035em;
}

.subtitulo {
    max-width: 34rem;
    color: var(--tinta-2);
    font-size: var(--texto-subtitulo);
    line-height: 1.45;
    text-wrap: balance;
}

/* Indice del expediente: navegacion interna con cara de sumario. El hueco
   sobre el lo pone el padding de .encabezado__marca, no un margen de aqui. */
.indice { margin-top: 0; }

.indice__lista {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--linea);
}

.indice__item { border-bottom: 1px solid var(--linea); }

.indice__enlace {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0.25rem;
    text-decoration: none;
    color: var(--tinta-2);
    transition: color 160ms var(--curva), padding-left 220ms var(--curva);
}

.indice__enlace:hover,
.indice__enlace:focus-visible { color: var(--tinta); padding-left: 0.75rem; }

.indice__numero { color: var(--acento-tinta); flex: none; }

.indice__titulo { font-size: var(--texto-chico); letter-spacing: 0; text-transform: none; }

.indice__enlace--pagina .indice__titulo { color: var(--acento-tinta); font-weight: 500; }

.indice__flecha {
    display: inline-block;
    margin-left: 0.3em;
    transition: transform 200ms var(--curva);
}

.indice__enlace--pagina:hover .indice__flecha,
.indice__enlace--pagina:focus-visible .indice__flecha { transform: translateX(3px); }

.indice__enlace[aria-current="true"] { color: var(--tinta); }

.indice__enlace[aria-current="true"] .indice__titulo { font-weight: 600; }

@media (min-width: 48rem) {
    .indice__lista { grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 0; }
    .indice__item { border-bottom: 0; border-top: 2px solid var(--linea-fuerte); }
    /* Cada entrada centrada en su celda: antes se pegaban al borde izquierdo
       de columnas anchas y el indice se veia descuadrado. */
    .indice__enlace {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.35rem;
        padding: 0.75rem 0 0;
    }

    .indice__enlace:hover, .indice__enlace:focus-visible { padding-left: 0; }
}


/* Cabecera de las paginas que no son la portada. */
.encabezado--interior { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(2rem, 1.5rem + 3vw, 3.5rem); }

.volver { margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }

.volver a {
    text-decoration: none;
    color: var(--tinta-3);
    font-size: var(--texto-chico);
    transition: color 160ms var(--curva);
}

.volver a:hover { color: var(--acento-tinta); }

.titulo-interior {
    font-size: var(--texto-h2);
    letter-spacing: -0.03em;
}

.encabezado--interior .subtitulo { margin-top: 0.75rem; }


/* --- 6. Secciones ------------------------------------------------------ */

.seccion { padding-block: var(--espacio-seccion); }

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

.seccion__reja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }

.seccion__titulo { font-size: var(--texto-h2); }

/* Canal lateral: el sub-indice de la seccion. Vive en la columna izquierda,
   debajo del titulo sticky, y hace de progreso de lectura. Los estados los
   pinta el CSS a partir de las clases que marca el JS: la hoja no depende de
   estilos en linea, que la CSP prohibe. */
.canal { display: none; }

.canal__lista {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    border-left: 1px solid var(--linea);
}

.canal__enlace {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.7rem 0 0.7rem 1.1rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    text-decoration: none;
    color: var(--tinta-3);
    transition: color 200ms var(--curva), border-color 200ms var(--curva);
}

.canal__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    margin-top: 0.45em;
    background: var(--linea-fuerte);
    transition: background-color 200ms var(--curva), transform 200ms var(--curva);
}

.canal__etiquetas { display: grid; gap: 0.15rem; }

.canal__texto {
    font-size: var(--texto-chico);
    line-height: 1.3;
    text-wrap: balance;
}

.canal__fecha {
    font-size: var(--texto-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.canal__enlace:hover,
.canal__enlace:focus-visible { color: var(--tinta-2); }

.canal__enlace:hover .canal__punto { background: var(--tinta-3); }

.canal__enlace[aria-current="true"] .canal__texto { font-weight: 600; }

/* Ya la paso el lector. */
.canal__item--visto .canal__enlace { color: var(--tinta-2); }
.canal__item--visto .canal__punto { background: var(--tinta-3); }

/* En la que va ahora mismo. */
.canal__enlace[aria-current="true"] {
    color: var(--tinta);
    border-left-color: var(--acento);
}

.canal__enlace[aria-current="true"] .canal__punto {
    background: var(--acento);
    transform: scale(1.6);
}

@media (min-width: 62rem) {
    /* El indice se queda sobre el eje de las secciones de abajo. */
    .indice {
        max-width: calc(var(--canal-ancho) + var(--canal-hueco) + var(--ancho-contenido));
        margin-inline: auto;
    }

    .seccion__reja {
        /* La columna derecha tiene tope: sin el, el texto quedaba pegado a la
           izquierda y sobraba media pantalla a la derecha. Con tope, la reja
           entera se centra en el contenedor. */
        grid-template-columns: var(--canal-ancho) minmax(0, var(--ancho-contenido));
        column-gap: var(--canal-hueco);
        justify-content: center;
    }

    .seccion__cabecera {
        position: sticky;
        top: 3rem;
        align-self: start;
    }

    .seccion__titulo { text-wrap: pretty; }

    .canal {
        display: block;
        margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    }
}

@media (min-width: 62rem) and (prefers-reduced-motion: reduce) {
    .canal__enlace[aria-current="true"] .canal__punto { transform: none; }
}


/* --- 7. Prosa ---------------------------------------------------------- */

.prosa { max-width: var(--ancho-medida); }

.prosa p + p { margin-top: 1.15em; }

.prosa__destacado {
    color: var(--tinta);
    letter-spacing: -0.006em;
}

.cuenta {
    color: var(--acento-tinta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: rgb(184 60 0 / 0.35);
    transition: text-decoration-color 160ms var(--curva);
}

.cuenta:hover { text-decoration-color: currentColor; }

.enlace-texto {
    color: var(--tinta);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--linea-fuerte);
    transition: text-decoration-color 160ms var(--curva);
}

.enlace-texto:hover { text-decoration-color: var(--acento); }


/* --- 8. Actividades ---------------------------------------------------- */

.actividades {
    display: grid;
    gap: clamp(2.5rem, 1.75rem + 3vw, 4rem);
}

.actividad {
    display: grid;
    gap: 0.6rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea);
}

.actividad:first-child { padding-top: 0; border-top: 0; }

.actividad__fecha { display: flex; align-items: baseline; }

.fecha { color: var(--acento-tinta); }

.actividad__titulo {
    font-size: var(--texto-subtitulo);
    margin-bottom: 0.5rem;
}

.actividad__texto {
    max-width: var(--ancho-medida);
    color: var(--tinta-2);
}

/* Laminas: la foto y su pie, como en un expediente con anexos. */
.laminas {
    margin-top: 1.75rem;
    display: grid;
    gap: 1.5rem;
    max-width: var(--ancho-laminas);
}

.lamina { margin: 0; }

.lamina img {
    width: 100%;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel-hondo);
}

.laminas--sola img { max-height: 30rem; object-fit: cover; object-position: center; }

.lamina__pie {
    margin-top: 0.7rem;
    color: var(--tinta-3);
    font-size: var(--texto-chico);
    line-height: 1.5;
}

@media (min-width: 40rem) {
    .laminas--par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
    .laminas--par img { aspect-ratio: 3 / 4; object-fit: cover; }
}

/* Marcador discreto para los bloques que todavia no tienen foto. */
.anexo-pendiente {
    margin-top: 1.5rem;
    max-width: var(--ancho-laminas);
    padding: 0.7rem 0 0.7rem 1rem;
    border-left: 2px dashed var(--linea-fuerte);
    color: var(--tinta-3);
    font-size: var(--texto-chico);
}

.anexo-pendiente__archivo {
    display: block;
    margin-top: 0.15rem;
    color: var(--tinta-2);
    word-break: break-all;
}

.enlaces {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* El enlace a la publicacion es la pieza mas importante del bloque: se ve. */
.enlace-evidencia {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: 100px;
    background: var(--papel-alto);
    text-decoration: none;
    font-size: var(--texto-chico);
    font-weight: 500;
    transition: border-color 180ms var(--curva), transform 180ms var(--curva),
                box-shadow 180ms var(--curva);
}

.enlace-evidencia:hover,
.enlace-evidencia:focus-visible {
    border-color: var(--acento);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgb(20 17 15 / 0.07);
}

.enlace-evidencia__icono {
    width: 17px; height: 17px;
    flex: none;
    fill: none;
    stroke: var(--acento-tinta);
    stroke-width: 1.6;
}


/* --- 8b. Galeria ------------------------------------------------------- */

.jornada + .jornada { margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }

.jornada__titulo {
    font-size: var(--texto-subtitulo);
    margin-top: 0.35rem;
}

.jornada__texto {
    margin-top: 0.5rem;
    max-width: var(--ancho-medida);
    color: var(--tinta-2);
}

.cuadricula {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Version ancha, la de /galeria ------------------------------------- */

/* Cada jornada ocupa el ancho de la ventana: el titulo arriba, una linea que
   separa, la ficha debajo y las fotos de borde a borde. */
.galeria-completa {
    padding-top: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.jornada--ancha { margin-top: 0; }

.jornada--ancha + .jornada--ancha { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }

.jornada__encabezado { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }

.jornada--ancha .jornada__titulo {
    font-size: var(--texto-h2);
    letter-spacing: -0.03em;
    margin: 0 0 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--linea-fuerte);
}

.jornada__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.5rem;
}

.jornada--ancha .jornada__texto {
    margin: 0;
    max-width: var(--ancho-medida);
    flex: 1 1 22rem;
}

.jornada__cuenta {
    margin-left: auto;
    color: var(--tinta-3);
    font-size: var(--texto-meta);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    flex: none;
}

.cuadricula.cuadricula--ancha {
    margin-top: 0;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 48rem) {
    .cuadricula.cuadricula--ancha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
    .cuadricula.cuadricula--ancha { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.cuadricula__foto {
    display: block;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--papel-hondo);
    outline-offset: 3px;
}

.cuadricula__foto img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    transition: transform 320ms var(--curva), filter 320ms var(--curva);
}

.cuadricula__foto:hover img,
.cuadricula__foto:focus-visible img {
    transform: scale(1.03);
    filter: brightness(1.04);
}

.cuadricula__oculta { display: none; }

/* La casilla del contador es una foto con el numero encima, no un recuadro
   vacio. Al desplegarse pierde la clase y vuelve a ser una foto normal. */
.cuadricula__foto--mas { position: relative; }

.cuadricula__foto--mas img {
    filter: brightness(0.45);
    transition: filter 220ms var(--curva);
}

.cuadricula__foto--mas:hover img,
.cuadricula__foto--mas:focus-visible img { filter: brightness(0.3); }

.cuadricula__contador {
    position: absolute;
    inset: 0;
    /* El filter de la imagen la vuelve contexto de apilado, asi que sin esto
       tapaba al contador cuando el contador viene antes en el marcado (que es
       lo que hace PHP en la portada; el JS de /galeria lo anade despues). */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    color: #fff;
    text-align: center;
    pointer-events: none;
}

.cuadricula__cifra {
    font-size: var(--texto-subtitulo);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.cuadricula__pie {
    font-size: var(--texto-meta);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.85;
}

.galeria__salida { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

.galeria__nota {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--linea);
    /* Sin max-width: la linea y el texto llegan hasta donde llegan las fotos,
       igual que las que separan los articulos de /cuidados. */
    color: var(--tinta-3);
    font-size: var(--texto-chico);
}

@media (min-width: 40rem) {
    .cuadricula { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cuadricula__foto:hover img,
    .cuadricula__foto:focus-visible img { transform: none; }
}


/* --- 8b2. Asomo de Cuidados en la portada ------------------------------ */

.asomo__entrada { max-width: var(--ancho-medida); }

.asomo__lista {
    list-style: none;
    padding: 0;
    margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    display: grid;
    max-width: var(--ancho-laminas);
    counter-reset: asomo;
}

.asomo__lista li { counter-increment: asomo; }

.asomo__enlace {
    display: grid;
    gap: 0.25rem;
    padding: 1.15rem 1.25rem 1.15rem 0;
    border-top: 1px solid var(--linea);
    text-decoration: none;
    color: var(--tinta-2);
    transition: padding-left 240ms var(--curva), color 200ms var(--curva);
}

.asomo__lista li:last-child .asomo__enlace { border-bottom: 1px solid var(--linea); }

.asomo__enlace:hover,
.asomo__enlace:focus-visible { padding-left: 1rem; color: var(--tinta); }

.asomo__titulo {
    font-size: var(--texto-subtitulo);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tinta);
    text-wrap: balance;
}

.asomo__titulo::before {
    content: counter(asomo, decimal-leading-zero);
    margin-right: 0.7em;
    color: var(--acento-tinta);
    font-size: var(--texto-meta);
    font-weight: 500;
    letter-spacing: 0.11em;
    vertical-align: 0.35em;
}

.asomo__lede {
    max-width: var(--ancho-medida);
    font-size: var(--texto-chico);
    color: var(--tinta-3);
}

.asomo__salida { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

.asomo__salida--segunda { margin-top: 0.6rem; }


/* --- 8c. Cuidados: articulos y preguntas ------------------------------- */

.articulo + .articulo {
    margin-top: clamp(2.75rem, 2rem + 3vw, 4rem);
    padding-top: clamp(2.75rem, 2rem + 3vw, 4rem);
    border-top: 1px solid var(--linea);
}

.articulo__titulo {
    font-size: var(--texto-subtitulo);
    letter-spacing: -0.02em;
}

.articulo__lede {
    margin-top: 0.6rem;
    margin-bottom: 1.35rem;
    max-width: var(--ancho-medida);
    color: var(--tinta);
    border-left: 2px solid var(--acento);
    padding-left: 1rem;
}

.preguntas__nota {
    max-width: var(--ancho-medida);
    margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    color: var(--tinta-3);
    font-size: var(--texto-chico);
}

.preguntas { margin: 0; }

.pregunta {
    padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border-top: 1px solid var(--linea);
    max-width: var(--ancho-medida);
}

.pregunta:last-child { border-bottom: 1px solid var(--linea); }

.pregunta__p {
    font-weight: 600;
    letter-spacing: -0.011em;
    text-wrap: balance;
}

.pregunta__r {
    margin: 0.55rem 0 0;
    color: var(--tinta-2);
}

.aviso {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding: 1.15rem 1.35rem;
    max-width: var(--ancho-medida);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--papel-hondo);
    color: var(--tinta-2);
    font-size: var(--texto-chico);
}


/* --- 8d. Hallazgos de la encuesta -------------------------------------- */

.hallazgos {
    list-style: none;
    padding: 0;
    margin: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 0 0;
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    max-width: var(--ancho-laminas);
}

.hallazgo {
    padding-top: 1.25rem;
    border-top: 2px solid var(--tinta);
}

.hallazgo__cifra {
    font-size: var(--texto-cifra);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--acento-tinta);
}

.hallazgo__dice {
    margin-top: 0.5rem;
    font-size: var(--texto-subtitulo);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.hallazgo__de {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--texto-meta);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.hallazgo__lectura {
    margin-top: 0.75rem;
    max-width: var(--ancho-medida);
    color: var(--tinta-2);
    font-size: var(--texto-chico);
}

.tabla-encuesta { margin-top: 0; }

.encuesta__pregunta {
    text-align: left;
    padding-bottom: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.011em;
}

.encuesta__pregunta .col__nota {
    display: block;
    margin-top: 0.25rem;
    color: var(--tinta-3);
    font-weight: 500;
}

.seccion--encuesta .tabla-envoltura { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }


/* --- 9. Tabla de numeros ----------------------------------------------- */

.tabla-envoltura { overflow-x: auto; }

.tabla-numeros {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.tabla-numeros thead th {
    text-align: left;
    vertical-align: bottom;
    padding: 0 0 0.75rem;
    border-bottom: 2px solid var(--tinta);
    font-size: var(--texto-chico);
    font-weight: 600;
}

.col__nota {
    display: block;
    margin-top: 0.25rem;
    color: var(--tinta-3);
    font-weight: 400;
    letter-spacing: 0.06em;
}

.tabla-numeros tbody tr { border-bottom: 1px solid var(--linea); }

.tabla-numeros tbody th,
.tabla-numeros tbody td {
    text-align: left;
    vertical-align: baseline;
    padding: 1.125rem 1rem 1.125rem 0;
}

.metrica__nombre {
    display: block;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.metrica__fuente {
    display: block;
    margin-top: 0.3rem;
    max-width: 30rem;
    color: var(--tinta-3);
    font-size: var(--texto-chico);
    font-weight: 400;
    line-height: 1.45;
}

.cifra {
    font-size: var(--texto-cifra);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
}

.cifra--confirmada { color: var(--tinta); }

/* El estimado se lee igual de bien, pero se ve provisional a proposito. */
.cifra--estimada {
    color: var(--tinta-2);
    font-weight: 500;
    border-bottom: 2px dashed var(--linea-fuerte);
    padding-bottom: 0.15rem;
}

.cifra--vacia { color: var(--tinta-3); font-weight: 400; }

/* Valores que son texto, no numero: no compiten con las cifras. */
.cifra--texto {
    font-size: var(--texto-chico);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    display: inline-block;
}

.cifra--estimada.cifra--texto { font-weight: 500; }

@media (min-width: 48rem) {
    .tabla-numeros { table-layout: fixed; }
    .col-metrica     { width: 46%; }
    .col-confirmado  { width: 27%; }
    .col-estimado    { width: 27%; }
}

/* En movil la tabla se vuelve una ficha por metrica. */
@media (max-width: 47.999rem) {
    .tabla-numeros thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .tabla-numeros,
    .tabla-numeros tbody,
    .tabla-numeros tr,
    .tabla-numeros th,
    .tabla-numeros td { display: block; width: auto; }

    .tabla-numeros tbody tr {
        margin-bottom: 0.875rem;
        padding: 1.125rem 1.25rem;
        border: 1px solid var(--linea);
        border-radius: var(--radio);
        background: var(--papel-alto);
    }

    .tabla-numeros tbody th { padding: 0 0 0.875rem; }

    .tabla-numeros tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.625rem 0;
        border-top: 1px solid var(--linea);
    }

    .tabla-numeros tbody td::before {
        content: attr(data-col);
        font-size: var(--texto-meta);
        font-weight: 500;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--tinta-3);
        flex: none;
    }

    .metrica__fuente { max-width: none; }
}


/* --- 10. Aliados ------------------------------------------------------- */

.aliados {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--linea);
    max-width: 44rem;
}

.aliados__grupo {
    display: grid;
    gap: 0.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--linea);
}

.aliados__rol { color: var(--tinta-3); }

.aliados__lista {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.aliado {
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--linea-fuerte);
    padding-bottom: 1px;
    transition: color 160ms var(--curva), border-color 160ms var(--curva);
}

a.aliado:hover,
a.aliado:focus-visible { color: var(--acento-tinta); border-color: var(--acento); }

.aliado--sin-enlace { border-bottom-style: dotted; color: var(--tinta-2); }

@media (min-width: 40rem) {
    .aliados__grupo { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; gap: 1.5rem; }
}


/* --- 11. Estado actual ------------------------------------------------- */

.estado-actual {
    display: grid;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.pendientes {
    padding: 1.5rem 1.75rem;
    max-width: var(--ancho-laminas);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--papel-alto);
    align-self: start;
}

.pendientes__titulo {
    color: var(--tinta-3);
    margin-bottom: 0.875rem;
}

.pendientes__lista {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.7rem;
    font-size: var(--texto-chico);
    color: var(--tinta-2);
}

.pendientes__lista li::marker { color: var(--acento); }


/* --- 12. Pie ----------------------------------------------------------- */

.pie {
    padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 0;
    border-top: 2px solid var(--tinta);
}

.pie__contenido {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}

.pie__marca {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    letter-spacing: -0.035em;
    /* Una sola linea: el tope lo pone el ancho, no un max-width que partia
       el nombre en dos. */
    font-size: var(--marca-tamano);
    line-height: 1.05;
    white-space: nowrap;
}

/* Un poco mas bajo que la altura de la letra, para que no la domine. */
.pie__logo {
    width: auto;
    height: 0.98em;
    color: var(--tinta);
    flex: none;
}

/* En telefono el canal del contenedor es proporcionalmente mas grande, asi
   que el 8.4vw se queda sin margen. Aqui baja para no rozar el borde. */
@media (max-width: 30rem) {
    :root { --marca-tamano: clamp(1.375rem, 7.4vw, 2.5rem); }
}

.pie__datos {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    color: var(--tinta-2);
    font-size: var(--texto-chico);
}

.pie__datos a {
    text-decoration: underline;
    text-decoration-color: var(--linea-fuerte);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 160ms var(--curva);
}

.pie__datos a:hover { text-decoration-color: var(--acento); }

/* Cierre centrado, al modo de Naeva: una regla y una sola linea. */
.pie__legal {
    margin-top: clamp(3rem, 2rem + 4vw, 5rem);
    padding-bottom: var(--pie-cierre);
}

.pie__regla {
    height: 1px;
    background: var(--linea);
    margin-bottom: var(--pie-cierre);
}

.pie__legal p {
    text-align: center;
    text-wrap: balance;
    color: var(--tinta-3);
    font-size: var(--texto-chico);
    line-height: 1.6;
}

.pie__legal a {
    font-weight: 700;
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: var(--linea-fuerte);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 160ms var(--curva);
}

.pie__legal a:hover { text-decoration-color: var(--acento); }


@media (min-width: 48rem) {
    .pie__datos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 2rem;
    }
}


/* --- 12b. Visor de fotos ----------------------------------------------- */

/* No llega a los bordes: se queda holgado arriba y abajo a proposito. */
.visor {
    /* inset + margin auto lo centran de verdad: sin esto el dialog se pegaba
       al borde de arriba y el aire quedaba todo abajo. svh y no vh para que
       la barra del navegador movil no lo desborde. */
    inset: 0;
    margin: auto;
    max-width: min(82vw, 56rem);
    max-height: 82svh;
    /* fit-content y no auto: con inset:0 el dialog se estiraba hasta el
       max-width y los botones quedaban lejisimos de la foto vertical. */
    width: fit-content;
    height: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.visor::backdrop { background: rgb(20 17 15 / 0.86); }

.visor__foto {
    display: block;
    max-width: 100%;
    max-height: 82svh;
    width: auto;
    height: auto;
    border-radius: calc(var(--radio) * 2);
    background: var(--papel-hondo);
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.4);
}

/* Los tres controles viven fuera de la foto, sobre el fondo oscuro. */
.visor__cerrar,
.visor__flecha {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(255 255 255 / 0.75);
    cursor: pointer;
    transition: color 160ms var(--curva), transform 160ms var(--curva);
}

.visor__cerrar:hover,
.visor__flecha:hover { color: #fff; }

.visor__cerrar svg,
.visor__flecha svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* La X a la altura del borde de arriba de la foto, un poco a su derecha. */
.visor__cerrar {
    top: 0;
    right: -2.75rem;
    width: 2rem;
    height: 2rem;
}

.visor__cerrar svg { width: 20px; height: 20px; }

.visor__cerrar:hover { transform: scale(1.12); }

.visor__flecha {
    top: 50%;
    translate: 0 -50%;
    width: 2.75rem;
    height: 3.5rem;
}

.visor__flecha svg { width: 26px; height: 26px; }

.visor__flecha--previa { left: -3.5rem; }
.visor__flecha--siguiente { right: -3.5rem; }

.visor__flecha--previa:hover { transform: translateX(-3px); }
.visor__flecha--siguiente:hover { transform: translateX(3px); }

.visor__flecha[disabled] {
    opacity: 0.25;
    cursor: default;
    transform: none;
}

.visor__cuenta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.25rem;
    text-align: center;
    color: rgb(255 255 255 / 0.6);
    font-size: var(--texto-meta);
    letter-spacing: 0.11em;
}

/* En pantallas chicas no hay sitio a los lados: los controles se meten
   encima de la foto, que sigue siendo lo mas grande de la pantalla. */
@media (max-width: 52rem) {
    .visor { max-width: 88vw; }

    .visor__cerrar { top: -2.5rem; right: 0; }

    .visor__flecha--previa { left: 0.25rem; }
    .visor__flecha--siguiente { right: 0.25rem; }

    .visor__flecha {
        color: #fff;
        background: rgb(20 17 15 / 0.45);
        border-radius: 100px;
        width: 2.25rem;
        height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .visor__cerrar:hover,
    .visor__flecha:hover { transform: none; }
    .visor__flecha--previa:hover { transform: translateY(-50%); }
    .visor__flecha--siguiente:hover { transform: translateY(-50%); }
}


/* --- 13. Movimiento ---------------------------------------------------- */

/* Aparicion al entrar en pantalla. Solo se activa si el JS marca el body;
   sin JS todo queda visible desde el inicio. */
.js-movimiento .revelar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--curva), transform 600ms var(--curva);
}

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

/* Escalonado dentro de cada grupo, sin estilos en linea. */
.js-movimiento .actividad:nth-child(2),
.js-movimiento .aliados__grupo:nth-child(2) { transition-delay: 70ms; }

.js-movimiento .actividad:nth-child(3),
.js-movimiento .aliados__grupo:nth-child(3) { transition-delay: 140ms; }

.js-movimiento .actividad:nth-child(n + 4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .js-movimiento .revelar { opacity: 1; transform: none; }
}


/* --- 14. Impresion ----------------------------------------------------- */

@media print {
    body::before, .indice, .saltar-al-contenido { display: none; }
    body { background: #fff; font-size: 11pt; }
    .seccion { padding-block: 1.5rem; break-inside: avoid; }
    .actividad, .tabla-numeros tbody tr, .lamina { break-inside: avoid; }

    /* En papel el enlace no se puede tocar: se imprime la URL completa. */
    .enlace-evidencia { border: 0; padding: 0; }
    .enlace-evidencia::after {
        content: " — " attr(href);
        font-size: 9pt;
        word-break: break-all;
    }
}