/* ============================================================================
 * page-tour.css — plantilla ÚNICA de ficha de tour (CPT `tour`)
 * Ola 4, 2026-08-26, @wordpress-elementor.
 *
 * QUÉ HAY AQUÍ y qué NO:
 *   - Solo clases NUEVAS que estrena la plantilla del Theme Builder: la tarjeta de
 *     petición (.wp-ask*), el mapa del punto de encuentro (.wp-map*), la legibilidad
 *     del texto pequeño del hero (§1-bis) y el alto del hero de ficha.
 *   - Aplica a LAS 21 FICHAS. En la 1ª pasada de la ola, Sagrada Família iba excluida de
 *     la plantilla y este fichero era inerte sobre ella; en la 2ª pasada Alex cambió el
 *     criterio (quedaba como la única ficha sin mapa) y entró como las demás. Los
 *     comentarios que hablan de "acotado para no tocar Sagrada" son de aquel momento y ya
 *     no describen el estado: hoy esas reglas también le aplican, y está medido.
 *   - Cero `!important`. Donde hace falta ganar al CSS por página de Elementor
 *     (`uploads/elementor/css/post-<ID>.css`, especificidad 0,5,0) se sube
 *     especificidad repitiendo la clase, que es lo que ya hace el proyecto con
 *     `.wp-form.wp-form.wp-form` (ver CLAUDE.md §5-bis).
 *
 * Se encola desde functions.php, después de walking-planets-extras.css.
 * Los colores salen SIEMPRE de las variables del tema: la ola 1 cambió la paleta de
 * todo el sitio y un hex escrito aquí se habría quedado con la vieja.
 * ============================================================================ */

/* --- 1. Hero de ficha -------------------------------------------------------
 * El diseño de la ficha usa una cabecera de 78px (no los 86 de `.wp-hero` base) y
 * un mínimo de 620px. Antes esto viajaba como `style=` inline dentro del widget;
 * la plantilla no lleva estilos inline, así que vive aquí como variante. */
.wp-hero--tour{
	height:calc(100vh - 78px);
	height:calc(100svh - 78px);
	min-height:620px;
}

/* La `.wp-bookbar` es `position:fixed;bottom:0` y NADA reservaba su hueco dentro del hero,
 * así que se comía los últimos px de su contenido — justo donde el diseño pone los badges.
 * Medido, e idéntico en las 21 fichas (incluida la que ya estaba "bien"): los badges iban de
 * y=821 a 863 y la barra empezaba en 818 → **45px tapados**, a 1440×900 y a 1440×1080 igual.
 *
 * `.wp-hero__copy` alinea abajo (`justify-content:flex-end`), así que la corrección es
 * reservarle el alto de la barra como padding inferior: el contenido sube y la foto sigue a
 * pantalla completa. Alturas MEDIDAS de la barra (no las del diseño) + los 46px de aire que
 * el hero ya tenía:
 *     <600px    barra 146px → 192px
 *     600-859px barra 107px → 153px
 *     ≥860px    barra  82px → 128px
 * Acotado a `.wp-hero--tour`: el hero de las páginas normales no lleva barra fija. */
/* El `min-height:700px` de las tres reglas NO es decorativo: es el límite hasta donde este
 * arreglo se puede aplicar sin causar un daño peor, y está medido.
 *
 * Por debajo de ~700px de ventana el contenido del hero SENCILLAMENTE NO CABE: en un móvil de
 * 375×667, ventana − cabecera (78) − barra (146) deja 443px útiles y el bloque de migas + enlace
 * de vuelta + kicker + H1 + badges mide 467px. Al forzar ahí la reserva, el solape de abajo
 * desaparecía pero las migas se metían debajo de la cabecera: 39px tapados a 375×667 y 62px a
 * 390×640. Cambiar un recorte por otro no es arreglarlo.
 *
 * Así que la reserva se aplica donde hay sitio, y por debajo se deja el comportamiento que ya
 * tenía el diseño — sin regresión nueva. Ese tramo corto queda declarado en el informe. */
@media (min-height:700px){ .wp-hero--tour .wp-hero__copy{padding-bottom:128px} }
@media (min-height:700px) and (max-width:859px){ .wp-hero--tour .wp-hero__copy{padding-bottom:153px} }
@media (min-height:700px) and (max-width:599px){ .wp-hero--tour .wp-hero__copy{padding-bottom:192px} }

/* --- 1-bis. Que se lea el texto pequeño del hero (ronda 1 del cliente, punto 4) -----
 * "Letras en blanco en SAGRADA FAMILIA PANORAMIC — ¿se pueden quitar? ¿O poner más oscuras
 * o con un fondo atrás para que se lea bien? Ese tour es un ejemplo pero hay varios tours
 * que cuesta leer lo que hay arriba del título principal."
 *
 * Es un defecto de PLANTILLA, no de una ficha: el texto de 11px iba en blanco al 70 %
 * directamente sobre la foto, y sobre cielo claro (Barcelona From Above, Montserrat,
 * Costa Brava, Collioure) se borra. Dos medidas, y las dos hacen falta:
 *   a) MENOS texto: el widget ya no pinta "← Back to <categoría>" ni el kicker, que
 *      repetían las migas y el título. La regla `.wp-hero__back` se va con él — era su
 *      único usuario en todo el proyecto (verificado por grep). La vuelta a la categoría
 *      sigue viva en la 2ª miga, que apunta a la MISMA url (`wpc_tour_category_link()`).
 *   b) FONDO para el que queda: viñeta direccional detrás de la columna de texto.
 *
 * Por qué una viñeta y no subir el `.wp-hero__scrim`: el scrim cubre el hero ENTERO y ya
 * se bajó a propósito en la ola 26.2 ("el velo azul que apagaba el vídeo"). Volver a subirlo
 * desharía ese trabajo y apagaría la foto de las 26 fichas. La viñeta oscurece sólo la
 * esquina donde vive el texto y deja limpio el resto — que es lo que pidió el cliente.
 *
 * No se usa `filter:brightness()` sobre la imagen (apagaría la foto entera y, además, en
 * este hero el filtro lo impone `@keyframes wpHeroIn`, ver extras §26.3) ni `text-shadow`
 * fuerte: la sombra es de apoyo, el contraste lo pone el degradado. */

/* El degradado cuelga de `.wp-hero__veil`, el envoltorio que el widget pone alrededor del
 * texto. Es el ÚNICO hijo de `.wp-hero__copy` (flex column, `justify-content:flex-end`), así
 * que se ciñe al contenido real: la viñeta se deriva del texto y no se calibra a ojo por
 * breakpoint. Colgarla de `.wp-hero__copy` —que mide el hero ENTERO por `height:100%`— fue el
 * primer intento y se descartó MIDIENDO: a 360×740 el bloque de texto llega al 87,6 % del alto
 * del hero, así que la banda que lo cubriera habría teñido el hero de arriba abajo, que es
 * justo lo que el encargo prohíbe ("que no tape la foto en móvil").
 *
 * `z-index:-1` sin que `.wp-hero__veil` abra contexto de apilado (no lleva z-index): el
 * pseudo-elemento sube hasta el contexto de `.wp-hero__copy` (`position:relative;z-index:7`) y
 * se pinta por debajo de TODO el texto de ese contexto y por encima de lo que queda fuera —
 * foto/vídeo (`__media`), velo (`__scrim`), barras (z-index 5) y telón (z-index 6). Es
 * exactamente lo pedido: detrás del texto, delante de la foto, sin reordenar nada. */
/* Se ancla en `body.single-tour` y NO en `.wp-hero--tour` a propósito. `.wp-hero--tour` lo pone
 * este widget; si alguna ficha —la de Sagrada Família tiene un montaje a mano documentado en el
 * propio widget— se pintara con otro hero, se quedaría fuera del arreglo, y precisamente esa es
 * la ficha que puso el cliente de ejemplo. Con `body.single-tour` la mejora tipográfica de las
 * migas alcanza a cualquier hero de una ficha; la viñeta necesita además el `.wp-hero__veil` que
 * imprime este widget, así que ESO sí hay que verificarlo ficha a ficha tras desplegar.
 * `body.single-tour` acota además a las fichas: esta hoja se encola en TODO el sitio (la lista de
 * functions.php no filtra por página), así que un selector sin acotar habría tocado home y demás. */
body.single-tour .wp-hero__veil{position:relative}
body.single-tour .wp-hero__veil::before{
	content:"";
	position:absolute;
	z-index:-1;
	pointer-events:none;
	/* Sangra MUCHO por arriba y por abajo, y hasta el borde del hero por la izquierda. La
	 * sangría generosa no es holgura: es donde ocurren los desvanecidos de la máscara, para
	 * que el texto entero quede en la zona plana y el borde de la viñeta no se vea. Con una
	 * sangría corta (46/38px la primera versión) el desvanecido tenía que hacerse en 30px y
	 * la viñeta se leía como una PLACA rectangular — se vio en la captura, no en el CSS. */
	top:-140px;
	bottom:-120px;
	left:calc(var(--wp-gutter) * -1);
	right:0;
	/* Eje horizontal: navy del diseño (#10395F) al 82 % en el borde izquierdo, PLANO hasta el
	 * 58 % y transparente al 88 %. El 58 % no es estético, es el suelo de contraste: medido,
	 * el texto pierde AA por debajo del ~70 % de viñeta y la miga amarilla —la más exigente—
	 * cae justo en 4,51:1 ahí. Las migas van capadas al 54 % del ancho (abajo), así que su
	 * final SIEMPRE cae dentro del tramo plano, en cualquier viewport.
	 * El H1 y los badges no necesitan ayuda: son blancos enormes sobre el scrim. */
	/* 2026-09-18 — dos paradas intermedias más (Pedro: "no tengo claro que haya sido la mejor
	 * solución" sobre una foto de cocina con vapor). Los extremos NO cambian —siguen siendo
	 * los mismos .82/.80/.40/0 en los mismos 0/58/76/88%, así que el contraste AA verificado
	 * sigue siendo válido tal cual—; lo que se añade son paradas A MEDIO CAMINO de cada tramo
	 * para que el ojo lea una curva continua en vez de dos rectas con un codo en 58% y otro en
	 * 76%. Sobre fondos con su propio brillo irregular (como el vapor de esta foto), un codo
	 * de degradado coincidiendo con un borde de luz de la propia imagen se lee como un filo
	 * recto — con más paradas, la transición se reparte y ese efecto se atenúa. */
	background:linear-gradient(to right,
		rgba(16,57,95,.82) 0%,
		rgba(16,57,95,.81) 29%,
		rgba(16,57,95,.80) 58%,
		rgba(16,57,95,.60) 67%,
		rgba(16,57,95,.40) 76%,
		rgba(16,57,95,.18) 82%,
		rgba(16,57,95,0)   88%);
	/* Eje vertical por MÁSCARA y no por un 2º degradado apilado: dos capas translúcidas se
	 * SUMAN (1-(1-a)(1-b)) y la esquina inferior izquierda se iba a .92 — una placa, no una
	 * viñeta. La máscara MULTIPLICA, que es lo que se quiere. Los tramos de desvanecido caen
	 * dentro de la sangría, así que el texto queda entero en la zona plana.
	 * Se afloja en el borde de abajo a propósito: ahí el `.wp-hero__scrim` ya aporta ~.45 de
	 * navy y sumados darían un bloque sólido bajo los badges.
	 * Si un navegador no soporta `mask-image`, la viñeta se queda a opacidad plena en toda la
	 * caja: cubre de más, nunca de menos — el fallo cae del lado legible. */
	/* 2026-09-18 — CAUSA RAÍZ de "Costa Brava" (título de 2-3 líneas: "Tarragona, Girona and
	 * beyond"): las paradas de esta máscara estaban en PORCENTAJE del alto de la caja, y esa
	 * caja crece con el número de líneas del H1 (no tiene alto fijo). El 22%/78% se ajustó
	 * mirando un título de 1 línea; con 2-3 líneas la caja es mucho más alta, así que ese
	 * mismo 22% deja de representar los 140px de sangría superior — pasa a ser una franja de
	 * MUCHOS más píxeles, y el tramo plano (opaco) empieza mucho más abajo de lo previsto.
	 * Resultado medido en producción: las migas y la mitad de arriba del H1 caían todavía
	 * dentro del desvanecido, casi sin viñeta, sobre un cielo azul claro — ilegibles.
	 * Arreglo: las paradas van en PÍXELES ATADOS a la sangría real (140px arriba / 120px
	 * abajo, las mismas cifras de `top`/`bottom` de arriba), no en porcentaje. Así el tramo
	 * opaco cubre SIEMPRE el contenido real del `.wp-hero__veil` sea cual sea su alto —a 1
	 * línea, a 2 o a 3— porque el desvanecido queda encerrado en la sangría por definición,
	 * no por una proporción que dejaba de cumplirse en el caso largo. */
	-webkit-mask-image:linear-gradient(to top,
		transparent 0px, #000 120px, #000 calc(100% - 140px), transparent 100%);
	mask-image:linear-gradient(to top,
		transparent 0px, #000 120px, #000 calc(100% - 140px), transparent 100%);
}

/* Móvil y tablet: las migas se parten en dos líneas y llegan al ~74 % del ancho, así que la
 * zona plana se ensancha hasta el 74 %. Dos ajustes más, los dos vistos en captura y no en el
 * CSS: la caja sangra también por la DERECHA hasta el borde del hero (con `right:0` se cortaba
 * justo en el gutter y dejaba una costura vertical visible), y el degradado no llega a
 * transparente — se queda en .22, porque en un ancho de móvil no hay sitio para desvanecer
 * del 80 % al 0 % sin que se vea el escalón. El borde lo difumina la máscara vertical. */
@media (max-width:820px){
	body.single-tour .wp-hero__veil::before{
		left:calc(var(--wp-gutter-mobile) * -1);
		right:calc(var(--wp-gutter-mobile) * -1);
		background:linear-gradient(to right,
			rgba(16,57,95,.82) 0%,
			rgba(16,57,95,.80) 74%,
			rgba(16,57,95,.50) 92%,
			rgba(16,57,95,.22) 100%);
	}
}

/* Las migas: 12.5px (eran 11.5) y blanco al 90 % (era 70 %). Sobre el 80 % de navy de la
 * viñeta dan 6,32:1 contra el PEOR fondo posible (blanco puro) y 5,75:1 la miga amarilla —por
 * encima del 4,5:1 de AA para texto normal, que es el listón que toca porque 12.5px en
 * mayúsculas no llega a "texto grande". La sombra es de seguro, no entra en ese número.
 * Especificidad 0,2,0 / 0,2,1: gana a `.wp-hero__meta-row` y `.wp-hero__meta-row a` de
 * `walking-planets-extras.css` §19.16 sin `!important`, y esta hoja se encola después. */
body.single-tour .wp-hero__meta-row{
	font-size:12.5px;
	color:rgba(255,255,255,.9);
	text-shadow:0 1px 3px rgba(6,24,44,.55);
	/* El tope de ancho es lo que hace que la garantía de contraste sea ESTRUCTURAL y no
	 * dependa del título del tour: la miga más larga del catálogo ("Home / Eat & drink like
	 * a local / Catalonia, A Sensory Remix") mide ~580px a 12.5px de Space Mono y a 1100px
	 * de viewport se habría metido en la zona ya desvanecida del degradado. Con el tope,
	 * `flex-wrap:wrap` (que ya trae `.wp-hero__meta-row`) la parte en dos líneas —como ya
	 * hace en móvil— en vez de dejar el final del texto sin fondo. */
	max-width:54%;
}
body.single-tour .wp-hero__meta-row a{color:rgba(255,255,255,.9)}
body.single-tour .wp-hero__meta-row a:hover,
body.single-tour .wp-hero__meta-row a:focus-visible{color:var(--wp-cyan)}

/* El tope móvil va AQUÍ y no junto al degradado de arriba: una media query NO suma
 * especificidad, así que con las dos reglas a 0,2,0 gana la que se declara después. Escrito
 * tras el tope de escritorio, no antes — es la misma trampa que ya documenta este fichero
 * para `.wp-map__strip`. */
@media (max-width:820px){
	body.single-tour .wp-hero__meta-row{max-width:78%}
}

/* --- 2. Tarjeta de petición (BLOQUE-tour-sin-eframe.md §1) -------------------
 * Mismo marco que la tarjeta de reserva: blanco, sombra larga, sticky a 100px.
 * Reutiliza `.wp-ticket-card` (que ya trae fondo, color y sombra) y añade lo suyo. */
.wp-ask{display:block}
.wp-ask__head{padding:22px 22px 0}
.wp-ask__kicker{
	display:block;font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.12em;
	text-transform:uppercase;color:var(--wp-cyan-ink);margin-bottom:10px;
}
.wp-ask__title{
	display:block;font-family:var(--wp-display);font-size:32px;line-height:1;
	text-transform:uppercase;color:var(--wp-navy);margin-bottom:12px;
}
.wp-ask__intro{margin:0;font-size:15px;line-height:1.55;color:var(--wp-ink-soft)}

.wp-ask__body{display:grid;gap:16px;padding:22px}
.wp-ask__field{display:flex;flex-direction:column;gap:8px}
.wp-ask__label{
	font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--wp-ink-soft);
}

/* Especificidad doble a propósito: `.elementor-widget-container input` y el CSS por
 * página de Elementor pisan un selector de una sola clase. Sin `!important`. */
.wp-ask .wp-ask__input.wp-ask__input{
	width:100%;box-sizing:border-box;
	border:1.5px solid rgba(14,52,87,.25);border-radius:0;
	background:var(--wp-white);color:var(--wp-navy);
	font-family:var(--wp-body);font-size:15px;
	padding:13px 14px;min-height:48px;
}
.wp-ask .wp-ask__input.wp-ask__input:focus-visible{
	outline:2px solid var(--wp-cyan);outline-offset:1px;border-color:var(--wp-cyan);
}
.wp-ask__input::placeholder{color:rgba(58,80,104,.6)}

.wp-ask__langs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wp-ask .wp-ask__lang.wp-ask__lang{
	appearance:none;cursor:pointer;min-height:44px;
	border:1.5px solid rgba(14,52,87,.25);border-radius:0;
	background:var(--wp-white);color:var(--wp-ink-soft);
	font-family:var(--wp-mono);font-size:12.5px;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;padding:11px 8px;
}
/* El reset del tema padre (Hello Elementor) pinta TODOS los botones de rosa en
 * hover/focus con `button:hover,button:focus{background:#CC3366}` (especificidad
 * 0,1,1). Por eso los estados van declarados explícitamente y con dos clases
 * (0,2,0 gana): sin esto, el selector de idioma se pone rosa al pasar por encima —
 * es el bug ya pagado en este proyecto (CLAUDE.md §5-bis). */
.wp-ask .wp-ask__lang.wp-ask__lang:hover,
.wp-ask .wp-ask__lang.wp-ask__lang:focus-visible{
	background:var(--wp-white);color:var(--wp-navy);border-color:var(--wp-cyan);
}
.wp-ask .wp-ask__lang.wp-ask__lang.is-active,
.wp-ask .wp-ask__lang.wp-ask__lang.is-active:hover,
.wp-ask .wp-ask__lang.wp-ask__lang.is-active:focus-visible{
	background:var(--wp-cyan);color:var(--wp-navy);border-color:var(--wp-cyan);
}

.wp-ask .wp-ask__submit.wp-ask__submit{
	appearance:none;display:block;width:100%;text-align:center;
	border:0;border-radius:0;padding:18px;
	font-family:var(--wp-mono);font-size:13px;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;
	background:var(--wp-navy);color:var(--wp-white);cursor:pointer;
	transition:background .2s var(--wp-ease);
}
.wp-ask .wp-ask__submit.wp-ask__submit:hover,
.wp-ask .wp-ask__submit.wp-ask__submit:focus-visible{background:var(--wp-cyan);color:var(--wp-navy)}
/* Estado deshabilitado: es el estado INICIAL de la tarjeta y el que más se ve.
 * `[disabled]` añade especificidad de atributo, así que gana al hover de arriba. */
.wp-ask .wp-ask__submit.wp-ask__submit[disabled],
.wp-ask .wp-ask__submit.wp-ask__submit[disabled]:hover,
.wp-ask .wp-ask__submit.wp-ask__submit[disabled]:focus-visible{
	background:rgba(14,52,87,.18);color:rgba(14,52,87,.5);cursor:not-allowed;
}

.wp-ask__note{
	margin:12px 0 0;font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.1em;
	line-height:1.6;color:var(--wp-cyan-ink);
}
.wp-ask__pending{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--wp-ink-soft)}

.wp-ask__foot{
	display:flex;flex-direction:column;gap:8px;
	padding:0 22px 22px;font-size:13px;line-height:1.5;color:var(--wp-ink-soft);
}
.wp-ask__foot a{color:var(--wp-cyan-ink)}
.wp-ask__foot a:hover,.wp-ask__foot a:focus-visible{color:var(--wp-navy)}

/* Los dos enlaces de bajo la tarjeta van FUERA del marco blanco, sobre el fondo
 * navy de la sección: por eso su color es el del texto claro, no el de la tarjeta. */
.wp-ask__links{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.wp-ask__links a{
	display:flex;align-items:center;min-height:44px;
	font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
	color:rgba(255,255,255,.65);
}
.wp-ask__links a:hover,.wp-ask__links a:focus-visible{color:var(--wp-cyan)}
.wp-ask__status-note{
	margin:18px 0 0;font-family:var(--wp-mono);font-size:11px;line-height:1.6;
	color:rgba(255,255,255,.42);
}

/* --- 3. Mapa del punto de encuentro (HANDOFF-04 §9.2) ----------------------- */
.wp-map{display:flex;flex-direction:column}
.wp-map__frame{position:relative;aspect-ratio:4/3;background:var(--wp-navy-panel);overflow:hidden}
.wp-map__embed{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.9)}
/* 2026-09-10 (Pedro): la etiqueta iba arriba-IZQUIERDA (asi esta en el .dc.html de Scarlet),
   pero ahi cae justo encima del popup de Google Maps — tapaba el nombre del sitio, la
   valoracion y el boton de "como llegar", dejando la interfaz del mapa inservible. Se mueve a
   arriba-DERECHA, que en el embed de Google esta libre (los controles nativos van abajo-dcha).
   Es una DESVIACION CONSCIENTE del diseno por usabilidad: anotada para devolversela a Scarlet. */
.wp-map__pin{
	position:absolute;top:16px;right:16px;z-index:2;pointer-events:none;
	background:var(--wp-yellow);color:var(--wp-navy);padding:10px 14px;
	font-family:var(--wp-mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;
}
.wp-map__strip{
	display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
	background:var(--wp-navy-panel);padding:14px 18px;
	font-family:var(--wp-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
	color:rgba(255,255,255,.7);
}
.wp-map__brand{color:var(--wp-cyan)}
/* Suelo de legibilidad en móvil (extras.css §40). Va AQUÍ y no allí porque `page-tour.css` se
   encola DESPUÉS de `walking-planets-extras.css` (functions.php lo declara como dependencia):
   con la misma especificidad, gana la hoja que se carga más tarde, y una media query no suma
   especificidad. Es la trampa que dejó esta tira a 11px cuando las otras 18 clases ya habían
   subido. */
@media (max-width:860px){
  .wp-map__strip{font-size:11.5px}
}

/* --- 3-ter. Hueco declarado de la galería -----------------------------------
 * El marcador rayado que el propio diseño usa cuando falta material
 * (`BLOQUE-tour-sin-eframe.md` §5: "tercero = marcador rayado [ foto pendiente /
 * ruta nocturna ]"). Ocupa la celda entera, así que la rejilla no se descuadra, y
 * dice EN PANTALLA qué foto falta: aviso para el equipo y lista de la compra para el
 * cliente. Sobre fondo claro, que es donde vive la galería (`.wp-section--light`). */
/* El `background` va OPACO y con el blanco de la sección DEBAJO de las rayas, no solo
 * las rayas: `.wp-gallery-grid__item` pinta su propio fondo navy y, con un degradado
 * semitransparente encima, el texto navy quedaba navy sobre navy — ilegible. Se vio
 * mirando la captura, no leyendo el CSS: la sección es blanca (medido,
 * `rgb(255,255,255)`) pero la CELDA no lo es. */
.wp-gallery-pending{
	position:absolute;inset:0;
	display:flex;align-items:center;justify-content:center;
	padding:24px;text-align:center;
	color:var(--wp-navy);
	border:1px dashed rgba(14,52,87,.4);
	background-color:var(--wp-white);
	background-image:repeating-linear-gradient(135deg,
		rgba(14,52,87,.05) 0 10px,
		rgba(14,52,87,.12) 10px 20px);
}
.wp-gallery-pending span{
	font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.1em;line-height:1.7;
	text-transform:uppercase;max-width:28ch;
}

/* --- 3-quater. Aviso de "reseñas de ejemplo" -------------------------------
 * Va bajo las citas, sobre la franja cian (`.wp-section--cyan`), así que el color
 * es la tinta oscura y no el blanco. Discreto pero legible: un aviso que no se lee
 * no está avisando de nada. Se retira vaciando el campo del metabox. */
.wp-reviews-note{
	margin:28px 0 0;
	font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.1em;line-height:1.7;
	color:rgba(14,52,87,.75);
}

/* --- 3-quinquies. Bloque "Combine it" (HANDOFF-04 §9.1) --------------------
 * Medidas literales del diseño v2 (`design/v2/Tour Sagrada Familia.dc.html` L158-162):
 * marco de 1px cian, padding 28/30, 48px de aire abajo, ancho máximo 62ch, kicker mono
 * 11.5 amarillo, H3 Anton 26px, párrafo 16.5 y enlace de 44px de alto. Vive dentro de la
 * columna de texto, sobre el navy de la sección.
 * Existe porque esta oferta —que el cliente pidió por su nombre— había quedado sólo como
 * una pregunta PLEGADA del acordeón de FAQ y sin CTA (QA independiente, P1-3). */
.wp-combine{
	border:1px solid var(--wp-cyan);
	padding:28px 30px;margin:0 0 48px;max-width:62ch;
}
.wp-combine__kicker{
	font-family:var(--wp-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--wp-yellow);margin-bottom:14px;
}
.wp-combine__title{
	margin:0 0 12px;
	font-family:var(--wp-display);font-weight:400;font-size:26px;line-height:1.05;
	text-transform:uppercase;
}
.wp-combine__text{
	margin:0 0 16px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.78);
}
/* 44px de alto: objetivo táctil, y estaba explícito en el .dc.html. */
.wp-combine__cta{
	display:inline-flex;align-items:center;min-height:44px;
	font-family:var(--wp-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--wp-cyan);
}
.wp-combine__cta:hover,.wp-combine__cta:focus-visible{color:var(--wp-yellow)}

/* --- 3-bis. FAQ: la pregunta tiene que poder encogerse ----------------------
 * Encontrado midiendo a 360px, no leyendo el CSS: la pregunta "We're a group of
 * thirty. Does it still work?" medía 330px dentro de una fila de 291 y empujaba el
 * "+" hasta x=381 → 21px de scroll horizontal en TODA la página. Las otras cuatro
 * preguntas medían exactamente 291 (el ancho disponible), así que el problema solo
 * aparece con la pregunta más larga del catálogo: es el caso clásico de un hijo
 * flex con `min-width:auto`, que se niega a bajar de su contenido mínimo.
 *
 * Acotado a la variante de petición (`:has(.wp-ask)`) porque la ficha de Sagrada
 * Família NO usa esta plantilla y sus cinco preguntas ya caben (291px las cinco,
 * medidas): aplicarlo a todo el sitio sería cambiar el cálculo de un bloque que hoy
 * está bien "por si acaso". */
body.single-tour:has(.wp-ask) .wp-faq__q > span:first-child{
	min-width:0;
	overflow-wrap:break-word;
}

/* --- 4. Barra fija móvil sobre el pie ---------------------------------------
 * `BLOQUE-tour-sin-eframe.md` §2: la `.wp-bookbar` es `position:fixed` y tapa el
 * cierre del pie. functions.php ya reserva hueco (96px, y 136px por debajo de 600),
 * pero esos números se midieron sobre la barra de la ficha de Sagrada Família, que
 * lleva UNA línea a la izquierda. La variante de petición lleva DOS ("Price on
 * request" + "Quoted per group · answer within 24h") y es más alta, así que en dos
 * bandas de ancho el hueco reservado se queda corto.
 *
 * Alturas MEDIDAS con navegador real sobre /tour/stories-after-dark/ (no las del
 * diseño), frente al hueco que reserva hoy functions.php:
 *     360-430px → barra 146px · hueco 136px → faltan 10px
 *     480px     → barra 119px · hueco 136px → sobra, OK
 *     599px     → barra 107px · hueco 136px → sobra, OK
 *     600-768px → barra 107px · hueco  96px → faltan 11px
 *     ≥860px    → barra  82px · hueco  96px → sobra, OK
 * Se corrigen sólo las dos bandas que fallan, con el mismo margen de holgura (~14px)
 * que ya usaba la regla original.
 *
 * El selector va sobre `<body>`, NO sobre `.site-main` ni `[data-page]`: esta
 * plantilla no renderiza ninguno de los dos (comprobado en el DOM real — apuntar a
 * `.site-main` fue el primer intento y no aplicaba nada, en silencio y sin error).
 * `:has(.wp-ask)` acota a la variante de petición para no sobre-acolchar la ficha de
 * Sagrada Família. Especificidad (0,2,1), suficiente para ganar al
 * `body.single-tour` (0,1,1) que functions.php imprime antes de esta hoja. */
@media (max-width:599px){
	body.single-tour:has(.wp-ask){padding-bottom:160px}
}
@media (min-width:600px) and (max-width:859px){
	body.single-tour:has(.wp-ask){padding-bottom:120px}
}

/* ================= MODOS DE RESERVA + TARJETA ONLINE (2026-09-09, e-frame) ================
 * Selector de modalidad (Private/Cruise/Students) y tarjeta de reserva online. Mismo
 * lenguaje que .wp-ask: panel blanco, borde navy, mono en mayusculas. Los tabs son <a> y
 * Hello Elementor pinta los <a> en rosa (#c36) con su hover: doble clase (0,3,0) para
 * ganar, misma receta que .wp-ask__lang arriba.
 * ========================================================================= */
.wp-modes{display:flex;gap:0;margin-bottom:14px;border:1.5px solid rgba(14,52,87,.25)}
.wp-modes .wp-modes__tab.wp-modes__tab{
	flex:1;text-align:center;padding:12px 6px;text-decoration:none;
	font-family:var(--wp-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	background:var(--wp-white);color:var(--wp-ink-soft);border-right:1.5px solid rgba(14,52,87,.25)}
.wp-modes .wp-modes__tab.wp-modes__tab:last-child{border-right:0}
.wp-modes .wp-modes__tab.wp-modes__tab:hover,
.wp-modes .wp-modes__tab.wp-modes__tab:focus-visible{background:#eef4f8;color:var(--wp-navy);text-decoration:none}
.wp-modes .wp-modes__tab.wp-modes__tab.is-active,
.wp-modes .wp-modes__tab.wp-modes__tab.is-active:hover,
.wp-modes .wp-modes__tab.wp-modes__tab.is-active:focus-visible{background:var(--wp-yellow);color:var(--wp-navy);border-color:var(--wp-yellow)}
/* 2026-09-10 (Scarlet, 10:28): «que el que este pulsado private/cruise/students se vea en
   amarillo arriba». Antes la activa era navy con texto blanco; ahora amarillo de marca con
   texto navy — el mismo par de colores que usa el resto de destacados de la web y con
   contraste de sobra para texto pequeño en mayusculas. */
.wp-online{border:1.5px solid rgba(14,52,87,.25);background:var(--wp-white);padding:26px 22px}
.wp-online__price{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.wp-online__amount{font-family:var(--wp-display);font-size:34px;line-height:1;font-weight:800;color:var(--wp-navy)}
.wp-online__unit{font-family:var(--wp-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--wp-ink-soft)}
.wp-online__note{margin:12px 0 0;font-family:var(--wp-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--wp-navy)}