/* Turistear — front page. Builds on the tokens declared in tr-rutas.css. */

.tr-home {
	--tr-azul: #0b4f9e;
	--tr-azul-osc: #08376f;
	--tr-acento: #f7941d;
	--tr-texto: #1b2430;
	--tr-suave: #5b6675;
	--tr-borde: #e3e8ef;
	--tr-fondo: #f5f8fc;
	color: var(--tr-texto);
}

/* ---------------- Hero ---------------- */

/* Astra boxes its content; the hero and the tinted bands need the full viewport. */
/* Astra boxes the page inside .ast-container, which is a flex row with a max-width.
   The usual 100vw escape does not survive that: as a flex item the page gets shrunk
   back, and 100vw also overshoots by the width of the scrollbar. Opening the container
   itself on the home page is both simpler and exact — full-bleed bands then fall out
   naturally, and each section re-centres on its own measure. */
body.home #content .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	display: block;
}

.trh-hero {
	position: relative;
	padding: clamp(52px, 7vw, 108px) 20px clamp(52px, 6vw, 88px);
	overflow: hidden;
	background:
		radial-gradient(120% 130% at 12% -10%, #1667bd 0%, transparent 55%),
		radial-gradient(90% 120% at 92% 0%, #0d7f8c 0%, transparent 52%),
		linear-gradient(168deg, #0a3f7d 0%, #072d5c 58%, #05203f 100%);
}
/* Stylised cordillera along the bottom edge: the mountains are what the country
   looks like, and it keeps the hero from being a flat colour block. */
.trh-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(90px, 16vw, 190px);
	z-index: 1;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V132l150-58 118 44 96-72 130 86 122-52 138 66 116-88 148 96 124-44 148 62v28z' fill='%23ffffff' fill-opacity='.06'/%3E%3Cpath d='M0 200v-38l138-52 122 40 132-58 118 66 146-42 130 58 128-72 158 82 128-40 140 46v10z' fill='%23ffffff' fill-opacity='.09'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
/* Soft vignette so the search card sits on a calm patch. */
.trh-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(70% 55% at 50% 62%, rgba(3, 18, 38, .42), transparent 70%);
}
.trh-hero__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; color: #fff; }
.trh-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}
.trh-hero h1 {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(1.85rem, 1.1rem + 3.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.trh-hero__sub {
	margin: 0 auto 30px;
	max-width: 640px;
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}

/* ---------------- Search card ---------------- */

.trh-buscador {
	max-width: 780px;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(4, 22, 46, .32);
	overflow: hidden;
	text-align: left;
}
.trh-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--tr-borde); background: #fbfcfe; }
.trh-tab {
	flex: 1 1 0;
	padding: 15px 12px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: var(--tr-suave);
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s, background .15s;
}
.trh-tab:hover { color: var(--tr-azul); background: #f2f7fd; }
.trh-tab.is-active { color: var(--tr-azul); border-bottom-color: var(--tr-azul); background: #fff; }

.trh-panel { display: none; padding: 22px; }
.trh-panel.is-active { display: block; }
/* The route form already carries its own card styling; strip it inside the hero. */
.trh-panel .tr-buscador { margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; }
.trh-panel .tr-buscador__nota { margin-top: 10px; }

.trh-form { display: flex; align-items: flex-end; gap: 12px; }
.trh-form .tr-field { flex: 1 1 auto; }
.trh-form .tr-btn { flex: 0 0 auto; }
.trh-form__nota { margin: 10px 0 0; font-size: 13px; color: var(--tr-suave); }

/* ---------------- Section frame ---------------- */

.trh-sec { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 5vw, 72px) 20px; }
/* Tinted bands run edge to edge; their contents stay on the same 1180px measure. */
.trh-sec--alt { max-width: none; background: var(--tr-fondo); }
.trh-sec--alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.trh-sec__head { margin-bottom: 26px; }
.trh-sec__head h2 {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.05rem);
	line-height: 1.15;
	letter-spacing: -.015em;
}
.trh-sec__head p { margin: 0; color: var(--tr-suave); font-size: 1rem; }
.trh-sec__mas { margin: 22px 0 0; }
.trh-sec__mas a { font-weight: 600; text-decoration: none; color: var(--tr-azul); }
.trh-sec__mas a:hover { text-decoration: underline; }

/* ---------------- Destination cards ---------------- */

.trh-destinos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.trh-dest {
	position: relative;
	display: block;
	min-height: 215px;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	box-shadow: 0 2px 10px rgba(16, 30, 54, .08);
	transition: transform .18s ease, box-shadow .18s ease;
}
.trh-dest:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16, 30, 54, .2); color: #fff; }
/* Only present when a real destination photo was set on the term. */
.trh-dest__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .5s ease;
}
.trh-dest:hover .trh-dest__img { transform: scale(1.06); }
.trh-dest::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 28, 55, 0) 30%, rgba(8, 28, 55, .78) 100%);
}

/* ---------------- Landscape scenes ----------------
   Vector stand-ins for destination photography. Each scene is a sky gradient plus a
   silhouette, so a card reads as its kind of place at a glance without shipping a
   single stock image. */

.trh-esc { background-size: cover; background-position: bottom center; background-repeat: no-repeat; }

.trh-esc--lagos {
	background-color: #17527f;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 260V150l70-72 52 54 44-38 66 70 58-52 110 96v52z' fill='%23ffffff' fill-opacity='.22'/%3E%3Cpath d='M0 260V186l86-56 62 44 58-30 76 52 118-38v102z' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M0 260v-38h400v38z' fill='%23041c33' fill-opacity='.35'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #2e7fb8 0%, #17527f 55%, #0d3352 100%);
}
.trh-esc--costa {
	background-color: #0f6f8c;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='320' cy='68' r='30' fill='%23ffffff' fill-opacity='.28'/%3E%3Cpath d='M0 260v-96c46-16 78 10 124 0s70-24 124-10 106 14 152-4v110z' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M0 260v-52c58-14 96 12 150 2s84-22 130-10 84 12 120 2v58z' fill='%23f3d9a6' fill-opacity='.5'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #4bb4d1 0%, #0f6f8c 60%, #084a63 100%);
}
.trh-esc--sierras {
	background-color: #2f6b4f;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 260v-88c54-40 92 8 140-14s86-42 132-14 92 40 128 22v94z' fill='%23ffffff' fill-opacity='.18'/%3E%3Cpath d='M0 260v-46c62-30 104 16 158-6s92-30 138-8 76 24 104 14v46z' fill='%23063723' fill-opacity='.32'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #6aa87c 0%, #2f6b4f 58%, #17402f 100%);
}
.trh-esc--quebrada {
	background-color: #a3552c;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 260V132l64 40 56-72 70 88 54-46 76 70 80-48v96z' fill='%23ffffff' fill-opacity='.2'/%3E%3Cpath d='M0 260v-72l78 34 62-52 76 60 88-40 96 46v24z' fill='%235c2412' fill-opacity='.4'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #e0a05e 0%, #a3552c 55%, #6b3218 100%);
}
.trh-esc--selva {
	background-color: #1c6b52;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M120 60h160v78c0 26-36 44-80 44s-80-18-80-44z' fill='%23ffffff' fill-opacity='.2'/%3E%3Cpath d='M0 260v-64c50-6 74 22 118 14s74-30 122-20 96 26 160 8v62z' fill='%23063a2b' fill-opacity='.38'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #3fae86 0%, #1c6b52 58%, #0c3f30 100%);
}
.trh-esc--rio {
	background-color: #1f6f8f;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 260v-84c66 22 118-24 184-6s130 30 216 8v82z' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M0 260v-44c70 18 122-16 190 0s136 22 210 4v40z' fill='%23073a4f' fill-opacity='.35'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #5cc0d8 0%, #1f6f8f 58%, #0d4258 100%);
}
.trh-esc--vinos {
	background-color: #6d3550;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 260V128l84-62 66 54 62-40 88 66 100-44v158z' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M0 214h400v14H0zm0 26h400v14H0z' fill='%232c0f22' fill-opacity='.3'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #c07a94 0%, #6d3550 58%, #3d1a2c 100%);
}
.trh-esc--ciudad {
	background-color: #29456e;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M20 260v-96h44v96zm60 0v-132h38v132zm54 0v-72h48v72zm64 0v-114h40v114zm56 0v-58h44v58zm60 0v-96h46v96z' fill='%23ffffff' fill-opacity='.2'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #4b6ea3 0%, #29456e 58%, #16263f 100%);
}
.trh-esc--llanura {
	background-color: #3d6b8a;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 260v-58c80-18 150 14 214 4s124-26 186-12v66z' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M0 260v-26c86-12 154 8 212 2s126-16 188-6v30z' fill='%2312314a' fill-opacity='.32'/%3E%3C/svg%3E"),
		linear-gradient(170deg, #7aa8c4 0%, #3d6b8a 58%, #21455c 100%);
}
.trh-dest__body { position: relative; z-index: 1; display: block; padding: 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.trh-dest__nombre { display: block; font-size: 1.2rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 12px rgba(4, 20, 40, .5); }
.trh-dest__prov { display: block; font-size: 12.5px; opacity: .88; margin-top: 2px; }
.trh-dest__count {
	display: inline-block;
	/* The card body is a flex column, which would otherwise stretch the pill. */
	align-self: flex-start;
	margin-top: 9px;
	padding: 3px 9px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(4px);
	font-size: 11.5px;
	font-weight: 600;
}

/* ---------------- Trip types ---------------- */

.trh-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.trh-tema {
	background: #fff;
	border: 1px solid var(--tr-borde);
	border-radius: 14px;
	padding: 20px;
	transition: border-color .15s, box-shadow .15s;
}
.trh-tema:hover { border-color: #c6d6ea; box-shadow: 0 8px 24px rgba(16, 30, 54, .08); }
.trh-tema h3 { margin: 0 0 3px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.trh-tema__sub { margin: 0 0 12px; font-size: 13px; color: var(--tr-suave); }
.trh-tema ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trh-tema li a {
	display: inline-block;
	padding: 6px 11px;
	border-radius: 99px;
	background: var(--tr-fondo);
	font-size: 13.5px;
	text-decoration: none;
	color: var(--tr-texto);
	transition: background .15s, color .15s;
}
.trh-tema li a:hover { background: var(--tr-azul); color: #fff; }

/* ---------------- Routes ---------------- */

.trh-rutas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.trh-ruta {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--tr-borde);
	border-left: 4px solid var(--tr-acento);
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	color: var(--tr-texto);
	transition: transform .15s, box-shadow .15s;
}
.trh-ruta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 30, 54, .1); color: var(--tr-texto); }
.trh-ruta__t { display: block; font-weight: 700; font-size: 1.04rem; margin-bottom: 8px; }
.trh-ruta__datos { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--tr-suave); }
.trh-ruta__datos strong { color: var(--tr-texto); font-variant-numeric: tabular-nums; }

/* ---------------- Value props ---------------- */

.trh-valor__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.trh-valor__grid h3 { margin: 0 0 6px; font-size: 1.02rem; }
.trh-valor__grid h3::before {
	content: "";
	display: block;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: var(--tr-acento);
	margin-bottom: 10px;
}
.trh-valor__grid p { margin: 0; color: var(--tr-suave); font-size: .95rem; line-height: 1.55; }

/* ---------------- Province index ---------------- */

.trh-provincias { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.trh-prov { background: #fff; border: 1px solid var(--tr-borde); border-radius: 12px; padding: 4px 16px; }
.trh-prov summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 0;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.trh-prov summary::-webkit-details-marker { display: none; }
.trh-prov__c {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--tr-fondo);
	color: var(--tr-suave);
	font-size: 12px;
	text-align: center;
}
.trh-prov ul { list-style: none; margin: 0; padding: 0 0 12px; }
.trh-prov li a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--tr-borde);
	font-size: 14px;
	text-decoration: none;
	color: var(--tr-texto);
}
.trh-prov li a:hover { color: var(--tr-azul); }
.trh-prov li a span { color: var(--tr-suave); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------------- Responsive ---------------- */

@media (max-width: 980px) {
	.trh-destinos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.trh-destinos { grid-template-columns: 1fr; }
	.trh-dest { min-height: 175px; }
	.trh-form { flex-wrap: wrap; }
	.trh-form .tr-btn { width: 100%; }
	.trh-tab { font-size: 13.5px; padding: 13px 8px; }
}