/* =========================================================================
   Home 2026 · escenas. Base pensada para móvil; las ampliaciones de pantalla
   grande están en responsive.css.
   ========================================================================= */

.tt26-main > section { position: relative; padding-block: var(--section-y); }

/* Cabecera de sección en fila: título a la izquierda, enlace (y flechas) a la derecha */
.tt26-sechead { margin-bottom: var(--sp-5); }
.tt26-sechead--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }

/* Subtítulo bajo el titular de cada escena (socios, 22-oct-2026). Mismo estilo que el texto de apoyo
   del hero (.tt26-hero__lead): tamaño, peso, color y medida de línea; en morado, el color suave de la
   escena (global.css). Una o dos líneas en escritorio, equilibradas (balance): con «pretty» la segunda
   línea quedaba en una o dos palabras («de rango.», «la próxima?», «más cerca.»). */
.tt26-sub { margin-top: var(--sp-3); max-width: 31em; font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); text-wrap: balance; }
/* Cómo funciona: el subtítulo va centrado bajo el titular y se queda el aire que antes tenía el titular */
.tt26-how .tt26-how__title { margin-bottom: 0; }
.tt26-how__sub { margin-inline: auto; margin-bottom: var(--sp-6); text-align: center; }
@media (min-width: 1024px) { .tt26-how__sub { margin-bottom: clamp(3rem, 1rem + 4vw, 5rem); } }
/* CTA final: el subtítulo hereda el hueco entre «¿Te vienes?» y las insignias */
.tt26-final .tt26-final__title { margin-bottom: 0; }
.tt26-final .tt26-sub { margin-bottom: var(--sp-5); }

/* Escena dividida copy / ilustración (móvil: copy arriba, ilustración debajo) */
.tt26-split { display: grid; gap: var(--sp-5); align-items: center; }
.tt26-split__copy { position: relative; z-index: 2; }
.tt26-split__art { position: relative; }
.tt26-split__art picture, .tt26-split__art img { width: 100%; }
/* Ilustraciones: SIEMPRE enteras. Ningún contenedor las recorta (sin overflow oculto, sin
   proporción fija ni object-fit: cover); el alto sale del propio fichero. */
.tt26-hero__img img, .tt26-unlock__frame img, .tt26-ranking__art img, .tt26-passport__art img,
.tt26-creators__art img, .tt26-final__art img { width: 100%; height: auto; object-fit: contain; }
/* «Suelo»: la ilustración apoya en el borde inferior de la escena (su corte coincide con el
   cambio de fondo y no queda flotando con un borde recortado) */
.tt26-main > .tt26-unlock, .tt26-main > .tt26-ranking { padding-bottom: 0; }

/* ---------- 01 · HERO ---------- */
/* Sin eyebrow: un poco más de aire arriba para que el titular no quede pegado a la cabecera */
.tt26-main > .tt26-hero { padding-block: clamp(2.75rem, 1.75rem + 3vw, 4.5rem) clamp(3rem, 1rem + 6vw, 6rem); }
.tt26-hero__grid { display: grid; gap: var(--sp-5); align-items: center; }
.tt26-hero__title { margin-bottom: var(--sp-4); }
.tt26-hero__l1, .tt26-hero__l2 { display: block; }
.tt26-hero__l2 { color: var(--tt-purple); }
/* Punto amarillo de marca del H1 (2-nov-2026): por CSS, como el de los H2 (.tt26x-dotafter / .tt26t-dotafter), así
   el texto del titular no lleva «.» y el filtro «sin punto final» no tiene nada que quitar. */
.tt26-hero__l2::after { content: "."; color: var(--tt-yellow); }
.tt26-hero__lead { margin-bottom: var(--sp-5); max-width: 31em; font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); text-wrap: pretty; }
.tt26-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.tt26-hero__grid { position: relative; }
/* 2-nov-2026: la ilustración llega al borde derecho y su zoom «vivo» la pasaba 2 px de la ventana (scrollWidth > clientWidth).
   Se recorta en la sección, que ocupa todo el ancho: solo se pierde lo que ya está fuera de la pantalla. */
.tt26-hero { overflow-x: clip; }
.tt26-hero__art { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.tt26-hero__depth { position: relative; }
/* Sin línea de ruta en el hero desde el 2-nov-2026: solo el pulso del pin. */
/* Bordes de la ilustración: se funden con la página en vez de cortar en seco */
/* La ilustración va tal cual: sin máscaras, fundidos ni recuadros. */
/* Pulso sobre el pin REAL del palacio (centro de su cabeza: 65,0 % · 37,3 % de la ilustración).
   Solo un anillo que se abre dos veces, 1000 ms tras el render; el pin dibujado no se toca. */
.tt26-hero__pulse {
	position: absolute; left: 65%; top: 37.3%; width: 7.5%; aspect-ratio: 1; border-radius: 50%;
	transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
	border: 3px solid var(--tt-yellow); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tt-ink) 18%, transparent);
}

/* ---------- 02 · RAIL ---------- */
.tt26-rail__tools { display: flex; align-items: center; gap: var(--sp-3); }
.tt26-rail__controls { display: flex; gap: var(--sp-1); }
.tt26-rail__controls.is-off { visibility: hidden; } /* reserva su sitio: mostrarlas no mueve nada (CLS 0) */
.tt26-rail__viewport {
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
	scroll-padding-inline: var(--gutter);
}
.tt26-rail__viewport::-webkit-scrollbar { display: none; }
.tt26-rail__track {
	display: flex; gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
	padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
	padding-block: 10px 14px; width: max-content; /* solo lo justo para la elevación al pasar el ratón */
}
.tt26-card { width: min(78vw, 300px); scroll-snap-align: start; flex: none; }
.tt26-card__link { display: block; border-radius: var(--r-24); }
.tt26-card__media {
	position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-24);
	background: var(--tt-lilac-100); isolation: isolate;
	transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.tt26-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Velo morado SOLO en el tercio inferior; la foto no se toca y la mitad de arriba queda limpia.
   Bajo el texto (hasta el 31 %, donde empieza un título de dos líneas) el velo es ≥ 85 %, así que
   el blanco cumple AA aunque la foto sea clara (peor caso ≈ 4,8:1). */
.tt26-card__veil {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--tt-purple) 94%, transparent) 0%,
		color-mix(in srgb, var(--tt-purple) 85%, transparent) 31%,
		color-mix(in srgb, var(--tt-purple) 34%, transparent) 41%,
		color-mix(in srgb, var(--tt-purple) 0%, transparent) 50%);
}
.tt26-card__badge {
	position: absolute; left: 14px; top: 14px; padding: .4rem .75rem; border-radius: var(--r-pill);
	background: var(--tt-yellow); color: var(--tt-ink); font-size: .8125rem; font-weight: 700; line-height: 1;
}
/* Precio de los tours de pago: como el chip de precio de las tarjetas de /tours/ (blanco, texto oscuro). */
.tt26-card__badge--price { background: var(--tt-white); }
.tt26-card__play {
	position: absolute; right: 14px; top: 14px; width: 52px; height: 52px; border-radius: 50%;
	display: grid; place-items: center; background: var(--tt-yellow); color: var(--tt-ink);
	box-shadow: 0 0 0 2px var(--tt-ink);
	opacity: 0; transform: scale(.85); transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.tt26-card__play .tt26-icon { width: 22px; height: 22px; margin-left: 2px; }
.tt26-card__body { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 0 18px 18px; color: var(--tt-white); }
.tt26-card__title {
	font-size: 1.1875rem; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; text-wrap: balance;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	text-shadow: 0 1px 2px color-mix(in srgb, var(--tt-ink) 22%, transparent);
}
.tt26-card__meta { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .45rem; font-size: .9375rem; font-weight: 500; color: var(--tt-white); }
/* Cada dato lleva su separador detrás (::after) y no se parte: si la línea salta, ninguna empieza por «·». */
.tt26-card__meta > span { white-space: nowrap; }
.tt26-card__meta > span:first-child { white-space: normal; }
.tt26-card__meta > span:not(:last-child)::after { content: "·"; margin-left: .5rem; color: var(--tt-yellow); font-weight: 900; }
.tt26-card__link:hover .tt26-card__media,
.tt26-card__link:focus-visible .tt26-card__media { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.tt26-card__link:hover .tt26-card__play,
.tt26-card__link:focus-visible .tt26-card__play { opacity: 1; transform: none; }
@media (hover: none) { .tt26-card__play { opacity: 1; transform: none; width: 44px; height: 44px; } }

/* «Explora por destino» (23-oct-2026, SEO/GEO): enlaces de texto bajo las tarjetas, con el aspecto de los
   botones de los filtros de /tours/ (tours.css, .tt26t-filter__btn): píldora blanca, borde suave, 44 px. */
.tt26-places { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-5); }
.tt26-places__title { font-size: var(--fs-small); font-weight: 700; color: var(--tt-ink-soft); margin-right: var(--sp-1); }
.tt26-places__list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tt26-places__chip {
	display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.1rem;
	border-radius: var(--r-pill); border: 1.5px solid var(--tt-line); background: var(--tt-white); color: var(--tt-ink);
	font-weight: 700; font-size: .9375rem; line-height: 1.2; white-space: nowrap;
	transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.tt26-places__chip:hover { border-color: var(--tt-purple); color: var(--tt-purple); }
@media (max-width: 599.98px) { .tt26-places__title { width: 100%; } }

/* ---------- 03 · CÓMO FUNCIONA ---------- */
/* Cuatro paradas sobre UNA ruta: las tres primeras en morado y la cuarta en amarillo (la meta).
   Más presencia sin tarjetas: círculos de 88 px (76 en móvil) con halo lila e iconos de 38 px. */
.tt26-how { --step: 76px; --step-icon: 34px; }
.tt26-how__title { text-align: center; margin-bottom: var(--sp-6); }
.tt26-how__title span { white-space: nowrap; }
.tt26-how__title span:nth-child(2n) { color: var(--tt-purple); }
.tt26-how__track { position: relative; }
.tt26-how__route { position: absolute; pointer-events: none; overflow: visible; }
.tt26-how__route path { fill: none; stroke: color-mix(in srgb, var(--tt-purple) 42%, var(--tt-white)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tt26-how__route--h { display: none; }
.tt26-how__route--v { left: 0; top: calc(var(--step) / 2); width: var(--step); height: calc(100% - var(--step)); }
.tt26-steps { display: grid; gap: var(--sp-5); position: relative; }
.tt26-step { display: grid; grid-template-columns: var(--step) 1fr; column-gap: var(--sp-3); align-items: start; align-content: start; }
.tt26-step__icon {
	grid-row: span 3; width: var(--step); height: var(--step); border-radius: 50%; display: grid; place-items: center;
	background: var(--tt-purple); color: var(--tt-white); position: relative; z-index: 1;
	box-shadow: 0 0 0 8px var(--tt-lilac-50);
}
.tt26-step:last-child .tt26-step__icon { background: var(--tt-yellow); color: var(--tt-ink); box-shadow: 0 0 0 8px color-mix(in srgb, var(--tt-yellow) 24%, var(--tt-white)); }
.tt26-step__icon .tt26-icon { width: var(--step-icon); height: var(--step-icon); }
.tt26-step__num { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; color: var(--tt-purple); margin-top: 8px; }
.tt26-step__title { font-size: clamp(1.5rem, 1.2rem + .9vw, 2.125rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; margin: .25rem 0 .4rem; }
.tt26-step__text { color: var(--tt-ink-soft); max-width: 26ch; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); }

/* ---------- 04 · 100 METROS ---------- */
.tt26-unlock__steps { margin-top: var(--sp-4); display: grid; gap: .35rem; font-size: var(--fs-lead); font-weight: 500; color: var(--tt-on-purple-soft); }
.tt26-unlock__steps li:last-child { color: var(--tt-yellow); font-weight: 700; }
.tt26-unlock__art { margin-inline: calc(-1 * var(--gutter)); }
.tt26-unlock__frame { position: relative; }
/* El chip cubre el «100 m» dibujado en el móvil de la ilustración (medido: centro 76 % / 66 %) */
.tt26-unlock__ui { position: absolute; inset: 0; pointer-events: none; font-size: clamp(.75rem, .55rem + .7vw, 1rem); }
.tt26-unlock__chip {
	position: absolute; right: 14%; top: 66%; transform: translateY(-50%);
	display: inline-flex; align-items: center; gap: .45em; padding: .5em .95em .5em .6em;
	background: var(--tt-white); color: var(--tt-ink); border-radius: var(--r-pill);
	box-shadow: 0 0 0 2px var(--tt-ink); font-weight: 900; font-size: 1.15em; line-height: 1; white-space: nowrap;
}
.tt26-unlock__pin { width: 1.2em; display: block; transform-origin: 50% 100%; }
.tt26-unlock__pin path { fill: var(--tt-yellow); stroke: var(--tt-ink); stroke-width: 2; }
.tt26-unlock__pin circle { fill: var(--tt-white); stroke: var(--tt-ink); stroke-width: 2; }
.tt26-unlock__dist { font-variant-numeric: tabular-nums; min-width: 3.3ch; }
.tt26-unlock__status, .tt26-unlock__play {
	position: absolute; right: 14%; display: inline-flex; align-items: center; gap: .4em;
	border-radius: var(--r-pill); font-weight: 700; line-height: 1; white-space: nowrap;
	transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.tt26-unlock__status { top: calc(66% + 2.3em); padding: .55em .9em; background: var(--tt-ink); color: var(--tt-white); text-transform: uppercase; letter-spacing: .08em; font-size: .78em; }
.tt26-unlock__status .tt26-icon { width: 1.2em; height: 1.2em; color: var(--tt-yellow); }
.tt26-unlock__play { top: calc(66% + 4.6em); padding: .6em 1.1em .6em .8em; background: var(--tt-yellow); color: var(--tt-ink); font-size: 1em; box-shadow: 0 0 0 2px var(--tt-ink); }
.tt26-unlock__play .tt26-icon { width: 1.2em; height: 1.2em; }

/* ---------- 05 · DALE PLAY ---------- */
/* El escenario mide lo mismo que el móvil: el titular queda centrado respecto a él */
.tt26-video { --phone-w: min(64vw, 280px); }
.tt26-video__title { margin-bottom: var(--sp-3); }
.tt26-video__stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
/* Móvil: marco dibujado en CSS (bisel y esquinas); dentro, el carril de capturas. La isla y la barra
   de estado vienen en las propias capturas, así que el marco no las repite. Pantalla 891 × 1910. */
.tt26-phone {
	position: relative; z-index: 2; width: var(--phone-w); padding: calc(var(--phone-w) * .035);
	background: var(--tt-ink); border-radius: calc(var(--phone-w) * .15);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tt-white) 16%, transparent), 0 28px 56px -18px color-mix(in srgb, var(--tt-purple) 45%, transparent);
}
.tt26-phone__screen { position: relative; overflow: hidden; border-radius: calc(var(--phone-w) * .115); aspect-ratio: 891 / 1910; background: var(--tt-white); }
.tt26-phone__track {
	display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: auto;
}
.tt26-phone__track::-webkit-scrollbar { display: none; }
.tt26-phone__track:focus-visible { outline-offset: 6px; }
.tt26-phone__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.tt26-phone__slide picture, .tt26-phone__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Puntos: 24 px de diana (WCAG 2.2 AA), punto visible de 10 px */
.tt26-dots { position: relative; z-index: 2; display: flex; gap: 2px; }
.tt26-dots__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.tt26-dots__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tt-lilac-300); transition: background-color var(--dur-hover) var(--ease), width var(--dur-hover) var(--ease); }
.tt26-dots__dot[aria-current]::before { background: var(--tt-purple); width: 24px; border-radius: 5px; }
.tt26-video__cover {
	position: absolute; z-index: 1; width: calc(var(--phone-w) * .66); aspect-ratio: 4 / 5; border-radius: var(--r-24); overflow: hidden;
	background: var(--tt-lilac-100); box-shadow: var(--shadow-soft);
}
.tt26-video__cover img { width: 100%; height: 100%; object-fit: cover; }
.tt26-video__cover--1 { left: 0; top: 12%; transform: rotate(-7deg); }
.tt26-video__cover--2 { right: 0; bottom: 10%; transform: rotate(6deg); }
.tt26-video__coverplay { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-yellow); color: var(--tt-ink); }
.tt26-video__coverplay .tt26-icon { width: 20px; height: 20px; margin-left: 2px; }

/* ---------- 06 · RANKING ---------- */
.tt26-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-4); }
.tt26-tags li {
	padding: .45rem .9rem; border-radius: var(--r-pill); font-weight: 700; font-size: .9375rem;
	border: 1.5px solid color-mix(in srgb, var(--tt-white) 40%, transparent); color: var(--tt-white);
}
.tt26-ranking__art { margin-inline: calc(-1 * var(--gutter)); }
.tt26-ranking__art picture { clip-path: inset(0 0 0 0); transition: clip-path 520ms var(--ease); }

/* ---------- 07 · PASAPORTE ---------- */
.tt26-passport__art { margin-inline: calc(-1 * var(--gutter)); }
.tt26-passport__frame { position: relative; }
.tt26-passport__art picture { transition: transform 700ms var(--ease); }
/* Sello sobre la casilla libre «?» (medido sobre pasaporte-1059: centro 76,2 % / 77,8 %) */
.tt26-stamp {
	position: absolute; left: 76.2%; top: 77.8%; width: 14.25%; aspect-ratio: 1;
	transform: translate(-50%, -50%) rotate(-6deg);
}
.tt26-stamp svg { width: 100%; height: 100%; overflow: visible; }
.tt26-stamp rect { fill: var(--tt-yellow); stroke: var(--tt-ink); stroke-width: 2.2; stroke-dasharray: 3.2 2.6; }
.tt26-stamp__pin { fill: var(--tt-purple); stroke: var(--tt-ink); stroke-width: 2; }
.tt26-stamp__hole { fill: var(--tt-yellow); stroke: var(--tt-ink); stroke-width: 2; }

/* ---------- 08 · CREADORES ----------
   Fondo blanco (antes crema): la nube blanca del borde superior de la ilustración formaba una mancha
   sobre el crema. Sin overflow oculto: la ilustración se ve entera. */
.tt26-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); }
.tt26-creators__art { margin-inline: calc(-1 * var(--gutter)); }

/* ---------- 09 · CTA FINAL ---------- */
.tt26-main > .tt26-final { padding-bottom: 0; overflow: hidden; }
.tt26-final__grid { position: relative; display: grid; gap: var(--sp-5); }
.tt26-final__copy { position: relative; z-index: 2; }
.tt26-final__title { margin-bottom: var(--sp-5); }
.tt26-final__q { display: block; color: var(--tt-yellow); }
.tt26-final__badges { display: flex; }
.tt26-final__art { position: relative; z-index: 0; margin-inline: calc(-1 * var(--gutter)); }
/* Ruta: la traza home.js desde la ruta blanca de la ilustración hasta las insignias. Solo en
   escritorio (en móvil la ilustración queda debajo y la unión sería una vertical pegada al borde). */
.tt26-final__route[hidden] { display: none; }
@media (max-width: 1023.98px) { .tt26-final__route { display: none; } }
.tt26-final__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tt26-final__path { fill: none; stroke: var(--tt-white); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tt26-final__goal { fill: var(--tt-yellow); stroke: var(--tt-ink); stroke-width: 2; }

/* ---------- DEL BLOG (23-oct-2026, SEO/GEO) ----------
   Tarjetas del carrusel (.tt26-card) con las 3 últimas entradas. El título admite 3 líneas: con el velo
   del carrusel el texto sigue sobre la zona ≥ 85 % (31 % inferior de la tarjeta 4:5) y el blanco cumple AA.
   Sin imagen destacada: la tarjeta va solo con texto, sobre morado. */
.tt26-blog .tt26-card__title { -webkit-line-clamp: 3; }
.tt26-blog__more { align-items: center; gap: .35rem; }
.tt26-blog__more .tt26-icon { width: 1em; height: 1em; transition: transform var(--dur-hover) var(--ease); }
.tt26-card__link:hover .tt26-blog__more .tt26-icon, .tt26-card__link:focus-visible .tt26-blog__more .tt26-icon { transform: translateX(3px); }
.tt26-blog__card--text .tt26-card__media { background: var(--tt-purple); }
.tt26-blog__card--text .tt26-card__title { font-size: 1.375rem; -webkit-line-clamp: 6; text-shadow: none; }

/* ---------- PREGUNTAS FRECUENTES (23-oct-2026, SEO/GEO) ----------
   Antes del CTA final, sobre blanco. Mismo diseño que las FAQ de /tours/ (tours.css, .tt26t-faq__*), con
   clases propias: tours.css no se carga en la home. Acordeón nativo; el signo + pasa a − al abrir. */
.tt26-faq__grid { display: grid; gap: var(--sp-5); }
.tt26-faq__list { display: grid; gap: .75rem; }
.tt26-faq__item { border-radius: var(--r-18); background: var(--tt-white); border: 1px solid var(--tt-line); }
.tt26-faq__q {
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
	min-height: 56px; padding: 1rem 1.25rem; cursor: pointer; font-weight: 700; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.35;
}
.tt26-faq__q::-webkit-details-marker { display: none; }
.tt26-faq__sign { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tt-lilac-100); }
.tt26-faq__sign::before, .tt26-faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--tt-purple); transition: transform var(--dur-hover) var(--ease); }
.tt26-faq__sign::after { transform: rotate(90deg); }
.tt26-faq__item[open] .tt26-faq__sign { background: var(--tt-purple); }
.tt26-faq__item[open] .tt26-faq__sign::before, .tt26-faq__item[open] .tt26-faq__sign::after { background: var(--tt-white); }
.tt26-faq__item[open] .tt26-faq__sign::after { transform: rotate(0deg); }
.tt26-faq__a { padding: 0 1.25rem 1.25rem; color: var(--tt-ink-soft); max-width: 62ch; }
.tt26-faq__a a { color: var(--tt-purple); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   MOVIMIENTO · solo con JS y sin «reducir movimiento». Sin JS todo se ve.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

	/* Hero: entrada al cargar (brief §6). Sin bucles, sin rebotes. */
	.tt26-hero__l1      { animation: tt26-rise 640ms var(--ease) 150ms both; }
	.tt26-hero__l2      { animation: tt26-rise 640ms var(--ease) 320ms both; }
	.tt26-hero__lead, .tt26-hero__actions { animation: tt26-rise 640ms var(--ease) 460ms both; }
	.tt26-hero__img     { animation: tt26-art 900ms var(--ease) 300ms both; }
	/* Pulso del pin: home.js lo dispara una vez, 1000 ms tras el render */
	.tt26-hero__pulse.is-on { animation: tt26-pulse 900ms var(--ease) 2 both; }

	/* Revelados por sección: una sola vez, al entrar en pantalla */
	.js [data-reveal].is-armed:not(.is-in) { opacity: 0; transform: translateY(var(--move-y)); }
	.js [data-reveal="slide"].is-armed:not(.is-in) { transform: translateX(36px); }
	.js [data-reveal] { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }

	/* Cómo funciona: la ruta se dibuja y los pasos aparecen a su paso */
	.js .tt26-how__track.is-armed:not(.is-in) .tt26-how__route path { stroke-dashoffset: 1; }
	.js .tt26-how__track .tt26-how__route path { transition: stroke-dashoffset var(--dur-route) var(--ease); }
	.js .tt26-how__track.is-armed:not(.is-in) .tt26-step { opacity: 0; transform: translateY(16px); }
	.js .tt26-how__track .tt26-step { transition: opacity 520ms var(--ease) calc(160ms + var(--i) * 260ms), transform 520ms var(--ease) calc(160ms + var(--i) * 260ms); }

	/* 100 m: estado inicial antes de la cuenta atrás */
	.js .tt26-unlock__art.is-armed:not(.is-unlocked) .tt26-unlock__status,
	.js .tt26-unlock__art.is-armed:not(.is-unlocked) .tt26-unlock__play { opacity: 0; transform: translateY(8px) scale(.96); }
	.js .tt26-unlock__art.is-unlocked .tt26-unlock__play { transition-delay: 380ms; }

	/* Ranking: 4º → 3º → 2º → 1º por tramos medidos en la ilustración */
	.js .tt26-ranking__art[data-step="0"] picture { clip-path: inset(0 100% 0 0); }
	.js .tt26-ranking__art[data-step="1"] picture { clip-path: inset(0 78.7% 0 0); }
	.js .tt26-ranking__art[data-step="2"] picture { clip-path: inset(0 53.5% 0 0); }
	.js .tt26-ranking__art[data-step="3"] picture { clip-path: inset(0 29.9% 0 0); }

	/* Pasaporte: sube ~20 px y cae un sello una sola vez */
	.js .tt26-passport__art.is-armed:not(.is-in) picture { transform: translateY(22px); }
	.js .tt26-passport__art.is-armed:not(.is-in) .tt26-stamp { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(-14deg); }
	.js .tt26-passport__art .tt26-stamp { transition: opacity 260ms var(--ease) 650ms, transform 520ms var(--ease) 650ms; }
	/* Escritorio, escena en espejo: cada columna entra desde su lado. Texto (derecha) desde la derecha;
	   pasaporte (izquierda) desde la izquierda y subiendo. Con las columnas apiladas (< 1024 px) la
	   entrada sigue siendo vertical. */
	@media (min-width: 1024px) {
		.js .tt26-passport .tt26-split__copy[data-reveal].is-armed:not(.is-in) { transform: translateX(var(--move-x)); }
		.js .tt26-passport__art.is-armed:not(.is-in) picture { transform: translate(calc(-1 * var(--move-x)), 22px); }
	}

	/* CTA final: la ruta se completa despacio hacia la descarga */
	.js .tt26-final.is-armed:not(.is-in) .tt26-final__path { stroke-dashoffset: 1; }
	.js .tt26-final .tt26-final__path { transition: stroke-dashoffset 1400ms var(--ease) 200ms; }
	/* la meta amarilla aparece cuando la ruta llega a las insignias */
	.js .tt26-final__goal { transform-box: fill-box; transform-origin: center; transition: opacity 260ms var(--ease) 1500ms, transform 420ms var(--ease) 1500ms; }
	.js .tt26-final.is-armed:not(.is-in) .tt26-final__goal { opacity: 0; transform: scale(.3); }
}

/* Hero con vida (reunión de socios, 26-oct-2026): empieza cuando la página ha cargado (motion.js añade
   html.tt26-alive) para no competir con el LCP, solo transform y sin cambiar la maquetación (CLS 0).
   Escritorio: zoom lentísimo anclado en el pin del palacio, donde termina la ruta, para que la ruta no se
   despegue. Móvil y tablet (sin ruta): flotación de ±7 px. La entrada tt26-art se repite en la lista con
   los mismos valores para que no se reinicie al añadir la segunda animación. */
@media (prefers-reduced-motion: no-preference) {
	.tt26-alive .tt26-hero__img { transform-origin: 65% 37.3%; animation: tt26-art 900ms var(--ease) 300ms both, tt26-breathe 7s ease-in-out 200ms infinite alternate; }
	.tt26-alive .tt26-hero__pulse.is-on { animation: tt26-pulse 900ms var(--ease) 2 both, tt26-glow 6.2s ease-in-out 2.4s infinite; }
	@media (max-width: 1023.98px) {
		.tt26-alive .tt26-hero__img { animation: tt26-art 900ms var(--ease) 300ms both, tt26-float 6s ease-in-out 200ms infinite; }
	}
}
@keyframes tt26-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes tt26-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* Latido muy suave del pin al que llega la ruta, desfasado de la respiración de la ilustración */
@keyframes tt26-glow { 0%, 100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 35% { opacity: .55; } 70% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
@keyframes tt26-art  { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes tt26-draw { to { stroke-dashoffset: 0; } }
@keyframes tt26-pulse { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }
/* El pin del chip no se centra con translate: su «pop» es solo de escala */
@keyframes tt26-pin-pop { 0% { transform: scale(.75); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
	.js .tt26-unlock__art.is-popping .tt26-unlock__pin { animation: tt26-pin-pop 520ms var(--ease) both; }
}

/* En pantallas táctiles el rail se recorre con el dedo: sin flechas */
@media (hover: none) { .tt26-rail__controls { display: none !important; } }

/* — Búsqueda sin resultados → captación de creadores (25-oct-2026; components/no-results.php). Lo usan el buscador
   de /tours/, la búsqueda general y las ciudades que no existen; las tarjetas son las del carrusel en rejilla — */
.tt26-nores { display: grid; gap: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.tt26-nores__card {
	display: grid; justify-items: start; gap: var(--sp-3);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: var(--r-24);
	background: var(--tt-lilac-50); border: 1px solid var(--tt-line);
}
.tt26-nores__title { max-width: 24ch; }
.tt26-nores__text { max-width: 60ch; }
/* El lugar puede ser largo («Sant Joan de les Abadesses»): el botón parte la línea en vez de salirse */
.tt26-nores__btn { white-space: normal; text-align: left; max-width: 100%; line-height: 1.2; }
.tt26-nores__more-title { margin-bottom: var(--sp-3); font-size: var(--fs-h3); font-weight: 900; letter-spacing: -.02em; }
.tt26-nores__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.tt26-nores__grid > .tt26-card { width: auto; scroll-snap-align: none; }
@media (min-width: 900px) {
	.tt26-nores__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* son siempre tres: sin columna vacía */
}
@media (max-width: 767.98px) {
	.tt26-nores__grid .tt26-card__media { aspect-ratio: 4 / 3; }
}

/* ===========================================================================================
   Tarjeta de tour con el lenguaje de la app (reunión de socios, 26-oct-2026). Refs: capturas de
   las tiendas (refs/stores-20261022/01-explore y 02-tour). Foto horizontal limpia, sin velo ni texto
   encima, radio grande y sombra suave; debajo, título en negrita, lugar con pin en gris y chips de
   categoría / duración / checkpoints. Precio (e idioma) en chips sobre la foto, arriba a la izquierda;
   play blanco abajo a la derecha, como en la app. Solo tarjetas de TOUR (.tt26-card__link--tour): las
   de destinos, blog y escenas conservan la tarjeta con velo.
   =========================================================================================== */
.tt26-card__link--tour { display: flex; flex-direction: column; gap: 14px; height: 100%; border-radius: 20px; }
.tt26-card__link--tour .tt26-card__media {
	aspect-ratio: 16 / 10; border-radius: 20px; background: var(--tt-lilac-100);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--tt-ink) 8%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--tt-ink) 32%, transparent);
}
.tt26-card__link--tour .tt26-card__badge,
.tt26-card__link--tour .tt26t-card__tags { left: 12px; top: 12px; }
.tt26-card__link--tour .tt26-card__badge { box-shadow: 0 1px 3px color-mix(in srgb, var(--tt-ink) 18%, transparent); }
.tt26-card__link--tour .tt26-card__play {
	top: auto; bottom: 12px; right: 12px; width: 44px; height: 44px; background: var(--tt-white); color: var(--tt-ink);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--tt-ink) 22%, transparent);
}
.tt26-card__link--tour .tt26-card__play .tt26-icon { width: 18px; height: 18px; }
.tt26-card__info { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; color: var(--tt-ink); }
.tt26-card__link--tour .tt26-card__title {
	font-size: 1.125rem; line-height: 1.28; font-weight: 700; letter-spacing: -.01em; text-shadow: none; color: var(--tt-ink);
	-webkit-line-clamp: 2; min-height: 2.56em; /* 2 líneas reservadas: los chips quedan alineados en la rejilla */
}
.tt26-card__place { display: flex; align-items: center; gap: 5px; font-size: .9375rem; font-weight: 500; color: var(--tt-ink-soft); }
.tt26-card__place .tt26-icon { width: 16px; height: 16px; flex: none; color: var(--tt-ink-soft); }
.tt26-card__place > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt26-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tt26-card__chip {
	display: inline-flex; align-items: center; min-height: 28px; padding: 0 .65rem; border-radius: var(--r-pill);
	background: var(--tt-lilac-50); color: var(--tt-purple-ink); font-size: .8125rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.tt26-card__chip--cat { background: var(--tt-purple); color: var(--tt-white); }
.tt26-card__link--tour:hover .tt26-card__media,
.tt26-card__link--tour:focus-visible .tt26-card__media {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px color-mix(in srgb, var(--tt-ink) 8%, transparent), 0 18px 34px -14px color-mix(in srgb, var(--tt-ink) 38%, transparent);
}
.tt26-card__link--tour:hover .tt26-card__title { color: var(--tt-purple); }
/* Los recortes 4/3 que tenían las tarjetas en móvil no aplican a la de tour */
.tt26t-grid .tt26-card__link--tour .tt26-card__media,
.tt26-nores__grid .tt26-card__link--tour .tt26-card__media { aspect-ratio: 16 / 10; }

/* — Cómo funciona con ilustraciones (29-oct-2026, fase E: components/how-it-works-v2.php) —
   Clases propias (tt26-how3): no tocan el bloque actual (tt26-how__track, tt26-steps…), que sigue en el público
   hasta publicar. Móvil: apilado, ilustración arriba (máx. 300 px). Escritorio: 3 columnas. */
.tt26-how3__head { max-width: 48rem; margin-inline: auto; text-align: center; }
.tt26-how3 .tt26-how__title { margin-bottom: var(--sp-3); }
.tt26-how3 .tt26-how__sub { margin-bottom: 0; }
.tt26-how3__steps { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
.tt26-how3__step { display: grid; justify-items: center; align-content: start; text-align: center; }
.tt26-how3__art { width: 100%; max-width: 300px; margin-bottom: var(--sp-4); }
.tt26-how3__art img { width: 100%; height: auto; object-fit: contain; }
.tt26-how3__num { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; color: var(--tt-purple); }
.tt26-how3__title { font-size: clamp(1.5rem, 1.2rem + .9vw, 2.125rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; margin: .25rem 0 .5rem; text-wrap: balance; }
.tt26-how3__text { color: var(--tt-ink-soft); max-width: 30ch; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: var(--lh-body); }
.tt26-how3__cta { display: flex; justify-content: center; margin-top: var(--sp-8); }
.tt26-how3__btn { background: transparent; color: var(--tt-purple); box-shadow: inset 0 0 0 2px var(--tt-purple); }
.tt26-how3__btn:hover { background: var(--tt-lilac-50); }
@media (min-width: 1024px) {
	.tt26-how3__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
	.tt26-how3__art { max-width: 360px; }
}
@media (prefers-reduced-motion: no-preference) {
	/* Entrada escalonada, como los pasos de antes: cada columna con su retardo (--i) */
	.js .tt26-how3__step[data-reveal] { transition-delay: calc(120ms + var(--i) * 200ms); }
}