/* ============================================================
   Revista — La Hora del Perito
   Sistema de maquetación por hoja tamaño Carta (216mm x 279mm).
   Pensado para funcionar igual en el lector web y en el PDF (mPDF):
   evita flexbox/grid modernos, usa floats/columnas/box model clásico.
   ============================================================ */

/* Nota: sin variables CSS (var()) a propósito -- mPDF (el generador de PDF)
   no las soporta y las ignora en silencio, así que todos los colores/fuentes
   van con su valor literal directo en cada regla. */

/* Tipografías auto-hospedadas (assets/fonts/) -- los mismos archivos se
   registran en mPDF (includes/revista_pdf.php), así que el navegador y el
   PDF usan exactamente las mismas fuentes, sin depender de Google Fonts. */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; src: url('../fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; src: url('../fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; src: url('../fonts/Inter-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; src: url('../fonts/Inter-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: italic; src: url('../fonts/Inter-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: italic; src: url('../fonts/Inter-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: normal; src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: italic; src: url('../fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 800; font-style: normal; src: url('../fonts/PlayfairDisplay-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 900; font-style: normal; src: url('../fonts/PlayfairDisplay-Black.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 900; font-style: italic; src: url('../fonts/PlayfairDisplay-BlackItalic.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-weight: 400; font-style: normal; src: url('../fonts/Oswald-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-weight: 700; font-style: normal; src: url('../fonts/Oswald-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Merriweather'; font-weight: 400; font-style: normal; src: url('../fonts/Merriweather-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Merriweather'; font-weight: 400; font-style: italic; src: url('../fonts/Merriweather-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Merriweather'; font-weight: 700; font-style: normal; src: url('../fonts/Merriweather-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Merriweather'; font-weight: 700; font-style: italic; src: url('../fonts/Merriweather-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: italic; src: url('../fonts/Roboto-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; src: url('../fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: italic; src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype'); }

/* ── Hoja (página) ─────────────────────────────────────────── */
.rv-hoja {
    width: 216mm;
    max-width: 100%;
    aspect-ratio: 216 / 279;
    margin: 0 auto 28px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 146, .14);
    position: relative;
    overflow: hidden;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    color: #1c1e21;
}
.rv-hoja * { box-sizing: border-box; }
.rv-hoja img { max-width: 100%; display: block; }
/* Imagen sin subir todavía (sin src o vacío) -- se ve como un placeholder
   intencional en vez de un ícono de imagen rota. Solo aplica en el editor
   del admin (en la web/PDF publicados ya debería tener src siempre). */
.rv-hoja img:not([src]), .rv-hoja img[src=""] {
    min-height: 30mm; background: #eef0f4; border: 2px dashed #b7bccc;
}

/* Wrapper con margen interior, para hojas de texto (no a sangre). El padding
   inferior no es un margen decorativo cualquiera: es justo el lugar donde
   vive .rv-pie (ver más abajo) -- como .rv-pie es un hermano de este div, no
   un hijo, el texto nunca puede "entrarle" a ese espacio (overflow:hidden lo
   corta antes), así el pie queda garantizado sin superposición pase lo que
   pase, en vez de depender de calcular bien cuánto mide. Mismo criterio que
   usa dictamen (.art-magazine + .art-page-footer). */
.rv-hoja-pad {
    position: absolute; inset: 0;
    padding: 13mm 14mm 12mm;
    overflow: hidden;
}
/* Wrapper a sangre (imagen/color de borde a borde), para Portada/Portadilla/
   Publicidad/Contraportada. Un solo nivel de position:absolute -- mPDF no
   soporta bien varias capas superpuestas, pero un solo nivel funciona igual
   que .rv-hoja-pad. Todo lo de adentro va en flujo normal, sin más absolute. */
.rv-hoja-sangre {
    position: absolute; inset: 0;
    overflow: hidden;
}

/* ── Folio (cabecera de página, como en una revista impresa real) ──
   Se agrega solo, automáticamente, en includes/revista_tipos.php
   (revista_folio_html()) -- no hace falta escribirlo a mano en el HTML
   de ninguna hoja. No aparece en las hojas a sangre (Portada, etc). */
/* Antes era un flex (display:flex;align-items:center;justify-content:
   space-between) -- mPDF no lo soporta bien (ya confirmado varias veces
   esta sesión): en el PDF los dos lados terminaban en la misma línea pero
   SIN alinearse verticalmente entre sí (el lado con letra más grande queda
   más alto/bajo que el otro). Se cambia a una tabla de una fila, el truco
   clásico que sí funciona en mPDF (con valign="middle" como ATRIBUTO HTML
   en el <td> -- el CSS vertical-align se ignora, visto también esta
   sesión) -- y de paso funciona igual de bien en el navegador. */
.rv-folio {
    width: 100%; border-collapse: collapse;
    padding-bottom: 5px; margin-bottom: 8mm;
    border-bottom: 1.5px solid #1c1e21;
    font-family: 'Inter', Arial, sans-serif;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #1c1e21;
}
.rv-folio-izq span { margin-right: 9px; }
.rv-folio-izq span:last-child { margin-right: 0; }
.rv-folio-sep { color: #bbb; font-weight: 300; letter-spacing: 0; }
.rv-folio-logo { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; font-weight: 900; letter-spacing: 1px; color: #000092; line-height: 1; text-align: right; }

/* ── Pie de página (al final de cada hoja de lectura) ──
   Anclado con position:absolute al borde inferior de .rv-hoja (no adentro de
   .rv-hoja-pad, ver revista_render_hoja()), pegado cerca del borde físico
   real de la página -- igual que dictamen -- en vez de separado hacia
   adentro del área de texto. .rv-pie en sí sigue siendo un <div> normal
   (para que left/right calculen bien su ancho implícito en el navegador);
   adentro lleva una tabla (mismo cambio de flex a tabla que .rv-folio,
   mismo motivo -- ver revista_pie_html() en includes/revista_tipos.php). */
.rv-pie {
    position: absolute; left: 14mm; right: 14mm; bottom: 2mm;
    padding-top: 5px; border-top: 1px solid #d0d0d8;
    font-family: 'Inter', Arial, sans-serif;
    font-size: .57rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #aaa;
}
/* font-family/size/letter-spacing/uppercase repetidos acá a propósito (no
   alcanza con heredarlos de .rv-pie): dentro de WriteFixedPosHTML() (así se
   dibuja el pie, ver revista_generar_pdf()) mPDF no hereda bien esas
   propiedades desde el <div> ancestro hasta el <td> de la tabla anidada --
   probado con un PDF real, el lado derecho salía en una tipografía serif
   genérica, sin el tracking ni las mayúsculas. Declarándolas de nuevo en
   cada <td> queda a prueba de esa herencia rota. */
.rv-pie-izq { font-family: 'Inter', Arial, sans-serif; font-size: .57rem; text-transform: uppercase; letter-spacing: 1.5px; color: #000092; font-weight: 700; }
.rv-pie-der { font-family: 'Inter', Arial, sans-serif; font-size: .57rem; text-transform: uppercase; letter-spacing: 1.5px; color: #bbb; font-weight: 600; text-align: right; }

/* ── Portada ─────────────────────────────────────────────────────────────────
   La imagen de portada es el FONDO del contenedor (background-image), no una
   <img> superpuesta -- así el texto queda arriba solo, sin necesitar otra capa
   de position:absolute (que mPDF no soporta bien cuando se apilan varias). */
.rv-portada {
    background-color: #00003f; background-size: cover; background-position: center;
    color: #fff; height: 100%;
}
.rv-portada-nombre {
    text-align: center; padding-top: 10mm;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic;
    font-size: 1.8rem; text-transform: uppercase; letter-spacing: .06em;
}
.rv-portada-numero {
    text-align: center; font-size: .75rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: #ff9700;
    margin-top: 4px;
}
.rv-portada-titular {
    margin: 10mm 12mm 0; font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900; font-size: 2.4rem; line-height: 1.08; text-align: left;
}
.rv-portada-llamadas { margin: 8mm 12mm 0; padding: 0; list-style: none; }
.rv-portada-llamadas li {
    font-size: .8rem; font-weight: 700; padding: 4px 0 4px 14px; position: relative; border-top: 1px solid rgba(255,255,255,.2);
}
.rv-portada-llamadas li::before { content: '—'; position: absolute; left: 0; color: #ff9700; }

/* ── QR de Portada (opcional) -- se agrega e se mueve desde el editor del
   admin, no es algo que la IA deba escribir a mano en el HTML pegado. Un
   solo nivel de position:absolute (hermano de .rv-hoja-pad/.rv-hoja-sangre
   dentro de .rv-hoja... en este caso vive DENTRO de .rv-portada, que no
   tiene su propio position, así que ancla contra .rv-hoja-sangre -- sigue
   siendo un solo nivel real de anidamiento, lo que mPDF soporta bien). ── */
.rv-qr {
    position: absolute;
    z-index: 5; /* siempre arriba de cualquier otro elemento posicionado de la portada (foto de fondo, etc.) */
    background: #fff; padding: 0.8mm; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.rv-qr img { width: 100%; height: 100%; display: block; }

/* ── Logo de la revista en Portada (opcional) -- <img> propia, arrastrable
   igual que el QR, así se puede tener foto de fondo + logo al mismo tiempo
   sin pisarse. object-fit:contain porque el logo real puede tener cualquier
   proporción y no hay que deformarlo. ── */
.rv-logo {
    position: absolute;
    z-index: 6;
}
.rv-logo img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ── Imagen libre en Portada (opcional, se pueden agregar varias) -- igual
   mecanismo que el logo (arrastrable, redimensionable sin deformar) pero
   sin el límite de una sola. ── */
.rv-imagen-libre {
    position: absolute;
    z-index: 6;
}
.rv-imagen-libre img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ── Texto libre en Portada (título, bajada, firma, lo que sea) -- caja de
   texto posicionable, arrastrable y editable directo en la vista previa del
   editor (ver revista-hoja.php). Sin salto de línea forzado: el texto se
   acomoda solo al ancho de la caja, como cualquier editor. ── */
.rv-texto-libre {
    position: absolute;
    z-index: 7;
    cursor: text;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.15;
}

/* ── Forma libre en Portada (línea/cuadrado decorativo) -- el wrapper es
   posicionable/redimensionable (ancho y alto libres); adentro va UNA <img>
   con un SVG generado al vuelo (color, relleno/borde, redondez) -- así
   "girar" (transform:rotate en la img) funciona igual en la vista previa
   y en el PDF, algo que mPDF no soporta en un <div> con color de fondo. ── */
.rv-forma-libre {
    position: absolute;
    z-index: 7;
}
.rv-forma-libre img { display: block; width: 100%; height: 100%; }

/* ── Portadilla ──────────────────────────────────────────────────────────── */
/* background-size/position: para cuando se le pone una foto de fondo desde
   el editor (botón "Fondo") -- igual criterio que .rv-portada. */
.rv-portadilla { background-color: #fff; background-size: cover; background-position: center; height: 100%; }
.rv-portadilla-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-portadilla-nota { text-align: center; font-size: .7rem; color: #8a8a98; padding: 6mm 0; }

/* ── Créditos ──────────────────────────────────────────────── */
/* Ahora es hoja de sangre (como Portada/Portadilla) -- fondo blanco por
   default, para poder combinarlo con una foto decorativa (ej. una imagen
   libre en blanco y negro + opacidad baja) desde el editor.
   OJO: el padding/box-sizing va inline en el HTML de la hoja, no acá --
   el botón "Fondo" separa el contenido en una capa aparte (para el tinte)
   leyendo el style INLINE del contenedor raíz, y si el padding estuviera
   acá (en la clase) en vez de inline, esa capa nueva no lo heredaría y
   quedaría mal medida (se saldría de la hoja). */
.rv-creditos {
    /* "cover" (no "contain"): en la práctica la foto que se sube suele ser
       una foto normal de cuadro completo, no una composición especial con
       blanco de por medio -- "contain" la mostraba entera sin recortar,
       lo que revela bordes/objetos sueltos que "cover" recorta bien.
       Combinado con la opacidad de la foto (ver el slider del editor) el
       resultado es una foto tenue de borde a borde, sin partes sueltas. */
    background-color: #fff; background-size: cover; background-position: center; height: 100%;
    font-size: .82rem; line-height: 1.7; color: #1c1e21;
}
.rv-creditos-titulo {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic;
    color: #00003f; font-size: 1.9rem; text-align: center;
    border-top: 1.5px solid #00003f; padding-top: 14px; margin: 0 0 10mm;
}
.rv-creditos-lista { margin: 0 0 8mm; padding: 0; }
.rv-creditos-lista dt {
    font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
    color: #000092; margin-top: 10px;
}
.rv-creditos-lista dd { margin: 0; font-weight: 700; }
.rv-creditos-contacto { margin-top: 10mm; padding-top: 6mm; border-top: 1px solid #e5e5ea; font-size: .75rem; color: #4a4a55; }

/* ── Índice ────────────────────────────────────────────────── */
.rv-indice-seccion {
    font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
    color: #ff9700; margin: 14px 0 6px;
}
.rv-indice-item {
    display: block; overflow: hidden; font-size: .88rem; font-weight: 700; padding: 5px 0;
    border-bottom: 1px dotted #ccc;
}
.rv-indice-titulo { float: left; background: #fff; padding-right: 4px; }
.rv-indice-pagina { float: right; background: #fff; padding-left: 4px; color: #000092; }

/* ── Editorial ─────────────────────────────────────────────── */
.rv-editorial-kicker { text-align: center; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: #ff9700; margin-bottom: 4px; }
.rv-editorial-titulo {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 900;
    font-size: 2rem; color: #00003f; border-bottom: 3px solid #ff9700;
    padding-bottom: 8px; margin-bottom: 12px;
}
.rv-editorial-cuerpo p { font-size: .92rem; line-height: 1.75; text-align: justify; margin-bottom: 1em; }
/* Firma simple, sin foto (se mantiene como alternativa liviana). Para una
   firma CON foto, usar la tarjeta .rv-autor-bloque (la misma que Artículo)
   en su lugar -- ver revista_tipos.php, tipo 'editorial'. */
.rv-editorial-firma { margin-top: 14px; font-weight: 900; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }

/* ── Artículo / Sección Fija / base de Entrevista y Columna ──── */
.rv-articulo-kicker { text-align: center; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: #ff9700; }
.rv-articulo-titulo {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic;
    font-size: 2.75rem; line-height: 1.06; color: #00003f; text-align: center;
    border-top: 1.5px solid #00003f; margin-top: 6px; padding-top: 5mm; padding-bottom: 2px;
}
.rv-articulo-bajada {
    font-size: .95rem; line-height: 1.5; color: #4a4a55; text-align: center;
    max-width: 88%; margin: 0 auto; padding-bottom: 5mm;
    border-bottom: 1.5px solid #00003f;
}
.rv-articulo-autor {
    font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
    color: #00003f; border-top: 1px solid #000092; border-bottom: 1px solid rgba(0,0,146,.2);
    padding: 5px 0; margin: 5mm 0 10px;
}

/* ── Tarjeta de autor con foto (alternativa a .rv-articulo-autor/
   .rv-editorial-firma cuando se quiere mostrar foto + cargo, no solo el
   nombre): <div class="rv-autor-bloque"><img class="rv-autor-foto">
   <div class="rv-autor-datos">...</div></div>. Se probó como <table> con
   valign="middle" (el truco que sí funciona para folio/pie), pero eso
   exige que el HTML ya pegado por el admin/la IA use <table>, y en la
   práctica se sigue pegando la versión con <div> -- con la tabla, esa
   versión vieja quedaba sin CSS que la alinee (la foto arriba, el nombre
   abajo, partido en dos líneas). Se vuelve a <div> con FLOAT (mismo
   truco clásico que ya usa .rv-indice-item/-titulo/-pagina en este mismo
   archivo) -- funciona igual en el navegador y en mPDF, sin pedirle a
   nadie que cambie el HTML que ya pegó. El único costado es que el texto
   no queda perfectamente centrado en vertical junto a la foto (empieza
   arriba, como la foto) en vez de centrado -- mPDF no tiene una forma
   confiable de centrar así fuera de una tabla real. */
.rv-autor-bloque { width: 130mm; margin: 4mm auto 6mm; border-left: 4px solid #ff9700; background: rgba(0,0,146,.04); overflow: hidden; }
.rv-autor-foto {
    width: 17mm; height: 17mm; object-fit: cover; object-position: top center;
    float: left; display: block;
}
.rv-autor-bloque img:not([src]), .rv-autor-bloque img[src=""] {
    min-height: 17mm; border: none; float: left;
    background: linear-gradient(160deg, rgba(0,0,146,.1) 0%, rgba(0,99,218,.16) 100%);
}
.rv-autor-datos { margin-left: 17mm; padding: 3mm 4mm; }
.rv-autor-nombre {
    font-family: 'Inter', Arial, sans-serif; font-size: .75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.4px; color: #00003f; line-height: 1.25; margin: 0;
}
.rv-autor-cargo { font-size: .68rem; color: #0063da; font-weight: 400; font-style: italic; line-height: 1.4; margin: 2px 0 0; }

/* ── Imagen principal (foto grande de apertura del artículo, antes del
   cuerpo a columnas -- distinta de .rv-figura, que va DENTRO del cuerpo) ── */
.rv-figura-principal { margin: 3mm 0 1mm; }
.rv-figura-principal img { width: 100%; display: block; max-height: 58mm; object-fit: cover; }
.rv-figura-principal img:not([src]), .rv-figura-principal img[src=""] { min-height: 50mm; }
.rv-figura-principal figcaption { font-size: .68rem; color: #8a8a98; font-style: italic; margin-top: 4px; text-align: center; }

.rv-articulo-cuerpo-2, .rv-cols-2 { column-count: 2; column-gap: 8mm; column-rule: none; font-size: .85rem; line-height: 1.72; text-align: justify; hyphens: none; }
.rv-articulo-cuerpo-3, .rv-cols-3 { column-count: 3; column-gap: 6mm; column-rule: none; font-size: .8rem; line-height: 1.68; text-align: justify; hyphens: none; }
.rv-articulo-cuerpo-2 p, .rv-articulo-cuerpo-3 p, .rv-cols-2 p, .rv-cols-3 p { margin: 0 0 .8em; }
/* Sans-serif, NO itálica a propósito -- .rv-articulo-titulo (el título
   principal) ya usa Playfair Display itálica; si los subtítulos de
   sub-sección usan la misma tipografía, compiten visualmente con el título
   y todo el artículo se ve "parejo" en vez de tener una jerarquía clara.
   El borde naranja a la izquierda repite el mismo lenguaje visual que ya
   usan .rv-pull y .rv-articulo-kicker (acento naranja de marca). */
.rv-cols-2 h2, .rv-cols-3 h2, .rv-articulo-cuerpo-2 h2, .rv-articulo-cuerpo-3 h2 {
    font-family: 'Inter', Arial, sans-serif; font-weight: 800; font-style: normal;
    color: #00003f; font-size: .92rem; line-height: 1.3; margin: 14px 0 6px;
    border-left: 3px solid #ff9700; padding-left: 8px;
}
/* list-style explícito a propósito: el reset general del sitio (Tailwind)
   le saca los números/viñetas por default a TODO ol/ul -- sin esto acá,
   una lista numerada en un artículo se veía sin los "1./2." en la web
   pública (aunque sí se veían bien en las pruebas de PDF, que no cargan
   ese reset general). */
.rv-cols-2 ul, .rv-cols-2 ol, .rv-cols-3 ul, .rv-cols-3 ol { margin: 0 0 .8em; padding-left: 1.1em; }
.rv-cols-2 ol, .rv-cols-3 ol, .rv-caja ol { list-style: decimal; }
.rv-cols-2 ul, .rv-cols-3 ul, .rv-caja ul { list-style: disc; }
.rv-cols-2 li, .rv-cols-3 li { margin-bottom: 4px; }

/* No es ::first-letter a propósito -- ver revista_arreglar_dropcap() en
   includes/revista_tipos.php: la letra grande se arma con un <span> real en
   el servidor (no un pseudo-elemento CSS). Si el párrafo no arranca con una
   letra (ej. un numeral de sub-sección "2.1. ..."), esa función no agrega
   ningún span -- el párrafo queda normal, sin nada que estilar acá. */
.rv-dropcap-letra {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 3.7em; line-height: .75;
    float: left; padding-right: 6px; margin-top: 5px; color: #000092;
}
.rv-pull {
    border-left: 3px solid #ff9700; padding: 2px 0 2px 10px; margin: 8px 0;
    font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; font-size: .95rem; color: #00003f;
}
.rv-pull-full {
    column-span: all; text-align: center; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700;
    font-size: 1.15rem; color: #00003f; border-top: 1.5px solid #ff9700; border-bottom: 1.5px solid #ff9700;
    padding: 8px 6mm; margin: 10px 0;
}
.rv-caja { background: #f4f4f4; padding: 8px 10px; font-size: .78rem; line-height: 1.5; margin: 8px 0; }
.rv-dark { background: #00003f; color: #efefef; padding: 9px 12px; font-size: .78rem; line-height: 1.5; margin: 8px 0; }
.rv-figura { margin: 8px 0; }
.rv-figura img { width: 100%; }

/* Tabla de datos a todo el ancho (comparativas, matrices) -- column-span:all
   igual que .rv-pull-full, con el mismo tratamiento especial en mPDF (ver
   revista_pdf_escribir_interior_columnas()). Los <td>/<th> necesitan
   valign="top" puesto en el HTML -- mPDF ignora la propiedad CSS
   vertical-align en celdas, solo respeta el atributo. */
.rv-tabla { column-span: all; width: 100%; border-collapse: collapse; margin: 10px 0; }
.rv-tabla th {
    background: #000092; color: #fff; text-align: left; padding: 6px 10px;
    font-family: 'Inter', Arial, sans-serif; font-weight: 800; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.rv-tabla td {
    padding: 6px 10px; border-bottom: 1px solid #e2e2ea;
    font-size: .78rem; line-height: 1.45;
}
.rv-tabla td strong { color: #00003f; }
.rv-tabla tbody tr:nth-child(even) td { background: #f7f7fb; }
.rv-figura figcaption { font-size: .65rem; color: #8a8a98; font-style: italic; margin-top: 3px; }

/* ── Entrevista ────────────────────────────────────────────── */
.rv-entrevista-titulo { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic; font-size: 2rem; color: #00003f; margin-bottom: 8px; }
.rv-entrevista-perfil { overflow: hidden; margin-bottom: 10px; }
.rv-entrevista-perfil img { float: left; width: 20mm; height: 20mm; object-fit: cover; border-radius: 50%; margin-right: 8px; }
.rv-entrevista-intro { font-size: .85rem; line-height: 1.6; color: #4a4a55; margin-bottom: 10px; }
.rv-pregunta { font-weight: 900; color: #000092; font-size: .86rem; margin: 10px 0 3px; }
.rv-respuesta { font-size: .86rem; line-height: 1.65; text-align: justify; margin-bottom: 4px; }

/* ── Columna de opinión ────────────────────────────────────── */
.rv-columna-titulo { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic; font-size: 1.9rem; color: #00003f; margin-bottom: 6px; }
.rv-columna-autor { overflow: hidden; margin-bottom: 10px; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #000092; }
.rv-columna-autor img { float: left; width: 14mm; height: 14mm; object-fit: cover; border-radius: 50%; margin-right: 8px; }
.rv-columna-cuerpo { font-size: .95rem; line-height: 1.8; text-align: justify; }

/* ── Infografía ────────────────────────────────────────────── */
.rv-infografia-titulo { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic; font-size: 1.8rem; color: #00003f; margin-bottom: 10px; }
.rv-dato-grande { float: left; width: 48%; margin: 0 2% 14px 0; text-align: center; }
.rv-dato-num { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 2.4rem; color: #ff9700; }
.rv-dato-label { display: block; font-size: .72rem; font-weight: 700; color: #4a4a55; }
.rv-infografia-fuente { clear: both; font-size: .65rem; color: #8a8a98; font-style: italic; padding-top: 8px; border-top: 1px solid #eee; }

/* ── Publicidad ──────────────────────────────────────────────────────────── */
.rv-publicidad { background-color: #fff; background-size: cover; background-position: center; height: 100%; position: relative; }
.rv-publicidad img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Etiqueta fija "PUBLICIDAD" en la esquina -- automática vía ::after, ningún
   HTML que pegue el admin necesita agregarla a mano. Requisito editorial
   básico (distinguir contenido pago de contenido editorial), y de paso deja
   claro a simple vista que esa hoja es un flyer de un tercero, no un error
   de maquetación. */
.rv-publicidad::after {
    content: 'Publicidad';
    position: absolute; top: 4mm; right: 4mm; z-index: 5;
    background: rgba(0, 0, 63, .78); color: #fff;
    font-family: 'Inter', Arial, sans-serif; font-size: .55rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 2px;
}

/* ── Publicidad — Media Página (2 anuncios apilados) ────────────────────────
   Mismo criterio de sangre + etiqueta automática que .rv-publicidad, pero
   partido en 2 mitades fijas (no libres/arrastrables) -- pensado para 2
   anuncios más chicos que no justifican una página completa cada uno. */
.rv-publicidad-media { height: 100%; position: relative; }
.rv-publicidad-media > div { height: 50%; }
.rv-publicidad-media > div + div { border-top: 1mm solid #fff; }
.rv-publicidad-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-publicidad-media::after {
    content: 'Publicidad';
    position: absolute; top: 4mm; right: 4mm; z-index: 5;
    background: rgba(0, 0, 63, .78); color: #fff;
    font-family: 'Inter', Arial, sans-serif; font-size: .55rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 2px;
}

/* ── Directorio de Auspiciantes (portada de sección, a sangre) ──────────────
   Divisor visual antes de la tanda de hojas tipo Publicidad -- mismo criterio
   de fondo sólido de marca que Portada, sin folio/pie (es tipo sangre). */
.rv-directorio-auspiciantes {
    background-color: #00003f; height: 100%; color: #fff;
    text-align: center; padding-top: 115mm;
}
.rv-directorio-auspiciantes-kicker {
    font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .3em;
    color: #ff9700; margin: 0 0 8px;
}
.rv-directorio-auspiciantes-titulo {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic;
    font-size: 2.6rem; color: #fff; margin: 0 12mm;
    border-top: 1.5px solid #ff9700; border-bottom: 1.5px solid #ff9700; padding: 10px 0;
}
.rv-directorio-auspiciantes-bajada {
    font-size: .85rem; color: #c7c9e0; margin: 10mm 20mm 0; line-height: 1.6;
}
.rv-directorio-auspiciantes-cta {
    position: absolute; bottom: 20mm; left: 20mm; right: 20mm;
    font-size: .72rem; color: #8fa3e0; text-align: center; line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 8px;
}
.rv-directorio-auspiciantes-cta strong { color: #ff9700; font-weight: 800; }

/* ── Contacto / Escríbenos ─────────────────────────────────── */
.rv-contacto-medios { list-style: none; padding: 0; margin: 0 0 12mm; }
.rv-contacto-medios li { font-size: .85rem; font-weight: 700; padding: 4px 0; }
.rv-carta { border-left: 3px solid #0063da; padding-left: 10px; margin-bottom: 10mm; }
.rv-carta-texto { font-size: .82rem; font-style: italic; line-height: 1.6; margin-bottom: 4px; }
.rv-carta-firma { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #000092; }

/* ── Directorio ────────────────────────────────────────────── */
.rv-directorio-item { padding: 8px 0; border-bottom: 1px solid #eee; font-size: .82rem; }

/* ── Convocatoria ──────────────────────────────────────────── */
.rv-convocatoria-requisitos { margin: 0 0 10mm; padding-left: 18px; font-size: .85rem; line-height: 1.75; }
.rv-convocatoria-requisitos li { margin-bottom: 6px; }
.rv-convocatoria-cta {
    background: #00003f; color: #fff; padding: 8mm 10mm; border-radius: 4px; text-align: center;
    font-size: .85rem; line-height: 1.7;
}
.rv-convocatoria-cta strong { color: #ff9700; }

/* ── Colofón ───────────────────────────────────────────────── */
.rv-colofon { text-align: center; font-size: .72rem; color: #8a8a98; line-height: 1.8; }
.rv-colofon-linea { display: block; }

/* ── Contraportada ───────────────────────────────────────────────────────── */
.rv-contraportada { background-color: #00003f; background-size: cover; background-position: center; height: 100%; }
.rv-contraportada img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Impresión desde el navegador (Ctrl+P) ────────────────────
   El PDF descargable se genera aparte con mPDF (ver includes/revista_pdf.php);
   esto es solo para quien prefiera imprimir directo desde el navegador. */
@media print {
    .rv-hoja { box-shadow: none; margin: 0; width: 216mm; aspect-ratio: auto; height: 279mm; }
    .rv-hoja + .rv-hoja { page-break-before: always; }
    body { background: #fff; }
}