/* ==========================================================================
   Portal de noticias — hoja de estilos única.

   Lenguaje visual de medio digital contemporáneo: blanco, negro y un amarillo
   de marca que nunca se usa como color de texto —sobre blanco su contraste es
   de 1:1 y sería ilegible— sino siempre como fondo con texto negro encima
   (19,6:1) o como barra y subrayado. El rojo queda reservado para donar.

   Sin fuentes externas: la tipografía del sistema ya está en el dispositivo
   del lector, así que el titular se pinta de inmediato. Eso es LCP, y el LCP
   es posicionamiento.
   ========================================================================== */

:root {
    --amarillo: #ffff00;
    --amarillo-suave: #fffbcc;
    --rojo: #e10600;
    --rojo-oscuro: #b30500;
    --rojo-tenue: rgba(225, 6, 0, .35);
    --tinta: #0e0e0e;
    --tinta-media: #3d3d3d;
    --tinta-suave: #6b6b6b;
    --linea: #e6e6e6;
    --linea-fuerte: #c9c9c9;
    --fondo: #ffffff;
    --papel: #f6f6f4;
    --oscuro: #0e0e0e;

    --acento: var(--amarillo);
    --donar: var(--rojo);
    /* Color del texto que va ENCIMA del color de marca. Lo calcula el servidor
       según la luminancia del color elegido, así que el bloque destacado se lee
       igual con un amarillo que con un azul marino. */
    --tinta-marca: var(--tinta);
    --tinta-donar: #fff;
    /* El color de marca convertido en un tono legible sobre blanco: sirve para
       los antetítulos de sección, que van en color plano y sin resaltado. */
    --marca-texto: var(--tinta);
    /* El pie no es negro puro: un gris oscuro cansa menos y separa mejor. */
    --pie-fondo: #1c1e22;

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

    --ancho: 1240px;
    --ancho-lectura: 43rem;
    --radio: 2px;
}

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

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

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
/* En línea, no en bloque: cuando los iconos sólo vivían dentro de botones y
   enlaces flex daba igual —un hijo de flex se comporta como bloque de todas
   formas—, pero desde que van dentro de un titular o de una frase, «block» los
   mandaba a una línea para ellos solos. Y sentados en la línea base, o quedan
   descolgados respecto al texto que llevan al lado. */
.icono { display: inline-block; vertical-align: -.125em; flex: 0 0 auto; }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--tinta);
    outline-offset: 2px;
}

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

.salto-contenido {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--amarillo); color: var(--tinta); padding: .75rem 1.25rem; font-weight: 700;
}
.salto-contenido:focus { left: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }
.contenedor--lectura { max-width: calc(var(--ancho-lectura) + 3rem); }
.contenedor--nota { max-width: calc(var(--ancho-lectura) + 3rem); }
.contenedor--ancho { max-width: 1440px; }

/* ---------------------------------------------------------------- cabecera */

.cabecera {
    position: relative;
    z-index: 30;
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
}

.cabecera__principal { padding: 1.1rem 0 .9rem; }

.cabecera__fila {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.cabecera__lado { display: flex; align-items: center; gap: .35rem; }
.cabecera__lado--der { justify-content: flex-end; gap: .75rem; }

.cabecera__hamburguesa {
    display: none; background: none; border: 0; padding: .35rem; color: var(--tinta);
}

/* Redes: círculo que se rellena de amarillo al pasar por encima. */
.redes { list-style: none; display: flex; align-items: center; gap: .25rem; }
.redes__enlace {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; color: var(--tinta); transition: background-color .15s ease;
}
.redes__enlace:hover { background: var(--amarillo); }

.marca { display: block; text-align: center; }
.marca__logo { max-height: 58px; width: auto; margin: 0 auto; }
.marca__nombre {
    display: block; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900;
    letter-spacing: -.045em; line-height: 1;
}
.marca__lema {
    display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .2em; color: var(--tinta-suave); margin-top: .3rem;
}

.buscar-icono {
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 0; background: none; padding: 0;
    border-radius: 50%; color: var(--tinta);
}
.buscar-icono:hover { background: var(--amarillo); }
.buscar-icono[aria-expanded="true"] { background: var(--amarillo); }

/* Comprar publicidad: convive con donar sin competir con él. Donar es rojo y
   lleno; este va en negro y con borde, así que se lee como el segundo. */
.boton-publicidad {
    display: inline-flex; align-items: center;
    border: 2px solid var(--tinta); border-radius: 100px;
    padding: .55rem 1.1rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tinta); white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.boton-publicidad:hover { background: var(--tinta); color: #fff; }

/* El buscador se despliega bajo la cabecera en vez de llevarse al lector. */
.buscador-panel { border-top: 1px solid var(--linea); background: var(--papel); padding: 1rem 0; }
.buscador--panel { max-width: 40rem; }

/* Botón de donar: el único rojo del sitio, para que no compita con nada. */
.boton-donar {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--donar); color: var(--tinta-donar);
    padding: .65rem 1.3rem; border-radius: 100px;
    font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.boton-donar:hover {
    color: var(--tinta-donar);
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.boton-donar:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

/* El del pie es la llamada principal del sitio: grande, con un anillo que lo
   despega del fondo oscuro y un latido muy leve que atrae la vista sin marear. */
.boton-donar--grande {
    padding: 1rem 2.1rem; font-size: 1rem; gap: .65rem;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 10px 26px rgba(0, 0, 0, .35);
    animation: latido-donar 3.2s ease-in-out infinite;
}
.boton-donar--grande:hover {
    animation: none;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .2), 0 14px 32px rgba(0, 0, 0, .4);
}
.boton-donar--grande .icono { transform: scale(1.15); }
.boton-donar--bloque { display: flex; justify-content: center; width: 100%; }

@keyframes latido-donar {
    0%, 88%, 100% { transform: scale(1); }
    92% { transform: scale(1.045); }
    96% { transform: scale(1.015); }
}

/* Navegación de secciones */
.navegacion { border-top: 1px solid var(--linea); background: var(--fondo); }
.navegacion__fila {
    display: flex; justify-content: center; align-items: center; gap: 2rem;
    overflow-x: auto; scrollbar-width: none;
}
.navegacion__fila::-webkit-scrollbar { display: none; }

.navegacion__enlace {
    position: relative; white-space: nowrap; padding: .85rem 0;
    font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
    color: var(--tinta);
}
.navegacion__enlace::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px; background: var(--amarillo); transform: scaleX(0);
    transition: transform .18s ease;
}
.navegacion__enlace:hover::after, .navegacion__enlace.activo::after { transform: scaleX(1); }
.navegacion__donar, .navegacion__publicidad { display: none; }

/* ----------------------------------------------------------------- portada */

main { display: block; padding-bottom: 4rem; }

.apertura {
    display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 2.5rem; padding: 2.25rem 0 2rem; border-bottom: 4px solid var(--tinta);
}
.apertura__principal { display: flex; flex-direction: column; min-width: 0; }
/* Dos notas más bajo la grande: son las que igualan el alto de la columna de
   la derecha y cierran la franja en blanco que quedaba hasta el bloque de
   vídeo. */
.apertura__seguidas {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem; margin-top: auto; padding-top: 1.75rem;
    border-top: 1px solid var(--linea);
}
.apertura__lateral { display: flex; flex-direction: column; gap: 1.5rem; }
.apertura__lateral .tarjeta { padding-bottom: 1.5rem; border-bottom: 1px solid var(--linea); }
.apertura__lateral .tarjeta:last-child { border-bottom: 0; padding-bottom: 0; }

.bloque__titulo {
    display: inline-block;
    font-size: .92rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 900;
    margin: 2.75rem 0 1.35rem; padding: .3rem .6rem;
    background: var(--amarillo); color: var(--tinta-marca);
}
.bloque__titulo--claro { background: var(--amarillo); color: var(--tinta-marca); margin: 0; }
.bloque__vermas {
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
    color: #fff;
}
.bloque__vermas:hover { color: var(--amarillo); }

.columnas { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 3.5rem; }
.columnas__lateral { padding-top: 2.75rem; }

.rejilla { display: grid; gap: 2.25rem 2rem; }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* ----------------------------------------------------------------- tarjetas */

.tarjeta { display: flex; flex-direction: column; gap: .8rem; }
.tarjeta__figura { display: block; position: relative; background: var(--papel); overflow: hidden; }
.tarjeta__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .45s ease; }
.tarjeta__figura:hover .tarjeta__img { transform: scale(1.04); }

.tarjeta__play {
    position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
    background: var(--amarillo); display: block; box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.tarjeta__play::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
    border-left: 16px solid var(--tinta-marca); border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; transform: translateX(3px);
}
/* En las notas que van bajo la apertura la miniatura mide 110px de ancho: el
   círculo de 56 la tapaba entera y no dejaba ver de qué era la foto. */
.tarjeta--lista .tarjeta__play { width: 28px; height: 28px; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.tarjeta--lista .tarjeta__play::after {
    border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px;
    transform: translateX(2px);
}

.tarjeta__cuerpo { display: flex; flex-direction: column; gap: .5rem; }

.kicker {
    display: inline-block; font-size: .7rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .11em;
    color: var(--marca-texto);
    align-self: flex-start;
}
.kicker:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* Los enlaces se marcan con un subrayado fino al pasar por encima, nunca con
   un bloque de color detrás del texto: eso tapaba la lectura. */
.migas a:hover,
.firma__autor a:hover,
.mas-leidos__item a:hover,
.barra-nota__lista a:hover,
.barra-nota__vermas:hover,
.ficha-autor__enlaces a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--marca-texto);
}
.kicker--grande { font-size: .78rem; margin-bottom: .9rem; }
.kicker--sobrio {
    color: var(--tinta-suave); font-size: .66rem; display: block; box-shadow: none;
    margin-bottom: .15rem;
}

.tarjeta__titulo { font-size: 1.2rem; line-height: 1.2; letter-spacing: -.015em; }

/* Resaltado de rotulador, sólo al pasar el ratón: en reposo el titular va en
   negro sobre blanco, que es como mejor se lee y como debe verse una portada
   llena de titulares. Al señalarlo, el amarillo se dibuja de izquierda a
   derecha por detrás del tercio inferior del texto. Se anima el tamaño del
   fondo, no su opacidad, para que parezca un trazo de rotulador.
   box-decoration-break hace que cada línea lleve el suyo. */
.tarjeta__titulo a {
    background-image: linear-gradient(transparent 62%, var(--acento) 62%);
    background-repeat: no-repeat;
    background-size: 0 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size .22s ease;
}
.tarjeta__titulo a:hover { background-size: 100% 100%; }
.tarjeta--grande .tarjeta__titulo { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.03; letter-spacing: -.035em; }
.tarjeta--destacada .tarjeta__titulo { font-size: 1.3rem; }
.tarjeta--lista .tarjeta__titulo { font-size: 1rem; }

.tarjeta__bajada { color: var(--tinta-media); font-size: 1rem; line-height: 1.5; margin: 0; }
.tarjeta--grande .tarjeta__bajada { font-size: 1.15rem; }
/* La línea va sobre la entradilla y no bajo la bajada: así sólo aparece
   cuando hay texto debajo que separar. */
.tarjeta__entradilla {
    color: var(--tinta-media); font-size: 1.02rem; line-height: 1.6;
    margin: .35rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linea);
}

.tarjeta__meta {
    margin: 0; font-size: .78rem; color: var(--tinta-suave);
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.tarjeta__autor { font-weight: 700; color: var(--tinta-media); }
.tarjeta__autor:hover { color: var(--tinta); }

.tarjeta--lista { flex-direction: row; gap: 1rem; align-items: flex-start; }
.tarjeta--lista .tarjeta__figura { flex: 0 0 110px; }

/* -------------------------------------------------------- franja de vídeos */

.franja-video {
    background: var(--oscuro); color: #fff; margin: 2.75rem 0; padding: 2rem 1.75rem 2.5rem;
}
.franja-video .rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.franja-video__cabecera {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin-bottom: 1.75rem;
}
.franja-video .tarjeta__titulo { font-size: 1.02rem; }
/* Sobre el fondo oscuro de la franja el rotulador no funciona: quita el trazo. */
.franja-video .tarjeta__titulo a { background-image: none; }
.franja-video .tarjeta__titulo a:hover { color: var(--amarillo); }
.franja-video .tarjeta__meta { color: rgba(255, 255, 255, .6); }
.franja-video .tarjeta__autor { color: rgba(255, 255, 255, .85); }
.franja-video .kicker { color: #fff; box-shadow: none; opacity: .7; }

/* ---------------------------------------------------------------- más leído */

.mas-leidos { position: sticky; top: 1.5rem; }
.mas-leidos__lista { list-style: none; display: flex; flex-direction: column; }
.mas-leidos__item {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: .95rem 0; border-bottom: 1px solid var(--linea);
}
.mas-leidos__item:last-child { border-bottom: 0; }
.mas-leidos__numero {
    font-size: 1.6rem; font-weight: 900; line-height: 1; color: var(--marca-texto);
    min-width: 1.5rem;
}
.mas-leidos__item a { font-weight: 700; font-size: .98rem; line-height: 1.28; }

/* ------------------------------------------------------ cabeceras de sección */

.cabecera-seccion {
    padding: 2.5rem 0 1.25rem; margin-bottom: 1.75rem;
    border-bottom: 4px solid var(--tinta);
}
.cabecera-seccion__antetitulo {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .15em;
    color: var(--tinta-suave); font-weight: 800; margin: 0 0 .4rem;
}
.cabecera-seccion__titulo {
    display: block; font-size: clamp(2rem, 5.5vw, 3.2rem); letter-spacing: -.035em;
}
.cabecera-seccion__texto { color: var(--tinta-media); font-size: 1.08rem; max-width: 44rem; margin: .9rem 0 0; }
.cabecera-seccion__meta { font-size: .84rem; color: var(--tinta-suave); margin: .8rem 0 0; }
.cabecera-seccion__meta a { text-decoration: underline; }

/* -------------------------------------------------------------------- nota */

.migas {
    font-size: .76rem; color: var(--tinta-suave); padding: 1.5rem 0 0;
    display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.migas a:hover { color: var(--marca-texto); }
.migas__actual { color: var(--tinta-media); font-weight: 400; text-transform: none; letter-spacing: 0; }

.nota__cabecera-hueco { display: none; }
/* El suelo del clamp sube: en móvil el titular se quedaba en 32 px, mucho más
   pequeño que el de los diarios que se leen en el mismo teléfono. */
.nota__titulo {
    font-size: clamp(2.3rem, 5.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.04em;
    margin-bottom: 1rem;
}
.nota__bajada {
    font-size: 1.24rem; line-height: 1.45; color: var(--tinta-media);
    margin: 0 0 1.75rem; font-weight: 400;
}

.firma {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
    align-items: center;
    padding: 1.1rem 0; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linea);
}
.firma__datos { font-size: .88rem; }
.firma__autor { margin: 0 0 .15rem; font-weight: 600; }
.firma__autor a { font-weight: 800; }
/* Sólo lo ve quien puede editar la nota, así que va discreto: es una
   herramienta de trabajo dentro de una página que es de los lectores. */
.firma__editar {
    display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem;
    padding: .1rem .5rem; border: 1px solid var(--linea-fuerte); border-radius: 100px;
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tinta-suave); text-decoration: none; vertical-align: .05em;
}
.firma__editar:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta-marca); }
.firma__autor a:hover { color: var(--marca-texto); }
.firma__cargo { color: var(--tinta-suave); font-weight: 400; }
.firma__fecha { margin: 0; color: var(--tinta-suave); font-size: .8rem; }

.nota__portada { margin: 0 0 2.5rem; }
.nota__portada-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nota__portada figcaption, .figura figcaption {
    font-size: .78rem; color: var(--tinta-suave); padding: .65rem 0 0; line-height: 1.45;
}
.credito { color: var(--linea-fuerte); }
.figura .credito { color: var(--tinta-suave); font-style: italic; }

/* El ancho de la nota se calcula para que las dos columnas llenen justo el
   contenedor: 46rem de lectura + 2.75rem de aire + 320px de barra. Cuando la
   columna de texto llevaba su propio max-width dentro de una rejilla más
   ancha, sobraba una franja en blanco entre el texto y la barra. */
.nota__ancho { max-width: calc(46rem + 2.75rem + 320px + 3rem); }
.nota__rejilla {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.75rem;
    align-items: start;
}
.nota__principal { min-width: 0; }
/* El titular va por encima de las dos columnas y ocupa todo el ancho. */
/* Sólo el eje vertical: la forma corta borraría el padding lateral del
   contenedor y el titular quedaría desalineado con el cuerpo. */
.nota__cabecera { padding-top: 2rem; padding-bottom: 1.75rem; }
.nota__cabecera .nota__bajada { max-width: 52rem; }
.nota__cabecera .firma { border-bottom: 1px solid var(--linea); padding-bottom: 1.25rem; }

/* Un único salto entre bloques.
   Antes cada cosa traía el suyo: los párrafos se separaban 1.4em y las fotos,
   los tuits y los vídeos 2.25rem, así que el texto se cortaba en trozos cada
   vez que aparecía algo incrustado. Con la medida en rem —y no en em— el hueco
   es idéntico mida lo que mida la letra del bloque, que es justo lo que falla
   con las citas y los destacados. */
.nota__cuerpo { --salto: 1.15rem; font-size: 1.16rem; line-height: 1.6; color: #1b1b1b; }
.nota__cuerpo p { margin: 0 0 var(--salto); }
.nota__cuerpo a {
    font-weight: 600; color: var(--marca-texto);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: rgba(0, 0, 0, .25);
    transition: text-decoration-color .15s ease;
}
.nota__cuerpo a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
/* Los intertítulos son la excepción: necesitan más aire arriba que abajo para
   que se lea que abren un apartado y no que cierran el anterior. */
.nota__cuerpo h2 { font-size: 1.6rem; margin: 2.1rem 0 .7rem; letter-spacing: -.025em; }
.nota__cuerpo h3 { font-size: 1.28rem; margin: 1.75rem 0 .55rem; }
.nota__cuerpo .lista { margin: 0 0 var(--salto) 1.35em; }
.nota__cuerpo .lista li { margin-bottom: .35em; }
.nota__cuerpo .separador {
    border: 0; border-top: 3px solid var(--amarillo);
    margin: var(--salto) auto; width: 4rem;
}

.cita {
    margin: var(--salto, 2.25rem) 0; padding: .25rem 0 .25rem 1.5rem;
    border-left: 5px solid var(--amarillo); font-size: 1.4rem; line-height: 1.35;
    font-weight: 700; letter-spacing: -.02em;
}
.cita p { margin: 0 0 .6rem; }
.cita cite {
    display: block; font-size: .78rem; font-style: normal; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave);
}

.destacado {
    margin: var(--salto, 2.25rem) 0; padding: 1.35rem 1.5rem; background: var(--amarillo);
    font-size: 1.08rem; font-weight: 600; line-height: 1.45; color: var(--tinta-marca);
}

.figura { margin: var(--salto, 2.25rem) 0; }
.figura--ancha { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.figura--ancha img { width: 100%; max-height: 32rem; object-fit: cover; }

.embed { margin: 0; }
/* El guion de Twitter le pone al <blockquote> —y al iframe que lo sustituye—
   su propio margen de 10 px arriba y abajo, que se suma al del bloque y vuelve
   a dejar los tuits más separados que el resto. */
.embed--tuit blockquote, .embed--tuit iframe,
.embed--instagram blockquote, .embed--instagram iframe { margin: 0 !important; }
.embed--video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.embed--audio iframe { width: 100%; height: 152px; border: 0; }
.embed--tuit, .embed--instagram, .embed--tiktok { display: flex; justify-content: center; }
.bloque-video, .bloque-tuit, .bloque-embed { margin: var(--salto, 2.25rem) 0; }
.bloque-video figcaption, .bloque-tuit figcaption { font-size: .78rem; color: var(--tinta-suave); padding-top: .5rem; }
.embed-enlace { font-size: .95rem; }

.yt-diferido { position: relative; cursor: pointer; background: #000; aspect-ratio: 16 / 9; }
.yt-diferido img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.yt-diferido:hover img { opacity: .65; }
.yt-diferido iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-diferido__play {
    position: absolute; inset: 0; margin: auto; width: 74px; height: 52px; border: 0;
    border-radius: 10px; background: var(--amarillo); cursor: pointer;
}
.yt-diferido__icono {
    position: absolute; inset: 0; margin: auto; width: 0; height: 0;
    border-left: 20px solid var(--tinta-marca); border-top: 12px solid transparent;
    border-bottom: 12px solid transparent; transform: translateX(3px);
}

.bloque-boletin {
    margin: 2.5rem 0; padding: 1.75rem; background: var(--papel);
    border-top: 5px solid var(--amarillo);
}
.bloque-boletin h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.bloque-boletin p { font-size: .98rem; color: var(--tinta-media); }

/* Respuesta al suscribirse. Vacío no ocupa sitio, para que no salte el diseño. */
.boletin__aviso { font-size: .92rem; font-weight: 700; margin: .6rem 0 0; }
.boletin__aviso:empty { display: none; }
.boletin__aviso--ok { color: #14691f; }
.boletin__aviso--error { color: #a8251a; }

.nota__temas { margin: 2.75rem 0 1rem; }
.nota__temas-titulo {
    display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em;
    color: var(--tinta-suave); font-weight: 800; margin-bottom: .7rem;
}
.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquetas a {
    display: inline-block; padding: .35rem .8rem; background: var(--papel);
    font-size: .82rem; font-weight: 600; color: var(--tinta-media);
}
.etiquetas a:hover { background: var(--amarillo); color: var(--tinta-marca); }

/* --------------------------------------------------------------- compartir */

.compartir { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.compartir__etiqueta {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
    color: var(--tinta-suave); font-weight: 800;
}
.compartir__lista { list-style: none; display: flex; gap: .5rem; }
.compartir__boton {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 50%; border: 0; padding: 0;
    background: var(--papel); color: var(--tinta);
    transition: transform .14s ease, background-color .14s ease, color .14s ease;
}
.compartir__boton:hover { transform: translateY(-3px); color: #fff; }
.compartir__boton--whatsapp:hover { background: #25d366; }
.compartir__boton--x:hover { background: #000; }
.compartir__boton--facebook:hover { background: #1877f2; }
.compartir__boton--linkedin:hover { background: #0a66c2; }
.compartir__boton--telegram:hover { background: #229ed9; }
.compartir__boton--enlace:hover { background: var(--amarillo); color: var(--tinta-marca); }

.compartir--ancho {
    margin: 2.5rem 0; padding: 1.35rem 0; gap: 1.25rem;
    border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.compartir--ancho .compartir__etiqueta { font-size: .8rem; }
.compartir--ancho .compartir__boton { width: 44px; height: 44px; }

/* ----------------------------------------------------------- apoyo y barra */

.apoyo-nota {
    margin: 2.5rem 0; padding: 1.75rem; background: var(--amarillo); text-align: center;
    color: var(--tinta-marca);
}
.apoyo-nota__texto { font-size: 1.3rem; font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.02em; }
.apoyo-nota__detalle { font-size: .95rem; opacity: .8; margin: 0 0 1.25rem; }

/* Las dos puertas del muro. Se ven las dos siempre, aporte o no: quien no
   aporta tiene que saber que el otro existe, o nunca lo va a pedir. */
.muro-pestanas { display: flex; gap: .4rem; margin: 0 0 1.75rem; border-bottom: 2px solid var(--linea); }
.muro-pestanas__enlace {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .7rem 1.1rem; margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    font-weight: 700; font-size: .95rem; color: var(--tinta-suave); text-decoration: none;
}
.muro-pestanas__enlace:hover { color: var(--tinta); }
.muro-pestanas__enlace--activa { color: var(--tinta); border-bottom-color: var(--tinta); }

.formulario__antispam { margin: .7rem 0 0; font-size: .8rem; color: var(--tinta-suave); }

/* --------------------------------------------- invitación al grupo de WhatsApp */

/* Verde de WhatsApp y no el amarillo del portal: aquí lo que ayuda es que se
   reconozca de un vistazo a qué aplicación lleva el botón. */
.grupo-wa {
    margin: 2.5rem 0 0;
    padding: 1.75rem;
    border: 2px solid #25d366;
    border-radius: 4px;
    text-align: center;
}
.grupo-wa__antetitulo {
    margin: 0 0 .5rem;
    font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #128c3e;
}
.grupo-wa__titulo { margin: 0 0 .8rem; font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -.02em; }
.grupo-wa__texto { margin: 0 auto 1.4rem; max-width: 30rem; color: var(--tinta-suave); line-height: 1.55; }
.grupo-wa__boton {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.8rem; border-radius: 100px;
    background: #25d366; color: #05391a;
    font-weight: 800; font-size: 1.02rem; text-decoration: none;
}
.grupo-wa__boton:hover { background: #128c3e; color: #fff; }

/* ------------------------------------------------------------ muro de pago */

/* El texto cortado no termina en seco: se desvanece, que es la forma de decir
   «aquí sigue habiendo nota» sin escribirlo. */
.nota__cuerpo--cerrado > *:last-child {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.muro-pago {
    margin: 0 0 2.5rem;
    padding: 2.25rem 1.75rem;
    background: var(--tinta);
    color: #fff;
    text-align: center;
    border-radius: 4px;
}
.muro-pago__antetitulo {
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amarillo);
}
.muro-pago__titulo {
    margin: 0 0 1.1rem;
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}
.muro-pago__texto {
    margin: 0 auto .9rem;
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #d8d8d8;
}
.muro-pago__precio {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .4rem;
    margin: 1.6rem 0 1.2rem;
}
.muro-pago__monto { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.muro-pago__periodo { font-size: 1rem; color: #b9b9b9; }
.muro-pago__boton {
    display: inline-block;
    padding: .95rem 2rem;
    background: var(--amarillo);
    color: var(--tinta);
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: 100px;
}
.muro-pago__boton:hover { background: #fff; }
.muro-pago__alternativa {
    margin: 1.1rem auto 0;
    max-width: 30rem;
    font-size: .92rem;
    color: #c4c4c4;
}
.muro-pago__pie {
    margin: 1.4rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .9rem;
    color: #b9b9b9;
}
.muro-pago__pie a { color: var(--amarillo); }

/* La video columna cerrada: la portada hace de cartel y el candado explica. */
.videocolumna__reproductor--cerrado { position: relative; overflow: hidden; }
.videocolumna__cartel { display: block; width: 100%; height: auto; filter: brightness(.45); }
.videocolumna__candado {
    position: absolute;
    inset: auto 0 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    color: #fff;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 40rem) {
    .muro-pago { padding: 1.75rem 1.2rem; }
}

.barra-nota { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 2.25rem; }
.barra-nota__bloque { border-top: 4px solid var(--tinta); padding-top: .9rem; }
/* El bloque del día va en rojo entero —línea y título— para que se distinga
   de un vistazo del resto de la barra. */
.barra-nota__bloque--destacado { border-top-color: var(--rojo); }
.barra-nota__bloque--destacado .barra-nota__titulo { color: var(--rojo); }
/* El titular del bloque va grande y sin tracking, como en los diarios que
   usan la barra de verdad para retener al lector: en letra menuda y muy
   espaciada parecía un epígrafe de pie de página y nadie lo miraba. */
.barra-nota__titulo {
    font-size: 1.35rem; text-transform: uppercase; letter-spacing: -.02em; font-weight: 900;
    line-height: 1.05; margin-bottom: 1.1rem;
}
/* Hilo: la lista de titulares se lee como una línea de tiempo. El punto y la
   línea guían la vista de arriba abajo y evitan la sopa de bordes grises. */
.hilo { list-style: none; margin: 0; padding: 0; }
/* La separación va en el padding, no en el margen: así el ítem llega hasta el
   punto siguiente y la línea puede unirlos sin cortarse. */
.hilo__item { position: relative; padding: 0 0 1.7rem 1.35rem; }
.hilo__item:last-child { padding-bottom: 0; }
/* Los puntos y la línea van en rojo: es lo único de la barra que compite con
   el titular de la nota, y así se ve de un vistazo que hay más que leer. */
.hilo__item::before {
    content: ''; position: absolute; left: 0; top: .35rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--rojo);
}
/* La línea baja de un punto al siguiente sin interrupción; sólo se corta
   después del último. */
.hilo__item::after {
    content: ''; position: absolute; left: 4px; top: 1.05rem; bottom: 0;
    width: 1px; background: var(--rojo-tenue);
}
.hilo__item:last-child::after { display: none; }
.hilo__titulo {
    display: block; font-weight: 700; font-size: 1.22rem; line-height: 1.4;
    letter-spacing: -.015em;
}
.hilo__titulo:hover { color: var(--marca-texto); }
.hilo__pie {
    margin: .4rem 0 0; font-size: .8rem; color: var(--tinta-suave);
    display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.hilo__seccion {
    font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    color: var(--marca-texto);
}
.hilo__seccion + time::before { content: '·'; margin-right: .45rem; }
.hilo--sobrio .hilo__item::before { background: var(--linea-fuerte); }
.hilo--sobrio .hilo__item::after { background: var(--linea-fuerte); }
.barra-nota__vermas {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem;
    font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
}
.barra-nota__vermas:hover { color: var(--marca-texto); }
.barra-nota__apoyo { background: var(--papel); padding: 1.35rem; text-align: center; }
.barra-nota__apoyo p { font-weight: 700; font-size: .98rem; margin: 0 0 .9rem; }

.relacionados { margin-top: 3.5rem; padding-top: .5rem; border-top: 1px solid var(--linea); }

.aviso { padding: .85rem 1rem; font-size: .9rem; margin: 1.5rem 0; }
.aviso--previa { background: var(--amarillo-suave); border-left: 4px solid var(--amarillo); }

/* --------------------------------------------------------- video columnas */

.videocolumna__escenario { background: var(--oscuro); padding: 2.5rem 0; margin-bottom: 2rem; }
.videocolumna__reproductor { max-width: 62rem; margin: 0 auto; }

/* ----------------------------------------------------------- ficha de autor */

.ficha-autor {
    display: flex; gap: 1.75rem; align-items: flex-start; flex-wrap: wrap;
    padding: 2.5rem 0 2rem; margin-bottom: 1.75rem; border-bottom: 4px solid var(--tinta);
}
.ficha-autor__avatar, .tarjeta-autor__avatar {
    flex: 0 0 auto; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
    background: var(--papel); display: grid; place-items: center;
}
.ficha-autor__avatar img, .tarjeta-autor__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ficha-autor__iniciales { font-size: 2rem; font-weight: 900; color: var(--tinta-suave); }
.ficha-autor__nombre { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.035em; }
.ficha-autor__cargo {
    color: var(--marca-texto); font-weight: 800; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .1em; margin: .5rem 0 .7rem; display: inline-block;
}
.ficha-autor__bio { color: var(--tinta-media); max-width: 44rem; font-size: 1.05rem; }
.ficha-autor__enlaces { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; font-weight: 700; }
.ficha-autor__enlaces a:hover { color: var(--marca-texto); }
.ficha-autor__total { color: var(--tinta-suave); font-weight: 400; }

.tarjeta-autor { display: flex; gap: 1rem; align-items: flex-start; }
.tarjeta-autor__avatar { width: 84px; height: 84px; }
.tarjeta-autor__nombre { font-size: 1.12rem; }
.tarjeta-autor__cargo { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; margin: .25rem 0; color: var(--tinta-suave); }
.tarjeta-autor__bio { font-size: .9rem; color: var(--tinta-media); margin: .35rem 0; }
.tarjeta-autor__total { font-size: .76rem; color: var(--tinta-suave); margin: 0; }

/* ------------------------------------------------------------- paginación */

.paginacion { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 3.5rem 0 1rem; }
.paginacion__enlace {
    padding: .55rem .9rem; border: 2px solid var(--linea); font-size: .86rem; font-weight: 700;
    color: var(--tinta-media);
}
.paginacion__enlace:hover { border-color: var(--tinta); color: var(--tinta); }
.paginacion__enlace--activo { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta-marca); }
.paginacion__puntos { padding: .55rem .3rem; color: var(--tinta-suave); }

/* --------------------------------------------------------- buscador y boletín */

.buscador { display: flex; align-items: center; border: 2px solid var(--tinta); }
.buscador input {
    border: 0; padding: .6rem .8rem; font: inherit; font-size: .95rem; flex: 1;
    background: transparent; color: inherit; min-width: 0;
}
.buscador input:focus { outline: none; }
.buscador button {
    border: 0; background: var(--amarillo); padding: .65rem 1rem; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--tinta);
}
.buscador button:hover { background: var(--tinta); color: #fff; }
.buscador button { color: var(--tinta-marca); }
.buscador--grande { max-width: 34rem; margin: 1.25rem 0; }
.buscador--grande input { font-size: 1.05rem; padding: .85rem 1rem; }

.franja-boletin { background: var(--papel); margin-top: 3.5rem; padding: 3rem 0; }
.franja-boletin__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.franja-boletin h2 { font-size: 1.9rem; margin-bottom: .5rem; letter-spacing: -.03em; }
.franja-boletin p { color: var(--tinta-media); margin: 0; }
.boletin__form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.boletin__form input[type="email"] {
    flex: 1 1 14rem; padding: .8rem .9rem; border: 2px solid var(--tinta); font: inherit; background: #fff;
}
.boletin__form button {
    padding: .8rem 1.4rem; border: 0; background: var(--tinta); color: #fff;
    font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
}
.boletin__form button:hover { background: var(--amarillo); color: var(--tinta-marca); }
.boletin__aviso { flex-basis: 100%; margin: 0; font-size: .85rem; font-weight: 700; }

/* ------------------------------------------------------------------- pie */

.pie { background: var(--pie-fondo); color: rgba(255, 255, 255, .68); padding: 3.5rem 0 0; margin-top: 4rem; }

.pie__cima {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pie__logo { max-height: 62px; width: auto; }
.pie__nombre { font-size: 1.9rem; font-weight: 900; color: #fff; letter-spacing: -.04em; }
.pie__donar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.pie__donar-texto {
    margin: 0; color: #fff; font-weight: 800; font-size: 1.15rem;
    max-width: 24rem; letter-spacing: -.01em; line-height: 1.3;
}

.redes--pie { justify-content: flex-start; gap: .5rem; padding: 2rem 0 .5rem; }
.redes--pie .redes__enlace { width: 42px; height: 42px; color: #fff; background: rgba(255, 255, 255, .08); }
.redes--pie .redes__enlace:hover { background: var(--amarillo); color: var(--tinta-marca); }

.pie__rejilla {
    display: grid; grid-template-columns: 1fr 1fr 2.2fr;
    gap: 2.5rem; padding: 2.5rem 0 3rem;
}
/* Cada columna se separa de la línea de arriba: antes el título quedaba
   pegado al filete y parecía tachado. */
.pie__columna { padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.pie__columna h2 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: #fff;
    margin: 0 0 1.25rem; font-weight: 900;
}
.pie__columna ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; font-size: .93rem; }
.pie__columna a:hover { color: var(--amarillo); }
/* Los temas van en fila; la regla de arriba pone las listas del pie en
   columna, así que aquí hace falta ganarle en especificidad. */
.pie__columna ul.etiquetas--pie { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.etiquetas--pie a { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: .78rem; }
.etiquetas--pie a:hover { background: var(--amarillo); color: var(--tinta-marca); }
.pie__descripcion {
    font-size: .88rem; max-width: 46rem; padding: 0 0 2.5rem; line-height: 1.6;
}

.pie__legal {
    border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.5rem 0; font-size: .78rem;
    color: rgba(255, 255, 255, .5);
}
.pie__legal-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.pie__legal p { margin: 0; }

/* ----------------------------------------------------------------- varios */

.vacio { padding: 3rem 0; color: var(--tinta-suave); font-size: 1.05rem; text-align: center; }
.error-404 { padding: 4rem 0 2rem; }
.error-404__codigo {
    font-size: 5rem; font-weight: 900; margin: 0; line-height: 1; letter-spacing: -.05em;
    display: inline-block; color: var(--marca-texto);
}
.error-404__titulo { font-size: 2.2rem; margin: 1rem 0; letter-spacing: -.03em; }
.error-404__texto { color: var(--tinta-media); font-size: 1.1rem; }

/* ------------------------------------------------------------- publicidad */

/* Página de anunciantes. Mismo lenguaje que el portal —blanco, negro y el
   amarillo de marca— pero con más aire: aquí no se lee, se decide. */

.anuncios { padding-bottom: 4rem; }

.anuncios__portada {
    background: var(--papel); border-bottom: 1px solid var(--linea);
    margin-bottom: 3.5rem; padding: 4.5rem 0 4rem;
}
.anuncios__portada-caja { max-width: 46rem; }
.anuncios__antetitulo {
    color: var(--marca-texto); font-size: .78rem; font-weight: 900;
    letter-spacing: .16em; margin: 0 0 1rem; text-transform: uppercase;
}
.anuncios__titulo {
    font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing: -.04em; line-height: 1.03;
    margin: 0 0 1.25rem;
}
.anuncios__titulo--ficha { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.anuncios__entrada {
    color: var(--tinta-media); font-size: 1.2rem; line-height: 1.55; margin: 0;
    max-width: 40rem;
}
.anuncios__atajos { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.anuncios__atajo {
    background: var(--tinta); border-radius: 100px; color: #fff; font-size: .84rem;
    font-weight: 700; padding: .7rem 1.4rem; transition: opacity .15s ease;
}
.anuncios__atajo:hover { opacity: .82; }
.anuncios__atajo + .anuncios__atajo { background: transparent; border: 1px solid var(--linea-fuerte); color: var(--tinta); }

.anuncios__grupo { margin-bottom: 4.5rem; scroll-margin-top: 2rem; }
.anuncios__grupo-cabecera {
    align-items: baseline; border-bottom: 3px solid var(--tinta); display: flex;
    flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 2rem; padding-bottom: .85rem;
}
.anuncios__grupo-titulo {
    font-size: 1.5rem; letter-spacing: -.03em; margin: 0;
}
.anuncios__grupo-nota { color: var(--tinta-suave); font-size: .92rem; margin: 0; }
.anuncios__subtitulo { font-size: 1.05rem; margin: 2rem 0 .85rem; }

.anuncios__rejilla {
    display: grid; gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Las redes son cinco espacios, y una rejilla que reparte por columnas fijas
   dejaba cuatro arriba y uno solo abajo con tres huecos al lado. Con flexible y
   centrado, la última fila queda centrada y el corte parece decidido. */
.anuncios__rejilla--redes {
    display: flex; flex-wrap: wrap; justify-content: center;
}
.anuncios__rejilla--redes > .tarjeta-anuncio {
    flex: 1 1 300px;
    max-width: 380px;
}

/* -------------------------------------------------------- tarjeta de espacio */

.tarjeta-anuncio {
    background: #fff; border: 1px solid var(--linea); border-radius: 4px;
    display: flex; flex-direction: column; overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-anuncio:hover { border-color: var(--tinta); transform: translateY(-2px); }
.tarjeta-anuncio__cuerpo { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.tarjeta-anuncio__titulo { font-size: 1.22rem; letter-spacing: -.02em; margin: 0 0 .5rem; }
.tarjeta-anuncio__resumen { color: var(--tinta-media); font-size: .96rem; line-height: 1.5; margin: 0 0 1.25rem; }

.tarjeta-anuncio__specs { display: grid; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.tarjeta-anuncio__specs li {
    color: var(--tinta-media); font-size: .88rem; line-height: 1.45;
    padding-left: 1.35rem; position: relative;
}
.tarjeta-anuncio__specs li::before {
    color: var(--marca-texto); content: '→'; font-weight: 800; left: 0; position: absolute;
}
.tarjeta-anuncio__specs--grande li { font-size: .98rem; }

.tarjeta-anuncio__pie { border-top: 1px solid var(--linea); margin-top: auto; padding-top: 1.25rem; }

/* La unidad va bajo la cifra, no a su lado. Al lado, «por publicación» se partía
   en dos líneas y «por mes» no, así que el bloque medía distinto en cada tarjeta
   y la fila entera se veía descuadrada. Debajo mide siempre lo mismo, y la cifra
   se lee de un golpe. */
.tarjeta-anuncio__precio {
    display: flex; flex-direction: column; gap: .1rem;
    /* Dos líneas, aunque no haya unidad que enseñar («Consultar»). */
    min-height: 3.05rem;
}
.tarjeta-anuncio__cifra { font-size: 1.7rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.15; }
.tarjeta-anuncio__cifra--consultar { font-size: 1.25rem; }
.tarjeta-anuncio__periodo {
    color: var(--tinta-suave); font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

.cupo { color: var(--tinta-suave); font-size: .82rem; margin: .35rem 0 1.1rem; }
.cupo--libre { color: var(--tinta-media); }
.cupo--libre strong { color: var(--tinta); font-weight: 800; }
.cupo--agotado { color: var(--rojo); font-weight: 700; }

.boton-anuncio {
    background: var(--tinta); border: 0; border-radius: 100px; color: #fff; display: block;
    font-size: .92rem; font-weight: 800; padding: .85rem 1.25rem; text-align: center;
    transition: background .15s ease;
    width: 100%;
}
.boton-anuncio:hover { background: var(--marca-texto); }
.boton-anuncio--espera { background: #fff; border: 1px solid var(--linea-fuerte); color: var(--tinta); }
.boton-anuncio--espera:hover { background: var(--papel); }
.boton-anuncio--enviar { margin-top: 1.5rem; }
.boton-anuncio--pagar {
    background: var(--amarillo); color: var(--tinta-marca); font-size: 1.05rem;
    margin: 1.5rem 0; padding: 1rem 1.5rem;
}
.boton-anuncio--pagar:hover { background: var(--tinta); color: #fff; }

/* Croquis: dónde cae el anuncio dentro de la página. Vale más que explicarlo. */
.croquis {
    background: var(--papel); border-bottom: 1px solid var(--linea);
    display: flex; flex-direction: column; gap: .45rem; justify-content: center;
    min-height: 150px; padding: 1.5rem;
}
.croquis__linea { background: var(--linea-fuerte); border-radius: 2px; height: 6px; }
.croquis__linea--corta { width: 55%; }
.croquis__hueco {
    align-items: center; background: var(--amarillo); border-radius: 2px;
    color: var(--tinta-marca); display: flex; font-size: .68rem; font-weight: 900;
    justify-content: center; letter-spacing: .1em; margin: .35rem 0;
    min-height: 34px; text-transform: uppercase;
}
.croquis--sidebar { display: grid; gap: .45rem 1rem; grid-template-columns: 1fr 88px; }
.croquis--sidebar .croquis__linea { grid-column: 1; }
.croquis--sidebar .croquis__hueco {
    grid-column: 2; grid-row: 1 / span 4; margin: 0; min-height: 88px; text-align: center;
}

.marca-red {
    align-items: center; background: var(--tinta); color: #fff; display: flex;
    height: 56px; justify-content: center; margin: 1.5rem 1.5rem 0; width: 56px;
    border-radius: 50%;
}
.marca-red--instagram { background: #c13584; }
.marca-red--youtube { background: #ff0000; }
.marca-red--facebook { background: #1877f2; }
.marca-red--tiktok { background: #010101; }

/* ------------------------------------------------------------ cómo funciona */

.anuncios__pasos { margin-bottom: 4rem; }
.pasos {
    display: grid; gap: 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pasos__paso { border-top: 3px solid var(--amarillo); padding-top: 1rem; }
.pasos__numero {
    color: var(--marca-texto); display: block; font-size: 1.6rem; font-weight: 900;
    line-height: 1; margin-bottom: .6rem;
}
.pasos__paso h3 { font-size: 1.02rem; margin: 0 0 .4rem; }
.pasos__paso p { color: var(--tinta-media); font-size: .9rem; line-height: 1.5; margin: 0; }

.anuncios__cierre {
    background: var(--papel); border-radius: 4px; padding: 2.5rem;
    text-align: center;
}
.anuncios__cierre h2 { font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 .6rem; }
.anuncios__cierre p { color: var(--tinta-media); margin: 0; }
.anuncios__cierre a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------ ficha y formulario */

/* La ficha era dos columnas sueltas: a la izquierda la información, que se
   acababa pronto, y a la derecha un formulario largo. Entre las dos quedaba un
   vacío enorme y no parecían la misma página.

   Ahora abre con una cabecera a todo el ancho —qué es, cuánto cuesta y si hay
   cupo, lo que decide la compra— y debajo, dentro de una sola caja, lo que
   incluye junto al formulario. Se lee como una secuencia: esto compras, así se
   pide. */
.ficha { padding: 0 0 4rem; }
.anuncios__volver {
    color: var(--tinta-suave); display: inline-block; font-size: .85rem; font-weight: 700;
    margin-bottom: 1.5rem;
}
.anuncios__volver:hover { color: var(--tinta); }
.anuncios__aviso {
    background: var(--amarillo-suave); border-left: 4px solid var(--amarillo);
    font-size: .95rem; margin-top: 1.5rem; padding: 1rem 1.25rem;
}

/* La cabecera va sobre el color de marca, como la portada de la sección: es lo
   primero que se ve y ahí se decide si sigues leyendo. Siempre texto negro
   encima del amarillo, nunca al revés. */
.ficha__franja { background: var(--acento); color: var(--tinta-marca); padding: 3rem 0 2.75rem; }
.ficha__cabecera { max-width: 46rem; }
.ficha__titulo { font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -.04em; line-height: 1.04; margin: 0; }
.ficha__entrada { font-size: 1.15rem; line-height: 1.5; margin: .85rem 0 0; max-width: 42rem; }

.ficha__cifras {
    display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2rem;
    border-top: 2px solid rgba(0, 0, 0, .18); padding-top: 1.5rem;
}
.ficha__etiqueta {
    display: block; font-size: .72rem; font-weight: 800; opacity: .75;
    letter-spacing: .1em; margin-bottom: .35rem; text-transform: uppercase;
}
.ficha__precio { display: block; font-size: 2.1rem; letter-spacing: -.035em; line-height: 1.05; }
.ficha__precio--agotado { color: var(--rojo-oscuro); }
.ficha__unidad { font-size: .74rem; font-weight: 800; letter-spacing: .06em; opacity: .75; text-transform: uppercase; }

/* Las dos mitades comparten caja y las separa una línea, no un hueco. */
.ficha__columnas {
    border: 1px solid var(--linea); border-radius: 4px; display: grid; margin-top: 2.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
}
.ficha__incluye { border-right: 1px solid var(--linea); padding: 2.25rem; }
.ficha__subtitulo { font-size: 1.25rem; margin: 0 0 1.25rem; }

/* Lo que se compra se lee más grande y con aire: es la lista que convence. */
.ficha__incluye .tarjeta-anuncio__specs { gap: .85rem; }
.ficha__incluye .tarjeta-anuncio__specs li {
    color: var(--tinta); font-size: 1.05rem; line-height: 1.5;
    padding: .55rem 0 .55rem 2.5rem;
}
.ficha__incluye .tarjeta-anuncio__specs li::before {
    /* El mismo «check» de Lucide que usan las plantillas, aquí como fondo:
       desde un ::before no se puede llamar al ayudante de PHP. */
    content: ''; top: .75rem; width: 1.1rem; height: 1.1rem;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e0e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.ficha__pasos { counter-reset: paso; list-style: none; margin: 2rem 0 0; padding: 0; }
.ficha__pasos li {
    color: var(--tinta-media); counter-increment: paso; font-size: .92rem;
    line-height: 1.5; padding: .55rem 0 .55rem 2.25rem; position: relative;
}
.ficha__pasos li::before {
    background: var(--acento); border-radius: 50%; color: var(--tinta-marca);
    content: counter(paso); display: grid; font-size: .78rem; font-weight: 800;
    height: 1.5rem; left: 0; place-items: center; position: absolute; top: .5rem; width: 1.5rem;
}

.ficha__formulario { padding: 2rem; }

.formulario-anuncio { background: #fff; }
.formulario-anuncio__titulo {
    font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .35rem;
}
/* Un subrayado de marca bajo el título del formulario: marca dónde empieza lo
   que hay que rellenar sin meter otra caja de color dentro de la caja. */
.formulario-anuncio__titulo::after {
    background: var(--acento); content: ''; display: block; height: .55rem;
    margin-top: .45rem; width: 3.5rem;
}
.formulario-anuncio__intro { color: var(--tinta-media); font-size: .95rem; margin: .75rem 0 1.5rem; }
.formulario-anuncio__nota { color: var(--tinta-suave); font-size: .88rem; margin: 0 0 1.5rem; }
.formulario-anuncio label {
    display: block; font-size: .86rem; font-weight: 700; margin-bottom: .35rem;
}
.formulario-anuncio label + input,
.formulario-anuncio label + textarea { margin-bottom: 1.1rem; }
.formulario-anuncio input,
.formulario-anuncio textarea {
    background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 3px;
    font: inherit; font-size: .95rem; padding: .7rem .8rem; width: 100%;
}
.formulario-anuncio input:focus,
.formulario-anuncio textarea:focus { border-color: var(--tinta); outline: 0; }
.formulario-anuncio textarea { line-height: 1.5; resize: vertical; }
.formulario-anuncio__ayuda {
    color: var(--tinta-suave); display: block; font-size: .8rem; font-weight: 400;
    line-height: 1.4; margin-top: .2rem;
}
.formulario-anuncio__fila { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.formulario-anuncio__errores {
    background: #fbdcd9; border-left: 4px solid var(--rojo); font-size: .88rem;
    list-style: none; margin: 0 0 1.25rem; padding: .85rem 1rem;
}
.formulario-anuncio__errores li + li { margin-top: .35rem; }
.formulario-anuncio__legal {
    color: var(--tinta-suave); font-size: .78rem; line-height: 1.45; margin: 1rem 0 0;
}
/* Trampa para robots: fuera de la vista pero alcanzable por un formulario automático. */
.formulario-anuncio__trampa { left: -9999px; position: absolute; }

/* --------------------------------------------------------- pedido del cliente */

.pedido { padding: 3rem 0; }
.pedido__estado {
    align-items: center; background: var(--papel); border-radius: 100px; display: inline-flex;
    font-size: .88rem; font-weight: 800; gap: .5rem; margin: 0 0 1.75rem; padding: .5rem 1rem;
}
.pedido__punto { background: var(--tinta-suave); border-radius: 50%; height: 9px; width: 9px; }
.pedido__estado--aceptado { background: var(--amarillo-suave); }
.pedido__estado--aceptado .pedido__punto { background: var(--marca-texto); }
.pedido__estado--pagado .pedido__punto { background: #1a8a3d; }
.pedido__estado--rechazado .pedido__punto,
.pedido__estado--cancelado .pedido__punto { background: var(--rojo); }
.pedido__texto { font-size: 1.08rem; line-height: 1.6; }
.pedido__texto--espera { color: var(--tinta-suave); font-size: .95rem; }
.pedido__mensaje {
    background: var(--papel); border-radius: 4px; margin: 2rem 0; padding: 1.5rem;
}
.pedido__mensaje h2 { font-size: .8rem; letter-spacing: .08em; margin: 0 0 .6rem; text-transform: uppercase; }
.pedido__mensaje p { margin: 0; }
.pedido__resumen {
    border-top: 1px solid var(--linea); display: grid; gap: .5rem 1.5rem; margin: 2.5rem 0 0;
    grid-template-columns: auto 1fr; padding-top: 1.5rem;
}
.pedido__resumen dt { color: var(--tinta-suave); font-size: .85rem; }
.pedido__resumen dd { font-size: .92rem; font-weight: 600; margin: 0; }
.pedido__pie { color: var(--tinta-suave); font-size: .88rem; margin-top: 2rem; }

/* -------------------------------------------------- anuncios dentro del sitio */

.anuncio-hueco { margin: 2.5rem 0; text-align: center; }
.anuncio-hueco__etiqueta {
    color: var(--tinta-suave); display: block; font-size: .64rem; font-weight: 800;
    letter-spacing: .14em; margin-bottom: .5rem; text-transform: uppercase;
}
.anuncio-hueco img { border-radius: 3px; margin: 0 auto; }
.anuncio-hueco--lateral { margin: 0 0 2.25rem; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .nota__rejilla { grid-template-columns: minmax(0, 1fr) 290px; gap: 2.5rem; }
    .columnas { grid-template-columns: minmax(0, 1fr) 290px; gap: 2.5rem; }
}

@media (max-width: 980px) {
    .nota__rejilla, .columnas { grid-template-columns: 1fr; gap: 1rem; }
    .anuncios__ficha { grid-template-columns: 1fr; gap: 2.5rem; }
    .formulario-anuncio { position: static; }
    .nota__cabecera { padding-top: 1.25rem; }
    .barra-nota, .mas-leidos { position: static; }
    .barra-nota { margin-top: 3rem; }
    .columnas__lateral { padding-top: 0; }
    .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .apertura { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
    .apertura__seguidas { margin-top: 1.75rem; }
    .franja-boletin__caja { grid-template-columns: 1fr; }

    .cabecera__fila { grid-template-columns: auto 1fr auto; }
    .cabecera__hamburguesa { display: block; }
    .cabecera__lado--izq .redes { display: none; }
    /* La lupa se queda: ahora despliega el buscador ahí mismo y en móvil es
       justo donde más falta hace. El que se va es comprar publicidad, que no
       cabe y se repite dentro del menú. */
    .boton-publicidad { display: none; }
    .marca__logo { max-height: 44px; }
    .boton-donar { padding: .5rem .9rem; font-size: .74rem; }

    .navegacion { display: none; border-top: 0; }
    .navegacion.abierto { display: block; border-top: 1px solid var(--linea); }
    .navegacion.abierto .navegacion__fila { flex-direction: column; align-items: stretch; gap: 0; }
    .navegacion.abierto .navegacion__enlace {
        padding: .95rem .25rem; border-bottom: 1px solid var(--linea); font-size: .9rem;
    }
    .navegacion.abierto .navegacion__enlace::after { display: none; }
    .navegacion.abierto .navegacion__publicidad {
        display: block; margin: 1rem .25rem .25rem; padding: .8rem; text-align: center;
        border: 2px solid var(--tinta); border-radius: 100px; font-weight: 800;
        text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
    }
    .navegacion.abierto .navegacion__donar {
        display: block; margin: 1rem .25rem; padding: .8rem; text-align: center;
        background: var(--donar); color: #fff; font-weight: 800; text-transform: uppercase;
        letter-spacing: .06em; font-size: .82rem; border-radius: 100px;
    }

    .figura--ancha { margin-left: 0; margin-right: 0; }
    .figura--ancha img { max-height: 20rem; }
}

@media (max-width: 560px) {
    body { font-size: 15px; }
    .contenedor { padding: 0 1.15rem; }
    .rejilla { gap: 2rem 1.25rem; }
    .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
    .nota__cuerpo { font-size: 1.08rem; }
    .nota__portada { padding: 0; }
    .apertura__seguidas { grid-template-columns: 1fr; gap: 1.25rem; }
    .anuncios__portada { padding: 3rem 0 2.5rem; }
    /* La de redes no aparece aquí: es flexible y se apila sola. */
    .anuncios__rejilla { grid-template-columns: 1fr; }
    .ficha__columnas { grid-template-columns: 1fr; }
    .ficha__incluye { border-right: 0; border-bottom: 1px solid var(--linea); }
    .ficha__cifras { gap: 2rem; }
    .formulario-anuncio { padding: 1.5rem; }
    .formulario-anuncio__fila { grid-template-columns: 1fr; gap: 0; }
    .ficha-datos { gap: 1.5rem; }
    .anuncios__cierre { padding: 1.75rem; }
    .ficha-autor__avatar { width: 84px; height: 84px; }
    .compartir--ancho { flex-direction: column; align-items: flex-start; gap: .75rem; }

    /* En el móvil el pie va a una sola columna: centrado se lee como un
       cierre, y alineado a la izquierda parecía una lista rota. */
    .pie { text-align: center; }
    .pie__cima { flex-direction: column; align-items: center; gap: 1.5rem; }
    .pie__donar { width: 100%; flex-direction: column; align-items: center; }
    .pie__donar-texto { text-align: center; }
    .boton-donar--grande { width: 100%; justify-content: center; }
    .redes--pie { justify-content: center; }
    .pie__rejilla { grid-template-columns: 1fr; gap: 0; }
    .pie__columna { padding-top: 1.5rem; }
    .pie__columna:first-child { border-top: 0; padding-top: 0; }
    .pie__columna ul { align-items: center; }
    .pie__columna ul.etiquetas--pie { justify-content: center; }
    .pie__descripcion { margin-left: auto; margin-right: auto; }
    .pie__legal-fila { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

@media print {
    .cabecera, .pie, .franja-boletin, .compartir, .relacionados, .franja-video,
    .barra-nota, .apoyo-nota { display: none; }
    body { font-size: 12pt; }
}

/* ---------------------------------------------------------------- contacto */

/* La página tenía un formulario suelto sobre blanco. Ahora abre con una franja
   de color de marca —el mismo amarillo, siempre como fondo con texto negro— y
   el formulario va centrado en columna de lectura, sobre papel, para que se
   note que es una invitación y no un trámite. */
.contacto__portada { background: var(--acento); color: var(--tinta-marca); padding: 4rem 0 3.5rem; }
.contacto__portada-caja { max-width: 46rem; text-align: center; margin: 0 auto; }
.contacto__antetitulo {
    font-size: .76rem; font-weight: 800; letter-spacing: .18em;
    margin: 0 0 .75rem; text-transform: uppercase;
}
.contacto__titulo { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.035em; line-height: 1.04; margin: 0; }
.contacto__entrada { font-size: 1.1rem; line-height: 1.55; margin: 1.1rem auto 0; max-width: 38rem; }

.contacto__cuerpo { max-width: 46rem; padding-bottom: 4rem; }

.contacto__motivos {
    display: grid; gap: 1.25rem; list-style: none; margin: 2.5rem 0 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.contacto__motivos li {
    background: var(--papel); border-radius: var(--radio); padding: 1.1rem 1.2rem;
    font-size: .92rem; line-height: 1.5; color: var(--tinta-media);
}
.contacto__motivos strong { color: var(--tinta); display: block; margin-bottom: .3rem; }
.contacto__motivos a { text-decoration: underline; text-underline-offset: 3px; }

.formulario-contacto { display: grid; gap: .35rem; margin: 2.5rem 0 0; }
/* align-items y align-content en start, las dos. Sin ellas, la columna con
   texto de ayuda debajo estira la fila entera, y el campo de al lado —que no
   tiene ayuda— crece para rellenar el hueco: «Asunto» salía trece píxeles más
   alto que los demás y arrancaba más abajo. Con las dos puestas, cada columna
   mide lo suyo y las cajas quedan alineadas. */
.formulario-contacto__fila {
    align-items: start; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;
}
.formulario-contacto__fila > div { align-content: start; display: grid; gap: .35rem; }
.formulario-contacto label {
    font-size: .78rem; font-weight: 800; letter-spacing: .06em;
    margin-top: 1rem; text-transform: uppercase;
}
.formulario-contacto__fila label { margin-top: 0; }
.formulario-contacto__opcional { color: var(--tinta-suave); font-weight: 400; text-transform: none; letter-spacing: 0; }
.formulario-contacto input, .formulario-contacto textarea {
    border: 2px solid var(--linea); border-radius: var(--radio); font: inherit;
    padding: .75rem .85rem; width: 100%; transition: border-color .15s ease;
}
.formulario-contacto input:focus, .formulario-contacto textarea:focus { border-color: var(--tinta); outline: none; }
.formulario-contacto textarea { resize: vertical; }
.formulario-contacto__ayuda { color: var(--tinta-suave); font-size: .82rem; }
.formulario-contacto__trampa { left: -9999px; position: absolute; }
.formulario-contacto button { justify-self: start; margin-top: 1.5rem; }
.formulario-contacto__legal { color: var(--tinta-suave); font-size: .84rem; margin: 1rem 0 0; }

.contacto__exito {
    background: var(--papel); border-top: 5px solid var(--acento);
    margin: 3rem 0; padding: 2.5rem; text-align: center;
}
.contacto__exito h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.contacto__exito p { color: var(--tinta-media); margin: 0 auto 1.5rem; max-width: 32rem; }
.contacto__errores {
    background: #fdeeed; border-left: 4px solid #a8251a; list-style: none;
    margin: 2rem 0 0; padding: 1rem 1.2rem;
}

@media (max-width: 560px) {
    .formulario-contacto__fila { grid-template-columns: 1fr; }
    .contacto__portada { padding: 2.5rem 0 2.25rem; }
}

/* Cuenta atrás del pie. Va junto al logo, del mismo tamaño que él, para que se
   lea como parte de la identidad del medio y no como un adorno suelto. */
.pie__identidad { align-items: center; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.cuenta-atras {
    align-items: center; display: inline-flex; gap: .6rem;
    border-left: 3px solid var(--amarillo); padding-left: .9rem;
}
.cuenta-atras__numero {
    color: var(--amarillo); font-size: 1.9rem; font-weight: 900;
    letter-spacing: -.03em; line-height: 1;
}
.cuenta-atras__texto { color: #cfd2d6; font-size: .72rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
.cuenta-atras:hover .cuenta-atras__numero { color: #fff; }
.cuenta-atras:hover .cuenta-atras__texto { color: #fff; }

/* El «volver» sobre la franja de color: negro sobre amarillo, no gris. */
.anuncios__volver--franja { color: var(--tinta-marca); margin-bottom: 1.25rem; opacity: .8; }
.anuncios__volver--franja:hover { color: var(--tinta-marca); opacity: 1; }
.ficha__subtitulo--pasos { margin-top: 2.25rem; }

/* ------------------------------------------------- aportes y cuenta de lector */

/* La página que pide plata. Los planes van arriba del todo y la explicación
   después: quien llega decidido no tiene por qué leer nada para poder pagar. */
.aportar__portada { background: var(--tinta); color: #fff; padding: 4rem 0 3.5rem; }
.aportar__portada-caja { max-width: 44rem; text-align: center; margin: 0 auto; }
.aportar__antetitulo {
    font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--amarillo); margin: 0 0 .9rem;
}
.aportar__titulo { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 1.1rem; }
.aportar__entrada { font-size: 1.12rem; line-height: 1.6; margin: 0; opacity: .9; }
.aportar__entrada strong { color: var(--amarillo); }

.aportar__aviso {
    margin: 2rem 0 0; padding: .85rem 1rem; background: var(--amarillo-suave);
    border-left: 4px solid var(--amarillo); font-weight: 600;
}
.aportar__yaestas {
    margin: 2.5rem 0 0; padding: 1.75rem; background: var(--papel);
    border-top: 5px solid var(--amarillo); text-align: center;
}
.aportar__yaestas h2 { margin: 0 0 .5rem; font-size: 1.4rem; }
.aportar__yaestas p { margin: 0 0 1.1rem; }

.aportar__planes {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    margin: 3rem 0 4rem;
}
.plan {
    display: flex; flex-direction: column; padding: 1.75rem 1.35rem;
    background: #fff; border: 2px solid var(--linea); text-align: center;
}
/* El de grandes donantes se sale del patrón a propósito: es el que financia de
   verdad y tiene que verse distinto sin parecer el plan por defecto. */
.plan--mecenas { border-color: var(--tinta); background: var(--papel); }
.plan__etiqueta {
    display: inline-block; align-self: center; margin-bottom: .8rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    background: var(--amarillo); color: var(--tinta-marca); padding: .3rem .6rem;
}
.plan--mecenas .plan__etiqueta { background: var(--tinta); color: #fff; }
.plan__nombre {
    font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tinta-suave); margin: 0 0 .6rem;
}
.plan__precio { margin: 0 0 .35rem; display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.plan__monto { font-size: 2rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.plan__moneda { font-size: .78rem; font-weight: 700; color: var(--tinta-suave); }
.plan__cada { margin: 0 0 1.35rem; font-size: .88rem; color: var(--tinta-media); }
.plan form { margin-top: auto; }
.plan__boton {
    width: 100%; padding: .8rem 1rem; border: 0; cursor: pointer;
    background: var(--tinta); color: #fff; font: inherit; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; font-size: .8rem;
}
.plan__boton:hover { background: var(--amarillo); color: var(--tinta-marca); }

.aportar__seccion {
    font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 1.35rem;
    padding-top: .9rem; border-top: 4px solid var(--tinta);
}
.aportar__beneficios, .aportar__manifiesto, .aportar__faq { margin-bottom: 3.5rem; }

/* Los beneficios son lo que convence de pagar: merecen sitio y aire, no una
   lista apretada que se lee en diagonal. */
.beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.beneficios li {
    font-size: 1rem; line-height: 1.55; color: var(--tinta-media);
    background: var(--papel); padding: 1.5rem 1.35rem; border-top: 4px solid var(--amarillo);
}
.beneficios__icono { display: block; margin-bottom: .7rem; line-height: 0; color: var(--tinta); }
.beneficios strong { display: block; color: var(--tinta); margin-bottom: .35rem; font-size: 1.14rem; letter-spacing: -.015em; }

.manifiesto__caja {
    background: var(--tinta); color: #fff; padding: 2.25rem 2rem; max-width: 52rem;
}
.manifiesto__caja p { font-size: 1.06rem; line-height: 1.65; margin: 0 0 1rem; opacity: .92; }
.manifiesto__caja p:last-child { margin-bottom: 0; }
.manifiesto__caja strong { color: var(--amarillo); }
.manifiesto__grande {
    font-size: 1.5rem !important; line-height: 1.3 !important; font-weight: 800;
    letter-spacing: -.02em; opacity: 1 !important; margin-bottom: 1.35rem !important;
}
.aportar__subseccion { font-size: 1.15rem; margin: 2.25rem 0 .9rem; letter-spacing: -.02em; }
.manifiesto { margin: 0 0 0 1.15rem; max-width: 46rem; }
.manifiesto li { margin-bottom: .5rem; font-size: 1.02rem; line-height: 1.5; }

/* Las preguntas frecuentes se leen cuando ya se está dudando: cuanto más fácil
   sea abrir la que le preocupa a cada quien, menos gente se va sin aportar. */
.faq { border: 1px solid var(--linea); margin-bottom: .6rem; background: #fff; }
.faq summary {
    cursor: pointer; font-weight: 700; font-size: 1.06rem; padding: 1.05rem 1.25rem;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--tinta-suave); }
.faq[open] summary { border-bottom: 1px solid var(--linea); }
.faq[open] summary::after { content: '−'; }
.faq summary:hover { background: var(--papel); }
.faq p { margin: 0; padding: 1.1rem 1.25rem; color: var(--tinta-media); line-height: 1.65; font-size: 1rem; }

/* A quién le llega la plata, con cara. */
.aportar__quien { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; }
.aportar__cara {
    flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
    background: var(--amarillo); color: var(--tinta-marca); display: flex;
    align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 900;
}
.aportar__cara img { width: 100%; height: 100%; object-fit: cover; }
.aportar__quien-texto { margin: 0; font-size: 1rem; line-height: 1.5; text-align: left; max-width: 24rem; opacity: .92; }

.aportar__yatengo { text-align: center; padding-bottom: 3rem; color: var(--tinta-media); }

/* ------------------------------------------------------------- pantalla de pago */

.pagar { max-width: 40rem; padding: 3rem 1.5rem 4rem; }
.pagar__titulo { font-size: 2.2rem; letter-spacing: -.03em; margin: 0 0 .5rem; }
.pagar__entrada { color: var(--tinta-media); margin: 0 0 2rem; }
.pagar__resumen { background: var(--papel); padding: 1.35rem 1.5rem; margin-bottom: 2rem; }
.pagar__resumen dl { margin: 0; }
.pagar__resumen dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.pagar__resumen dt { color: var(--tinta-suave); font-size: .88rem; }
.pagar__resumen dd { margin: 0; font-weight: 700; text-align: right; }
.pagar__monto { font-size: 1.25rem; }
.pagar__manual { border-top: 4px solid var(--amarillo); padding-top: 1.35rem; }
.pagar__manual h2 { font-size: 1.25rem; margin: 0 0 .7rem; }
.pagar__pasos { margin: 1.25rem 0 1.75rem 1.15rem; }
.pagar__pasos li { margin-bottom: .8rem; line-height: 1.55; }
.pagar__whatsapp {
    display: inline-block; padding: .85rem 1.4rem; background: #25d366; color: #04310f;
    font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
}
.pagar__nota { margin-top: 1.5rem; font-size: .92rem; color: var(--tinta-media); }
.pagar__volver { margin-top: 2.5rem; font-size: .92rem; }

/* --------------------------------------------------------- registro y acceso */

.cuenta { padding: 3rem 1.5rem 4rem; }
.cuenta__caja { max-width: 38rem; margin: 0 auto; }
.cuenta__caja--corta { max-width: 26rem; }
.cuenta__paso {
    font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--marca-texto); margin: 0 0 .6rem;
}
.cuenta__titulo { font-size: 2.1rem; letter-spacing: -.03em; margin: 0 0 .6rem; }
.cuenta__entrada { color: var(--tinta-media); margin: 0 0 2rem; line-height: 1.55; }
.cuenta__errores {
    list-style: none; margin: 0 0 1.5rem; padding: .9rem 1.1rem;
    background: #fdecea; border-left: 4px solid #a8251a; color: #7d1a12; font-weight: 600;
}
.cuenta__errores li + li { margin-top: .35rem; }
/* Cada campo se alinea arriba: si uno lleva texto de ayuda y el de al lado no,
   sin esto el vecino crece para rellenar la fila y las cajas quedan desiguales. */
.cuenta__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start; }
.cuenta__form .campo { margin: 0 0 1.15rem; display: flex; flex-direction: column; gap: .35rem; }
.cuenta__form label { font-size: .84rem; font-weight: 700; }
.cuenta__form input, .cuenta__form textarea {
    font: inherit; padding: .7rem .85rem; border: 2px solid var(--linea-fuerte);
    background: #fff; width: 100%;
}
.cuenta__form input:focus, .cuenta__form textarea:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.campo__ayuda { font-size: .78rem; color: var(--tinta-suave); }
.campo__opcional { font-weight: 400; color: var(--tinta-suave); }
.cuenta__boton {
    padding: .9rem 1.6rem; border: 0; cursor: pointer; background: var(--tinta); color: #fff;
    font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
}
.cuenta__boton:hover { background: var(--amarillo); color: var(--tinta-marca); }
.cuenta__legal { font-size: .8rem; color: var(--tinta-suave); margin: 1.1rem 0 0; line-height: 1.5; }
.cuenta__alterna { margin-top: 2rem; text-align: center; color: var(--tinta-media); }
/* La trampa para robots: fuera de la pantalla, no oculta con display:none, que
   algunos robots detectan y saltan. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- panel del lector */

.cuenta-panel { max-width: 46rem; padding: 3rem 1.5rem 4rem; }
.cuenta-panel__cabecera { border-bottom: 4px solid var(--tinta); padding-bottom: 1rem; margin-bottom: 2rem; }
.cuenta-panel__cabecera h1 { font-size: 2.1rem; letter-spacing: -.03em; margin: 0 0 .3rem; }
.cuenta-panel__hola { margin: 0; color: var(--tinta-media); }
.cuenta-panel__arroba { color: var(--marca-texto); font-weight: 700; }
.cuenta-panel__ok {
    padding: .85rem 1.1rem; background: #e8f6ea; border-left: 4px solid #14691f;
    color: #14691f; font-weight: 600; margin: 0 0 1.5rem;
}
.cuenta-panel__bloque { margin-bottom: 3rem; }
.cuenta-panel__bloque h2 {
    font-size: 1.25rem; margin: 0 0 1.1rem; padding-top: .8rem;
    border-top: 2px solid var(--linea);
}
.cuenta-panel__vacio { color: var(--tinta-media); line-height: 1.6; }
.cuenta-panel__datos { margin: 0 0 1.5rem; }
.cuenta-panel__datos > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.cuenta-panel__datos dt { color: var(--tinta-suave); font-size: .9rem; }
.cuenta-panel__datos dd { margin: 0; font-weight: 700; text-align: right; }
.pastilla {
    display: inline-block; padding: .2rem .6rem; font-size: .74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; background: var(--papel);
}
.pastilla--ok { background: #e8f6ea; color: #14691f; }
.pastilla--aviso { background: var(--amarillo-suave); color: #7a5c00; }
.cuenta-panel__cancelar {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px;
}
.cuenta-panel__cancelar:hover { color: #a8251a; }
.tabla-cobros { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-cobros th, .tabla-cobros td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--linea); }
.tabla-cobros th { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); }
.cuenta-panel__salir { margin-top: 1rem; }
.cuenta-panel__salir button {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .aportar__planes { grid-template-columns: repeat(2, 1fr); }
    .beneficios { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .aportar__planes { grid-template-columns: 1fr; }
    .beneficios { grid-template-columns: 1fr; }
    .cuenta__fila { grid-template-columns: 1fr; }
    .pagar__resumen dl > div { flex-direction: column; gap: .1rem; }
    .pagar__resumen dd { text-align: left; }
    .cuenta-panel__datos > div { flex-direction: column; gap: .1rem; }
    .cuenta-panel__datos dd { text-align: left; }
}

/* El acceso a la comunidad se separa de las secciones: es otra cosa. */
.navegacion__enlace--cuenta { margin-left: auto; color: var(--tinta-suave); }
.navegacion__enlace--cuenta:hover { color: var(--marca-texto); }
/* Reserva el hueco de la etiqueta en los planes que no llevan ninguna. */
.plan__etiqueta--hueca { visibility: hidden; }

/* Las dos formas de aportar. La recurrente va primero y más grande: es la que
   sostiene el portal; la de una vez está para quien no da su tarjeta. */
.pagar__opciones { display: flex; flex-direction: column; gap: 1.75rem; }
.pagar__principal { width: 100%; padding: 1.05rem 1rem; font-size: .9rem; }
.pagar__secundario {
    width: 100%; padding: .85rem 1rem; cursor: pointer; font: inherit; font-weight: 700;
    background: none; border: 2px solid var(--linea-fuerte); color: var(--tinta);
}
.pagar__secundario:hover { border-color: var(--tinta); }
.pagar__pie { display: block; margin-top: .5rem; font-size: .82rem; color: var(--tinta-suave); line-height: 1.5; }

/* ------------------------------------------------------------- la comunidad */

.comunidad-nav { background: var(--tinta); color: #fff; }
.comunidad-nav__fila { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 1.5rem; flex-wrap: wrap; }
.comunidad-nav__enlace {
    color: #fff; font-size: .84rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; opacity: .75;
}
.comunidad-nav__enlace:hover, .comunidad-nav__enlace.activo { opacity: 1; color: var(--amarillo); }
.comunidad-nav__globo {
    display: inline-block; background: var(--rojo); color: #fff; border-radius: 100px;
    padding: .05rem .45rem; font-size: .68rem; margin-left: .25rem; vertical-align: middle;
}
.comunidad-nav__nivel {
    margin-left: auto; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; padding: .25rem .6rem; background: rgba(255, 255, 255, .14);
}
.comunidad-nav__nivel--aporta { background: var(--amarillo); color: var(--tinta-marca); }

.comunidad { max-width: 46rem; padding: 2.5rem 1.5rem 4rem; }
.comunidad--estrecha { max-width: 40rem; }
.comunidad__titulo { font-size: 1.9rem; letter-spacing: -.03em; margin: 0 0 1.5rem; }
.comunidad__llamada {
    padding: .9rem 1.1rem; background: var(--amarillo-suave); border-left: 4px solid var(--amarillo);
    margin: 0 0 1.75rem; font-size: .95rem; line-height: 1.55;
}
.comunidad__vacio { color: var(--tinta-suave); padding: 2rem 0; text-align: center; }
.comunidad__volver { margin: 0 0 1.25rem; font-size: .9rem; }

.publicar { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
.publicar textarea {
    font: inherit; padding: .85rem 1rem; border: 2px solid var(--linea-fuerte);
    background: #fff; width: 100%; resize: vertical;
}
.publicar textarea:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.publicar__boton {
    align-self: flex-start; padding: .7rem 1.5rem; border: 0; cursor: pointer;
    background: var(--tinta); color: #fff; font: inherit; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; font-size: .78rem;
}
.publicar__boton:hover { background: var(--amarillo); color: var(--tinta-marca); }
.publicar--respuesta { margin: 1.5rem 0 2rem; }

.muro { display: flex; flex-direction: column; gap: 1.25rem; }
.muro--respuestas { padding-left: 1.5rem; border-left: 3px solid var(--linea); }

.publi { border: 1px solid var(--linea); padding: 1.15rem 1.25rem; background: #fff; }
/* Lo del portal se distingue de un vistazo: es lo que la gente viene a leer. */
.publi--equipo { border-left: 5px solid var(--amarillo); background: var(--papel); }
.publi__cabecera { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.publi__avatar {
    flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.publi--equipo .publi__avatar { background: var(--amarillo); color: var(--tinta-marca); }
.publi__quien { min-width: 0; flex: 1; }
.publi__nombre { margin: 0; font-weight: 700; font-size: .98rem; }
.publi__meta { margin: .1rem 0 0; font-size: .78rem; color: var(--tinta-suave); }
.publi__insignia {
    display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; background: var(--amarillo); color: var(--tinta-marca);
    padding: .12rem .4rem; vertical-align: middle;
}
.publi__insignia--equipo { background: var(--tinta); color: #fff; }
.publi__cerrada { font-size: .7rem; font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }
.publi__cuerpo { line-height: 1.6; overflow-wrap: anywhere; }
.publi__pie { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; }
.publi__accion {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: .84rem; color: var(--tinta-suave);
}
.publi__accion:hover { color: var(--marca-texto); }
.publi__accion--activa { color: var(--marca-texto); font-weight: 700; }
.publi__accion--borrar { margin-left: auto; }
.publi__accion--borrar:hover { color: #a8251a; }

.perfil { display: flex; gap: 1.25rem; align-items: flex-start; padding-bottom: 1.75rem;
    border-bottom: 3px solid var(--tinta); margin-bottom: 2rem; }
.perfil__avatar {
    flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--tinta); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.6rem;
}
.perfil__nombre { font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 .2rem; }
.perfil__arroba { margin: 0; color: var(--marca-texto); font-weight: 700; font-size: .9rem; }
.perfil__bio { margin: .6rem 0 0; line-height: 1.55; }
.perfil__desde { margin: .5rem 0 0; font-size: .8rem; color: var(--tinta-suave); }
.perfil__accion {
    margin-left: auto; padding: .55rem 1rem; border: 2px solid var(--tinta);
    font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem;
    white-space: nowrap;
}
.perfil__accion:hover { background: var(--tinta); color: #fff; }

.chat-fila {
    display: flex; gap: .85rem; align-items: center; padding: .9rem 0;
    border-bottom: 1px solid var(--linea); color: inherit;
}
.chat-fila--portal { border-bottom: 3px solid var(--tinta); }
.chat-fila__avatar {
    flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--papel);
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.chat-fila--portal .chat-fila__avatar { background: var(--amarillo); color: var(--tinta-marca); }
.chat-fila__texto { flex: 1; min-width: 0; }
.chat-fila__texto strong { display: block; font-size: .96rem; }
.chat-fila__pie {
    display: block; font-size: .84rem; color: var(--tinta-suave); margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-fila__fecha { font-size: .74rem; color: var(--tinta-suave); white-space: nowrap; }

.chat { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.chat__burbuja {
    max-width: 80%; padding: .7rem .95rem; background: var(--papel);
    line-height: 1.5; overflow-wrap: anywhere;
}
/* Los míos a la derecha y en oscuro: es la convención de cualquier mensajería y
   ahorra tener que etiquetar quién escribió cada cosa. */
.chat__burbuja--mia { align-self: flex-end; background: var(--tinta); color: #fff; }
.chat__hora { display: block; margin-top: .3rem; font-size: .7rem; opacity: .65; }

@media (max-width: 560px) {
    .comunidad-nav__fila { gap: 1rem; }
    .comunidad-nav__nivel { margin-left: 0; }
    .perfil { flex-wrap: wrap; }
    .perfil__accion { margin-left: 0; }
}

/* ------------------------------------------------------------ canal de vídeo */

.canal__portada { background: var(--tinta); color: #fff; padding: 2.5rem 0; margin-bottom: 2.5rem; }
.canal__cabecera { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.canal__avatar {
    flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
    background: var(--amarillo); color: var(--tinta-marca);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; font-weight: 900;
}
.canal__avatar img { width: 100%; height: 100%; object-fit: cover; }
.canal__datos { flex: 1; min-width: 15rem; }
.canal__titulo { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.035em; margin: 0 0 .3rem; }
.canal__meta { margin: 0 0 .5rem; font-size: .88rem; opacity: .75; }
.canal__lema { margin: 0; font-size: .98rem; line-height: 1.55; opacity: .9; max-width: 44rem; }

/* El último vídeo abre la página, como en un canal: se ve y se reproduce sin
   tener que entrar a ningún sitio. */
.canal__destacado { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2rem; margin-bottom: 3.5rem; }
.canal__reproductor .yt-diferido, .canal__reproductor iframe { width: 100%; aspect-ratio: 16 / 9; }
.canal__ficha { display: flex; flex-direction: column; justify-content: center; }
.canal__etiqueta {
    font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--rojo); margin: 0 0 .6rem;
}
.canal__destacado-titulo { font-size: 1.7rem; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 .8rem; }
.canal__pie { display: flex; gap: .6rem; align-items: center; font-size: .82rem; color: var(--tinta-suave); margin: 0 0 1.1rem; }
.canal__seccion { font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--marca-texto); }
.canal__leer { font-weight: 800; font-size: .88rem; }
.canal__leer:hover { color: var(--marca-texto); }

.canal__seccion-titulo {
    font-size: 1.35rem; letter-spacing: -.02em; margin: 0 0 1.5rem;
    padding-top: .9rem; border-top: 4px solid var(--tinta);
}
.canal__parrilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem 1.25rem; margin-bottom: 3rem; }

.videocard__figura {
    display: block; position: relative; aspect-ratio: 16 / 9; background: var(--papel);
    overflow: hidden; margin-bottom: .7rem;
}
.videocard__figura img { width: 100%; height: 100%; object-fit: cover; }
.videocard__sinimagen {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--linea-fuerte);
}
/* El triángulo de play, pequeño y en la esquina: en la parrilla, uno grande en
   el centro tapa justo la cara de quien habla. */
.videocard__play {
    position: absolute; left: .5rem; bottom: .5rem; width: 30px; height: 22px;
    border-radius: 5px; background: rgba(0, 0, 0, .72);
}
.videocard__play::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
    border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    transform: translateX(1px);
}
.videocard__figura:hover .videocard__play { background: var(--amarillo); }
.videocard__figura:hover .videocard__play::after { border-left-color: var(--tinta-marca); }
.videocard__titulo { font-size: 1rem; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 .35rem; }
.videocard__pie { display: flex; gap: .5rem; align-items: center; font-size: .76rem; color: var(--tinta-suave); margin: 0; }
.videocard__marca { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--marca-texto); }

@media (max-width: 1000px) {
    .canal__parrilla { grid-template-columns: repeat(3, 1fr); }
    .canal__destacado { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 700px) {
    .canal__parrilla { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
    .canal__avatar { flex-basis: 68px; width: 68px; height: 68px; font-size: 1.7rem; }
}

@media (max-width: 460px) {
    .canal__parrilla { grid-template-columns: 1fr; }
}

/* Aviso de publicaciones nuevas: aparece pegado arriba para que se vea sin
   estorbar la lectura de lo que ya se estaba leyendo. */
.muro__nuevas {
    position: sticky; top: .75rem; z-index: 5; display: block; margin: 0 auto 1rem;
    padding: .55rem 1.2rem; border: 0; border-radius: 100px; cursor: pointer;
    background: var(--tinta); color: #fff; font: inherit; font-weight: 700; font-size: .88rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.muro__nuevas:hover { background: var(--amarillo); color: var(--tinta-marca); }
.muro__nuevas[hidden] { display: none; }
/* El avatar es un enlace al perfil, como el nombre: en X se pincha ahí igual. */
a.publi__avatar { text-decoration: none; }
a.publi__avatar:hover { background: var(--amarillo); color: var(--tinta-marca); }
.perfil__accion--escribir { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.perfil__accion--escribir:hover { background: var(--amarillo); color: var(--tinta-marca); border-color: var(--amarillo); }
.publicar__quien { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .88rem; }
.publicar__quien select { font: inherit; padding: .45rem .6rem; border: 2px solid var(--linea-fuerte); background: #fff; }
/* Con qué identidad se publica: se puede estar en el CMS y con otra sesión de
   lector abierta, y entonces no está nada claro quién firma. */
.publicar__firma { margin: 0; font-size: .84rem; color: var(--tinta-suave); }
.publicar__firma strong { color: var(--tinta); }

/* ------------------------------------------- quién vende la publicidad */

/* No se compra pauta a un sitio web: se compra a alguien que responde por lo
   que publica. Por eso va la cara, y en una tarjeta propia: suelta debajo del
   párrafo se leía como un pie de foto. */
/* Fondo negro propio: esta portada es clara, y la tarjeta se había estilado
   como si fuera oscura —texto blanco sobre papel—, así que no se leía. */
.vendedor {
    display: flex; align-items: center; gap: 1.1rem; text-align: left;
    width: fit-content; margin: 2rem auto 0; padding: .9rem 1.75rem .9rem .9rem;
    background: var(--tinta); color: #fff; border-radius: 100px;
}
.vendedor__cara {
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
    background: var(--amarillo); color: var(--tinta-marca); display: flex;
    align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 900;
}
.vendedor__cara img { width: 100%; height: 100%; object-fit: cover; }
.vendedor__datos { display: flex; flex-direction: column; gap: .1rem; }
.vendedor__etiqueta {
    font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--amarillo);
}
.vendedor__nombre { font-size: 1.25rem; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.vendedor__nota { font-size: .84rem; opacity: .8; color: #fff; }

.anuncios__redes { margin-bottom: 3.5rem; }
.redes-pauta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.redes-pauta__tarjeta {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem 1.25rem;
    border: 2px solid var(--linea); background: #fff; color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.redes-pauta__tarjeta:hover { border-color: var(--tinta); transform: translateY(-2px); }
.redes-pauta__icono { color: var(--tinta); }
.redes-pauta__nombre { font-weight: 800; font-size: 1.05rem; }
.redes-pauta__ir { font-size: .82rem; color: var(--tinta-suave); font-weight: 700; }
.redes-pauta__tarjeta:hover .redes-pauta__ir { color: var(--marca-texto); }

/* El precio no se publica: se habla. Se dice así, no con un hueco vacío. */
.ficha__precio--hablado { color: var(--marca-texto); }

@media (max-width: 760px) {
    .redes-pauta { grid-template-columns: repeat(2, 1fr); }
    .anuncios__quien-texto { text-align: center; }
}
@media (max-width: 460px) {
    .redes-pauta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .aportar__quien-texto { text-align: center; }
    .manifiesto__caja { padding: 1.5rem 1.35rem; }
    .manifiesto__grande { font-size: 1.25rem !important; }
}
/* Salto al panel desde la barra de la comunidad, sólo para el equipo. */

/* --------------------------------------------------- foto de perfil del lector */

.foto-perfil { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.foto-perfil__actual {
    flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
    background: var(--tinta); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 2.2rem; font-weight: 900;
}
.foto-perfil__actual img { width: 100%; height: 100%; object-fit: cover; }
.foto-perfil__acciones { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: .75rem; }
.foto-perfil__elegir {
    display: inline-block; padding: .65rem 1.2rem; background: var(--tinta); color: #fff;
    font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem;
    cursor: pointer;
}
.foto-perfil__elegir:hover { background: var(--amarillo); color: var(--tinta-marca); }
/* El campo de archivo se esconde y lo dispara la etiqueta: el control nativo es
   feo y distinto en cada navegador. */
.foto-perfil__acciones input[type="file"] { position: absolute; left: -9999px; }

/* Los avatares con foto: la imagen llena el círculo. */
.publi__avatar img, .perfil__avatar img, .canal__avatar img, .chat-fila__avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.publi__avatar, .perfil__avatar, .chat-fila__avatar { overflow: hidden; }
@media (max-width: 560px) {
    .vendedor { flex-direction: column; text-align: center; border-radius: 14px; padding: 1.25rem; }
    .vendedor__datos { align-items: center; }
}

/* ------------------------------------------ los mensajes del lector, en uno */

/* Lista y conversación en la misma pantalla. Antes había que entrar a una
   lista, elegir, cargar otra página y volver atrás para cambiar de
   interlocutor: nadie usa así los mensajes. */
.buzon-lector {
    display: grid; grid-template-columns: 17rem minmax(0, 1fr);
    border: 1px solid var(--linea); background: #fff; min-height: 28rem;
}
.buzon-lector__lista { border-right: 1px solid var(--linea); overflow-y: auto; max-height: 30rem; }
.buzon-lector__chat {
    display: flex; gap: .7rem; align-items: center; padding: .85rem .9rem;
    border-bottom: 1px solid var(--linea); color: inherit;
}
.buzon-lector__chat:hover { background: var(--papel); }
.buzon-lector__chat--abierto { background: var(--papel); box-shadow: inset 3px 0 0 var(--tinta); }
.buzon-lector__avatar {
    flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--papel);
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.buzon-lector__avatar--portal { background: var(--amarillo); color: var(--tinta-marca); }
.buzon-lector__avatar .icono, .videocard__sinimagen .icono { vertical-align: 0; }
.buzon-lector__texto { flex: 1; min-width: 0; }
.buzon-lector__texto strong { display: block; font-size: .92rem; }
.buzon-lector__pie {
    display: block; font-size: .8rem; color: var(--tinta-suave); margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buzon-lector__hilo { display: flex; flex-direction: column; padding: 1rem 1.1rem; }
.buzon-lector__cabecera {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--linea); padding-bottom: .8rem; margin-bottom: 1rem;
}
.buzon-lector__cabecera strong { font-size: 1.05rem; }
.buzon-lector__perfil { font-size: .82rem; font-weight: 700; color: var(--marca-texto); }
.buzon-lector__hilo .chat { flex: 1; overflow-y: auto; max-height: 22rem; margin-bottom: 1rem; padding-right: .35rem; }
.buzon-lector__responder { display: flex; gap: .6rem; align-items: flex-start; }
.buzon-lector__responder textarea {
    flex: 1; font: inherit; padding: .6rem .75rem; border: 2px solid var(--linea-fuerte); background: #fff;
}
.buzon-lector__responder .publicar__boton { align-self: stretch; }

@media (max-width: 760px) {
    .buzon-lector { grid-template-columns: 1fr; }
    .buzon-lector__lista { border-right: 0; border-bottom: 1px solid var(--linea); max-height: 12rem; }
}