/* =========================================================================
   Home 2026 · responsive (brief §10). Móvil diseñado a propósito en home.css;
   aquí, las ampliaciones para tablet y escritorio (referencia 1440 px) y los
   ajustes por ALTURA de ventana (portátiles 1366×768, 1440×800: 620–700 px útiles).
   ========================================================================= */

/* — Cabecera: menú desplegable hasta 1100 px (el idioma pasa al menú). Con el logo oficial a 60 px
   (255 px de ancho) los 4 enlaces + idioma + botón no caben por debajo de 1100 — */
@media (max-width: 1099.98px) {
	.tt26-nav, .tt26-lang { display: none; }
	.tt26-menu { display: block; }
	.tt26-header__cta { margin-left: auto; }
	.tt26-search { margin-left: auto; }
	.tt26-search + .tt26-header__cta { margin-left: 0; }
	.tt26-search__panel { position: fixed; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 8px); width: auto; max-width: 640px; margin-inline: auto; }
}
@media (min-width: 1100px) and (max-width: 1199.98px) {
	.tt26-header__inner { gap: 1.25rem; }
	.tt26-nav ul { gap: 1.25rem; }
}
/* Móvil (< 600 px): el botón «Descargar» pasa al menú para que el logo quepa con el claim legible
   (decisión de Oriol, 22-oct-2026). Cabecera de 76 px. */
@media (max-width: 599.98px) {
	:root { --header-h: 76px; }
	.tt26-header__cta { display: none; }
	.tt26-menu { margin-left: auto; }
	.tt26-search ~ .tt26-menu { margin-left: 0; }
	.tt26-menu__cta { display: inline-flex; }

	.tt26-header__inner { gap: var(--sp-1); }
}

/* — Móvil: cada ilustración con un encuadre decidido, no solo reducida —
   · Hero: zoom suave (112 %) centrado y sin el cielo vacío; caben la chica, el play, la ruta
     amarilla y los tres pins del recorrido (73–83 % del ancho).
   · 100 m, ranking, pasaporte, creadores y CTA final: a sangre y SIN recorte. (Hasta la v1.2.0 la
     de 100 m llevaba un zoom del 122 % con overflow oculto que cortaba en recto la vegetación de la
     izquierda; se quita: ninguna ilustración lleva cortes que no estén en el original.) */
@media (max-width: 767.98px) {
	/* Hero: la silueta oficial entera. Es una forma cerrada con pins hasta el 86 % del ancho:
	   recortarla dejaría bordes rectos donde el dibujo es orgánico. */
	.tt26-hero__depth { width: 100%; }
	.tt26-passport__art { margin-inline: calc(-.5 * var(--gutter)); }
	.tt26-hero__actions .tt26-btn { width: 100%; }

	.tt26-unlock__ui { font-size: clamp(.78rem, 3.3vw, .95rem); }

	.tt26-video { --phone-w: min(62vw, 268px); }
	.tt26-video__cover { width: calc(var(--phone-w) * .52); }
}

/* Móvil y tablet: las siluetas orgánicas (hero, ranking, creadores) con medio margen lateral. A sangre,
   su tinta quedaba a 2–5 px del borde de la pantalla y la hoja junto a la mochila parecía cortada en
   recto contra el borde. 100 m y CTA final siguen a sangre: su borde recto es el del póster original. */
@media (max-width: 1023.98px) {
	.tt26-hero__art, .tt26-ranking__art, .tt26-creators__art { margin-inline: calc(-.5 * var(--gutter)); }
}

/* — Tablet — */
@media (min-width: 768px) {
	.tt26-card { width: 300px; }
	.tt26-steps { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); row-gap: var(--sp-6); }
	.tt26-how__route--v { display: none; }
	.tt26-video { --phone-w: 300px; }
	.tt26-video__cover { width: calc(var(--phone-w) * .7); }
	.tt26-passport__art { margin-inline: 0; }
}

/* — Escritorio — */
@media (min-width: 1024px) {
	:root {
		/* alto útil de una escena con «suelo»: ventana − cabecera − relleno superior */
		--scene-h: calc(100vh - var(--header-h) - 1px - var(--section-y));
		--scene-h: calc(100svh - var(--header-h) - 1px - var(--section-y));
		--hero-pt: clamp(.75rem, 3vh - .5rem, 2rem);
		--hero-pb: clamp(1.5rem, 5vh, 3.5rem);
	}

	/* ---------- HERO: CTA e insignias visibles sin scroll desde ~620 px de alto ----------
	   El H1 se limita por la altura (11,4vh) y por la columna (6,6vw); los espacios verticales
	   escalan con vh; la ilustración se limita por la altura pero nunca baja del 45 % del ancho. */
	.tt26-main > .tt26-hero { padding-block: var(--hero-pt) var(--hero-pb); }
	.tt26-hero__grid {
		/* 54/46 hasta 1440 px: CTA + insignias caben en una sola línea (a 1280 px con 52/48 saltaban) */
		grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); gap: 0; align-items: center;
		min-height: min(calc(100vh - var(--header-h) - 1px - var(--hero-pt) - var(--hero-pb)), 900px);
		min-height: min(calc(100svh - var(--header-h) - 1px - var(--hero-pt) - var(--hero-pb)), 900px);
	}
	.tt26-hero__copy { padding-right: var(--sp-4); }
	.tt26-hero__title { font-size: clamp(3rem, min(1.15rem + 5.3vw, 6.6vw, 11.4vh), 6rem); margin-bottom: clamp(1rem, 3.4vh, 2rem); }
	.tt26-hero__lead { margin-bottom: clamp(1.25rem, 4.2vh, 2.5rem); }
	.tt26-hero__actions { column-gap: clamp(1rem, 1.7vw, 2rem); }
	/* La silueta respira y se sale de la retícula por la derecha (hasta el borde de la ventana) y un
	   poco hacia arriba y abajo del bloque de texto; por la izquierda solo entra en el hueco entre
	   columnas, sin tocar el titular (comprobado midiendo la tinta de la ilustración). */
	.tt26-hero__art { margin-inline: -2% calc(-1 * var(--gutter) - max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2)); margin-block: -2.5rem -1.5rem; }
	.tt26-hero__depth {
		margin-left: auto;
		width: max(45vw, min(100%, 880px, calc((100vh - var(--header-h) - 1rem) * 1.06)));
		width: max(45vw, min(100%, 880px, calc((100svh - var(--header-h) - 1rem) * 1.06)));
	}

	/* ---------- Escenas divididas: copy a la izquierda, ilustración grande a la derecha ---------- */
	.tt26-h2--xl { font-size: clamp(2.5rem, min(1.1rem + 4.1vw, 9.6vh), 5rem); }
	.tt26-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); }
	.tt26-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.tt26-split--reverse .tt26-split__copy { order: 2; }
	.tt26-split--reverse .tt26-split__art { order: 1; }
	.tt26-split--wide-art .tt26-split__art,
	.tt26-creators__art { margin-inline: 0 calc(-1 * var(--gutter) - max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2)); }

	/* Escenas con suelo (100 m, ranking, creadores, CTA final): ilustración abajo y texto centrado
	   en lo que queda. La ilustración se limita por la altura: la escena entera cabe en una pantalla. */
	.tt26-split--floor, .tt26-split--bottom { align-items: end; }
	.tt26-split--floor .tt26-split__copy,
	.tt26-split--bottom .tt26-split__copy { align-self: center; padding-bottom: var(--section-y); }
	.tt26-unlock .tt26-split__art,
	.tt26-ranking .tt26-split__art { margin-left: 0; }
	.tt26-unlock__frame { width: min(100%, calc(var(--scene-h) * 1.2104)); margin-left: auto; }
	.tt26-unlock__ui { font-size: clamp(.8rem, .3rem + .62vw, 1.05rem); }
	.tt26-ranking__art picture { width: min(100%, calc(var(--scene-h) * 1.1568)); margin-left: auto; }
	/* Creadores: viñeta oficial entera y grande: nunca menos del 45 % del ancho de la ventana. Con
	   ese mínimo y el relleno vertical reducido cabe en una pantalla desde 1366 × 768; en ventanas más
	   bajas (1280 × 620) manda el 45 % y la escena pasa un poco de la pantalla. 1,0709 = ancho/alto. */
	.tt26-main > .tt26-creators { --creators-y: clamp(2.5rem, 6vh, var(--section-y)); padding-block: var(--creators-y); }
	.tt26-creators__art picture {
		width: clamp(45vw, calc((100vh - var(--header-h) - 1px - 2 * var(--creators-y)) * 1.0709), 100%);
		width: clamp(45vw, calc((100svh - var(--header-h) - 1px - 2 * var(--creators-y)) * 1.0709), 100%);
		margin-left: auto;
	}

	/* Pasaporte EN ESPEJO (22-oct): ilustración a la izquierda, pegada al borde izquierdo del contenedor,
	   y texto a la derecha. Mismas columnas (6/5) y mismo aire que con el texto a la izquierda: el bloque
	   de texto se ajusta a su contenido y se pega al borde derecho, así que el hueco entre ilustración y
	   texto mide lo que medía antes entre texto e ilustración. La imagen NO se voltea (los sellos llevan
	   texto): solo cambia el orden visual. En el HTML el texto sigue primero (lectura, móvil y tablet). */
	.tt26-passport .tt26-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.tt26-passport .tt26-split__art { grid-column: 1; grid-row: 1; }
	.tt26-passport .tt26-split__copy { grid-column: 2; grid-row: 1; justify-self: end; }
	.tt26-passport__frame { width: min(100%, calc((var(--scene-h) - var(--section-y)) * 1.1536)); margin-right: auto; }

	/* Cómo funciona: cuatro paradas en línea sobre UNA ruta horizontal */
	.tt26-how { --step: 88px; --step-icon: 38px; }
	.tt26-how__title { margin-bottom: clamp(3rem, 1rem + 4vw, 5rem); }
	.tt26-steps { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
	.tt26-step { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-inline: var(--sp-2); }
	.tt26-step__icon { grid-row: auto; margin-bottom: var(--sp-4); }
	.tt26-step__num { margin-top: 0; }
	.tt26-step__text { margin-inline: auto; }
	.tt26-how__route--h { display: block; left: 0; right: 0; top: 0; width: 100%; height: var(--step); }

	/* Rail */
	.tt26-card { width: 320px; }

	/* Dale play: el móvil se limita por la altura; el escenario mide lo mismo que él */
	.tt26-video {
		/* alto del móvil ≈ 2,064 × ancho, más 52 px de puntos */
		--phone-w: clamp(260px, calc((100vh - var(--header-h) - 1px - 2 * var(--section-y) - 52px) * .4846), 330px);
		--phone-w: clamp(260px, calc((100svh - var(--header-h) - 1px - 2 * var(--section-y) - 52px) * .4846), 330px);
	}
	.tt26-video__cover { width: calc(var(--phone-w) * .735); }
	/* Los puntos van fuera del flujo: el escenario mide exactamente lo que el móvil y el titular
	   queda centrado respecto a él (y no respecto a móvil + puntos). */
	.tt26-video__stage { gap: 0; }
	.tt26-dots { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); }
	.tt26-video__cover--1 { left: 4%; top: 12%; }
	.tt26-video__cover--2 { right: 4%; bottom: 12%; }

	/* CTA final: ilustración apoyada en el borde inferior; la ruta llega a las insignias */
	.tt26-final__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 0; }
	.tt26-final__copy { align-self: center; padding-bottom: var(--section-y); }
	.tt26-final__art { margin-inline: 0 calc(-1 * var(--gutter) - max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2)); }
	.tt26-final__art picture { width: min(100%, calc(var(--scene-h) * 1.1775)); margin-left: auto; }

	/* Preguntas frecuentes: cabecera a la izquierda (fija mientras se recorre la lista), como en /tours/ */
	.tt26-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: var(--sp-8); }
	.tt26-faq__head { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

@media (min-width: 1440px) {
	.tt26-hero__grid { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
	.tt26-hero__copy { padding-right: var(--sp-6); }
}

/* 24-oct-2026, portada en catalán: «Desbloqueja-la.» no se parte por el guion (quedaba «la.» sola en otra línea y
   la ruta del hero cruzaba el titular). Desde 1440 px el titular catalán va un 10 % más pequeño para que esa palabra
   quepa en su columna (medido: a 1440 px ocupaba 669 px en una columna de 618). En español e inglés no cambia nada. */
@media (min-width: 361px) {
	html[lang="ca"] .tt26-hero__l2 { white-space: nowrap; }
}
@media (min-width: 1440px) {
	html[lang="ca"] .tt26-hero__title { font-size: clamp(2.75rem, calc(.9 * min(1.15rem + 5.3vw, 6.6vw, 11.4vh)), 5.4rem); }
}