/*
Theme Name: MIRA
Theme URI: https://www.americas.org
Author: Purpura Solutions
Description: Tema clásico a medida para la publicación de noticias MIRA. Reconstrucción del diseño recuperado de Elementor (ver DISENO-RECUPERADO.md). Sin page builder: edición vía editor estándar.
Version: 1.2.2
Requires at least: 6.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: mira
*/

/* =========================================================
   Tokens de marca — congelados tras la auditoría AA de Design
   (americas-trabajo/Auditoria AA y Tokens (standalone).html).
   Regla cromática: los tonos ORIGINALES son fondos con tinta
   negra; las variantes -texto existen solo para texto blanco.
   ========================================================= */
:root {
  --mira-red: #C72A1F;         /* botones, links, badges · blanco encima 5.56 ✓ */
  --mira-red-hover: #A32218;   /* hover del rojo · blanco encima 7.51 ✓ */
  --mira-red-accent: #FA0C0C;  /* SOLO acento decorativo, nunca texto pequeño */
  --mira-pink: #B8777A;        /* fondo hero · tinta negra 5.96 ✓ */
  --mira-pink-text: #A56164;   /* rosa para texto blanco 4.67 ✓ */
  --mira-footer-pink: #E27076; /* barra footer · tinta negra 6.81 ✓ */
  --mira-green: #80A299;       /* fondo secciones · tinta negra 7.54 ✓ */
  --mira-green-text: #5D7A74;  /* verde para texto blanco 4.66 ✓ */
  --mira-yellow: #CF8A22;      /* solo con tinta negra 7.31 ✓ */
  --mira-blue: #165680;        /* links alternos y FOCUS RING 7.84 ✓ */
  --mira-gray: #59595C;        /* metadatos 6.98 ✓ */
  --mira-gray-bg: #E4E4E4;
  --mira-header-bg: #FFFFFFC9;

  --mira-font-heading: Khand, 'Arial Narrow', sans-serif;
  --mira-font-body: Roboto, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida 375→1278px (Design) */
  --mira-size-display: clamp(2.5rem, 1.7215rem + 3.3223vw, 4.375rem); /* 40→70 · lh .95 */
  --mira-size-h1: clamp(2rem, 1.4806rem + 2.2148vw, 3.25rem);         /* 32→52 · lh 1 */
  --mira-size-h2: clamp(1.75rem, 1.4384rem + 1.3289vw, 2.5rem);       /* 28→40 · lh 1.05 */
  --mira-size-h3: clamp(1.375rem, 1.2192rem + 0.6645vw, 1.75rem);     /* 22→28 · lh 1.15 */
  --mira-size-body: clamp(1.0625rem, 1.0469rem + 0.0664vw, 1.125rem); /* 17→18 · lh 1.7 */
  --mira-size-meta: 0.8125rem;                                        /* 13 fijo */

  /* Espaciado base 8 */
  --mira-space-xs: 0.5rem;
  --mira-space-s: 1rem;
  --mira-space-m: 1.5rem;
  --mira-space-l: 2.5rem;
  --mira-space-xl: 4rem;
  --mira-space-xxl: 6rem;
  --mira-gap: var(--mira-space-m);

  --mira-content: 985px;
  --mira-wide: 1278px;

  --mira-transition: 180ms ease; /* solo color/sombra/transform */
}

/* v1.1 — Regla móvil del pase de ritmo: bajo 768px baja UN paso solo la mitad
   alta de la escala (xxl→xl, xl→l, l→m). Los tokens chicos gobiernan relaciones
   internas ya compensadas por la tipografía fluida: no se tocan. */
@media (max-width: 767px) {
  :root {
    --mira-space-xxl: 4rem;   /* 96 → 64 */
    --mira-space-xl: 2.5rem;  /* 64 → 40 */
    --mira-space-l: 1.5rem;   /* 40 → 24 */
  }
}

/* ---------- Base tipográfica ---------- */
body {
  margin: 0;
  font-family: var(--mira-font-body);
  font-size: var(--mira-size-body);
  line-height: 1.7;
  color: #000;
  background: #fff;
}
/* v1.1 — Headings: mueren los márgenes del navegador (29–43px arbitrarios).
   Regla: el aire superior lo da la banda/sección; el heading solo abraza
   a su contenido (título → contenido: m 24). Contextos finos más abajo. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mira-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  margin-block: 0 var(--mira-space-m);
}
h1 { font-size: var(--mira-size-h1); line-height: 1.0; }
h2 { font-size: var(--mira-size-h2); line-height: 1.05; }
h3 { font-size: var(--mira-size-h3); font-weight: 600; line-height: 1.15; margin-block: 0 var(--mira-space-s); }
img { max-width: 100%; height: auto; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Estados globales (Design §4) ---------- */
:focus-visible {
  outline: 2px solid var(--mira-blue);
  outline-offset: 2px;
}
.on-dark :focus-visible,
.front-con-nosotras :focus-visible,
.front-banner :focus-visible {
  outline-color: #fff; /* anillo blanco sobre fondos de color/negro */
}
a { color: var(--mira-red); transition: color var(--mira-transition); }
a:hover { color: var(--mira-red-hover); }
/* En cuerpo de artículo el link SIEMPRE subrayado (daltonismo) */
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { text-decoration-thickness: 2px; }

/* ---------- Contenedores ---------- */
.mira-container { max-width: var(--mira-wide); margin-inline: auto; padding-inline: var(--mira-space-s); }
.mira-content { max-width: var(--mira-content); margin-inline: auto; padding-inline: var(--mira-space-s); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--mira-header-bg);
  backdrop-filter: blur(4px);
}
.site-header .mira-container { display: flex; align-items: center; justify-content: space-between; gap: var(--mira-gap); }
.site-header .custom-logo { max-height: 64px; width: auto; }
/* Desktop: la lista del menú y el toggle de idioma en una sola línea. */
.main-nav { display: flex; align-items: center; }
.main-nav ul { display: flex; gap: var(--mira-space-m); list-style: none; margin: 0; padding: 0; }
.main-nav a {
  font-family: var(--mira-font-heading); text-transform: uppercase;
  text-decoration: none; color: #000;
  border-bottom: 3px solid transparent;
  transition: color var(--mira-transition), border-color var(--mira-transition);
}
.main-nav a:hover { color: var(--mira-red); border-bottom-color: var(--mira-red); }
.main-nav [aria-current="page"] { border-bottom-color: var(--mira-red); }

/* Toggle de idioma ES | EN */
.lang-switch {
  display: inline-flex; align-items: center; gap: var(--mira-space-xs);
  font-family: var(--mira-font-heading); text-transform: uppercase;
  margin-inline-start: var(--mira-space-m);
}
.lang-switch__opt {
  text-decoration: none; color: var(--mira-gray); padding: 0.2em 0.4em;
  min-height: 44px; display: inline-flex; align-items: center;
}
.lang-switch__opt.is-active { color: var(--mira-red); }
.lang-switch__opt:hover { color: var(--mira-red-hover); }
@media (max-width: 767px) {
  /* dentro del menú desplegable, el toggle va como una fila más */
  .lang-switch { margin: 0; padding: var(--mira-space-s); border-top: 1px solid var(--mira-gray-bg); width: 100%; }
}

/* Botón hamburguesa — oculto en desktop, visible en móvil. */
.nav-toggle { display: none; }
@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 9px; background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span {
    display: block; width: 100%; height: 3px; background: #000; border-radius: 2px;
    transition: transform var(--mira-transition), opacity var(--mira-transition);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Menú: oculto por defecto; desplegable a todo el ancho al abrir. */
  .main-nav {
    display: none; position: absolute; top: 100%; inset-inline: 0;
    background: #fff; border-top: 1px solid var(--mira-gray-bg);
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; padding: var(--mira-space-s); }
  .main-nav li { width: 100%; }
  .main-nav a {
    display: flex; align-items: center; min-height: 48px; width: 100%;
    padding-inline: var(--mira-space-s); border-bottom: 1px solid var(--mira-gray-bg);
  }
  .main-nav a:hover { border-bottom-color: var(--mira-gray-bg); }
  .main-nav li:last-child a { border-bottom: 0; }
}

/* ---------- Cards de noticia ---------- */
/* Auditoría fila 6: badge con fondo rojo primario y texto blanco
   (#FA0C0C queda como acento decorativo, no como texto pequeño). */
.mira-card {
  position: relative; display: flex; flex-direction: column;
  transition: box-shadow var(--mira-transition), transform var(--mira-transition);
}
.mira-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.14); transform: translateY(-2px); }
.mira-card:focus-within { outline: 3px solid var(--mira-blue); outline-offset: 2px; }
/* v1.1: toda la card es clicable (overlay del link del titular) y las fechas
   quedan ancladas al fondo para alinearse entre cards de títulos desiguales. */
.mira-card__title a::after { content: ""; position: absolute; inset: 0; }
.mira-card__badge { position: relative; z-index: 1; align-self: flex-start; }
.mira-card__meta { margin-top: auto; padding-top: var(--mira-space-xs); }
/* Sin imagen destacada: placeholder de marca con las mismas proporciones. */
.mira-thumb--placeholder {
  display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2;
  background: var(--mira-gray-bg); border-radius: 8px;
}
.mira-thumb--placeholder img { width: 96px; height: auto; opacity: .45; }
.mira-card__thumb { display: block; }
.mira-card__thumb img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px;
}
.mira-card__badge {
  display: inline-block; background: var(--mira-red); color: #fff;
  font-family: var(--mira-font-heading); text-transform: uppercase;
  font-size: var(--mira-size-meta); padding: 0.15em 0.75em; border-radius: 999px;
  text-decoration: none;
}
.mira-card__badge:hover { background: var(--mira-red-hover); color: #fff; }
.mira-card__title { color: #000; font-size: var(--mira-size-h3); margin: var(--mira-space-xs) 0; }
.mira-card__title a { color: inherit; text-decoration: none; }
.mira-card__meta { color: var(--mira-gray); text-transform: uppercase; font-size: var(--mira-size-meta); }
.mira-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mira-gap); }
@media (max-width: 1024px) { .mira-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .mira-grid { grid-template-columns: 1fr; } }

/* ---------- Hero del single ----------
   Con imagen destacada (.single-hero--photo): la foto de fondo + filtro oscuro,
   título en blanco. Sin imagen: patrón rosa de marca, título negro (5.96 ✓). */
.single-hero {
  background-color: var(--mira-pink);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%);
  background-size: 90px 90px;
  padding-block: var(--mira-space-xl);
}
/* Con foto: el inline-style pone imagen + overlay; aquí solo el encuadre y color. */
.single-hero--photo {
  background-size: cover;
  background-position: center;
  background-color: #000;
}
.single-hero--photo .single-hero__title { color: #fff; }
.single-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mira-space-xl);
  align-items: center;
}
.single-hero__date {
  display: inline-block; background: #fff; color: var(--mira-red);
  padding: 0.2em 1em; border-radius: 999px; font-weight: 500;
  font-size: var(--mira-size-meta);
}
.single-hero__title { color: #000; font-size: var(--mira-size-display); line-height: 0.95; margin: var(--mira-space-s) 0 0; }
/* Caja del autor: avatar + nombre + botón "Posts", en una card blanca compacta. */
.single-hero__author {
  display: flex; flex-direction: column; align-items: center; gap: var(--mira-space-xs);
  background: #fff; color: #000; text-align: center;
  padding: var(--mira-space-m); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  max-width: 180px;
}
.single-hero__avatar { border-radius: 50%; width: 60px; height: 60px; }
.single-hero__author-name { font-family: var(--mira-font-heading); text-transform: uppercase; font-size: 0.95rem; }
.single-hero__author .mira-button { padding: 0.4em 1.2em; font-size: var(--mira-size-meta); }
@media (max-width: 767px) {
  .single-hero__grid { grid-template-columns: 1fr; }
  .single-hero__author { margin-inline: auto; }
}

/* ---------- Botones ---------- */
.mira-button {
  display: inline-block; background: var(--mira-red); color: #fff;
  font-family: var(--mira-font-heading); text-transform: uppercase;
  padding: 0.5em 1.6em; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
  transition: background-color var(--mira-transition);
}
.mira-button:hover { background: var(--mira-red-hover); color: #fff; }

/* ---------- Portada (referencia: Wayback 2026-04) ----------
   Fidelidad: el original usaba texto BLANCO sobre verde; la auditoría AA lo
   resuelve con la variante --mira-green-text (#5D7A74, 4.66 ✓) como fondo. */
.front-hero {
  position: relative; display: flex; align-items: center;
  min-height: 72vh; background-size: cover; background-position: center;
  color: #fff;
}
.front-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.front-hero__inner { position: relative; width: 100%; padding-block: var(--mira-space-xxl); }
.front-hero__title { color: #fff; font-size: var(--mira-size-display); line-height: 0.95; max-width: 12ch; margin: 0; }
.front-hero__sub { font-family: var(--mira-font-heading); text-transform: uppercase; font-size: var(--mira-size-h3); margin: var(--mira-space-s) 0 var(--mira-space-l); }
.front-hero__pattern {
  position: absolute; inset-inline: 0; bottom: 0; height: 90px;
  background-size: auto 180px; background-position: center bottom; opacity: .9;
}

.front-recientes { padding-block: var(--mira-space-xl); }

.front-somos { background: var(--mira-green-text); color: #fff; padding-block: var(--mira-space-xl); }
.front-somos h2 { color: #fff; }
.front-somos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mira-space-xl); }

.front-creemos { padding-block: var(--mira-space-xl); text-align: center; }
.front-creemos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mira-gap); margin-top: var(--mira-space-l); }
.front-creemos__card {
  background: #F4F4F4; padding: var(--mira-space-l) var(--mira-space-m);
  border-radius: 12px; transition: background-color var(--mira-transition), color var(--mira-transition);
}
.front-creemos__card img { width: 140px; height: auto; }
.front-creemos__card:hover { background: var(--mira-red); color: #fff; }
.front-creemos__card:hover h3 { color: #fff; }

.front-banner { background: var(--mira-green-text); color: #fff; padding-block: var(--mira-space-xl); }
.front-banner h2 { color: #fff; }
.front-banner__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--mira-space-xl); align-items: center; }
.front-banner__claim { font-family: var(--mira-font-heading); text-transform: uppercase; font-size: var(--mira-size-h1); margin: var(--mira-space-s) 0 var(--mira-space-l); }
.front-banner__img img { width: 100%; height: auto; border-radius: 12px; }

.front-con-nosotras {
  position: relative; background: #000 center/cover; color: #fff;
  padding-block: var(--mira-space-xxl);
}
.front-con-nosotras::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.front-con-nosotras .mira-container { position: relative; }
.front-con-nosotras h2 { color: #fff; text-align: center; margin-bottom: var(--mira-space-l); }
.front-con-nosotras__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mira-space-xl); text-align: center; }

@media (max-width: 900px) {
  .front-somos__grid, .front-banner__grid, .front-con-nosotras__grid { grid-template-columns: 1fr; }
  .front-creemos__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .front-creemos__grid { grid-template-columns: 1fr; }
}

/* ---------- Formularios (búsqueda / boletín) ---------- */
.search-form input[type="search"] {
  border: 1px solid var(--mira-gray); border-radius: 999px; padding: 0.45em 1em;
  font-family: var(--mira-font-body); font-size: var(--mira-size-body);
}
.search-form input[type="search"]:focus-visible { outline: 2px solid var(--mira-blue); outline-offset: 1px; }

/* ---------- Listados (archivo / búsqueda / publicaciones) ----------
   Referencia Wayback 2024: filas horizontales, fecha roja, extracto Roboto. */
.archive-main { max-width: 1200px; padding-block: var(--mira-space-l); }
.archive-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mira-gap); margin-bottom: var(--mira-space-l); }
.sections-nav ul { display: flex; flex-wrap: wrap; gap: var(--mira-space-m); list-style: none; margin: 0; padding: 0; }
.sections-nav a {
  font-family: var(--mira-font-heading); text-transform: uppercase;
  font-size: var(--mira-size-h3); text-decoration: none; color: var(--mira-red);
}
.sections-nav a:hover { color: var(--mira-red-hover); text-decoration: underline; }
.mira-rows { display: grid; gap: var(--mira-space-l); padding-block: var(--mira-space-m); }
.mira-row { position: relative; display: grid; grid-template-columns: 280px 1fr; gap: var(--mira-space-m); align-items: start; }
/* v1.1: thumbnails uniformes 3:2 (convivían 16:9, cuadrados y capturas de TV). */
.mira-row__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mira-row__title { font-size: var(--mira-size-h3); margin: 0; }
.mira-row__title a { color: #000; text-decoration: none; }
.mira-row__title a:hover { color: var(--mira-red); }
.mira-row__title a::after { content: ""; position: absolute; inset: 0; } /* fila clicable completa */
/* v1.1: fecha en gris — el rojo queda reservado al badge de categoría. */
.mira-row__date { color: var(--mira-gray); font-size: var(--mira-size-meta); margin-block: var(--mira-space-xs) var(--mira-space-s); }
.mira-row__excerpt { color: #333; }
.mira-row__excerpt p { margin: 0; }
@media (max-width: 767px) {
  .mira-row { grid-template-columns: 1fr; border-bottom: 1px solid var(--mira-gray-bg); padding-bottom: var(--mira-space-m); }
  .mira-rows > :last-child { border-bottom: 0; }
}
.mira-row--sin-imagen { grid-template-columns: 1fr; border-bottom: 1px solid var(--mira-gray-bg); padding-bottom: var(--mira-space-m); }
#mira-buscador { display: flex; gap: var(--mira-space-s); margin-block: var(--mira-space-m); }
#mira-buscador input[type="search"] { flex: 1; max-width: 640px; }
#mira-buscador-estado { color: var(--mira-gray); }

/* ---------- Footer (referencia: foto de manos + barra rosa) ---------- */
.footer-newsletter {
  background-size: cover; background-position: center;
  padding-block: var(--mira-space-xxl);
}
.footer-newsletter__strip {
  background: #fff; max-width: 1100px; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: var(--mira-space-l);
  flex-wrap: wrap; padding: var(--mira-space-m) var(--mira-space-l);
}
.footer-newsletter__strip h2 { margin: 0; }
/* Barra rosa con tinta negra (blanco solo daría 3.08 — falla texto normal). */
.footer-social-bar { background: var(--mira-footer-pink); color: #000; padding-block: var(--mira-space-m); }
.footer-social-bar a { color: #000; }
.footer-social-bar a:hover { color: var(--mira-red-hover); }
.footer-social-bar .mira-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mira-gap); }
.footer-social { display: flex; gap: var(--mira-space-s); }
/* Los SVG originales ya traen el círculo negro con el glifo calado:
   se renderizan directos y el rosa de la barra se ve a través del calado. */
.footer-social a { display: grid; place-items: center; transition: opacity var(--mira-transition); }
.footer-social a:hover { opacity: .75; }
.footer-social img { width: 44px; height: 44px; }
.footer-nav ul { display: flex; gap: var(--mira-space-m); list-style: none; margin: 0; padding: 0; }
.footer-copy { font-size: var(--mira-size-meta); }

/* ---------- Metadatos ---------- */
.entry-meta, .post-meta { font-size: var(--mira-size-meta); color: var(--mira-gray); }

/* ---------- Landings SOMOS / NUESTRO TRABAJO (páginas 60415 / 60882) ---------- */
.landing-hero {
  position: relative; display: flex; align-items: center;
  min-height: 56vh; background-size: cover; background-position: center;
  color: #fff;
}
.landing-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.landing-hero .mira-container { position: relative; width: 100%; }
.landing-hero h1 { color: #fff; font-size: var(--mira-size-display); line-height: .95; margin: 0 0 var(--mira-space-s); }
.landing-hero__texto { max-width: 60ch; font-size: var(--mira-size-h3); font-family: var(--mira-font-body); }
.landing-hero__botones { display: flex; gap: var(--mira-space-l); flex-wrap: wrap; }

.landing-equipo { background-size: cover; background-position: center; padding-block: var(--mira-space-xl); }
.landing-equipo h2 { text-align: center; margin-bottom: var(--mira-space-l); }
.landing-equipo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mira-space-l); }
.persona { text-align: center; }
.persona img { width: 190px; height: 190px; object-fit: cover; border-radius: 50%; }
.persona h3 { margin: var(--mira-space-s) 0 0; }
/* Rol en negro: el fondo del bloque equipo es el patrón ocre (rojo encima no pasa AA). */
.persona__rol { color: #000; text-transform: uppercase; font-size: var(--mira-size-meta); font-weight: 700; margin-bottom: var(--mira-space-s); }
.persona p { text-align: left; color: #333; font-size: 0.95rem; }

.landing-historia {
  position: relative; background-size: cover; background-position: center;
  color: #fff; padding-block: var(--mira-space-xxl); text-align: center;
}
.landing-historia::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.landing-historia .mira-content { position: relative; }
.landing-historia h2 { color: #fff; font-size: var(--mira-size-h1); }
.landing-historia p { text-align: left; }

.landing-vision { padding-block: var(--mira-space-xl); }
.landing-vision__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mira-space-xl); }
.landing-vision__grid > div { background: var(--mira-gray-bg); padding: var(--mira-space-l); border-radius: 12px; }

/* ---------- Slider Historia/Visión/Misión (scroll-snap, estático-friendly) ---------- */
.mira-slider { position: relative; }
.mira-slider__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.mira-slider__track::-webkit-scrollbar { display: none; }
.mira-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  min-height: 62vh; display: grid; align-items: center;
  background-size: cover; background-position: center; color: #fff;
}
.mira-slide__inner { max-width: 68ch; margin-inline: auto; padding: var(--mira-space-xxl) var(--mira-space-l); text-align: center; }
.mira-slide__inner h2 { color: #fff; font-size: var(--mira-size-h1); }
.mira-slide__inner p { font-size: var(--mira-size-h3); font-family: var(--mira-font-body); line-height: 1.6; }
.mira-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--mira-red);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  transition: background-color var(--mira-transition);
}
.mira-slider__arrow:hover { background: #fff; }
.mira-slider__arrow--prev { left: var(--mira-space-m); }
.mira-slider__arrow--next { right: var(--mira-space-m); }
.mira-slider__dots {
  position: absolute; bottom: var(--mira-space-m); inset-inline: 0; z-index: 2;
  display: flex; gap: var(--mira-space-xs); justify-content: center;
}
.mira-slider__dot {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
  background: transparent; cursor: pointer; padding: 0;
}
.mira-slider__dot[aria-selected="true"] { background: #fff; }
@media (max-width: 767px) {
  .mira-slider__arrow { display: none; } /* en móvil se desliza con el dedo */
  .mira-slide__inner { padding-block: var(--mira-space-xl); }
}

.landing-hacemos { padding-block: var(--mira-space-xl); text-align: center; }
.landing-hacemos hr { border: 0; border-top: 2px solid #000; max-width: 1100px; }
.landing-hacemos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mira-space-l); margin-top: var(--mira-space-l); text-align: left; }
.hacemos-card { padding: var(--mira-space-xl) var(--mira-space-l); border-radius: 12px; }
.hacemos-card--mira { background: var(--mira-yellow); color: #000; }      /* amarillo: tinta negra 7.31 ✓ */
.hacemos-card--miradas { background: var(--mira-green-text); color: #fff; } /* verde AA para blanco 4.66 ✓ */
.hacemos-card--miradas h3 { color: #fff; }

.landing-trabajo__listado { position: relative; }
/* v1.1 §2·01: decoraciones SIEMPRE bajo el contenido, ancladas fuera del
   contenedor y sin robar clics; si no hay margen lateral, desaparecen. */
.deco { position: absolute; width: 200px; opacity: .4; z-index: -1; pointer-events: none; }
.deco--mundo { left: -230px; top: 0; }
.deco--mano { right: -220px; bottom: 160px; }
@media (max-width: 1650px) { .deco { display: none; } }
/* v1.1 §2·05: paginación como navegación primaria — pastillas 44×44. */
.pagination { display: flex; gap: var(--mira-space-xs); flex-wrap: wrap; align-items: center; margin-top: var(--mira-space-xl); }
.pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px;
  padding-inline: 0.6em; border-radius: 999px; text-decoration: none; color: #000;
  transition: background-color var(--mira-transition);
}
.pagination a.page-numbers:hover { background: var(--mira-gray-bg); color: #000; }
.pagination .page-numbers.current { background: var(--mira-red); color: #fff; }
.pagination .page-numbers.prev, .pagination .page-numbers.next {
  border: 2px solid var(--mira-red); color: var(--mira-red);
  font-family: var(--mira-font-heading); text-transform: uppercase;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover { background: var(--mira-red); color: #fff; }
@media (max-width: 767px) {
  /* solo ← 1 … 341 → : se ocultan los números intermedios */
  .pagination .page-numbers:not(.current):not(.prev):not(.next):not(.dots):not(:nth-child(2)):not(:nth-last-child(2)) { display: none; }
}
.landing-destacados { padding-block: var(--mira-space-xl); }

@media (max-width: 900px) {
  .landing-equipo__grid, .landing-vision__grid, .landing-hacemos__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   v1.1 — Pase de ritmo (dirección de arte de Claude Design)
   Regla madre: aire superior ≥ 2× aire inferior; el blanco
   pertenece a lo que viene después.
   ========================================================= */

/* Targets táctiles ≥ 44px en toda acción (§4) */
.mira-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.search-form input[type="search"], .search-form .mira-button, #mira-buscador input[type="search"] { min-height: 44px; }
.sections-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.sections-nav ul { row-gap: var(--mira-space-xs); column-gap: var(--mira-space-m); }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Página de listados: respiro unificado (bloques xl, título xl arriba / m abajo) */
.archive-main { padding-block: var(--mira-space-l) var(--mira-space-xl); }
.archive-toolbar { margin-bottom: 0; row-gap: var(--mira-space-s); }
.archive-title { margin-block: var(--mira-space-xl) var(--mira-space-m); }

/* Cuerpo de artículo: ritmo editorial (§1 y §3-artículo) */
.entry-content > * { margin-block: 0 var(--mira-space-s); }
.entry-content h2 { margin-block: var(--mira-space-xl) var(--mira-space-m); }
.entry-content h3 { margin-block: var(--mira-space-l) var(--mira-space-s); }
.entry-content figure, .entry-content img { margin-block: var(--mira-space-l); }
.entry-content figure img { margin-block: 0; }
.entry-content figcaption { font-size: var(--mira-size-meta); color: var(--mira-gray); margin-top: var(--mira-space-xs); }

/* Alineación de imágenes del editor (alignright/left/center) — faltaba y por eso
   una imagen "alineada a la derecha" salía aislada en su propia línea. */
.entry-content .alignright,
.entry-content img.alignright,
.entry-content figure.alignright {
  float: right; margin: var(--mira-space-xs) 0 var(--mira-space-s) var(--mira-space-l); max-width: 50%;
}
.entry-content .alignleft,
.entry-content img.alignleft,
.entry-content figure.alignleft {
  float: left; margin: var(--mira-space-xs) var(--mira-space-l) var(--mira-space-s) 0; max-width: 50%;
}
.entry-content .aligncenter,
.entry-content img.aligncenter,
.entry-content figure.aligncenter {
  display: block; margin-inline: auto;
}
.entry-content .alignright img,
.entry-content .alignleft img,
.entry-content .aligncenter img { margin-block: 0; }
/* WP caption clásico */
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text { font-size: var(--mira-size-meta); color: var(--mira-gray); text-align: center; }
/* limpiar floats al final del artículo y en cada bloque de texto */
.entry-content::after { content: ""; display: block; clear: both; }
/* En móvil las imágenes flotadas se apilan centradas: no hay ancho para envolver. */
@media (max-width: 600px) {
  .entry-content .alignright, .entry-content img.alignright, .entry-content figure.alignright,
  .entry-content .alignleft, .entry-content img.alignleft, .entry-content figure.alignleft {
    float: none; display: block; max-width: 100%; margin-inline: auto;
  }
}
/* Pull-quote: golpe de ritmo, no párrafo gritado (§2·02) */
.entry-content blockquote {
  max-width: 32ch; margin: var(--mira-space-xl) auto; padding: 0;
  border: 0; border-block: 3px solid var(--mira-red);
  padding-block: var(--mira-space-m); text-align: center;
  font-family: var(--mira-font-heading); font-size: var(--mira-size-h3); line-height: 1.25;
}

/* Hero del artículo: kicker→título s, título→autora la maneja el grid (§3) */
.single-hero__title { margin-top: var(--mira-space-s); }
/* Recomendados: cambio de contexto → banda separada con xxl (§3-artículo) */
.single-related { padding-block: var(--mira-space-xxl) var(--mira-space-xl); }
.single-related h2 { text-align: center; }

/* Anterior/Siguiente como bloques navegables (§2·06) */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mira-space-m); margin-block: var(--mira-space-xl) 0; }
.post-nav__item {
  position: relative; padding: var(--mira-space-m);
  border: 1px solid var(--mira-gray-bg); border-radius: 8px;
}
.post-nav__item--next { text-align: right; }
.post-nav__kicker { font-size: var(--mira-size-meta); color: var(--mira-gray); text-transform: uppercase; }
.post-nav__item h3 { margin: var(--mira-space-xs) 0 0; font-size: 1.1rem; }
.post-nav__item a { color: #000; text-decoration: none; }
.post-nav__item a::after { content: ""; position: absolute; inset: 0; }
.post-nav__item:hover { border-color: var(--mira-red); }
@media (max-width: 700px) { .post-nav { grid-template-columns: 1fr; } .post-nav__item--next { text-align: left; } }

/* Portada: el título abraza a su contenido; el clímax del banner (§3-portada) */
.front-recientes .mira-grid, .front-creemos__grid { margin-top: 0; }
.front-creemos__card { padding: var(--mira-space-m); }
.front-creemos__card img { margin-bottom: var(--mira-space-s); }
.front-creemos__card h3 { margin-bottom: var(--mira-space-xs); }
.front-banner h2 { margin-bottom: var(--mira-space-s); }
.front-banner__claim { margin: 0 0 var(--mira-space-l); }
.front-somos .mira-button { margin-top: var(--mira-space-m); }
.front-somos__grid { gap: var(--mira-space-xl); }

/* Buscador: el contador es el feedback principal (§3-búsqueda) */
#mira-buscador { margin-block: var(--mira-space-m); }
#mira-buscador-estado { font-size: var(--mira-size-body); color: #000; margin-block: var(--mira-space-m) var(--mira-space-xl); }
#mira-buscador-vacio .mira-card__badge { margin: 0 var(--mira-space-xs) var(--mira-space-xs) 0; }
.mira-row--sin-imagen .mira-card__badge { align-self: flex-start; }

/* Landing SOMOS: anatomía de miembro y proporciones (§3-somos) */
.persona h3 { margin: var(--mira-space-s) 0 0; }
.persona__rol { margin: var(--mira-space-xs) 0 var(--mira-space-s); }
.landing-equipo .mira-button { margin-top: var(--mira-space-l); }
.landing-historia p { max-width: 68ch; margin-inline: auto; }
.landing-vision__grid { gap: var(--mira-space-m); }
.landing-vision__grid > div { padding: var(--mira-space-l); }
.landing-vision__grid p { margin: 0; }
.landing-hacemos hr { margin: var(--mira-space-s) auto var(--mira-space-m); }

/* Landing NUESTRO TRABAJO: destacados como banda propia (§3) */
.landing-destacados { margin-top: var(--mira-space-xxl); padding-block: 0 var(--mira-space-xl); }

/* ---------- Videos (landing 62218 + embeds en notas) ----------
   Regla: TODO video vive en un marco 16:9 consistente. Debajo del iframe
   siempre hay un placeholder de marca — si el video no carga o fue borrado,
   el diseño no se desarma. */
.video-embed {
  position: relative; aspect-ratio: 16 / 9; max-width: 985px; margin-inline: auto;
  border-radius: 12px; overflow: hidden; background: #000;
}
.video-embed iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--mira-space-s);
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    var(--mira-pink);
  color: #fff; font-family: var(--mira-font-heading); text-transform: uppercase;
}
.video-placeholder img { width: 72px; opacity: .9; }
.video-placeholder p { margin: 0; }
/* Embeds de video dentro de notas: mismas proporciones, nunca desbordan. */
.entry-content iframe[src*="youtube"], .entry-content iframe[src*="vimeo"] {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px;
}
.landing-videos__cta { text-align: center; margin-top: var(--mira-space-l); }
.mira-button--activo { background: var(--mira-gray); cursor: default; }
.mira-button--activo:hover { background: var(--mira-gray); }