/* ========================================================================== page-tour-guide.css — correcciones de PARIDAD de la página de Tour y de la plantilla de artículo (Guide). 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-59.css` en Tour) gana al del tema y puede pisarte. - `padding` en longhand, nunca shorthand: el shorthand pisa el gutter móvil. - La plantilla de artículo la comparten TODAS las guías: una regla anclada al slug de una guía concreta no servirá para la siguiente. ========================================================================== */ /* ========================================================================== 1. TOUR — galería "Inside, before you go inside" sangra a los bordes Diagnóstico: private/.dev/qa/diff/tour-guide.md §3.2, fila 3 (P0+P1). El diseño (Tour Sagrada Familia.dc.html) pone esta sección SIN max-width propio (sangra) y el grid de fotos en el contenedor ANCHO (1440px normal / 1760px desde 1800px de viewport). En el sitio la sección vivía boxeada a 1440px por el mismo Elementor Container raíz que ya se corrigió para el héroe y la sección "story" (walking-planets-extras.css §31, `.elementor-element-0769747.wp-section`) — a esta sección (widget 08-gallery.php, sin ID de Container propio) no le tocó esa regla. Mismo breakout que usa esa regla; en 08-gallery.php el
del grid ya cambió de `.wp-shell` a `.wp-shell--wide` (clase existente, walking-planets.css:274), así que aquí solo hace falta desboxear la
. */ .wp-gallery-section.wp-section{width:100vw;margin-inline:calc(50% - 50vw)} /* Cierre de paridad (2026-08-19, @frontend): Tour Sagrada Familia.dc.html, esta misma sección ("Inside, before you go inside"): `padding:100px 0 110px` → padding-top:100px (sitio 110, heredado de --wp-section-y). Longhand aparte para no reabrir el shorthand de arriba. */ .wp-gallery-section.wp-section{padding-top:100px} /* El grid en sí hereda el gutter de `.wp-section` (var(--wp-gutter), 40px/18px móvil, walking-planets.css:53) como PADDING de la sección, así que sigue inset 40px por el lado equivocado (mide 1360 en vez de 1440 a 1440px de viewport — medido en vivo). El diseño no tiene ese padding en la
(va SOLO en el propio grid, con el mismo valor: `padding:0 40px`, reducido a 18px por su propio media query ≤860px — igual que nuestro --wp-gutter-mobile). Se reproduce con el patrón "romper el gutter heredado y devolverlo como padding propio": margin negativo = --wp-gutter (para escapar el padding de la sección) + padding propio = --wp-gutter (para reponerlo sobre el propio grid, que es donde lo pone el diseño). Solo entre 861px y 1799px: por debajo, el gutter móvil (18px) sigue las mismas reglas con su propia variable; por encima de 1800px manda `.wp-shell--wide` (max-width:1760+margin-inline:auto, walking-planets.css:274) y un margin negativo aquí lo descuadraría — se excluye. */ @media (min-width:861px) and (max-width:1799px){ .wp-gallery-section .wp-gallery-grid{ margin-left:calc(-1 * var(--wp-gutter));margin-right:calc(-1 * var(--wp-gutter)); } } @media (max-width:860px){ .wp-gallery-section .wp-gallery-grid{ margin-left:calc(-1 * var(--wp-gutter-mobile));margin-right:calc(-1 * var(--wp-gutter-mobile)); } } .wp-gallery-section .wp-gallery-grid{ padding-left:var(--wp-gutter);padding-right:var(--wp-gutter); } @media (max-width:860px){ .wp-gallery-section .wp-gallery-grid{ padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile); } } /* ========================================================================== 2. TOUR — 2 secciones más con fondo encajonadas (medición del team-lead sobre Tour Sagrada Familia.dc.html, a 1920: ambas dan section x=0 w=1920 en el diseño, sin contenedor "wide" — a diferencia de la galería, aquí solo hace falta el breakout de la
, el interior se queda en `.wp-shell` normal 1440). TRAMPA (avisada por el team-lead): "What's included" es TAMBIÉN `.wp-section--light` pero en el diseño se queda boxeada a propósito (div x=240 w=719) — una regla por `--light`/`--cyan` a secas arreglaría estas 2 Y rompería esa. Se ancla por WIDGET, nunca por el tono: - "They queued for nothing…" = `global_reviews` (widgets/global/reviews.php, NO es mío — reviews.php se usa en más páginas y ahí puede estar boxeado a propósito, igual que Contact/Travel Guides/Legal). Escapo el problema sin tocar ese fichero: regla puramente CSS, acotada a esta página con el body class del propio tema (`.single-tour`, post type `tour`) — no toca ninguna otra página que use el mismo widget. - "People who booked this also walked" = `wp_tour_related` (13-related-tours.php, SÍ es mío, pero no hace falta tocar el PHP: el mismo patrón de anclar por clase de widget que ya usa `.elementor-widget-wp_home_tours_filterable_grid .wp-section` en walking-planets-extras.css §31b). */ .single-tour .elementor-widget-global_reviews .wp-section{width:100vw;margin-inline:calc(50% - 50vw)} .elementor-widget-wp_tour_related .wp-section{width:100vw;margin-inline:calc(50% - 50vw)} /* Cierre de paridad (2026-08-19, @frontend): padding-top de estas mismas 2 secciones. Tour Sagrada Familia.dc.html: "They queued for nothing...You won't." padding:96px 40px → padding-top:96px "People who booked this also walked" padding:100px 40px 110px → padding-top:100px Este segundo también arregla los 3 H3 de las tarjetas relacionadas (Santa Maria del Mar, Moco Museum, Barcelona tapas tour): paridad.js mide el padding-top del mismo ancestro
que pinta fondo, y es la misma sección para las 4 filas — una sola regla cierra las 4. Sitio antes: 110 en las 2 (heredado de --wp-section-y). */ .single-tour .elementor-widget-global_reviews .wp-section{padding-top:96px} .elementor-widget-wp_tour_related .wp-section{padding-top:100px} /* Cierre de paridad — H1 "Sagrada Família guided tour." (.wp-h1, sin variante propia en esta página). Tour Sagrada Familia.dc.html: `max-width:20ch`. Scope por .single-tour: `.wp-h1` a secas es la base de TODAS las páginas y no puede tocarse sin filtrarse a ellas. */ .single-tour .wp-h1{max-width:20ch} /* ========================================================================== 3. GUIDE (plantilla de artículo, .single-post) — último punto del brief del team-lead: la "caja" que queda. H2 "Now go and find the turtles." (global_cta_banner, modo sin imagen — el mismo widget de la sección 22.5 del catálogo en walking-planets-extras.css, donde vive el max-width:22ch de esta clase). Guide Sagrada Familia.dc.html, su sección: `background:#00B2D8;padding:90px 40px` → x=0/w=1920 (sitio: x=240/w=1440, boxeada) y padding-top:90px (sitio 110). Mismo breakout que el resto de §31/§1-2 de este fichero: width:100vw + margin-inline negativo, que se autocorrige atravesando el Container "Boxed" de Elementor. Anclado al WIDGET (no al slug de la guía): la plantilla la comparten todas las guías — una regla por slug no serviría para la siguiente. Scope por .single-post: este widget también vive en Home (ahí ya boxeado bien via .page-id-40) y en Legal (ahí NO se toca — su CTA banner se queda boxeada a propósito, fuera de mi alcance según el brief). Sin el scope, esta regla se filtraría a las tres. */ .single-post .elementor-widget-global_cta_banner .wp-section{ width:100vw;margin-inline:calc(50% - 50vw); padding-top:90px; } /* Cierre de paridad — H1 "What to look at when everyone is looking up" (.wp-h1--compact, compartida con Legal a distinto max-width — ver walking-planets-extras.css §22.8, donde vive el de Legal). Guide Sagrada Familia.dc.html: `max-width:26ch`. */ .single-post .wp-h1--compact{max-width:26ch} /* ========================================================================== 4. GUIDE — que se lea el texto pequeño del hero (ronda 1 del cliente, punto señalado por Pedro sobre /travel-guides/sagrada-familia-details-nobody-tells- you/: las migas "← Travel Guides" y la línea "GAUDÍ & ARCHITECTURE · 2 MIN READ · UPDATED AUGUST 2026" no se leen sobre una foto/vídeo de cielo claro. Cita literal: "antes lo teniamos pero se ve que lo perdimos en algun momento". Tenía razón: el diseño (design-reference/Guide Sagrada Familia.dc.html:120) lleva un velo bastante más oscuro arriba — linear-gradient(180deg, rgba(14,52,87,.65), rgba(14,52,87,.25) 40%, rgba(14,52,87,.78)) — que el `.wp-hero__scrim` COMPARTIDO de hoy (.28→.04→.26→.8, walking-planets-extras.css §26.2): se bajó a propósito para no apagar el vídeo del hero en las 7 páginas (Home incluida, ver comentario de esa regla), y de paso se llevó el contraste del texto pequeño de esta plantilla. Mismo remedio ya aplicado hoy a las 26 fichas de tour (page-tour.css §1-bis, MISMO síntoma): en vez de tocar `.wp-hero__scrim` (compartida, recalibrada para el vídeo — subirla aquí desharía ese trabajo en las otras 6 páginas), una viñeta LOCAL colgada de `.wp-hero__veil`. Esa clase la pone `starter-widgets/widgets/global/hero.php` SOLO cuando `variant === 'guide'` (exclusiva de esta plantilla; en Tour la misma clase la pone otro widget, wp-tour/01-tour-hero.php — no se tocan entre sí y no hay colisión posible). Es el único hijo de `.wp-hero__copy` (flex column, `justify-content: flex-end`), así que la caja se ciñe al alto real del texto (migas + línea de meta + H1) y no al hero entero — igual razonamiento que page-tour.css §1-bis: colgarla de `.wp-hero__copy` mediría el hero completo por su `height:100%`. Dirección: horizontal, izquierda a derecha (como en Tour), no vertical — el texto de este hero (migas + línea de meta + H1) está TODO alineado a la izquierda, así que una sola caja que tiña la columna izquierda y se abra hacia la foto por la derecha cubre a la vez el texto pequeño de arriba del bloque y el H1 de abajo, sin necesitar dos máscaras combinadas (frágil entre navegadores: `-webkit-mask-composite` usa nombres de valor distintos a `mask-composite` y mezclarlos mal deja el CSS "en el inspector" sin efecto en pantalla — la propia página-tour.css documenta esa trampa con el filtro del vídeo, §26.3). Con una sola máscara vertical (solo para difuminar el borde sangrado de arriba/abajo, no para recortar en horizontal) el riesgo desaparece y es la MISMA técnica ya verificada en producción hoy mismo. */ body.single-post .wp-hero__veil{position:relative} body.single-post .wp-hero__veil::before{ content:""; position:absolute; z-index:-1; pointer-events:none; /* Sangra por arriba y por abajo: ahí ocurren los desvanecidos de la máscara, para que el texto quede entero en la zona plana (misma técnica que page-tour.css §1-bis). El bloque de esta plantilla es más corto que el de Tour (sin badges bajo el H1), así que la sangría es más corta. */ top:-90px; bottom:-70px; left:calc(var(--wp-gutter) * -1); right:0; /* Navy del diseño (#10395F): plano al 80% donde vive el texto (izquierda), atenuando hacia la derecha para descubrir la foto/vídeo — igual criterio de suelo de contraste que page-tour.css §1-bis (por debajo de ~70% de viñeta el texto pierde AA). El bloque de meta va topado a max-width:60% más abajo, así que su final cae siempre dentro del tramo plano. */ /* 2026-09-18 — dos correcciones del lead sobre lo que entregó el subagente, verificadas en * vivo hoy mismo en `page-tour.css` §1-bis contra los mismos síntomas: * 1) Paradas intermedias añadidas (antes 0/60/78/90%): dos tramos rectos con un codo se * lee como un filo recto cuando el codo coincide con un borde de luz de la propia foto * (visto hoy en un tour de cocina con vapor). Los extremos no cambian. * 2) La máscara vertical de más abajo pasa de PORCENTAJE a PÍXELES atados a la sangría real * (90px arriba / 70px abajo) — ver el porqué justo debajo, es el fallo de Costa Brava. */ background:linear-gradient(to right, rgba(16,57,95,.82) 0%, rgba(16,57,95,.81) 30%, rgba(16,57,95,.80) 60%, rgba(16,57,95,.59) 69%, rgba(16,57,95,.38) 78%, rgba(16,57,95,.17) 84%, rgba(16,57,95,0) 90%); /* CAUSA RAÍZ (encontrada hoy mismo en Costa Brava, mismo patrón que page-tour.css §1-bis): * con las paradas en PORCENTAJE del alto de la caja, un título de guía que envuelva a 2-3 * líneas hace la caja mucho más alta que el caso de 1 línea contra el que se ajustó el * 18%/82% — ese mismo 18% deja de representar los 90px de sangría real y pasa a ser una * franja de muchos más píxeles, dejando las migas y media línea del H1 dentro del * desvanecido, casi sin viñeta. Con las paradas en PÍXELES atados a la sangría (90px / * 70px, las mismas cifras de `top`/`bottom` de arriba), el tramo opaco cubre SIEMPRE el * contenido real del `.wp-hero__veil` sea cual sea su alto. Sin soporte de `mask-image`, * la viñeta se queda a opacidad plena en toda la caja: cubre de más, nunca de menos. */ -webkit-mask-image:linear-gradient(to top, transparent 0px, #000 70px, #000 calc(100% - 90px), transparent 100%); mask-image:linear-gradient(to top, transparent 0px, #000 70px, #000 calc(100% - 90px), transparent 100%); } @media (max-width:820px){ body.single-post .wp-hero__veil::before{ left:calc(var(--wp-gutter-mobile) * -1); right:calc(var(--wp-gutter-mobile) * -1); /* Mismas paradas intermedias que arriba (2026-09-18): 76%/92%/100% son los valores ya verificados y NO cambian; se reparten en más tramos para que la caída no se lea como dos rectas con un codo en el móvil. */ background:linear-gradient(to right, rgba(16,57,95,.82) 0%, rgba(16,57,95,.81) 38%, rgba(16,57,95,.80) 76%, rgba(16,57,95,.65) 84%, rgba(16,57,95,.50) 92%, rgba(16,57,95,.37) 96%, rgba(16,57,95,.24) 100%); } } /* Las migas y la línea de meta: 12.5px (era 11.5) y blanco al 90% (era 70%), igual subida que en Tour y por el mismo motivo — 12.5px en mayúsculas no llega a "texto grande" (AA exige 4.5:1). Especificidad 0,2,0 gana a `.wp-hero__meta-row` de walking-planets-extras.css §19.16 (0,1,0) sin `!important`; esta hoja se encola después. */ body.single-post .wp-hero__meta-row{ font-size:12.5px; color:rgba(255,255,255,.9); text-shadow:0 1px 3px rgba(6,24,44,.55); max-width:60%; } body.single-post .wp-hero__meta-row a{color:rgba(255,255,255,.9)} body.single-post .wp-hero__meta-row a:hover, body.single-post .wp-hero__meta-row a:focus-visible{color:var(--wp-cyan)} @media (max-width:820px){ body.single-post .wp-hero__meta-row{max-width:82%} }