/* =========================================================================
   OASBus — tema 2026
   -------------------------------------------------------------------------
   Rediseno de la portada segun el diseno aprobado: fondo teal oscuro, acento
   naranja y el buscador en una tarjeta solida sobre el hero.
   
   Por que se sustituye lo anterior: el hero era una ilustracion PNG de 1,5 MB
   sobre la que iba el texto, asi que el titulo competia con el dibujo y en
   movil el buscador quedaba flotando sobre el autobus. Aqui el fondo es color
   plano: el texto se lee siempre y la portada carga 1,5 MB menos.

   Se carga DESPUES de style.css y solo redefine lo de la portada.
   ========================================================================= */

:root {
	/* Paleta. El teal y el naranja ya eran los colores de la marca; lo que
	   cambia es el reparto: el teal pasa de detalle a fondo. */
	--oas-teal-900: #0d3b3f;   /* fondo del hero y de la barra superior */
	--oas-teal-700: #12575c;   /* bordes y separadores sobre fondo oscuro */
	--oas-naranja:  #e8712c;   /* acento: botones, iconos, eyebrow */
	--oas-naranja-800: #cf5f1e;/* hover del acento */
	--oas-tinta:    #12211f;   /* texto sobre claro */
	--oas-gris:     #5b6b69;   /* texto secundario */
	--oas-linea:    #e4e9e8;   /* separadores sobre claro */
	--oas-papel:    #ffffff;

	--oas-radio:    10px;
	--oas-radio-lg: 14px;
}

/* ---------- Barra superior ---------- */
.top_bar {
	background: var(--oas-teal-900);
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
	padding: 9px 0;
}
.top_bar span { color: #fff; }

/* ---------- Cabecera ---------- */
.header { background: var(--oas-papel); border-bottom: 1px solid var(--oas-linea); }
.nav__link { color: var(--oas-tinta); font-weight: 500; }
.nav__link:hover { color: var(--oas-naranja); }

/* ---------- Hero ---------- */
.home,
.home_seccion {
	background-color: var(--oas-teal-900);
	/* La cabecera es position:fixed y mide ~116px, pero el hero empieza en
	   top:0, asi que sin compensarla tapaba el eyebrow y la primera linea del
	   titulo. El padding superior incluye esa altura. */
	padding: calc(116px + 56px) 0 84px;
	color: #fff;
}

/* La ilustracion entraba por un pseudoelemento a pantalla completa
   (.home::before con oasbus1.png, 1,5 MB). Se anula ahi: con cambiar el
   background del contenedor no bastaba, el dibujo seguia encima. */
.home::before,
.home_seccion::before {
	content: none;
	/* content:none por si solo oculta el pseudoelemento, pero el navegador ya
	   ha descargado la imagen: hay que anular tambien el background para que
	   no se pidan esos 1,5 MB. La regla de style.css se repite en una media
	   query (linea 1636), asi que se cubre en todos los anchos. */
	background-image: none !important;
}

/* El titulo y la descripcion eran display:flex, lo que partia el texto en
   cajas y rompia el interlineado. */
.home__title, .home__description { display: block; }

/* El formulario traia un fondo negro translucido propio: con la tarjeta
   nueva sobraba y oscurecia los campos. */
.booking__form {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}
.home__container { align-items: start; gap: 56px; }

.home__data { background: transparent; padding: 0; box-shadow: none; }

/* Eyebrow: raya corta + texto en versalitas. Marca de que trata la pagina
   antes del titulo, sin robarle peso. */
.home .home__eyebrow {
	display: flex; align-items: center; gap: 14px;
	color: var(--oas-naranja);
	font-size: .76rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 18px;
}
.home__eyebrow::before {
	content: ""; width: 28px; height: 2px;
	background: var(--oas-naranja); flex: none;
}

.home__title {
	color: #fff;
	font-size: clamp(2.1rem, 4.4vw, 3.3rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 20px;
}
.home__description {
	color: rgba(255,255,255,.82);
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 48ch;
	margin: 0;
}

/* ---------- Rutas del hero ----------
   Salen de las paradas activas en la base de datos, no de una lista escrita a
   mano: si se da de alta o se retira un trayecto, el hero deja de anunciar
   algo que no se puede comprar. */
.home__rutas {
	margin-top: 34px;
	border-top: 1px solid rgba(255,255,255,.16);
}
.home__ruta {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 18px;
	align-items: baseline;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255,255,255,.16);
}
.home__ruta-zona {
	color: var(--oas-naranja);
	font-size: .74rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
}
.home__ruta-tramo { color: #fff; font-weight: 600; font-size: .98rem; }
.home__ruta-tramo .sep { color: rgba(255,255,255,.5); margin: 0 6px; }

/* ---------- Tarjeta del buscador ----------
   Antes era gris translucida sobre la ilustracion: los campos blancos y el
   fondo del dibujo se mezclaban. Ahora es una tarjeta solida, que es lo que
   hace que el buscador se lea como el elemento principal de la pagina. */
.booking__container.home__form {
	background: #7b6a5f;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--oas-radio-lg);
	padding: 22px;
	box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.booking__form { gap: 12px; }
.booking__inputs,
.tl-custom-select__trigger,
.booking__input {
	background: var(--oas-papel);
	border: 1px solid transparent;
	border-radius: var(--oas-radio);
}
.tl-custom-select__trigger { padding: 13px 15px; }
.tl-custom-select__label { color: var(--oas-gris); }
.tl-custom-select__label:not(.tl-custom-select__label--placeholder) { color: var(--oas-tinta); }
.tl-custom-select__chevron,
.tl-custom-select__icon { color: var(--oas-naranja); }

/* Tabs ida / ida y vuelta */
.trip-type, .booking__trip {
	background: var(--oas-papel);
	border-radius: var(--oas-radio);
	padding: 5px;
}
.trip-type__btn.is-active, .booking__trip-btn.is-active {
	background: var(--oas-naranja);
	color: #fff;
	border-radius: 7px;
}

/* Las etiquetas de los campos iban en blanco porque heredaban el color del
   hero: sobre la tarjeta clara quedaban casi invisibles. */
.booking__container.home__form,
.booking__container.home__form label,
.booking__container.home__form .counter__label,
.booking__container.home__form .booking__label { color: var(--oas-tinta); }

/* Contadores de pasajeros */
.booking__counter-btn, .counter__btn {
	background: var(--oas-naranja);
	color: #fff;
	border: none; border-radius: 50%;
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
}
.booking__counter-btn:hover, .counter__btn:hover { background: var(--oas-naranja-800); }

/* Boton de buscar */
.booking__button, .button.booking__button {
	background: var(--oas-naranja);
	color: #fff;
	border: none;
	border-radius: var(--oas-radio);
	padding: 15px 20px;
	font-weight: 700; font-size: 1rem;
	width: 100%;
}
.booking__button:hover { background: var(--oas-naranja-800); }

/* ---------- Ventajas ---------- */
.info.section { background: var(--oas-papel); padding: 68px 0 76px; }
.info__container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px 30px;
	/* Lleva tambien la clase .container: se respeta su ancho y centrado, que
	   el display:grid por si solo no conserva. */
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* El titulo de la seccion va dentro del mismo ancho que las columnas. */
.info.section > .section__title,
.info .section__title {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
.info .section__title,
.info__title-main {
	color: var(--oas-tinta);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -.01em;
	text-align: left;
	margin-bottom: 8px;
}
/* Regla bajo el titulo: separa el bloque sin necesidad de una caja. */
.info__regla {
	grid-column: 1 / -1;
	height: 1px; background: var(--oas-linea);
	margin: 6px 0 10px;
}
.info__item { text-align: left; background: none; box-shadow: none; padding: 0; }
.info__item i, .info__icon {
	color: var(--oas-naranja);
	font-size: 1.35rem;
	margin-bottom: 14px;
	display: block;
}
.info__title {
	color: var(--oas-tinta);
	font-size: 1rem; font-weight: 700;
	margin: 0 0 7px;
}
.info__description {
	color: var(--oas-gris);
	font-size: .92rem; line-height: 1.6;
	margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.info__container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 968px) {
	.home,
	.home_seccion { padding: calc(96px + 32px) 0 48px; }
	.home__container { gap: 34px; }
	.home__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
	.home__rutas { margin-top: 26px; }
}
@media (max-width: 560px) {
	.info__container { grid-template-columns: 1fr; gap: 28px; }
	.home__ruta { grid-template-columns: 1fr; gap: 4px; }
	.booking__container.home__form { padding: 16px; }
}

/* El movimiento no es decorativo aqui, pero quien lo desactiva no deberia
   recibir transiciones de todas formas. */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}