/* ═══════════════════════════════════════════════════════════════════════════
   Compañía Teatral del Norte · /teatraldelnorte
   Sistema propio, independiente del tema oscuro de El Mentidero: aquí es la
   compañía, no la sala. Los valores salen de diseno/sistema.md del encargo.

   MOVIMIENTO: casi ninguno, a propósito. Transiciones de color de 150 ms y
   nada más. Sin aparición al hacer scroll, sin paralaje, sin contadores.
   Esto lo abre alguien evaluando una solicitud, quizá con mala conexión.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --c-fondo:   #FBFAF6;   /* hueso, nunca blanco puro */
    --c-crema:   #F4F1E9;   /* bandas de énfasis */
    --c-tinta:   #231F20;   /* títulos, botón primario */
    --c-texto:   #3A3532;
    --c-pizarra: #55504A;   /* secundario, pies, notas */
    --c-gris:    #8C857A;
    --c-gris-2:  #9A9488;
    --c-oro:     #9A7B3F;
    /* El oro sobre hueso a 11 px no alcanza AA: por eso cualquier versalita
       va en el oro oscuro. No cambiar uno por otro. */
    --c-oro-osc: #6F5A2E;
    --c-filete:  #E4DECF;
    --c-filete-2:#C9C3B6;
    --c-foto:    #EDE8DC;
    --c-rojo:    #E2231A;   /* SÓLO la M del logo. Nunca interfaz. */

    --serif: 'Gloock', 'Times New Roman', serif;
    --texto: 'Petrona', Georgia, serif;

    --ancho:  1280px;
    --margen: 48px;
    --col:    740px;   /* columna de lectura */
    --etiq:   140px;   /* etiquetas en el margen izquierdo */
    --canal:  60px;
}

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

body.ctn {
    margin: 0;
    background: var(--c-fondo);
    color: var(--c-texto);
    font-family: var(--texto);
    font-size: 17px;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
}
.ctn a { color: var(--c-tinta); text-decoration: none; transition: color .15s; }
/* OJO: `.ctn a` pesa más que una clase suelta. Todo enlace con color propio
   se escribe `.ctn .clase`, o el color del genérico se lo come. */
.ctn a:hover { color: var(--c-oro-osc); }
.ctn img { max-width: 100%; height: auto; display: block; }

.ctn-saltar { position: absolute; left: -9999px; }
.ctn-saltar:focus { left: 8px; top: 8px; z-index: 50; background: var(--c-tinta);
    color: #fff; padding: 10px 16px; }
.ctn :focus-visible { outline: 2px solid var(--c-oro-osc); outline-offset: 3px; }

/* ── Encabezado ─────────────────────────────────────────────────────────── */
.ctn-head { border-bottom: 1px solid var(--c-filete); background: var(--c-fondo); }
.ctn-head__in { max-width: var(--ancho); margin: 0 auto; padding: 20px var(--margen);
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ctn-head__volver { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ctn-head__volver span { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-pizarra); }
.ctn-head__volver img { width: 40px; height: 40px; }
.ctn-head__filete { width: 1px; height: 34px; background: var(--c-filete); flex: 0 0 auto; }
.ctn-head__marca { font-family: var(--serif); font-size: 20px; line-height: 1.1;
    flex: 0 0 auto; white-space: nowrap; }

/* La navegación es el panel. Está escondida en todos los anchos y la abre la
   hamburguesa; el botón de Colaborar y el selector de idioma se quedan
   siempre a la vista, fuera de ella. */
.ctn-nav { display: none; order: 9; width: 100%; margin: 0;
    flex-direction: column; gap: 0;
    border-top: 1px solid var(--c-filete); padding-top: 4px; }
.ctn-head[data-menu] .ctn-nav { display: flex; }
.ctn .ctn-nav__a { padding: 13px 0; border-bottom: 1px solid var(--c-filete); font-size: 12px; }
.ctn .ctn-nav__a--on { border-bottom-color: var(--c-filete); color: var(--c-oro-osc); }

/* ── Hamburguesa ────────────────────────────────────────────────────────────
   Sólo existe en el teléfono. Arriba de 900 px no se pinta y el menú se ve
   entero: no hay dos menús distintos que mantener, es el mismo escondido. */
.ctn-hamb { display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
    background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--c-tinta); }
.ctn-hamb__rayas { display: block; width: 22px; }
.ctn-hamb__rayas span { display: block; height: 1.5px; background: currentColor;
    border-radius: 2px; transition: transform .15s, opacity .15s; }
.ctn-hamb__rayas span + span { margin-top: 5px; }
.ctn-hamb__k { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-pizarra); }
.ctn .ctn-nav__a { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-pizarra); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.ctn .ctn-nav__a:hover { color: var(--c-tinta); }
.ctn .ctn-nav__a--on { color: var(--c-tinta); border-bottom-color: var(--c-oro); }

/* ── Desplegable de Programas ───────────────────────────────────────────────
   Se abre al pasar el ratón y al tabular; el botón es para el dedo, que no
   tiene hover. Sin animación de entrada: el encargo pide movimiento mínimo. */
.ctn-nav__grupo { position: relative; display: block; width: 100%;
    padding-bottom: 10px; border-bottom: 1px solid var(--c-filete); }
.ctn-nav__grupo .ctn-nav__a { border-bottom: 0; padding-bottom: 4px; display: inline-block; }
.ctn .ctn-nav__mas { background: none; border: 0; padding: 2px 0 2px 1px; cursor: pointer;
    color: var(--c-pizarra); line-height: 0; }
.ctn .ctn-nav__mas:hover { color: var(--c-tinta); }
.ctn-nav__sub { margin: 0; padding: 4px 0 0; list-style: none; display: none; }
.ctn-nav__grupo[data-abierto] .ctn-nav__sub { display: block; }
.ctn-nav__grupo[data-abierto] .ctn-nav__mas { transform: rotate(180deg); }
.ctn .ctn-nav__sub a { display: block; padding: 7px 0 7px 16px; font-size: 13px; letter-spacing: 0;
    text-transform: none; color: var(--c-texto); line-height: 1.4; }
.ctn .ctn-nav__sub a:hover { color: var(--c-tinta); }
.ctn .ctn-nav__sub a.ctn-nav__sub-a--on { color: var(--c-oro-osc); }


/* El selector de idioma DEBE verse: media audiencia llega en inglés. */
.ctn-lang { display: flex; border: 1px solid var(--c-filete-2); border-radius: 2px;
    overflow: hidden; flex: 0 0 auto; margin-left: auto; }
.ctn .ctn-lang__a { font-size: 11px; letter-spacing: 2.4px; padding: 7px 11px; color: var(--c-pizarra);
    background: transparent; line-height: 1; }
.ctn-lang__a + .ctn-lang__a { border-left: 1px solid var(--c-filete-2); }
.ctn .ctn-lang__a--on { background: var(--c-tinta); color: var(--c-fondo); }
.ctn .ctn-lang__a--on:hover { color: var(--c-fondo); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.ctn .ctn-btn { display: inline-block; background: var(--c-tinta); color: var(--c-fondo);
    font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase;
    padding: 13px 22px; line-height: 1; border: 1px solid var(--c-tinta); }
.ctn .ctn-btn:hover { background: var(--c-fondo); color: var(--c-tinta); }
.ctn .ctn-btn--head { flex: 0 0 auto; padding: 10px 16px; font-size: 11px; letter-spacing: 2.4px;
    margin-left: auto; }
.ctn-lang + .ctn-hamb, .ctn .ctn-btn--head + .ctn-lang { margin-left: 0; }
.ctn .ctn-btn--chico { padding: 10px 18px; font-size: 11px; letter-spacing: 2.4px; }
.ctn-saber { margin: 18px 0 0; }

/* ── Estructura ─────────────────────────────────────────────────────────── */
.ctn-main { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) 90px; }

.ctn-miga { font-size: 13px; color: var(--c-pizarra); padding: 22px 0 0;
    display: flex; gap: 8px; flex-wrap: wrap; }
.ctn-miga span[aria-hidden] { color: var(--c-filete-2); }
.ctn-miga__aqui { color: var(--c-gris); }

.ctn-cab { padding: 34px 0 0; max-width: 900px; }
.ctn-cab__ojo { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-oro-osc); margin: 0 0 12px; }
.ctn-titulo { font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1.06;
    color: var(--c-tinta); margin: 0; letter-spacing: 0; }
.ctn-entradilla { font-size: 24px; line-height: 1.55; color: var(--c-texto);
    margin: 22px 0 0; max-width: 900px; }

.ctn-aviso-idioma { font-size: 13px; color: var(--c-pizarra); background: var(--c-crema);
    border-left: 2px solid var(--c-oro); padding: 12px 16px; margin: 30px 0 0; max-width: var(--col); }

/* ── Secciones con etiqueta en el margen ────────────────────────────────────
   Es el recurso que le da al sitio su aire de documento. En móvil la etiqueta
   NO desaparece: se coloca encima de su bloque. */
.ctn-sec { display: flex; gap: var(--canal); align-items: flex-start;
    padding: 40px 0 0; border-top: 1px solid var(--c-filete); margin-top: 40px; }
.ctn-sec:first-of-type { border-top: 0; }
.ctn-sec__k { flex: 0 0 var(--etiq); width: var(--etiq); margin: 6px 0 0;
    font-family: var(--texto); font-weight: 400; font-size: 11px; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--c-oro-osc); line-height: 1.6; }
.ctn-sec__c { flex: 1 1 auto; max-width: var(--col); min-width: 0; }
.ctn-suelto { max-width: var(--col); margin-top: 26px; }
.ctn--portada .ctn-suelto { max-width: 900px; }

.ctn-p { margin: 0 0 18px; }
.ctn-p:last-child { margin-bottom: 0; }
.ctn-h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.3;
    color: var(--c-tinta); margin: 34px 0 14px; }
.ctn-h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.3;
    color: var(--c-tinta); margin: 30px 0 10px; scroll-margin-top: 20px; }
.ctn-ojo { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-oro-osc); margin: 0 0 14px; }
.ctn-hr { border: 0; border-top: 1px solid var(--c-filete); margin: 32px 0; }
.ctn-lista { margin: 0 0 18px; padding-left: 20px; }
.ctn-lista li { margin-bottom: 8px; }
.ctn-flecha { color: var(--c-oro-osc); }
.ctn .ctn-flecha-a { border-bottom: 1px solid var(--c-filete-2); padding-bottom: 1px; }
.ctn .ctn-flecha-a:hover { border-bottom-color: var(--c-oro-osc); }
/* Un documento que todavía no existe se enuncia pero no se enlaza: un enlace
   roto en Transparencia le cuenta algo a un evaluador. */
.ctn-doc-pend { color: var(--c-gris); }
/* Destino invisible de un ancla que vive a media línea. El margen es para que
   el encabezado no quede pegado al borde al saltar. */
.ctn-ancla { display: block; height: 0; scroll-margin-top: 24px; }
.ctn strong { font-weight: 600; color: var(--c-tinta); }
/* Gloock no tiene cursiva ni negrita: el énfasis cambia de tamaño o de color,
   nunca de peso. La cursiva sólo existe en Petrona, para nombres de obra. */
.ctn em { font-style: italic; }

/* ── Llamadas a la acción ───────────────────────────────────────────────── */
.ctn-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 30px 0 0; }
.ctn .ctn-cta__link { font-size: 15px; border-bottom: 1px solid var(--c-filete-2); padding-bottom: 2px; }
.ctn-cta__link:hover { border-bottom-color: var(--c-oro-osc); }

/* ── Cifras ─────────────────────────────────────────────────────────────── */
.ctn-cifras { margin: 44px 0 0; border-top: 1px solid var(--c-tinta);
    border-bottom: 1px solid var(--c-filete); padding: 18px 0 20px; }
.ctn-cifras__k { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-oro-osc); margin: 0 0 12px; }
.ctn-cifras__fila { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.ctn-cifras__sep { color: var(--c-filete-2); }
.ctn-cifra b { font-family: var(--serif); font-weight: 400; font-size: 25px; color: var(--c-tinta); }
.ctn-cifra span { font-size: 16px; color: var(--c-pizarra); }
.ctn-cifras__pie { font-size: 15px; line-height: 1.65; color: var(--c-pizarra);
    margin: 16px 0 0; max-width: 820px; }

/* ── Imágenes ───────────────────────────────────────────────────────────────
   Regla del sistema: una imagen que trae su propia tipografía NO lleva título
   encima. Los carteles van completos —a media página con el título al lado, o
   a ancho completo con el título debajo—. Cruzarles el título arruina ambos. */
.ctn-lamina { margin: 34px 0 0; background: var(--c-foto); position: relative; }
.ctn-lamina img { width: 100%; }

/* Lámina con el título encima: el degradado ocupa los últimos 380 px y sólo
   ahí se apoya el texto, para que se lea sea cual sea la foto. */
/* `overflow:hidden` no es decorativo: el degradado mide 380 px y en el
   teléfono la foto mide ~250, así que se derramaba por arriba de la imagen y
   aparecía una banda gris encima del menú. Se recorta y además se le pone un
   alto relativo, para que nunca sea más alto que su propia foto. */
.ctn-lamina--titulo { margin-top: 26px; overflow: hidden; }
.ctn-lamina--titulo img { aspect-ratio: 16 / 8; object-fit: cover; }
.ctn-lamina--titulo::after { content: ""; position: absolute; inset: auto 0 0 0;
    height: min(380px, 72%);
    background: linear-gradient(rgba(20,18,17,0), rgba(20,18,17,.8)); pointer-events: none; }
.ctn-lamina__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 0 40px 36px; margin: 0; }
.ctn-lamina__ojo { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: #E0C98A; margin: 0 0 10px; }
.ctn-titulo--lamina { display: block; font-family: var(--serif); font-weight: 400;
    font-size: 74px; line-height: 1; color: #fff; max-width: 18ch; }

.ctn-cartel { margin: 0; flex: 0 0 420px; max-width: 420px; }
.ctn-cartel img { width: 100%; border: 1px solid var(--c-filete); }
.ctn-cartel-ancho { margin: 26px 0 0; background: var(--c-foto); }
/* El cartel que acompaña a la fotografía en su página: completo, a media
   página, nunca recortado ni con texto encima. */
.ctn-cartel--aparte { margin: 34px 0 0; flex: none; max-width: 380px; }
.ctn-cartel-ancho img { width: 100%; }
.ctn-vertical { flex: 0 0 300px; max-width: 300px; margin: 0; }
.ctn-vertical img { width: 100%; }

/* Cabeceras de dos columnas: el cartel o la foto vertical junto al título. */
.ctn-cab--cartel, .ctn-cab--vertical { display: flex; gap: var(--canal); align-items: flex-start;
    max-width: none; padding-top: 30px; }
.ctn-cab--cartel .ctn-cab__txt, .ctn-cab--vertical .ctn-cab__txt { flex: 1 1 auto; min-width: 0; max-width: 700px; }
.ctn-cab--bajo { padding-top: 26px; }

/* Hueco marcado: el maquetado no depende de que la imagen exista. Sustituirla
   es cambiar una línea de mb_ctn_imagenes(). */
.ctn-lamina--hueco, .ctn-cartel--hueco, .ctn-vertical--hueco {
    background: var(--c-foto); display: flex; align-items: center; justify-content: center;
    padding: 24px; text-align: center; border: 1px dashed var(--c-filete-2); }
.ctn-lamina--hueco { aspect-ratio: 16 / 7; margin-top: 30px; }
.ctn-cartel--hueco { aspect-ratio: 3 / 4; }
.ctn-vertical--hueco { aspect-ratio: 3 / 4; }
.ctn-hueco__k { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-gris); max-width: 32ch; line-height: 1.7; }

/* Tira de tres fotos al pie de cada subpágina de programa. */
.ctn-tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 54px 0 0; }
.ctn-tira--1 { grid-template-columns: 1fr; max-width: 740px; }
.ctn-tira--2 { grid-template-columns: repeat(2, 1fr); }
.ctn-tira--4 { grid-template-columns: repeat(4, 1fr); }
.ctn-tira--5 { grid-template-columns: repeat(5, 1fr); }
.ctn-tira__i figcaption { font-size: 11px; letter-spacing: .06em; color: var(--c-gris);
    margin-top: 7px; line-height: 1.5; }
.ctn-tira__i { margin: 0; background: var(--c-foto); aspect-ratio: 4 / 3; }
.ctn-tira__i img { width: 100%; height: 100%; object-fit: cover; }
/* Una pieza gráfica —un cartel, una banda— entra completa, no recortada. */
.ctn-tira__i--contener { background: var(--c-fondo); border: 1px solid var(--c-filete); }
.ctn-tira__i--contener img { object-fit: contain; padding: 14px; }

/* Una banda alargada ocupa todo el ancho del margen y conserva SU proporción.
   Va después de `.ctn-tira__i` y con doble clase a propósito: si no, el
   `aspect-ratio: 4/3` de la regla base le gana y la deja en una caja vacía. */
.ctn-tira--banda { grid-template-columns: 1fr; }
.ctn-tira__i.ctn-tira__i--banda { aspect-ratio: auto; background: var(--c-fondo);
    border: 1px solid var(--c-filete); }
.ctn-tira__i.ctn-tira__i--banda img { width: 100%; height: auto; object-fit: contain; }
.ctn-tira__i--hueco { display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--c-filete-2); }
.ctn-tira__i--hueco span { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-gris); }

/* ── «Seguir leyendo»: las cuatro tarjetas del pie de la portada ───────────
   El resumen de cada una sale del primer párrafo de su propia página, así que
   no hay texto que mantener en dos lados. */
.ctn-explorar { margin: 60px 0 0; border-top: 1px solid var(--c-tinta); padding-top: 30px; }
.ctn-explorar__k { font-family: var(--texto); font-weight: 400; font-size: 11px;
    letter-spacing: 2.4px; text-transform: uppercase; color: var(--c-oro-osc); margin: 0 0 26px; }
.ctn-explorar__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--c-filete); border: 1px solid var(--c-filete); }
.ctn .ctn-tarjeta { display: flex; flex-direction: column; gap: 10px;
    padding: 26px 24px 22px; background: var(--c-fondo); transition: background .15s; }
.ctn .ctn-tarjeta:hover { background: var(--c-crema); color: var(--c-tinta); }
.ctn-tarjeta__t { font-family: var(--serif); font-size: 25px; line-height: 1.1; color: var(--c-tinta); }
.ctn-tarjeta__d { font-size: 15px; line-height: 1.6; color: var(--c-pizarra); }
.ctn-tarjeta__go { margin-top: auto; padding-top: 6px; font-size: 11px; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--c-oro-osc); }

/* ── Muro de logotipos ──────────────────────────────────────────────────────
   Una sola banda, en gris, sin marcos ni cajas: son marcas conocidas y
   enmarcarlas las convertiría en un catálogo. */
.ctn-logos { margin: 44px 0 0; padding: 30px 0 34px; border-top: 1px solid var(--c-filete);
    border-bottom: 1px solid var(--c-filete); }
.ctn-logos__k { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-oro-osc); margin: 0 0 24px; }
/* Fila libre, no retícula. Una retícula le da la misma caja a un sello
   redondo y a un logotipo alargado, y con once marcas deja una última fila
   coja. Así cada una ocupa lo que mide, todas se alinean por el centro y las
   filas quedan centradas: se ve pareja aunque el número no cuadre. */
.ctn-logos__rejilla { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 30px 46px; }
.ctn-logos__i { display: flex; align-items: center; justify-content: center; height: 50px; }
/* Atenuados para que no le griten al texto; al pasar el ratón, a tinta plena. */
.ctn-logos__i img { max-height: 50px; max-width: 165px; width: auto; object-fit: contain;
    opacity: .62; transition: opacity .15s; }
.ctn-logos__i:hover img { opacity: 1; }
/* El crédito federal son dos marcas en un mismo archivo: no se parte, se le
   da el doble de ancho. */
.ctn-logos__i--ancho img { max-width: 330px; }

/* Al pie de la portada van más chicos: ahí acompañan, no son el argumento.
   El argumento está en Colaborar, donde se ven a tamaño completo. */
.ctn-logos--chico { margin-top: 54px; padding: 26px 0 28px; }
.ctn-logos--chico .ctn-logos__rejilla { gap: 22px 34px; }
.ctn-logos--chico .ctn-logos__i { height: 38px; }
.ctn-logos--chico .ctn-logos__i img { max-height: 38px; max-width: 125px; }
.ctn-logos--chico .ctn-logos__i--ancho img { max-width: 250px; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.ctn-tabla-caja { overflow-x: auto; margin: 0 0 22px; }
.ctn-tabla { border-collapse: collapse; width: 100%; font-size: 16px; }
.ctn-tabla th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--c-oro-osc); padding: 0 18px 10px 0;
    border-bottom: 1px solid var(--c-tinta); white-space: nowrap; }
.ctn-tabla td { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--c-filete);
    vertical-align: top; line-height: 1.6; }
.ctn-tabla tr:last-child td { border-bottom: 0; }

/* ── Formularios (se montan en la fase siguiente) ──────────────────────── */
.ctn-form-slot { margin: 34px 0 0; }

/* ── Visor de las fotografías del pie ───────────────────────────────────────
   Se abre al tocar una foto de la tira. Fondo en tinta, no en negro puro, para
   que siga siendo el mismo sitio. Sin animación de entrada más allá del
   fundido: el encargo pide movimiento mínimo. */
.ctn-lupa { cursor: zoom-in; }
.ctn-lupa:focus-visible { outline: 2px solid var(--c-oro); outline-offset: 3px; }
body.ctn-lb-quieto { overflow: hidden; }

.ctn-lb { position: fixed; inset: 0; z-index: 9000; display: none;
    align-items: center; justify-content: center;
    background: rgba(35,31,32,.95); }
.ctn-lb--on { display: flex; animation: ctn-lb-in .15s ease-out; }
@keyframes ctn-lb-in { from { opacity: 0; } to { opacity: 1; } }

.ctn-lb__fig { margin: 0; padding: 58px 18px 52px; max-width: 100vw; max-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-sizing: border-box; }
.ctn-lb__img { max-width: 100%; max-height: calc(100vh - 130px); width: auto; height: auto;
    display: block; }
.ctn-lb__pie { font-family: var(--texto); font-size: 13px; line-height: 1.5;
    color: #CFC8BB; margin: 14px 0 0; text-align: center; max-width: 62ch; }
.ctn-lb__pie[hidden] { display: none; }

.ctn-lb__x, .ctn-lb__f { position: absolute; display: flex; align-items: center;
    justify-content: center; cursor: pointer; border: 1px solid rgba(244,241,233,.28);
    background: transparent; color: #F4F1E9; font-size: 17px; line-height: 1;
    border-radius: 999px; transition: border-color .15s, color .15s; }
.ctn-lb__x:hover, .ctn-lb__f:hover { border-color: #F4F1E9; color: #fff; }
.ctn-lb__x { top: 16px; right: 16px; width: 44px; height: 44px; }
.ctn-lb__f { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.ctn-lb__f--izq { left: 14px; }
.ctn-lb__f--der { right: 14px; }
.ctn-lb__f[hidden], .ctn-lb__cnt[hidden] { display: none; }
.ctn-lb__cnt { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    font-family: var(--texto); font-size: 11px; letter-spacing: 2.4px; color: #9A9488; }

/* En el teléfono las flechas estorban a la foto: se bajan al pie, a los lados
   del contador, y la forma natural de pasar es deslizando. */
@media (max-width: 700px) {
    .ctn-lb__f { top: auto; bottom: 12px; transform: none; width: 40px; height: 40px; }
    .ctn-lb__f--izq { left: 16px; }
    .ctn-lb__f--der { right: 16px; }
    .ctn-lb__fig { padding: 56px 10px 64px; }
    .ctn-lb__img { max-height: calc(100vh - 150px); }
}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.ctn-pie { border-top: 1px solid var(--c-filete); background: var(--c-crema); margin-top: 80px; }
.ctn-pie__in { max-width: var(--ancho); margin: 0 auto; padding: 54px var(--margen);
    display: flex; gap: 60px; flex-wrap: wrap; align-items: flex-start; }
.ctn-pie__marca { flex: 1 1 300px; max-width: 320px; }
.ctn-pie__marca img { width: 260px; height: auto; }
.ctn-pie__dir { font-size: 15px; line-height: 1.7; color: var(--c-pizarra); margin: 18px 0 0; }
.ctn-pie__col { display: flex; flex-direction: column; gap: 9px; flex: 0 1 auto; }
.ctn-pie__k { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--c-oro-osc); margin-bottom: 4px; }
.ctn .ctn-pie__col a { font-size: 15px; color: var(--c-texto); }
.ctn-pie__m { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.ctn-pie__m img { width: 22px; height: 22px; }

/* ── Pantallas chicas ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
    :root { --margen: 20px; }
    .ctn-head__in { flex-wrap: wrap; gap: 12px; }
    .ctn-head__marca { font-size: 16px; white-space: normal; flex: 1 1 100px; min-width: 0;
        line-height: 1.15; }
    /* En el teléfono el botón de Colaborar y el selector bajan a su renglón,
       pero siguen a la vista: no se esconden nunca. */
    .ctn .ctn-btn--head { order: 7; margin-left: 0; }
    .ctn-lang { order: 8; margin-left: auto; }
    .ctn-hamb { order: 6; margin-left: auto; }
    .ctn-head__volver span { display: none; }   /* la M ya dice de dónde viene */
    .ctn-head__volver img { width: 34px; height: 34px; }
    .ctn-head__filete { height: 28px; }

    .ctn-head__volver span { display: none; }   /* la M ya dice de dónde viene */
    .ctn-head__volver img { width: 34px; height: 34px; }
    .ctn-head__filete { height: 28px; }

    .ctn-sec { display: block; }
    /* La etiqueta no desaparece: se coloca encima de su bloque. */
    .ctn-sec__k { width: auto; margin: 0 0 14px; }
    .ctn-titulo { font-size: 40px; }
    .ctn-entradilla { font-size: 20px; }
    .ctn-cab { padding-top: 26px; }
    .ctn-pie__in { gap: 36px; }
    .ctn-cab--cartel, .ctn-cab--vertical { display: block; }
    .ctn-cartel, .ctn-vertical { max-width: 100%; flex: none; margin-bottom: 26px; }
    .ctn-titulo--lamina { font-size: 34px; max-width: none; }
    .ctn-lamina__txt { padding: 0 20px 22px; }
    .ctn-lamina--titulo img { aspect-ratio: 4 / 3; }
    .ctn-tira, .ctn-tira--4, .ctn-tira--5 { grid-template-columns: 1fr 1fr; }
    .ctn-tira--banda { grid-template-columns: 1fr; }
    .ctn-tira--1 { grid-template-columns: 1fr; }
    .ctn-logos__rejilla { gap: 24px 30px; }
    .ctn-logos__i, .ctn-logos__i img { height: 42px; max-height: 42px; }
    .ctn-explorar__rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    body.ctn { font-size: 16.5px; }
    .ctn-titulo { font-size: 34px; }
    .ctn-head__marca { font-size: 18px; }
    .ctn-nav { gap: 14px; }
    .ctn-cifras__fila { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ctn-cifras__sep { display: none; }
    .ctn-logos__rejilla { gap: 20px 26px; }
    .ctn-logos__i img { max-width: 120px; }
    .ctn-logos__i--ancho img { max-width: 230px; }
}