/* ==========================================================================
   Taxis Valle Gran Rey — portada
   Solo se carga en front-page. Depende de los tokens de main.css.

   1. Hero
   2. Formulario de reserva
   3. Franja de confianza
   4. Sobre nosotros
   5. Galería
   6. Vehículo
   7. Trayectos
   8. Senderistas
   9. Servicios
   10. FAQ
   11. Responsive
   ========================================================================== */

/* 1. Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	color: #fff;
}
.hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 60%;
	background: var(--g2); /* color mientras carga la foto */
	animation: kb 12s ease-out forwards;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Sin degradado: un velo uniforme muy ligero solo para asentar el texto. */
	background: rgba(0, 0, 0, .3);
}
.hero-in {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-top: 84px;
	padding-bottom: 96px;
}
.hero-txt {
	flex: 1 1 520px;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.hero h1 { font-size: clamp(42px, 5.6vw, 59px); line-height: .98; font-weight: 900; color: var(--title-hero); }
/* Sombra suave para que el texto blanco se lea sobre cualquier zona del vídeo. */
.hero-txt { text-shadow: 0 2px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35); }
.hero-txt .btn { text-shadow: none; }
.hero-sub { max-width: 540px; font-size: 19px; line-height: 1.55; color: #e3ece2; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	padding-top: 6px;
	font-size: 15px;
	color: #d4e2d3;
}
.hero-facts b { display: block; font-size: 22px; font-weight: 900; color: #fff; }

/* Entrada escalonada del texto del hero. */
.fade > * { opacity: 0; animation: up .7s ease-out forwards; }
.fade > :nth-child(2) { animation-delay: .1s; }
.fade > :nth-child(3) { animation-delay: .2s; }
.fade > :nth-child(4) { animation-delay: .3s; }
.fade > :nth-child(5) { animation-delay: .4s; }

/* El vídeo ya tiene movimiento propio: sin zoom de entrada. */
.hero-video { animation: none; }

@keyframes kb {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

/* 2. Formulario de reserva
   ========================================================================== */
.book {
	flex: 0 1 400px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	border-radius: var(--radius-lg);
	background: #fff;
	color: var(--ink);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
	opacity: 0;
	animation: up .8s .35s ease-out forwards;
}
.book-title { font-size: 22px; line-height: 1.2; font-weight: 800; }
.book p { font-size: 14px; color: var(--mut); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label,
.field .label { font-size: 13px; font-weight: 700; color: var(--mut); }
.field input {
	width: 100%;
	min-height: 48px;
	padding: 12px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
}
.field input:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(17, 74, 43, .15); }
.field input[aria-invalid="true"] { border-color: #c0392b; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pax {
	display: flex;
	align-items: center;
	overflow: hidden;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
}
.pax button {
	width: 48px;
	height: 46px;
	border: 0;
	background: var(--lg);
	color: var(--g);
	font-family: inherit;
	font-size: 22px;
	font-weight: 800;
	cursor: pointer;
}
.pax button:disabled { opacity: .4; cursor: not-allowed; }
.pax output { flex: 1; text-align: center; font-size: 17px; font-weight: 800; }

.book .btn { width: 100%; }
.book .book-status:empty { display: none; }
.book .book-status { color: var(--g); font-weight: 600; }
.book .alt { font-size: 14px; text-align: center; color: var(--mut); }
.book .alt a { font-weight: 800; }

/* 3. Franja de confianza (rejilla de líneas finas, ref. 21st «Stats Band»)
   ========================================================================== */
.trust { background: var(--g2); color: #fff; }
.trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.trust-grid li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 30px 24px;
	border-left: 1px solid rgba(255, 255, 255, .12);
}
.trust-grid li:first-child { border-left: 0; padding-left: 0; }
.trust-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .08);
	color: var(--y-icon);
}
.trust-txt { display: flex; flex-direction: column; gap: 3px; }
.trust-txt b { font-size: 17px; font-weight: 800; }
.trust-txt span { font-size: 14px; line-height: 1.45; color: var(--on-dark); }

/* 4. Sobre nosotros
   ========================================================================== */
/* Mismo fondo que la sección del vehículo. */
#quienes-somos { background: var(--lg); }
.about { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.about-img { flex: 1 1 380px; position: relative; }
.about-img img {
	width: 100%;
	height: 600px;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: var(--radius-lg);
}
.about-img .tag {
	position: absolute;
	left: 18px;
	bottom: 18px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.about-img .tag b { display: block; font-size: 16px; }

.about-txt { flex: 1 1 480px; display: flex; flex-direction: column; gap: 20px; }
.about-txt h2 { color: var(--title); }
.about-txt p { font-size: 18px; line-height: 1.7; color: var(--text); }

.zones-box {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding-top: 25px;
}
.zones-box strong { font-size: 16px; }
.zones { display: flex; flex-wrap: wrap; gap: 8px; }
.zones li {
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff; /* blanco para que no se pierda sobre el fondo de la sección */
	color: var(--g);
	font-size: 14px;
	font-weight: 700;
}

/* 5. Galería (rejilla bento + visor, ref. 21st «Bento Gallery»)
   ========================================================================== */
.gal-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 800px;
	margin: 0 auto 36px;
	text-align: center;
}
.gal-head .eyebrow { margin: 0; }
.gal-head h2 { color: var(--title); }
.gal-head > p:last-child { max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--text-mut); }

/* Galería en curva (template-parts/home/gallery-curve.php + assets/js/gallery-curve.js).
   El bloque mide su propio alto: las fotos se dimensionan en cqh/cqw. */
/* La curva ya deja aire arriba y abajo (los extremos necesitan sitio): cabecera pegada y sin padding inferior. */
.tg-sec.tg-sec { padding-bottom: 0; }
.tg-sec .gal-head.gal-head { margin-bottom: 0; }
.tg {
	position: relative;
	margin-top: -90px;
	height: clamp(320px, 42vw, 600px);
	overflow: hidden;
	container-type: size;
}
.tg-band {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s ease;
}
.tg.is-ready .tg-band { opacity: 1; }
.tg.is-paused .tg-tile { animation-play-state: paused; }
.tg-tile { position: absolute; transform-style: preserve-3d; }
.tg-slice {
	position: absolute;
	top: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, .06); /* mientras carga */
}
.tg-slice:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.tg-slice:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.tg-slice img { position: absolute; top: 0; max-width: none; object-fit: cover; user-select: none; }

/* Sin JS: fila de fotos con scroll. Con JS la lista queda solo para lectores de pantalla. */
.tg-list {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding-inline: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.tg-list li { flex: none; height: 80%; aspect-ratio: 3 / 2; scroll-snap-align: center; }
.tg-list img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.tg.is-ready .tg-list {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Sobre verde, como Senderistas y Servicios. */
.gal-sec { background: var(--g2); color: #fff; }
.gal-sec .eyebrow { color: var(--y-icon); }
.gal-sec .gal-head h2 { color: var(--title-dark); }
.gal-sec .gal-head > p:last-child { color: var(--on-dark); }
.gal-sec .gal-open { background: rgba(255, 255, 255, .06); }

/* 1 alta | 2 ancha arriba | 3 alta
          | 4 ancha abajo  |          */
.gal {
	display: grid;
	grid-template-columns: 1fr 1.6fr 1fr;
	grid-template-rows: 250px 250px;
	gap: 14px;
}
.gal-1 { grid-column: 1; grid-row: 1 / 3; }
.gal-2 { grid-column: 2; grid-row: 1; }
.gal-3 { grid-column: 3; grid-row: 1 / 3; }
.gal-4 { grid-column: 2; grid-row: 2; }

.gal-open {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--lg); /* mientras carga */
	cursor: zoom-in;
}
.gal-open img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.gal-open:hover img,
.gal-open:focus-visible img { transform: scale(1.04); }
.gal-1 img { object-position: 55% 50%; }
.gal-3 img { object-position: 70% 60%; }
.gal-4 img { object-position: 50% 65%; }

/* Etiqueta blanca en lugar de texto sobre degradado. */
.gal-tag {
	position: absolute;
	left: 14px;
	bottom: 14px;
	max-width: calc(100% - 28px);
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--g);
	font-size: 13px;
	font-weight: 800;
	text-align: left;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

/* Visor */
.lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 56px 72px;
	border: 0;
	background: transparent;
	color: #fff;
}
.lightbox::backdrop { background: rgba(10, 22, 16, .96); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox-fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
}
.lightbox-img {
	max-width: 100%;
	max-height: calc(100vh - 150px);
	border-radius: 12px;
	object-fit: contain;
}
.lightbox-cap { font-size: 16px; font-weight: 700; }
.lightbox-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--g);
	cursor: pointer;
}
.lightbox-btn:hover { background: var(--y-icon); }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; margin-top: -24px; }
.lightbox-prev .icon { transform: rotate(180deg); }
.lightbox-next { right: 16px; top: 50%; margin-top: -24px; }
.has-lightbox { overflow: hidden; }

/* 6. Vehículo
   ========================================================================== */
.veh { background: var(--lg); }
.veh-in { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.veh-txt { flex: 1 1 460px; display: flex; flex-direction: column; gap: 30px; }
.veh-txt h2 { color: var(--title); }
.veh-txt p { font-size: 18px; line-height: 1.7; color: var(--text); }
.veh-cta { margin-top: 14px; }

/* Ficha: fichas con icono; la primera (el vehículo) ocupa todo el ancho. */
.spec {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.spec li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(19, 32, 23, .05);
}
.spec li:first-child { grid-column: 1 / -1; }
.spec li { transition: transform .2s ease, box-shadow .2s ease; }
.spec li:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19, 32, 23, .08); }
.spec-icon {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--y-icon);
	color: #fff;
}
.spec-label {
	align-self: end;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mut);
}
.spec b { align-self: start; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.spec li:first-child b { font-size: 18px; }

.veh-img { flex: 1 1 420px; }
.veh-img img {
	width: 100%;
	height: 600px; /* misma altura que .about-img img */
	object-fit: cover;
	object-position: 50% 62%;
	border-radius: var(--radius-lg);
}

/* 7. Trayectos (cabecera centrada + 4 tarjetas con foto, ref. 21st «Travel Card»)
   ========================================================================== */
/* Trayectos y FAQ sobre el tinte claro de lima. */
#trayectos,
#faq { background: var(--lg); }

.routes-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}
.routes-head h2 { color: var(--title); }
.routes-head p { font-size: 18px; line-height: 1.6; color: var(--text-mut); }

.rc-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tarjeta: foto a sangre con el texto encima (velo plano, sin degradado). */
.rc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 420px;
	overflow: hidden;
	padding: 22px;
	border-radius: var(--radius-lg);
	background: var(--g2);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
.rc-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, .32);
	transition: background .4s;
}
.rc-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.rc-icon {
	position: absolute;
	top: 20px;
	left: 20px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	background: rgba(0, 0, 0, .2);
}
.rc-txt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.rc-txt b { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.rc-txt small { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.rc-cta {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 16px;
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	font-size: 15px;
	font-style: normal;
	font-weight: 800;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* Al pasar el ratón (o enfocar con teclado): zoom, el texto sube y aparece el botón. */
.rc-card:hover .rc-img,
.rc-card:focus-visible .rc-img { transform: scale(1.08); }
.rc-card:hover::after,
.rc-card:focus-visible::after { background: rgba(0, 0, 0, .42); }
.rc-card:hover .rc-txt,
.rc-card:focus-visible .rc-txt { transform: translateY(-64px); }
.rc-card:hover .rc-cta,
.rc-card:focus-visible .rc-cta { opacity: 1; transform: none; }

/* Pantallas táctiles: sin hover, el botón se ve siempre. */
@media (hover: none) {
	.rc-txt { transform: translateY(-64px); }
	.rc-cta { opacity: 1; transform: none; }
}


/* 8. Senderistas (texto + foto enmarcada, ref. 21st «Feature Showcase»)
   Sin capas sobre la foto: el texto va sobre fondo liso.
   ========================================================================== */
.hike { background: var(--g2); color: #fff; }
.hike-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
}
.hike-box {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.hike .eyebrow { margin: 0; color: var(--y-icon); }
.hike h2 { color: var(--title-dark); }
.hike-lead { font-size: 18px; line-height: 1.7; color: var(--on-dark); }

.hike-list { border-top: 1px solid rgba(255, 255, 255, .12); }
.hike-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hike-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .08);
	color: var(--y-icon);
}
.hike-txt { display: flex; flex-direction: column; gap: 2px; }
.hike-txt b { font-size: 16px; font-weight: 800; }
.hike-txt span { font-size: 15px; color: var(--on-dark); }

.hike-ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

.hike-media { position: relative; margin: 0; order: -1; } /* imagen a la izquierda; en el HTML va después del texto */
.hike-img {
	width: 100%;
	height: 600px; /* misma altura que .about-img img */
	object-fit: cover;
	object-position: 62% 60%;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .06); /* mientras carga */
}

/* 9. Servicios (rejilla de tarjetas con icono, ref. 21st «Features Grid»)
   Mismos colores que «Senderistas»: fondo verde y tarjetas translúcidas.
   ========================================================================== */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 36px;
}
.section-head h2 { max-width: 640px; color: var(--title); }
.section-head .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }

.svc-sec { background: var(--g2); color: #fff; }
.svc-sec .eyebrow { color: var(--y-icon); }
.svc-sec .section-head h2 { color: var(--title-dark); }
.svc-sec .section-head .more { color: var(--y-icon); }

.svc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}
.svc-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	background: #fff;
	transition: border-color .15s, background .15s, transform .15s;
}
.svc-card:hover { transform: translateY(-2px); }
.svc-card .icon-chip {
	margin-bottom: 6px;
	border-color: transparent;
	background: var(--y-icon);
	color: #fff;
}
.svc h3 { font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--title); }
.svc p { font-size: 16px; line-height: 1.6; color: var(--text); }

/* 10. FAQ (cabecera centrada y tarjetas +/−, ref. 21st «FAQ 3» y «Single Open Accordion»)
   ========================================================================== */
.faq-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 800px;
	margin: 0 auto 36px;
	text-align: center;
}
.faq-head h2 { color: var(--title); }
.faq-head > p:last-child { max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--text-mut); }
.faq-head a { font-weight: 800; white-space: nowrap; }

/* Una tarjeta por pregunta; la abierta se eleva y su botón pasa a verde. */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq details {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	transition: border-color .25s ease, box-shadow .3s ease;
}
.faq details:hover { border-color: var(--salvia); }
.faq details[open]:not(.is-closing) {
	border-color: var(--salvia);
	box-shadow: 0 14px 34px rgba(19, 32, 23, .08);
}
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px 20px 26px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
	border-radius: var(--radius-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover .faq-q { color: var(--g); }
.faq-q { transition: color .2s ease; }

/* Flecha muy fina (SVG en máscara: trazo de 1,25 px con puntas redondeadas)
   en gris suave; se oscurece al pasar el ratón y gira hacia arriba al abrir. */
.faq-toggle {
	flex: none;
	width: 22px;
	height: 22px;
	background: currentColor;
	color: #9a9a9a;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: color .3s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.faq summary:hover .faq-toggle { color: var(--ink); }
.faq details[open]:not(.is-closing) .faq-toggle { color: var(--ink); transform: rotate(-180deg); }

.faq-a { padding: 0 82px 24px 26px; }
.faq-a p { max-width: 820px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--mut); }

/* 11. Responsive
   ========================================================================== */
@media (max-width: 960px) {
	.rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.hero-in { padding-top: 56px; padding-bottom: 64px; }
	.book { flex-basis: 100%; }

	.gal { grid-template-columns: 1fr 1fr; grid-template-rows: 170px 170px 200px; gap: 10px; }
	.gal-1 { grid-column: 1; grid-row: 1 / 3; }
	.gal-2 { grid-column: 2; grid-row: 1; }
	.gal-3 { grid-column: 2; grid-row: 2; }
	.gal-4 { grid-column: 1 / 3; grid-row: 3; }
	.gal-tag { left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 10px; font-size: 12px; }

	.lightbox { padding: 64px 12px 88px; }
	.lightbox-prev,
	.lightbox-next { top: auto; bottom: 20px; margin-top: 0; }
	.lightbox-prev { left: calc(50% - 60px); }
	.lightbox-next { right: calc(50% - 60px); }

	.about-img img,
	.veh-img img { height: 420px; }

	.svc { grid-template-columns: 1fr; }

	.trust-grid li { padding: 20px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
	.trust-grid li:first-child { border-top: 0; }

	.rc-card { height: 380px; }
	.faq summary { padding: 18px 16px 18px 20px; font-size: 17px; }
	.faq-a { padding: 0 20px 20px; }

	.hike-in { grid-template-columns: 1fr; gap: 36px; }
	.hike-media { order: 0; } /* en móvil, texto primero */
	.hike-img { height: 420px; }

}

@media (max-width: 560px) {
	.rc-grid { grid-template-columns: 1fr; }
	.spec { grid-template-columns: 1fr; }
	.rc-card { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
	.fade > *,
	.book { opacity: 1; }
	.gal-open img { transition: none; }
	.rc-img,
	.rc-txt,
	.rc-cta { transition: none; }
}

/* Art direction: photographic depth, quieter typography and tactile details.
   Existing content, section order and component structure are preserved. */
.hero::after { background: rgba(0, 0, 0, .37); }
.hero-in { padding-block: clamp(64px, 7vw, 108px); gap: 48px; }
.hero-txt { gap: 28px; text-shadow: 0 2px 18px #0006, 0 1px 3px #0004; }
.hero h1 { font-size: clamp(42px, 4.5vw, 64px); font-weight: 720; line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; }
.hero-sub { font-size: 18px; line-height: 1.7; color: #f1f3ed; max-width: 510px; }
.hero-facts { gap: 0; padding-top: 12px; }
.hero-facts li { padding-inline: 24px; border-left: 1px solid #ffffff40; }
.hero-facts li:first-child { padding-left: 0; border: 0; }
.hero-facts b { font-size: 26px; font-weight: 650; margin-bottom: 5px; }
.hero-facts li { font-size: 13px; }
.book { background: #fdfcf9; padding: 30px; gap: 16px; border: 1px solid #ffffffb3; box-shadow: 0 24px 80px #06171040; }
.book-title { font-size: 21px; font-weight: 700; letter-spacing: -.035em; }
.book > p { line-height: 1.55; }
.field label, .field .label { font-size: 12px; font-weight: 600; }
.field input { background: #fff; border-width: 1px; transition: border-color .25s, box-shadow .25s; }
.pax { border-width: 1px; }
.trust-grid li { padding-block: 32px; }
.trust-txt b { font-weight: 600; font-size: 16px; }
.trust-icon { background: transparent; border: 1px solid #ffffff24; }
.about { gap: 64px; }
.about-img .tag { left: 24px; bottom: 24px; padding: 18px 24px; box-shadow: 0 8px 32px #13201714; }
.about-txt p, .veh-txt p { font-size: 17px; line-height: 1.8; }
.zones li { background: #fff; border: 1px solid #11270026; font-weight: 500; }
.gal { gap: 20px; }
.gal-open img { transition: transform 1.1s var(--motion-ease); }
.gal-tag { font-weight: 600; padding: 10px 14px; }
.gal-head, .routes-head, .faq-head { margin-bottom: 48px; }
.rc-card::after { background: linear-gradient(180deg, #081c161a 20%, #081c16b8 100%); }
.rc-card:hover::after, .rc-card:focus-visible::after { background: linear-gradient(180deg, #081c162b 10%, #081c16db 100%); }
.rc-txt b { font-size: 23px; font-weight: 650; letter-spacing: -.035em; }
.rc-icon { border-width: 1px; width: 40px; height: 40px; }
.rc-img { transition-duration: 1.1s; }
.spec li { box-shadow: none; border: 1px solid #11270012; }
.svc-card { box-shadow: none; transition: background .35s, border-color .35s, transform .45s var(--motion-ease); }
.svc-card:hover { transform: translateY(-5px); box-shadow: none; }
.svc-card h3 { font-weight: 650; letter-spacing: -.025em; }
.icon-chip { background: transparent; border: 1px solid #11270030; }
.svc-sec .svc-card .icon-chip { background: var(--y-icon); border-color: transparent; }
.faq details { background: #fdfcf9; }
.faq summary { font-weight: 600; padding-block: 24px; }
.faq details[open]:not(.is-closing) { box-shadow: 0 8px 24px #13201706; }
@media (max-width: 760px) {
	.hero-in { gap: 40px; padding-block: 56px; }
	.hero h1 { font-size: clamp(40px, 7vw, 54px); }
	.book { padding: 24px; }
	.hero-facts li { padding-inline: 16px; }
	.about { gap: 36px; }
	.gal { gap: 10px; }
	.hero::after { background: rgba(0, 0, 0, .37); }
}
@media (max-width: 380px) {
	.hero-facts li { padding-inline: 10px; font-size: 12px; }
	.book { padding: 20px; }
}
/* Fotos al hacer scroll (Quiénes somos, Vehículo, Senderistas).
   Animación ligada al scroll, nativa del navegador: el marco se abre al entrar
   en pantalla y la foto deriva y se aleja levemente mientras se recorre.
   Sin soporte o con «reducir movimiento», las fotos quedan quietas. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.about-img, .veh-img, .hike-media {
			overflow: hidden;
			view-timeline: --photo block;
			animation: photo-open linear both;
			animation-timeline: --photo;
			animation-range: entry 10% cover 40%;
		}
		.about-img > img, .veh-img > img, .hike-img {
			animation: photo-drift linear both;
			animation-timeline: --photo;
			animation-range: cover 0% cover 100%;
			will-change: transform;
		}
	}
}
@keyframes photo-open {
	from { clip-path: inset(7% 5% round var(--radius-lg)); }
	to { clip-path: inset(0 round var(--radius-lg)); }
}
@keyframes photo-drift {
	from { transform: translateY(-3%) scale(1.14); }
	to { transform: translateY(3%) scale(1.07); }
}

/* Clip animated photographs to the original rounded frame. */
.about-img, .veh-img, .hike-media { border-radius: var(--radius-lg); }