/* ==========================================================================
   page-about-guides.css — correcciones de PARIDAD de About y Travel Guides.

   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-<ID>.css`) gana al del tema y puede pisarte.
   - `padding` en longhand, nunca shorthand: el shorthand pisa el gutter móvil.
   - Cuidado con el ámbito: si una regla debe afectar SOLO a una de las dos
     páginas, ancla en algo exclusivo de ella, no en una clase compartida.
   ========================================================================== */

/* Fuente del diagnóstico: private/.dev/qa/diff/about-guides.md (medido 2026-08-19 10:54-10:57,
   re-verificado en vivo a las 11:19 tras el fix de fix-ancho de las 11:07 — ver §1 abajo).
   About = body.page-id-41 · Travel Guides = body.page-id-42. */

/* ==========================================================================
   1. ANCHO — "la caja" (§1.1 P0). El fix de fix-ancho (walking-planets-extras.css
   §31a-31d) solo cubrió el hero y el manifiesto blanco de About. Re-medido con
   diff-measure.js a 1920 a las 11:19: siguen boxeadas (x=240 w=1440 en vez de
   x=0 w=1920) 4 secciones más de About y 1 de Travel Guides. Misma técnica
   "breakout" que §31 (`width:100vw;margin-inline:calc(50% - 50vw)`), que se
   autocorrige atravesando el Container "Boxed" de Elementor porque el % de
   margin se resuelve contra el containing block, no contra el propio ancho.
   `overflow-x:clip` en `.wp-page` (walking-planets.css:45) ya permite el
   breakout sin scroll horizontal — no hace falta repetirlo aquí.
   ========================================================================== */

/* 1a. About — counters-strip (cyan), six-rules, own-operations (flush-top).
   Scope por clase de widget (sobrevive a un reordenado de la página). */
body.page-id-41 .elementor-widget-wp_about_counters_strip .wp-section,
body.page-id-41 .elementor-widget-wp_about_six_rules .wp-section,
body.page-id-41 .elementor-widget-wp_about_own_operations .wp-section{
	width:100vw;margin-inline:calc(50% - 50vw)}

/* 1b. About — #partners (global_partners.php, widget GLOBAL compartido con Home:
   por eso el scope va por `body.page-id-41 #partners`, nunca por `#partners` a
   secas — así una corrección de About no puede filtrarse a Home, que no es mía). */
body.page-id-41 #partners{width:100vw;margin-inline:calc(50% - 50vw)}

/* 1c. Travel Guides — newsletter (wp-section--yellow). Único bloque boxeado que
   queda: section#content (hero+chips+destacado+rejilla) ya mide x=0 w=1920. */
body.page-id-42 .elementor-widget-wp_guides_newsletter .wp-section{
	width:100vw;margin-inline:calc(50% - 50vw)}

/* ==========================================================================
   2. MARQUEE DE PARTNERS (About) — §1.4 P1. El diseño (About Us.dc.html) deja
   la <section> SIN padding horizontal (`100px 0px 110px`) para que la cinta
   sangre de borde a borde, y en su lugar el padding de 40px/18px vive en cada
   `.wp-shell` interior (`<div style="max-width:1440px;margin:0 auto;
   padding:0 40px">`). El sitio le pone el padding horizontal a la SECCIÓN
   (heredado de `.wp-section{padding:var(--wp-section-y) var(--wp-gutter)}`),
   así que también aprieta al `.wp-marquee`, que es hermano directo de los dos
   `.wp-shell` (cabecera y tarjetas), no su hijo.
   ========================================================================== */

body.page-id-41 #partners{
	padding-top:100px;
	padding-right:0;
	padding-bottom:110px;
	padding-left:0}
body.page-id-41 #partners .wp-shell{
	padding-left:var(--wp-gutter);
	padding-right:var(--wp-gutter)}
@media (max-width:860px){
	body.page-id-41 #partners .wp-shell{
		padding-left:var(--wp-gutter-mobile);
		padding-right:var(--wp-gutter-mobile)}
}
/* A ≥1800px el propio diseño limita la cinta a 1760px centrados — mismo
   comportamiento que `.wp-hero__copy`/`.wp-shell--wide` (walking-planets.css:274). */
@media (min-width:1800px){
	body.page-id-41 #partners .wp-marquee{
		max-width:var(--wp-maxw-ultra);margin-inline:auto}
}
/* Velocidad del marquee NO se toca aquí (§2.4, P2): depende del ancho real de
   la pista, que varía con el contenido (nombres de partners) — riesgo de
   desajustarla de nuevo si el texto cambia. Documentado, no arreglado a ciegas. */

/* ==========================================================================
   3. TRAVEL GUIDES — artículo destacado sin gutter (§1.3 P1) y rejilla de
   tarjetas (§1.2 P1 gap, §2.3/§3.2 P2 detalles). Ambos en wp-guides, dentro
   de mi propiedad.
   ========================================================================== */

/* 3a. El destacado toca los bordes (x=0) en vez de tener el gutter de 40/18px
   del diseño. `walking-planets-extras.css:53` ya le pone padding-bottom; aquí
   solo añado el horizontal (longhand, no piso esa regla). */
body.page-id-42 .elementor-widget-wp_guides_featured_article .wp-shell{
	padding-left:var(--wp-gutter);
	padding-right:var(--wp-gutter)}
@media (max-width:860px){
	body.page-id-42 .elementor-widget-wp_guides_featured_article .wp-shell{
		padding-left:var(--wp-gutter-mobile);
		padding-right:var(--wp-gutter-mobile)}
}

/* 3b. Gap de la rejilla: diseño 30px, sitio 26px (`.wp-cards` es clase
   compartida con Home — de ahí el scope por página). */
body.page-id-42 .wp-cards{gap:30px}

/* 3c. Fila meta de tarjeta (categoría + tiempo de lectura): el sitio ya trae
   `gap:14px` en `.wp-card__meta` (walking-planets-extras.css:58) pero sin
   `display:flex` no hace nada — los spans quedan en línea sin separación.
   Tamaño/tracking: diseño usa 10.5px/.16em fijo, con el mismo suelo de
   accesibilidad de 11.5px que el resto del sitio a ≤860px (Travel
   Guides.dc.html líneas 61-62, `[style*="font-size:10.5px"]{font-size:11.5px}`
   dentro de `@media (max-width:860px)`) — mismo breakpoint que usa el propio
   tema (walking-planets.css:258), no uno inventado. */
body.page-id-42 .wp-card__meta{
	display:flex;
	font-size:10.5px;
	letter-spacing:.16em}
@media (max-width:860px){
	body.page-id-42 .wp-card__meta{font-size:11.5px}
}

/* ==========================================================================
   4. TITULARES — falta el max-width de medida (§3.1 P0). font-size/line-height
   ya coinciden; solo faltaba limitar el ancho en `ch` (escala con el propio
   clamp() del font-size, así que una sola regla cubre los 4 viewports sin
   media queries — igual que en el diseño). Valores leídos directo del
   `.dc.html`, no estimados:
     - About Us.dc.html:      h2 "Good things..." → max-width:22ch
                               h1 hero "Local guides..." → max-width:18ch
     - Travel Guides.dc.html: h1 hero "Barcelona, written..." → max-width:20ch
   ========================================================================== */

body.page-id-41 .wp-h2--partners-stacked{max-width:22ch}
body.page-id-41 .wp-hero__copy h1{max-width:18ch}
body.page-id-42 .wp-hero__copy h1{max-width:20ch}

/* letter-spacing (§3.2 P2): el diseño no declara letter-spacing en ninguno de
   los dos h1 de hero → normal; el sitio trae un valor negativo fluido. */
body.page-id-41 .wp-hero__copy h1,
body.page-id-42 .wp-hero__copy h1{letter-spacing:normal}

/* ==========================================================================
   5. ANIMACIONES
   ========================================================================== */

/* 5a. §2.2 P1 — Travel Guides hereda los tiempos de entrada del hero de
   About/Home; el diseño de Guides es deliberadamente más rápido. Valores
   leídos de Travel Guides.dc.html líneas 112/116/117/119 (duración y delay
   exactos de cada animación). Selectores = los mismos que usa el hero
   compartido (`.wp-kicker.wp-fade-1`, `.wp-line:nth-child(n)>span`,
   `.wp-fade-2` — que envuelve también el `.wp-lead`, que es el subtítulo). */
body.page-id-42 .wp-hero .wp-fade-1{animation-duration:.8s;animation-delay:.3s}
body.page-id-42 .wp-hero .wp-line:nth-child(1)>span{animation-duration:1.05s;animation-delay:.35s}
body.page-id-42 .wp-hero .wp-line:nth-child(2)>span{animation-duration:1.05s;animation-delay:.5s}
body.page-id-42 .wp-hero .wp-fade-2{animation-duration:.9s;animation-delay:.7s}

/* 5b. §2.1 P2 — distancia del reveal por scroll: 22px en el diseño vs 26px en el
   sitio, en ambas páginas. `.wp-reveal` es clase compartida con todo el sitio →
   scope por página para no tocar el resto.
   §26 (2026-09-09): las duraciones de paridad (.95s/1s) pasan a .5s/.55s por el
   feedback del cliente ("tardan mucho en cargar los títulos"). Si sin él
   volviera a pedir paridad con el diseño, recuperar .95s/1s aquí. */
body.page-id-41 .wp-reveal,
body.page-id-42 .wp-reveal{
	transform:translateY(22px);
	transition:opacity .5s var(--wp-ease),transform .55s var(--wp-ease)}

/* ==========================================================================
   6. Cierre de paridad (2026-08-19, @frontend) — últimos desvíos medidos con
   private/tools/qa/paridad.js (reconciliación bloque a bloque contra el .dc.html).
   ========================================================================== */

/* 6a. Travel Guides — hero. El widget global/hero.php usa aquí la variante 'short'
   (height:60vh, SIN padding propio — a diferencia de 'contact'/'legal', que sí llevan
   su padding-top/bottom + height:auto, ver hero.php líneas 190-220). Con height fijo y
   `.wp-hero__copy{height:100%;justify-content:flex-end}` (walking-planets.css:128), un
   padding-top en `.wp-hero` no mueve nada visible: el contenido sigue anclado abajo del
   mismo alto. Travel Guides.dc.html, esta sección: `padding:120px 40px 90px` (altura NO
   fija en el diseño, la da el contenido) → replico exactamente el patrón que hero.php ya
   usa para 'contact'/'legal' (height:auto;min-height:0 + justify-content:flex-start),
   pero en CSS acotado a esta página, sin tocar el widget compartido (PHP no es mío;
   mismo criterio que el resto de este fichero con global_partners/global_hero). */
body.page-id-42 .wp-hero{
	height:auto;
	min-height:0;
	padding-top:120px;
	padding-bottom:90px;
}
body.page-id-42 .wp-hero__copy{
	height:auto;
	justify-content:flex-start;
	padding-bottom:0;
}

/* 6b. Travel Guides — newsletter (wp_guides_newsletter, ya boxeado-fix en §1c).
   Travel Guides.dc.html, esta sección: `padding:90px 40px` → padding-top:90px (sitio 110,
   heredado de --wp-section-y). Mismo selector que §1c, añadido aparte para no reabrir
   ese shorthand de ancho. */
body.page-id-42 .elementor-widget-wp_guides_newsletter .wp-section{padding-top:90px}

/* 6c. About — H2 "You don't buy a tour. You make a memory." (.wp-h2--about-manifesto,
   walking-planets-extras.css §22.4). About Us.dc.html, este H2: `line-height:.88`
   (sitio 111, heredado de la base .wp-h2{line-height:.9} — la clase solo fijaba
   font-size). Va aquí y no en extras.css porque el resto de fixes de About vive en
   este fichero (convención del propio archivo, cabecera). */
body.page-id-41 .wp-h2--about-manifesto{line-height:.88}

/* ==========================================================================
   Pendiente / requiere decisión de producto (no se toca desde este fichero):
   - §2.4 `wpBarTop`/`wpBarBottom` en el hero: puede ser un añadido
     deliberado, se confirma con el equipo antes de retirarlo.
   - §3.4 hero de Travel Guides en vídeo vs imagen con ken burns: el propio
     `.dc.html` de referencia tiene el vídeo roto (404), así que no hay una
     "verdad" que copiar sin decidir antes qué formato quiere Pedro.
   - §2.3 granularidad del reveal: resuelta en PHP (wp-about/02 y wp-about/04,
     `.wp-reveal` movido del contenedor a cada `<p>`), no en este CSS.
   ========================================================================== */

/* ==========================================================================
   RONDA 1 · 2026-09-17 — Placa del logo en "Own operations" (punto 2)
   --------------------------------------------------------------------------
   Sustituye a la foto de equipo `team-terrace.png`, que era del equipo de
   Tours For Today. El cliente pidió el logo de Walking Planets en su lugar.

   POR QUE UNA CLASE PROPIA Y NO `.wp-logo-plaque`: la de `page-home.css`
   lleva `aspect-ratio:1/1`, y aquí el hueco es el 4/3 de `.wp-media-frame`.
   Reutilizarla obligaría a pisarle el aspect-ratio con más especificidad
   desde otra hoja — justo el tipo de regla que se rompe sola cuando alguien
   toca la de home. Esta describe su caja entera y no depende de nadie.

   `.wp-media-frame > div` (walking-planets-extras.css §539) ya la posiciona
   `absolute; inset:0; width/height:100%`, por eso aquí no se repite.
   ========================================================================== */
.wp-about-logo-plaque{
  background:var(--wp-navy);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
/* 260px: el logo real de la mediateca mide 218x155 px. Se deja crecer hasta
   260 (el mismo orden de magnitud que los 300px de la placa del CTA) y el
   `max-width:100%` lo frena en columnas estrechas. Ampliarlo mas lo pixela. */
/* Especificidad 0,2,1 a proposito: `.wp-media-frame img` (0,1,1) le impone
   position/inset/object-fit desde walking-planets-extras.css, y con la misma
   especificidad ganaria la hoja que se encole DESPUES — no se puede depender
   del orden de encolado del tema. */
.wp-media-frame .wp-about-logo-plaque img{
  width:260px;
  max-width:100%;
  height:auto;
  /* El <img> hereda de `.wp-media-frame img` un `position:absolute;inset:0;
     object-fit:cover` que aqui deformaria el logo. Se devuelve a flujo normal
     para que el flex del padre lo centre. */
  position:static;
  inset:auto;
  object-fit:contain;
  display:block;
}
@media (max-width:860px){
  .wp-about-logo-plaque{padding:30px}
  .wp-media-frame .wp-about-logo-plaque img{width:200px}
}