/* ==========================================================================
   page-home.css — correcciones de PARIDAD de la Home con el diseño aprobado.

   DUEÑO ÚNICO. Este fichero existe para que varios agentes puedan corregir
   páginas distintas en paralelo sin escribir nunca el mismo fichero
   (File Ownership, skill `wordpress-elementor` §16.3).

   Se encola DESPUÉS de walking-planets-extras.css, así que a igual
   especificidad gana lo de aquí. No hace falta !important.

   Reglas de la casa:
   - Cada bloque lleva el hallazgo que lo motiva y el valor del DISEÑO como
     referencia (nunca un valor inventado al revisar).
   - Nada de `!important`: si hace falta especificidad, repetir la clase
     (`.wp-x.wp-x`). Ojo: el CSS que Elementor genera por página
     (`post-40.css`) gana al del tema y puede pisarte.
   - `padding` en longhand, nunca shorthand: el shorthand pisa el gutter móvil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lead del héroe (diff home.md #2, P1)
   El héroe (global/hero.php) es un widget COMPARTIDO por las 7 páginas — no
   se toca su PHP ni walking-planets.css (donde vive `.wp-lead{font-size:21px;
   line-height:1.55}`, el valor correcto para el lead del MANIFIESTO, que sí
   coincide con el diseño: Walking Planets Home.dc.html no define color propio
   ahí y `.wp-lead` del héroe hereda ese mismo 21/1.55 por error).
   Diseño (Walking Planets Home.dc.html, línea del lead del héroe):
     <p style="margin:0;max-width:30ch;font-size:19px;line-height:1.5;
        color:rgba(255,255,255,.9)">
   Medido en vivo 2026-08-19 09:22 UTC (probe-home-fix.js, 1440px):
     sitio → font-size:21px, line-height:32.55px (1.55), color:rgb(255,255,255)
   Consecuencia (diff #2): la fila crece 60px→162px y, al estar el bloque
   anclado abajo (`justify-content:flex-end`), sube el H1 −102px.
   Scope: SOLO Home (body.page-id-40) y SOLO el lead del héroe
   (.wp-hero__row .wp-lead) — el `.wp-lead` del manifiesto (04-manifesto.php)
   vive fuera de `.wp-hero__row` y no se toca; ya coincide con el diseño.
   -------------------------------------------------------------------------- */
body.page-id-40 .wp-hero__row .wp-lead{
  font-size:19px;
  line-height:1.5;
  color:rgba(255,255,255,.9);
}

/* --------------------------------------------------------------------------
   2. Chips del filtro en Space Mono, no Manrope (diff home.md #4, P1)
   `.wp-chip{font-family:var(--wp-mono)}` (walking-planets.css:202,
   especificidad 0,1,0) pierde contra el reset
   `.wp-page button{font-family:inherit}` (walking-planets.css:49,
   especificidad 0,1,1) — NO se toca ninguno de los dos ficheros compartidos.
   `#experiences` es el <section id="experiences"> propio de
   wp-home/07-tours-filterable-grid.php (Home únicamente): el ID sube la
   especificidad muy por encima del reset sin usar !important y sin afectar
   los chips de wp-guides/02-filter-chips.php ni wp-contact/02-inquiry-form.php.
   Medido en vivo 2026-08-19 09:22 UTC: sitio → "Manrope, system-ui, sans-serif".
   Diseño: font-family:'Space Mono', monospace (resto de propiedades del chip
   ya coincidían: 12.5px/700/.14em/uppercase — no se tocan).
   -------------------------------------------------------------------------- */
#experiences .wp-chip{
  font-family:var(--wp-mono);
}

/* 2c. 2026-09-10 (Scarlet, captura 11:39: «¿hay otra forma de poner esto que se vea lindo?»)
   Los siete chips de intención de la Home son frases largas del propio diseño («I want to
   discover», «Something different»…). En un móvil, con `flex-wrap:wrap` sólo cabe UNO por fila:
   siete líneas de anchos distintos, con el borde derecho en zigzag. En /tours/ los rótulos son
   de una palabra («Curious», «Hungry») y ahí el mismo wrap sí queda ordenado — de ahí que ella
   señale la Home y no la otra.
   Se pasa a rejilla de DOS columnas iguales en móvil: mitad de alto, borde derecho recto y
   todos los chips del mismo tamaño. No cambia el estilo del chip, ni el texto, ni el orden, ni
   la variante de escritorio — sólo cómo se reparten. Es la misma idea que el diseño aplica con
   `[data-keep-grid]`: en pantalla pequeña, mantener rejilla en vez de apilar.
   «Show everything» ocupa la fila entera: es la opción de reinicio, no una intención más. */
@media (max-width:640px){
  #experiences .wp-chips{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  #experiences .wp-chip{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12px 10px;
    line-height:1.25;
    /* Tres cosas que van juntas y ninguna sobra:
       · `white-space:normal` — un <button> hereda `nowrap` DEL NAVEGADOR (tercera vez hoy que
         muerde: el mega menú, el FAQ y ahora esto). Sin esto el rótulo se sale de su chip.
       · tracking de .14em a .06em — el diseño ya hace esta clase de ajuste en móvil
         (`letter-spacing:.22em → .15em`). Con .06em «I WANT TO DISCOVER» cabe en UNA línea
         dentro de la columna de 172px, que es lo que lo hace verse ordenado.
       · 11.5px es el suelo del proyecto, no una elección estética: por debajo no se baja. */
    white-space:normal;
    letter-spacing:.06em;
    font-size:11.5px;
  }
  #experiences .wp-chip:first-child{grid-column:1 / -1}
}

/* --------------------------------------------------------------------------
   3. Reveals de las tarjetas (diff home.md #3, P1) — dos frentes.
   ESTADO 2026-08-19 ~09:35 UTC: el frente (b) ya lo resolvió @fidelidad-
   animaciones en walking-planets.js (alignRevealHomeAbout): movió `.wp-reveal`
   de cada `.wp-card`/`.wp-segment` al CONTENEDOR de la rejilla
   (`#experiences .wp-cards` / `#segments .wp-segments`) + al `<h3>` de cada
   tarjeta, igual que el diseño (`#experiences > div > div[grid-3col]`,
   `#segments [grid-3col]`). Verificado con scroll real: la rejilla entra
   como bloque con `transitionProperty:"opacity, transform"` y `opacity`
   pasa de 0.048 a 1/0.978 tras cruzar el viewport — correcto, no se toca
   walking-planets.js.
   Consecuencia: como `.wp-card`/`.wp-segment` YA NO llevan `.wp-reveal` en
   tiempo de ejecución, el frente (a) —`.wp-segment{transition:border-color
   .25s ease}` (walking-planets-extras.css:266) pisando la transición de
   `.wp-reveal` (walking-planets.css:235), misma especificidad 0,1,0— queda
   MOOT: ese selector combinado ya no puede darse. La regla de abajo se deja
   de todos modos como defensa en profundidad (inocua si no aplica; protege
   si algún día se revierte el cambio de JS), igual que
   `data-reveal-delay="0"` en wp-home/07 y wp-home/08 (mismo motivo: inerte
   ahora, red de seguridad si cambia el mecanismo).
   -------------------------------------------------------------------------- */
.wp-segment.wp-reveal{
  transition:opacity var(--wp-reveal), transform .55s var(--wp-ease), border-color .25s ease;   /* §26: transform era 1.1s */
}

/* --------------------------------------------------------------------------
   4. Bloque de párrafos del manifiesto — tamaño (tabla "TIPOGRAFÍA" P1, no
   está en el top-5 pero es del mismo widget y barato de corregir).
   `.wp-quote` (walking-planets-extras.css:187) es COMPARTIDA con
   wp-about/02-manifesto-white.php → NO se toca ese fichero; se escala por
   body.page-id-40 para no afectar a About.
   Diseño (Walking Planets Home.dc.html, columna derecha del manifiesto):
     font-size:17px;line-height:1.65;color:#3A5068
   Medido en vivo 2026-08-19 09:22 UTC: font-size:18px (line-height y color
   YA coincidían: 29.7px=1.65×18 → el propio 1.65 es correcto, solo sobra 1px
   de tamaño; color rgb(58,80,104) = var(--wp-ink-soft) = #3A5068, exacto).
   NOTA — falso positivo descartado (tabla "5 peores" #5, diff home.md): "el
   párrafo pierde su énfasis" NO se reproduce. Medido con probe-home-fix.js:
   el `<strong>` de quote_line_2 SÍ computa color:rgb(7,28,51) (=#071C33) y
   font-weight:700 (`.wp-quote strong{color:var(--wp-navy)}`,
   walking-planets-extras.css:191, + negrita nativa de <strong>) — idéntico
   al diseño (`<p style="color:#071C33;font-weight:700">`, mismo resultado
   visual aunque el diseño lo pone en el <p> y aquí en un <strong> interior).
   El diagnóstico medía el <p> contenedor, que por diseño solo lleva bold+
   navy en el texto de dentro del <strong>. No se toca nada de esto.
   -------------------------------------------------------------------------- */
body.page-id-40 .wp-quote{
  font-size:17px;
}

/* --------------------------------------------------------------------------
   5. Cierre de paridad (2026-08-19, @frontend) — últimos desvíos de Home medidos con
   private/tools/qa/paridad.js (reconciliación bloque a bloque contra Walking Planets
   Home.dc.html). Tipografía (line-height/max-width de los H2) ya vive en el catálogo
   compartido de walking-planets-extras.css §22 — aquí solo lo que es de PÁGINA/SECCIÓN,
   que necesita el widget o el body.page-id-40 para no filtrarse a otras páginas.

   5a. "A tour ends. A memory stays." (wp_home_manifesto, 04-manifesto.php): la sección
   pintaba padding-top:110 (heredado de --wp-section-y). Walking Planets Home.dc.html,
   sección de este bloque: `padding:120px 40px 130px` → padding-top:120px.
   -------------------------------------------------------------------------- */
.elementor-widget-wp_home_manifesto .wp-section{
  padding-top:120px;
  padding-bottom:130px;
}

/* 5b. "Good things are better together." (global_partners, id="partners"): scope por
   body.page-id-40 — el mismo widget vive en About con OTRO padding correcto (no tocar
   #partners a secas, se filtraría). Walking Planets Home.dc.html, sección #partners:
   `padding:104px 0 110px` → padding-top:104px (sitio 110). */
body.page-id-40 #partners{
  padding-top:104px;
}

/* --------------------------------------------------------------------------
   6. Trustbar (global/trustbar.php) — bloque señalado por Pedro como "raro" justo debajo
   del hero (2026-08-19). paridad.js lo daba por bueno (empareja como bloque único, no mide
   el ritmo interno de sus 3 filas) pero medido en vivo con probe-trustbar.js el bloque
   entero sale 64px más bajo que el diseño a 1440/1920 (198px vs 262px) y 68-72px a 375/768
   — y a la vista se ve todo apelmazado: sin aire arriba/abajo y SIN el separador antes de
   los claims, que en el diseño es lo que le da estructura a la franja.
   No se toca widgets/global/trustbar.php (compartido por las 7 páginas, fuera de mi
   propiedad de ficheros hoy) — todo resuelto por CSS con scope body.page-id-40.

   6a. Padding de la franja. Walking Planets Home.dc.html (wrapper de "Recognised by"):
   `padding:44px 40px 40px` → top 44/bottom 40 (los lados ya coinciden, usan --wp-gutter).
   Medido en vivo: sitio padding:26px var(--wp-gutter) (walking-planets.css:162) → top y
   bottom 18-14px cortos. */
body.page-id-40 .wp-trustbar{
  padding-top:44px;
  padding-bottom:40px;
}

/* 6b. Separador antes de los claims. El diseño dibuja un `border-top:1px solid
   rgba(7,28,51,.12)` + `padding-top:24px` antes de la fila de claims (valor del .dc.html;
   el token vivo equivalente es rgba(14,52,87,.12) desde la paleta del 2026-08-26) (Walking Planets
   Home.dc.html, 3er div del bloque) — el sitio no pinta ningún separador: los claims
   quedan pegados a los sellos con el mismo gap:26px (walking-planets.css:164) que separa
   el rótulo de los sellos, y no hay línea que distinga las dos filas.
   `.wp-trustbar__claims` no lleva estilo inline (a diferencia de label/badges, fijados en
   PHP) → se puede fijar entero por CSS sin !important y sin tocar el widget.
   margin-top:8px compensa el gap:26px ya existente del contenedor flex para que la línea
   quede a 34px de los sellos (26+8), igual que el `margin:0 auto 34px` del diseño en la
   fila de badges — y con el padding-top:24px después, el total sellos→texto de claims
   queda en 26+8+1+24=59px, igual que el 34+1+24=59px del diseño. */
body.page-id-40 .wp-trustbar__claims{
  margin-top:8px;
  border-top:1px solid rgba(14,52,87,.12);
  padding-top:24px;
}

/* 6c. Centrado del grupo de claims (hallazgo @team-lead, 2026-08-19, confirmado en vivo
   a 909px de ancho — la 6b de arriba SÍ estaba desplegada, esto es un bug aparte).
   Walking Planets Home.dc.html, div de claims: `gap:14px 34px;justify-content:center` —
   `.wp-trustbar__claims` (walking-planets-extras.css:376) no fija justify-content
   (default: flex-start) y usa gap:12px 28px. Invisible en 1440/1920 porque ahí los 4
   claims caben en una sola línea y el "centrado" no se nota (la línea ocupa casi todo el
   ancho igual); se hace evidente entre ~768-1200px, donde el texto envuelve a 2 filas de
   2 y sin justify-content:center cada fila queda pegada al borde izquierdo en vez de
   centrada como grupo — medido con probe909.js: items en x:40/312 y x:40/397 (pegados a
   la izquierda) cuando el diseño los pone en x:178/459 y x:178/545 (centrados). */
body.page-id-40 .wp-trustbar__claims{
  justify-content:center;
  gap:14px 34px;
}


/* ==========================================================================
   OLA 3 — SEGUNDA ENTREGA (2026-08-26, @wordpress-elementor)
   HANDOFF-04 §3-§8 · FEEDBACK-03 §2. Todo lo de aquí abajo es de esta ola.
   Valores tomados de `private/design/v2/Walking Planets Home.dc.html`, que es
   el diseño v2 aprobado — nunca medidos "a ojo" sobre el render.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. ACORDEÓN DE CATEGORÍAS — cada tour es un enlace (HANDOFF-04 §3)
   Diseño v2, panel de cada categoría:
     display:grid;grid-template-columns:.9fr 1.3fr .8fr;gap:34px
   `walking-planets.css:189` lo tiene en `1fr 1fr 1fr`: la columna de tours
   necesita más sitio que las otras dos porque ahí van filas de texto largo.
   -------------------------------------------------------------------------- */
body.page-id-40 .wp-cat__panel{
  grid-template-columns:.9fr 1.3fr .8fr;
}

/* Nota en cian bajo la descripción. Diseño: 11.5px/.1em/1.8, color cian. */
.wp-cat__hint{
  margin:14px 0 0;
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wp-cyan);
  line-height:1.8;
}

/* Lista de tours. Cada fila es un `<a>` de ANCHO COMPLETO y 46px de alto
   mínimo: resuelve a la vez el «me debería abrir una pestaña del propio tour»
   del cliente y el objetivo táctil de FEEDBACK-02 §3.2 (antes: 20px).
   `border-top` por `<li>` + `border-bottom` en la `<ul>` = separadores entre
   filas y cierre abajo, exactamente como el diseño. */
.wp-cat__tours{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  border-bottom:1px solid var(--wp-line-dark);
}
.wp-cat__tours>li{
  border-top:1px solid var(--wp-line-dark);
}
.wp-cat__tours a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:15px;
  padding-bottom:15px;
  min-height:46px;
  color:var(--wp-white);
  font-family:var(--wp-mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.45;
  transition:color .25s var(--wp-ease);
}
/* `.wp-page a{color:var(--wp-cyan)}` (0,1,1) le gana a `.wp-cat__tours a`
   (0,1,1 también, pero antes en la cascada). Se dobla la clase para ganar sin
   `!important` — mismo mecanismo que el fix N6 de `.wp-segment`. */
.wp-cat__tours a.wp-cat__tours-link,
.wp-cat__tours .wp-cat__tours a,
body.page-id-40 .wp-cat__tours a{color:var(--wp-white)}
.wp-cat__tours a:hover,
.wp-cat__tours a:focus-visible,
body.page-id-40 .wp-cat__tours a:hover,
body.page-id-40 .wp-cat__tours a:focus-visible{color:var(--wp-yellow)}
/* 2026-09-10 (W7, bloque 4): la fila pasa de `etiqueta + flecha` a `etiqueta + precio +
   flecha`, como el diseño. El extremo derecho es ahora un grupo flex; antes la regla de abajo
   apuntaba directamente a la flecha (`a>span`), así que se reescribe en vez de añadir otra
   encima — este marcado lo produce SOLO wp-home/06-category-accordion.php, no hay marcado
   huérfano al que la regla vieja siguiera haciendo falta. */
.wp-cat__end{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}
.wp-cat__arrow{
  font-family:var(--wp-display);
  font-size:20px;
  color:var(--wp-cyan);
  flex:0 0 auto;
}
/* Color EXPLÍCITO, no heredado: al pasar el ratón el enlace entero se pone amarillo, y sin
   esto "Ask for price" se volvería del mismo amarillo que un precio real — justo la distinción
   que la fila tiene que comunicar. Mismo mecanismo que costó la sesión en `.wp-card__badges`. */
.wp-cat__price{
  color:var(--wp-yellow);
  flex:0 0 auto;
  white-space:nowrap;
}
.wp-cat__price--ask{color:rgba(255,255,255,.5)}
.wp-cat__tours a:hover .wp-cat__price{color:var(--wp-yellow)}
.wp-cat__tours a:hover .wp-cat__price--ask{color:rgba(255,255,255,.5)}
.wp-cat__empty{
  display:block;
  padding:15px 0;
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* Tercera columna: foto de la categoría. Donde no hay foto real va el
   marcador rayado del diseño — es material pendiente del cliente, y hace
   también de checklist visible de lo que falta. */
.wp-cat__shot{
  position:relative;
  min-height:190px;
  overflow:hidden;
  background-size:cover;
  background-position:center 40%;
}
.wp-cat__shot--pending{
  background:repeating-linear-gradient(135deg,var(--wp-navy-panel) 0 14px,var(--wp-navy-soft) 14px 28px);
  display:flex;
  align-items:flex-start;
  padding:18px;
}
.wp-cat__shot--pending span{
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  line-height:1.7;
}

/* --------------------------------------------------------------------------
   8. REJILLA DE EXPERIENCIAS — el catálogo completo (HANDOFF-04 §4)
   Diseño v2: `grid-template-columns:repeat(4,1fr);gap:26px`. Antes eran 9
   tarjetas escritas a mano en 3 columnas; ahora son las 21 del CPT.
   `.wp-cards` base es compartida (walking-planets.css) y la usan Tour y Blog:
   por eso esto va acotado a `#experiences` de la Home, no a `.wp-cards`.
   Los escalones responsive se REPITEN aquí porque esta regla (1,3,1) gana a
   las de walking-planets.css §16 y si no se declaran, la rejilla se quedaría
   en 4 columnas también en móvil.
   -------------------------------------------------------------------------- */
body.page-id-40 #experiences .wp-cards{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px;
}
/* §21 (2026-09-09): escalón intermedio — a 4 columnas entre 1101 y 1400px las tarjetas
   quedaban a ~269px y las etiquetas se partían. Debe ir ANTES del bloque de 1100px
   para que a ≤1100 siga ganando el de 2 columnas. */
@media (max-width:1400px){
  body.page-id-40 #experiences .wp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  body.page-id-40 #experiences .wp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body.page-id-40 #experiences .wp-cards{grid-template-columns:minmax(0,1fr)}
}

/* "Price on request →" — cuando el tour no tiene precio publicado. Diseño:
   `rgba(255,255,255,.55)`. NO se inventa un precio: de los 21 tours solo 5
   tienen precio aprobado por el cliente. Dejar la línea vacía sería peor:
   una tarjeta sin precio se lee como gratis o como un olvido. */
.wp-card__price--ask{
  color:rgba(255,255,255,.55);
}

/* Hueco de foto pendiente dentro de la tarjeta: mismo rayado que el del
   acordeón, para que se lea como "falta material", no como error. */
.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,.6);
}

/* --------------------------------------------------------------------------
   9. LAS TRES GESTIONES — pestañas con panel propio (HANDOFF-04 §5)
   -------------------------------------------------------------------------- */
.wp-seg__intro{
  margin:0 0 40px;
  max-width:62ch;
  font-size:18px;
  line-height:1.6;
  color:rgba(255,255,255,.75);
}

/* La etiqueta pasa de 11px a 15px peso 700: es el NOMBRE de la gestión, no un
   metadato. Petición literal: «tendría que ser un poquito más grande para que
   la persona vea cuál es el de Student, cuál el de Shorex, cuál el Private». */
.wp-segment__tag--lg{
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  margin-bottom:14px;
}

/* La tarjeta era un <a>; ahora es un <button role="tab">. Hay que devolverle
   la pinta de tarjeta que el navegador le quita a los botones. */
.wp-segment--tab{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  color:var(--wp-white);
  background:transparent;
  border:1px solid transparent;
  padding-top:0;
  padding-bottom:28px;
  padding-left:0;
  padding-right:0;
  overflow:hidden;
  transition:background .3s var(--wp-ease),border-color .3s var(--wp-ease);
  /* ⚠ La hoja de usuario-agente de Chrome le pone `white-space:nowrap` a TODO
     <button>, y se hereda hacia dentro. La tarjeta era un <a> (que no lo
     lleva) y al convertirla en pestaña el titular y el párrafo dejaron de
     partir línea: medido en vivo 2026-08-26 02:25 UTC, `scrollWidth` 965px
     dentro de una caja de 436 — "Learning that feels like a game" se salía
     por la derecha y el texto de las tres tarjetas quedaba cortado. No daba
     ningún error y en el PHP no se ve: sólo se ve mirando. */
  white-space:normal;
}
/* El `reset.css` de Hello Elementor (tema padre) pinta TODOS los botones de
   rosa en :hover/:focus con `button:hover,button:focus{background:#c36}`
   (especificidad 0,1,1). Se neutraliza doblando la clase — sin `!important`,
   igual que la §32 de walking-planets-extras.css. Y se declaran los TRES
   estados (base, hover, focus-visible) a propósito: el fallo de esa §32 sólo
   se veía al pasar el ratón o dar foco, nunca en reposo. */
.wp-segment--tab.wp-segment--tab,
.wp-segment--tab.wp-segment--tab:hover,
.wp-segment--tab.wp-segment--tab:focus,
.wp-segment--tab.wp-segment--tab:focus-visible{
  background:transparent;
  color:var(--wp-white);
  border-color:transparent;
}
.wp-segment--tab.wp-segment--tab:hover{
  background:rgba(22,64,103,.55);
}
.wp-segment--tab.wp-segment--tab:focus-visible{
  outline:2px solid var(--wp-yellow);
  outline-offset:3px;
}
/* Pestaña activa: borde amarillo y fondo navy-panel (HANDOFF-04 §5.3). */
.wp-segment--tab.is-active.wp-segment--tab.is-active,
.wp-segment--tab.is-active.wp-segment--tab.is-active:hover{
  background:var(--wp-navy-panel);
  border-color:var(--wp-yellow);
}
.wp-segment--tab.is-active .wp-segment__link{color:var(--wp-yellow)}
.wp-segment__media--pending{
  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;
}
.wp-segment__media--pending span{
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* Panel de cada gestión: 3 columnas (cómo funciona · qué cambia · CTA). */
.wp-seg-panels{margin-top:26px}
.wp-seg-panel{
  display:grid;
  grid-template-columns:1.1fr 1fr .9fr;
  gap:40px;
  background:var(--wp-navy-panel);
  border-top:2px solid var(--wp-yellow);
  padding:36px 34px 34px;
}
.wp-seg-panel[hidden]{display:none}
.wp-seg-panel__label{
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wp-yellow);
  margin-bottom:16px;
}
.wp-seg-panel__col p{
  margin:0 0 14px;
  font-size:16.5px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}
.wp-seg-panel__col p:last-child{margin-bottom:0}
.wp-seg-panel__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.wp-seg-panel__list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15.5px;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}
.wp-seg-panel__list li>span{color:var(--wp-cyan);flex:0 0 auto;font-size:12px;line-height:1.7}
.wp-seg-panel__col--cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.wp-seg-panel__cta{align-self:flex-start}
.wp-seg-panel__wa{
  font-family:var(--wp-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wp-cyan);
  display:flex;
  align-items:center;
  min-height:44px;
}
.wp-seg-panel__note{
  margin:0;
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  line-height:1.8;
}

/* --------------------------------------------------------------------------
   10. REELS — la tira rota sola + panel de subida (HANDOFF-04 §6)
   El set de clips se pinta DUPLICADO y la pista va de 0 a -50%: al terminar,
   la copia está justo donde estaba el original, así que el bucle no salta.
   -------------------------------------------------------------------------- */
@keyframes wpReelScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.wp-reels--auto{
  scroll-snap-type:none;
}
.wp-reels__track{
  display:flex;
  gap:20px;
  width:max-content;
}
.wp-reels--auto .wp-reels__track{
  animation:wpReelScroll var(--wp-reel-seconds,84s) linear infinite;
  will-change:transform;
}
/* Pausa al pasar el ratón (diseño) y al tocar (`is-paused`, lo pone el JS en
   `touchstart`). El `:focus-within` es de propina: si alguien tabula hasta un
   reel, la tira deja de moverse debajo del foco. */
.wp-reels--auto:hover .wp-reels__track,
.wp-reels--auto:focus-within .wp-reels__track,
.wp-reels--auto.is-paused .wp-reels__track{
  animation-play-state:paused;
}
/* `@media (prefers-reduced-motion)` de walking-planets.css fuerza
   `animation-duration:.001s !important` a TODO — que en un bucle infinito es
   peor que no animar (parpadeo frenético). Aquí se quita el nombre de la
   animación, que sí gana: sin nombre no hay animación que durar. */
@media (prefers-reduced-motion:reduce){
  .wp-reels--auto .wp-reels__track{animation-name:none;transform:none}
  .wp-reels--auto{overflow-x:auto;scroll-snap-type:x mandatory}
}

/* Panel de subida (cian). Diseño v2: `.85fr 1.15fr`, gap 46, padding 40. */
.wp-reel-upload__wrap{
  max-width:var(--wp-maxw);
  margin:0 auto;
  padding:24px var(--wp-gutter) 0;
}
.wp-reel-upload{
  background:var(--wp-cyan);
  color:var(--wp-navy);
  padding:40px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:46px;
  align-items:start;
}
.wp-reel-upload__title{
  font-family:var(--wp-display);
  font-size:clamp(34px,3.6vw,58px);
  text-transform:uppercase;
  line-height:.95;
}
.wp-reel-upload__text{
  margin:14px 0 16px;
  font-size:17px;
  line-height:1.55;
  max-width:34ch;
}
/* El enlace a Instagram va sobre cian: `.wp-page a{color:var(--wp-cyan)}` lo
   dejaría invisible (cian sobre cian). Navy subrayado, y blanco al pasar. */
.wp-reel-upload__text a,
.wp-reel-upload__text a:visited{
  color:var(--wp-navy);
  text-decoration:underline;
}
.wp-reel-upload__text a:hover,
.wp-reel-upload__text a:focus-visible{color:var(--wp-white)}
.wp-reel-upload__limits{
  margin:0;
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(14,52,87,.75);
  line-height:1.8;
}
/* Enlace SECUNDARIO al perfil (no es el CTA: el CTA es el formulario).
   ⚠ Se ESCRIBE CON EL PADRE DELANTE (`.wp-reel-upload .wp-reel-upload__ig`,
   0,2,0) a propósito: la primera versión iba con una sola clase (0,1,0) y
   perdía contra `.wp-page a{color:var(--wp-cyan)}` (0,1,1) de la hoja base.
   Resultado: cian #00B2D8 sobre el panel cian #00B2D8 — texto INVISIBLE, sin
   ningún error, y el enlace figurando en el DOM con sus 44px de alto. Se cazó
   mirando la captura y confirmando con getComputedStyle (medido 2026-08-26
   02:24 UTC: color = rgb(0,178,216), fondo del padre = rgb(0,178,216)).
   El `.wp-reel-upload__text a` de arriba no tenía el problema porque ya
   empataba en especificidad y gana por orden de cascada. */
.wp-reel-upload .wp-reel-upload__ig,
.wp-reel-upload .wp-reel-upload__ig:visited{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:12px;
  font-family:var(--wp-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wp-navy);
  text-decoration:underline;
}
.wp-reel-upload .wp-reel-upload__ig:hover,
.wp-reel-upload .wp-reel-upload__ig:focus-visible{color:var(--wp-white)}

.wp-reel-form{display:grid;gap:16px}
.wp-reel-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wp-reel-form__field{display:flex;flex-direction:column;gap:8px}
.wp-reel-form__field>span{
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wp-navy);
}
.wp-reel-form__field input[type=text]{
  background:var(--wp-white);
  border:1px solid rgba(14,52,87,.35);
  border-radius:2px;
  padding-left:14px;
  padding-right:14px;
  height:50px;
  font-size:16px;
  color:var(--wp-navy);
}
/* `padding` en LONGHAND, nunca shorthand: el shorthand pisa el gutter movil
   (gotcha pagado en este proyecto, CLAUDE.md 5-bis). `min-height:46px` medido
   en movil real (390px): con el padding del diseno el campo se quedaba en 42px
   de alto, por debajo de los 44px de zona de toque de WCAG 2.5.8. */
.wp-reel-form__field input[type=file]{
  background:var(--wp-white);
  border:1px solid rgba(14,52,87,.35);
  border-radius:2px;
  padding-top:13px;
  padding-bottom:13px;
  padding-left:12px;
  padding-right:12px;
  min-height:46px;
  font-size:16px;
  color:var(--wp-navy);
  width:100%;
}
.wp-reel-form__hp{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.wp-reel-form__consent{
  display:flex;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
  padding:6px 0;
  min-height:44px;
}
.wp-reel-form__consent input[type=checkbox]{
  width:24px;
  height:24px;
  flex:0 0 auto;
  margin:2px 0 0;
  accent-color:var(--wp-navy);
}
.wp-reel-form__consent>span{font-size:14.5px;line-height:1.5}
.wp-reel-form__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.wp-reel-form__submit{
  border:0;
  border-radius:2px;
  padding:18px 28px;
  font-family:var(--wp-mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--wp-navy);
  color:var(--wp-white);
  cursor:pointer;
  min-height:44px;
}
/* Deshabilitado = sin archivo o sin casilla. Diseño: fondo rgba(14,52,87,.22)
   y `cursor:not-allowed`. Se declaran los tres estados por el rosa del tema
   padre (mismo motivo que en las pestañas de arriba). */
.wp-reel-form__submit.wp-reel-form__submit:hover,
.wp-reel-form__submit.wp-reel-form__submit:focus,
.wp-reel-form__submit.wp-reel-form__submit:focus-visible{
  background:var(--wp-navy);
  color:var(--wp-white);
}
.wp-reel-form__submit.wp-reel-form__submit:focus-visible{outline:2px solid var(--wp-navy);outline-offset:3px}
.wp-reel-form__submit[disabled],
.wp-reel-form__submit.wp-reel-form__submit[disabled]:hover,
.wp-reel-form__submit.wp-reel-form__submit[disabled]:focus{
  background:rgba(14,52,87,.22);
  color:rgba(14,52,87,.6);
  cursor:not-allowed;
}
.wp-reel-form__note{
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(14,52,87,.7);
  line-height:1.6;
}
.wp-reel-form__note.is-error{color:#7A1020}
.wp-reel-form__note.is-ok{color:var(--wp-navy);font-weight:700}

/* --------------------------------------------------------------------------
   11. RESEÑAS — cabecera de valoración y marco del widget (HANDOFF-04 §7)
   -------------------------------------------------------------------------- */
.wp-rating{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:44px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-top:30px;
  padding-bottom:30px;
  margin:38px 0 50px;
}
.wp-rating__score{display:flex;align-items:center;gap:20px}
.wp-rating__number{
  font-family:var(--wp-display);
  font-size:76px;
  line-height:.85;
  color:var(--wp-white);
}
.wp-rating__meta{display:flex;flex-direction:column;gap:8px}
.wp-rating__caption,
.wp-rating__badge-text{
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  line-height:1.8;
}
.wp-rating__badge{
  display:flex;
  align-items:center;
  gap:18px;
  padding-left:44px;
  border-left:1px solid rgba(255,255,255,.18);
}
.wp-rating__badge img{height:42px;width:auto;display:block}
.wp-rating__link,
.wp-rating__link:visited{
  justify-self:end;
  font-family:var(--wp-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wp-cyan);
  padding-top:12px;
  padding-bottom:12px;
  min-height:44px;
  display:flex;
  align-items:center;
}
.wp-stars{display:inline-block;font-size:17px;letter-spacing:.14em;line-height:1}
.wp-stars__on{color:var(--wp-yellow)}
.wp-stars__off{color:rgba(255,255,255,.28)}
.wp-section--cyan .wp-stars__off{color:rgba(14,52,87,.28)}

/* Tarjeta de reseña: el diseño v2 le añade la fila de estrellas arriba y el
   `flex:1` en la cita para que los pies queden alineados entre las 3. */
.wp-review-quote{display:flex;flex-direction:column;gap:18px}
.wp-review-quote p{flex:1 1 auto}
.wp-reviews-note{
  margin:32px 0 0;
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  line-height:1.8;
}
/* 2026-09-18: las reglas del marco del embed de Google (`.wp-google-reviews`,
   `.wp-reviews-fallback.is-replaced`) se retiran: ese hueco ya no se pinta y su
   inyector de `page-home.js` está retirado. Las reseñas reales las trae el
   servidor desde la API de Evaluage y se pintan con las tarjetas de aquí abajo.

   Pie de las tarjetas que vienen de la API: inicial en un círculo + nombre y
   fecha. La FOTO de perfil (2026-09-18) se descarga y cachea en NUESTRO servidor
   — `local_avatar_url()` en `widgets/global/reviews.php` — así que el navegador
   del visitante nunca pide nada a un tercero; el círculo con la inicial sigue
   existiendo como respaldo, por persona, si esa descarga en concreto falló.
   `.wp-review-quote__by` pisa el `display` de `.wp-meta` por orden de hoja, no
   por especificidad: `page-home.css` se encola después de `walking-planets.css`
   y de `walking-planets-extras.css` (ambas son dependencia suya). */
.wp-review-quote__by{display:flex;align-items:flex-start;gap:13px}
.wp-review-quote__avatar{
  flex:0 0 auto;
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wp-cyan);
  color:var(--wp-navy);
  font-family:var(--wp-display);
  font-size:19px;line-height:1;
  text-transform:uppercase;
}
/* Especificidad (0,2,0) A PROPÓSITO, anteponiendo `.wp-review-quote__by`: Elementor trae
   `.elementor img{height:auto;max-width:100%}` a (0,1,1), que gana a un `.wp-review-quote__
   avatar` pelado (0,1,0) — es la MISMA trampa que ya costó una hora hoy con los logos de
   «Trusted by» (ver walking-planets-extras.css): sin esto, el avatar-foto saldría con el
   ancho del contenedor de la tarjeta en vez de 40x40. */
.wp-review-quote__by .wp-review-quote__avatar--photo{
  width:40px;height:40px;border-radius:50%;
  /* Misma caja que el círculo de inicial: la tarjeta no salta de tamaño según si esa
     persona tiene foto o no. `object-fit:cover` porque un avatar de Google casi nunca
     es cuadrado exacto. */
  background:none;object-fit:cover;
}
.wp-section--cyan .wp-review-quote__avatar{background:var(--wp-navy);color:var(--wp-white)}
.wp-review-quote__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.wp-review-quote__name{font-weight:700;overflow-wrap:anywhere}
.wp-review-quote__when{font-size:.92em;opacity:.85}

/* Botón «Leave a review» (Evaluage). Se pinta haya o no tarjetas: si todavía no
   hay reseñas que enseñar, pedirlas es justo lo que toca. */
.wp-reviews-cta{display:flex;justify-content:center}

/* --------------------------------------------------------------------------
   12. LOGO EN EL HUECO DEL MANIFIESTO (HANDOFF-04 §8)
   Diseño v2: `grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:end`,
   cuadrado navy 1/1 con el logo a 150px y la frase en Space Mono amarillo.
   -------------------------------------------------------------------------- */
.wp-manifesto-head--logo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:56px;
  align-items:end;
}
.wp-logo-plaque{
  background:var(--wp-navy);
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:30px;
  text-align:center;
}
/* `width:150px` y NUNCA más: el logo de la mediateca mide 218×155 px reales.
   Ampliarlo lo pixela. El original en alta está pendiente del cliente. */
.wp-logo-plaque__img{
  width:150px;
  max-width:100%;
  height:auto;
  display:block;
}
.wp-logo-plaque__caption{
  font-family:var(--wp-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--wp-yellow);
  line-height:1.8;
}

/* --------------------------------------------------------------------------
   13. H2 DEL BANNER CIAN — "The world is full of places." (desvío heredado)
   `paridad.js` lo marcaba `font-size 128 ≠ 142` y `line-height 110 ≠ 122`.
   NO lo causó la ola de la paleta. Viene del sistema de variantes de H2
   (CLAUDE.md §4-bis): `.wp-h2--home-cta` lleva el valor del diseño V1
   (`clamp(44px,7.4vw,150px)`/`.86`), y encima `walking-planets-extras.css:1297`
   le mete un `font-size:128px` a partir de 1600px como parche para que
   «stories.» no cayera sola a una cuarta línea.

   El diseño V2 ya resuelve eso en origen: baja el tope a 132px, sube el
   interlineado a .92 y acota la caja a 22ch —
     font-size:clamp(44px,7vw,132px); line-height:.92; max-width:22ch
   Se declara AQUÍ la variante con el valor de V2 (esta hoja se encola después
   de extras.css, así que a igual especificidad gana) y se anula el parche de
   los 1600px, que existía sólo por el tamaño viejo. Sigue acotado a
   `.page-id-40`: `.wp-h2--home-cta` es exclusiva de la Home.
   -------------------------------------------------------------------------- */
body.page-id-40 .wp-h2--home-cta{
  font-size:clamp(44px,7vw,132px);
  line-height:.92;
  max-width:22ch;
}
@media (min-width:1600px){
  body.page-id-40 .wp-h2--home-cta{font-size:clamp(44px,7vw,132px)}
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE DE TODO LO ANTERIOR
   Regla del encargo: a 390px una sola columna, nada por debajo de 11,5px y
   zonas de toque de 44px o más.
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .wp-seg-panel{grid-template-columns:1fr 1fr;gap:32px}
  .wp-seg-panel__col--cta{grid-column:1 / -1}
  .wp-reel-upload{grid-template-columns:1fr;gap:30px}
}
@media (max-width:860px){
  /* El panel del acordeón cae a 1 columna por walking-planets.css §16; la
     regla de arriba (§7) tiene más especificidad, así que hay que repetirlo. */
  body.page-id-40 .wp-cat__panel{grid-template-columns:minmax(0,1fr);gap:26px}
  .wp-cat__shot{min-height:150px}
  .wp-seg-panel{grid-template-columns:minmax(0,1fr);gap:26px;padding:28px 22px 26px}
  .wp-seg__intro{font-size:16.5px;margin-bottom:30px}
  .wp-rating{grid-template-columns:minmax(0,1fr);gap:22px;text-align:left}
  .wp-rating__badge{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
  .wp-rating__link{justify-self:start}
  .wp-rating__number{font-size:58px}
  .wp-reel-upload{padding:28px 22px}
  .wp-reel-upload__wrap{padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile)}
  .wp-reel-form__row{grid-template-columns:minmax(0,1fr)}
  .wp-manifesto-head--logo{grid-template-columns:minmax(0,1fr);gap:34px}
  .wp-logo-plaque{aspect-ratio:auto;padding:34px 24px;max-width:320px}
  /* La fila de tour ya mide 46px de alto; en móvil se le suma aire para que
     el objetivo táctil no dependa de que el texto ocupe una sola línea. */
  .wp-cat__tours a{padding-top:16px;padding-bottom:16px}
}

/* --------------------------------------------------------------------------
   15. TÍTULO DE LA TARJETA EN LA REJILLA DE 4 COLUMNAS
   `paridad.js` (1920px, 2026-08-26 02:2x UTC) marcaba `font-size 28≠26` en las
   12 tarjetas emparejadas. `.wp-card__title` vale 28px en walking-planets.css
   y es COMPARTIDA (Tour, Travel Guides, índice de tours): ahí 28 es correcto,
   porque esas rejillas son de 3 columnas. La de la Home pasó a 4 columnas en
   esta ola y el diseño v2 baja el título a 26px —
     <h3 style="...font-size:26px;line-height:1.02">
   Se declara como variante acotada a esta rejilla, no se toca la clase base.
   -------------------------------------------------------------------------- */
body.page-id-40 #experiences .wp-card__title{
  font-size:26px;
  line-height:1.02;
}

/* --------------------------------------------------------------------------
   16. FILA DE CATEGORÍA SIN FOTO HONESTA (2026-08-26, P0 de marca del lead)
   Tres de las siete categorías no tienen NINGUNA foto que las represente de
   verdad — no hay fotos de bicis/tuk tuk, ni de talleres, ni de Montserrat,
   Costa Brava o Collioure. Antes iban con fotos que mentían: "Go beyond
   Barcelona" llevaba la CUBIERTA DE LA CATEDRAL de Barcelona (o sea, dentro de
   la ciudad) y "Make something" un brindis en un bar.

   Rellenar con una foto genérica de Barcelona es exactamente la misma promesa
   falsa que el "skip the line" que quitamos, sólo que visual. Así que la fila
   se queda en navy liso y su tercera columna dice qué falta.

   Sin esta regla la fila no saldría navy: saldría TRANSPARENTE. `extras.css`
   §23 pinta `background-image:linear-gradient(…),var(--wp-cat-bg)`, y con la
   variable sin definir la declaración entera es inválida y se pierde también
   el degradado. Aquí se declara el color a mano, que es lo que el degradado
   estaba simulando.
   -------------------------------------------------------------------------- */
body.page-id-40 .wp-cat__head--flat,
body.page-id-40 .wp-cat__head--flat:hover,
body.page-id-40 .wp-cat__head--flat:focus-visible{
  background-image:none;
  background-color:var(--wp-navy-panel);
}

/* 6d. 2026-09-10 (Pedro): los 4 claims no quedaban alineados con los sellos de arriba.
   Causa: `.wp-trustbar__inner` es un flex con `justify-content:space-between` y los sellos
   se reparten por todo el ancho de 1440, mientras el diseño los mete en una fila propia de
   **1080px centrada** (`max-width:1080px;margin:0 auto 30px` en el .dc.html) y deja los
   claims a 1440 centrados debajo. Al no acotar los sellos, los dos grupos tenían anchos
   distintos y sus extremos no coincidían. Se copia la medida del diseño. */
body.page-id-40 .wp-trustbar__badges{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
body.page-id-40 .wp-trustbar__claims{ width:100%; }

/* 7. 2026-09-10 (Pedro): bloque "Your turn" devuelto a la version de Scarlet en Claude Design.
   Sustituye a la caja amarilla de la reunion del 28/08. Todos los valores salen literalmente
   de `Walking Planets Home.dc.html` — no son estimaciones. */
body.page-id-40 .wp-reel-upload__callout{display:none}          /* la caja amarilla, fuera */
body.page-id-40 .wp-reel-upload__kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-family:var(--wp-mono);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#0E3457;
}
body.page-id-40 .wp-reel-upload__rule{width:30px;height:2px;background:#0E3457;display:block;flex:0 0 auto}
body.page-id-40 .wp-reel-upload__headline{
  font-family:Anton,sans-serif;font-size:clamp(44px,5.4vw,86px);text-transform:uppercase;
  line-height:.88;color:#0E3457;display:flex;flex-direction:column;align-items:flex-start;gap:.1em;
}
body.page-id-40 .wp-reel-upload__headline-mark{background:#0E3457;color:#FFE500;padding:.1em .16em .04em}
body.page-id-40 .wp-reel-upload__text{margin:22px 0 0;font-size:19px;line-height:1.5;max-width:30ch;color:#0E3457}
body.page-id-40 .wp-reel-upload__ig-btn{
  display:flex;align-items:center;gap:12px;width:max-content;margin-top:22px;
  background:#0E3457;color:#FFFFFF;font-family:var(--wp-mono);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:15px 22px;border-radius:2px;min-height:44px;
}
body.page-id-40 .wp-reel-upload__ig-btn:hover{background:#FFE500;color:#0E3457}
body.page-id-40 .wp-reel-upload__steps{
  display:flex;flex-direction:column;gap:10px;margin-top:30px;padding-top:24px;
  border-top:1px solid rgba(14,52,87,.25);
}
body.page-id-40 .wp-reel-upload__step{
  display:flex;align-items:center;gap:14px;font-family:var(--wp-mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#0E3457;
}
body.page-id-40 .wp-reel-upload__step-n{
  flex:0 0 auto;background:#0E3457;color:#FFFFFF;font-family:Anton,sans-serif;font-size:18px;
  line-height:1;padding:7px 9px 6px;
}
@media (max-width:860px){
  body.page-id-40 .wp-reel-upload__headline{font-size:clamp(34px,9vw,56px)}
}

/* 8. 2026-09-10: logo del manifiesto ("A tour ends. A memory stays."). El QA visual lo midio
   en 420x239 en el diseno y 200x142 en la web. El .dc.html lo pinta al 100% de su columna.
   CORREGIDO el mismo dia: el selector decia `.wp-manifesto` y la clase real es
   `.wp-manifesto-head--logo` — la regla no casaba con nada y el logo seguia a 300px (el ancho
   del OTRO bloque). Medido en el front: `sizes="auto, 420px"` ya salia bien del PHP, asi que
   el unico fallo estaba aqui. El ancho de verdad vive ahora en walking-planets-extras.css,
   junto a la rejilla que lo acompaña; esto solo cubre el caso movil/estrecho. */
body.page-id-40 .wp-manifesto-head--logo .wp-logo-plaque__img{max-width:100%}

/* 9. 2026-09-10 (Pedro): los controles del carrusel de reels iban ABAJO y pequeños; el diseño
   los pone SUPERPUESTOS a los lados del carrusel, en circulos navy de 56px con sombra.
   Valores literales del .dc.html (`position:absolute;top:50%;left|right:14px;width:56px;
   height:56px;border-radius:50%;background:#0E3457;box-shadow:0 12px 30px rgba(14,52,87,.28)`). */
body.page-id-40 .wp-reels-carousel{position:relative}
body.page-id-40 .wp-reels-nav{
  position:static;display:contents;   /* el contenedor deja de maquetar: mandan los botones */
}
body.page-id-40 .wp-reels-nav__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  background:#0E3457;color:#FFFFFF;font-family:Anton,sans-serif;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(14,52,87,.28);transition:background .2s ease,color .2s ease;
}
body.page-id-40 .wp-reels-nav__btn:hover{background:#FFE500;color:#0E3457}
body.page-id-40 .wp-reels-nav__btn[data-reel-step="-1"]{left:14px}
body.page-id-40 .wp-reels-nav__btn[data-reel-step="1"]{right:14px}
@media (max-width:860px){
  body.page-id-40 .wp-reels-nav__btn{width:44px;height:44px;font-size:20px}
  body.page-id-40 .wp-reels-nav__btn[data-reel-step="-1"]{left:6px}
  body.page-id-40 .wp-reels-nav__btn[data-reel-step="1"]{right:6px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §  BLOQUE B2B / DMC — ronda 1 del cliente, punto 5
   La sección #segments pasa a estar encabezada por el canal profesional. Aquí sólo lo
   NUEVO: el ancla adicional #b2b y la línea secundaria con la oferta privada. Las tarjetas
   y los paneles siguen usando las clases de siempre (.wp-segment*, .wp-seg-panel*).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ancla adicional. `#segments` sigue siendo el id de la sección: este <span> sólo existe para
   que /#b2b aterrice donde toca. scroll-margin-top descuenta la cabecera fija — es lo que el
   navegador ya usa al saltar a un ancla, así que no hace falta corregir el scroll por JS.
   Mismo valor que .wp-reel-upload en walking-planets-extras.css, que resuelve lo mismo. */
.wp-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:104px}
/* 2026-09-18 — `#segments` es el ancla ANTIGUA (la que llevaba el menu antes de la ronda 1) y se
   conserva viva para los enlaces ya publicados. Pero no es un `.wp-anchor`: es la propia
   <section>, asi que no heredaba el descuento de la cabecera fija y al llegar por /#segments la
   cabecera tapaba el rotulo y media linea del titular. Medido: el texto aterrizaba en y=0 con la
   cabecera ocupando hasta 82px (78 en movil). Mismo valor que `.wp-anchor` para que las dos
   entradas a la seccion —la nueva y la vieja— caigan exactamente igual. */
#segments{scroll-margin-top:104px}

/* Línea secundaria: la oferta privada para familias, que baja de tarjeta a una línea. Menor
   peso visual que las tarjetas a propósito — es el punto entero del cambio del cliente. */
.wp-seg__secondary{
  margin:26px 0 0;font-size:16px;line-height:1.6;color:var(--wp-ink-soft,#4A5A6A);
}
.wp-seg__secondary-link{
  font-family:var(--wp-mono);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--wp-cyan-ink,#10395F);text-decoration:none;
  border-bottom:1px solid currentColor;white-space:nowrap;
}
.wp-seg__secondary-link:hover,
.wp-seg__secondary-link:focus-visible{color:var(--wp-ink,#0B1F33)}

@media (max-width:767px){
  .wp-anchor,
  #segments{scroll-margin-top:84px}
  .wp-seg__secondary{margin-top:20px;font-size:15px}
}