/* ==========================================================================
   walking-planets-extras.css — HUECOS DEL DISEÑO
   --------------------------------------------------------------------------
   Estilos que el paquete del diseñador NO traía y que el montaje necesitó.
   Vive APARTE de walking-planets.css para que ese archivo siga siendo el
   entregable intacto del diseñador: si llega una versión nueva del handoff,
   se sustituye sin perder nada de lo de aquí.

   Se encola DESPUÉS de walking-planets.css, así que puede complementarlo
   sin necesidad de !important.

   REGLA: cada bloque se firma con agente + fecha + por qué faltaba.
   Si un hueco resulta ser un error de markup (el bloque no coincide con el
   diseño), NO se tapa aquí: se corrige el markup del widget.
   ========================================================================== */


/* ---------- 17. ÍNDICE LEGAL (scrollspy) Y BOTÓN GHOST CLARO ----------
   Añadido por @frontend (2026-08-19, Legal.dc.html): no existían aún clases para el
   estado activo del índice lateral de la página Legal ni para un botón "ghost" legible
   sobre fondo claro (.wp-btn--ghost ya existe pero es blanco, pensado para fondo navy).
   Solo aditivo, no toca nada de lo anterior. Ver ASSEMBLY-HOWTO.md §6: los huecos de CSS
   se corrigen aquí, nunca parcheando en el árbol de montaje de la página. */
.wp-btn--ghost-dark{background:none;border:1px solid rgba(14,52,87,.35);color:var(--wp-navy)}
.wp-btn--ghost-dark:hover{border-color:var(--wp-cyan);color:var(--wp-cyan-ink)}
.wp-btn--ghost-dark:disabled{cursor:not-allowed;opacity:.55}
.wp-btn--dark:disabled{cursor:not-allowed;opacity:.55}
[data-scrollspy]{display:flex;align-items:center;padding:14px 16px;background:transparent;
  color:var(--wp-ink-soft);font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;transition:background .25s ease,color .25s ease}
[data-scrollspy]:hover{color:var(--wp-cyan-ink)}
[data-scrollspy].is-active{background:var(--wp-navy);color:var(--wp-white)}

/* ---------- 17. TRAVEL GUIDES (índice de blog) ---------- */
/* Artículo destacado: imagen | texto, a sangre completa sobre navy. */
.wp-guide-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;color:var(--wp-white);
  border:1px solid rgba(255,255,255,.18);overflow:hidden;transition:border-color .25s ease}
.wp-guide-feature:hover{border-color:var(--wp-cyan)}
.wp-guide-feature__media{position:relative;min-height:420px;overflow:hidden;background:var(--wp-navy-panel)}
.wp-guide-feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--wp-ease)}
.wp-guide-feature:hover .wp-guide-feature__media img{transform:scale(1.06)}
.wp-guide-feature__body{padding:52px 48px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.wp-guide-feature__meta{gap:16px;color:var(--wp-yellow)}
.wp-guide-feature__meta span+span{color:rgba(255,255,255,.6)}
.wp-guide-feature__text{max-width:48ch;color:rgba(255,255,255,.72);font-size:18px;line-height:1.6}
.wp-guide-feature__link{font-family:var(--wp-mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wp-cyan)}

/* fix (QA 2026-08-19, Travel Guides @1440): el `.dc.html` deja 40px de padding-bottom
   bajo la tarjeta destacada (03-featured-article.php, `.wp-shell` sin padding propio
   hoy); scopeado al widget exacto, único uso en el sitio. */
.elementor-widget-wp_guides_featured_article .wp-shell{padding-bottom:40px}

/* Grid de artículos: mismo .wp-card/.wp-cards que las tarjetas de tour, ratio y meta propios. */
.wp-card--article .wp-card__media{aspect-ratio:3/2}
.wp-card--article .wp-card__title{font-size:30px}
.wp-card__meta{gap:14px;margin:18px 0 10px;color:var(--wp-cyan)}
.wp-card__meta span+span{color:rgba(255,255,255,.6)}

/* FIX (2026-08-19, @frontend, P1 hallado por @team-lead: ~21 títulos de tarjeta en CIAN
   cuando el diseño los pone BLANCOS, en Home/Travel Guides/Tour). `.wp-card` es un <a>
   (walking-planets.css:185, `color:var(--wp-white)`, especificidad 0,1,0) y `.wp-card__title`
   es un <h3> sin color propio dentro de él, así que hereda del padre — pero el padre pierde
   contra la regla global de enlaces `.wp-page a{color:var(--wp-cyan)}`
   (walking-planets.css:47, 0,1,1 > 0,1,0), y el <h3> hereda el cian del enlace en vez del
   blanco que `.wp-card` pedía. Mismo mecanismo ya documentado para `.wp-section--light a`
   más abajo (24.3), aplicado aquí al caso inverso (fondo OSCURO, donde SÍ debe ganar el
   blanco de `.wp-card`). Fix: repetir la clase a 0,2,0, que ya le gana a 0,1,1 sin depender
   del orden de encolado. No toca `.wp-card__text`/`.wp-card__price` (tienen su propio color
   explícito, no heredan y no estaban afectados). */
.wp-card.wp-card{color:var(--wp-white)}

/* Newsletter: copy | formulario (Form de Elementor Pro, estilo desde su propia pestaña Estilo). */
.wp-newsletter{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:end}

/* ---------- 18. ARTÍCULO ---------- */
.wp-article-grid{max-width:var(--wp-maxw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) 300px;gap:70px;align-items:start}
.wp-article-body{max-width:70ch}
.wp-article-body>p:first-of-type{margin:0 0 30px;font-size:23px;line-height:1.5;font-weight:500;color:var(--wp-navy)}
.wp-article-body>p{margin:0 0 24px;font-size:18px;line-height:1.7;color:var(--wp-ink-soft)}
.wp-article-body h2{margin:52px 0 18px;font-family:var(--wp-display);font-weight:400;
  text-transform:uppercase;font-size:clamp(26px,3vw,44px);line-height:1;color:var(--wp-navy)}
.wp-article-body figure{margin:44px 0;padding:0}
.wp-article-body figure img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:var(--wp-navy-panel)}
.wp-article-body figcaption{margin-top:12px;font-family:var(--wp-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wp-ink-soft)}
.wp-article-body blockquote{margin:48px 0;border-left:3px solid var(--wp-cyan);padding:6px 0 6px 28px}
.wp-article-body blockquote p{margin:0;font-family:var(--wp-display);font-size:clamp(22px,2.6vw,38px);
  text-transform:uppercase;line-height:1.05;color:var(--wp-navy)}
.wp-article-body ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:14px;font-size:17px;line-height:1.6;color:var(--wp-ink-soft)}
.wp-article-body ul li{display:flex;gap:14px}
.wp-article-body ul li::before{content:"\2713";color:var(--wp-cyan-ink);font-weight:700;flex:0 0 auto}

.wp-article-aside{display:flex;flex-direction:column;gap:26px}
.wp-article-promo{background:var(--wp-navy);color:var(--wp-white);padding:28px 26px}
.wp-article-promo__kicker{font-family:var(--wp-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wp-cyan);margin-bottom:14px}
.wp-article-promo__title{font-family:var(--wp-display);font-size:28px;text-transform:uppercase;
  line-height:1;margin-bottom:12px}
.wp-article-promo__text{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.wp-article-related{border:1px solid var(--wp-line-light);padding:24px 22px}
.wp-article-related__label{font-family:var(--wp-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wp-ink-soft);margin-bottom:16px}
.wp-article-related__list{display:flex;flex-direction:column;gap:16px}
.wp-article-related__list a{color:var(--wp-navy);font-family:var(--wp-display);font-size:20px;
  text-transform:uppercase;line-height:1.05}
.wp-article-related__list a:hover{color:var(--wp-cyan-ink)}

@media (max-width:860px){
  .wp-guide-feature__body{padding:34px 24px}
  .wp-article-grid{grid-template-columns:minmax(0,1fr)}
  /* Gap encontrado en la ronda del guard minmax (2026-08-19): a estas dos les faltaba también
     el colapso a 1 columna (no solo el guard) — sin él, 1.15fr/1fr y 1.1fr/.9fr quedan
     apretadísimas en móvil aunque ya no desborden. */
  .wp-guide-feature{grid-template-columns:minmax(0,1fr)}
  .wp-newsletter{grid-template-columns:minmax(0,1fr);gap:30px}
}

/* ==========================================================================
   19. CAPA DE COMPONENTES — catálogo unificado (2026-08-19, @build-spec)
   --------------------------------------------------------------------------
   walking-planets.css (279 líneas, entregable del diseñador) solo trae
   PRIMITIVAS compartidas (hero, section, card, marquee, btn, sticky…). No
   trae clases para los LAYOUTS de cada bloque de página — de ahí que los
   5 agentes de montaje hayan acabado con `style=` inline: no había otra
   opción sin tocar el CSS del diseño.

   Cada clase de aquí abajo está sacada de un `.dc.html` concreto (fuente
   de verdad) o de DESIGN-TOKENS.md — cero valores inventados. Cuando el
   mismo patrón sale con medidas distintas en dos páginas, hay variante,
   no promedio (instrucción explícita de Pedro). Documentación completa,
   con markup de ejemplo por clase: .dev/specs/CSS-CLASSES.md — léelo
   antes de usar nada de aquí a ciegas.

   REGLA DE COLAPSO MÓVIL: todo layout multi-columna de esta sección
   colapsa a 1 columna en el propio breakpoint de abajo (860px, el corte
   real del diseño) DENTRO de esta hoja — nunca con ajustes responsive de
   Elementor ni dependiendo de que el widget PHP calcule nada. Es la causa
   raíz del bug de scroll horizontal del footer: un grid fijo sin colapso
   propio. No se repite ese error aquí.
   ========================================================================== */

/* --- 19.1 Dos columnas flexibles (unifica lo pedido por Home/About/Legal) ---
   Grid con ratio/gap/alineación por custom property: la MECÁNICA (grid +
   colapso a 860px) vive en la clase; el CUÁNTO (ratio real de cada bloque,
   que el diseño varía a propósito) se pasa por variable en el propio
   contenedor. Ver CSS-CLASSES.md para los 3 ratios ya confirmados contra
   el diseño (manifiesto 1.1fr 1fr/gap 70, why-us 1.05fr .95fr/gap 70,
   own-operations 1fr 1fr/gap 64).

   GUARD OBLIGATORIO (2026-08-19, corrección crítica): en CSS Grid, `1fr` a secas
   equivale a `minmax(auto,1fr)`, no a `minmax(0,1fr)` — el contenido mínimo de la
   columna (un email, un icono con etiqueta) empuja la columna y desborda en vez de
   encoger. Es la causa raíz del scroll horizontal que ya rompió el footer y estuvo
   a punto de repetirse en 8+ clases del catálogo. SOLUCIÓN ESTRUCTURAL para
   `.wp-cols-2` en concreto: en vez de envolver cada valor de `--wp-cols-2-ratio`
   en `minmax()` (dependería de que cada agente lo escriba bien al pasar SU
   ratio, justo el fallo que queremos eliminar), el guard vive en los HIJOS
   directos (`min-width:0`) — técnica estándar y equivalente: es el mínimo
   implícito del hijo lo que empuja la columna, no el `1fr` en sí. Así el ratio
   se sigue escribiendo tal cual (`--wp-cols-2-ratio:1.1fr 1fr`, ya usado en 7
   widgets de 4 agentes distintos) sin tener que reescribir nada ya adoptado. */
.wp-cols-2{
  display:grid;
  grid-template-columns:var(--wp-cols-2-ratio, 1fr 1fr);
  gap:var(--wp-cols-2-gap, 64px);
  align-items:var(--wp-cols-2-align, start);
}
.wp-cols-2>*{min-width:0}
@media (max-width:860px){
  .wp-cols-2{grid-template-columns:minmax(0,1fr) !important}
}

/* --- 19.2 Variantes de párrafo (texto largo sobre navy/blanco) --- */
.wp-p--muted{color:rgba(255,255,255,.7)}          /* sobre navy, ver Why us §text_2 */
.wp-p--muted-light{color:var(--wp-ink-soft)}       /* sobre blanco, ver About manifesto */
.wp-p--strong-navy{color:var(--wp-navy);font-weight:700}

/* --- 19.3 Cita con borde cian (caja) + pull-quote Anton dentro o suelto ---
   `.wp-quote` es el marco (borde + tipografía base); `.wp-pull-quote` es la
   línea de remate en Anton mayúsculas, puede ir dentro de `.wp-quote` o
   suelta (Home #11 Why us la usa suelta, en amarillo y más grande —
   variante `--lg`). Ver BUILD-SPEC §4.1 y ELEMENTOR-BLOCKS.md #why. */
.wp-quote{border-left:2px solid var(--wp-cyan);padding-left:34px;font-size:18px;
  line-height:1.65;color:var(--wp-ink-soft)}
.wp-quote p{margin:0 0 16px}
.wp-quote p:last-child{margin-bottom:0}
.wp-quote strong{color:var(--wp-navy)}

.wp-pull-quote{margin:0;font-family:var(--wp-display);font-weight:400;text-transform:uppercase;
  line-height:1;font-size:clamp(24px,2.6vw,40px);color:var(--wp-navy)}
.wp-pull-quote--lg{font-size:clamp(26px,3vw,46px);color:var(--wp-yellow)}

/* --- 19.4 Lista con marca amarilla (About "Own operations") ---
   Markup: <ul class="wp-list--star"><li>texto</li></ul> — el ✱ es ::before,
   no hace falta <span> en el widget. */
.wp-list--star{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.wp-list--star li{display:flex;gap:14px;font-size:17px;line-height:1.55;color:var(--wp-ink-soft)}
.wp-list--star li::before{content:"\2731";color:var(--wp-yellow);flex:0 0 auto}

/* --- 19.5 Lista numerada con separador (Legal "Booking terms") ---
   Markup: <ul class="wp-list--numbered"><li><span class="wp-list--numbered__n">01</span><span>texto <strong>fuerte</strong></span></li></ul> */
.wp-list--numbered{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.wp-list--numbered li{display:flex;gap:22px;padding:20px 0;border-top:1px solid var(--wp-line-light)}
.wp-list--numbered li:last-child{border-bottom:1px solid var(--wp-line-light)}
.wp-list--numbered__n{font-family:var(--wp-mono);font-size:11.5px;color:var(--wp-cyan-ink);flex:0 0 28px}
.wp-list--numbered li>span:last-child{font-size:17px;line-height:1.65;color:var(--wp-ink)}
.wp-list--numbered strong{color:var(--wp-navy)}

/* --- 19.6 Callout con borde izquierdo (avisos, "datos pendientes" de Legal) --- */
.wp-callout{margin-top:34px;border-left:3px solid var(--wp-yellow);padding:14px 22px 14px 22px;
  max-width:70ch;background:rgba(255,229,0,.06)}

/* --- 19.7 Fila label + valor, sobre blanco (ficha legal: razón social, CIF…) ---
   Markup: <div class="wp-data-row"><span class="wp-data-row__label">Texto</span><span class="wp-data-row__value">Texto</span></div>
   Para agrupar varias en una rejilla de 2 col con separador de 2px (idéntico
   patrón a .wp-facts pero en tema claro): envuelve en .wp-data-grid. */
.wp-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--wp-line-light);margin-bottom:30px}
.wp-data-grid>*{background:var(--wp-white)}
@media (max-width:860px){.wp-data-grid{grid-template-columns:minmax(0,1fr)}}
.wp-data-row{padding:22px 24px}
.wp-data-row__label{display:block;font-family:var(--wp-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wp-cyan-ink);margin-bottom:8px}
.wp-data-row__value{font-size:17px;color:var(--wp-muted)}

/* --- 19.8 Fila label + valor ancha, con borde superior (privacidad: "Who sees it", "How long"…)
   Markup: <div class="wp-info-row"><span class="wp-info-row__label">Label</span><span class="wp-info-row__value">Texto largo…</span></div> */
.wp-info-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;padding:22px 0;
  border-top:1px solid var(--wp-line-light)}
.wp-info-row__label{font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wp-cyan-ink)}
.wp-info-row__value{font-size:17px;line-height:1.65;color:var(--wp-ink)}
@media (max-width:860px){.wp-info-row{grid-template-columns:minmax(0,1fr);gap:8px}}

/* --- 19.9 Tabla de cookies (cabecera + filas de 3 columnas) ---
   Markup: <div class="wp-table-row wp-table-row--head"><span>Name</span><span>Purpose</span><span>Duration</span></div>
   seguido de N <div class="wp-table-row">…</div> */
.wp-table-row{display:grid;grid-template-columns:180px minmax(0,1fr) 130px;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--wp-line-light)}
.wp-table-row--head{border-bottom:2px solid var(--wp-navy);font-family:var(--wp-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wp-cyan-ink)}
@media (max-width:860px){
  .wp-table-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}
  .wp-table-row--head{display:none} /* la cabecera de tabla no tiene sentido apilada en móvil */
}

/* --- 19.10 .wp-facts a 3 columnas (About "Six rules we never break") ---
   Modificador de la primitiva .wp-facts ya existente (2 col por defecto).
   Markup: <div class="wp-facts wp-facts--3col"><div>…</div>…</div> */
.wp-facts--3col{grid-template-columns:repeat(3,minmax(0,1fr))}
.wp-facts--3col>div{padding:36px 32px} /* About Us.dc.html líneas 157-164: distinto del padding
  26px 28px de .wp-facts base (Tour) — no promediar, override explícito del modificador. */
@media (max-width:860px){.wp-facts--3col{grid-template-columns:minmax(0,1fr)}}

/* --- 19.11 Franja de vídeo corta (Home #05, 78vh) — variante de .wp-hero --- */
.wp-hero--strip{height:78vh;min-height:520px}
/* 2026-08-26 (@wordpress-elementor, feedback 03 §1). Dos correcciones sobre esta variante:
   1) VELO PROPIO. El diseño da a la sección #film un degradado DISTINTO del hero
      (Walking Planets Home.dc.html L228: .55 / .35 al 45% / .9), pero el montaje WP reutilizó
      `.wp-hero__scrim` tal cual y perdió esa diferencia. Se restituye aquí, ya con los valores
      aclarados que pide el cliente (.34 / .14 / .8).
   2) FILTRO DEL VÍDEO. En el diseño este vídeo solo lleva Ken Burns, sin `wpHeroIn`; en WP
      hereda la animación del hero, y como `wpHeroIn` anima `filter` con fill `both`, una regla
      `filter:` suelta sobre .wp-hero__media NO se aplicaría nunca (la animación gana). Por eso
      el filtro va en su propia animación, `wpFilmIn`, con el mismo tramo de transform que
      `wpHeroIn` para no cambiar el movimiento — solo el valor final del filtro. */
/* 2026-08-28 (@frontend, A1 «el vídeo está apagado»): esta franja es el SEGUNDO vídeo de la Home
   y le llegaba la misma queja que al hero, así que sube en el mismo tramo. El velo también se
   aclara y pasa al navy nuevo rgb(18,63,104). */
.wp-hero--strip .wp-hero__scrim{background:linear-gradient(180deg,
  rgba(18,63,104,.24),rgba(18,63,104,.08) 45%,rgba(18,63,104,.74))}
.wp-hero--strip .wp-hero__media{
  animation:wpFilmIn 2.6s var(--wp-ease) both,wpKenBurns 26s 2.6s ease-in-out infinite alternate}
@keyframes wpFilmIn{from{transform:scale(1.42) translateY(2%);filter:saturate(1) brightness(.98)}
  to{transform:scale(1) translateY(0);filter:saturate(1.24) brightness(1.2) contrast(1.04)}}
.wp-hero__center{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 var(--wp-gutter);gap:26px}

/* --- 19.12 Segmentos (Home #08 "Private & tailormade / Shore excursions / Student groups") --- */
.wp-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:860px){.wp-segments{grid-template-columns:minmax(0,1fr)}}
.wp-segment{display:block;color:var(--wp-white);border:1px solid rgba(255,255,255,.2);
  padding:0 0 30px;overflow:hidden;transition:border-color .25s ease}
.wp-segment:hover{border-color:var(--wp-cyan)}
.wp-segment__media{position:relative;height:220px;overflow:hidden;background-size:cover;background-position:center}
.wp-segment__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp-segment__body{padding:26px 28px 0}
/* 2026-08-19 @frontend, petición del cliente: "más grandes las etiquetas de para quién es cada
   bloque". 11px→13px (18%, mono+uppercase+letter-spacing:.16em crece más en ancho que en alto),
   probado en vivo (Playwright) a 390/1440px: las 3 etiquetas ("Private & tailormade" incluida,
   la más larga a 20 caracteres) siguen en UNA sola línea en los dos anchos — no hizo falta tocar
   el letter-spacing. De paso cierra el mínimo de 11.5px de DESIGN-TOKENS (11px lo incumplía). */
.wp-segment__tag{font-family:var(--wp-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wp-yellow);margin-bottom:14px}
.wp-segment__title{margin:0 0 12px;font-family:var(--wp-display);font-weight:400;font-size:32px;
  text-transform:uppercase;line-height:1}
.wp-segment__text{margin:0 0 16px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.7)}
.wp-segment__link{font-family:var(--wp-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wp-cyan)}

/* --- 19.13 Título/etiqueta dentro de un .wp-reel (la tarjeta .wp-reel/.wp-reels ya existe) --- */
.wp-reel__title{font-family:var(--wp-display);font-weight:400;font-size:26px;text-transform:uppercase;
  color:var(--wp-white);line-height:1}
.wp-reel__tag{font-family:var(--wp-mono);font-size:10.5px;letter-spacing:.1em;color:var(--wp-yellow);
  margin-top:6px;text-transform:uppercase}
/* Última tarjeta del carrusel de reels ("Your turn"): variante de contenido plano, sin vídeo. */
.wp-reel--cta{background:var(--wp-cyan);color:var(--wp-navy);display:flex;flex-direction:column;
  justify-content:flex-end;padding:22px}

/* --- 19.14 Footer global (Global_Footer) ---
   CAUSA RAÍZ del bug de scroll horizontal en todas las páginas (ver informe de @devops,
   2026-08-19): esta rejilla de 4 columnas iba con style="grid-template-columns:..." inline,
   sin colapso móvil. Un grid item con contenido intrínseco que no puede partirse (el email
   "tours@walkingplanets.com") no encoge por debajo de su min-width:auto implícito, así que a
   ≤860px desbordaba el viewport y arrastraba scroll horizontal a TODA la página. Con esta
   clase, colapsa a 1 columna en 860px como el resto del sitio — el parche `!important` de
   theme-fixes.css ya no hace falta (avisar a @devops para que lo retire y revalide, no
   tocarlo desde aquí). Fuente: Walking Planets Home.dc.html líneas 601-635. */
.wp-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;
  padding-bottom:56px;margin-top:60px;border-bottom:1px solid var(--wp-line-dark)}
@media (max-width:860px){
  .wp-footer__grid{grid-template-columns:minmax(0,1fr);gap:36px}
}
.wp-footer__logo{height:60px;width:auto;display:block;margin-bottom:22px}   /* 2026-09-09 logo hi-res: era 66px (encargo logo clean = 60px) */
.wp-footer__brand-tagline{margin:0 0 18px;font-family:var(--wp-display);font-size:22px;
  text-transform:uppercase;color:var(--wp-yellow);line-height:1.1}
.wp-footer__brand-note{margin:0;font-family:var(--wp-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.wp-footer__col{display:flex;flex-direction:column;gap:12px;font-size:15.5px}
.wp-footer__col-title{font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
.wp-footer__col a{color:var(--wp-white)} /* override: .wp-page a es celeste por defecto */
.wp-footer__note{color:rgba(255,255,255,.64);font-size:14.5px;line-height:1.5}
.wp-footer__bottom{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;
  padding-top:26px;font-family:var(--wp-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.wp-footer__legal-links{display:flex;gap:18px;flex-wrap:wrap}
.wp-footer__legal-links a{color:rgba(255,255,255,.64)}

/* --- 19.15 Utilidad de ritmo vertical ---
   "Espacio tras un H2/kicker antes del siguiente bloque" se repite igual (54px) en Partners,
   Reviews y otros — una sola utilidad en vez de reinventar el margin-top en cada componente. */
.wp-mt-lg{margin-top:54px}

/* --- 19.16 Hero: breadcrumb / meta-line, píldoras de datos, fila de acciones ---
   Huecos propios de Global_Hero (BUILD-SPEC §4.3) que no pidió ningún otro agente pero
   seguían el mismo problema: layout de composición sin clase. Ver Tour Sagrada Familia.dc.html
   (breadcrumb, píldoras) y wp-assets/demo.html (fila de acciones bajo el H1, clase wp-fade-2
   ya existente — SOLO dispara la animación, no aporta layout; estas clases sí lo aportan). */
.wp-hero__meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--wp-mono);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);
  margin-bottom:26px}
.wp-hero__meta-row a{color:rgba(255,255,255,.7)} /* override: .wp-page a es celeste por defecto */

.wp-hero__pills{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.wp-pill{border:1px solid rgba(255,255,255,.45);padding:11px 16px;font-family:var(--wp-mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.wp-pill--highlight{border-color:var(--wp-yellow);color:var(--wp-yellow)}

.wp-hero__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:36px;margin-top:34px}
.wp-hero__ctas{display:flex;gap:14px;flex-wrap:wrap}
.wp-hero__counters{margin-left:auto;display:flex;gap:34px;align-items:flex-end}
.wp-hero__counter-value{font-family:var(--wp-display);font-size:38px;line-height:1}

/* --- 19.17 Partners: fila de logos de la marquesina + cierre ---
   CORRECCIÓN (2026-08-19): la marquesina de Partners NO son logos, son NOMBRES en texto Anton
   (Walking Planets Home.dc.html L583-590, About Us.dc.html L190-197) — mismo mecanismo que
   .wp-marquee--light ya trae en walking-planets.css (26px, navy, opacity .75, 54s), solo hacía
   falta el wrapper de la fila de texto, no de logos. .wp-partners__logo-row/__logo quedan sin
   uso real (nunca hubo logos de partner en el diseño) — no se borran por si algún día se
   sustituye texto por logos reales, pero el markup correcto usa __marquee-line de abajo. */
.wp-partners__marquee-line{flex:0 0 auto;padding-right:26px}
.wp-partners__logo-row{display:flex;align-items:center;gap:54px}
.wp-partners__logo{height:38px;width:auto}
.wp-partners__bottom{margin-top:54px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:20px;border-top:1px solid var(--wp-line-light);padding-top:34px}

/* Bottom "3 tarjetas" (About) — variante distinta del bottom simple de Home, mutuamente
   excluyentes dentro del mismo widget (ver render() de Global_Partners). About Us.dc.html L199-221. */
.wp-partners__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:860px){.wp-partners__cards{grid-template-columns:minmax(0,1fr)}}
/* 2026-09-10 delta diseño (About Us.dc.html): las tarjetas del widget global_partners llevan
   background:#FFFFFF en el diseño; aquí faltaba (quedaban transparentes sobre la sección). */
.wp-partners__card{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid rgba(14,52,87,.16);
  padding:34px 30px;color:var(--wp-navy);transition:border-color .25s ease}
.wp-partners__card:hover{border-color:var(--wp-cyan)}
.wp-partners__card-title{font-family:var(--wp-display);font-size:30px;text-transform:uppercase;line-height:1}
.wp-partners__card-text{font-size:16px;line-height:1.55;color:var(--wp-ink-soft);flex:1}
.wp-partners__card-cta{font-family:var(--wp-mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wp-cyan-ink)}

/* --- 19.18 Reviews: cita con borde amarillo (la cita en sí, no el footer/cite: ese ya usa
   .wp-meta existente) --- */
.wp-review-quote{margin:0;border-top:2px solid var(--wp-yellow);padding-top:26px}
.wp-review-quote p{margin:0 0 22px;font-size:21px;line-height:1.45}

/* --- 19.19 Trustbar: fila de sellos + fila de claims --- */
.wp-trustbar__badges{display:flex;flex-wrap:wrap;gap:34px;align-items:center}
.wp-trustbar__claims{display:flex;flex-wrap:wrap;gap:12px 28px;font-family:var(--wp-mono);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--wp-ink-soft)}

/* --- 19.20 CTA banner: espacio antes del botón --- */
.wp-cta-banner__action{margin-top:44px}

/* --- 19.20b CTA banner, variante "split" con foto (Contact.dc.html L175-186): H2 más
   pequeño que el .wp-h2--xl a sangre de las otras variantes — valor propio, no coincide con
   ningún otro modificador del catálogo. */
.wp-h2--split{font-size:clamp(30px,3.8vw,68px);line-height:.94;margin:0 0 20px}
.wp-cta-banner__text p{margin:0 0 26px;font-size:18px;line-height:1.6;color:var(--wp-ink-soft);max-width:46ch}
.wp-cta-banner__ctas{display:flex;gap:14px;flex-wrap:wrap}

/* --- 19.21 Botón ghost en celeste-ink, para fondo claro (Home/About Partners "Work with
   us"). Distinto de .wp-btn--ghost-dark (navy, ya existía en §17): este es el outline
   celeste sobre blanco. Sin hover propio: no estaba implementado en producción (el inline
   que sustituye no podía tener :hover), no se inventa uno nuevo sin confirmar con el diseño. */
.wp-btn--ghost-cyan{border:1px solid var(--wp-cyan-ink);color:var(--wp-cyan-ink);background:none}

/* ---- [2026-08-19] Movido por Alex desde walking-planets.css: añadidos de @wp-contact
   (form + side panel). El CSS del diseñador se mantiene intacto; esto vive aquí. ---- */

/* ---------- 17. CONTACTO — formulario (Clone & Customize del Form) + panel lateral ----------
   Gap del paquete de traspaso: Contact.dc.html no tenía clases equivalentes en este fichero
   (sólo wp-chips/wp-chip, reutilizados tal cual para los 5 chips de tipo de consulta). Añadido
   por @frontend con los valores exactos del diseño y la misma convención de tokens del resto
   del fichero. El espaciado entre filas/columnas del formulario NO se resuelve aquí: usa los
   controles nativos "Rows Gap" (26px) / "Columns Gap" (22px) del propio Form, con default ya
   fijado en WpContact_02InquiryForm. */
.wp-form .elementor-field-type-hidden{display:none}
.wp-form .elementor-field-label{display:block;margin-bottom:10px;font-family:var(--wp-mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.64)}
.wp-form .elementor-field-textual{background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.35);padding:12px 2px;font-family:var(--wp-body);
  font-size:17px;color:var(--wp-white);outline:none;border-radius:0;
  transition:border-color .25s ease}
.wp-form .elementor-field-textual:focus{border-bottom-color:var(--wp-cyan)}
.wp-form textarea.elementor-field-textual{border:1px solid rgba(255,255,255,.35);padding:16px;
  line-height:1.5;resize:vertical}
.wp-form textarea.elementor-field-textual:focus{border-color:var(--wp-cyan);border-bottom:1px solid var(--wp-cyan)}
.wp-form .elementor-button{border:0;cursor:pointer;background:var(--wp-cyan);color:var(--wp-navy);
  font-family:var(--wp-mono);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:19px 32px;border-radius:2px;transition:background .25s ease}
.wp-form .elementor-button:hover{background:var(--wp-yellow)}

/* FIX (2026-08-19, @frontend, P0 hallado por @team-lead con contraste real: "Send it over →"
   2.51:1, blanco sobre cian). La regla de arriba ya tiene el color correcto según el diseño
   (Contact.dc.html:141, `background:#00B2D8;color:#071C33` — idéntico a `.wp-btn--primary`),
   pero PIERDE por especificidad contra el CSS que Elementor genera por widget/página
   (`wp-content/uploads/elementor/css/post-43.css`, regla real:
   `.elementor-43 .elementor-element.elementor-element-2ec5212 .elementor-button[type="submit"]
   {color:#ffffff}`, 5 clases/atributos = 0,5,0 — el widget de Form serializa SIEMPRE su color de
   texto, incluido el default blanco, así que reaparece en cualquier instancia/página nueva de
   este widget, no solo en Contact). Fix: subir la especificidad repitiendo `.wp-form` (técnica
   estándar, sin !important) a 0,6,0 — gana pase lo que pase el orden de encolado, y sin
   necesidad de fijarlo al ID de post/widget de una página concreta (cubre cualquier futura
   página con este mismo Form). Cubre :hover (que también perdía, mismo mecanismo) y
   :focus-visible (nunca se había fijado, quedaba en blanco-sobre-cian igual al estado normal
   sin foco). */
.wp-form.wp-form.wp-form.wp-form.wp-form .elementor-button{color:var(--wp-navy)}
.wp-form.wp-form.wp-form.wp-form.wp-form .elementor-button:hover,
.wp-form.wp-form.wp-form.wp-form.wp-form .elementor-button:focus-visible{color:var(--wp-navy)}

/* FIX (2026-08-19, @frontend, P0 hallado por @team-lead: campos del formulario BLANCO SOBRE
   BLANCO — background rgb(255,255,255) + color rgb(255,255,255) = 1:1, el visitante no ve lo
   que escribe). Mismo mecanismo que el fix del botón de arriba, un nivel más adentro: el CSS
   que Elementor genera por página (`wp-content/uploads/elementor/css/post-43.css`) trae
   `.elementor-43 .elementor-element.elementor-element-2ec5212 .elementor-field-group
   .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff}` — 6 clases
   (.elementor-43, .elementor-element, .elementor-element-2ec5212, .elementor-field-group,
   .elementor-field, y la de dentro de :not()) = especificidad 0,6,0. Nuestra regla de la
   línea ~395 (`.wp-form .elementor-field-textual`, 0,2,0) pierde y dejaba puesto el
   background-color:#fff del widget serializado, con nuestro color:var(--wp-white) encima.
   El color YA era el correcto (blanco, según Contact.dc.html:133-137,
   `style="background:transparent;...color:#FFFFFF"`); solo el fondo estaba mal. Fix: subir
   especificidad repitiendo `.wp-form` a 0,7,0 (misma técnica que el botón, sin !important) —
   `.elementor-field` también matchea el `<textarea>` (mismo bug ahí, confirmado en vivo).
   Cubre además ::placeholder (sin regla propia, quedaba con el gris por defecto del UA casi
   invisible sobre el panel oscuro) y el autorelleno del navegador (Chrome fuerza su propio
   fondo/color de campo autocompletado, que sin este fix vuelve a ser oscuro-sobre-oscuro). */
.wp-form.wp-form.wp-form.wp-form.wp-form.wp-form .elementor-field-textual{background-color:transparent}
.wp-form .elementor-field-textual::placeholder{color:rgba(255,255,255,.6);opacity:1}
.wp-form .elementor-field-textual:-webkit-autofill,
.wp-form .elementor-field-textual:-webkit-autofill:hover,
.wp-form .elementor-field-textual:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--wp-white);caret-color:var(--wp-white);
  -webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;
  transition:background-color 5000s ease-in-out 0s}

.wp-form .elementor-message{margin-top:16px;font-family:var(--wp-mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;flex-basis:100%}
.wp-form .elementor-message-success{color:var(--wp-yellow)}
.wp-form .elementor-message-danger{color:#FF8C8C}
.wp-contact-form__note{margin:26px 0 0;color:rgba(255,255,255,.6);line-height:1.7}

/* Sección justo debajo del hero: mismo .wp-section, sin duplicar el aire vertical del hero.
   Parametrizado (2026-08-19): Contact usa 20px, About "Own operations" usa 0 — mismo patrón,
   valor distinto, no se promedia (Legal.dc.html/Contact.dc.html vs About Us.dc.html línea 168). */
.wp-section--flush-top{padding-top:var(--wp-flush-top,20px)}

/* Formulario + panel lateral, misma proporción que Contact.dc.html (1.15fr / .85fr). */
.wp-contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:start}

.wp-side-panel{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.16)}
.wp-side-panel__block{background:var(--wp-navy-panel);padding:32px 30px}
.wp-side-panel__label{font-family:var(--wp-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wp-cyan);margin-bottom:14px}
.wp-side-panel__title{font-family:var(--wp-display);font-size:32px;text-transform:uppercase;
  color:var(--wp-white);line-height:1;display:block;margin-bottom:10px}
.wp-side-panel__title:hover{color:var(--wp-yellow)}
.wp-side-panel__text{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.7)}
.wp-side-panel__contact{display:block;font-size:19px;color:var(--wp-white);margin-bottom:8px}
.wp-side-panel__contact:last-child{margin-bottom:0}
.wp-side-panel__contact:hover{color:var(--wp-yellow)}
.wp-side-panel__intro{margin:0 0 10px;font-size:17px;line-height:1.55;color:var(--wp-white)}
.wp-side-panel__links{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.wp-side-panel__links a{font-family:var(--wp-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wp-cyan)}
.wp-side-panel__links a:hover{color:var(--wp-yellow)}

@media (max-width:860px){
  .wp-form .elementor-field-group{flex-basis:100% !important;max-width:100% !important;
    padding-left:0 !important;padding-right:0 !important}
  .wp-side-panel__block{padding:26px 22px}
  .wp-contact-grid{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   21. SEGUNDA RONDA DEL CATÁLOGO (2026-08-19) — About/Legal, Tour, Guides/Artículo
   --------------------------------------------------------------------------
   Recopilado y verificado por @build-spec a partir de las propuestas de
   @wp-about-legal, @wp-tour y @wp-guides-article (cada valor viene de su
   .dc.html, referenciado en el comentario de cada bloque).
   ========================================================================== */

/* --- 21.1 Marco de imagen con aspect-ratio configurable (About "Own operations",
   About Us.dc.html ~L170). Genérico por si aparece con otro ratio en otra página. */
.wp-media-frame{position:relative;aspect-ratio:var(--wp-frame-ratio,4/3);overflow:hidden}
.wp-media-frame img,.wp-media-frame>div{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:center}

/* --- 21.2 Legal: índice + cuerpo (Legal.dc.html L116). Ancho literal, no variable: es la
   única página que usa este patrón exacto (250px fijo, no un ratio proporcional). */
.wp-legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:70px}
@media (max-width:860px){.wp-legal-layout{grid-template-columns:minmax(0,1fr)}}

/* --- 21.3 Ritmo de los <article> de Legal #03 (Legal.dc.html L129/146/179/196/232).
   Base = los 3 artículos "de en medio"; --first quita el padding superior (va justo tras el
   índice); --last quita el padding inferior y el borde. */
.wp-legal-article{padding:60px 0;border-bottom:1px solid var(--wp-line-light)}
.wp-legal-article--first{padding-top:0}
.wp-legal-article--last{padding:60px 0 0;border-bottom:0}

/* 21.3-fix (QA 2026-08-19, Legal @1440): dos `.wp-section` de esta página llevan el
   padding base (110/110) en vez del que pide el `.dc.html` (verificado idéntico en los
   3 anchos, no es responsive): el cuerpo "Legal notice" va a 80px/100px y el CTA final
   "Still got a question?" a 80px/80px. A 1440 la página quedaba en 105,9% (por encima
   del 105% permitido); parte del exceso real es el aviso "Pending from Walking Planets
   before launch" (intencionado, no se toca — AGENT-BRIEF-COMMON.md). Scopeado a
   `body.page-id-44` (Legal, único uso de ambas clases en esta página) para no tocar
   `.wp-section--cyan`/`--light` de ninguna otra página del sitio. */
body.page-id-44 .wp-section--light{padding-top:80px;padding-bottom:100px}
body.page-id-44 .wp-section--cyan{padding-top:80px;padding-bottom:80px}

/* 21.3-fix-b (QA 2026-08-19, About @768): la franja de contadores (03-counters-strip.php)
   iba con `flex:1 1 220px` INLINE en cada item — el `.dc.html` la apila en 1 sola columna
   a 768px (verificado: contenedor a 732px de ancho pero altura 380px = 4 filas, no 2x2;
   a 1440 sigue en una fila), mientras que a 712px de ancho real cabían 2 por fila (220*2+
   gap<712) y la franja quedaba ~208px más corta que el diseño — la contribución mayor al
   92,2% de la página. Se sacó el `flex-basis` del inline a esta clase para poder pedir
   `100%` en el mismo breakpoint de 860px que ya usan tour-grid/galería/sticky (no se
   inventa uno nuevo). Contribuye además a bajar el padding de la sección: el `.dc.html`
   usa 70px/70px aquí, no los 110px/110px de `.wp-section` base — scopeado al widget
   exacto (`elementor-widget-wp_about_counters_strip`, único uso en el sitio). */
.wp-counters-strip__item{flex:1 1 220px}
@media (max-width:860px){.wp-counters-strip__item{flex:1 1 100%}}
.elementor-widget-wp_about_counters_strip .wp-section{padding-top:70px;padding-bottom:70px}

/* --- 21.4 Franja de confianza estática (Tour, sin animación de marquesina — ver nota del
   widget 02 en BUILD-SPEC §2). Modificador de .wp-marquee--cyan (ya existe) para el caso
   SIN .wp-marquee__track: solo aporta el padding horizontal que el track ya traía. */
.wp-marquee--static{padding-left:var(--wp-gutter);padding-right:var(--wp-gutter)}
.wp-trust-row{display:flex;flex-wrap:wrap;gap:14px 44px;align-items:center;
  justify-content:space-between;font-family:var(--wp-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700}
/* Ya colapsa bien en móvil por flex-wrap, no hace falta entrada en el breakpoint de 860px. */

/* --- 21.5 Titulares de sección propios de la página de Tour — 6 tamaños reales, cada uno
   de un bloque distinto de Tour Sagrada Familia.dc.html. NO se fusionan los que salen
   "parecidos" (story/faq, related/gallery): fusionarlos sería promediar dos valores
   distintos del diseño, y la regla del proyecto es variante, no promedio. Los dos que SÍ
   comparten un modificador (highlights/timeline) son un valor literalmente idéntico en el
   diseño, no una aproximación. */
.wp-h3--tour-section{font-size:clamp(26px,3vw,46px)} /* highlights (L165) + timeline (L~180), idénticos */
.wp-h2--tour-meeting{font-size:clamp(30px,3.6vw,64px)}
.wp-h2--tour-story{font-size:clamp(32px,3.9vw,68px)}
.wp-h2--tour-faq{font-size:clamp(30px,4vw,72px)}
.wp-h2--tour-related{font-size:clamp(30px,4.2vw,80px)}
.wp-h2--tour-gallery{font-size:clamp(32px,4.4vw,84px)}
/* 09-included usa un h3 de columna con tamaño FIJO 32px (sin clamp) — no es este patrón,
   usa .wp-h3 base (ya 28px, ver nota) o, si difiere, pide un modificador aparte: no lo mezcles. */

/* --- 21.6 Lista numerada — modificador para el caso de Tour "What makes it ours"
   (highlights), reutilizando la base .wp-list--numbered ya publicada (Legal). Incluida
   añade el número amarillo #30px/12px en vez de celeste-ink #28px/11.5px, y texto a 18px. */
.wp-list--numbered--highlights li{padding:22px 0}
.wp-list--numbered--highlights .wp-list--numbered__n{font-size:12px;color:var(--wp-yellow);
  flex:0 0 30px}
.wp-list--numbered--highlights li>span:last-child{font-size:18px}

/* FIX (2026-08-19, @frontend, P1 hallado por @team-lead: la negrita «and» del punto 01
   ilegible — color rgb(7,28,51) sobre fondo rgb(7,28,51), ambos son var(--wp-navy)). La base
   `.wp-list--numbered strong{color:var(--wp-navy)}` (21.x más arriba) es correcta para Legal,
   donde esta lista vive sobre fondo CLARO — pero Tour reutiliza la misma base con el
   modificador `--highlights` sobre fondo OSCURO (`.wp-section` navy), y ahí la negrita queda
   invisible. Diseño (Tour Sagrada Familia.dc.html:166): `<strong style="color:#FFFFFF">and
   </strong>`. Misma especificidad que la base (0,2,0): gana por ir DESPUÉS en el fichero,
   scopeado solo a `--highlights` — no toca Legal. */
.wp-list--numbered--highlights strong{color:var(--wp-white)}

/* --- 21.7 Galería de 4 columnas (Tour, Tour Sagrada Familia.dc.html L275-283).
   CRÍTICO: sin colapso móvil esto reproduce la MISMA familia de bug que el scroll horizontal
   del footer — añadido aquí mismo, nunca dejar un grid nuevo sin su @media(max-width:860px). */
.wp-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wp-gallery-grid__item{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--wp-navy-panel)}
.wp-gallery-grid__item img,.wp-gallery-grid__item video{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover}
.wp-gallery-grid__item--wide{grid-column:span 2}
/* 2026-09-10 (registro §12): la rejilla se adapta al nº de fotos. Con menos de 4, los `span`
   del mosaico se anulan — si no, una sola foto marcada `tall` seguiría midiendo media pantalla
   dentro de su columna única. La proporción vuelve a 16/10, que es la del bloque. */
.wp-gallery-grid--n1{grid-template-columns:minmax(0,1fr)}
.wp-gallery-grid--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wp-gallery-grid--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wp-gallery-grid--n1 .wp-gallery-grid__item,
.wp-gallery-grid--n2 .wp-gallery-grid__item,
.wp-gallery-grid--n3 .wp-gallery-grid__item{grid-column:auto;grid-row:auto;aspect-ratio:16/10}
.wp-gallery-grid__item--tall{grid-row:span 2;aspect-ratio:4/5}
@media (max-width:860px){
  .wp-gallery-grid{grid-template-columns:minmax(0,1fr)}
  .wp-gallery-grid__item--wide,.wp-gallery-grid__item--tall{grid-column:auto;grid-row:auto}
  .wp-gallery-grid__item--wide{aspect-ratio:16/10}
  /* 21.7-fix (QA 2026-08-19, Tour @768): el `.dc.html` mantiene la proporción 4:5 de las
     celdas "tall" incluso apiladas en 1 columna (verificado también a 375 — nunca cambia
     a 16:10). El reset de móvil de más arriba las forzaba a 16:10 igual que las normales,
     que era la causa real de que la galería quedara ~890px más corta que el diseño a
     768px (5 filas iguales en vez de 2 más altas). No se toca `--tall` aquí: conserva su
     aspect-ratio:4/5 de la línea 524 en todos los anchos. */
}

/* --- 21.8 Panel incluido / no incluido (Tour, Tour Sagrada Familia.dc.html L286-313).
   Mismo aviso que la galería: colapso propio obligatorio, no reutilizar .wp-cols-2 (esto no
   es un layout de composición libre, es un componente con su propio efecto de separador
   de 2px, igual que .wp-facts/.wp-data-grid). */
/* 2026-09-10: el hueco blanco bajo "What's included / Not included" NO era falta de datos ni un
   min-height: era el `stretch` por defecto de CSS Grid — las dos columnas se igualaban a la mas
   alta y el fondo blanco de `__col` rellenaba el sobrante. `align-items:start` solo no basta:
   con el fondo en el propio grid, el hueco lo seguia pintando el contenedor. Por eso el fondo
   pasa a transparent y el separador de 2px se hace con box-shadow, que no fuerza altura. */
.wp-split-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2px;background:transparent;align-items:start}
.wp-split-panel__col:first-child{box-shadow:2px 0 0 var(--wp-line-light)}
@media (max-width:860px){.wp-split-panel{grid-template-columns:minmax(0,1fr)}.wp-split-panel__col:first-child{box-shadow:none}}
@media (max-width:860px){.wp-split-panel{grid-template-columns:minmax(0,1fr)}}
.wp-split-panel__col{background:var(--wp-white);padding:44px 42px}
.wp-check-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.wp-check-list li{display:flex;gap:14px}
.wp-check-list--included li::before{content:"\2713";color:var(--wp-cyan-ink);flex:0 0 auto;font-weight:700}
.wp-check-list--excluded li::before{content:"\2014";color:var(--wp-muted);flex:0 0 auto}
.wp-check-list__item--starred{padding-top:12px;border-top:1px solid var(--wp-line-light);font-weight:700}

/* 21.8-fix (QA 2026-08-19, Tour @1440/@768): en el `.dc.html` esta sección va SIN
   padding-top (queda pegada a la galería de arriba, es un bloque continuo) mientras que
   `.wp-section` (walking-planets.css:53) reparte el mismo valor arriba y abajo — no hay
   forma de pedir solo la mitad desde la clase base. Contribuía +110px de más en ambos
   anchos (comprobado con getComputedStyle: real 110px/110px, diseño 0px/110px). Scopeado
   al widget exacto (`elementor-widget-wp_tour_included`, único uso de 09-included.php),
   así no afecta a ningún otro `.wp-section` del sitio. */
.elementor-widget-wp_tour_included .wp-section{padding-top:0}

/* 21.8-fix-b (QA 2026-08-19, Tour @1440): FAQ ("Before you book") va con
   padding:100px en el `.dc.html`, no los 110px de `.wp-section`. A 1440 el total de la
   página quedaba a 8881px frente al 105% permitido (8875px) — 6px por encima, exacto al
   exceso de este único widget. Scopeado a `elementor-widget-wp_tour_faq` (12-faq.php,
   uso único en Tour), no toca el resto de instancias de `.wp-section` del sitio. */
.elementor-widget-wp_tour_faq .wp-section{padding-top:100px;padding-bottom:100px}

/* --- 21.9 Marco del widget de reserva (Ventrata) — PERMANENTE aunque llegue la apiKey real:
   Ventrata pinta el interior (shadow DOM), nosotros seguimos controlando el marco.
   Tour Sagrada Familia.dc.html L198-266. */
.wp-ticket-card{background:var(--wp-white);color:var(--wp-navy);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
.wp-ticket-card__head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid rgba(14,52,87,.12)}
.wp-ticket-card__head>*,.wp-ticket-card__ticket-row>*{min-width:0} /* equivalente flex del guard
  minmax(0,…) de grid: sin esto, un precio/idioma más largo en ES/CA podría desbordar el marco
  (revisión de la auditoría de min-width, 2026-08-19) — el resto de filas flex de este archivo
  ya llevan flex-wrap, que resuelve el mismo problema de otra forma (envolviendo en vez de
  encoger), así que no necesitan este guard aparte. */
.wp-ticket-card__head-title{font-family:var(--wp-display);font-size:24px;text-transform:uppercase;line-height:1}
.wp-ticket-card__body{padding:22px}
/* Selector de idioma y calendario: SIEMPRE 2 y 7 columnas, nunca colapsan (son botones cortos
   y un calendario, no contenido que necesite apilarse) — por eso llevan mayor especificidad
   en vez de heredar cualquier regla genérica de colapso a 860px, replicando el mismo criterio
   que el propio diseño resolvía con el atributo data-keep-grid (Tour Sagrada Familia.dc.html
   L71/222): aquí basta con que NINGUNA regla de esta hoja las mencione en un @media 860px. */
.wp-ticket-card__lang-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:22px}
.wp-ticket-card__calendar-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;
  font-family:var(--wp-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wp-muted);margin-bottom:6px;text-align:center}
.wp-ticket-card__calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-bottom:22px}
.wp-ticket-card__calendar>*{aspect-ratio:1;border:0;font-family:var(--wp-body);font-size:15px;
  display:flex;align-items:center;justify-content:center} /* >* en vez de >button (2026-08-19,
  @wp-tour): las celdas de días pasados son <span aria-hidden="true"> de solo lectura en la
  maqueta, no <button> — mismo criterio que los botones de idioma, no interactivas de verdad */
.wp-ticket-card__ticket-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 0;border-bottom:1px solid rgba(14,52,87,.1)}

/* --- 21.10 Guides/Artículo: 3 pendientes de @wp-guides-article --- */
.wp-btn--block{display:block;text-align:center} /* combinar con .wp-btn(--primary/--dark) existente */
.wp-newsletter__lead{margin-top:20px;max-width:46ch}
/* "Load more guides": NO se crea clase nueva — reutilizar .wp-mt-lg (ya existe, 54px) +
   text-align:center inline si hace falta, o envolver en <div class="wp-shell" style="text-align:center">.
   Si 54px no coincide con el margin-top:56px real del diseño, avisar: la diferencia de 2px no
   es perceptible y no merece una clase para un solo uso — pero se documenta aquí la decisión. */

/* ==========================================================================
   22. ESCALA TIPOGRÁFICA — variantes de H1/H2/H3 que faltaban (2026-08-19, @frontend)
   --------------------------------------------------------------------------
   CAUSA RAÍZ (PLAN §4-ter, medida por @team-lead): el prototipo `.dc.html` estiliza cada
   titular con un `clamp()` INLINE distinto por bloque (20 valores de h2 en el sitio); el
   catálogo de clases de esta hoja solo cubría 6 (`.wp-h2` base + `--xl`/`--sm`/`--split` +
   las 6 de Tour de la sección 21). Los widgets que no tenían variante propia caían en la base
   `.wp-h2{clamp(38px,5.2vw,96px)}` o en `--xl{clamp(46px,7.6vw,148px)}`, hasta ~60% más grande
   que el valor real del diseño para ese bloque. Cada clase de abajo es el `clamp()` LITERAL
   del `.dc.html` de su página — regla de "no promediar" de @build-spec (CSS-CLASSES.md), igual
   que hizo la sección 21 con Tour. `@build-spec` no está activo en esta sesión; firmado como
   @frontend siguiendo su mismo formato para que sea trazable si retoma el catálogo.
   ========================================================================== */

/* --- 22.1 Home — H2 sin variante propia --- */
/* 05-video-strip "Ninety seconds of Barcelona, the way we walk it" */
.wp-h2--home-video{font-size:clamp(34px,5vw,92px)}
/* 06-category-accordion "Seven ways to explore Barcelona" y 07-tours-filterable-grid
   "First time? Fifth time?..." — mismo valor real en el diseño, una sola clase */
.wp-h2--home-ways{font-size:clamp(40px,5.6vw,104px)}
/* 11-why-us "Local guides. Real stories." */
.wp-h2--home-whyus{font-size:clamp(38px,5vw,92px)}
/* Global_CtaBanner (modo sin imagen) en Home: "The world is full of places..."
   Cierre de paridad (2026-08-19, @frontend): base `.wp-h2{line-height:.9}` (walking-planets.css:64)
   daba 128 a 1920; Walking Planets Home.dc.html, sección de este H2: `line-height:.86` → 122. */
.wp-h2--home-cta{font-size:clamp(44px,7.4vw,150px);line-height:.86}

/* --- 22.2 Global_Partners — "Good things are better together" difiere Home/About
   (ya documentado en la cabecera del propio widget: heading_stacked decide el layout;
   aquí decide también la escala, mismo control, sin añadir uno nuevo) --- */
.wp-h2--partners-cols{font-size:clamp(38px,5.2vw,98px)}    /* Home, heading_stacked='' */
.wp-h2--partners-stacked{font-size:clamp(32px,4.4vw,86px)} /* About, heading_stacked='yes' */

/* --- 22.3 Global_Reviews — mismo patrón: el control `background` ya distingue la página
   (dark=Home, cyan=Tour), se deriva la escala de él sin control nuevo --- */
/* Cierre de paridad (2026-08-19, @frontend): Walking Planets Home.dc.html, sección "They came
   for Barcelona...": `line-height:.92;max-width:24ch` (base .wp-h2 daba .9→79; el diseño pide
   .92→81, y sin max-width el titular no rompía línea donde el diseño manda). */
.wp-h2--reviews-dark{font-size:clamp(36px,4.8vw,88px);line-height:.92;max-width:24ch}  /* Home "They came for Barcelona..." */
/* Tour Sagrada Familia.dc.html, sección "They queued for nothing...You won't.":
   `max-width:24ch` (mismo valor real que reviews-dark, coincidencia del diseño, no promediada).
   El padding-top de su sección (96px) es de página — va en page-tour-guide.css, no aquí. */
.wp-h2--reviews-cyan{font-size:clamp(32px,4.6vw,88px);max-width:24ch}  /* Tour "They queued for nothing..." */

/* --- 22.4 About — H2 sin variante propia --- */
/* 02-manifesto-white "You don't buy a tour. You make a memory." — llevaba wp-h2--xl (148px),
   el real es más pequeño; NO es el mismo bloque que el manifiesto de Home pese al nombre del
   widget compartido */
.wp-h2--about-manifesto{font-size:clamp(38px,6.4vw,132px)}
/* 04-six-rules "Six rules we never break" */
.wp-h2--about-rules{font-size:clamp(34px,4.6vw,92px)}
/* 05-own-operations "Own operations, not a booking page": clamp(30px,3.8vw,68px) es un valor
   YA existente — coincide exacto con .wp-h2--split (definida en §17 para el CTA banner con
   foto). Se reutiliza esa clase, no se crea una nueva (regla de la sección 21: mismo valor,
   misma clase). Ver wp-about/05-own-operations.php. */

/* --- 22.5 Global_CtaBanner (modo sin imagen) — 3 páginas más, 3 valores reales:
   "Now go and find the turtles." (Guide/Artículo), "Still got a question? Ask a human."
   (Legal, EXCLUIDA de mi alcance — @causa-raiz-elementor aplica la clase en su _elementor_data,
   ver SendMessage). --- */
/* Cierre de paridad (2026-08-19, @frontend): max-width en `ch`, leído de cada `.dc.html`.
   Guide Sagrada Familia.dc.html: `max-width:22ch` — el resto del bloque (padding-top:90px de
   su sección y el breakout a ancho completo) es de página, en page-tour-guide.css.
   Legal.dc.html: `max-width:24ch`. */
.wp-h2--cta-guide{font-size:clamp(32px,5vw,96px);max-width:22ch}
.wp-h2--cta-legal{font-size:clamp(30px,4.4vw,84px);max-width:24ch}

/* --- 22.6 Legal — H3 de subsección: 26px fijo, NO los 28px de .wp-h3 base --- */
.wp-h3--legal{font-size:26px}

/* --- 22.7 Artículo/Guía — el H2 "Practical, if you're going this week" es más pequeño que
   los H2 numerados de la misma lista (1..5), y ambos comparten la clase genérica
   `.wp-article-body h2` (contenido WYSIWYG editable, no un widget con clase propia).
   Distinción estructural real del `.dc.html` (Guide Sagrada Familia.dc.html L155): es el
   ÚNICO h2 del cuerpo seguido directamente de una lista de checks, los numerados van seguidos
   de <p>. Verificado en el HTML servido: mismo patrón (post 45), sin div envolvente que
   hiciera falta selector más complejo. */
.wp-article-body h2:has(+ ul){font-size:clamp(24px,2.6vw,38px)}

/* --- 22.8 H1 del hero — 6 de las 7 páginas caían en 'wp-h1--xl' (178px, el tamaño exclusivo
   de Home) porque el control `variant` del hero no estaba puesto en ninguna página salvo
   Contact (verificado por _elementor_data real, 2026-08-19). El fix de fondo es asignar el
   `variant` correcto a cada página (ver hero.php, sin CSS nuevo: ya usa wp-h1/wp-h1--xl según
   variant) — estas clases cubren la precisión que 'interior'/'short' no distinguen por sí
   solos (ambas caen hoy en el mismo .wp-h1 base de 148px, y el diseño real difiere por página). */
.wp-h1--about{font-size:clamp(46px,8vw,158px)}         /* About "Local guides. Real stories." */
/* Cierre de paridad (2026-08-19, @frontend): Contact.dc.html, H1 "Tell us what you want to
   live.": `max-width:20ch` (sin él el titular no rompía línea donde manda el diseño). */
.wp-h1--contact{font-size:clamp(44px,7.6vw,150px);max-width:20ch}     /* Contact "Tell us what you want..." */
.wp-h1--compact{font-size:clamp(40px,6.4vw,124px);line-height:.88}     /* Guide + Legal, mismo valor real (2026-08-19, @frontend: el .dc.html de ambas usa line-height:.88, distinto del .86 heredado de .wp-h1 base — verificado en "Guide Sagrada Familia.dc.html" L115 y "Legal.dc.html" L106) */
/* `.wp-h1--compact` es compartida (arriba) pero el max-width real DIFIERE por página —
   Legal.dc.html usa 24ch, Guide Sagrada Familia.dc.html usa 26ch (private/tools/qa/paridad.js,
   2026-08-19) — así que no puede ir en la clase base sin filtrarse a la otra. Legal aquí
   (scope .page-id-44, mismo patrón que §31f/g); la de Guide va en page-tour-guide.css
   (scope .single-post, esa página es de ese fichero). */
.page-id-44 .wp-h1--compact{max-width:24ch}
.wp-h1--travelguides{font-size:clamp(44px,7.4vw,146px)} /* Travel Guides "Barcelona, written..." */

/* --- 22.9 Travel Guides — 2 huecos más, cazados por medición real en navegador (Playwright,
   375/768/1440), no por lectura de código: verificaron dentro de tolerancia todo lo de arriba
   salvo estos dos, que reutilizaban `.wp-h2--sm` de Legal (clamp(28px,3.4vw,54px)) para un
   valor distinto del diseño de esta página. --- */
/* wp-guides/03-featured-article.php: "Sagrada Família: what to look at when everyone is
   looking up" (Travel Guides.dc.html) */
.wp-h2--guides-featured{font-size:clamp(30px,3.6vw,62px)}
/* wp-guides/05-newsletter.php: "One good story a month. Nothing else." */
.wp-h2--guides-newsletter{font-size:clamp(32px,4.6vw,92px)}

/* --- 23. Acordeón de categorías (home, 06-category-accordion.php) — imagen de hover por fila
   (2026-08-19, @frontend, Walking Planets Home.dc.html: cada botón lleva `style-hover` con su
   propia foto + un degradado más claro que revela la imagen — walking-planets.css:172 ya tenía
   el comentario "el degradado casi opaco se aclara en hover para revelar la foto" pero nunca se
   implementó). El widget pone `--wp-cat-bg`/`--wp-cat-hover-bg` inline por fila (solo las
   VARIABLES, nunca la propiedad `background-image` — ver siguiente párrafo), con fallback de
   `--wp-cat-hover-bg` a la foto de reposo si la fila no trae una propia, así ninguna variable
   queda vacía.
   ⚠️ CORREGIDO (2026-08-19, cazado con Playwright real, no bastaba con que el atributo
   existiera): la primera versión ponía `background-image` inline (especificidad 1,0,0,0), que
   SIEMPRE gana a cualquier regla externa aunque sea `:hover` — el hover no cambiaba la imagen
   nunca, aunque la variable y la regla de abajo eran correctas. Por eso el estado de REPOSO
   también se declara aquí, no inline, para que ambos estados (reposo y hover) vengan de la
   hoja externa y el `:hover` gane por especificidad normal de pseudo-clase. */
/* 2026-08-26 (@wordpress-elementor, feedback 03 §1): el velo de reposo baja de .96 a .78 para
   que la foto de cada categoría se intuya y la web deje de "parecer un día nublado". Contraste
   del texto blanco sobre el resultado medido pixel a pixel en el sitio real, no estimado. */
.wp-cat__head{background-image:linear-gradient(rgba(14,52,87,.78),rgba(14,52,87,.78)),var(--wp-cat-bg)}
/* Gateado a `@media(hover:hover)` para no descargar la imagen de hover en dispositivos
   táctiles (no hay hover ahí, y así tampoco se referencia el `url()` en ninguna regla que les
   aplique). */
@media (hover:hover) and (pointer:fine) {
  .wp-cat__head:hover{background-image:linear-gradient(rgba(14,52,87,.42),rgba(14,52,87,.62)),var(--wp-cat-hover-bg)}
}

/* --- 24. FIX contraste/interacción (2026-08-19, @frontend). Los 3 informe:
   private/.dev/qa/2026-08-19_qa-interacciones-responsive.md (P0-3, P0-4, P1-2). No se toca
   walking-planets.css (diseño aprobado, CLAUDE.md §4): las tres reglas de abajo GANAN por
   especificidad, ninguna usa !important. --- */

/* 24.1 P0-3: texto invisible en los botones .wp-btn--*.
   Causa: .wp-page a (walking-planets.css:47, especificidad 0,1,1) gana a los modificadores
   .wp-btn--primary/--dark/--ghost/--ghost-dark/--ghost-cyan (una sola clase cada uno, 0,1,0 —
   incluidos los dos últimos aunque vivan aquí mismo en extras.css), aunque el botón sea un <a>
   y ambas reglas casen. Real: "Book now" cian sobre cian, ratio 1:1, en las 7 páginas
   (cabecera global) + "Find your experience"/"Check availability →"/"From €49 · see dates".
   Fix: combinar con `.wp-btn`, que TODO botón lleva siempre junto al modificador en el markup
   (verificado en los 13 sitios donde se renderiza .wp-btn en starter-widgets/) — sube a 0,2,0,
   gana sin necesidad de tocar el fichero del diseñador. Cubre también :hover, que sin esto
   pierde igual contra `.wp-page a:hover` (0,2,1: éste SÍ le gana a un simple `:hover` de una
   clase, 0,2,0) y dejaba el botón primario invisible también al pasar el ratón (fondo Y texto
   en amarillo). No afecta a los `.wp-btn` usados como <button> (cookies de Legal): `.wp-page a`
   solo casa con elementos <a>. */
.wp-btn.wp-btn--primary{color:var(--wp-navy)}
.wp-btn.wp-btn--primary:hover{color:var(--wp-navy)}
.wp-btn.wp-btn--dark{color:var(--wp-white)}
.wp-btn.wp-btn--dark:hover{color:var(--wp-navy)}
.wp-btn.wp-btn--ghost{color:var(--wp-white)}
.wp-btn.wp-btn--ghost:hover{color:var(--wp-navy)}
.wp-btn.wp-btn--ghost-dark{color:var(--wp-navy)}
.wp-btn.wp-btn--ghost-dark:hover{color:var(--wp-cyan-ink)}
.wp-btn.wp-btn--ghost-cyan{color:var(--wp-cyan-ink)}

/* 24.2 P0-4: el filtro de chips no atenúa nada en cuanto la tarjeta ya hizo su animación de
   entrada. Causa: `.wp-reveal.is-in{opacity:1}` (walking-planets.css:236, 0,2,0, declarada
   DESPUÉS) empata en especificidad con `.wp-card.is-dimmed{opacity:.16}` (walking-planets.css:
   189, 0,2,0, declarada ANTES) — en un empate gana la regla posterior en el CSS final, así que
   `is-in` se come siempre a `is-dimmed`. La lógica JS es correcta (alterna la clase bien); es
   puramente CSS. Fix: subir la especificidad de `is-dimmed` envolviéndola con el contenedor
   real del grid filtrable, `.wp-cards` (Home #07 tours-filterable-grid, Travel Guides #04
   articles-grid — los 2 únicos wrappers con `data-filter-tags` dentro) → 0,3,0, gana sin tocar
   la animación de entrada (`is-in` se sigue aplicando igual, solo pierde el empate cuando
   además hay `is-dimmed`). 0.16 es el valor correcto y deliberado (CLAUDE.md §5): el usuario
   debe seguir viendo que hay más tarjetas aunque no coincidan con el filtro activo — no se
   sube a display:none ni se cambia el valor. */
.wp-cards .wp-card.is-dimmed{opacity:.16}

/* 24.3 P1-2: enlaces cian sobre fondo claro fallan AA (2.51:1, mínimo 4.5:1).
   Causa: `.wp-page a{color:var(--wp-cyan)}` (walking-planets.css:47) se aplica también dentro
   de secciones `.wp-section--light`, y --wp-cyan (#00B2D8) da 2.51:1 sobre blanco. El propio
   walking-planets.css YA define `--wp-cyan-ink:#0B6FA4` con el comentario "mismo acento legible
   sobre blanco" (línea 17) — 5.49:1, sí pasa AA — pero la regla base de enlaces no lo usa.
   Confirmado en Legal (wp-legal/03-legal-body.php: "Legal notice", "Privacy policy", email,
   teléfono), Partners "Work with us →" (global/partners.php), y el resto de widgets que usan
   `.wp-section--light` (cta-banner, tour/09-included, tour/13-related-tours, tour/08-gallery,
   about/02-manifesto-white, home/04-manifesto) — todos comparten el mismo fondo claro.
   Fix: mismo patrón ya usado en 19.14/19.16 de este fichero (override por ancestro, sin
   !important), con `:not(.wp-btn)` para no competir con el fix 24.1 de arriba — los botones
   dentro de una sección clara siguen su propio color de variante, no éste. No toca los enlaces
   sobre fondo oscuro (fuera de `.wp-section--light`): siguen con el --wp-cyan original.
   DOS RONDAS de corrección en la propia verificación (Playwright real, no a ojo) — el índice
   sticky de Legal (`[data-scrollspy]`, wp-legal/03-legal-body.php:176, vive DENTRO de esta
   misma `.wp-section--light`) también son <a>, y ES uno de los ejemplos reales del informe QA
   ("Legal notice", "Privacy policy", "Booking terms", "Cookies" — los 4 ítems del índice) que
   fallaban AA en su estado por defecto: 1ª ronda los excluyó enteros (`:not([data-scrollspy])`)
   y dejó su fallo AA sin corregir; el fix real es más quirúrgico — solo excluir la COMBINACIÓN
   `[data-scrollspy].is-active` (que ya gana bien su propio navy+blanco por especificidad,
   0,2,0 > 0,1,1 de `.wp-page a`, y a la que esta regla si no se excluye SÍ le gana por ir a
   0,2,1: el ítem activo pasaba a cian-ink sobre navy, ratio 3.13, peor que antes). El estado
   `:hover` de scrollspy (cian-ink, ya definido, ya AA) se deja fuera de esta regla del todo con
   `:not([data-scrollspy])`, para no competir con su color de hover propio sin necesidad. */
.wp-section--light a:not(.wp-btn):not([data-scrollspy].is-active){color:var(--wp-cyan-ink)}
.wp-section--light a:not(.wp-btn):not([data-scrollspy]):hover{color:var(--wp-navy)}

/* --- 25. Footer compacto (6 páginas interiores) — padding y grid (2026-08-19, @fix-footer-css)
   Tras el fix de render() en footer.php (@fix-footer-variantes, mismo día): la variante
   compacta ya renderiza el contenido correcto, pero seguía heredando el ritmo vertical de la
   variante completa de Home (padding 110/110 de .wp-section, gap H2→grid de 60px, separador de
   48/44px, etc.) — no el suyo propio. Valores de aquí COPIADOS literalmente de los 6 *.dc.html
   (About/Contact/Legal/Tour Sagrada Familia/Travel Guides/Guide Sagrada Familia), no estimados;
   verificados también que son CONSTANTES entre 375/768/1440 en el propio diseño (solo el
   padding lateral cambia, y eso ya lo cubre --wp-gutter/--wp-gutter-mobile sin tocar nada aquí).
   Home (footer completo, sin `.wp-footer__grid--compact`) NO se toca: sigue con
   --wp-section-y (110px) + los valores ya afinados a su propio .dc.html (96/60/56/26 reales,
   confirmado 1858px = control negativo).

   Selector `footer.wp-section:has(...)` en vez de editar footer.php (fuera de mi propiedad,
   ver comentario de cabecera del fichero) — mismo patrón `:has()` ya usado en este proyecto
   para el H2 del cuerpo del artículo (CSS-CLASSES.md §19, `.wp-article-body h2:has(+ ul)`).

   Dos sub-variantes reales dentro de "compacto" (ambas con `.wp-footer__grid--compact`, la
   diferencia es si la página lleva H2 grande antes del grid):
   - CON H2 (About/Travel Guides/Tour): padding-top 90px, gap H2→grid 54px, separador 48px.
   - SIN H2 (Contact/Legal/Guide): padding-top 80px, sin gap (grid es el 1er hijo), separador 44px.
   Comunes a las 6: padding-bottom del footer 40px, padding-top de la barra inferior 24px
   (Home usa 26px, valor distinto, por eso no se toca la regla base `.wp-footer__bottom`). */
footer.wp-section:has(.wp-footer__grid--compact){padding-top:80px;padding-bottom:40px}
footer.wp-section:has(.wp-footer__grid--compact):has(h2){padding-top:90px}

.wp-footer__grid--compact{padding-bottom:44px;margin-top:54px}
.wp-shell>.wp-footer__grid--compact:first-child{margin-top:0} /* sin H2 delante: el grid es el 1er hijo */
footer.wp-section:has(.wp-footer__grid--compact):has(h2) .wp-footer__grid--compact{padding-bottom:48px}

footer.wp-section:has(.wp-footer__grid--compact) .wp-footer__bottom{padding-top:24px}

/* Grid a 3 columnas reales (1.4fr 1fr 1fr, la variante compacta solo lleva 3 divs: logo+Explore+
   Contact) en vez de las 4 columnas de Home — evita la franja vacía a la derecha en desktop.
   Solo ≥861px: por debajo, la regla base `.wp-footer__grid{grid-template-columns:minmax(0,1fr)}`
   (línea ~283, dentro de @media max-width:860px) debe seguir ganando para el colapso a 1
   columna — de ahí el @media aquí, si no, al tener la misma especificidad y venir después en el
   fichero, esta regla ganaría también en móvil y rompería el colapso. */
@media (min-width:861px){
  .wp-footer__grid--compact{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
}

/* --- 27. Contact — cierre de la paridad de altura (2026-08-19, cierre Contact)
   Contact.dc.html L120: <section style="padding:20px 40px 100px"> envolviendo el grid de
   formulario+panel (L121: display:grid;grid-template-columns:1.15fr .85fr;gap:64px). En real
   ese wrapper es el contenedor Elementor `.wp-section.wp-section--flush-top` (padding-top ya
   correcto vía --wp-flush-top:20px por defecto) — pero su padding-bottom seguía en el
   `--wp-section-y` genérico (110px) en vez del 100px real de este bloque. `.wp-section--flush-top`
   la reutiliza también About "Own operations" (CSS-CLASSES.md §16/17), así que NO se toca la
   regla base: se acota por el ID real del contenedor de Contact (estable, no se reconstruye el
   bloque salvo edición manual en Elementor).

   CAUSA RAÍZ de la mayor parte del exceso de altura, no el gap (el `gap:64px` de `.wp-contact-grid`
   ya era correcto — comprobado con Playwright, el valor coincide con el del `.dc.html`): esta es
   una `e-con-boxed` de Elementor, que envuelve sus hijos reales en `.e-con-inner` — así que el
   `display:grid` de `.wp-contact-grid` solo tiene UN hijo (`.e-con-inner`) y el layout de 2
   columnas real lo resuelve el flex NATIVO de Elementor sobre `.e-con-inner`, no nuestra regla de
   grid. Consecuencia medida (Playwright, 375px): tanto `.wp-contact-grid` como el contenedor propio
   del panel (columna derecha) arrastraban el padding POR DEFECTO de cualquier `.e-con` de Elementor
   sin padding explícito (`--container-default-padding-*:10px` en los 4 lados, ver
   frontend.min.css) — 10px×2 en cada uno de los dos niveles, **20px de ancho perdidos DOS veces**
   (grid + columna del panel) que no existen en el diseño (su `<div style="display:grid">` no tiene
   ningún padding intermedio). Con menos ancho disponible, los párrafos de "Where we are" y
   "Already booked?" envolvían a una línea más de lo que envuelven en el `.dc.html` — de ahí el
   exceso de altura en esos 2 bloques del panel (296/339px reales vs 256/299px diseño), no una
   cuestión de gap ni de márgenes sueltos. Fix: anular el padding por defecto en los dos niveles
   donde se aplica dentro de este grid en concreto (no toca ningún otro `.e-con` del sitio, el
   selector está acotado a hijos directos de `.wp-contact-grid`). */
.wp-contact-grid{padding:0}
.wp-contact-grid>.e-con-inner>.e-con{padding:0}
.elementor-element-7a26b49.wp-section--flush-top{padding-bottom:100px}

/* Los chips de tipo de consulta reutilizan `.wp-chips` (walking-planets.css:201,
   margin:46px 0 40px) — valor pensado para otro contexto (filtro de tours de Home), donde los
   chips NO son el primer elemento de su columna. En Contact SÍ lo son
   (Contact.dc.html L124-130: el propio div de chips solo lleva `margin-bottom:36px`, sin margen
   superior) — el margen de 46px de arriba quedaba colapsando contra el contenedor y empujaba
   todo el formulario hacia abajo sin ninguna razón visual (no hay nada por encima del primer
   chip dentro de esa columna). Confirmado con Playwright: sin este override, el wrapper de
   Elementor de la columna del formulario mide 66px más que el propio `.wp-contact-form` — hueco
   en blanco, no contenido. */
.wp-contact-form .wp-chips{margin:0 0 36px}

/* --- 28. Contact — el grid de 2 columnas NO se aplicaba en desktop (2026-08-19, cierre Contact)
   Hallazgo posterior al fix de la §27, al comprobar el ratio en 1440px (135%, muchísimo peor que
   375/768px): el contenedor `.wp-contact-grid` es una `e-con-boxed` de Elementor, así que sus
   hijos reales (form + panel) NO son hijos directos de `.wp-contact-grid` — están envueltos en
   `.e-con-inner` (lo añade Elementor en cualquier container "boxed"). El `display:grid` de
   `.wp-contact-grid` solo tenía por tanto UN hijo (el propio `.e-con-inner`), así que nunca
   producía 2 columnas: el layout de 2 columnas real lo resolvía el `display:flex` NATIVO que
   Elementor pone en `.e-con-inner`, con `flex-direction:column` fijo (heredado del breakpoint
   configurado en el editor) — en TODOS los anchos, incluido desktop. Confirmado con Playwright a
   1440px: `.e-con-inner` medía `flex-direction:column`, formulario y panel apilados verticalmente
   ocupando solo el primer track del grid (722px de los 1256px disponibles), con el segundo track
   (533px) vacío. En móvil "funcionaba" por pura coincidencia — apilado es lo que tocaba ahí de
   todos modos — pero en desktop faltaba el layout de 2 columnas por completo.
   Fix: mover el `display:grid` real a `.e-con-inner` (el contenedor que de verdad tiene los 2
   hijos), anulando el `max-width`/`margin:0 auto` que Elementor le da por defecto (pensados para
   centrar contenido de ANCHO fijo dentro de un "boxed container", no para un grid a ancho
   completo). `.wp-contact-grid` en sí ya no necesita ser grid — se dejó sin `display` propio
   (hereda el `flex` de Elementor sobre 1 solo hijo, inerte y sin efecto visual). */
.wp-contact-grid>.e-con-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:64px;align-items:start;max-width:none;width:100%;margin:0}
@media (max-width:860px){
  .wp-contact-grid>.e-con-inner{grid-template-columns:minmax(0,1fr)}
}

/* 28b. Corrección del fix anterior: `.wp-contact-grid` seguía siendo `display:grid` con sus 2
   columnas propias (definición original de la clase, más arriba en este mismo fichero) — con
   `.e-con-inner` como único hijo, Elementor lo colocaba en el PRIMER track (1.15fr) y dejaba el
   segundo track (.85fr) vacío, así que `.e-con-inner` (ya con su propio grid de 2 columnas,
   §28) solo disponía del 57% del ancho real, no del 100%. `.wp-contact-grid` pasa a ser un
   contenedor simple de un único hijo a ancho completo — el grid de verdad vive en `.e-con-inner`. */
.wp-contact-grid.e-con{display:block} /* especificidad 0,2,0: Elementor define `.e-con{display:var(--display)}` (frontend.min.css) a la misma especificidad que un solo-class-selector — un `display:block` de una sola clase pierde el empate. Repetir `.e-con` (clase que Elementor ya pone en el elemento) sube a 0,2,0 sin usar !important. */

/* 28c. Un nivel más de anidamiento que se me había escapado: entre la sección y `.wp-contact-grid`
   hay un contenedor Elementor intermedio, `.wp-shell` (el mismo `.wp-shell` reutilizado en otras
   páginas para centrar contenido a max-width — CSS-CLASSES.md §"Guides/Artículo"), que también
   arrastraba el padding por defecto de 10px/lado (mismo mecanismo que §27). Como `.wp-shell` SÍ
   se reutiliza en otras páginas, no se toca la clase entera — solo cuando envuelve al grid de
   Contact, con `:has()` (mismo patrón ya usado en este fichero para el footer, §25). */
.wp-shell:has(.wp-contact-grid){padding:0}

/* 28d. El padding vertical de Elementor NO vive donde vive el horizontal: `.e-con` aplica
   `padding-inline-start/end` (izq/dcha) sobre SÍ MISMO, pero el `padding-block-start/end`
   (arriba/abajo) lo aplica sobre SU PROPIO `.e-con-inner` hijo, leyendo directamente de las
   custom properties `--padding-block-start/end` (=`--padding-top/bottom`) — el `padding:0`
   físico de la §27/28c solo tocaba la caja del elemento en sí, nunca esas variables, así que el
   padding vertical (10px arriba + 10px abajo = 20px) seguía aplicándose un nivel más adentro, en
   cada una de las dos columnas (formulario y panel). Confirmado con Playwright: el wrapper
   Elementor de cada columna medía 20px más que su contenido real (`.wp-contact-form`/
   `.wp-side-panel`). Sin esto la sección entera arrastraba +20px de alto por columna que no
   existen en el diseño. */
.wp-contact-grid>.e-con-inner>.e-con>.e-con-inner{padding-block-start:0;padding-block-end:0}

/* 28e. El mismo mecanismo de 28d se repite en los OTROS dos niveles de anidamiento (`.wp-shell`
   y el propio `.wp-contact-grid`): cada uno de ellos también tiene su propio `.e-con-inner` justo
   debajo, leyendo el padding vertical de SUS PROPIAS custom properties (no de las de sus hijos) —
   así que el `padding:0` de la §27/28c (una regla por nivel) no bastaba, hacía falta apuntar
   también al `.e-con-inner` de CADA nivel. 3 niveles × 20px (10 arriba + 10 abajo) = 60px de alto
   sobrante confirmado con Playwright antes de este fix (939px medidos vs 879px esperados sumando
   padding de sección + contenido). */
.wp-shell:has(.wp-contact-grid)>.e-con-inner,
.wp-contact-grid>.e-con-inner{padding-block-start:0;padding-block-end:0}

/* 28f. Último nivel del mismo mecanismo (28d/28e), esta vez en el propio contenedor de sección
   (`.elementor-element-7a26b49`, el mismo acotado por ID en la §27 para no afectar a
   `.wp-section--flush-top` en About): nuestro `padding-top`/`padding-bottom` de la §27 son
   propiedades físicas de NUESTRO CSS (`.wp-section`/`--wp-flush-top`), pero el elemento SIGUE
   siendo un `.e-con` de Elementor con su propio `--padding-top/bottom` interno (10px, sin
   overridear) que su `.e-con-inner` seguía aplicando POR ENCIMA de nuestro padding — 20px extra
   de alto que no aparecían al mirar el padding del wrap (ese se ve bien, 20/100), sino un nivel
   más adentro. Acotado por ID: no toca el `.wp-section--flush-top` de About. */
.elementor-element-7a26b49.wp-section--flush-top>.e-con-inner{padding-block-start:0;padding-block-end:0}

/* ---------- 29. Cierre de los 7 P2 de private/.dev/qa/2026-08-19_qa-visual-final.md (hallazgos
   12/15/16/19), 2026-08-19 @frontend. Solo componentes nuevos: nada de lo de arriba se toca. ---------- */

/* 29a. Nav activo (hallazgo 12) — header.php ya emite aria-current="page" en el enlace real
   (About/Contact/Travel guides, o el articulo de Guide colgando de Travel guides); solo faltaba
   el color. Misma especificidad (0,2,1) que la regla de hover de walking-planets.css:100
   (.wp-nav a:hover,.wp-nav a[aria-current="page"]{color:var(--wp-cyan)}) — al ir DESPUES en el
   cascade (esta hoja se encola tras walking-planets.css) gana sin necesitar !important. Amarillo
   confirmado en las 3 paginas reales del diseno (About/Contact/Travel Guides.dc.html): la entrada
   activa es #FFE500 fijo, sin estado :hover propio (ya estas en esa pagina). */
.wp-nav a[aria-current="page"]{color:var(--wp-yellow)}

/* 29b. H2 del footer completo de Home (hallazgo 15) — ver comentario en footer.php. */
/* Cierre de paridad (2026-08-19, @frontend): base .wp-h2{line-height:.9} daba 138 a 1920;
   Walking Planets Home.dc.html, sección del footer: `line-height:.86` → 132. */
.wp-h2--footer-home{font-size:clamp(44px,8vw,168px);line-height:.86}

/* 29c. Tour, negrita "only in your chosen language" (hallazgo 16) — mismo mecanismo que el
   "and" de wp-list--numbered--highlights (§23 arriba): el <strong> hereda el color/opacidad del
   parrafo contenedor (rgba(255,255,255,.72) inline en wp-tour/03-story.php) y el diseno lo quiere
   solido (Tour Sagrada Familia.dc.html L154, <strong style="color:#FFFFFF">). Scopeado al widget,
   no toca ningun otro <strong> del sitio. */
.elementor-widget-wp_tour_story strong{color:var(--wp-white)}

/* 29d. Indicador "Scroll ↓" del hero de Home (hallazgo 19) — SOLO Home lo lleva en el diseno
   (Walking Planets Home.dc.html L160, dentro de wp-hero__counters, control "solo Home"); valor
   del keyframe copiado literal (misma L160: animation:bob 1.8s ease-in-out infinite alternate;
   @keyframes bob L31: translateY(0)→translateY(9px)). Prefijo wp- en el nombre del keyframe para
   no colisionar con un "bob" generico de terceros. */
/* [2026-08-19 @frontend] 11px→11.5px: mínimo de DESIGN-TOKENS en móvil (QA visual, hallazgo
   "Scroll ↓" a 11px). Solo Home lo lleva (ver comentario 29d arriba). */
.wp-hero__scroll-cue{animation:wpHeroBob 1.8s ease-in-out infinite alternate;font-family:var(--wp-mono);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.64)}
@keyframes wpHeroBob{from{transform:translateY(0)}to{transform:translateY(9px)}}

/* ---------- 30. Cierre de private/.dev/qa/2026-08-19_qa-visual-2.md (2026-08-19, @frontend).
   4 arreglos del brief de @team-lead: N1 (gutter Travel Guides), 3 titulares de tarjeta fuera de
   `.wp-card__title` (punto 2, N2/N6/N7), botón CLOSE rosa (punto 5) y viñetas ausentes del
   trustbar (N5). Nada de lo anterior se toca. ---------- */

/* 30a. N1 — Travel Guides, rejilla de artículos sin gutter (se sale del margen, 1440 corta la
   3ª columna). Causa: wp-guides/04-articles-grid.php envuelve el grid en `.wp-shell`
   (walking-planets.css:57, solo `max-width:1440px;margin-inline:auto`, SIN padding propio) pero,
   a diferencia de otros widgets con grid (p.ej. wp-tour/13-related-tours.php, que se envuelve en
   `<section class="wp-section">`), este NO lleva `.wp-section` por delante — así que no hereda ni
   el gutter de escritorio (walking-planets.css:53, `--wp-gutter:40px`) ni su variante móvil
   (walking-planets.css:265, `--wp-gutter-mobile:18px` bajo 860px). El `.dc.html` (Travel
   Guides.dc.html L145 `<section style="padding:40px 40px 110px">`) confirma 40px fijos a los tres
   anchos. Scopeado al widget exacto (único uso de esta rejilla en el sitio; no toca el resto de
   `.wp-shell` del sitio, cada uno con su propio contexto). */
.elementor-widget-wp_guides_articles_grid .wp-shell{padding-left:var(--wp-gutter);padding-right:var(--wp-gutter)}
@media (max-width:860px){
  .elementor-widget-wp_guides_articles_grid .wp-shell{padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile)}
}

/* 30b. Punto 2/N2 — Travel Guides, título de la guía destacada en cian debiendo ser blanco.
   Mismo mecanismo YA documentado en la §23 de arriba para `.wp-card` (el <h2> hereda de su <a>
   contenedora, que pierde contra `.wp-page a{color:var(--wp-cyan)}` walking-planets.css:47, 0,1,1
   > 0,1,0), pero aquí la tarjeta NO es `.wp-card` sino `.wp-guide-feature` (línea 36 de este
   fichero, wp-guides/03-featured-article.php) — el fix de la §23 (`.wp-card.wp-card`) no la
   alcanza porque es OTRA clase. Travel Guides.dc.html L134 confirma `color:#FFFFFF` en el <a> que
   envuelve toda la tarjeta. Repetir la clase a 0,2,0, igual que el fix ya usado. */
.wp-guide-feature.wp-guide-feature{color:var(--wp-white)}

/* 30c. N6 — Home, 3 tarjetas "who we build for" (wp-home/08-segments.php) en cian debiendo ser
   blancas. Mismo mecanismo que 30b: `.wp-segment` (línea 266 de este fichero) es un <a> con
   `color:var(--wp-white)` a 0,1,0, y pierde contra `.wp-page a` (0,1,1). El <h3
   class="wp-segment__title"> no tiene color propio (línea 274) y hereda del <a>. Walking Planets
   Home.dc.html confirma `color:#FFFFFF` en los 3 <a> de esta sección. */
.wp-segment.wp-segment{color:var(--wp-white)}

/* 30d. N7 — Tour, 3 tarjetas de "tours relacionados" (wp-tour/13-related-tours.php) en azul medio
   (--wp-cyan-ink) debiendo ser marino (--wp-navy), sobre tarjeta BLANCA. Ya usa `.wp-card__title`
   de verdad (vía sw_render_tour_card(), helpers.php) así que el fix de la §23 (`.wp-card.wp-card`,
   0,2,0) SÍ aplicaría — pero pierde contra `.wp-section--light a:not(.wp-btn):not([data-scrollspy]
   .is-active){color:var(--wp-cyan-ink)}` (línea ~861 de este fichero, 0,4,1: mayor especificidad
   en clases/pseudo-clases que 0,2,0). Esa regla es correcta como base para los DEMÁS enlaces de
   fondo claro (índice legal, "Work with us →", etc: ver su comentario, §24.3), pero Tour Sagrada
   Familia.dc.html L374 confirma que esta tarjeta concreta usa el <a> en `color:#071C33` (marino),
   NO cian-ink — variante propia de esta tarjeta, no el link genérico. `.wp-cards` con esta
   variante SOLO existe aquí (wp-tour/13-related-tours.php es el único widget que mete `.wp-cards`
   dentro de `.wp-section--light`, verificado por grep). Empata en especificidad con la regla de
   24.3 (0,4,1 = 0,4,1: `.wp-section--light`+`.wp-cards`+`.wp-card`+`.wp-card` = 4 clases, `a` = 1
   elemento) y gana por ir DESPUÉS en el cascade — mismo patrón ya usado en la §23 para
   `.wp-list--numbered--highlights strong`. */
.wp-section--light .wp-cards a.wp-card.wp-card{color:var(--wp-navy)}

/* 30e. Punto 5 — botón CLOSE del menú móvil en rosa. NO es `.wp-burger` en su estado normal
   (background:none, walking-planets.css:105) — es Hello Elementor reset.css, que define
   `button:hover,button:focus{background-color:#CC3366;color:#fff}` (elemento+pseudo-clase =
   0,1,1) y le gana a `.wp-burger` (una sola clase = 0,1,0). Al abrir el cajón con un clic real
   (ratón) o con teclado, el botón queda en :hover y/o :focus — comprobado con Playwright
   (`getComputedStyle` tras `.click()`: `background-color: rgb(204, 51, 102)`) y con las
   `CSSStyleSheet.cssRules` reales del navegador, no adivinado. El diseño no define ningún estado
   hover/focus para este botón (Walking Planets Home.dc.html L96, sin `style-hover`): se queda
   igual. `.wp-burger:hover,.wp-burger:focus` = clase+pseudo-clase = 0,2,0, gana a 0,1,1. */
.wp-burger:hover,.wp-burger:focus{background:none;border-color:rgba(255,255,255,.4);color:var(--wp-white)}

/* 30f. N5 — Home, trustbar sin las 4 viñetas ◆ amarillas delante de cada claim y logos más
   juntos que el diseño. global/trustbar.php renderizaba `<span>texto</span>` sin la viñeta
   (Walking Planets Home.dc.html L188: `<span style="color:#FFE500;font-size:14px">◆</span>` +
   texto, con `gap:12px`) — añadida en el render() (`.wp-trustbar__claim-dot`, ver PHP). Y los
   sellos usaban flex (se encogen al contenido, 684px medidos) donde el diseño usa
   `display:grid;grid-template-columns:repeat(4,1fr)` (L173: 4 columnas iguales dentro de
   `max-width:1080px`, cada logo centrado en la suya) — cambiado el inline style del render() a
   grid con el nº real de sellos (no fijo a 4, por si se añade un 5º desde el repeater). Medido
   923px de ancho de logos a 1440 (diseño: 922) tras el cambio. */
.wp-trustbar__claim-dot{color:var(--wp-yellow);font-size:14px}

/* 30g. Complemento de 30f — a ≤860px el diseño APILA los 4 sellos en 1 columna (Walking Planets
   Home.dc.html L59-67: regla propia del prototipo `[style*="grid-template-columns"]:not([data-
   keep-grid]){grid-template-columns:minmax(0,1fr)!important}`, confirmada con Playwright:
   `gridTemplateColumns` computado = 1 pista, alto del bloque 168px = 4 filas). Sin esto, el grid
   de 30f de 4 columnas fijas se mantiene igual de estrecho a 375/768 que a 1440 (4×~85px en
   375px de ancho) y los logos quedan diminutos — comprobado visualmente, regresión real
   introducida por 30f que este bloque corrige. Mismo breakpoint que el resto del sitio
   (walking-planets.css:258 `@media (max-width:860px)`). */
@media (max-width:860px){
  .wp-trustbar__badges{grid-template-columns:minmax(0,1fr) !important}
}

/* ---------- 31. FULL-BLEED (medido a 1920/2560, invisible a ≤1440) ----------
   Diagnóstico: a 1440 de viewport `--wp-maxw` y el ancho real de la pantalla COINCIDEN,
   así que el bug de esta sección era invisible en todas las pruebas anteriores (siempre a
   375/768/1440). Medido a 1920: `.wp-hero` da 1440px arrancando en x=240 en vez de los 1920
   completos del diseño; lo mismo en Home #experiences, en el <section> "Not a queue..." de
   Tour (con la ficha 2x2 .wp-facts dentro) y en el manifesto blanco de About.

   Causa real (confirmada con Playwright, no solo leyendo CSS): cada uno de estos widgets
   sigue el patrón correcto del propio diseño —`<section>` sin límite de ancho (el fondo llega
   a los bordes) + un envoltorio interior con `max-width` centrado (.wp-shell o el
   `max-width:var(--wp-maxw)` propio del widget)— pero ese `<section>` vive ANIDADO dentro de
   un Elementor Container "Boxed" (`.e-con-boxed`) cuyo `--container-max-width` de kit está
   fijado a 1440px (mismo valor que `--wp-maxw`, sincronizado a propósito). Doble boxeo: el de
   Elementor por fuera capa el ancho disponible ANTES de que nuestra sección aplique el suyo, y
   el de fuera es el que gana. Verificado con `getComputedStyle`:
   `.elementor-element-a5ca04a > .e-con-inner` (contenedor raíz de TODO el contenido de Home,
   post 40) mide 1440px centrado en x=240 a 1920 — ahí es donde nace el problema para Home; en
   Tour (post 59) el contenedor equivalente es por-sección (`elementor-element-0769747`, con la
   clase `wp-section` puesta desde el Avanzado de Elementor).

   Fix con la técnica de "breakout" (`width:100vw` + `margin-inline:calc(50% - 50vw)`) aplicada
   DIRECTAMENTE a la sección afectada, no al contenedor de Elementor que la envuelve: el `%` de
   un margin se resuelve contra el ancho del containing block (el padre), no contra el ancho del
   propio elemento, así que la fórmula se autocorrige atravesando cualquier nº de ancestros
   centrados con `margin:auto` — y TODOS los `.e-con-boxed` de Elementor lo son
   (`--margin-left:auto;--margin-right:auto`, frontend.min.css). Verificado con Playwright a
   1920 tras aplicar: contenedor raíz de Elementor SIN tocar, sección hija en x=0/width=1920.
   Menos frágil que neutralizar el contenedor de Elementor por su ID (que es específico de esa
   página/tour y no se re-genera si se clona la estructura) y no toca ningún otro `.e-con-boxed`
   del sitio (Travel Guides, ya validado a 1920/2560, usa el mismo mecanismo de Elementor y sus
   secciones sí se quedan boxeadas — no se toca).
   ⚠️ CORRECCIÓN 2026-08-19: la versión anterior de esta nota afirmaba que **Contact y Legal
   también debían quedarse boxeadas**. Era FALSO — una suposición que nunca se comprobó contra el
   diseño. Medido section a section a 1920: el diseño de Legal tiene su bloque BLANCO y su bloque
   CIAN a `x=0/w=1920`, y el de Contact su bloque blanco igual; el sitio los tenía a `x=240/w=1440`,
   así que se veían como cajas con banda navy a los lados. Lo cazó `paridad.js` al emparejar bloque
   a bloque (12 de 12 en Legal); el método anterior, que comparaba RECUENTOS de secciones a ancho
   completo, decía "coincide" y lo tapó. Corregido en §31f.
   Lección: una nota que dice "esto es correcto así" sin la medición al lado es una suposición
   heredada, y se propaga. Si se afirma que algo debe quedarse como está, va con su evidencia.
   `overflow-x:clip` en `.wp-page` (walking-planets.css:45) es lo que permite este breakout sin
   generar scroll horizontal ni romper `position:sticky` (comentario ya en esa línea). */

/* 31a. Hero — global_hero.php, se usa en TODAS las páginas (home, tour, guide, about...).
   Sin `.wp-hero__copy` (padding:0 var(--wp-gutter), walking-planets.css:128) no hace falta
   tocar nada más: al ensanchar `.wp-hero` su padding pasa a alinearse con el gutter real del
   viewport, que es justo lo que hace el diseño (Tour Sagrada Familia.dc.html L116:
   `padding:0 40px 46px` sobre una `<section>` sin límite de ancho). A ≥1800px sigue mandando
   `.wp-hero__copy{max-width:var(--wp-maxw-ultra)}` (walking-planets.css:274), sin conflicto:
   ese límite es del COPY, no de la sección. */
.wp-hero{width:100vw;margin-inline:calc(50% - 50vw)}

/* 31b. Home #7 — 07-tours-filterable-grid.php ("First time? Fifth time?..."), único widget de
   este tipo en el sitio (scope por clase de widget, no por #id, para que sobreviva a un
   reordenado de la página). */
.elementor-widget-wp_home_tours_filterable_grid .wp-section{width:100vw;margin-inline:calc(50% - 50vw)}

/* 31c. Tour #4 — franja "Not a queue. A story with columns like trees." (03-story.php +
   04-quick-facts.php, la ficha 2x2 .wp-facts) + related tours, dentro del `<section>` que en
   Elementor es el Container `elementor-element-0769747` (clase `wp-section` puesta a mano en
   el Avanzado). A diferencia de 31b este NO es un widget propio con su <section> — es el
   propio contenedor de Elementor el que hace de sección, así que el selector va por su ID.
   ÚNICO EN ESTA PÁGINA (post 59, Tour Sagrada Família): si se monta un tour nuevo copiando esta
   estructura, el Container nuevo tendrá OTRO ID autogenerado y necesitará su propia línea aquí
   (o promover esto a una clase reutilizable en el Avanzado de Elementor al construir el tour). */
.elementor-element-0769747.wp-section{width:100vw;margin-inline:calc(50% - 50vw)}

/* 31d. About #2 — 02-manifesto-white.php, primer `.wp-section--light` de la página (el segundo,
   `#partners`, es un widget distinto — 05-own-operations.php — y NO estaba en el diagnóstico:
   no se toca). Scope por clase de widget para no enganchar el de partners. */
.elementor-widget-wp_about_manifesto_white .wp-section{width:100vw;margin-inline:calc(50% - 50vw)}

/* 31e. Home — TODAS sus secciones, no solo la del grid de tours (31b).
   Motivo: 31a-31d se derivaron de un diagnóstico que se había hecho ANTES de aplicar el arreglo
   y que solo listaba algunas secciones. Con 31a-31d en producción, Pedro vio a simple vista que
   "debajo del hero el siguiente bloque falla". Medido a 1920 en la Home, de los 6 bloques que
   PINTAN fondo, 4 seguían en x=240/w=1440 — y al tener fondo propio, la caja se ve:
     y=1422   section.wp-section--light   "A tour ends. A memory stays."      <- el que se ve primero
     y=8542   section (sin clase de tono) "Watch first. Book later."
     y=9518   section.wp-section--cyan    "The world is full of places."
     y=11632  section.wp-section--light   "Good things are better together."
   En vez de añadir 4 reglas más (una por sección, que es lo que hicimos y por eso se quedaron
   fuera), se ataja por PÁGINA: en Home el contenedor raíz de Elementor (post 40) capa TODO su
   contenido de golpe, así que la corrección natural es al mismo nivel.
   ⚠️ NO se generaliza a `.wp-section` a secas ni a `.wp-section--light`: Contact, Travel Guides
   y Legal usan las mismas clases y sus secciones SÍ deben quedarse boxeadas (ver cabecera de §31).
   Por eso el scope es `.page-id-40`, la clase que WordPress pone en el <body> de esta página.
   Inofensivo para las secciones SIN fondo: su contenido sigue centrado por `.wp-shell`
   (max-width:var(--wp-maxw)), así que ensanchar la sección no mueve nada visible.
   ⚠️ El bloque "Watch first. Book later." (widget `wp_home_reels`) abre su `<section>` SIN la
   clase `.wp-section`, así que la primera versión de esta regla no lo alcanzaba y se quedó
   encajonado — de ahí el segundo selector. Arreglo más limpio a futuro: añadirle `wp-section` en
   su PHP (`widgets/wp-home/*reels*.php`) y borrar aquí ese selector; se deja así para no tocar un
   fichero que en este momento tiene otro dueño. */
.page-id-40 .wp-section,
.page-id-40 .elementor-widget-wp_home_reels section{width:100vw;margin-inline:calc(50% - 50vw)}

/* 33. «We're here for the stories.» en una sola línea a partir de 1600px.
   PETICIÓN EXPRESA DE PEDRO, y es una **desviación deliberada del diseño**: a 1920 el diseño rompe
   ese titular en 4 líneas exactamente igual que nosotros (medido: idénticos, 4 líneas, caja 1440,
   x=240 en los dos). No es un defecto del montaje — es cómo se comporta el diseño en pantallas
   anchas, y a Pedro no le gusta cómo queda.

   Pedro lo atribuyó al `gap` de Elementor; NO es eso. La causa medida: el `font-size` es fluido y a
   1920 crece a **142px** dentro de una caja de 1440, y ahí «stories.» ya no cabe y cae sola a una
   cuarta línea. Por eso a 1440 (fuente más pequeña) sí entra en 2 líneas y a 1920 no.

   Opciones probadas en vivo a 1920, cambiando una variable a la vez:
     ensanchar la caja:  1440→4 líneas · 1560→3 · **1680→2** · 1760→2 · 1920→2
     bajar la fuente:    142→4 líneas · **128→2** · 118→2 · 110→2 · 104→2
   Se elige BAJAR LA FUENTE porque es una sola propiedad y no mueve la maqueta: ensanchar la caja
   descoloca este bloque respecto a las demás secciones, que siguen a 1440.
   Umbral en 1600px: por debajo la fuente ya es pequeña y el titular entra en 2 líneas solo. */
@media (min-width:1600px){
  .page-id-40 .wp-h2--home-cta{font-size:128px}
}

/* ⭐ 32. EL ROSA DE HELLO ELEMENTOR — reportado por el cliente en varios sitios a la vez.
   Al pasar el ratón por CUALQUIER botón, el fondo se ponía rosa fuerte: chips del filtro de tours,
   filas del acordeón de FAQ, chips del formulario de contacto… El cliente: «hay varios de estos
   así, hay que ponerle que resalte en el amarillo».

   CAUSA, localizada preguntando a `document.styleSheets` (no con grep: el fichero está minificado
   y el color va en hexadecimal ABREVIADO `#c36`, que es por lo que no aparecía buscando `cc3366`).
   Está en `reset.css` del tema padre **Hello Elementor 3.4.9**, donde `#c36` es su color de acento
   por defecto:
     a { color: rgb(204,51,102) }
     [type=button],[type=submit],button { border:1px solid rgb(204,51,102); color:rgb(204,51,102) }
     [type=button]:focus,…,button:hover { background-color: rgb(204,51,102) }   ← este es el que se ve

   Medido en el chip del filtro: reposo blanco/navy ✓ · **hover rgb(204,51,102)** ✗ · tras clic cian ✓.
   Es decir, **el estado activo estaba bien y el que fallaba era el hover** — por eso el cliente lo
   fotografió con el ratón encima y por eso una revisión del estado en reposo lo daba por correcto.

   POR QUÉ AQUÍ Y NO EN HELLO ELEMENTOR (Pedro propuso tocarlo allí): un tema se actualiza y **se
   lleva el parche por delante, en silencio**. Mismo patrón que ya nos ha costado caro con ficheros
   de paquete. Va en nuestro CSS.

   POR QUÉ ESTA ESPECIFICIDAD EXACTA, que es la parte delicada: se **replica el selector del reset
   tal cual** (0,1,1) en vez de hacerlo más específico. Así gana al reset por orden de cascada
   —nuestra hoja carga después— pero **PIERDE contra cualquier regla de componente** del diseño
   (`.wp-chip:hover` es 0,2,0 y le gana). Si lo hiciéramos más específico (p.ej. `.wp-page
   button:hover`, 0,2,1) mataríamos los hover legítimos que sí define el diseño. De hecho el rosa
   solo asomaba donde nuestro CSS NO define hover propio: donde sí lo define, ya ganaba. */
[type="button"]:focus,[type="button"]:hover,
[type="submit"]:focus,[type="submit"]:hover,
button:focus,button:hover{background-color:transparent}

/* ⭐ 34. MEGA MENÚ «Tours +» — su CSS tiene que ser GLOBAL, no de una página.
   Reportado por Pedro: «el megamenú se ha dañado, ahora es muy corto y ha perdido el formato».
   No era regresión de nada anterior: el mega menú **no existía** hasta hoy (la auditoría del
   handoff lo daba por no construido) y se añadió a `widgets/global/header.php` a las 13:02.

   EL FALLO, y es un error de arquitectura fácil de repetir: **el markup se puso en un widget
   GLOBAL (la cabecera, que sale en las 7 páginas) y su CSS en `page-tours.css`, que solo se encola
   en la página Tours.** Resultado: en todas las demás páginas el panel se renderiza **sin una sola
   regla** — de ahí que se viera corto, sin rejilla, sin fondo y sin tipografía.

   REGLA GENERAL: el CSS vive en el mismo ámbito que el markup. Un widget global no puede depender
   de una hoja por página; si el bloque sale en las 7 páginas, su CSS va en la hoja compartida.

   Copiado tal cual desde `page-tours.css`, con sus comentarios de decisión — incluido el porqué de
   `left:0`, que salió de una captura real con el panel cortado a 1440px. El original sigue allí de
   momento: duplicado idéntico e inocuo, y avisado a su dueño para que lo retire y quede una copia. */
.wp-navitem-mega{position:relative}
.wp-navitem-mega__head{background:none;border:0;cursor:pointer;font:inherit;color:var(--wp-white);
  padding:0;display:inline-flex;align-items:center;gap:2px}
.wp-navitem-mega__head:hover,.wp-navitem-mega.is-open .wp-navitem-mega__head{color:var(--wp-cyan)}
/* Página activa: el botón del mega menú no es un <a>, así que no le vale la regla de
   `.wp-nav a[aria-current="page"]` de §24 y necesita la suya. */
.wp-navitem-mega__head[aria-current="page"]{color:var(--wp-yellow)}
.wp-megamenu{
  /* left:0 y NO centrado bajo el botón: «Tours +» vive pegado al logo, casi en el borde izquierdo
     del header — centrar el panel de 920px bajo el botón lo sacaría por la izquierda de la
     ventana (hallazgo de QA visual: captura real con el panel cortado a 1440px). */
  display:none;position:absolute;top:calc(100% + 22px);left:0;
  /* 2026-08-28 (@frontend, A1): el navy sube a #123F68 = rgb(18,63,104). Este panel es CASI
     OPACO (.98), así que con el rgb viejo se habría quedado más oscuro que el header y que la
     página que hay debajo — una costura visible justo bajo la cabecera. */
  background:rgba(18,63,104,.98);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:28px;
  width:min(920px,calc(100vw - 40px));
  grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 28px;z-index:70;
}
.wp-navitem-mega.is-open .wp-megamenu{display:grid}
/* 2026-09-10 (S2, Scarlet 10:20): el panel se abre al PASAR POR ENCIMA, no al hacer clic — el
   clic navega a /tours/ (ver header.php). `hover:hover` deja fuera a las pantallas táctiles,
   donde un hover simulado dejaría el panel abierto tras el toque; ahí el enlace sencillamente
   lleva a la página. `:focus-within` cubre el teclado: al tabular hasta la cabecera el panel se
   muestra y sólo entonces sus 8 enlaces entran en el orden de tabulación (con `display:none` no
   son enfocables). Se conserva `.is-open` por si algo lo abre por JS. */
@media (hover:hover){
  .wp-navitem-mega:hover .wp-megamenu{display:grid}
  /* Puente invisible sobre los 22px de hueco entre la cabecera y el panel: sin él, el ratón
     "sale" del elemento a mitad de camino y el panel se cierra antes de llegar. Sólo existe
     mientras se está encima, para que esa banda no intercepte clics del resto del tiempo. */
  .wp-navitem-mega:hover::after{content:'';position:absolute;top:100%;left:0;
    width:min(920px,calc(100vw - 40px));height:24px}
}
.wp-navitem-mega:focus-within .wp-megamenu{display:grid}
/* §21 (2026-09-09): 4 columnas dejan los títulos a ~195px (el panel está capado a 920px) y
   se parten. A 3 columnas por debajo de 1400px ganan aire; el nav solo existe ≥1181px, así
   que el escalón actúa en la ventana 1181-1400px. */
@media (max-width:1400px){
  .wp-megamenu{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.wp-megamenu__item{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;
  /* 2026-09-10 (S1): `min-width:0` para que una celda de grid no se niegue a encoger por debajo
     del ancho de su contenido — sin esto, un título largo ensancharía su columna en vez de
     partirse, y volveríamos al mismo desbordamiento por otra puerta. */
  min-width:0}
.wp-megamenu__item-title{font-family:var(--wp-display);font-size:26px;line-height:1;
  text-transform:uppercase;color:var(--wp-white);transition:color .25s ease;
  /* 2026-09-10 (S1): explícito, no heredado. El panel vive dentro de `.wp-nav`, cuyos rótulos
     van en `nowrap` a propósito; aquí el ancho es fijo (920px) y lo que tiene que ceder es el
     texto. Declararlo aquí lo hace inmune a cualquier regla futura que vuelva a marcar la nav
     entera. */
  white-space:normal;overflow-wrap:anywhere}
/* [2026-08-19 @frontend] 11px→11.5px: mínimo de DESIGN-TOKENS. Los subtítulos del mega menú van
   ocultos en móvil hoy, pero el valor base es este — se sube igual para que el día que se
   muestren no entren ya por debajo del mínimo. */
.wp-megamenu__item-note{font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.wp-megamenu__item:hover .wp-megamenu__item-title{color:var(--wp-cyan)}
.wp-megamenu__item--cta{background:var(--wp-cyan);color:var(--wp-navy);border-radius:2px;
  padding:16px 18px;justify-content:center}
.wp-megamenu__item--cta .wp-megamenu__item-title{color:var(--wp-navy);font-size:20px}
.wp-megamenu__item--cta .wp-megamenu__item-note{color:rgba(14,52,87,.7)}

/* 31d-bis. ⭐ EL HUECO NAVY ENTRE SECCIONES — el `gap` por defecto de Elementor.
   Lo reportó Pedro: «el fondo queda azul oscuro sobre el azul claro… debería ser blanco», y lo
   describió bien: no es el fondo de ningún bloque, es **el fondo de la PÁGINA asomando por un
   hueco entre widgets**.
   Medido a 1920 (posición absoluta en el documento):
     DISEÑO  sellos 999→1261 · cinta 1261→1346 · manifiesto 1346…   → huecos de **0 px**, pegados
     SITIO   sellos 1019→1282 · cinta 1302→1387 · manifiesto 1407…  → huecos de **20 px**
   Esos 20px son el `gap` que los contenedores flex de Elementor ponen por defecto entre widgets.
   El diseño apila las secciones **a hueso** (cada una trae su propio padding interior), así que
   cualquier gap del contenedor mete una banda del color de la página entre dos secciones de
   color — y se ve como una raya navy entre el blanco y el cian.
   Se anula solo en el contenedor RAÍZ (`.e-con.e-parent > .e-con-inner`), no en `.e-con` a secas:
   las columnas internas de nuestras secciones las hace nuestro propio CSS (`.wp-cols-2`), pero un
   contenedor anidado de Elementor sí podría necesitar su gap. Scope por página para no tocar
   plantillas que no hemos revisado.
   ⚠️ Esto no lo veía ningún verificador: el hueco no pertenece a ningún bloque, así que no
   aparece ni comparando bloque a bloque ni midiendo alturas de sección. Solo se ve mirando, o
   midiendo la DISTANCIA entre el final de un bloque y el principio del siguiente — que es una
   comprobación que no teníamos y que conviene añadir. */
.page-id-40 .e-con.e-parent > .e-con-inner{gap:0}

/* 31e-bis. Dos bloques más que el diseño lleva a ancho completo y aquí se quedaban en 1440.
   ⚠️ NO los alcanzaba §31e porque **no llevan la clase `.wp-section`** — `.page-id-40 .wp-section`
   no puede verlos. Es el mismo fallo de fondo repetido: la regla se escribió sobre la clase que
   tenían las secciones que sí se habían medido, no sobre el conjunto real de bloques de la página.

   Los reportó Pedro mirando la web, no ningún verificador, y por un motivo estructural: `paridad.js`
   enumera por TITULARES y **ninguno de los dos tiene encabezado** (la franja de sellos abre con un
   rótulo `<span>` y la cinta es texto corrido), así que están en su zona ciega. La Home daba
   PARIDAD COMPLETA con los dos mal.

   Medido a 1440 / 1920 / 2560 (diseño vs sitio):
     `.wp-trustbar`  DISEÑO x=0 w=1440 · x=0 w=1920 · x=0 w=2560   (blanco, siempre a sangre)
                     SITIO  x=0 w=1440 · **x=240 w=1440** · **x=560 w=1440**
     `.wp-marquee`   DISEÑO x=0 w=1920                            (cian, a sangre)
                     SITIO  **x=240 w=1440**
   A 1440 coincidían, y por eso pasaron los cinco anchos de la matriz sin dar la cara: el defecto
   solo aparece POR ENCIMA del max-width, con el navy de la página asomando en las bandas laterales.

   `.wp-trustbar` va sin scope de página a propósito: verificado que solo se usa en Home (y en el
   diseño también en Tours), y en los dos sitios el diseño la lleva a sangre — así Tours lo hereda.
   La cinta va anclada a SU widget (`wp_home_marquee_claim`) y no a `.wp-marquee` a secas, porque
   esa clase la comparte el marquee de partners, que tiene su propio tratamiento (§ de
   page-about-guides.css: a ≥1800px se limita a 1760 centrado). Una regla por clase de tono o por
   clase genérica habría roto aquél — misma trampa que "What's included" en Tour. */
.wp-trustbar,
.elementor-widget-wp_home_marquee_claim .wp-marquee{width:100vw;margin-inline:calc(50% - 50vw)}

/* 31f. Legal (page-id-44) y Contact (page-id-43) — mismo caso que Home, y contradice la nota
   antigua de la cabecera (ver ⚠️ CORRECCIÓN allí). Evidencia, medida section a section a 1920:
     Legal   DISEÑO  0/1920 navy · 0/1920 BLANCO · 0/1920 CIAN
             SITIO   0/1920 navy · 240/1440 blanco · 240/1440 cian   ← las dos cajas visibles
     Contact DISEÑO  0/1920 navy · 0/1920 navy · 0/1920 BLANCO
             SITIO   0/1920 navy · 240/1440 blanco                   ← caja visible
   Se ve porque esas secciones PINTAN fondo: sobre el navy de la página, un bloque blanco a
   1440 deja dos bandas laterales. El contenido interior sigue centrado por `.wp-shell`, así
   que ensanchar la sección no mueve el texto. */
.page-id-44 .wp-section,
.page-id-43 .wp-section{width:100vw;margin-inline:calc(50% - 50vw)}

/* 31g. Legal — color de los H3 de las cláusulas. El sitio hereda `--wp-ink` (#2E4457,
   "texto largo sobre blanco", walking-planets.css:20) y el diseño los pone en navy
   (rgb(7,28,51) = #071C33). Afecta a los 5 H3 de la página (medido con paridad.js:
   "Content and intellectual property", "External links", "Photos on tour",
   "Accessibility, kids and dietary needs", "Groups, schools and cruise passengers").
   Scope por página: `--wp-ink` es correcto para el cuerpo de texto, solo cambia el titular. */
.page-id-44 h3{color:#0E3457}

/* ==========================================================================
   32. Cierre de paridad (2026-08-19, @frontend) — últimos 14 desvíos, medidos con
   private/tools/qa/paridad.js (reconciliación bloque a bloque, no muestreo). Brief del
   team-lead + Tour, que el propio paridad.js sacó al reejecutarlo sobre este mismo scope
   (page-tour-guide.css es mío) y no estaba en la lista original — ver informe.
   ========================================================================== */

/* 32a. Contact — H2 "Not sure what to ask for?" (.wp-h2--split, sección
   .wp-section.wp-section--light, único bloque de este tono en la página — 2 bloques en total
   según paridad.js). Contact.dc.html: `padding:90px 40px 100px` → padding-top:90px (sitio 110,
   heredado de --wp-section-y). No se toca `.wp-h2--split` a secas: la reutiliza About
   ("Own operations, not a booking page") con su propio padding, ya correcto. */
.page-id-43 .wp-section--light{padding-top:90px}

/* ==========================================================================
   34. ⭐ EL HUECO NAVY ENTRE SECCIONES, generalizado al resto de páginas (2026-08-19,
   @frontend) — mismo bug que 31d-bis (Home) y la misma causa: el `gap` por defecto de 20px de
   los contenedores flex de Elementor, que abre una franja donde asoma el navy del `body` entre
   secciones que el diseño apila a hueso. Lo sospechó Pedro viendo el patrón repetido en
   "muchos sitios pequeños" del sitio — y tenía razón.
   ========================================================================== */

/* 34a. Confirmado con medición diseño-vs-sitio, hueco entre CADA hijo consecutivo del
   contenedor principal (`.e-con.e-parent > .e-con-inner`), a 1920:
     DISEÑO   0px en las 6 páginas, en TODAS las transiciones (About tiene una excepción real de
              239px, pero es el salto a un contenedor HERMANO —el CTA final "Where will you go
              next?"—, no un gap entre hijos del mismo flex; esta regla no lo toca).
     SITIO    20px en TODAS las transiciones de las 6 páginas (`getComputedStyle` confirma
              `gap:20px` en cada `.e-con.e-parent > .e-con-inner` de las 6, antes del fix).

   Solo es VISIBLE donde el hueco separa dos colores distintos (p.ej. hero navy → sección
   `--light`/`--cyan`/`--yellow`): las secciones `.wp-section` SIN modificador de tono no pintan
   fondo propio y heredan el navy del `body` (`rgb(7,28,51)`, verificado por
   `getComputedStyle(document.body)`), así que un hueco de 20px entre dos de ellas ya es navy
   sobre navy y no se ve a simple vista — pero el hueco EXISTE igual y no coincide con el diseño
   (que las apila a 0), así que se corrige en TODAS las transiciones y no solo en las visibles:
   dejar unas sin tocar habría sido una diferencia de maquetación agazapada, lista para hacerse
   visible en el primer retoque de color de esa sección.

   Mismo patrón exacto que 31d-bis: `gap:0` SOLO en el contenedor RAÍZ de cada página
   (`.e-con.e-parent > .e-con-inner`), nunca en `.e-con` a secas — las columnas internas
   (`.wp-cols-2` del hero de Tour, las tarjetas de Travel Guides, etc.) llevan su propio gap con
   CSS nuestro y no deben tocarse. Scope por página para no arrastrar el fix a páginas no
   auditadas en este pase (Home ya tiene el suyo en 31d-bis; Tours no estaba en el encargo).
   Guía y Tour no llevan `page-id-*` en el `<body>` (son CPT/`post`, no `page`): se ancla por
   `.postid-<ID>` + el modificador de tipo que WordPress ya pone (`single-post`/`single-tour`),
   igual de específico y sin depender de una clase que no existe en esas plantillas. */
/* 2026-09-10: `:not(.wp-contact-grid)` — este `gap:0` (especificidad 0,4,0) ganaba sobre
   `.wp-contact-grid > .e-con-inner{gap:64px}` (0,2,0) y dejaba el formulario de Contacto
   PEGADO al panel lateral. Medido con Playwright: hueco 0px en la web frente a 64px en el
   diseno. Se excluye ese grid en vez de subir la especificidad del otro lado con !important. */
.page-id-41 .e-con.e-parent:not(.wp-contact-grid) > .e-con-inner,
.page-id-42 .e-con.e-parent:not(.wp-contact-grid) > .e-con-inner,
.page-id-43 .e-con.e-parent:not(.wp-contact-grid) > .e-con-inner,
.page-id-44 .e-con.e-parent:not(.wp-contact-grid) > .e-con-inner,
.single-post.postid-45 .e-con.e-parent:not(.wp-contact-grid) > .e-con-inner,
.single-tour.postid-59 .e-con.e-parent:not(.wp-contact-grid) > .e-con-inner,
/* Tours (page-id-79) se añade DESPUÉS: la página se creó una vez ya aplicado el arreglo a las
   otras 7, así que nació con los 20px de hueco. Medido: 4 transiciones afectadas a 375 y a 1920.
   ⚠️ Y esto es el aviso para la próxima: **una lista de páginas enumeradas se queda obsoleta en
   cuanto se crea una página nueva**, y el fallo vuelve en silencio — nadie mira los huecos otra
   vez. Si se añaden más páginas, o se amplía esta lista, o se cambia el enfoque a algo que no
   dependa de enumerar (p.ej. una clase que el tema ponga en el <body> de todas las páginas del
   diseño). Queda anotado a propósito donde se toca. */
.page-id-79 .e-con.e-parent:not(.wp-contact-grid) > .e-con-inner{gap:0}

/* ==========================================================================
   22. QA MÓVIL (2026-08-19, @frontend) — mínimo de texto 11,5px (DESIGN-TOKENS)
   + zonas de toque ≥44px (WCAG 2.5.8 pide 24px; en un móvil real apuntamos más
   alto) + input del newsletter sin zoom automático de iOS. Medido en navegador
   real a 390×844 (Chromium/Playwright) en las 8 páginas del sitio, con estilo
   COMPUTADO — no leído del código. Todo gateado a `@media (max-width:860px)`
   a propósito: en escritorio (1440) estas clases ya cumplen los mínimos, así
   que tocar solo aquí evita cualquier efecto colateral fuera de móvil.

   Lo que NO se toca en este bloque, con su porqué:
   - `.wp-ticket-card__body`/`.wp-ticket-card__head` (span de idioma "EN",
     "Tour commentary language", "Ticket types", "Prices confirmed at
     checkout"): el font-size vive en `style=""` INLINE dentro del widget PHP
     (07-booking-widget.php) — una regla externa no puede pisar un inline sin
     `!important`, que es justo lo que este archivo evita por norma de la
     casa (cabecera del fichero). Requiere tocar el widget: fuera de alcance
     de @frontend en este encargo, avisado a @team-lead.
   - `.wp-table-row span` ("Not required"/"You choose") y el caption "Last
     updated" del índice de Legal: mismo motivo, mismo widget
     (03-legal-body.php `default_cookies_content()`/render de la nav), también
     `style=""` inline.
   - `div.wp-body > p > a` ("tours@walkingplanets.com" dentro de un párrafo de
     Accessibility, Legal) y `.elementor-field-option label a` ("privacy
     policy" dentro de la frase de consentimiento RGPD, Contact): son enlaces
     DENTRO de una frase en prosa — convertirlos en bloque rompería la lectura
     de la línea. Su alto real (23-24px / 18px) cumple igual el suelo de WCAG
     2.5.8 (24px) o queda muy cerca; no se ensancha a costa de partir el texto.
   - `.wp-hero__media` (391-419px de ancho a viewport de 390): es el Ken Burns
     intencionado del diseño (`@keyframes wpKenBurns`, `scale(1.12)`,
     walking-planets.css) — `.wp-hero{overflow:hidden}` lo recorta y
     `scrollWidth==clientWidth` en las 8 páginas (0 scroll horizontal). No es
     un fallo, es el efecto funcionando; NO se toca.
   ========================================================================== */
@media (max-width:860px){
  /* --- Mínimo de texto 11,5px --- */
  .wp-reel__tag{font-size:11.5px} /* 09-reels.php, home */
  .wp-data-row__label{font-size:11.5px} /* Legal: "Trading name"/"Email"/"Phone"... */
  .wp-article-promo__kicker{font-size:11.5px} /* "Walk it with us", artículo */
  .wp-article-related__label{font-size:11.5px} /* "Keep reading", artículo */
  .wp-form .elementor-field-label{font-size:11.5px} /* labels del form de Contact */
  .wp-side-panel__label{font-size:11.5px} /* "Fastest answer"/"Where we are"..., Contact */
  /* Cabecera del calendario "Mo Tu We Th Fr Sa Su" — el más grave de la auditoría (10px):
     es lo que hay que leer para elegir día en la ficha de tour. */
  .wp-ticket-card__calendar-head{font-size:11.5px}
  /* Footer de las 8 páginas: "© 2026 Walking Planets · Barcelona" y los 4 enlaces
     legales heredan el font-size de este selector (.wp-footer__legal-links no lo
     redeclara). El más repetido de la auditoría: sale en TODAS las páginas. */
  .wp-footer__bottom{font-size:11.5px}
  /* Pie de foto del artículo (contenido editorial, wp_kses_post, wp-article-body). */
  .wp-article-body figcaption{font-size:11.5px}

  /* --- Zonas de toque ≥44px --- */

  /* Home: enlace a cada tour dentro del panel de categoría abierto — la vía real para
     llegar a una ficha desde el móvil (330×20 medido, el más importante de la auditoría).
     El <li> ya lleva 12px de padding-bottom + gap:12px del <ul> (06-category-accordion.php);
     el padding va en el propio <a> porque es el elemento que se mide como zona de toque. */
  .wp-cat__panel li a{display:block;padding:12px 0}

  /* Ficha de tour / artículo: migas "Home"/"Walk the city"/"← Travel guides"
     (.wp-hero__meta-row, display:flex — un hijo en bloque con padding vertical no
     rompe la fila, solo aumenta su propia zona de toque). */
  .wp-hero__meta-row a{display:inline-block;padding:14px 5px}

  /* Ficha de tour: CTAs "Ask for a private tour →" / "Get a group quote →" del sidebar
     (07-booking-widget.php) — sin clase propia, `<a>` dentro de un `<span>` en el bloque que
     sigue a `.wp-ticket-card` dentro de `#book.wp-sticky`. Selector estructural real (verificado
     en el markup del widget), no una clase inventada: hermano general de `.wp-ticket-card`
     dentro del mismo `#book`, no toca ningún otro `span a` del resto del sitio. */
  .wp-ticket-card ~ div a{display:inline-block;padding:14px 0}

  /* Ficha de tour: "All experiences →" (13-related-tours.php) — único texto de ese enlace
     en toda la ficha, sin clase propia más allá de `.wp-reveal` (utilidad de animación
     COMPARTIDA por decenas de elementos del sitio: tocar `.wp-reveal` directamente afectaría
     a todos ellos). Se ancla por hermano adyacente al <h2> de la cabecera de la sección
     (h2.wp-h2--tour-related + a.wp-reveal), que es único en el DOM — no toca ningún otro
     `.wp-reveal` del sitio. */
  h2.wp-h2--tour-related + a.wp-reveal{display:inline-block;padding:13px 0}

  /* Legal: email/teléfono dentro de las filas de datos (.wp-data-row/.wp-info-row, simple
     padding:22px 24px del contenedor — no son grid, admiten el <a> en bloque sin romper). */
  .wp-data-row__value a,
  .wp-info-row__value a{display:inline-block;padding:10px 0}

  /* Contact: bloque del panel lateral — título "WhatsApp us", email/teléfono grandes, y los
     dos CTA "Call ... →"/"Email us →" (los dos únicos canales directos de contacto en móvil,
     el sitio donde de verdad se llama). */
  .wp-side-panel__title{padding:6px 0}
  .wp-side-panel__contact{padding:8px 0}
  .wp-side-panel__links a{display:inline-block;padding:14px 0}

  /* Artículo: lista "Keep reading" (related guides). */
  .wp-article-related__list a{display:inline-block;padding:12px 0}

  /* Guías: botón "Subscribe →" del newsletter — 40px de alto, sin el wrapper `.wp-form` (solo
     lo lleva el form de Contact), así que no hereda el fix de tamaño de ese selector; y el
     input de email por debajo, en 15px/40px: Safari iOS hace zoom automático en cualquier
     campo por debajo de 16px y la página queda descuadrada al volver. Mismos valores que ya
     usa el form de Contact (17px/49px, `.wp-form .elementor-field-textual`), para consistencia
     del proyecto. */
  .wp-newsletter__form .elementor-field-textual{font-size:17px;padding:12px 2px}
  .wp-newsletter__form .elementor-button{padding:15px 24px}
}

/* --- 31. Tarjetas de colaboración de About: título CIAN en reposo y MARINO en hover — invertido
   respecto al diseño (2026-08-26, Alex). Medido por @ola5-contacto sobre el HTML servido:
   títulos de las dos tarjetas enlazadas en rgb(11,111,164) (--wp-cyan-ink) y la tercera, que es
   un <div> y no un <a>, en rgb(14,52,87) (--wp-navy) — la correcta. `.wp-partners__card` SÍ
   declara `color:var(--wp-navy)` (línea 382 de este fichero) pero es 0,1,0 y pierde contra
   `.wp-section--light a:not(.wp-btn):not([data-scrollspy].is-active)` (§24.3, 0,4,1). Y como la
   regla siguiente pinta el `:hover` de marino, la tarjeta queda al revés que el diseño.
   Ese `a:not(...)` es correcto como base para los DEMÁS enlaces sobre fondo claro: lo que no
   procede es que gobierne el color de una tarjeta-bloque. Se empata en 0,4,1
   (`.wp-section--light` + `.wp-partners__cards` + `.wp-partners__card` ×2 = 4 clases, `a` = 1
   elemento) y se gana por ir DESPUÉS en el cascade — mismo patrón ya usado en §23 y §29, sin
   `!important`. El hover no cambia el color del título (el diseño sólo mueve el borde a cian). */
.wp-section--light .wp-partners__cards a.wp-partners__card.wp-partners__card,
.wp-section--light .wp-partners__cards a.wp-partners__card.wp-partners__card:hover{color:var(--wp-navy)}

/* --- 32. Marcador de "foto pendiente", promovido desde las hojas por página (2026-08-26, Alex).
   Estaba DUPLICADO en `page-home.css` y `page-tours.css` y sin scope de página, y funcionaba en
   About y en la ficha de tour sólo por el efecto colateral de que el tema encola las cinco hojas
   `page-*.css` en TODAS las páginas. Si alguien las scopea a su `body.page-id-…` —que es
   justo para lo que existen— el marcador se queda sin estilo EN SILENCIO: rayado invisible, hueco
   en blanco y nadie se entera, porque no hay error. Es un componente compartido por cuatro
   páginas, así que su sitio es este fichero. Las copias de las hojas por página se dejan (mismos
   valores, ganan por orden de encolado) y quedan como redundancia inofensiva hasta que sus dueños
   las poden. Detectado por @ola5-contacto al reutilizar la clase en About. */
.wp-card__pending{position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,var(--wp-navy-panel) 0 14px,var(--wp-navy-soft) 14px 28px);
  display:flex;align-items:center;justify-content:center;padding:18px;text-align:center}
.wp-card__pending span{font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.64)}

/* --- 33. Ficha rápida con un número IMPAR de datos: la celda que falta quedaba pintada
   (2026-08-28, Alex). `.wp-facts` es una rejilla de 2 columnas cuyo fondo es la línea
   (`background:var(--wp-line-dark)`) y cuyas celdas van en navy; con 1 ó 3 datos, el hueco de la
   celda ausente deja ver ese fondo y se lee como un recuadro azul vacío, no como un separador.
   Pasaba en 9 fichas (montserrat, santa-maria-del-mar, costa-brava, collioure, trencadis-workshop,
   bike-tour, e-bike-tour, picasso-museum, morning-food-tour) y es ANTERIOR al trabajo de hoy;
   lo detectó @contenido-enlaces con captura de `montserrat` y no lo aplicó por no ser suyo el CSS
   compartido — correcto. Que el último dato ocupe la fila entera cuando queda descabalado. */
.wp-facts > div:last-child:nth-child(odd){grid-column:1 / -1}

/* --- 34. Segunda placa de logo: la franja "The world is full of places" (2026-08-28, Alex).
   El cliente pidió el logo "a la derecha de «a tour ends»… EN CADA ESPACIO COMO ESE" — en plural —
   y el diseño v2 lo lleva en los dos bloques. Se había montado sólo en el manifiesto.
   `.wp-logo-plaque` ya trae su aspecto (navy, 1/1, flex) desde `page-home.css`; lo que faltaba
   era la rejilla del contenedor: sin ella el bloque era `display:block` y la placa salía de
   1360×1360 px ocupando el ancho entero — medido en navegador, no supuesto.
   Se replica la rejilla de `.wp-manifesto-head--logo` para que las dos placas sean el mismo
   componente y no dos cosas parecidas. Va en `extras.css` y no en `page-home.css` porque el
   widget es GLOBAL: si mañana se activa la placa en otra página, el layout ya viene con ella. */
.wp-cta-banner--logo{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:end}
.wp-cta-banner--logo > .wp-h2{grid-column:1}
.wp-cta-banner--logo > .wp-logo-plaque{grid-column:2;width:300px}
.wp-cta-banner--logo > .wp-cta-banner__action{grid-column:1/-1}
@media (max-width:860px){
  .wp-cta-banner--logo{grid-template-columns:minmax(0,1fr);gap:32px}
  .wp-cta-banner--logo > .wp-logo-plaque{grid-column:1;width:100%;max-width:260px;aspect-ratio:auto;padding:26px}
}

/* ==========================================================================
   26. PALETA ACLARADA — petición A1 del cliente (2026-08-28, @frontend)
   --------------------------------------------------------------------------
   «el azul del general de la web deberia ser un poco mas claro porque la noto
    poco brillosa me apaga un poco… me da como a dia nublado»

   Va aquí y NO en walking-planets.css porque esa hoja es el diseño aprobado y
   no se toca (CLAUDE.md §3). Esta hoja se encola DESPUÉS, así que a igual
   especificidad gana — sin un solo `!important`.

   ⚠️ LO QUE HAY QUE ENTENDER ANTES DE MOVER ESTOS NÚMEROS
   Aclarar el fondo BAJA el contraste del texto blanco translúcido que va encima,
   porque el fondo sube de luminancia más deprisa que el texto compuesto. Medido:
   con el navy viejo, `rgba(255,255,255,.52)` daba 4,60:1 — o sea que el diseño ya
   estaba a 0,1 puntos del suelo AA. Cualquier aclarado del navy, por pequeño que
   sea, lo tira por debajo de 4,5:1. Por eso este bloque NO es sólo un token nuevo:
   los alfas del texto y el cian suben A LA VEZ, y esa es la parte que no se puede
   quitar «para simplificar». Techo medido sin tocar los alfas: L 20,8% (#0F365B),
   un punto de luminosidad — invisible para el cliente. Con los alfas subidos el
   techo pasa a L 27,5%; el valor elegido (23,9%) se queda por debajo a propósito.
   ========================================================================== */

:root{
  /* Mismo tono (H 209°) y misma saturación: es un ajuste de LUMINOSIDAD, no un
     color nuevo. L 19,8% → 23,9% (L* 21,0 → 25,8; +45% de luminancia).
     Los tres azules suben conservando sus escalones de profundidad originales
     (+5,2 y +10,3 de L*), para que los paneles sigan leyéndose por delante del
     fondo y no al revés. */
  --wp-navy:#123F68;          /* era #0E3457 */
  --wp-navy-panel:#154B7C;    /* era #164067 */
  --wp-navy-soft:#195790;     /* era #1B4C79 */

  /* El cian sube lo justo para no perder AA sobre el navy nuevo: sobre #123F68 el
     #00B2D8 caía a 4,32:1. Con #00BCE6 vuelve a 4,82:1. Es la MISMA pareja en los
     dos sentidos (cian sobre navy = navy sobre cian), así que esto también repara
     el texto navy de los botones CTA. Nunca hay texto blanco sobre cian: se
     comprobó, el cian siempre se empareja con `color:var(--wp-navy)`. */
  /* Valor elegido midiendo, no a ojo: es el cian cuyo contraste sobre el navy
     NUEVO reproduce el del diseño original (5,07:1 → 5,09:1). O sea que la
     relación cian/azul que fijó el diseñador se conserva intacta; lo que sube es
     la luminancia de las dos, que es justo lo que pedía el cliente. De propina
     recupera el cian sobre panel (4,26 → 4,23) y sobre soft (3,55 → 3,51), que
     con un cian sin compensar habrían caído a 4,01 y 3,33. */
  --wp-cyan:#00C1EB;          /* era #00B2D8 */

  /* Canal RGB del navy nuevo, para superficies translúcidas que no pueden usar
     el hex. Si algún día vuelve a cambiar el navy, cambia también AQUÍ. */
  --wp-navy-rgb:18,63,104;
}

/* --- 26.1 Superficies casi opacas: si no suben, se ve la costura ---------------
   Estas cuatro llevan el rgb del navy ESCRITO A PELO en su hoja (no el token), con
   alfa .90–.96. Con el rgb viejo se quedarían más oscuras que la página que tienen
   detrás: un header y una barra de reserva notoriamente más apagados que el resto.
   Se redeclaran con rgb(18,63,104) y los mismos alfas. */
.wp-header{background:rgba(18,63,104,.9)}
.wp-header.is-scrolled{background:rgba(18,63,104,.94)}
.wp-bookbar{background:rgba(18,63,104,.96)}
/* 2026-09-10 (pasada móvil): la barra fija DESBORDABA a lo ancho en las fichas con precio de
   cifra larga — medido 417px de documento en una ventana de 390 en tapas-3, y 421 en tapas-4,
   o sea scroll horizontal en toda la página. La barra es `position:fixed;left:0;right:0`, así
   que no puede ser más ancha que la ventana… salvo que su contenido se niegue a encoger: es un
   flex y sus hijos traen `min-width:auto` por defecto. «From €95» en Anton 26px + «PER PERSON»
   + el botón no caben en 390px, y en vez de partirse empujaban.
   Se arregla dejando ENCOGER al grupo de texto (`min-width:0`) y permitiéndole partir en dos
   líneas; el botón nunca se parte, porque es la acción. No se recorta ni se esconde nada: la
   barra crece de alto lo justo, y el hueco que se le reserva a la página ya se mide en vivo. */
@media (max-width:860px){
  .wp-bookbar{gap:12px}
  .wp-bookbar > div:first-child{min-width:0;flex:1 1 auto;flex-wrap:wrap;row-gap:2px}
  /* El botón TAMBIÉN tiene que poder encoger. Con `flex:0 0 auto` seguía midiendo sus 221px
     enteros y la barra volvía a desbordar en tapas-3 y tapas-4 (medido: 417 y 421 en una
     ventana de 390). Con `0 1 auto` + `min-width:0` sólo encoge cuando hace falta, y entonces
     su rótulo parte en dos líneas en vez de empujar la barra fuera de la pantalla.
     NO se estira a lo ancho ni se apila: eso subiría el alto de la barra, y el hueco que la
     ficha le reserva está escrito a mano en page-tour.css (192/153/128px según ancho). Mientras
     la barra no crezca, esa reserva sigue siendo válida. */
  .wp-bookbar .wp-btn{flex:0 1 auto;min-width:0;white-space:normal;text-align:center;
    padding-left:18px;padding-right:18px}
}
/* `page-tours.css` se encola DESPUÉS de esta hoja, así que a igual especificidad
   ganaría él. Se duplica la clase para subir a 0,2,0 — la técnica del proyecto
   para ganar especificidad sin `!important` (CLAUDE.md §5-bis). */
.wp-tours-filterbar.wp-tours-filterbar{background:rgba(18,63,104,.96)}

/* --- 26.2 Hero: el velo azul que apagaba el vídeo -----------------------------
   El brillo que percibe el cliente es `vídeo × filtro × velo`, y el velo pesaba
   tanto como el filtro: .42 de navy sólido sobre la parte alta de la imagen.
   Baja a .28 arriba y .80 abajo. El pie NO se aclara más porque el H1 blanco del
   hero se apoya justo ahí (`.wp-hero__copy` es `justify-content:flex-end`);
   medido sobre la captura, el blanco aguanta 8,9:1 con .80. */
.wp-hero__scrim{background:linear-gradient(180deg,
  rgba(18,63,104,.28) 0%,rgba(18,63,104,.04) 34%,rgba(18,63,104,.26) 72%,rgba(18,63,104,.8) 100%)}

/* --- 26.3 Hero: el filtro del vídeo -------------------------------------------
   ⚠️ TRAMPA COMPROBADA (informe de verificación A1 §6): el filtro final NO sale de
   ninguna regla `filter:`, lo impone `@keyframes wpHeroIn` con `fill-mode: both`.
   Una regla `.wp-hero__media{filter:…}` en esta hoja se ve en el inspector y NO
   cambia NADA en pantalla — la animación gana siempre. La salida limpia es
   redefinir el keyframe entero: cuando dos `@keyframes` comparten nombre, gana el
   último declarado, y esta hoja va después. Por eso se repite el tramo de
   `transform` tal cual: el movimiento no cambia, sólo el filtro.
   brightness 1,08 → 1,22 · saturate 1,12 → 1,26 · contrast 1,05 (la toma aérea
   tiene bruma; un pelín de contraste es lo que la despeja). Sin riesgo de quemar
   altas luces: el póster tiene una media de 72/255, hay recorrido de sobra. */
@keyframes wpHeroIn{
  from{transform:scale(1.42) translateY(2%);filter:brightness(.95) saturate(1)}
  to{transform:scale(1) translateY(0);filter:brightness(1.22) saturate(1.26) contrast(1.05)}}

/* --- 26.4 Compensación de contraste en hojas que NO son mías -------------------
   Las mismas subidas de alfa que ya se aplicaron dentro de esta hoja, para las
   declaraciones que viven en `walking-planets.css` y en las `page-*.css`.
   Mapa: .42→.55 · .45→.58 · .52→.60 · .55→.62 · .60→.64.
   Las de `walking-planets.css` van a especificidad normal (esta hoja se encola
   después); las de `page-*.css` necesitan la clase duplicada. */

/* walking-planets.css:103 y :183 */
.wp-lang span{color:rgba(255,255,255,.62)}
.wp-cat__num{color:rgba(255,255,255,.62)}

/* page-home.css:266 · 326 (α .55) y 499 · 785 (α .45). Se encola después → clase
   duplicada. `.wp-card__price--ask` está declarado igual en page-tours.css:241. */
.wp-cat__empty.wp-cat__empty,
.wp-card__price--ask.wp-card__price--ask{color:rgba(255,255,255,.62)}
/* `.wp-seg-panel__note` NO lleva compensación, y es deliberado. En la hoja se lee
   `color:rgba(255,255,255,.45)` (page-home.css:499), que invitaría a subirlo — pero
   ese bloque NO es el que gana: los tres notes se renderizan a 16,5px (no a los
   11,5px de esa regla) y con un blanco mucho más opaco, así que ya daban 7,77:1.
   Un override plano los OSCURECÍA a 4,18:1. Medido con la sonda, no leído del CSS:
   es el gotcha de «verificar mirando, no leyendo el atributo» del CLAUDE.md. */

/* ⚠️ `.wp-reviews-note` está declarado DOS VECES con intenciones OPUESTAS:
   page-home.css:785 lo pinta de blanco translúcido sobre navy, y page-tour.css:232
   de tinta navy sobre la franja CIAN de la ficha. Un override plano de la clase
   (aunque sea con clase duplicada) gana en las dos y deja el aviso de la ficha en
   blanco sobre cian: medido, 1,56:1 — ilegible. Por eso va acotado al contexto y
   no a la página: `:not(.wp-section--cyan)` deja la ficha en manos de su propia
   regla. Comprobado en el navegador que el de la Home cuelga de `.wp-section` a
   secas sobre rgb(18,63,104) y el de la ficha de `.wp-section--cyan`. */
.wp-section:not(.wp-section--cyan) .wp-reviews-note{color:rgba(255,255,255,.58)}

/* page-tours.css:88 · 115 · 118 · 241 */
.wp-tours-row__num.wp-tours-row__num,
.wp-tours-axis__caption.wp-tours-axis__caption,
.wp-tours-axis__link-price.wp-tours-axis__link-price{color:rgba(255,255,255,.6)}

/* page-legal-contact.css:59 — su selector ya lleva `body.page-id-43`, así que hay
   que igualarlo y sumar una clase para ganar. */
body.page-id-43 .wp-contact-form__note.wp-contact-form__note{color:rgba(255,255,255,.6)}

/* page-tour.css:180 — partía de .42 (3,53:1, ya fallaba AA antes de este cambio). */
.wp-ask__status-note.wp-ask__status-note{color:rgba(255,255,255,.55)}

/* ==========================================================================
   35. PLACA DE LOGO SIN CAJA — reunión con el cliente del 28/08/2026
   --------------------------------------------------------------------------
   Sobre los dos bloques que llevan logo ("A tour ends. A memory stays." y "The world is full of
   places. We're here for the stories."), el cliente pidió lo mismo en los dos:
     «hay que centrarlo, quitarle el fondo azul y el texto "You don't buy a tour. You make a
      memory."»  ·  «el bloque cuadrado, quitarlo, solo dejar el logo y no tan pegado a la derecha»
   Tres cosas: fuera el cuadrado navy, fuera el pie amarillo (ya no se renderiza en el PHP) y el
   logo centrado en el hueco, despegado del borde derecho.

   ⚠️ ESPECIFICIDAD — no es adorno que cada regla doble la clase. `page-home.css` se encola
   DESPUÉS de este fichero (functions.php:56-59, depende de 'walking-planets-extras'), así que a
   igualdad de peso gana él: `.wp-logo-plaque` (0,1,0) de page-home.css:811 pisaría cualquier
   regla nuestra de un solo nombre de clase. `.wp-logo-plaque.wp-logo-plaque--bare` = 0,2,0, y
   donde hay que ganarle a `.wp-cta-banner--logo > .wp-logo-plaque` (0,2,0) se usa 0,3,0.

   ⚠️ Y el color: el fichero de logo cambia en el PHP del widget a la versión POSITIVA (navy).
   El de Medios es la versión NEGATIVA — sus píxeles opacos son blancos (medidos: 254,255,255) —
   y estaba hecha para vivir dentro del cuadrado navy. Sin caja detrás desaparecía sobre el blanco
   del manifiesto y se quedaba en nada sobre el celeste del banner. Quitar la caja SIN cambiar el
   fichero habría dado un hueco vacío, no un logo. */
.wp-logo-plaque.wp-logo-plaque--bare{
  background:none;
  aspect-ratio:auto;
  padding:0;
  gap:0;
  align-self:center;
  justify-self:center;
}
/* 2026-09-10: el diseno da al logo del bloque cian una columna de 300px; este width fijo
   de 200px lo capaba y hacia inutil el `sizes` del PHP. Medido por el QA visual: 300x154
   en el diseno frente a 200 en la web. */
.wp-logo-plaque.wp-logo-plaque--bare .wp-logo-plaque__img{width:300px;max-width:100%}

/* El hueco donde vive el logo se ensancha para que "centrado" signifique algo: con la columna de
   260px el logo quedaba a 30px del borde del shell, o sea igual de pegado que antes.
   ⚠️ Va dentro de `min-width:861px` A PROPOSITO. El colapso a 1 columna en movil vive en
   `page-home.css:889` con especificidad 0,1,0 dentro de `max-width:860px`; una regla nuestra de
   0,2,0 sin media query le ganaria tambien alli y dejaria la rejilla de 2 columnas en el movil.
   La especificidad no respeta los breakpoints: hay que acotar el rango a mano. */
@media (min-width:861px){
  /* 2026-09-10 (registro §18): las dos placas NO miden lo mismo en el diseño y aquí compartían
     los 330px. El fresco da `minmax(0,1fr) 420px` al manifiesto ("A tour ends. A memory stays.")
     y `minmax(0,1fr) 300px` al bloque cian ("The world is full of places"), con el <img> al 100%
     de su columna en los dos casos. De ahí que el logo del manifiesto se viera pequeño: no era
     un problema de la placa, era que se le aplicaba la medida de la otra. */
  .wp-manifesto-head--logo.wp-manifesto-head--logo{grid-template-columns:minmax(0,1fr) 420px}
  .wp-manifesto-head--logo .wp-logo-plaque.wp-logo-plaque--bare .wp-logo-plaque__img{width:420px}
  .wp-cta-banner--logo.wp-cta-banner--logo{grid-template-columns:minmax(0,1fr) 300px}
  .wp-cta-banner--logo > .wp-logo-plaque.wp-logo-plaque--bare{width:auto}
}

@media (max-width:860px){
  /* En 1 columna "centrado" pasa a ser alineado con el titular: centrar un logo de 200px sobre un
     H2 alineado a la izquierda se lee como un descuadre, no como una decisión. */
  .wp-cta-banner--logo > .wp-logo-plaque.wp-logo-plaque--bare{
    width:auto;max-width:none;padding:0;justify-self:start;
  }
  .wp-manifesto-head--logo > .wp-logo-plaque.wp-logo-plaque--bare{justify-self:start}
}
@media (max-width:640px){
  .wp-logo-plaque.wp-logo-plaque--bare{padding:0;max-width:none;justify-self:start}
  .wp-logo-plaque.wp-logo-plaque--bare .wp-logo-plaque__img{width:168px}
}

/* --- 35. Carrusel de reels: sin barra, con botonera y con tarjeta final ------------
   (2026-08-28, @frontend · reunión con el cliente: «arreglar el carrusel de "Watch first.
   Book later.", quitar la barra lateral, y poner botoneras, y al final una experiencia
   adicional que invite a que es tu turno».)

   Sección AÑADIDA AL FINAL a propósito: `walking-planets-extras.css` la estaba escribiendo
   otro agente en la misma franja horaria, y un bloque nuevo al final no puede pisar su
   trabajo. Nada de aquí toca reglas existentes.

   Lo que NO se toca: la animación `wpReelScroll` de page-home.css §10 (0 → -50%), que ya
   cierra el bucle. Las flechas mueven el reloj de esa misma animación (walking-planets.js
   §8-bis), no el scroll ni el transform a mano.
   ------------------------------------------------------------------------------- */

/* 35.1 La barra de desplazamiento del navegador deja de verse — pero el contenedor SIGUE
   siendo `overflow-x:auto`, así que arrastrar con el dedo o con trackpad funciona igual.
   Se oculta la barra, no el desbordamiento: poner `overflow-x:hidden` habría creado un
   contexto de scroll y roto todos los `position:sticky` de por debajo (CLAUDE.md §5). */
.wp-reels.wp-reels{scrollbar-width:none;-ms-overflow-style:none}
.wp-reels.wp-reels::-webkit-scrollbar{width:0;height:0;display:none}

/* 35.2 Empalme exacto del bucle. La pista mide `nº tarjetas × ancho + (nº-1) × hueco`, pero
   la animación la desplaza justo la MITAD de ese ancho — y la distancia real entre el
   comienzo de un set y el de su copia es `nº tarjetas del set × (ancho + hueco)`, un hueco
   MÁS. Medido antes de este arreglo: mitad 1910 px contra paso 1920 px, o sea un salto de
   10 px en cada vuelta (venía de fábrica; con 5 tarjetas apenas se notaba). Este ítem vacío
   añade el hueco que faltaba al final de la pista: 3840/2 = 1920 = paso exacto.
   No es un cambio de la animación: es la geometría que la animación ya daba por supuesta. */
.wp-reels__track::after{content:"";flex:0 0 0;width:0;height:1px}

/* 35.3 Botonera. Los tres estados van con la clase REPETIDA (0,2,x) a propósito: el
   `reset.css` de Hello Elementor pinta `button:hover,button:focus{background:#CC3366}` con
   especificidad 0,1,1 y le ganaría a un `.clase:hover` normal — el botón se vería bien en
   reposo y ROSA justo al pulsarlo (CLAUDE.md §5-bis). */
.wp-reels-carousel{position:relative}
.wp-reels-nav{
  display:flex;gap:12px;justify-content:flex-end;align-items:center;
  max-width:var(--wp-maxw);margin:0 auto;
  padding-top:14px;padding-right:var(--wp-gutter);padding-left:var(--wp-gutter);padding-bottom:0;
}
.wp-reels-nav__btn.wp-reels-nav__btn{
  width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;
  border:1px solid rgba(14,52,87,.3);background:transparent;color:var(--wp-navy);
  font-size:19px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.wp-reels-nav__btn.wp-reels-nav__btn:hover{background:var(--wp-navy);color:var(--wp-white);border-color:var(--wp-navy)}
.wp-reels-nav__btn.wp-reels-nav__btn:focus{background:var(--wp-navy);color:var(--wp-white);border-color:var(--wp-navy)}
.wp-reels-nav__btn.wp-reels-nav__btn:focus-visible{outline:2px solid var(--wp-cyan);outline-offset:3px}
.wp-reels-nav__btn.wp-reels-nav__btn:active{transform:translateY(1px)}

/* 35.4 Tarjeta final "Your turn" (la clase .wp-reel--cta ya existía en §19.13; aquí va lo
   suyo como ENLACE). Todos los textos en marino sólido sobre el cian: el marino a media
   opacidad sobre cian se queda en 3,1:1 y no llega al 4,5:1 de AA — la jerarquía la hace el
   tamaño, no la transparencia. */
a.wp-reel--cta,a.wp-reel--cta:visited{text-decoration:none;gap:10px;color:var(--wp-navy);
  transition:background-color .18s ease}
/* 2026-09-10 (Pedro): la tarjeta no se ponía amarilla al pasar por encima. El diseño la declara
   `background:#00B2D8` con `style-hover="background:#FFE500"` (Walking Planets Home.dc.html, el
   <a href="#reel-upload"> del carrusel): faltaba justo eso — aquí sólo estaba el subrayado del
   enlace interior, que es un detalle, no el estado. El texto NO cambia: sigue en marino, que
   sobre el amarillo mantiene el contraste; lo único que cambia es el fondo, como en el diseño.
   `:active` va incluido a propósito — en un táctil no hay hover y un toque tiene que dar
   respuesta visual antes de saltar al formulario. */
a.wp-reel--cta:hover,
a.wp-reel--cta:focus-visible,
a.wp-reel--cta:active{background:var(--wp-yellow)}
.wp-reel__cta-kicker{
  font-family:var(--wp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wp-navy);
}
.wp-reel__cta-title{
  font-family:var(--wp-display);font-weight:400;font-size:26px;line-height:1;
  text-transform:uppercase;color:var(--wp-navy);
}
.wp-reel__cta-link{
  align-self:flex-start;margin-top:2px;padding-bottom:4px;
  font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wp-navy);border-bottom:1px solid rgba(14,52,87,.45);
  transition:border-color .18s ease;
}
a.wp-reel--cta:hover .wp-reel__cta-link,
a.wp-reel--cta:focus-visible .wp-reel__cta-link{border-bottom-color:var(--wp-navy)}
a.wp-reel--cta:focus-visible{outline:3px solid var(--wp-navy);outline-offset:-3px}

@media (max-width:860px){
  /* Longhand, nunca el atajo `padding`: el atajo pisaría el gutter móvil de 18px que impone
     `walking-planets.css` y estrecharía el bloque (CLAUDE.md §5-bis). */
  .wp-reels-nav{
    justify-content:center;
    padding-right:var(--wp-gutter-mobile);padding-left:var(--wp-gutter-mobile);padding-top:12px;
  }
  .wp-reel__cta-title{font-size:23px}
}

/* ==========================================================================
   36. CIERRE DE PARTNERS MÁS GRANDE — reunión 28/08/2026
   --------------------------------------------------------------------------
   «este texto hacerlo más grande y llamativo, pero sin romper el diseño:
    Got a place, a story or an idea worth sharing with travellers? Or fancy guiding with us?»
   Estaba en `.wp-body` (18px) y se leía como un pie de página al lado del botón "Work with us".
   Sube a la escala de `.wp-lead` con la display en versalitas — es la tipografía que la web ya usa
   para las llamadas dentro de sección, así que llama la atención sin inventar un estilo nuevo.
   El `flex:1 1 …` es lo que impide que "romper el diseño": el contenedor es un flex con
   `justify-content:space-between`, y al crecer la letra el texto empujaba el botón fuera de sitio.
   Con base de flex declarada, texto y botón siguen en la misma fila hasta 900px y ahí parten
   limpiamente. */
.wp-partners__closing{
  display:block;
  max-width:52ch;
  font-family:var(--wp-display);
  /* 2026-09-10: clamp(22,2.3vw,34) -> clamp(28,3vw,46), los valores literales del fresco.
     El `flex` se va de aquí: el reparto lo hace ahora `.wp-partners__callout-copy`, que es
     quien compite con la columna de botones. */
  font-size:clamp(28px,3vw,46px);
  line-height:1.02;
  text-transform:uppercase;
  color:var(--wp-navy);
}
@media (max-width:640px){
  .wp-partners__closing{font-size:26px}
}

/* ==========================================================================
   37. "YOUR TURN": CAJA AMARILLA — reunión 28/08/2026
   --------------------------------------------------------------------------
   «agrupar esto en un bloque amarillo para llamar la atención»: el texto de invitación, la línea
   de límites (MP4 or MOV…) y el enlace a Instagram. El título "Your turn" se queda FUERA, sobre
   el celeste, porque es el remate de la sección y meterlo dentro convertía la caja en un panel
   entero y perdía el contraste que el cliente busca.

   ⚠️ HOVER — el fallo que este bloque tenía servido en bandeja. Los dos enlaces de aquí llevan
   `color:var(--wp-white)` en `:hover`/`:focus-visible` (page-home.css:581-582 y 615-616), pensado
   para el fondo cian. Sobre amarillo #FFE500 el blanco da 1,07:1: el enlace DESAPARECE al pasar
   el ratón, en estado base se ve perfecto y una captura en reposo lo daría por bueno. Es el mismo
   patrón del botón rosa del tema padre (CLAUDE.md §5-bis). Se fuerza navy en los tres estados.

   ⚠️ ESPECIFICIDAD — `page-home.css` se encola DESPUÉS de este fichero, así que empatar no basta:
   `.wp-reel-upload__text a:hover` es 0,2,1 y `.wp-reel-upload .wp-reel-upload__ig:hover` es 0,3,1.
   Por eso cada selector de abajo suma la clase de la caja por delante. */
.wp-reel-upload__callout{
  background:var(--wp-yellow);
  color:var(--wp-navy);
  margin-top:20px;
  padding:26px 26px 22px;
}
.wp-reel-upload__callout .wp-reel-upload__text{
  margin:0 0 14px;
  font-size:18px;
  font-weight:600;
  max-width:36ch;
}
.wp-reel-upload__callout .wp-reel-upload__limits{color:rgba(14,52,87,.78)}

/* Los tres estados del enlace del párrafo (base, hover, focus) en navy: sobre amarillo el blanco
   del diseño original es invisible. */
.wp-reel-upload__callout .wp-reel-upload__text a,
.wp-reel-upload__callout .wp-reel-upload__text a:visited,
.wp-reel-upload__callout .wp-reel-upload__text a:hover,
.wp-reel-upload__callout .wp-reel-upload__text a:focus-visible{
  color:var(--wp-navy);
  text-decoration:underline;
}
.wp-reel-upload .wp-reel-upload__callout .wp-reel-upload__ig,
.wp-reel-upload .wp-reel-upload__callout .wp-reel-upload__ig:visited,
.wp-reel-upload .wp-reel-upload__callout .wp-reel-upload__ig:hover,
.wp-reel-upload .wp-reel-upload__callout .wp-reel-upload__ig:focus-visible{
  color:var(--wp-navy);
  text-decoration:underline;
}
/* Al pasar por encima el cambio tiene que NOTARSE sin perder contraste: en vez de cambiar el
   color de la letra (que es lo que rompía), se invierte la caja del enlace. */
.wp-reel-upload .wp-reel-upload__callout .wp-reel-upload__ig:hover,
.wp-reel-upload .wp-reel-upload__callout .wp-reel-upload__ig:focus-visible{
  background:var(--wp-navy);
  color:var(--wp-yellow);
  text-decoration:none;
  padding-inline:8px;
  margin-inline:-8px;
}
@media (max-width:640px){
  .wp-reel-upload__callout{padding:20px 18px 18px;margin-top:16px}
  .wp-reel-upload__callout .wp-reel-upload__text{font-size:16.5px}
}

/* 35.5 El salto de la tarjeta final al formulario aterrizaba con `top:0` — o sea, con la
   primera franja del panel metida DEBAJO de la cabecera pegajosa (medido: 0 px). Se corrige
   con `scroll-margin-top`, que es lo que el navegador ya descuenta al saltar a un ancla; no
   hace falta JS ni tocar el manejador de hash del acordeón. 104px = cabecera (86) + aire. */
.wp-reel-upload{scroll-margin-top:104px}

/* ==========================================================================
   38. CIERRE DE PARTNERS EN CAJA AMARILLA — reunión 28/08/2026 (P-13)
   --------------------------------------------------------------------------
   «esto me encanta, pero estaría bueno también que estén en un cuadro, en un cuadrito amarillo
    algo porque es algo para mí re importante» (min. 40:02). Es su canal de captación de guías y
   colaboradores, y hasta hoy se leía como un pie de sección: hairline + texto navy sobre blanco.

   El tamaño del texto ya se subió en la §36; lo único que faltaba era la caja. Se envuelve el
   contenido en `.wp-partners__callout` (partners.php) y el reparto texto/botón sigue siendo el
   mismo flex de `.wp-partners__bottom`, sólo que dentro del amarillo — de ahí que «no rompa el
   diseño»: no se mueve nada de sitio, cambia el fondo.

   El borde superior de `.wp-partners__bottom` se retira SOLO cuando hay callout (`:has()`): una
   hairline pegada al canto de un bloque amarillo se lee como un fallo de render, y la caja ya
   separa por sí misma. La variante de 3 tarjetas de About no tiene `__bottom`, así que no la toca.

   ⚠️ CONTRASTE — el botón NO puede seguir siendo `--ghost-cyan` aquí: el cian #00B2D8 sobre el
   amarillo #FFE500 se queda en ~1,9:1 y el borde del botón prácticamente desaparece. Misma
   familia de fallo que el enlace blanco del callout de "Your turn" (§37) y que el botón rosa del
   tema padre (CLAUDE.md §5-bis): en reposo parece correcto y sólo se ve al mirarlo. Aquí se
   declara `--on-yellow` con LOS TRES ESTADOS escritos (base, hover, focus-visible) y navy sólido.
   ========================================================================== */
#partners .wp-partners__bottom:has(.wp-partners__callout){
  border-top:0;
  padding-top:0;
  display:block;
}
/* 2026-09-12 (Pedro: «¿ese espacio en blanco del medio debería estar ahí?»). No: la caja
   amarilla es lo ÚLTIMO antes del pie, y debajo le quedaban los 110px de `padding-bottom` que
   `.wp-section` da a todas las secciones — una franja blanca entre el amarillo y el navy.
   El fresco lo dice literal: `<section id="partners" style="...padding:104px 0 0">` — relleno
   ARRIBA, cero abajo, y el `<footer>` empieza pegado.
   Acotado con `:has(.wp-partners__callout)` a propósito: la variante de 3 tarjetas de /about/
   NO termina en la caja amarilla y ahí el aire de abajo sí hace falta. */
#partners:has(.wp-partners__callout){padding-bottom:0}
/* 2026-09-10 (Pedro): la caja iba DENTRO de `.wp-shell`, así que el amarillo quedaba metido
   hacia dentro con el margen de la página a los lados. En el fresco la banda amarilla llega de
   canto a canto (`padding:52px 40px` sin max-width) y lo que se acota a 1440px es su CONTENIDO.
   Los márgenes negativos cancelan el `padding` horizontal de `.wp-section` y el `padding` los
   devuelve por dentro: el texto queda alineado con el resto de la página, el color no. */
#partners .wp-partners__callout{
  margin-inline:calc(var(--wp-gutter) * -1);
  padding:52px var(--wp-gutter);
  background:var(--wp-yellow);
  color:var(--wp-navy);
}
/* ⚠️ El margen negativo tiene que valer EXACTAMENTE lo que la sección acolcha, y a ≤860px eso
   deja de ser `--wp-gutter` (40px) y pasa a `--wp-gutter-mobile` (18px) — lo cambia la regla
   de `.wp-section` de walking-planets.css:293. Sin este bloque, la caja tiraba 40px hacia cada
   lado donde sólo había 18: 22px de desbordamiento por lado y **scroll horizontal en la Home
   entera** (medido: 413px de documento en una ventana de 390). Fallo introducido hoy al hacer
   la caja de canto a canto y cazado en la pasada móvil. */
@media (max-width:860px){
  #partners .wp-partners__callout{
    margin-inline:calc(var(--wp-gutter-mobile) * -1);
    padding:40px var(--wp-gutter-mobile);
  }
}
#partners .wp-partners__callout-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:28px 40px;
}
#partners .wp-partners__callout-copy{flex:1 1 34ch;max-width:52ch}
#partners .wp-partners__callout-kicker{
  display:block;
  margin-bottom:14px;
  font-family:var(--wp-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wp-navy);
}
#partners .wp-partners__callout-lead{
  margin:12px 0 0;
  font-size:17px;line-height:1.5;color:var(--wp-navy);
}
/* Las dos llamadas van en columna, como el fresco: el botón navy y debajo el enlace subrayado.
   `align-items:flex-start` para que el botón no se estire al ancho del enlace. */
#partners .wp-partners__callout-actions{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
/* Enlace secundario sobre amarillo: navy subrayado. NO se usa `.wp-btn`: es un enlace de texto,
   y darle cuerpo de botón lo pondría a competir con la llamada principal. `min-height:44px` es
   la diana táctil del diseño, no un adorno. */
#partners .wp-partners__callout-link,
#partners .wp-partners__callout-link:visited{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--wp-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--wp-navy);text-decoration:underline;
  transition:color .18s ease;
}
#partners .wp-partners__callout-link:hover,
#partners .wp-partners__callout-link:focus-visible{color:var(--wp-cyan-ink)}
/* El texto ya viene en display/uppercase por la §36; aquí sólo se asegura el color sobre el
   amarillo, que antes heredaba del fondo claro de la sección. */
#partners .wp-partners__callout .wp-partners__closing{color:var(--wp-navy)}

/* Botón sobre amarillo: navy sólido. `.wp-btn` base vive en walking-planets.css (diseño
   aprobado, no se toca); esta variante sólo redefine color/fondo/borde. Se repite la clase para
   ganar al CSS por página de Elementor sin `!important` (CLAUDE.md §5-bis). */
#partners .wp-partners__callout .wp-btn--on-yellow.wp-btn--on-yellow,
#partners .wp-partners__callout .wp-btn--on-yellow.wp-btn--on-yellow:visited{
  background:var(--wp-navy);
  border:1px solid var(--wp-navy);
  color:var(--wp-yellow);
  flex:0 0 auto;
}
/* 2026-09-10: el hover era `transparent` + borde navy; el fresco lo declara
   `background:#00B2D8;color:#0E3457`. La advertencia de contraste de arriba sigue siendo cierta
   pero es OTRA cosa: lo que no se ve es el cian como BORDE o como TEXTO sobre el amarillo. Un
   relleno cian sólido con texto marino encima da 7,4:1 y es el estado del diseño. */
#partners .wp-partners__callout .wp-btn--on-yellow.wp-btn--on-yellow:hover,
#partners .wp-partners__callout .wp-btn--on-yellow.wp-btn--on-yellow:focus,
#partners .wp-partners__callout .wp-btn--on-yellow.wp-btn--on-yellow:focus-visible{
  background:var(--wp-cyan);
  border-color:var(--wp-cyan);
  color:var(--wp-navy);
}
#partners .wp-partners__callout .wp-btn--on-yellow.wp-btn--on-yellow:focus-visible{
  outline:3px solid var(--wp-navy);
  outline-offset:3px;
}
@media (max-width:860px){
  /* Longhand, nunca el atajo `padding` (CLAUDE.md §5-bis). */
  #partners .wp-partners__callout{
    padding-top:26px;padding-bottom:26px;padding-left:22px;padding-right:22px;gap:20px;
  }
}

/* ==========================================================================
   39. MINIATURA EN LAS FILAS DE «ALL EXPERIENCES» — reunión 28/08/2026 (P-05)
   --------------------------------------------------------------------------
   «como en el desglose de los tours … aparece como una fotito acá, que acá también aparezca»
   (min. 26:15). El bloque es el índice de /tours/ (al que se llega justamente por la celda
   "All experiences →" del megamenú), no la parrilla de Home — la parrilla de Home YA lleva foto.

   ⚠️ La clase `.wp-tours-row` la comparten DOS widgets: el índice (22 filas) y los 3 segmentos
   de `#segments` en la misma página. Por eso TODO va acotado con `#index` — sin eso, las 3 filas
   de segmentos (que no tienen ni deben tener foto) se quedarían con una columna vacía.

   ⚠️ ESPECIFICIDAD: `page-tours.css` se encola DESPUÉS de esta hoja (functions.php: depende de
   `walking-planets-extras`), así que empatar no basta contra su `.wp-tours-row{grid-template-
   columns:64px minmax(0,1fr) auto}` (0,1,0). `#index` + 2 clases = 1,2,0 y gana sin `!important`.

   Sin foto NO se pone una de relleno: se pinta la placa rayada con el nombre de la intención
   (dato real de la taxonomía), mismo criterio que `sw_render_card_plate()` en las tarjetas. Hoy
   son 15 de 22; en cuanto cada ficha reciba su foto de banco, aparece sola sin tocar nada.
   ========================================================================== */
#index .wp-tours-row.wp-tours-row--withthumb{
  grid-template-columns:64px 104px minmax(0,1fr) auto;
}
#index .wp-tours-row__thumb{
  width:104px;
  aspect-ratio:3/2;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;
}
#index .wp-tours-row__thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* La fila entera baja a .16 de opacidad cuando el filtro la descarta; la foto acompaña sola
     porque hereda la opacidad del <a>. Aquí sólo el desaturado suave del reposo → color al
     pasar por encima, coherente con el hover cian de la fila. */
  filter:saturate(.85);
  transition:filter .35s ease,transform .45s ease;
}
#index .wp-tours-row:hover .wp-tours-row__thumb img{filter:saturate(1.05);transform:scale(1.04)}

/* Placa para las filas cuya ficha aún no tiene foto (o cuya foto está en el denylist). */
#index .wp-tours-row__thumb--plate{
  background-color:rgba(255,255,255,.05);
  background-image:repeating-linear-gradient(135deg,
    rgba(255,229,0,.16) 0 5px, rgba(255,229,0,0) 5px 11px);
  border:1px solid rgba(255,255,255,.16);
}
#index .wp-tours-row__thumb-cat{
  font-family:var(--wp-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
  text-align:center;
  padding-left:4px;padding-right:4px;
  line-height:1.2;
}

@media (max-width:860px){
  /* A 390 el ancho útil es 354px (gutter 18+18) y NO sobra nada: medido ANTES de tocar, el
     título ya partía en 4 líneas y "ASK US →" ya iba pegado a él. Una miniatura de 62px con los
     huecos de 26px del diseño le robaba una línea más al título (Santa Maria pasaba de 4 a 5).
     Ese espacio se recupera de donde no se nota: número a 36px (es mono 12px, decorativo),
     huecos a 12 y el par precio/flecha a 12 en vez de 22. Así el título dispone de ~236px frente
     a los ~238px que tenía SIN miniatura — el mismo reparto de líneas que antes del cambio.
     `__right` va acotado con #index: las 3 filas de `#segments` conservan su gap de 22. */
  #index .wp-tours-row.wp-tours-row--withthumb{
    grid-template-columns:36px 56px minmax(0,1fr) auto;
    gap:12px;
  }
  #index .wp-tours-row__thumb{width:56px}
  #index .wp-tours-row__thumb-cat{font-size:11.5px;letter-spacing:.1em}   /* 11,5px (fix del lead 17:30, restaurado 00:12 tras revertirlo sin querer con mi subida del logo — era 8px, ilegible) */
  #index .wp-tours-row__right{gap:12px}
}

/* 2026-09-10: linea bajo el logo del bloque cian ("Barcelona · Catalonia · Beyond").
   Valores copiados del .dc.html de Scarlet, no inventados. */
.wp-logo-plaque__caption{display:block;margin-top:16px;font-family:var(--wp-mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#0E3457;line-height:1.8;font-weight:700}

/* 2026-09-10 (Scarlet, 10:25): «en los tours recomendados debajo de un tour no se leen las
   letras dentro de la foto, deberian ser blancas».
   CAUSA: `.wp-card__badges` pinta un degradado navy sobre la foto pero NO define color de
   texto: lo hereda del enlace. En la home la seccion es oscura y hereda blanco (se lee); en
   los tours relacionados la seccion es `--light` y `.wp-section--light .wp-cards a.wp-card`
   la pone navy → texto navy sobre degradado navy, ilegible. Por eso fallaba SOLO ahi.
   Los badges van SIEMPRE dentro de la foto y sobre ese degradado oscuro, sea cual sea el
   fondo de la seccion: su color no depende del contexto, se fija. */
.wp-card__badges,
.wp-section--light .wp-cards a.wp-card.wp-card .wp-card__badges,
.wp-section--light .wp-cards a.wp-card.wp-card .wp-card__badges span{color:var(--wp-white)}


/* ==========================================================================
   40. SUELO DE LEGIBILIDAD EN MÓVIL — 11.5px (2026-09-10, pasada móvil)
   El diseño trae esta regla en LOS 33 .dc.html:
       @media (max-width:860px){ [style*="font-size:10px"],[style*="font-size:10.5px"]
                                 {font-size:11.5px !important} }
   Es decir: la letra pequeña de los rótulos sube en pantallas pequeñas, siempre. En la web
   sólo se había aplicado a UN sitio (`body.page-id-42 .wp-card__meta`, page-about-guides.css),
   así que quedaban 20 selectores por debajo del mínimo — medido en las 32 páginas a 360px:
   «Live guide tracking» y «Powered by HubCityGuides» en las 26 fichas, el rótulo «Your turn»
   de la Home y las tres cabeceras de la tabla de cookies del aviso legal.
   Aquí se hace por CLASE en vez de por `[style*=...]`: nuestro marcado no lleva la medida en
   línea, y una lista de clases se puede leer y mantener; el atributo, no. */
@media (max-width:860px){
  .wp-article-body figcaption,
  .wp-article-promo__kicker,
  .wp-article-related__label,
  .wp-ask__status-note,
  .wp-card__badges,
  .wp-card__plate .wp-plate__cat,
  .wp-cat__shot--plate .wp-plate__cat,
  .wp-data-row__label,
  .wp-footer__bottom,
  .wp-form .elementor-field-label,
  .wp-map__strip,
  .wp-map__brand,
  .wp-reel__cta-kicker,
  .wp-reel__tag,
  .wp-segment__media--plate .wp-plate__cat,
  .wp-side-panel__label,
  .wp-table-row--head,
  .wp-ticket-card__calendar-head,
  .wp-tours-viewtoggle__btn{font-size:11.5px}
}

/* ==========================================================================
   41. PANTALLAS MUY ANCHAS — el contenido llega a 1760px (2026-09-10)
   El diseño trae, en 32 de los 33 .dc.html:
       @media (min-width:1800px){ header>div, section>div:not([style*="max-width"])
                                  {max-width:1760px; margin-inline:auto} }
   La web cortaba en `--wp-maxw:1440px` a cualquier ancho, así que en un monitor de 1920+ el
   sitio se quedaba con dos franjas vacías de 240px que el diseño no tiene.
   Se aplica SÓLO a partir de 1800px, igual que el diseño: por debajo de ese ancho no cambia
   absolutamente nada, así que no puede re-maquetar ninguna de las 32 páginas ya verificadas. */
@media (min-width:1800px){
  :root{--wp-maxw:1760px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §  TRUSTED BY — franja de logos de empresas que trabajan con Walking Planets
   Ronda 1 del cliente, punto 6. Widget: starter-widgets/widgets/global/trusted-by.php.

   El widget NO se pinta si hay menos de 3 logos con imagen (fail-safe en PHP), así que
   estas reglas pueden vivir aquí desde hoy sin que se vea nada hasta que lleguen los logos.

   Monocromo azul marino: se consigue con `grayscale` + `sepia`+`hue-rotate` en vez de un
   filtro de color plano porque los logos llegan con fondos y contrastes distintos y
   `brightness(0) saturate(100%)` los aplanaría a negro sólido perdiendo las siluetas
   claras (el de Tours For Today es BLANCO: aplanado a negro desaparecería sobre navy).
   `opacity` remata la igualación óptica entre un PNG denso y uno fino.
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-trustedby{padding:52px 0;background:var(--wp-cream,#F4F1EA)}
.wp-trustedby__label{
  display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 30px;
  font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wp-cyan-ink,#10395F);
}
.wp-trustedby__rule{display:block;width:40px;height:1px;background:rgba(14,52,87,.25)}
.wp-trustedby__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:30px 56px;
}
.wp-trustedby__item{display:flex;align-items:center;justify-content:center}
/* 2026-09-18 — la especificidad va a (0,2,0) A PROPOSITO, anteponiendo `.wp-trustedby`.
   Elementor trae reglas propias para las imagenes de dentro de un widget con specificity
   (0,1,1) —del tipo `.elementor img{height:auto;max-width:100%}`—, que ganan a un
   `.wp-trustedby__img` pelado (0,1,0): el `height` se perdia, mandaba `width:100%` y cada
   logo se pintaba del ancho del contenedor (medido en produccion: 745x274 px donde tocaban
   92x34). Las media queries NO suman especificidad, asi que la de movil de mas abajo lleva
   el mismo prefijo o no llegaria a aplicarse nunca. */
.wp-trustedby .wp-trustedby__img{
  display:block;height:var(--wp-trustedby-h,38px);width:auto;max-width:190px;object-fit:contain;
  filter:grayscale(1) sepia(1) hue-rotate(175deg) saturate(2.2) brightness(.62);
  opacity:.82;transition:filter .3s ease,opacity .3s ease;
}
/* A color al pasar el ratón — y también al enfocar con teclado cuando el logo es enlace:
   sin `:focus-within` el estado sería inalcanzable sin ratón. */
.wp-trustedby .wp-trustedby__item:hover .wp-trustedby__img,
.wp-trustedby .wp-trustedby__link:focus-visible .wp-trustedby__img,
.wp-trustedby .wp-trustedby__item:focus-within .wp-trustedby__img{filter:none;opacity:1}
.wp-trustedby__link{display:block;line-height:0}
.wp-trustedby__link:focus-visible{outline:2px solid var(--wp-yellow,#FFE500);outline-offset:6px}

/* Variante sobre navy (pestaña B2B de Contacto y franjas oscuras de la Home): el monocromo
   se invierte a blanco, porque el tinte navy sobre navy sería invisible. */
.wp-trustedby--dark{background:var(--wp-navy-panel,#10395F)}
.wp-trustedby--dark .wp-trustedby__label{color:rgba(255,255,255,.72)}
.wp-trustedby--dark .wp-trustedby__rule{background:rgba(255,255,255,.28)}
.wp-trustedby--dark .wp-trustedby__img{filter:grayscale(1) brightness(0) invert(1);opacity:.72}

/* Movimiento reducido: la única transición es la de color del logo, se retira entera. */
@media (prefers-reduced-motion:reduce){
  .wp-trustedby .wp-trustedby__img{transition:none}
}

@media (max-width:767px){
  .wp-trustedby{padding:38px 0}
  .wp-trustedby__list{gap:22px 34px}
  /* A un tercio menos de alto los logos siguen siendo legibles y caben tres por fila en 390px. */
  .wp-trustedby .wp-trustedby__img{height:calc(var(--wp-trustedby-h,38px) * .78);width:auto;max-width:130px}
}