/* =========================================================================
   Home 2026 · base: fuentes, reset acotado, tipografía, botones, cabecera, pie.
   Todo vive bajo body.tt26 para no chocar con nada del resto del sitio.
   ========================================================================= */

/* Satoshi · WOFF2 oficiales de Fontshare, sin subconjuntos ni conversiones (ITF FFL v2.0) */
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.woff2")  format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Bold.woff2")    format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Black.woff2")   format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* Respaldo con las medidas de Satoshi (25-oct-2026): mientras Satoshi carga, el texto se pinta con Arial ajustada
   para que ocupe lo mismo, y al cambiar de fuente no se mueve nada (CLS). size-adjust = ancho real de un texto del
   sitio en Satoshi / Arial, medido en Chrome por peso; ascent/descent/line-gap = los de Satoshi (1010/240/100) entre
   ese size-adjust. Va en --tt-font justo detrás de "Satoshi". Donde no hay Arial (Android) se usa la pila de siempre. */
@font-face { font-family: "Satoshi Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; font-style: normal; size-adjust: 97.97%; ascent-override: 103.09%; descent-override: 24.50%; line-gap-override: 10.21%; }
@font-face { font-family: "Satoshi Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500; font-style: normal; size-adjust: 100.72%; ascent-override: 100.28%; descent-override: 23.83%; line-gap-override: 9.93%; }
@font-face { font-family: "Satoshi Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; font-style: normal; size-adjust: 96.93%; ascent-override: 104.20%; descent-override: 24.76%; line-gap-override: 10.32%; }
@font-face { font-family: "Satoshi Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 900; font-style: normal; size-adjust: 100.26%; ascent-override: 100.74%; descent-override: 23.94%; line-gap-override: 9.97%; }

/* Anclas: el borde de la sección queda justo bajo la cabecera fija (alto + 1 px de su línea).
   Con +16 px asomaba una franja del fondo de la sección anterior. */
html.tt26-root { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html.tt26-root { scroll-behavior: auto; } }

body.tt26 {
	margin: 0;
	background: var(--tt-white);
	color: var(--tt-ink);
	font-family: var(--tt-font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
/* Reset con especificidad CERO (:where): cualquier clase de componente le gana sin pelear.
   Con «.tt26 a» (0,1,1) el reset pisaba el color de los botones y los márgenes de los títulos. */
:where(.tt26) *, :where(.tt26) *::before, :where(.tt26) *::after { box-sizing: border-box; }
:where(.tt26) :where(img, svg, picture) { display: block; max-width: 100%; }
:where(.tt26) img { height: auto; }
:where(.tt26) :where(h1, h2, h3, p, figure, ul, ol) { margin: 0; }
:where(.tt26) :where(ul, ol)[role="list"] { list-style: none; padding: 0; }
:where(.tt26) a { color: inherit; text-decoration: none; }
:where(.tt26) button { font: inherit; color: inherit; }

/* Foco visible y claro en todo (brief §18) */
.tt26 :focus-visible { outline: 3px solid var(--tt-purple); outline-offset: 3px; border-radius: 6px; }
.tt26 .tt26-scene--purple :focus-visible { outline-color: var(--tt-yellow); }

.tt26-skip {
	position: absolute; left: 1rem; top: -100px; z-index: 100;
	background: var(--tt-ink); color: var(--tt-white); padding: .75rem 1rem; border-radius: var(--r-18); font-weight: 700;
}
.tt26-skip:focus { top: 1rem; }
/* Destino del «Saltar al contenido» (tabindex="-1"): recibe el foco, pero no se dibuja un contorno alrededor
   de toda la página; el siguiente Tab sigue desde el contenido. */
.tt26 .tt26-main:focus, .tt26 .tt26-main:focus-visible { outline: none; }

.tt26-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tt26-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* — Tipografía — */
.tt26-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 900; letter-spacing: -.035em; text-wrap: balance; }
.tt26-h2 { font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 900; letter-spacing: -.03em; text-wrap: balance; }
.tt26-h2--xl { font-size: var(--fs-h2-xl); }
.tt26-lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; color: var(--tt-ink-soft); max-width: 34ch; }
.tt26-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tt-purple); margin-bottom: var(--sp-3); }
.tt26-dot { color: var(--tt-yellow); }

/* — Botones — */
.tt26-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 48px; padding: .75rem 1.5rem; border-radius: var(--r-pill);
	font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap;
	transition: background-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.tt26-btn .tt26-icon { width: 1.15em; height: 1.15em; transition: transform var(--dur-hover) var(--ease); }
.tt26-btn:hover .tt26-icon { transform: translateX(3px); }
.tt26-btn--primary { background: var(--tt-purple); color: var(--tt-white); }
.tt26-btn--primary:hover { background: var(--tt-purple-ink); }
.tt26-btn--sm { min-height: 48px; padding: .7rem 1.2rem; font-size: .9375rem; }
.tt26-btn--lg { min-height: 56px; padding: 1rem 1.75rem; font-size: 1.0625rem; }

.tt26-textlink {
	display: inline-flex; align-items: center; gap: .45em; min-height: 48px;
	font-weight: 700; color: var(--tt-purple);
	text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
	text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
	transition: text-decoration-color var(--dur-hover) var(--ease);
}
.tt26-textlink .tt26-icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-hover) var(--ease); }
.tt26-textlink:hover { text-decoration-color: currentColor; }
.tt26-textlink:hover .tt26-icon { transform: translateX(3px); }

.tt26-iconbtn {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	border: 1.5px solid var(--tt-line); background: var(--tt-white); cursor: pointer;
	transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.tt26-iconbtn:hover { border-color: var(--tt-purple); }
.tt26-iconbtn:disabled { opacity: .35; cursor: default; }

/* — Badges oficiales: el PNG de Google trae su propio margen transparente (41/250) — */
.tt26-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.tt26-badge { display: block; border-radius: 9px; transition: transform var(--dur-hover) var(--ease); }
.tt26-badge:hover { transform: translateY(-2px); }
.tt26-badge--apple img { height: 48px; width: auto; }
.tt26-badge--google { overflow: hidden; height: 48px; }
.tt26-badge--google img { height: 71.4px; width: auto; max-width: none; margin: -11.7px; }

/* — Escenas (fondos) — */
.tt26-scene--purple { background: var(--tt-purple); color: var(--tt-white); }
.tt26-scene--cream  { background: var(--tt-cream); }
.tt26-scene--purple .tt26-lead { color: var(--tt-on-purple-soft); }
.tt26-scene--purple .tt26-eyebrow { color: var(--tt-yellow); }

/* — Cabecera — */
.tt26-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--tt-white) 94%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur-hover) var(--ease);
	animation: tt26-fade 600ms var(--ease) 80ms both;
}
.tt26-header.is-scrolled { border-bottom-color: var(--tt-line); }
.tt26-header__inner { display: flex; align-items: center; gap: var(--sp-3); height: var(--header-h); }
.tt26-header__logo { flex: none; display: block; }
/* Logo oficial con claim: 60 px de alto → letras altas de «unlock the city» a ~11 px (18,5 % del SVG).
   El SVG deja un 12,4 % libre abajo; se baja 3,7 px para centrarlo ópticamente (solo visual). */
.tt26-header__logo img { height: 60px; width: auto; transform: translateY(3.7px); }
.tt26-nav { margin-left: auto; }
.tt26-nav ul { display: flex; gap: var(--sp-4); }
.tt26-nav a { font-weight: 500; font-size: .9375rem; padding: .5rem 0; position: relative; white-space: nowrap; }
.tt26-nav a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
	background: var(--tt-yellow); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease);
}
.tt26-nav a:hover::after { transform: scaleX(1); }

/* Selector de idioma (2-nov-2026): botón compacto «ES ▾» y desplegable con «ES · Español», «EN · English»… El menú
   se posiciona en absoluto (no mueve nada al abrirse). Sin JavaScript se abre con el foco o al pasar el ratón. */
.tt26-lang { position: relative; flex: none; }
.tt26-lang__btn {
	display: inline-flex; align-items: center; gap: .3rem; height: 40px; padding: 0 .65rem 0 .85rem; border: 0; border-radius: var(--r-pill);
	background: var(--tt-lilac-50); color: var(--tt-ink); font: 700 .8125rem/1 var(--tt-font); letter-spacing: .06em; cursor: pointer;
	transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.tt26-lang__btn:hover, .tt26-lang.is-open .tt26-lang__btn { background: var(--tt-lilac-100); color: var(--tt-purple); }
.tt26-lang__btn .tt26-icon { width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease); }
.tt26-lang.is-open .tt26-lang__btn .tt26-icon { transform: rotate(180deg); }
.tt26-lang__menu {
	display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; padding: .4rem;
	background: var(--tt-white); border: 1px solid var(--tt-line); border-radius: var(--r-18); box-shadow: var(--shadow-soft);
}
.tt26-lang.is-open .tt26-lang__menu,
.no-js .tt26-lang:hover .tt26-lang__menu, .no-js .tt26-lang:focus-within .tt26-lang__menu { display: block; }
.tt26-lang__opt {
	display: flex; align-items: center; gap: 0; min-height: 44px; padding: 0 .75rem; border-radius: 12px;
	font-size: .9375rem; font-weight: 500; color: var(--tt-ink); white-space: nowrap;
	transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.tt26-lang__code { font-weight: 700; letter-spacing: .04em; }
.tt26-lang__sep { white-space: pre; color: var(--tt-ink-soft); }
a.tt26-lang__opt:hover, a.tt26-lang__opt:focus-visible { background: var(--tt-lilac-50); color: var(--tt-purple); }
.tt26-lang__opt[aria-current] { background: var(--tt-lilac-50); color: var(--tt-purple); cursor: default; }
.tt26-lang__opt[aria-current] .tt26-icon { width: 16px; height: 16px; margin-left: auto; padding-left: .5rem; box-sizing: content-box; }
.tt26-lang__opt[aria-current] .tt26-lang__sep { color: currentColor; }

/* Menú móvil (<details>): botón de 48 px y panel con anclas + idioma */
.tt26-menu { display: none; position: relative; flex: none; }
.tt26-menu summary {
	list-style: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
	transition: background-color var(--dur-hover) var(--ease);
}
.tt26-menu summary:hover, .tt26-menu[open] summary { background: var(--tt-lilac-50); }
.tt26-menu summary::-webkit-details-marker { display: none; }
.tt26-menu__panel {
	position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 300px); padding: .5rem;
	background: var(--tt-white); border-radius: var(--r-24); box-shadow: var(--shadow-soft); border: 1px solid var(--tt-line);
}
.tt26-menu__panel nav a { display: flex; align-items: center; min-height: 48px; padding: 0 1rem; font-weight: 700; border-radius: var(--r-18); }
.tt26-menu__panel nav a:hover { background: var(--tt-lilac-50); }
/* Descarga dentro del menú: solo cuando la cabecera no tiene sitio para el botón (< 600 px) */
.tt26-menu__cta { display: none; width: 100%; margin-top: .5rem; }
/* Idioma dentro del menú móvil: lista visible (sin desplegable anidado), mismas opciones que en escritorio */
.tt26-menu__lang { display: block; margin-top: .5rem; padding: .75rem .25rem .25rem; border-top: 1px solid var(--tt-line); }
.tt26-menu__label { padding: 0 .75rem .35rem; font-size: var(--fs-small); font-weight: 500; color: var(--tt-ink-soft); }
.tt26-menu__panel .tt26-lang__mlist .tt26-lang__opt { min-height: 48px; padding: 0 .75rem; font-weight: 500; border-radius: 12px; } /* gana a .tt26-menu__panel nav a */

/* Lupa de búsqueda (25-oct-2026): botón redondo de 48 px y panel bajo la cabecera */
.tt26-search { position: relative; flex: none; }
.tt26-search summary {
	list-style: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; color: var(--tt-ink);
	transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.tt26-search summary::-webkit-details-marker { display: none; }
.tt26-search summary .tt26-icon { width: 22px; height: 22px; }
.tt26-search summary:hover, .tt26-search[open] summary { background: var(--tt-lilac-50); color: var(--tt-purple); }
.tt26-search__panel {
	position: absolute; right: 0; top: calc(100% + 10px); width: min(calc(100vw - 2 * var(--gutter)), 520px); padding: .5rem;
	background: var(--tt-white); border-radius: var(--r-pill); box-shadow: var(--shadow-soft); border: 1px solid var(--tt-line); z-index: 2;
}
.tt26-search__form { display: flex; align-items: center; gap: .5rem; }
.tt26-search__input {
	flex: 1; min-width: 0; height: 48px; padding: 0 1rem 0 1.15rem; border: 0; border-radius: var(--r-pill); background: var(--tt-lilac-50);
	color: var(--tt-ink); font: inherit; font-size: 1rem; font-weight: 500;
}
.tt26-search__input::placeholder { color: var(--tt-ink-soft); }
.tt26-search__input:focus { outline: 2px solid var(--tt-purple); outline-offset: 0; }
.tt26-search__input::-webkit-search-cancel-button { cursor: pointer; }
.tt26-search__form .tt26-btn { flex: none; }

/* — Pie — */
.tt26-footer { padding-block: var(--sp-8) var(--sp-5); background: var(--tt-white); }
.tt26-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--tt-line); }
.tt26-footer__logo img { height: 56px; width: auto; } /* claim legible: letras altas ~10 px */
/* SEO/GEO 25-oct-2026: descripción de marca bajo el logo (la misma del schema y llms.txt). */
.tt26-footer__brand { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 30rem; }
.tt26-footer__about { margin: 0; color: var(--tt-ink-soft); font-size: .9375rem; line-height: 1.55; }
.tt26-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.tt26-footer__nav a { font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
.tt26-footer__nav a:hover { color: var(--tt-purple); }
.tt26-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4); padding-top: var(--sp-3); font-size: var(--fs-small); color: var(--tt-ink-soft); }
.tt26-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); }
.tt26-footer__legal a { display: inline-flex; align-items: center; min-height: 40px; }
.tt26-footer__legal a:hover { color: var(--tt-ink); text-decoration: underline; }

@keyframes tt26-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt26-rise { from { opacity: 0; transform: translateY(var(--move-y)); } to { opacity: 1; transform: none; } }

/* — CookieYes: banner, modal de preferencias y botón de revisar (24-oct-2026) —
   El plugin trae su azul (#1863DC, y #0056A7 en el botón de revisar) en su CSS y como estilo en línea
   en la plantilla del banner (son los colores de su configuración). En las páginas Bricks lo tapa
   global-custom-css; estas plantillas no cargan ese CSS. Aquí, morado de marca y Satoshi sin tocar la
   configuración del plugin. !important solo donde el plugin pone estilo en línea: botones, revisar, «Mostrar más» y «Siempre activas». */
body.tt26 :is(.cky-consent-container, .cky-modal, .cky-btn-revisit-wrapper) { font-family: var(--tt-font); }
body.tt26 :is(.cky-consent-container, .cky-modal) .cky-btn-accept {
	background-color: var(--tt-purple) !important; border-color: var(--tt-purple) !important; color: var(--tt-white) !important;
}
body.tt26 :is(.cky-consent-container, .cky-modal) :is(.cky-btn-reject, .cky-btn-customize, .cky-btn-preferences) {
	background-color: transparent !important; border-color: var(--tt-purple) !important; color: var(--tt-purple) !important;
}
body.tt26 .cky-btn-revisit-wrapper { background-color: var(--tt-purple) !important; }
body.tt26 :is(.cky-consent-container, .cky-modal) a,
body.tt26 .cky-notice-des :is(a, button).cky-policy { color: var(--tt-purple); }
/* «Mostrar más» y «Siempre activas»: el JS del plugin les pone el azul y el verde como estilo en línea. */
body.tt26 .cky-modal .cky-show-desc-btn,
body.tt26 .cky-accordion-header .cky-always-active { color: var(--tt-purple) !important; }
body.tt26 .cky-switch input[type="checkbox"]:checked { background: var(--tt-purple); }
body.tt26 .cky-preference-header { border-color: var(--tt-purple); }
body.tt26 :is(.cky-consent-container, .cky-modal, .cky-btn-revisit-wrapper) :is(a, button, input):focus-visible { outline: 3px solid var(--tt-purple); outline-offset: 2px; }
body.tt26 .cky-opt-out-checkbox-wrapper input[type="checkbox"].cky-opt-out-checkbox:checked,
body.tt26 .cky-opt-out-btn-wrapper .cky-btn-confirm { background-color: var(--tt-purple); border-color: var(--tt-purple); }
/* El reset de la plantilla deja los párrafos sin margen; CookieYes cuenta con el del navegador. */
body.tt26 :is(.cky-consent-container, .cky-modal) p:not(:last-child) { margin-bottom: 1em; }