/*!
 * ============================================================================
 * TEMA "PLAQUE" -- beauvaisbus.es
 * ============================================================================
 *
 * Capa visual del sitio. Se carga DESPUES de site.min.css y solo redefine
 * color, tipografia, forma y ritmo: no toca ni el HTML ni el contenido. Esa es
 * la regla de este fichero -- si algo necesita cambiar el marcado, no va aqui.
 *
 * De donde sale
 * -------------
 * De la senaletica civica de Paris, no del vocabulario "viajes" de siempre.
 * La placa esmaltada verde de las calles parisinas -- la que ve el pasajero
 * literalmente al bajarse del bus en Porte Maillot -- es el unico ornamento
 * del sitio: fondo verde esmalte, doble filete blanco, versalitas condensadas
 * muy espaciadas. Todo lo demas se mantiene callado para que esa pieza sea lo
 * que se recuerda.
 *
 * Piedra de Lutecia para el fondo, esmalte verde para las superficies oscuras
 * y azafran SOLO en tres sitios: el precio, el boton que compra y la columna
 * del bus en la comparativa. Si el azafran aparece en un cuarto sitio, deja de
 * significar "esto es lo importante".
 *
 * El azul se ha retirado por completo, que es lo que mas separa este sitio del
 * anterior: azul corporativo con degradados es exactamente lo que hace
 * cualquier web de traslados al aeropuerto.
 *
 * Forma: el radio baja de 18-22px a 2px y desaparecen las sombras difusas.
 * Las tarjetas se apoyan en un filete de tinta y, cuando hay que destacar una,
 * en una sombra dura sin desenfoque -- impresion, no material design.
 *
 * Tipografia: superfamilia Fira en tres anchos (ver css/fuentes.css). Extra
 * Condensed rotula, Sans lee, Mono da los datos (horas, precios, linea). Es
 * como funciona la senaletica de transporte de verdad.
 *
 * Especificidad: site.min.css usa !important en bastantes reglas, asi que aqui
 * se repite !important solo donde hace falta ganarle. No se ha anadido a todo
 * por costumbre.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Esmalte de las placas de calle de Paris. */
	--pq-vert: #123f34;
	--pq-vert-2: #1b6350;
	--pq-vert-3: #0c2b24;

	/* Piedra de Lutecia (el fondo) y tiza (el papel de las tarjetas). El salto
	   entre las dos es corto a proposito: la tarjeta se separa del fondo por
	   el filete, no por el contraste. */
	--pq-pierre: #f0eee6;
	--pq-pierre-2: #e3e0d5;
	--pq-craie: #e3e0d5;

	/* Tinta: negro con fondo verde, no gris neutro. */
	--pq-encre: #16211d;
	--pq-encre-60: rgba(22, 33, 29, .62);
	--pq-encre-40: rgba(22, 33, 29, .40);
	--pq-filet: rgba(22, 33, 29, .18);
	--pq-filet-fort: rgba(22, 33, 29, .34);

	/* Unico acento calido. Precio, boton de compra, columna ganadora. */
	--pq-safran: #c8891a;
	--pq-safran-clair: #dfa02a;

	--pq-rouge: #a8321f;

	--pq-display: "Fira Sans Extra Condensed", "Fira Sans Condensed", "Arial Narrow", sans-serif;
	--pq-texte: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pq-data: "Fira Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

	--pq-r: 0.5rem;

	/* Sombra dura, sin desenfoque: sello impreso, no elevacion. */
	--pq-ombre: 4px 4px 0 var(--pq-vert);
	--pq-ombre-safran: 4px 4px 0 var(--pq-safran);

	/* Se reescriben tambien las variables que ya usaba el sitio, para las
	   pocas reglas que si tiran de var(). */
	--ink: var(--pq-encre);
	--blue: var(--pq-vert-2);
	--deep: var(--pq-vert);
	--bg: var(--pq-pierre);
	--brand: var(--pq-vert-2);
	--brand2: var(--pq-vert);
	--text: var(--pq-encre);
	--card: var(--pq-craie);
	--line: var(--pq-filet);
	--line2: var(--pq-filet-fort);
	--accent: var(--pq-safran);
	--r-xl: var(--pq-r);
	--r-lg: var(--pq-r);
	--r-md: var(--pq-r);
	--cart-radius: var(--pq-r);
	--cart-border: var(--pq-filet);
	--cart-shadow: none;
	--cart-shadow-hover: none;
	--shadow: none;
	--shadow2: none;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	font-family: var(--pq-texte);
	color: var(--pq-encre);
	background: var(--pq-pierre);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pq-display);
	letter-spacing: -.005em;
	color: var(--pq-vert);
}

/* Los titulares van en el ancho condensado, que a igual altura mete mas
   palabra por linea: en 9 idiomas eso es la diferencia entre un titular de
   una linea y uno de tres (el aleman y el ruso son los que mas crecen). */
h1 { font-weight: 700; line-height: .98; letter-spacing: -.01em; }
h2 { font-weight: 700; line-height: 1.04; }
h3, h4 { font-weight: 600; line-height: 1.1; }

p, li, td, th, label, input, select, textarea, button, a {
	font-family: var(--pq-texte);
}

a { color: var(--pq-vert-2); }
a:hover { color: var(--pq-vert); }

strong, b { font-weight: 600; }

/* Cifras alineadas en columna en todo el sitio: precios, horas y contadores
   dejan de bailar al cambiar de digito. */
.sys-stepper__value,
.sys-totalrow__value,
.sys-total-final,
.price-line strong,
.deal-price,
.pvp,
.now,
.schedule-time,
.bb-footer__phone strong {
	font-family: var(--pq-data);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

/* Foco visible y con el mismo lenguaje que el resto: filete de tinta, no el
   halo azul del navegador. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--pq-safran);
	outline-offset: 2px;
	border-radius: 0;
}

/* ==========================================================================
   3. La placa esmaltada -- el elemento firma
   --------------------------------------------------------------------------
   Fondo verde esmalte, doble filete blanco hacia dentro y versalitas
   condensadas espaciadas. Se aplica a los rotulos que etiquetan algo
   (antetitulo del hero, chips, distintivos de las tarjetas), nunca a un
   titular: la placa nombra un sitio, no cuenta una historia.
   ========================================================================== */

.hero-eyebrow,
.hero-chip,
.paris-chip,
.stop-badge,
.deal-badge,
.exp-badge,
.sys-checkout-step__badge,
.bbp-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--pq-r) !important;
	background: var(--pq-vert) !important;
	color: #fff !important;
	border: 1px solid var(--pq-vert) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 0 0 3px var(--pq-vert) !important;
	backdrop-filter: none !important;
	font-family: var(--pq-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .13em;
	line-height: 1;
	padding: 9px 14px 8px;
	min-height: 0;
}

.hero-eyebrow {
	font-size: 1.02rem !important;
	letter-spacing: .15em !important;
	padding: 11px 18px 10px;
	margin: 0 0 18px !important;
}

.hero-chip,
.paris-chip {
	font-size: .82rem;
	padding: 8px 13px 7px;
}

/* Las pastillas de la comparativa siguen codificando bien/regular/mal, asi que
   conservan su color -- ahi el color es dato, no decoracion. Van en la de
   texto y no en la mono: su contenido es mitad cifra y mitad frase ("1-2
   cambios", "No (variable)"), y en mono las frases se leen como una matricula. */
.bbp-pill {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--pq-texte);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	font-size: .86rem;
	padding: 7px 11px;
}

.bbp-pill--ok { background: var(--pq-vert-2) !important; border-color: var(--pq-vert-2) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 0 0 3px var(--pq-vert-2) !important; }
.bbp-pill--mid { background: var(--pq-safran) !important; border-color: var(--pq-safran) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), inset 0 0 0 3px var(--pq-safran) !important; }
.bbp-pill--warn { background: var(--pq-rouge) !important; border-color: var(--pq-rouge) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 0 0 3px var(--pq-rouge) !important; }

/* Los distintivos de descuento son los unicos en azafran: son una oferta, y
   el azafran significa exactamente eso en este sitio. */
.deal-badge,
.exp-badge {
	background: var(--pq-safran) !important;
	border-color: var(--pq-safran) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), inset 0 0 0 3px var(--pq-safran) !important;
	font-size: .74rem;
	letter-spacing: .08em;
	text-align: center;
	line-height: 1.25;
}

/* ==========================================================================
   4. Cabecera
   ========================================================================== */

.header-top {
	background: var(--pq-vert-3);
	color: #fff;
	font-family: var(--pq-display);
	font-size: .95rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 600;
}

.header-top a,
.header-top__link,
.header-top__text { color: #fff; }
.header-top__link:hover { color: var(--pq-safran-clair); }

.site-header {
	background: var(--pq-craie);
	border-bottom: 1px solid var(--pq-filet);
	box-shadow: none !important;
}

.menu-link,
.menu-a {
	font-family: var(--pq-display);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: var(--pq-vert);
}

.menu-link:hover,
.menu-a:hover { color: var(--pq-safran); }

.sub-menu {
	border: 1px solid var(--pq-filet-fort);
	border-radius: var(--pq-r);
	background: var(--pq-craie);
	box-shadow: var(--pq-ombre);
}

.lang__selector,
.lang__selected {
	border-radius: var(--pq-r);
	font-family: var(--pq-display);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
}

.lang__list {
	border-radius: var(--pq-r);
	border: 1px solid var(--pq-filet-fort);
	box-shadow: var(--pq-ombre);
}

.lang__item.is-current { background: var(--pq-pierre-2); }

.sys_indicador_carrito {
	background: var(--pq-safran) !important;
	color: #fff !important;
	font-family: var(--pq-data);
	font-weight: 700;
}

.mobile-quicklinks {
	background: var(--pq-pierre-2);
	border-bottom: 1px solid var(--pq-filet);
}

.mobile-quicklinks__item {
	font-family: var(--pq-display);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	color: var(--pq-vert) !important;
}

.mobile-quicklinks__item i { color: var(--pq-vert) !important; }

/* ==========================================================================
   5. Heroes
   --------------------------------------------------------------------------
   Se conservan las mismas fotografias; lo que cambia es el velo. Antes iba un
   degradado azul en tres paradas, ahora un verde esmalte plano que deja la
   foto legible por debajo y ata el hero a las placas.
   ========================================================================== */

.home-hero {
	background-image: linear-gradient(180deg, rgba(12, 43, 36, .80), rgba(12, 43, 36, .66)), url("../imagenes/web/img-hero-home.webp") !important;
	background-size: cover !important;
	background-position: center !important;
	border-bottom: 3px solid var(--pq-safran);
}

/* Las cabeceras interiores ya traen su propio velo, que al remapear la paleta
   quedo en verde. Aqui solo se les pone el filete de azafran que cierra por
   abajo todos los campos oscuros del sitio -- superponer un segundo velo
   dejaba la fotografia en negro. */
.bva-hero,
.beauvais-hero,
.paris-hero,
.support-hero {
	position: relative;
	border-bottom: 3px solid var(--pq-safran);
}

.home-hero h1,
.bva-hero h1,
.beauvais-hero h1,
.paris-hero h1,
.hero-content h1,
.paris-hero-content h1 {
	font-family: var(--pq-display);
	font-weight: 700;
	letter-spacing: -.012em !important;
	line-height: .95 !important;
	color: #fff !important;
	text-wrap: balance;
}

.hero-sub,
.paris-hero-content p,
.hero-content p {
	font-family: var(--pq-texte);
	color: rgba(255, 255, 255, .90) !important;
	font-size: 1.06rem;
	line-height: 1.55;
	max-width: 56ch;
}

.hero-alert {
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .26);
	border-left: 3px solid var(--pq-safran);
	border-radius: var(--pq-r);
	color: #fff;
}

/* El contenedor del formulario de reserva llega con estilos en linea desde
   render_formulario_reserva(); !important es la unica forma de ganarles sin
   tocar el PHP. En escritorio site.min.css le pone display:contents, asi que
   el panel que se ve de verdad es .sys-col--left, justo debajo. */
#caja_formulario_beauvais-a02,
[id^="caja_formulario_"] {
	background-color: transparent !important;
	border-radius: var(--pq-r) !important;
}

/* El billete. Es la pieza que hay que rellenar para comprar, la unica que
   lleva la sombra dura en azafran, y por eso es lo que primero pide el ojo
   dentro del hero. */
.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-col--left,
.sys-reserva--compact .sys-col--right {
	background: var(--pq-craie) !important;
	border: 1px solid var(--pq-vert) !important;
	border-radius: var(--pq-r) !important;
	box-shadow: var(--pq-ombre-safran) !important;
	backdrop-filter: none !important;
}

.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-totalcard,
.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-totalpill {
	background: var(--pq-pierre) !important;
	border: 1px solid var(--pq-filet-fort) !important;
	border-radius: var(--pq-r) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}

.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-total-final {
	color: var(--pq-safran) !important;
	font-family: var(--pq-data);
	font-variant-numeric: tabular-nums;
}

.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-phone__link {
	background: rgba(27, 99, 80, .10) !important;
	border: 1px solid var(--pq-filet-fort) !important;
	border-radius: var(--pq-r) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}

/* ==========================================================================
   6. Superficies: tarjetas, avisos, acordeones
   --------------------------------------------------------------------------
   Filete de tinta y nada de sombra difusa. Una tarjeta es papel sobre piedra.
   ========================================================================== */

.price-card,
.deal-card,
.exp-card,
.stop-card,
.schedule-card,
.cancel-card,
.feature,
.map-box,
.bb-acc-item,
.sys-info-block__inner,
.ep-help-item,
.ep-support-box,
.bbp-table,
.bb-callout,
.sys-totalcard,
.sys-row--card {
	border-radius: var(--pq-r) !important;
	background: var(--pq-craie) !important;
	border: 1px solid var(--pq-filet-fort) !important;
	box-shadow: none !important;
}

.deal-card:hover,
.exp-card:hover {
	transform: none !important;
	box-shadow: var(--pq-ombre) !important;
	border-color: var(--pq-vert) !important;
}

.feature { background: var(--pq-craie) !important; }

.feature h4,
.feature strong,
.price-label,
.deal-title,
.exp-card h3,
.stop-title,
.schedule-card__day,
.bb-acc-title,
.sys-info-block__title,
.cancel-header {
	font-family: var(--pq-display);
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--pq-vert);
}

.price-line {
	border-radius: var(--pq-r) !important;
	background: transparent !important;
	border-bottom: 1px solid var(--pq-filet);
}

.price-line strong { color: var(--pq-vert); font-weight: 700; }

/* El precio es dato duro: azafran y en mono, para que sea lo primero que
   encuentra el ojo al escanear la tarjeta. */
.deal-price,
.price-free,
.now {
	color: var(--pq-safran) !important;
	font-weight: 700;
}

.pvp { color: var(--pq-encre-40) !important; }

.deal-meta,
.exp-body p,
.deal-desc,
.stop-desc,
.bb-subtitle,
.sys-desc {
	color: var(--pq-encre-60);
	line-height: 1.6;
}

/* Los avisos se marcan con un filete lateral, no con un fondo de color: el
   fondo de color compite con el azafran del precio. */
.bb-callout,
.sys-info-block__inner,
.schedule-info,
.hero-alert,
.ep-help-alert {
	border-left: 3px solid var(--pq-vert-2) !important;
}

.bb-callout-danger,
.ep-help-alert { border-left-color: var(--pq-rouge) !important; }

.bb-acc-summary {
	font-family: var(--pq-display);
	font-weight: 600;
	font-size: 1.16rem;
	color: var(--pq-vert);
}

.bb-acc-item + .bb-acc-item { margin-top: 8px; }

/* ==========================================================================
   7. El panel de salidas
   --------------------------------------------------------------------------
   Las tarjetas de horario dejan de ser tarjetas blancas y pasan a leerse como
   el panel de salidas de una estacion: campo esmaltado, horas en mono y
   alineadas. Aqui el tratamiento si dice algo cierto del contenido -- son
   horas de salida, y asi es como se publican las horas de salida.
   ========================================================================== */

.schedule-card {
	background: var(--pq-vert) !important;
	border-color: var(--pq-vert) !important;
	overflow: hidden;
}

.schedule-card__head {
	border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
	padding-bottom: 8px;
}

.schedule-card__day {
	color: #fff !important;
	font-family: var(--pq-display);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 1rem;
	font-weight: 600;
}

.schedule-card__times {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.schedule-time {
	background: rgba(255, 255, 255, .07) !important;
	border: 1px solid rgba(255, 255, 255, .20) !important;
	border-radius: var(--pq-r) !important;
	color: #fff !important;
	font-family: var(--pq-data);
	font-weight: 500;
	letter-spacing: .02em;
	padding: 6px 10px;
}

.schedule-time--empty {
	color: rgba(255, 255, 255, .45) !important;
	border-style: dashed !important;
	background: transparent !important;
}

.schedule-title,
.stops-title,
.bbp-compare__title,
.bb-title,
.pricing-head h2,
.bundle-head h2,
.paris-intro h2 {
	font-family: var(--pq-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	letter-spacing: -.012em;
	color: var(--pq-vert);
	line-height: 1.02;
}

.schedule-route {
	font-family: var(--pq-display);
	text-transform: uppercase;
	letter-spacing: .11em;
	font-weight: 600;
	color: var(--pq-vert-2) !important;
	font-size: 1rem;
}

/* ==========================================================================
   8. Comparativa
   --------------------------------------------------------------------------
   La tabla ya decia que gana el bus; ahora el color lo dice tambien. El
   azafran marca la columna ganadora y es el mismo azafran del precio y del
   boton de compra -- una sola idea repetida, no tres colores distintos.
   ========================================================================== */

.bbp-table { overflow: hidden; }

.bbp-table__head {
	background: var(--pq-vert) !important;
	font-family: var(--pq-display);
	text-transform: uppercase;
	letter-spacing: .1em;
}

.bbp-table__head .bbp-table__cell {
	background: var(--pq-vert) !important;
	color: #fff !important;
	font-family: var(--pq-display);
	font-weight: 600;
	letter-spacing: .1em;
}

.bbp-table__cell {
	border-color: var(--pq-filet) !important;
	font-size: .96rem;
}

.bbp-table__cell--crit {
	font-weight: 600;
	color: var(--pq-vert);
}

.bbp-table__cell--best {
	background: rgba(200, 137, 26, .12) !important;
	color: var(--pq-vert) !important;
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--pq-safran);
}

.bbp-table__cell--bestHead {
	background: var(--pq-safran) !important;
	color: #fff !important;
}

.bbp-tableScroll { border-radius: var(--pq-r); }

/* ==========================================================================
   9. Botones
   --------------------------------------------------------------------------
   Dos niveles y nada mas. Solido azafran = compra o avanza. Filete verde =
   consulta. El hover no levanta la pieza con sombra difusa: la desplaza un
   pixel contra su sombra dura, como un sello al apoyarse.
   ========================================================================== */

.sys-btn-style_1,
.sys-btn-pay,
.cta-primary,
.deal-btn,
.exp-btn,
.horarios-button,
.cta-simple-btn,
.map-btn,
.ep-help-btn-primary,
.bb-cookies__btn--aceptar,
.sys-btn-style_3 {
	border-radius: var(--pq-r) !important;
	font-family: var(--pq-display) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: 1.02rem;
	background: var(--pq-safran) !important;
	color: #fff !important;
	border: 1px solid var(--pq-safran) !important;
	box-shadow: none !important;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.sys-btn-style_1:hover,
.sys-btn-pay:hover,
.cta-primary:hover,
.deal-btn:hover,
.exp-btn:hover,
.horarios-button:hover,
.cta-simple-btn:hover,
.map-btn:hover,
.ep-help-btn-primary:hover,
.bb-cookies__btn--aceptar:hover,
.sys-btn-style_3:hover {
	background: var(--pq-vert) !important;
	border-color: var(--pq-vert) !important;
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--pq-safran) !important;
}

.cta-secondary,
.ep-help-btn-ghost,
.bb-cookies__btn--rechazar {
	border-radius: var(--pq-r) !important;
	font-family: var(--pq-display) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .09em;
	background: transparent !important;
	color: var(--pq-vert) !important;
	border: 1.5px solid var(--pq-vert) !important;
	box-shadow: none !important;
	transition: background .12s ease, color .12s ease;
}

.cta-secondary:hover,
.ep-help-btn-ghost:hover,
.bb-cookies__btn--rechazar:hover {
	background: var(--pq-vert) !important;
	color: #fff !important;
}

/* Sobre campo oscuro el boton de filete se dibuja en blanco. */
.horarios-cta .cta-secondary,
.beauvais-cta-section .cta-secondary {
	color: #fff !important;
	border-color: rgba(255, 255, 255, .75) !important;
}

.horarios-button,
.horarios-cta .horarios-button {
	background: #fff !important;
	color: var(--pq-vert) !important;
	border-color: #fff !important;
}

.horarios-cta .horarios-button:hover {
	background: var(--pq-safran) !important;
	color: #fff !important;
	border-color: var(--pq-safran) !important;
	box-shadow: 3px 3px 0 rgba(255, 255, 255, .5) !important;
}

/* El boton que reserva desde la home lo pinta una regla muy concreta de
   site.min.css (.home-form-wrap [id^=sys_caja_reserva_paso1_] ...) y con
   !important, asi que hay que igualarle la especificidad. Es el boton mas
   importante del sitio: si este se queda azul, no ha cambiado nada. */
.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-actions .sys-btn,
.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-actions .w-btn {
	background: var(--pq-safran) !important;
	border: 1px solid var(--pq-safran) !important;
	border-radius: var(--pq-r) !important;
	color: #fff !important;
	font-family: var(--pq-display) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .09em;
	box-shadow: none !important;
}

.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-actions .sys-btn:hover,
.home-form-wrap [id^="sys_caja_reserva_paso1_"] .sys-actions .w-btn:hover {
	background: var(--pq-vert) !important;
	border-color: var(--pq-vert) !important;
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--pq-safran) !important;
}

/* Sobre el campo oscuro del aviso de cookies el boton de filete se dibuja en
   blanco; en verde sobre casi negro no se leia. */
.bb-cookies__btn--rechazar {
	color: #fff !important;
	border-color: rgba(255, 255, 255, .70) !important;
}

.bb-cookies__btn--rechazar:hover {
	background: #fff !important;
	color: var(--pq-vert-3) !important;
}

.sys-btn-pay.is-disabled,
.sys-btn-style_1:disabled {
	background: var(--pq-pierre-2) !important;
	color: var(--pq-encre-40) !important;
	border-color: var(--pq-filet-fort) !important;
}

/* ==========================================================================
   10. Bandas de llamada a la accion
   ========================================================================== */

.horarios-cta,
.beauvais-cta-section,
.cta-simple {
	background: var(--pq-vert) !important;
	border-top: 3px solid var(--pq-safran);
	border-bottom: 3px solid var(--pq-safran);
}

.horarios-text h2,
.beauvais-cta-section h2,
.cta-simple h2 {
	font-family: var(--pq-display);
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff !important;
}

/* La franja de precios era el otro degradado azul de la home. Pasa al mismo
   esmalte que las bandas de llamada a la accion, para que el sitio tenga dos
   fondos y no cinco: piedra para leer, esmalte para los cortes. */
.home-pricing {
	background: var(--pq-vert) !important;
	border-top: 3px solid var(--pq-safran);
	border-bottom: 3px solid var(--pq-safran);
}

.pricing-head h2 {
	color: #fff !important;
	font-family: var(--pq-display);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	letter-spacing: -.012em;
	line-height: 1.02;
}

.pricing-head p { color: rgba(255, 255, 255, .78) !important; }

/* Dentro de la franja las tarjetas son papel sobre esmalte: se dibujan sin
   filete de tinta, que sobre fondo oscuro no se ve, y se apoyan solas. */
.home-pricing .price-card {
	border-color: transparent !important;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .22) !important;
}

.price-free {
	border-radius: var(--pq-r) !important;
	background: rgba(200, 137, 26, .10) !important;
	border: 1px solid rgba(200, 137, 26, .40) !important;
	color: var(--pq-vert) !important;
}

.price-card-free .price-line {
	background: transparent !important;
	border-color: var(--pq-filet) !important;
}

/* ==========================================================================
   11. Formulario de reserva y checkout
   ========================================================================== */

.sys-reserva,
.sys-wrap,
.sys-selector,
.sys-checkout,
.checkout-wrap,
.caja_resumen_unico_checkout {
	font-family: var(--pq-texte);
	border-radius: var(--pq-r) !important;
}

.sys-section-title,
.sys_blockcart_titulo,
.sys-checkout-step__text {
	font-family: var(--pq-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--pq-vert);
	font-size: 1.05rem;
}

.sys-row__label {
	font-family: var(--pq-display);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-size: .95rem;
	color: var(--pq-encre);
}

.sys-input,
.sys-selector select,
.sys-totalinput,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	border-radius: var(--pq-r) !important;
	border: 1px solid var(--pq-filet-fort) !important;
	background: #fff !important;
	color: var(--pq-encre) !important;
	font-family: var(--pq-texte);
	box-shadow: none !important;
}

.sys-input:focus,
select:focus,
textarea:focus,
input:focus {
	border-color: var(--pq-vert) !important;
	outline: 2px solid var(--pq-safran);
	outline-offset: 1px;
}

.sys-input--date,
.sys-stepper__value { font-family: var(--pq-data); }

.sys-stepper {
	border-radius: var(--pq-r) !important;
	border: 1px solid var(--pq-filet-fort) !important;
	background: #fff !important;
}

.sys-stepper__btn {
	border-radius: var(--pq-r) !important;
	background: var(--pq-vert) !important;
	color: #fff !important;
	border: none !important;
}

.sys-stepper__btn:hover { background: var(--pq-safran) !important; }

.sys-totals,
.sys-totalbox,
.sys-totalcard {
	border-radius: var(--pq-r) !important;
	background: var(--pq-pierre) !important;
	border: 1px solid var(--pq-filet-fort) !important;
}

.sys-totalrow { border-bottom: 1px solid var(--pq-filet); }

.sys-totalrow--last,
.sys-total-final,
.sys-totalrow__value--final {
	color: var(--pq-safran) !important;
	font-weight: 700;
	font-size: 1.28rem;
}

.sys-checkoption,
.sys-switch__ui {
	border-radius: var(--pq-r) !important;
	border-color: var(--pq-filet-fort) !important;
}

.sys-checkoption__title {
	font-family: var(--pq-display);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--pq-vert);
}

input[type="radio"] { border-color: var(--pq-vert) !important; }

.sys-modal,
.sys-hint__dialog,
.sys_blockcart_contenido {
	border-radius: var(--pq-r) !important;
	border: 1px solid var(--pq-vert) !important;
	box-shadow: var(--pq-ombre) !important;
	background: var(--pq-craie) !important;
}

.sys-overlay { background: rgba(12, 43, 36, .55) !important; }

.sys-alert,
.sys-notice-activity {
	border-radius: var(--pq-r) !important;
	border-left: 3px solid var(--pq-safran) !important;
}

.sys-checkout-step__badge {
	font-family: var(--pq-data);
	letter-spacing: 0;
	text-transform: none;
	background: var(--pq-vert) !important;
	box-shadow: none !important;
}

/* El checkout venia con su propio juego de esquinas (30, 28, 24, 18px) y
   sombras difusas. Se aplana al mismo lenguaje que el resto del sitio: si el
   billete del hero es papel con filete, el checkout no puede ser vidrio
   esmerilado. */
.sys-checkout-form,
.sys-checkout-form__intro,
.sys-checkout-form__introIcon,
.sys-checkout-form__chip,
.sys-field,
.sys-field__icon,
.sys-checkout .cesta_slide,
.sys-checkout .caja_30,
.sys-checkout .sys-product-image,
.sys-checkout .sys_caja_detalle,
.sys-checkout-form .sys_caja_formulario select,
.sys-checkout-mobile-subtitle-wrap .sys_card_product_text.is-subtitle,
.pay-safe,
.sys-tickets {
	border-radius: var(--pq-r) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}

.sys-checkout-form,
.sys-checkout .cesta_slide,
.sys-field {
	background: var(--pq-craie) !important;
	border: 1px solid var(--pq-filet-fort) !important;
}

.sys-checkout-form__intro,
.sys-checkout .sys_caja_detalle {
	background: var(--pq-pierre) !important;
	border: 1px solid var(--pq-filet-fort) !important;
	border-left: 3px solid var(--pq-vert-2) !important;
}

.sys-checkout-form__introIcon,
.sys-field__icon {
	background: var(--pq-vert) !important;
	color: #fff !important;
}

.sys-field:focus-within {
	border-color: var(--pq-vert) !important;
	box-shadow: 0 0 0 2px var(--pq-safran) !important;
}

/* ==========================================================================
   12. Pie
   ========================================================================== */

.bb-footer {
	background: var(--pq-vert-3) !important;
	color: rgba(255, 255, 255, .88);
	border-top: 3px solid var(--pq-safran);
	margin-top: 72px;
}

.bb-footer h4 {
	font-family: var(--pq-display);
	text-transform: uppercase;
	letter-spacing: .13em;
	font-size: .95rem;
	color: var(--pq-safran-clair) !important;
}

.bb-footer a { color: rgba(255, 255, 255, .86); }
.bb-footer a:hover { color: var(--pq-safran-clair); }

.bb-footer__tagline,
.bb-footer__secure { color: rgba(255, 255, 255, .70); }

.bb-footer__phone {
	border-radius: var(--pq-r) !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	background: rgba(255, 255, 255, .05) !important;
}

.bb-footer__phone strong {
	font-family: var(--pq-data);
	font-size: 1.12rem;
	letter-spacing: -.01em;
	color: #fff;
}

.bb-footer__paybox {
	border-radius: var(--pq-r) !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	background: rgba(255, 255, 255, .95) !important;
}

.bb-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-family: var(--pq-display);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .86rem;
	color: rgba(255, 255, 255, .60);
}

/* ==========================================================================
   13. Cookies y WhatsApp
   ========================================================================== */

.bb-cookies { background: var(--pq-vert-3) !important; border-top: 3px solid var(--pq-safran); }

.bb-cookies__title {
	font-family: var(--pq-display);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--pq-safran-clair) !important;
}

.bb-cookies__text,
.bb-cookies__text a { color: rgba(255, 255, 255, .82) !important; }

.wa-icon,
a[href*="wa.me"] { border-radius: var(--pq-r) !important; }

/* ==========================================================================
   14. Ritmo vertical
   --------------------------------------------------------------------------
   Con las sombras fuera, las secciones necesitan mas aire para separarse:
   antes las separaba el desenfoque de las tarjetas.
   ========================================================================== */

.bb-section,
.home-pricing,
.bbp-compare,
.bundle-deals,
.paris-experiences,
.beauvais-stops,
.schedule-grid,
.ep-support,
.ep-help { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* Las secciones iban en blanco puro sobre un fondo que antes tambien era casi
   blanco, asi que no se notaba. Sobre la piedra se veian como franjas claras
   con costuras entre medias. Se dejan transparentes: la piedra corre de arriba
   abajo y lo unico que flota encima es el papel de las tarjetas. */
.paris-intro,
.paris-experiences,
.bb-section,
.bbp-compare,
.bundle-deals,
.beauvais-stops,
.schedule-table,
.cancel-info,
.beauvais-map,
.ep-help,
.ep-support,
.bva-container,
.stops-wrap,
.bundle-wrap,
.cancel-wrap,
.map-wrap { background: transparent !important; }

.pricing-head,
.bundle-head,
.paris-intro { margin-bottom: 26px; }

/* ==========================================================================
   14 bis. Radio uniforme
   --------------------------------------------------------------------------
   El grueso ya viene normalizado en origen (los CSS y los estilos en linea
   traian 14 medidas distintas). Esto es la red: cualquier control que se
   pinte desde JS o que se haya quedado con su pastilla de 999px cae aqui.
   Se dejan fuera los que TIENEN que seguir siendo redondos -- radios,
   casillas y los circulos de icono -- porque ahi la forma es funcional.
   ========================================================================== */

button,
input,
select,
textarea,
.sys-btn,
.sys-btn-style_1,
.sys-btn-style_2,
.sys-btn-style_3,
.sys-btn-pay,
.cta-btn,
.deal-btn,
.exp-btn,
.map-btn,
.horarios-button,
.cta-simple-btn,
.ep-help-btn,
.bb-cookies__btn,
.sys-hint,
.sys-chip,
.sys-checkout-form__chip,
.sys-pill,
.hero-chip,
.paris-chip,
.stop-badge,
.hero-eyebrow {
	border-radius: var(--pq-r) !important;
}

input[type="radio"],
input[type="checkbox"],
.sys-checkoption__mark,
.sys-stepper__btn,
.sys-checkout-step__badge,
.sys_indicador_carrito,
.wa-icon,
.cancel-icon,
.cancel-help-icon,
.sys-info-block__icon,
.ep-help-icon,
.bb-footer__phone-icon,
.sys-hint__close,
.sys-overlay__close {
	border-radius: 50% !important;
}

/* ==========================================================================
   15. Movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.sys-btn-style_1:hover,
	.cta-primary:hover,
	.deal-btn:hover,
	.exp-btn:hover,
	.horarios-button:hover,
	.map-btn:hover { transform: none; }
}

/* ==========================================================================
   16. Movil
   ========================================================================== */

@media (max-width: 767px) {
	.hero-eyebrow { font-size: .88rem !important; letter-spacing: .12em !important; padding: 9px 13px 8px; }
	.schedule-title, .stops-title, .bbp-compare__title, .bb-title { font-size: 1.7rem; }
	.bb-footer { margin-top: 44px; }
	.schedule-card__times { gap: 5px; }
	.schedule-time { padding: 5px 8px; font-size: .9rem; }
}