/* ==========================================================================
page-tours.css — componentes propios de la página Tours (/tours/), sin
equivalente en walking-planets.css / -extras.css.
DUEÑO ÚNICO. Existe para que varios agentes puedan trabajar en páginas
distintas en paralelo sin escribir nunca el mismo fichero (File Ownership,
skill `wordpress-elementor` §16.3). Se encola en el foreach de
functions.php (después de walking-planets-extras.css), así que a igual
especificidad gana lo de aquí; no hace falta !important.
Reglas de la casa (idénticas a page-tour-guide.css):
- Cada bloque documenta su hallazgo y el valor del DISEÑO como referencia.
- Nada de !important: si hace falta especificidad, repetir la clase.
- padding en longhand, nunca shorthand (pisa el gutter móvil).
========================================================================== */
/* ==========================================================================
1. BARRA DE FILTROS STICKY (Tours.dc.html L166-185)
========================================================================== */
.wp-tours-filterbar{
position:sticky;top:78px;z-index:50;
background:rgba(14,52,87,.96);backdrop-filter:blur(14px);
border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
padding-top:16px;padding-bottom:16px;padding-left:40px;padding-right:40px;
}
@media(max-width:860px){
.wp-tours-filterbar{padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile)}
}
/* Toggle Index/Gallery — 2 radios ocultos accesibles (nunca display:none, que
los saca del árbol de tabulación) + :has() para no depender de que las
labels sean hermanas de los inputs (viven dentro de .wp-tours-filterbar,
el toggle real cuelga de #index vía :has(), ver bloque 2). */
/* .wp-tours-view-input.wp-tours-view-input (clase repetida, no !important — regla de la casa,
CSS-CLASSES.md): ".wp-page input,.wp-page textarea{width:100%;min-width:0}" (theme-fixes.css,
pensada para los campos del formulario de Contact) tiene especificidad 0,1,1 y le ganaba a la
clase única de aquí (0,1,0), estirando el radio oculto a 1440px (min-width:0 no ayuda: el
width:100% manda) y disparando scroll horizontal real en toda la página — hallazgo de
paridad.js del 2026-08-19 (verificado con CDP getMatchedStylesForNode, no adivinado). */
.wp-tours-view-input.wp-tours-view-input{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.wp-tours-viewtoggle{display:flex;border:1px solid rgba(255,255,255,.28)}
/* 2026-09-10 (pasada móvil): 34px de alto es diana pequeña en un táctil. El diseño obliga a
44px en toda la cabecera y el pie (`header a, header button, [data-drawer] a, footer a
{min-height:44px}`) y a 42px en sus propios conmutadores (`[data-keep-grid] button`); este
conmutador Index/Gallery se había quedado fuera de las dos. */
.wp-tours-viewtoggle__btn{
cursor:pointer;font-family:var(--wp-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
padding:11px 15px;background:transparent;color:var(--wp-white);min-height:44px;display:inline-flex;align-items:center}
.wp-tours-view-input:checked + .wp-tours-viewtoggle__btn{background:var(--wp-white);color:var(--wp-navy)}
.wp-tours-view-input:focus-visible + .wp-tours-viewtoggle__btn{outline:2px solid var(--wp-yellow);outline-offset:-2px}
/* QA móvil (2026-08-19, @frontend) — mínimo de texto 11,5px: label "Index"/"Gallery" del
toggle de vista, único uso en el sitio. Va DESPUÉS de la regla base (línea ~48): un
@media al principio del archivo con la misma especificidad (0,1,0) pierde por orden de
cascada contra una regla sin media-query que aparece más abajo en el mismo fichero —
gotcha real, cazado en la propia verificación de este cambio (computado seguía en 11px). */
@media(max-width:860px){
.wp-tours-viewtoggle__btn{font-size:11.5px}
}
/* ==========================================================================
2. TOGGLE DE VISTA — sin JS nuevo (AGENT-BRIEF-COMMON.md regla 2): el
estado de los 2 radios de arriba controla, vía :has(), qué panel del
ancestro común (#index) se muestra. Índice visible por defecto (mismo
defaultView:'index' del diseño).
========================================================================== */
.wp-tours-grid-view{display:none}
#index:has(#wp-tours-view-grid:checked) .wp-tours-index-view{display:none}
#index:has(#wp-tours-view-grid:checked) .wp-tours-grid-view{display:block}
/* ==========================================================================
3. FILAS DE ÍNDICE (Tours.dc.html L189-287, L428-451) — patrón reutilizado
por los widgets 04 (tours) y 07 (segmentos), con el modificador --segment
para el hover amarillo y el borde arriba en vez de abajo.
========================================================================== */
.wp-tours-row{
display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:26px;align-items:center;
padding-top:34px;padding-bottom:34px;padding-left:40px;padding-right:40px;
border-bottom:1px solid rgba(255,255,255,.14);
color:var(--wp-white);
transition:background .35s ease,padding-left .35s ease;
}
.wp-tours-row:hover{background:rgba(0,178,216,.1);padding-left:54px}
.wp-tours-row--segment{border-bottom:0;border-top:1px solid rgba(255,255,255,.14)}
.wp-tours-row--segment:hover{background:rgba(255,229,0,.08)}
/* Última fila de segmentos: también lleva borde inferior (Tours.dc.html L444) —
:last-of-type funciona porque las 3 filas son hermanas sin otro tipo mezclado. */
.wp-tours-row--segment:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)}
.wp-tours-row__num{font-family:var(--wp-mono);font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.52)}
.wp-tours-row__body{display:flex;flex-direction:column;gap:7px;min-width:0}
.wp-tours-row__title{font-family:var(--wp-display);font-size:clamp(28px,3.6vw,58px);text-transform:uppercase;line-height:.98}
.wp-tours-row__meta{font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.wp-tours-row__right{display:flex;align-items:center;gap:22px;flex:0 0 auto}
.wp-tours-row__price{font-family:var(--wp-display);font-size:30px;color:var(--wp-yellow)}
.wp-tours-row__arrow{font-family:var(--wp-display);font-size:26px;color:var(--wp-cyan)}
@media(max-width:860px){
.wp-tours-row{padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile)}
.wp-tours-row:hover{padding-left:var(--wp-gutter-mobile)}
/* [data-row-title]/[data-row-meta] del diseño (Tours.dc.html L56/L64): título más
pequeño y meta oculta en móvil para que la fila no se desborde a 375px. */
.wp-tours-row__title{font-size:30px}
.wp-tours-row__meta{display:none}
/* 2026-09-17 (ronda 1, punto 7): el precio pasa de «€25» a «From €25» — en Anton 30px
eso es el doble de ancho, y a 375px empujaba al título hasta partirlo. Se baja a 22px
y se prohibe el salto: la fila tiene que seguir leyendose de un vistazo. La versión
«Ask us» no se toca (es mono 11.5px y ya cabia). */
.wp-tours-row__price{font-size:22px;white-space:nowrap}
}
/* ==========================================================================
4. EJE DE TIEMPO (Tours.dc.html L352-397, id data-axis-rail)
========================================================================== */
.wp-tours-axis{position:relative;padding-top:14px}
/* Estática a ancho completo a propósito: el trazado scaleX(0→1) al hacer scroll
(Tours.dc.html data-axis-line) es JS puro sin motor equivalente activo — ver
nota de widget 05. Elemento decorativo, no contenido, no queda roto ni mudo. */
.wp-tours-axis__line{height:2px;background:var(--wp-cyan)}
.wp-tours-axis__rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;background:rgba(255,255,255,.14)}
.wp-tours-axis__col{background:var(--wp-navy);padding:24px 20px 30px;display:flex;flex-direction:column;gap:16px;min-width:0}
.wp-tours-axis__duration{font-family:var(--wp-display);font-size:clamp(22px,2.4vw,38px);text-transform:uppercase;line-height:1;color:var(--wp-yellow)}
.wp-tours-axis__caption{font-family:var(--wp-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.wp-tours-axis__link{color:var(--wp-white);font-size:16.5px;line-height:1.4;border-top:1px solid rgba(255,255,255,.14);padding-top:14px;display:block}
.wp-tours-axis__link:hover{color:var(--wp-cyan)}
.wp-tours-axis__link-price{display:block;font-family:var(--wp-mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.52);margin-top:5px}
/* §21 (2026-09-09): rejilla de 5 columnas → 3 por debajo de 1400px (a 5 las etiquetas
se partían en portátiles). Va ANTES de los bloques de 860px para que el raíl
deslizable de móvil siga ganando ahí (display:flex pisa el grid). */
@media (max-width:1400px){
.wp-tours-axis__rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:600px) and (max-width:860px){
.wp-tours-axis__rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
/* Raíl deslizable en móvil (Tours.dc.html L57-59): "leer a lo ancho" en vez de apilar
5 columnas verticalmente, que dejaría la sección altísima. */
.wp-tours-axis__rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1px}
.wp-tours-axis__col{flex:0 0 78%;scroll-snap-align:start}
.wp-tours-axis__duration{font-size:26px}
/* QA móvil (2026-08-19, @frontend) — mínimo de texto 11,5px: caption de duración
("A gap between things"...) y precio de cada franja ("€29"...). */
.wp-tours-axis__caption{font-size:11.5px}
.wp-tours-axis__link-price{font-size:11.5px}
}
/* ==========================================================================
5. SECCIÓN PARTIDA CON VÍDEO (Tours.dc.html L399-420, id data-split)
========================================================================== */
.wp-tours-split{display:grid;grid-template-columns:1.05fr .95fr;min-height:76vh}
.wp-tours-split__media{position:relative;overflow:hidden;min-height:380px}
.wp-tours-split__media video,.wp-tours-split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp-tours-split__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,52,87,.35),rgba(14,52,87,.05))}
.wp-tours-split__copy{padding:96px 40px;display:flex;flex-direction:column;justify-content:center;gap:24px;color:var(--wp-white)}
@media(max-width:860px){
.wp-tours-split{grid-template-columns:minmax(0,1fr);min-height:0}
.wp-tours-split__media{min-height:300px;height:300px}
.wp-tours-split__copy{padding-top:64px;padding-bottom:64px;padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile)}
}
/* ==========================================================================
6. LISTA NUMERADA "THE HONEST BIT" (Tours.dc.html L462-467)
========================================================================== */
.wp-tours-honest-list li{display:flex;gap:20px;padding-top:22px;padding-bottom:22px;border-top:1px solid rgba(14,52,87,.14);font-size:17.5px;line-height:1.6}
.wp-tours-honest-list li:last-child{border-bottom:1px solid rgba(14,52,87,.14)}
.wp-tours-honest-list__num{color:var(--wp-cyan-ink);font-weight:700;flex:0 0 auto}
/* ==========================================================================
7. TITULARES DE SECCIÓN — cada clamp() sale literal de Tours.dc.html
(regla de "no promediar", CSS-CLASSES.md §19: ningún wp-h2 compartido coincide)
========================================================================== */
.wp-h2--tours-feeling{font-size:clamp(38px,6vw,124px)} /* "Nobody wakes up wanting..." L161 */
.wp-h2--tours-time{font-size:clamp(34px,5vw,96px)} /* "One hour or one whole day" L356 */
.wp-h2--tours-basilica{font-size:clamp(34px,4.4vw,86px)} /* "Start with the basilica..." L407 */
.wp-h2--tours-segments{font-size:clamp(34px,5vw,96px)} /* "Some groups need their own plan" L425 */
.wp-h2--tours-honest{font-size:clamp(32px,4.4vw,84px)} /* "What we won't sell you" L459 */
.wp-h2--tours-cta{font-size:clamp(34px,5.4vw,108px)} /* "Still scrolling?..." L473 */
/* ==========================================================================
8. CTA FINAL CELESTE (Tours.dc.html L471-476) — global/cta-banner.php no cubre
este clamp (CSS-CLASSES.md §21, sin "no promediar" un valor de otra página) y
no está en mi propiedad para este encargo; layout propio y ligero.
========================================================================== */
.wp-tours-cta{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-end;justify-content:space-between}
/* ==========================================================================
9. MEGA MENÚ GLOBAL "Tours +" — MOVIDO a walking-planets-extras.css §34
(2026-08-19, @team-lead). El markup vive en widgets/global/header.php, que
sale en las 7 páginas; su CSS NO puede vivir aquí (page-tours.css solo se
aplica dentro de esta página en la práctica de trabajo del equipo, aunque
técnicamente se encole en todas — la hoja compartida es la que corresponde
a markup compartido). Sin esta regla el panel se veía sin formato en
Home/About/Legal. No dupliques el bloque aquí: la fuente de verdad es
extras.css §34, con los mismos comentarios de decisión (left:0, etc.).
========================================================================== */
/* ==========================================================================
10. Cierre de paridad — hallazgos registrados tras medir con paridad.js (2026-08-19)
========================================================================== */
/* 10.1 — Ancho a sangre. Elementor mete cada widget dentro de un `.e-con-inner` acotado a
1440px (boxed); el fondo blanco/celeste se quedaba en una columna central con navy asomando
a los lados en vez de ir a sangre — la técnica "breakout" (`width:100vw` +
`margin-inline:calc(50% - 50vw)`) YA es el patrón establecido en el sitio (walking-planets-
extras.css: `.wp-hero`, `.elementor-widget-wp_about_manifesto_white .wp-section`, etc. — la
busco y la repito aquí, no la invento). Se aplica a los 8 widgets de esta página: aunque solo
3 lo delataban visualmente (fondo blanco/celeste contra el navy de la página), el contenedor
boxed afecta a los 8 por igual — los de fondo navy no lo mostraban porque el navy del widget
y el navy de la página son indistinguibles, no porque no tuvieran el problema. */
.elementor-widget-wp_tours_hero .wp-hero,
.elementor-widget-wp_tours_feeling_intro .wp-section,
.elementor-widget-wp_tours_index_filterable .wp-section,
.elementor-widget-wp_tours_time_axis .wp-section,
.elementor-widget-wp_tours_feature_split .wp-tours-split,
.elementor-widget-wp_tours_segments_list .wp-section,
.elementor-widget-wp_tours_honest_bit .wp-section,
.elementor-widget-wp_tours_cta_banner .wp-section{
width:100vw;margin-inline:calc(50% - 50vw);
}
/* 10.2 — H1 del hero: max-width:22ch fijado inline en 01-hero.php (igual que Tours.dc.html
L123, que lo lleva inline en el propio h1, no en una clase) — no hace falta regla aquí.
10.3 — line-height de 3 titulares: el clamp() de cada .wp-h2--tours-* de arriba (§7) fija
correctamente el font-size, pero heredaba el line-height base de .wp-h2 (walking-planets.css),
distinto del real de cada bloque en Tours.dc.html. Valores literales, sin promediar. */
.wp-h2--tours-feeling{line-height:.88} /* L161: font-size clamp(...),line-height:.88 */
.wp-h2--tours-basilica{line-height:.92} /* L407: line-height:.92 */
.wp-h2--tours-cta{line-height:.88} /* L473: line-height:.88 */
/* ═══════════════════════════════════════════════════════════════════════════════════════
11 — SIN PRECIO PUBLICADO (2026-08-26, @wordpress-elementor, ola 6 · HANDOFF-04 §18)
14 de las 21 experiencias no tienen precio cerrado con el cliente. El diseño v2 ya
resuelve ese caso y NO deja el hueco vacío ni inventa una cifra: la fila dice «Ask us»
y la tarjeta «Price on request →». Son dos tratamientos tipográficos distintos, no el
mismo con otro texto, y de ahí que hagan falta dos modificadores.
═══════════════════════════════════════════════════════════════════════════════════════ */
/* Fila del índice. `.wp-tours-row__price` es Anton 30px (una cifra grande); «Ask us» es
mono 11.5 bold en versalitas — Tours.dc.html v2 L406. Hay que reponer las cinco
propiedades, no solo el texto. */
.wp-tours-row__price--ask{
font-family:var(--wp-mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--wp-yellow);
}
/* Eje de tiempo: el gris queda para los precios reales, el amarillo para «Ask us» y para
las notas («Evenings») — Tours.dc.html v2 L556, L562, L570. */
.wp-tours-axis__link-price--yellow{color:var(--wp-yellow)}
/* Tarjeta de la galería: mismo tamaño que el precio, en gris apagado en vez de celeste,
para que «Price on request» no compita con las cifras reales — v2 L420. */
.wp-card__price--ask{color:rgba(255,255,255,.55)}
/* Hueco de foto pendiente dentro de la tarjeta. **17 de las 21** salen así hoy: 13 fichas no
tienen imagen destacada (falta material del cliente — CLAUDE.md §7) y 4 la tienen pero
enseña otra cosa (ver §13 abajo y el control «Fotos que no corresponden» del widget).
Regla COPIADA LITERAL de `page-home.css`, donde ya la usa wp-home/07-tours-filterable-grid
— no una variante: es la misma tarjeta y tiene que verse igual en las dos páginas. Se
duplica porque cada hoja `page-*.css` tiene un dueño distinto y ninguna se carga en la
página de la otra; es el precio de poder trabajar en paralelo (functions.php, §encolado).
Si algún día cambia una, hay que cambiar las dos. */
.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);
}
/* La rejilla de la galería iba de **0..1440**, con las tarjetas de los extremos pegadas a
los bordes del viewport y cortadas, en vez de 40..1400. Medido en navegador, no leído:
`.wp-shell` (walking-planets.css:57) es SOLO `max-width` + `margin-inline:auto` — no trae
gutter. El gutter lo pone `.wp-section`, y la sección `#index` lleva `padding:0 0 40px`
en línea a propósito, porque las filas del índice van a sangre y se pagan su propio
`padding:34px 40px`. La galería se quedaba sin ninguno de los dos.
Es la misma trampa que ya se pagó con el grid de guías (CLAUDE.md §5-bis) y venía de
antes de esta ola, con las 9 tarjetas antiguas.
El 54px superior es el del diseño v2 (L415: `padding:54px 40px 0`). */
.wp-tours-gallery{padding:54px var(--wp-gutter) 0}
@media(max-width:860px){
/* Longhand a propósito: un shorthand aquí volvería a pisar el padding-top de arriba
(CLAUDE.md §5-bis, el caso de los 339→295px). */
.wp-tours-gallery{padding-left:var(--wp-gutter-mobile);padding-right:var(--wp-gutter-mobile)}
}
/* ═══════════════════════════════════════════════════════════════════════════════════════
12 — EL FILTRO DEL ÍNDICE NO SE VEÍA (2026-08-26, @wordpress-elementor, ola 6)
Hallazgo con navegador real, no leyendo el PHP: al pulsar cualquier chip, `initFilters()`
(walking-planets.js §7) SÍ ponía `is-dimmed` en las filas que no casaban — comprobado con
classList — pero el `opacity` computado de esas filas seguía siendo **1**. Motivo: la
única regla de `is-dimmed` del proyecto es `.wp-card.is-dimmed` (walking-planets.css:198
y extras.css:879). La vista Index usa `.wp-tours-row`, que nunca tuvo la suya.
O sea: los chips de esta página no cambiaban NADA en pantalla en la vista por defecto.
No es una regresión de esta ola —pasaba igual con las 9 experiencias antiguas— pero con
21 en la lista el filtro es justamente lo que la hace usable, así que se cierra aquí.
Valores del diseño v2 (Tours.dc.html L899-900, `dim()` y `ord()`): opacidad 0.16 y
`order:1` para mandar lo atenuado al final. Es atenuar, NO ocultar (CLAUDE.md §5): el
visitante tiene que seguir viendo que hay más experiencias detrás del filtro.
Especificidad: `#index` (1,0,0) delante para no repetir el empate que ya costó una ronda
con `.wp-reveal.is-in{opacity:1}` (ver extras.css §.. nota de `.wp-cards .wp-card`).
El contenedor de las filas es `display:flex;flex-direction:column`, así que `order` aplica.
═══════════════════════════════════════════════════════════════════════════════════════ */
#index .wp-tours-row{transition:opacity .45s ease,background .35s ease,padding-left .35s ease}
#index .wp-tours-row.is-dimmed{opacity:.16;order:1}
/* ═══════════════════════════════════════════════════════════════════════════════════════
13 — EL COLOR DE LOS TÍTULOS DE FILA (2026-08-26, @wordpress-elementor, ola 6)
Los títulos del índice y de los segmentos salían **celeste** en reposo y habrían salido
**amarillos** al pasar el ratón. Ninguno de los dos colores está declarado en ninguna
parte para estas filas: `.wp-tours-row__title` no pone color, así que hereda del ``, y
el `` se lo lleva de las dos reglas globales de enlace:
.wp-page a {color:var(--wp-cyan)} walking-planets.css:47 (0,1,1)
.wp-page a:hover {color:var(--wp-yellow)} walking-planets.css:48 (0,2,1)
En el diseño v2 existen **esas mismas dos reglas globales** (Tours.dc.html L26-27:
`a{color:#00B2D8}` y `a:hover{color:#FFE500}`) — pero cada fila lleva `color:#FFFFFF`
**en línea**, y un estilo en línea gana a cualquier selector, también en `:hover`. O sea
que en el diseño la fila es **blanca en reposo Y en hover**: lo único que cambia al pasar
el ratón es el fondo (`rgba(0,178,216,.1)`) y el `padding-left` (40→54px), que es lo que
ya hace `.wp-tours-row:hover` más arriba (§4).
Aquí se replica ese blanco fijo, y hay que hacerlo en los tres estados por separado: si
sólo se declarase el reposo, `.wp-page a:hover` seguiría ganando y el título se pondría
amarillo justo al ir a pulsarlo — el mismo patrón que el `button:hover` rosa del tema
padre, que en reposo se ve bien y ya costó tres intentos (CLAUDE.md §5-bis).
Especificidad: `.wp-page a.wp-tours-row` = 0,2,1 (gana a 0,1,1) y con la pseudoclase
0,3,1 (gana a 0,2,1). No hace falta `!important` y no se toca ningún fichero ajeno.
⚠️ Si lo que se quiere es **celeste en hover** —un afford extra que el diseño NO tiene—
es cambiar el valor de la regla `:hover`/`:focus-visible` de abajo a `var(--wp-cyan)`.
Se deja en blanco por defecto porque el contrato es replicar el diseño, no ampliarlo, y
un QA de paridad marcaría el celeste como desvío.
═══════════════════════════════════════════════════════════════════════════════════════ */
.wp-page a.wp-tours-row,
.wp-page a.wp-tours-row:hover,
.wp-page a.wp-tours-row:focus,
.wp-page a.wp-tours-row:focus-visible{color:var(--wp-white)}
/* El foco sí necesita ser visible por sí mismo: si el color no cambia y el fondo del hover
sólo aparece con ratón, navegar con teclado por 24 filas sería a ciegas. Mismo tratamiento
que ya usa el toggle Index/Gallery en §2 (outline amarillo). */
.wp-page a.wp-tours-row:focus-visible{
outline:2px solid var(--wp-yellow);
outline-offset:-2px;
background:rgba(0,178,216,.1);
}