/* La landing de Truly Inbound · 8-oct-2026
   Piel: los tokens del producto (app/src/tokens.css, copiado tal cual a /landing/tokens.css). Cero hex acá:
   lo vigila gate-la-landing. Gramática de las trece pasadas de Truly Tech: titulares a escala de
   arquitectura limitados también por la ALTURA, índice en mono, filetes reales en vez de tarjetas con
   sombra, retícula visible en las superficies de marca, un solo botón amarillo por pantalla. */

/* Los alfabetos que Bricolage, Hanken y JetBrains Mono no traen (medido con fontTools: 0 glifos cirílicos,
   georgianos o árabes). Mismas familias del sistema, otro archivo por rango Unicode: una página en latín no
   descarga nada de esto. Onest (cirílico), IBM Plex Sans Arabic, Noto Sans Georgian: OFL. */
/* ⚠️ Cada cara repite EXACTAMENTE los pesos de tokens.css: con otro rango Chrome elige por peso antes que por
   alfabeto y todo el latín cae a sans-serif (medido 8-oct-2026). */
@font-face{font-family:Bricolage;src:url('/fuentes/onest-cyrillic-400-800.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Bricolage;src:url('/fuentes/noto-sans-georgian-georgian-400-800.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:Bricolage;src:url('/fuentes/ibm-plex-sans-arabic-arabic-700.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Hanken;src:url('/fuentes/onest-cyrillic-400-800.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Hanken;src:url('/fuentes/noto-sans-georgian-georgian-400-800.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:Hanken;src:url('/fuentes/ibm-plex-sans-arabic-arabic-500.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Hanken;src:url('/fuentes/onest-cyrillic-400-800.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Hanken;src:url('/fuentes/noto-sans-georgian-georgian-400-800.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:Hanken;src:url('/fuentes/ibm-plex-sans-arabic-arabic-500.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Hanken;src:url('/fuentes/onest-cyrillic-400-800.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Hanken;src:url('/fuentes/noto-sans-georgian-georgian-400-800.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:Hanken;src:url('/fuentes/ibm-plex-sans-arabic-arabic-700.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Hanken;src:url('/fuentes/onest-cyrillic-400-800.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Hanken;src:url('/fuentes/noto-sans-georgian-georgian-400-800.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:Hanken;src:url('/fuentes/ibm-plex-sans-arabic-arabic-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'JetBrains Mono';src:url('/fuentes/jetbrains-mono-cyrillic-400-700.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

.ld{
  --g:clamp(20px,5.5vw,88px);
  --sec:clamp(88px,11vw,176px);
  --barra-h:76px;
  --tinta:var(--fg);
  --blanco-64:color-mix(in srgb,var(--white) 64%,transparent);
  --blanco-80:color-mix(in srgb,var(--white) 80%,transparent);
  --blanco-24:color-mix(in srgb,var(--white) 24%,transparent);
  --blanco-12:color-mix(in srgb,var(--white) 12%,transparent);
  --navy-90:color-mix(in srgb,var(--bg-deep) 90%,transparent);
  height:auto;min-height:100%;
  background:var(--bg-surface);color:var(--tinta);
  font-family:var(--font-body);font-size:17px;line-height:1.55;
  overflow-x:clip;overflow-wrap:break-word;
}
.ld img{max-width:100%}
.ld .ld-escena,.ld .mq-foto,.ld .vz-foto{max-width:none}
.ld h1,.ld h2,.ld h3{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;text-wrap:balance}
html[lang=ar] .ld *{letter-spacing:0!important}
/* El índice en mono no existe en georgiano ni en árabe (cae a DejaVu): ahí el índice va en la letra de texto. */
html[lang=ka] .ld,html[lang=ar] .ld{--font-mono:var(--font-body)}
.ld p{margin:0}
.ld a{color:inherit}
.ld a:hover{text-decoration:none}
.ld svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
html[dir=rtl] .ld .ld-boton svg,html[dir=rtl] .ld .ld-salto svg,html[dir=rtl] .ld [data-sig] svg{transform:scaleX(-1)}
.ld [data-ant] svg{transform:scaleX(-1)}
html[dir=rtl] .ld [data-ant] svg{transform:none}
.ld :focus-visible{outline:3px solid var(--brand-cobalt);outline-offset:3px;border-radius:var(--radio-sm)}
.ld-hero :focus-visible,.ld-barra :focus-visible,.ld-oscura :focus-visible,.ld-cobalto :focus-visible,.ld-pie :focus-visible{outline-color:var(--brand-yellow)}
.ld-amarilla :focus-visible{outline-color:var(--bg-deep)}

.ld-saltar{position:absolute;inset-inline-start:var(--g);top:-80px;z-index:50;padding:12px 18px;border-radius:var(--radio-pill);background:var(--brand-yellow);color:var(--fg-on-accent);font-weight:700}
.ld-saltar:focus{top:12px}

/* ── Índice, titulares y cabeceras de sección ─────────────────────────────── */
.ld-indice{font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)}
.ld-lead{font:500 clamp(18px,1.45vw,23px)/1.45 var(--font-display);letter-spacing:-.005em;color:var(--fg-muted);max-width:52ch}
.ld-nota{margin-top:28px;font:400 13px/1.5 var(--font-mono);color:var(--fg-muted)}
.ld-seccion{position:relative;isolation:isolate;padding:var(--sec) var(--g)}
.ld-cabeza{position:relative;display:grid;grid-template-columns:minmax(150px,1fr) 3.2fr;gap:24px var(--g);padding-top:28px;border-top:1px solid var(--line);margin-bottom:clamp(48px,6vw,88px)}
.ld-cabeza::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:96px;height:3px;background:var(--brand-yellow)}
.ld-cabeza h2{font-size:clamp(40px,min(5.4vw,9.5vh),92px);line-height:.98;letter-spacing:-.035em;color:var(--tinta);max-width:18ch}
.ld-cabeza h2 span{display:block;color:var(--brand-cobalt)}
.ld-cabeza .ld-lead{margin-top:24px}

.ld-oscura,.ld-cobalto{color:var(--fg-on-deep)}
.ld-oscura{background:var(--bg-deep)}
.ld-cobalto{background:var(--brand-cobalt)}
.ld-oscura .ld-cabeza,.ld-cobalto .ld-cabeza{border-top-color:var(--blanco-24)}
.ld-oscura .ld-cabeza h2,.ld-cobalto .ld-cabeza h2{color:var(--fg-on-deep)}
.ld-oscura .ld-cabeza h2 span,.ld-cobalto .ld-cabeza h2 span{color:var(--fg-on-deep-muted)}
.ld-oscura .ld-indice,.ld-cobalto .ld-indice,.ld-oscura .ld-lead,.ld-cobalto .ld-lead,.ld-oscura .ld-nota,.ld-cobalto .ld-nota{color:var(--fg-on-deep-muted)}
.ld-amarilla{background:var(--brand-yellow);color:var(--fg-on-accent)}
.ld-amarilla .ld-cabeza{border-top-color:color-mix(in srgb,var(--bg-deep) 24%,transparent)}
.ld-amarilla .ld-cabeza::before{background:var(--bg-deep)}
.ld-amarilla .ld-cabeza h2,.ld-amarilla .ld-indice,.ld-amarilla .ld-lead{color:var(--fg-on-accent)}

.ld-reticula{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,var(--blanco-12) 1px,transparent 1px);background-size:calc((100% - 2 * var(--g)) / 6) 100%;background-position:var(--g) 0;opacity:.6}

/* ── Botones y enlaces ─────────────────────────────────────────────────────── */
.ld-boton{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:14px 26px;border-radius:var(--radio-pill);background:var(--action-accent);color:var(--fg-on-accent);font:700 17px/1.2 var(--font-body);transition:background var(--t-ui) var(--ease),transform var(--t-ui) var(--ease)}
.ld a.ld-boton{color:var(--fg-on-accent)}
.ld-boton:hover{background:var(--action-accent-hover)}
.ld-boton:hover svg{transform:translateX(3px)}
html[dir=rtl] .ld .ld-boton:hover svg{transform:scaleX(-1) translateX(3px)}
.ld-boton svg{transition:transform var(--t-ui) var(--ease)}
.ld-enlace{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ld-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* ── Barra ─────────────────────────────────────────────────────────────────── */
.ld-barra{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:28px;height:var(--barra-h);padding:0 var(--g);color:var(--fg-on-deep);transition:background var(--t-panel) var(--ease),box-shadow var(--t-panel) var(--ease),backdrop-filter var(--t-panel)}
.ld-barra.is-solida{background:var(--navy-90);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--blanco-12)}
.ld-marca{display:inline-flex;align-items:center;gap:12px;margin-inline-end:auto;color:inherit}
.ld-marca img{width:46px;height:auto}
.ld-marca span{display:grid;line-height:1.1}
.ld-marca b{font:700 19px/1.1 var(--font-display);letter-spacing:-.01em}
.ld-marca small{font:500 12px/1.3 var(--font-body);color:var(--fg-on-deep-muted)}
.ld-nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.ld-nav a{padding:8px 0;color:var(--blanco-80);transition:color var(--t-ui)}
.ld-nav a:hover{color:var(--fg-on-deep)}
.ld-barra-acciones{display:flex;align-items:center;gap:12px}
.ld-entrar{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--blanco-24);border-radius:var(--radio-pill);font-size:15px;font-weight:600}
.ld-entrar:hover{border-color:var(--fg-on-deep)}
.ld-boton--barra{min-height:44px;padding:0 20px;font-size:15px}
.ld-idiomas-menu{position:relative}
.ld-idiomas-menu summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--radio-pill);font:600 13px/1 var(--font-mono);letter-spacing:.08em;cursor:pointer;list-style:none}
.ld-idiomas-menu summary::-webkit-details-marker{display:none}
.ld-idiomas-menu summary svg{width:16px;height:16px;transition:transform var(--t-ui)}
.ld-idiomas-menu[open] summary svg{transform:rotate(180deg)}
.ld-idiomas-menu ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:2px;margin:0;padding:8px;list-style:none;border-radius:14px;background:var(--bg-surface);color:var(--tinta);box-shadow:var(--sombra-panel);min-width:300px}
.ld-idiomas-menu a{display:block;padding:10px 12px;border-radius:var(--radio-sm);font-size:15px}
.ld-idiomas-menu a:hover{background:var(--bg-hover)}
.ld-idiomas-menu a[aria-current]{background:var(--bg-selected);font-weight:700;color:var(--brand-cobalt)}

/* ── Portada (v3, 8-oct noche): la escena COMPLETA y viva ────────────────────────────────────
   Pablo, con captura: el landmark quedaba detrás del titular y bajo un velo azul, y el carro cortado por el
   riel. Ahora la foto entera (16:9) va anclada abajo y al lado contrario del texto, sin velo; el resto lo
   llena su propia luz difuminada, y el texto vive sobre esa luz. El riel tiene su franja propia. */
.ld-hero{--dur:7s;--riel-h:78px;--texto-w:min(44vw,720px);position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:var(--texto-w) 1fr;grid-template-rows:auto 1fr auto auto;gap:0 var(--g);height:100svh;min-height:640px;max-height:1120px;padding:calc(var(--barra-h) + clamp(16px,3vh,36px)) var(--g) 0;background:var(--bg-deep);color:var(--fg-on-deep)}
.ld-hero::after{content:"";position:absolute;inset:auto 0 0;height:var(--riel-h);z-index:-1;background:var(--bg-deep);box-shadow:0 -1px 0 var(--blanco-12)}
.ld-escenas{position:absolute;inset:0 0 var(--riel-h);z-index:-3;overflow:hidden;container-type:size}
.ld-escena{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.5s var(--ease)}
.ld-escena.is-activa{opacity:1}
.ld .ld-escena-luz{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;filter:blur(56px) saturate(1.3) brightness(.52)}
.ld .ld-escena-foto{position:absolute;bottom:0;inset-inline-end:0;width:min(calc(100cqw - var(--texto-w) * .62),177.78cqh);height:auto;max-width:none;aspect-ratio:1600/897;
  -webkit-mask-image:linear-gradient(to right,transparent 0,var(--bg-deep) 24%),linear-gradient(to bottom,transparent 0,var(--bg-deep) 16%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,var(--bg-deep) 24%),linear-gradient(to bottom,transparent 0,var(--bg-deep) 16%);mask-composite:intersect;
  transform-origin:62.8% 80%}
html[dir=rtl] .ld .ld-escena-foto{-webkit-mask-image:linear-gradient(to left,transparent 0,var(--bg-deep) 24%),linear-gradient(to bottom,transparent 0,var(--bg-deep) 16%);mask-image:linear-gradient(to left,transparent 0,var(--bg-deep) 24%),linear-gradient(to bottom,transparent 0,var(--bg-deep) 16%)}
.ld-escena.is-activa .ld-escena-foto{animation:ld-kb 8s linear both}
.ld-hero.is-pausado .ld-escena.is-activa .ld-escena-foto,.ld-hero.is-pausado .ld-riel-boton[aria-pressed=true] .ld-riel-barra{animation-play-state:paused}
@keyframes ld-kb{from{transform:scale(1)}to{transform:scale(1.045)}}
/* Velo sólo donde hay texto: la luz del lado del titular y la banda de la barra. La foto, limpia. */
.ld-hero-velo{position:absolute;inset:0 0 var(--riel-h);z-index:-2;pointer-events:none;background:
  linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 62%,transparent) 0%,transparent 15%),
  linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 46%,transparent) 0%,transparent 42%)}
html[dir=rtl] .ld-hero-velo{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 62%,transparent) 0%,transparent 15%),linear-gradient(270deg,color-mix(in srgb,var(--bg-deep) 46%,transparent) 0%,transparent 42%)}
.ld-hero-kicker{grid-column:1;grid-row:1;align-self:start;font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-deep-muted)}
.ld-hero-lugar{grid-column:2;grid-row:1;justify-self:end;align-self:start;display:grid;justify-items:end;gap:4px;text-align:end;text-shadow:0 2px 24px color-mix(in srgb,var(--bg-deep) 70%,transparent)}
.ld-cue-plantilla{font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-deep-muted)}
.ld-hero-ciudad{margin-top:6px;font:700 clamp(30px,min(3.6vw,6vh),64px)/1 var(--font-display);letter-spacing:-.035em;color:var(--fg-on-deep)}
.ld-hero-landmark{display:inline-flex;align-items:center;gap:10px;font:500 13px/1.4 var(--font-mono);letter-spacing:.02em;color:var(--fg-on-deep)}
.ld-hero-ciudad,.ld-hero-landmark{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ld-hero-lugar.is-cambiando .ld-hero-ciudad,.ld-hero-lugar.is-cambiando .ld-hero-landmark{opacity:0;transform:translateY(6px)}
.ld-punto{flex:none;width:9px;height:9px;border-radius:50%;background:var(--brand-yellow);box-shadow:0 0 0 0 color-mix(in srgb,var(--brand-yellow) 60%,transparent);animation:ld-late 2.4s var(--ease) infinite}
@keyframes ld-late{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ld-hero-texto{grid-column:1;grid-row:3;display:grid;gap:clamp(16px,2.4vh,26px);padding-bottom:clamp(28px,5vh,56px)}
.ld-hero-titulo{font-size:clamp(52px,min(7.4vw,12.6vh),132px);line-height:.9;letter-spacing:-.05em;max-width:10ch;color:var(--fg-on-deep);text-shadow:0 2px 40px color-mix(in srgb,var(--bg-deep) 50%,transparent)}
.ld-hero-titulo em,.ld-cierre h2 em{font-style:normal;color:var(--brand-yellow)}
.ld-hero-lead{font:500 clamp(16px,min(1.3vw,2.3vh),21px)/1.45 var(--font-display);color:var(--fg-on-deep);max-width:42ch}
.ld-riel{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:stretch;height:var(--riel-h)}
.ld-riel-boton{position:relative;display:grid;gap:4px;align-content:center;justify-items:start;padding:0 14px 0 0;border:0;background:none;color:var(--blanco-64);text-align:start;transition:color var(--t-ui)}
html[dir=rtl] .ld-riel-boton{padding:0 0 0 14px}
.ld-riel-boton:hover,.ld-riel-boton[aria-pressed=true]{color:var(--fg-on-deep)}
.ld-riel-n{font:500 11px/1 var(--font-mono);letter-spacing:.12em}
.ld-riel-pais{font:600 15px/1.25 var(--font-body)}
.ld-riel-barra{position:absolute;top:0;inset-inline:0 14px;height:2px;background:var(--brand-yellow);transform:scaleX(0);transform-origin:left}
html[dir=rtl] .ld-riel-barra{transform-origin:right}
.ld-riel-boton[aria-pressed=true] .ld-riel-barra{animation:ld-avance var(--dur,7s) linear both}
@keyframes ld-avance{to{transform:scaleX(1)}}
.ld-i-play,.ld-hero.is-pausado .ld-i-pausa{display:none}
.ld-hero.is-pausado .ld-i-play{display:block}
html:not(.js) .ld-riel-barra{display:none}

/* ── 01 · Una consulta ─────────────────────────────────────────────────────── */
.ld-historia-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.ld-historia-pasos>li{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:32px clamp(18px,2.4vw,40px) 0;border-inline-start:1px solid var(--line)}
.ld-historia-pasos>li:first-child{border-inline-start:0;padding-inline-start:0}
.ld-historia-pasos>li:last-child{padding-inline-end:0}
.ld-hora{font:600 clamp(36px,3.6vw,56px)/1 var(--font-mono);letter-spacing:-.04em;color:var(--brand-cobalt)}
.ld-historia-pasos h3{font-size:clamp(24px,2vw,30px);margin-top:12px}
.ld-historia-pasos>li>p:not(.ld-hora){color:var(--fg-muted);max-width:36ch}
.vz{margin-top:24px;border:1px solid var(--line);border-radius:14px;background:var(--bg-surface);font-size:14px;line-height:1.45;overflow:hidden}
.vz-busqueda{display:grid;gap:12px;padding:16px;background:var(--tint-soft)}
.vz-campo{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--radio-pill);background:var(--bg-surface);border:1px solid var(--line);color:var(--tinta);font-weight:500}
.vz-campo svg{width:18px;height:18px;color:var(--fg-muted)}
.vz-resultado{padding:4px 6px}
.vz-sitio{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-muted)}
.vz-sitio img{width:20px;height:20px;border-radius:50%;background:var(--brand-yellow)}
.vz-enlace{margin-top:4px;font:600 16px/1.3 var(--font-body);color:var(--brand-cobalt)}
.vz-ia{display:grid;gap:6px;padding:14px 16px;border-radius:12px;background:var(--bg-surface);border:1px solid var(--line)}
.vz-ia-marca{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--brand-cobalt)}
.vz-ia-marca svg{width:14px;height:14px;fill:currentColor;stroke:none}
.vz-cita{justify-self:start;padding:4px 10px;border-radius:var(--radio-pill);background:var(--bg-selected);font:500 11px/1.4 var(--font-mono);color:var(--brand-cobalt)}
.vz-chat{display:grid;gap:10px;padding:18px;background:var(--tint-soft)}
.vz-msg{position:relative;display:grid;gap:4px;max-width:86%;padding:12px 14px 22px;border-radius:16px;font-size:14px}
.vz-msg time{position:absolute;bottom:6px;inset-inline-end:12px;font:500 10px/1 var(--font-mono);opacity:.7}
.vz-msg--cliente{justify-self:start;background:var(--bg-surface);border:1px solid var(--line);border-end-start-radius:4px}
.vz-msg--ia{justify-self:end;background:var(--bg-deep);color:var(--fg-on-deep);border-end-end-radius:4px}
.vz-msg--ia b{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--brand-yellow)}
.vz-msg--ia b img{width:18px;height:auto}
.vz-visita{position:relative;aspect-ratio:16/10}
.vz-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.vz-chip{position:absolute;inset-inline-start:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radio-pill);background:var(--bg-surface);color:var(--tinta);font-weight:700;font-size:14px;box-shadow:var(--sombra-panel)}
.vz-chip svg,.vz-traspaso svg{width:16px;height:16px;color:var(--ok)}

/* ── 02 · Las diez plantillas ──────────────────────────────────────────────── */
/* 01 · la historia, de noche: la cocina de Camila detrás, a sangre. */
.ld-historia{overflow:hidden}
.ld .ld-historia-fondo{position:absolute;inset:0 0 auto;z-index:-2;width:100%;height:min(100%,980px);object-fit:cover;object-position:70% 30%;max-width:none}
.ld-historia-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 92%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 64%,transparent) 55%,color-mix(in srgb,var(--bg-deep) 40%,transparent) 100%),linear-gradient(0deg,var(--bg-deep) 18%,color-mix(in srgb,var(--bg-deep) 50%,transparent) 60%,color-mix(in srgb,var(--bg-deep) 40%,transparent) 100%)}
.ld-historia .ld-historia-pasos{border-top-color:var(--blanco-24)}
.ld-historia .ld-historia-pasos>li{border-inline-start-color:var(--blanco-24)}
.ld-historia .ld-hora{color:var(--fg-on-deep)}
.ld-historia .ld-hora::before{content:"";display:block;width:10px;height:10px;margin-bottom:22px;border-radius:50%;background:var(--brand-yellow);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand-yellow) 22%,transparent)}
.ld-historia .ld-historia-pasos h3{color:var(--fg-on-deep)}
.ld-historia .ld-historia-pasos>li>p:not(.ld-hora){color:var(--fg-on-deep-muted)}
.ld-historia .vz{color:var(--tinta);border:0;box-shadow:0 30px 70px color-mix(in srgb,var(--bg-deep) 70%,transparent)}
.ld-historia .ld-nota{color:var(--fg-on-deep-muted)}

/* 02 · la vitrina: la lista de las diez y el escenario con escritorio + teléfono. */
.ld-plantillas{background:var(--tint-soft)}
.ld-vitrina{--dur-vitrina:6.5s;display:grid;grid-template-columns:minmax(260px,.9fr) 2.4fr;gap:clamp(24px,3.4vw,64px);align-items:start}
.ld-vitrina-lista{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line-strong);counter-reset:none}
.ld-vitrina-lista button{position:relative;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;width:100%;padding:14px 4px 14px 0;border:0;border-bottom:1px solid var(--line-strong);background:none;text-align:start;color:var(--fg-muted);transition:color var(--t-ui)}
html[dir=rtl] .ld-vitrina-lista button{padding:14px 0 14px 4px}
.ld-vitrina-lista button:hover{color:var(--tinta)}
.ld-vitrina-n{grid-row:1/3;padding-top:3px;font:500 12px/1.4 var(--font-mono);letter-spacing:.1em}
.ld-vitrina-nombre{font:600 17px/1.3 var(--font-display);letter-spacing:-.01em}
.ld-vitrina-desc,.ld-vitrina-chip{display:none}
.ld-vitrina-lista [aria-selected=true]{color:var(--tinta)}
.ld-vitrina-lista [aria-selected=true] .ld-vitrina-nombre{font-size:22px;line-height:1.2}
.ld-vitrina-lista [aria-selected=true] .ld-vitrina-desc{display:block;grid-column:2;margin-top:6px;font-size:15px;line-height:1.45;color:var(--fg-muted)}
.ld-vitrina-lista [aria-selected=true] .ld-vitrina-chip{display:inline-block;grid-column:2;justify-self:start;margin-top:12px;padding:6px 12px;border-radius:var(--radio-pill);background:var(--bg-surface);border:1px solid var(--line);font:500 12px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--tinta)}
.ld-vitrina-barra{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--brand-cobalt);transform:scaleX(0);transform-origin:left}
html[dir=rtl] .ld-vitrina-barra{transform-origin:right}
.ld-vitrina.is-auto [aria-selected=true] .ld-vitrina-barra{animation:ld-avance var(--dur-vitrina,6.5s) linear both}
.ld-vitrina.is-quieta [aria-selected=true] .ld-vitrina-barra{transform:scaleX(1)}
.ld-vitrina-pie{display:none;gap:8px;margin-top:20px}
.ld-vitrina-pie b{font:600 20px/1.25 var(--font-display)}
.ld-vitrina-pie span{color:var(--fg-muted)}
.ld-vitrina-pie small{justify-self:start;padding:6px 12px;border-radius:var(--radio-pill);background:var(--bg-surface);border:1px solid var(--line);font:500 12px/1.2 var(--font-mono)}
/* El escenario es una composición, no texto: el teléfono va a la derecha también en árabe (si no, tapa la maqueta). */
.ld-vitrina-escenario{direction:ltr;position:relative;display:grid;padding:0 0 clamp(40px,6vw,90px) 0}
.ld-vitrina-panel{grid-area:1/1;position:relative;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .ld-vitrina-panel{opacity:0;transform:translateY(10px);pointer-events:none}
.js .ld-vitrina-panel.is-activo{opacity:1;transform:none;pointer-events:auto}
.ld-escritorio{width:86%;border-radius:16px;overflow:hidden;background:var(--bg-surface);box-shadow:0 40px 90px color-mix(in srgb,var(--bg-deep) 28%,transparent),0 0 0 1px color-mix(in srgb,var(--bg-deep) 10%,transparent)}
.ld-escritorio-barra{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:var(--bg-surface);border-bottom:1px solid var(--line)}
.ld-escritorio-barra i{width:11px;height:11px;border-radius:50%;background:var(--grey-200)}
.ld-escritorio-barra span{margin-inline-start:12px;padding:5px 14px;border-radius:var(--radio-pill);background:var(--bg-sunken);font:500 12px/1 var(--font-mono);color:var(--fg-muted)}
.ld-escritorio .mq{border-radius:0;box-shadow:none}
.ld-telefono{position:absolute;inset-inline-end:0;bottom:0;width:24%;min-width:150px;padding:8px;border-radius:34px;background:var(--brand-ink);box-shadow:0 30px 70px color-mix(in srgb,var(--bg-deep) 40%,transparent)}
.ld-telefono-pantalla{border-radius:27px;overflow:hidden}

/* La maqueta: la primera pantalla de un sitio. Todo en cqw para que escale con la tarjeta. */
.mq{--pos:50% 50%;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;border-radius:14px;background:var(--bg-deep);color:var(--white);font-family:var(--font-body);container-type:inline-size;box-shadow:0 0 0 1px var(--blanco-12)}
.mq-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.mq-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 62%,transparent) 0%,transparent 24%),linear-gradient(0deg,color-mix(in srgb,var(--bg-deep) 82%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 30%,transparent) 40%,transparent 62%)}
.mq-barra{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:2.4cqw 3.4cqw;text-shadow:0 0 1.4cqw color-mix(in srgb,var(--bg-deep) 80%,transparent)}
.mq-marca{display:inline-flex;align-items:center;gap:1.1cqw}
.mq-marca img{width:3.4cqw;height:auto}
.mq-marca span{display:grid;font:700 1.55cqw/1.15 var(--font-display)}
.mq-marca small{font:500 1.1cqw/1.2 var(--font-body);opacity:.82}
.mq-nav{display:flex;gap:2.4cqw;font-size:1.25cqw;font-weight:500;opacity:.92}
.mq-titulo{margin:0;font:700 6cqw/.98 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.mq-titulo em{font-style:normal;color:var(--brand-yellow)}
.mq-sub{margin-top:2cqw;font-size:1.65cqw;line-height:1.4;opacity:.9;max-width:42ch}
.mq-cta{display:inline-block;margin-top:2.2cqw;padding:1.15cqw 2.3cqw;border-radius:999px;background:var(--brand-yellow);color:var(--brand-navy);font-size:1.45cqw;font-weight:700}
.mq-abajo{position:absolute;inset-inline-start:4cqw;bottom:5cqw;max-width:58%}
/* 01 · el carro */
.mq--carro .mq-velo{background:linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 70%,transparent) 0%,transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 50%,transparent) 0%,transparent 22%)}
.mq--carro .mq-foto{object-position:50% 60%}
/* 02 · la casa de noche */
.mq-centro{position:absolute;inset:16% 10% 14%;display:grid;align-content:center;justify-items:center;text-align:center}
.mq--noche .mq-velo{background:color-mix(in srgb,var(--bg-deep) 46%,transparent)}
.mq--noche .mq-titulo{font-size:6.6cqw;max-width:14ch}
.mq--noche .mq-cta{background:none;color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.mq-burbuja{position:absolute;inset-inline-end:3.4cqw;bottom:3.6cqw;display:flex;align-items:center;gap:1.2cqw;max-width:34%;padding:1.4cqw 1.8cqw;border-radius:2cqw 2cqw .5cqw 2cqw;background:var(--white);color:var(--brand-ink);font-size:1.35cqw;line-height:1.35;font-weight:500}
.mq-burbuja i{flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--brand-yellow)}
/* 03 · cocina al cierre */
.mq--cocina .mq-foto{left:42%;width:58%}
.mq--cocina .mq-velo{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 72%,transparent) 0%,transparent 20%),linear-gradient(90deg,var(--bg-deep) 42%,color-mix(in srgb,var(--bg-deep) 60%,transparent) 48%,transparent 62%)}
.mq-panel{position:absolute;inset-inline-start:4cqw;top:18%;width:40%;display:grid;gap:2.2cqw;justify-items:start}
.mq--cocina .mq-titulo{font-size:4.5cqw}
.mq-lista{list-style:none;margin:0;padding:0;display:grid;gap:1.1cqw;font-size:1.45cqw}
.mq-lista li{display:flex;align-items:center;gap:1cqw}
.mq-lista svg{width:1.8cqw;height:1.8cqw;color:var(--brand-yellow)}
.mq--cocina .mq-cta{margin-top:0}
/* 04 · la ciudad desde arriba */
.mq-arriba{position:absolute;inset:15% 6% auto;display:grid;justify-items:center;text-align:center}
.mq--ciudad .mq-velo{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 74%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 30%,transparent) 46%,transparent 64%),linear-gradient(0deg,color-mix(in srgb,var(--bg-deep) 60%,transparent) 0%,transparent 26%)}
.mq--ciudad .mq-titulo{font-size:6.4cqw}
.mq-oficinas{position:absolute;inset-inline:4cqw;bottom:3.6cqw;display:flex;gap:1.4cqw;margin:0;padding:0;list-style:none}
.mq-oficinas li{display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.8cqw;border-radius:999px;background:color-mix(in srgb,var(--bg-deep) 70%,transparent);box-shadow:inset 0 0 0 1px var(--blanco-24);font-size:1.3cqw;font-weight:600}
.mq-oficinas i{width:1cqw;height:1cqw;border-radius:50%;background:var(--brand-yellow)}
.mq--ciudad .mq-oficinas{justify-content:center}
/* 05 · termitas */
.mq--termitas .mq-velo{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 70%,transparent) 0%,transparent 20%),linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 84%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 40%,transparent) 46%,transparent 66%)}
.mq--termitas .mq-titulo{font-size:15cqw;line-height:.86;letter-spacing:-.06em}
.mq--termitas .mq-sub{max-width:30ch}
/* 06 · el técnico */
.mq--tecnico .mq-titulo{font-size:6.4cqw}
.mq--tecnico .mq-abajo{max-width:46%}
.mq-reserva{position:absolute;inset-inline-end:3.6cqw;bottom:4cqw;display:grid;gap:1cqw;width:25%;padding:2cqw;border-radius:1.6cqw;background:var(--white);color:var(--brand-ink)}
.mq-reserva p{font:700 1.6cqw/1.2 var(--font-display)}
.mq-reserva span{padding:1cqw 1.2cqw;border-radius:.9cqw;box-shadow:inset 0 0 0 1px var(--grey-200);font-size:1.25cqw;font-weight:600}
.mq-reserva span.si{background:var(--brand-yellow);box-shadow:none}
/* 07 · la bodega (árabe) */
.mq--bodega .mq-velo{background:linear-gradient(0deg,color-mix(in srgb,var(--bg-deep) 88%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 40%,transparent) 44%,transparent 66%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 50%,transparent) 0%,transparent 22%)}
.mq--bodega .mq-abajo{max-width:56%}
.mq--bodega .mq-titulo{font-size:4.6cqw;line-height:1.2;letter-spacing:0;font-family:var(--font-body)}
.mq-chips{display:flex;flex-wrap:wrap;gap:1cqw;margin-top:2cqw}
.mq-chips span{padding:.9cqw 1.6cqw;border-radius:999px;box-shadow:inset 0 0 0 1px var(--blanco-64);font-size:1.3cqw;font-weight:600}
/* 08 · el jardín */
.mq--jardin .mq-velo{background:linear-gradient(0deg,color-mix(in srgb,var(--bg-deep) 80%,transparent) 0%,color-mix(in srgb,var(--bg-deep) 24%,transparent) 50%,transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 50%,transparent) 0%,transparent 22%)}
.mq--jardin .mq-centro{inset:auto 8% 7% 8%}
.mq--jardin .mq-titulo{font-size:5.4cqw;line-height:1.08;letter-spacing:-.02em}
.mq-etiqueta{margin-bottom:1.6cqw;padding:.8cqw 1.6cqw;border-radius:999px;box-shadow:inset 0 0 0 1px var(--brand-yellow);color:var(--brand-yellow);font-size:1.25cqw;font-weight:600}
/* 09 · el mundo */
.mq--mundo .mq-arriba{inset:17% auto auto 4cqw;justify-items:start;text-align:start;max-width:46%}
.mq--mundo .mq-titulo{font-size:4.6cqw}
.mq--mundo .mq-velo{background:linear-gradient(90deg,color-mix(in srgb,var(--bg-deep) 66%,transparent) 0%,transparent 50%)}
.mq--mundo .mq-oficinas{inset-inline:auto 4cqw;flex-direction:column;align-items:flex-end}
/* 10 · antes y después */
.mq--antes .mq-velo{background:linear-gradient(0deg,color-mix(in srgb,var(--bg-deep) 82%,transparent) 0%,transparent 44%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 54%,transparent) 0%,transparent 22%)}
.mq--antes .mq-abajo{inset-inline:0;bottom:5cqw;max-width:none;display:grid;justify-items:center;text-align:center}
.mq--antes .mq-titulo{font-size:5.6cqw}
.mq-lado{position:absolute;top:17%;padding:.9cqw 1.8cqw;border-radius:999px;background:color-mix(in srgb,var(--bg-deep) 74%,transparent);font:600 1.3cqw/1 var(--font-mono);letter-spacing:.06em}
.mq-lado--antes{left:4cqw}
.mq-lado--despues{right:4cqw;background:var(--brand-yellow);color:var(--brand-navy)}
.mq-divisor{position:absolute;top:0;bottom:0;left:50.4%;width:.3cqw;background:var(--white)}
.mq-divisor::after{content:"";position:absolute;top:44%;left:50%;width:4.4cqw;height:4.4cqw;margin-left:-2.2cqw;border-radius:50%;background:var(--white);box-shadow:0 .6cqw 2cqw color-mix(in srgb,var(--bg-deep) 40%,transparent)}
/* Maqueta en teléfono (vitrina y Qué incluye · 01): una sola composición móvil para las diez. */
.mq--movil{aspect-ratio:9/19.5;border-radius:0;box-shadow:none}
.mq.mq--movil .mq-foto{left:0;width:100%;object-position:var(--pos,50% 50%)}
.mq--movil .mq-nav,.mq--movil .mq-sub,.mq--movil .mq-lista,.mq--movil .mq-oficinas,.mq--movil .mq-reserva,.mq--movil .mq-chips,.mq--movil .mq-lado,.mq--movil .mq-burbuja,.mq--movil .mq-etiqueta,.mq--movil .mq-divisor{display:none}
.mq.mq--movil .mq-barra{padding:6cqw}
.mq.mq--movil .mq-marca img{width:11cqw}
.mq.mq--movil .mq-marca span{font-size:5cqw}
.mq.mq--movil .mq-marca small{font-size:3.6cqw}
.mq.mq--movil .mq-velo{background:linear-gradient(0deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 70%,transparent) 30%,transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 60%,transparent) 0%,transparent 18%)}
.mq.mq--movil .mq-abajo,.mq.mq--movil .mq-centro,.mq.mq--movil .mq-arriba,.mq.mq--movil .mq-panel{position:absolute;inset:auto 7cqw 9cqw;width:auto;max-width:none;display:grid;justify-items:start;align-content:end;text-align:start}
.mq.mq--movil .mq-titulo{font-size:12cqw;line-height:1;letter-spacing:-.03em;max-width:none}
.mq.mq--movil.mq--bodega .mq-titulo{font-size:10cqw;line-height:1.3;letter-spacing:0}
.mq.mq--movil.mq--carro .mq-sub{display:block;font-size:4.2cqw;margin-top:3cqw}
.mq.mq--movil .mq-cta{margin-top:5cqw;padding:3.4cqw 6cqw;font-size:4.2cqw;background:var(--brand-yellow);color:var(--brand-navy);box-shadow:none}

/* ── 03 · Los idiomas ──────────────────────────────────────────────────────── */
.ld-lemas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));border-top:1px solid color-mix(in srgb,var(--bg-deep) 24%,transparent)}
.ld-lemas li{display:grid;gap:10px;align-content:start;padding:20px 20px 24px 0;border-bottom:1px solid color-mix(in srgb,var(--bg-deep) 24%,transparent)}
html[dir=rtl] .ld-lemas li{padding:22px 0 26px 20px}
.ld-lemas li[dir=rtl]{text-align:right}
.ld-lema-n{font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.ld-lema{font:700 clamp(24px,2.3vw,36px)/1.05 var(--font-display);letter-spacing:-.025em}
.ld-lema em{font-style:normal;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
.ld-lemas li.es-este .ld-lema-n::after{content:" ●"}

/* ── 04 · Qué incluye ──────────────────────────────────────────────────────── */
.ld-filas{border-top:1px solid var(--line)}
.ld-fila{display:grid;grid-template-columns:minmax(150px,1fr) 1.6fr 1.6fr;gap:24px var(--g);align-items:center;padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid var(--line)}
.ld-fila .ld-indice{align-self:start;padding-top:10px}
.ld-fila h3{font-size:clamp(30px,3vw,48px);line-height:1.02}
.ld-fila-texto p{margin-top:18px;color:var(--fg-muted);max-width:44ch;font-size:18px}
.ld-fila .vz{margin-top:0}
.vz-telefono{justify-self:center;width:min(270px,70vw);padding:10px;border:0;border-radius:44px;background:var(--brand-ink);box-shadow:var(--sombra-panel)}
.vz-pantalla{border-radius:34px;overflow:hidden}
.vz-respuesta{display:grid;gap:14px;padding:22px;background:var(--tint-soft)}
.vz-pregunta{justify-self:end;max-width:86%;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--bg-deep);color:var(--fg-on-deep);font-weight:500}
html[dir=rtl] .vz-pregunta{border-radius:16px 16px 16px 4px}
.vz-ejemplo{font:500 11px/1.3 var(--font-mono);letter-spacing:.06em;color:var(--fg-muted)}
.vz-cifras{border:0;background:none;overflow:visible}
.ld-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.ld-cifras div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;padding:20px 18px 0;border-inline-start:1px solid var(--line)}
.ld-cifras div:first-child{border-inline-start:0;padding-inline-start:0}
.ld-cifras dd{margin:0;font:700 clamp(44px,4.4vw,84px)/.9 var(--font-display);letter-spacing:-.05em;color:var(--brand-cobalt);font-variant-numeric:tabular-nums}
.ld-cifras dt{font:500 12px/1.35 var(--font-mono);letter-spacing:.04em;color:var(--fg-muted);max-width:16ch;hyphens:auto;overflow-wrap:anywhere}
.vz-cifras .ld-nota{margin-top:20px}
.vz-chat--traspaso .vz-traspaso{justify-self:center;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radio-pill);background:var(--ok-soft);color:var(--ok);font-size:13px;font-weight:700}
.ld-producto{margin:clamp(56px,7vw,112px) 0 0;display:grid;gap:24px}
.ld-producto-marco{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sombra-panel)}
.ld-producto-marco img{display:block;width:100%;height:auto}
.ld-producto figcaption{font:500 clamp(18px,1.45vw,23px)/1.45 var(--font-display);color:var(--tinta);max-width:56ch}

/* ── 05 · Cómo empieza ─────────────────────────────────────────────────────── */
.ld-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--blanco-24)}
.ld-pasos li{display:grid;align-content:start;gap:12px;padding:28px clamp(14px,1.6vw,28px) 8px;border-inline-start:1px solid var(--blanco-24)}
.ld-pasos li:first-child{border-inline-start:0;padding-inline-start:0}
.ld-paso-n{font:700 clamp(48px,4.6vw,76px)/.9 var(--font-display);letter-spacing:-.05em;color:var(--fg-on-deep)}
.ld-pasos h3{font-size:clamp(20px,1.6vw,26px);line-height:1.12;margin-top:14px}
.ld-pasos p:not(.ld-paso-n){color:var(--fg-on-deep-muted);font-size:16px}
.ld-como .ld-nota{max-width:80ch;margin-top:48px}

/* ── Truly Inbound y Truly Global ──────────────────────────────────────────── */
.ld-frontera{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--g);align-items:end;background:var(--tint-soft)}
.ld-frontera h2{font-size:clamp(34px,4vw,68px);line-height:1.02;letter-spacing:-.035em;max-width:22ch}
.ld-frontera h2 span{display:block;color:var(--brand-cobalt)}
.ld-frontera .ld-lead{margin-top:24px}
.ld-frontera-enlaces{display:grid;border-top:1px solid var(--line-strong)}
.ld-salto{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line-strong);font:600 19px/1.3 var(--font-display)}
.ld-salto .ld-indice{grid-column:1}
.ld-salto span:not(.ld-indice){grid-column:1}
.ld-salto svg{grid-column:2;grid-row:1/3;width:26px;height:26px;color:var(--brand-cobalt);transition:transform var(--t-ui)}
.ld-salto:hover svg{transform:translateX(4px)}

/* ── Preguntas ─────────────────────────────────────────────────────────────── */
.ld-faq-lista{border-top:1px solid var(--line)}
.ld-faq-lista details{border-bottom:1px solid var(--line)}
.ld-faq-lista summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;padding:20px 0;cursor:pointer;list-style:none;font:600 clamp(19px,1.6vw,25px)/1.25 var(--font-display);letter-spacing:-.01em}
.ld-faq-lista summary::-webkit-details-marker{display:none}
.ld-faq-lista summary i{position:relative;flex:none;width:22px;height:22px}
.ld-faq-lista summary i::before,.ld-faq-lista summary i::after{content:"";position:absolute;top:10px;left:2px;width:18px;height:2px;background:currentColor;transition:transform var(--t-ui) var(--ease)}
.ld-faq-lista summary i::after{transform:rotate(90deg)}
.ld-faq-lista details[open] summary i::after{transform:none}
.ld-faq-lista details p{padding:0 0 28px;color:var(--fg-muted);max-width:68ch;font-size:18px}
@media (min-width:1101px){.ld-faq-lista{margin-inline-start:calc((100% - var(--g)) / 4.2 + var(--g))}}

/* ── Cierre ────────────────────────────────────────────────────────────────── */
.ld-cierre{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:min(92svh,860px);padding:var(--sec) var(--g)}
.ld-cierre-infinito{position:absolute;z-index:-1;inset-inline-end:max(-5vw,-72px);top:50%;width:min(46vw,760px);transform:translateY(-50%);pointer-events:none}
.ld-cierre-infinito img{width:100%;height:auto;animation:ld-flota 9s ease-in-out infinite;transform-origin:50% 60%}
@keyframes ld-flota{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-18px) rotate(1.5deg)}}
html[dir=rtl] .ld-cierre-infinito{transform:translateY(-50%) scaleX(-1)}
.ld-cierre-texto{display:grid;gap:28px;max-width:min(52vw,820px)}
.ld-cierre h2{font-size:clamp(46px,min(6.4vw,11vh),120px);line-height:.94;letter-spacing:-.045em}
.ld-cierre h2 em{display:block}
.ld-cierre .ld-lead{color:var(--fg-on-deep)}
.ld-cierre .ld-enlace{color:var(--fg-on-deep)}

/* ── Pie ───────────────────────────────────────────────────────────────────── */
.ld-pie{display:grid;gap:48px;padding:72px var(--g) 36px;background:var(--bg-deep);color:var(--fg-on-deep)}
.ld-pie-arriba{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-bottom:40px;border-bottom:1px solid var(--blanco-24)}
.ld-pie-arriba .ld-marca{margin:0}
.ld-pie-arriba>p{font:500 19px/1.4 var(--font-display);color:var(--fg-on-deep-muted);max-width:40ch}
.ld-pie-columnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ld-pie-columnas nav{display:grid;gap:12px;align-content:start}
.ld-pie-columnas .ld-indice{color:var(--fg-on-deep-muted);margin-bottom:6px}
.ld-pie-columnas a{font-size:16px;color:var(--blanco-80)}
.ld-pie-columnas a:hover{color:var(--fg-on-deep)}
.ld-pie-abajo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:28px;border-top:1px solid var(--blanco-24);font:400 13px/1.5 var(--font-mono);color:var(--fg-on-deep-muted)}
.ld-pie-abajo p:first-child{margin-inline-end:auto}

/* ── Aparición al hacer scroll (sólo con JS; sin JS todo se ve) ────────────── */
.js .ld [data-revela]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .ld [data-revela].is-visto{opacity:1;transform:none}

/* ── Ventanas medianas ─────────────────────────────────────────────────────── */
@media (max-width:1280px){
  .ld-nav{display:none}
  .ld-fila{grid-template-columns:minmax(80px,.5fr) 1.5fr 1.5fr}
}
@media (max-width:1100px){
  .ld-cabeza{grid-template-columns:1fr}
  .ld-historia-pasos{grid-template-columns:1fr}
  .ld-historia-pasos>li{border-inline-start:0;padding:36px 0 40px;border-bottom:1px solid var(--line)}
  .ld-historia-pasos .vz{max-width:560px}
  .ld-fila{grid-template-columns:1fr;gap:20px}
  .ld-fila .vz{max-width:560px;width:100%}
  .ld-fila .vz-telefono{justify-self:start}
  .ld-pasos{grid-template-columns:1fr 1fr}
  .ld-vitrina{grid-template-columns:1fr}
  .ld-vitrina-lista{display:flex;overflow-x:auto;scrollbar-width:none;border-top:0;gap:8px;margin-inline:calc(var(--g) * -1);padding-inline:var(--g)}
  .ld-vitrina-lista::-webkit-scrollbar{display:none}
  .ld-vitrina-lista li{flex:none}
  .ld-vitrina-lista button{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:var(--radio-pill);white-space:nowrap}
  .ld-vitrina-lista [aria-selected=true]{background:var(--bg-deep);border-color:var(--bg-deep);color:var(--fg-on-deep)}
  .ld-vitrina-lista [aria-selected=true] .ld-vitrina-nombre{font-size:15px}
  .ld-vitrina-lista .ld-vitrina-nombre{font-size:15px}
  .ld-vitrina-lista [aria-selected=true] .ld-vitrina-desc,.ld-vitrina-lista [aria-selected=true] .ld-vitrina-chip,.ld-vitrina-barra{display:none}
  .ld-vitrina-pie{display:grid}
  .ld-pasos li{border-inline-start:0;border-bottom:1px solid var(--blanco-24);padding:24px 16px 24px 0}
  .ld-frontera{grid-template-columns:1fr}
  .ld-cierre-texto{max-width:none}
  .ld-cierre-infinito{width:min(90vw,700px);opacity:.5}
  .ld-hero{--texto-w:min(52vw,560px)}
}

/* ── Teléfono: la escena arriba, el texto abajo, el riel en una fila que se desliza ── */
@media (max-width:760px),(max-aspect-ratio:4/5){
  .ld{--barra-h:64px;font-size:16px}
  .ld-marca small{display:none}
  .ld-boton--barra{display:none}
  .ld-entrar{padding:0 14px}
  .ld-hero{display:block;height:auto;min-height:0;max-height:none;padding:0;--alto-escena:clamp(260px,46svh,440px)}
  .ld-hero::after{display:none}
  .ld-escenas{position:relative;inset:auto;height:var(--alto-escena);container-type:normal}
  /* En el teléfono la foto llena su caja (el landmark y el carro quedan al centro) y la luz sobra. */
  .ld .ld-escena-luz{display:none}
  .ld .ld-escena-foto,html[dir=rtl] .ld .ld-escena-foto{inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:56% 50%;-webkit-mask-image:none;mask-image:none}
  .ld-hero-velo,html[dir=rtl] .ld-hero-velo{bottom:auto;height:var(--alto-escena);background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 74%,transparent) 0%,transparent 26%),linear-gradient(0deg,var(--bg-deep) 0%,color-mix(in srgb,var(--bg-deep) 50%,transparent) 16%,transparent 34%)}
  .ld-hero-kicker{position:absolute;top:calc(var(--barra-h) + 10px);inset-inline-start:var(--g);font-size:11px}
  .ld-hero-lugar{position:absolute;top:14px;inset-inline-end:var(--g);gap:2px}
  .ld-hero-lugar .ld-cue-plantilla{display:none}
  .ld-hero-ciudad{font-size:26px}
  .ld-hero-landmark{font-size:11px}
  .ld-hero-texto{max-width:none;gap:16px;padding:18px var(--g) 24px}
  .ld-hero-titulo{font-size:clamp(40px,11.6vw,64px);max-width:none}
  .ld-hero-lead{font-size:16px}
  .ld-riel{display:flex;overflow-x:auto;scrollbar-width:none;gap:0;margin:0 var(--g);padding-bottom:12px;height:auto;min-width:0}
  .ld-riel::-webkit-scrollbar{display:none}
  .ld-riel-boton{flex:0 0 auto;min-width:112px;min-height:64px;align-content:end;padding-top:14px}
  .ld-cabeza h2{font-size:clamp(36px,10.4vw,56px)}
  .mq-nav{display:none}
  .ld-escritorio{width:100%}
  .ld-telefono{display:none}
  .ld-vitrina-escenario{padding-bottom:0}
  .ld-pasos{grid-template-columns:1fr}
  .ld-cifras dd{font-size:clamp(44px,13vw,64px)}
  .ld-cierre{min-height:0}
  .ld-cierre-infinito{position:relative;inset:auto;top:auto;transform:none;width:min(80vw,420px);margin:0 auto 12px;opacity:1}
  html[dir=rtl] .ld-cierre-infinito{transform:scaleX(-1)}
  .ld-pie-columnas{grid-template-columns:1fr 1fr}
}
@media (max-width:760px) and (max-height:700px){
  .ld-hero{--alto-escena:36svh}
  .ld-hero-lugar{display:none}
  .ld-hero-lead{font-size:15px;line-height:1.4}
}
@media (max-width:420px){
  .ld-idiomas-menu ul{min-width:260px;grid-template-columns:1fr 1fr}
  .ld-entrar{display:none}
}
/* Ventanas bajas y anchas: el titular se limita por alto (lección de la undécima pasada). */
@media (min-width:761px) and (max-height:760px){
  .ld-hero{--riel-h:66px}
  .ld-hero-titulo{font-size:clamp(48px,11.6vh,112px)}
  .ld-hero-lead{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .ld-escena.is-activa .ld-escena-foto,.ld-cierre-infinito img{animation:none}
  .ld-punto{animation:none}
}


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   v4 · 8-oct-2026, noche. Pablo: «se ve genérico, hecho por un bot; header y footer; mejorar las
   secciones; que quede claro que es parte de Truly Tech». Cada sección tiene ahora SU composición:
   la portada (escena viva), el caso (foto humana + cifra grande), la vitrina en navy (créditos), la
   vista explotada de lo que incluye, los tres pasos y el cierre. La barra y el pie son los de la
   familia Truly Tech (trulytech.ai): ratón + chip TECH arriba, «Truly together.» abajo.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.ld{--barra-h:72px}
.ld-sin-scroll{overflow:hidden}
.ld-h2{font-size:clamp(40px,min(5.4vw,9.5vh),92px);line-height:.98;letter-spacing:-.035em;max-width:18ch}
.ld-h2 span{display:block;color:var(--brand-cobalt)}
.ld-oscura .ld-h2,.ld-cobalto .ld-h2{color:var(--fg-on-deep)}
.ld-oscura .ld-h2 span{color:var(--brand-yellow)}
.ld-cobalto .ld-h2 span{color:var(--fg-on-deep-muted)}
.ld-cabeza2{margin-bottom:clamp(40px,5vw,72px)}

/* ── La barra de la familia Truly Tech ── */
.ld-barra{position:sticky;top:0;inset:auto;z-index:30;height:var(--barra-h);background:var(--bg-surface);color:var(--tinta);box-shadow:0 1px 0 var(--line)}
.ld-barra.is-solida{background:color-mix(in srgb,var(--bg-surface) 94%,transparent);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),var(--sombra-sutil)}
.ld-marca{display:inline-flex;align-items:center;gap:10px;color:var(--tinta)}
.ld-marca img{width:34px;height:auto}
.ld-marca b{font:700 19px/1 var(--font-display);letter-spacing:-.02em}
.ld-tech{display:inline-grid;place-items:center;height:20px;padding:0 7px;border-radius:5px;background:var(--brand-yellow);color:var(--brand-navy);font:700 10px/1 var(--font-mono);letter-spacing:.12em}
.ld-nav{gap:30px}
.ld-nav a{padding:8px 0;color:var(--fg-muted);font-weight:500}
.ld-nav a:hover{color:var(--tinta)}
.ld-nav a[aria-current]{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--brand-cobalt)}
.ld-barra .ld-idiomas-menu summary{color:var(--tinta);border:1px solid var(--line)}
.ld-acceder{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:10px;background:var(--brand-navy);color:var(--white);font:600 15px/1 var(--font-body);cursor:pointer}
.ld-acceder:hover{background:var(--brand-ink)}
.ld-barra :focus-visible{outline-color:var(--brand-cobalt)}

/* ── La portada bajo la barra (ya no flota encima) ── */
.ld-hero{height:calc(100svh - var(--barra-h));min-height:600px;padding-top:clamp(20px,4vh,44px)}
.ld-hero-texto{grid-row:3}
.ld-riel-boton{align-content:center}
.ld-pronto-kicker{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:8px 14px;border-radius:var(--radio-pill);background:color-mix(in srgb,var(--bg-deep) 55%,transparent);box-shadow:inset 0 0 0 1px var(--blanco-24);font:600 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-deep)}
.ld-hero-lead time{display:block;margin-top:6px;font:500 14px/1.4 var(--font-mono);letter-spacing:.02em;color:var(--brand-yellow)}
.ld-cuenta{display:flex;gap:10px}
.ld-cuenta div{display:grid;justify-items:center;gap:4px;min-width:74px;padding:12px 10px;border-radius:14px;background:color-mix(in srgb,var(--bg-deep) 62%,transparent);box-shadow:inset 0 0 0 1px var(--blanco-12);backdrop-filter:blur(10px)}
.ld-cuenta b{font:700 34px/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg-on-deep)}
.ld-cuenta span{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-deep-muted)}
button.ld-boton{border:0;cursor:pointer}
button.ld-enlace{border:0;background:none;color:inherit;cursor:pointer;font:inherit;font-weight:600;padding:0}

/* ── El caso real: la foto humana a un lado, la cifra grande al otro ── */
.ld-caso{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto auto auto;gap:0 var(--g);min-height:min(92svh,860px);align-content:center;overflow:hidden}
.ld-caso{background:var(--bg-surface)}
.ld .ld-caso-foto{position:absolute;inset:0 0 0 auto;z-index:-2;width:56%;height:100%;object-fit:cover;object-position:52% 60%;max-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,var(--bg-deep) 34%);mask-image:linear-gradient(to right,transparent 0,var(--bg-deep) 34%)}
html[dir=rtl] .ld .ld-caso-foto{inset:0 auto 0 0;-webkit-mask-image:linear-gradient(to left,transparent 0,var(--bg-deep) 38%);mask-image:linear-gradient(to left,transparent 0,var(--bg-deep) 38%)}
.ld-caso-texto{grid-column:1;grid-row:1;display:grid;gap:22px}
.ld-caso-texto .ld-indice{color:var(--brand-cobalt)}
.ld-caso-datos{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:0;margin:clamp(40px,6vh,72px) 0 0;border-top:1px solid var(--line-strong)}
.ld-caso-datos div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;padding:22px 20px 0 0}
.ld-caso-datos div+div{padding-inline-start:20px;border-inline-start:1px solid var(--line-strong)}
.ld-caso-datos dd{margin:0;font:700 clamp(48px,4.6vw,84px)/.88 var(--font-display);letter-spacing:-.05em;color:var(--tinta);font-variant-numeric:tabular-nums}
.ld-caso-datos div:last-child dd{color:var(--brand-cobalt)}
.ld-caso-datos dt{font:500 14px/1.35 var(--font-body);color:var(--fg-muted);max-width:20ch}
.ld-caso-nota{grid-column:1;grid-row:3;max-width:60ch;margin-top:0}
.ld-caso .ld-caso-datos{margin-bottom:40px}

/* ── La vitrina en navy: los nombres como créditos, el escenario con escritorio y teléfono ── */
.ld-plantillas.ld-oscura{background:var(--bg-deep)}
.ld-oscura .ld-vitrina-lista{border-top-color:var(--blanco-24)}
.ld-oscura .ld-vitrina-lista button{border-bottom-color:var(--blanco-12);color:var(--blanco-64)}
.ld-oscura .ld-vitrina-lista button:hover{color:var(--fg-on-deep)}
.ld-oscura .ld-vitrina-lista [aria-selected=true]{color:var(--fg-on-deep)}
.ld-oscura .ld-vitrina-lista [aria-selected=true] .ld-vitrina-nombre{font-size:clamp(24px,2.1vw,32px);line-height:1.1;color:var(--fg-on-deep)}
.ld-oscura .ld-vitrina-lista [aria-selected=true] .ld-vitrina-desc{color:var(--fg-on-deep-muted)}
.ld-oscura .ld-vitrina-lista [aria-selected=true] .ld-vitrina-chip{background:none;border-color:var(--blanco-24);color:var(--fg-on-deep)}
.ld-oscura .ld-vitrina-barra{background:var(--brand-yellow)}
.ld-oscura .ld-escritorio{box-shadow:0 50px 120px color-mix(in srgb,var(--brand-cobalt) 30%,transparent),0 0 0 1px var(--blanco-12)}
.ld-oscura .ld-vitrina-pie b{color:var(--fg-on-deep)}
.ld-oscura .ld-vitrina-pie span{color:var(--fg-on-deep-muted)}
.ld-oscura .ld-vitrina-pie small{background:none;border-color:var(--blanco-24);color:var(--fg-on-deep)}

/* ── Qué incluye: la vista explotada ── */
.ld-incluye3{background:var(--tint-soft);overflow:hidden}
.ld-explosion{display:grid;grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:var(--g);align-items:center}
.ld-explosion-lista{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line-strong)}
.ld-explosion-lista li{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;padding:20px 0;border-bottom:1px solid var(--line-strong)}
.ld-explosion-lista b{font:700 22px/1.2 var(--font-display);letter-spacing:-.015em}
.ld-explosion-lista span:not(.ld-explosion-n){grid-column:2;color:var(--fg-muted)}
.ld-explosion-n{grid-row:1/3;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand-cobalt);color:var(--white);font:600 12px/1 var(--font-mono);font-style:normal}
.ld-explosion-escena{position:relative;min-height:640px;direction:ltr}
.ld-explosion-telefono{position:absolute;left:50%;top:50%;width:min(280px,46%);transform:translate(-50%,-50%) rotate(-3deg);padding:9px;border-radius:44px;background:var(--brand-ink);box-shadow:0 50px 100px color-mix(in srgb,var(--bg-deep) 35%,transparent)}
.ld-explosion-telefono .vz-pantalla{border-radius:35px;overflow:hidden}
.ld-flota{position:absolute;display:grid;gap:8px;padding:16px;border-radius:16px;background:var(--bg-surface);box-shadow:0 24px 60px color-mix(in srgb,var(--bg-deep) 18%,transparent),0 0 0 1px var(--line);font-size:14px;line-height:1.4}
.ld-flota-n{position:absolute;top:-12px;left:-12px;box-shadow:0 0 0 4px var(--tint-soft)}
.ld-explosion-telefono .ld-flota-n{top:18px;left:-16px}
.ld-flota--google{left:0;top:6%;width:min(330px,44%);transform:rotate(-2deg)}
.ld-flota--google .vz-campo{min-height:38px;font-size:13px}
.ld-flota-ia{display:flex;gap:8px;align-items:flex-start;margin-top:4px;padding:10px 12px;border-radius:10px;background:var(--bg-selected);color:var(--tinta);font-size:13px}
.ld-flota-ia svg{width:14px;height:14px;flex:none;fill:var(--brand-cobalt);stroke:none;margin-top:2px}
.ld-flota--contenido{right:0;top:12%;width:min(220px,30%);grid-template-columns:auto 1fr;align-items:baseline;gap:6px 12px;transform:rotate(2.5deg)}
.ld-flota--contenido b{font:700 34px/1 var(--font-display);letter-spacing:-.04em;color:var(--brand-cobalt)}
.ld-flota--contenido span{color:var(--fg-muted);font-size:13px}
.ld-flota--chat{right:2%;bottom:8%;width:min(330px,46%);padding:14px;background:var(--tint-soft);transform:rotate(-1.5deg)}
.ld-flota--chat .vz-msg{max-width:none}
.ld-incluye3 .ld-nota{margin-top:20px}

/* ── Cómo empieza: tres pasos con un hilo ── */
.ld-pasos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ld-como:not(.ld-cobalto){background:var(--bg-surface)}
.ld-como:not(.ld-cobalto) .ld-pasos{border-top-color:var(--line-strong)}
.ld-como:not(.ld-cobalto) .ld-pasos li{border-inline-start-color:var(--line)}
.ld-como:not(.ld-cobalto) .ld-paso-n{color:var(--brand-cobalt)}
.ld-como:not(.ld-cobalto) .ld-pasos p:not(.ld-paso-n){color:var(--fg-muted)}
.ld-pasos--3 li{position:relative;padding-top:36px}
.ld-pasos--3 li::before{content:"";position:absolute;top:-6px;inset-inline-start:0;width:11px;height:11px;border-radius:50%;background:var(--brand-yellow)}
.ld-pasos--3 .ld-paso-n{font-size:clamp(64px,6vw,104px)}

/* ── Pie de la familia Truly Tech ── */
.ld-pie{position:relative;overflow:hidden;gap:44px;padding:clamp(64px,8vw,104px) var(--g) 32px;background:radial-gradient(110% 80% at 100% 100%,color-mix(in srgb,var(--brand-cobalt) 50%,transparent) 0%,transparent 62%),var(--bg-deep)}
.ld-pie-arriba{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px var(--g);padding:0;border:0}
.ld-pie-marca p{margin-top:16px;max-width:34ch;font:500 16px/1.5 var(--font-body);color:var(--fg-on-deep-muted)}
.ld-marca--pie{color:var(--fg-on-deep)}
.ld-pie nav{display:grid;gap:12px;align-content:start}
.ld-pie nav .ld-indice{margin-bottom:6px;color:var(--fg-on-deep-muted)}
.ld-pie nav a,.ld-pie-enlace{justify-self:start;padding:0;border:0;background:none;font:400 16px/1.4 var(--font-body);color:var(--blanco-80);text-align:start;cursor:pointer}
.ld-pie nav a:hover,.ld-pie-enlace:hover{color:var(--fg-on-deep)}
.ld-pie-lema{margin:8px 0 0;padding-bottom:.16em;font:800 clamp(40px,13.4vw,250px)/.86 var(--font-display);letter-spacing:-.06em;background:linear-gradient(100deg,var(--brand-yellow) 0%,var(--brand-yellow-light) 52%,var(--brand-yellow) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.ld-pie-abajo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:24px;border-top:1px solid var(--blanco-24);font:400 13px/1.5 var(--font-mono);color:var(--fg-on-deep-muted)}
.ld-arriba{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--blanco-24);border-radius:var(--radio-pill);color:var(--fg-on-deep);margin-inline-start:auto}
.ld-arriba svg{width:16px;height:16px}

/* ── El panel «Acceder» ── */
.ld-acceso{position:fixed;inset:0;z-index:60}
.ld-acceso-fondo{position:absolute;inset:0;background:color-mix(in srgb,var(--bg-deep) 55%,transparent);opacity:0;transition:opacity var(--t-panel) var(--ease)}
.ld-acceso-panel{position:absolute;top:12px;inset-inline-end:12px;width:min(420px,calc(100vw - 24px));display:grid;gap:12px;padding:24px;border-radius:18px;background:var(--bg-surface);color:var(--tinta);box-shadow:var(--sombra-panel);opacity:0;transform:translateY(-8px);transition:opacity var(--t-panel) var(--ease),transform var(--t-panel) var(--ease)}
.ld-acceso.is-abierto .ld-acceso-fondo{opacity:1}
.ld-acceso.is-abierto .ld-acceso-panel{opacity:1;transform:none}
.ld-acceso-cabeza{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.ld-acceso-cabeza h2{font-size:24px}
.ld-acceso-x{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--bg-sunken);color:var(--tinta);cursor:pointer}
.ld-acceso-op{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;color:var(--tinta);transition:border-color var(--t-ui),background var(--t-ui)}
.ld-acceso-op:hover{border-color:var(--brand-cobalt);background:var(--tint-soft)}
.ld-acceso-op img{justify-self:center;width:40px;height:auto}
.ld-acceso-op b{display:block;font:700 17px/1.2 var(--font-display)}
.ld-acceso-op small{display:block;margin-top:2px;font-size:14px;color:var(--fg-muted)}
.ld-acceso-op svg{color:var(--brand-cobalt)}
html[dir=rtl] .ld-acceso-op svg{transform:scaleX(-1)}
.ld-acceso-pie{display:grid;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.ld-acceso-pie p{font-size:14px;color:var(--fg-muted)}
.ld-acceso-pie .ld-boton{justify-content:center}

/* ── v4 en ventanas medianas y teléfonos ── */
@media (max-width:1100px){
  .ld-caso{grid-template-columns:1fr;min-height:0}
  .ld .ld-caso-foto,html[dir=rtl] .ld .ld-caso-foto{position:relative;inset:auto;z-index:0;width:calc(100% + 2 * var(--g));height:min(52vw,380px);margin:0 calc(var(--g) * -1) 36px;-webkit-mask-image:linear-gradient(to top,transparent 0,var(--bg-deep) 40%);mask-image:linear-gradient(to top,transparent 0,var(--bg-deep) 40%);grid-row:1}
  .ld-caso-texto{grid-row:2}
  .ld-caso-datos{grid-row:3}
  .ld-caso-nota{grid-row:4}
  .ld-explosion{grid-template-columns:1fr}
  .ld-explosion-escena{min-height:600px}
  .ld-pasos--3{grid-template-columns:1fr}
  .ld-pie-arriba{grid-template-columns:1fr 1fr}
  .ld-pie-marca{grid-column:1/-1}
}
@media (max-width:760px),(max-aspect-ratio:4/5){
  .ld-hero{height:auto;min-height:0;padding-top:0}
  .ld-barra{gap:12px}
  .ld-marca b{font-size:17px}
  .ld-acceder{padding:0 14px;font-size:14px}
  .ld-cuenta div{min-width:0;flex:1}
  .ld-cuenta b{font-size:26px}
  .ld-explosion-escena{min-height:0;display:grid;gap:16px}
  .ld-explosion-telefono,.ld-flota{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:auto}
  .ld-explosion-telefono{width:min(250px,70%);justify-self:center}
  .ld-pie-lema{font-size:11.2vw}
  .ld-arriba{margin-inline-start:0}
  .ld-caso-datos div{padding-inline-end:10px}
  .ld-caso-datos div+div{padding-inline-start:12px}
  .ld-caso-datos dd{font-size:clamp(34px,10.4vw,48px);white-space:nowrap}
  .ld-caso-datos dt{font-size:13px;overflow-wrap:normal;hyphens:auto}
}
/* «Próximamente»: sin riel visible (la rotación sigue: la barra anima aunque no se vea) y la cuenta con el
   botón en una sola fila, para que todo quepa en una ventana baja. */
.ld-hero--pronto .ld-riel{visibility:hidden;height:0;overflow:hidden}
.ld-hero--pronto{grid-template-rows:auto 1fr auto 0;--riel-h:0px}
.ld-hero--pronto .ld-boton{white-space:nowrap}
.ld-hero--pronto .ld-hero-texto{grid-template-columns:auto 1fr;align-items:center;column-gap:20px}
.ld-hero--pronto .ld-hero-texto>:not(.ld-cuenta):not(.ld-acciones){grid-column:1/-1}
.ld-hero--pronto .ld-hero-titulo{font-size:clamp(48px,min(6.6vw,11vh),120px)}
.ld-marca b{white-space:nowrap}
@media (max-width:760px),(max-aspect-ratio:4/5){
  .ld-hero--pronto .ld-hero-texto{grid-template-columns:1fr;gap:12px;padding-top:14px}
  .ld-hero--pronto .ld-cuenta,.ld-hero--pronto .ld-acciones{grid-column:1}
  .ld-hero.ld-hero--pronto{--alto-escena:clamp(190px,30svh,300px)}
  .ld-hero--pronto .ld-hero-titulo{font-size:clamp(36px,10.6vw,56px)}
  .ld-hero--pronto .ld-hero-lead{font-size:15px}
  .ld-hero--pronto .ld-cuenta div{padding:8px 6px}
  .ld-hero--pronto .ld-cuenta b{font-size:24px}
  .ld-hero--pronto .ld-pronto-kicker{padding:6px 12px}
}
@media (max-width:760px) and (max-height:700px){
  .ld-hero.ld-hero--pronto{--alto-escena:24svh}
  .ld-hero--pronto .ld-hero-lead time{display:inline;margin-inline-start:6px}
}
@media (max-width:420px){
  .ld-barra{gap:8px;padding:0 14px}
  .ld-marca{gap:7px}
  .ld-marca img{width:28px}
  .ld-marca b{font-size:16px}
  .ld-tech{height:18px;padding:0 5px;font-size:9px}
  .ld-barra .ld-idiomas-menu summary{padding:0 8px}
  .ld-acceder{min-height:40px;padding:0 12px;gap:6px}
  .ld-acceder svg{display:none}
}

.ld-boton-wa{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--radio-pill);border:1px solid var(--blanco-24);background:var(--blanco-12);color:var(--fg-on-deep);font:600 16px/1 var(--font-body);backdrop-filter:blur(8px);transition:background var(--t-ui),border-color var(--t-ui)}
.ld-boton-wa:hover{background:var(--blanco-24);border-color:var(--blanco-80)}
.ld-boton-wa svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
/* ════ v5 · el video primero y las diez capacidades (8-oct-2026, noche) ════
   Pablo: «lo primero que debe verse al cargar Truly Inbound es el video, y luego las imágenes» y «no hables de las
   plantillas; habla del beneficio». El video va a sangre bajo la barra; las capacidades reusan la vitrina. */
.ld-video{position:relative;display:grid;background:var(--bg-deep);color:var(--fg-on-deep)}
.ld-video-medio{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100svh - var(--barra-h));object-fit:contain;background:var(--bg-deep)}
.ld-video-controles{position:absolute;inset-inline-start:var(--g);bottom:clamp(14px,2.6vw,32px);display:flex;gap:10px}
.ld-video-controles[hidden],.ld-video-otra[hidden]{display:none}
.ld-video-boton,.ld-video-seguir{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:var(--radio-pill);border:1px solid var(--blanco-24);background:color-mix(in srgb,var(--bg-deep) 64%,transparent);color:var(--fg-on-deep);font:600 15px/1 var(--font-body);backdrop-filter:blur(10px);cursor:pointer;transition:background var(--t-ui),border-color var(--t-ui)}
.ld-video-boton{padding:0 18px}
.ld-video-boton:hover,.ld-video-seguir:hover{background:color-mix(in srgb,var(--bg-deep) 84%,transparent);border-color:var(--blanco-64)}
.ld-video-boton svg,.ld-video-seguir svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ld-video-sonido[aria-pressed=false] .ld-onda,.ld-video-sonido[aria-pressed=true] .ld-mudo{display:none}
.ld-video-otra{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border:0;border-radius:var(--radio-pill);background:var(--brand-yellow);color:var(--brand-navy);font:700 17px/1 var(--font-body);box-shadow:var(--sombra-panel);cursor:pointer}
.ld-video-seguir{position:absolute;bottom:clamp(14px,2.6vw,32px);left:50%;transform:translateX(-50%);width:48px;padding:0}
.ld-video :focus-visible{outline:3px solid var(--brand-yellow);outline-offset:3px}
/* En el teléfono los controles van en una franja bajo el video: encima tapaban lo que el video dice. */
@media (max-width:700px){.ld-video-controles{position:static;padding:10px var(--g);background:var(--bg-deep)}.ld-video-boton{min-height:44px;padding:0 14px;font-size:14px}.ld-video-seguir{display:none}}
.ld-vitrina--caps .ld-vitrina-escenario{direction:inherit;padding:0}
.ld-vitrina>*{min-width:0}
.ld-vitrina--caps .ld-vitrina-lista [aria-selected=true] .ld-vitrina-desc,.ld-vitrina--caps .ld-vitrina-lista [aria-selected=true] .ld-vitrina-chip,.ld-vitrina--caps .ld-vitrina-pie{display:none}
.ld-cap{display:grid;gap:clamp(14px,1.8vw,22px);align-content:start}
.ld-cap-grupo{margin:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-yellow)}
.ld-cap-promesa{margin:0;max-width:30ch;font:600 clamp(24px,2.4vw,36px)/1.15 var(--font-display);letter-spacing:-.02em;text-wrap:balance;color:var(--fg-on-deep)}
.ld-cap-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:6px}
.ld-cap-hoy,.ld-cap-con{display:grid;gap:10px;align-content:start;padding:clamp(18px,2vw,28px);border-radius:18px}
.ld-cap-hoy{border:1px solid var(--blanco-24);color:var(--blanco-80)}
.ld-cap-con{background:var(--bg-surface);color:var(--tinta);box-shadow:var(--sombra-panel)}
.ld-cap-etiqueta{margin:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.ld-cap-hoy .ld-cap-etiqueta{color:var(--blanco-64)}
.ld-cap-con .ld-cap-etiqueta{color:var(--brand-cobalt)}
.ld-cap-hoy>p:last-child,.ld-cap-con>p:last-child{margin:0;font:500 clamp(16px,1.25vw,19px)/1.5 var(--font-body)}
@media (max-width:900px){.ld-cap-par{grid-template-columns:minmax(0,1fr)}}
/* El segundo hero dice lo que promete: la búsqueda de esa ciudad, con Truly Nolen primero (8-oct-2026). */
/* Arriba, bajo el nombre de la ciudad: abajo tapaba el carro, que es el protagonista de cada escena. */
.ld-busca{position:absolute;inset-inline-end:var(--g);top:clamp(116px,15vh,150px);z-index:2;display:grid;gap:10px;width:min(380px,34vw);padding:14px;border-radius:18px;background:var(--bg-surface);color:var(--tinta);box-shadow:var(--sombra-panel)}
.ld-busca-campo{display:flex;align-items:center;gap:10px;margin:0;min-height:44px;padding:0 14px;border-radius:var(--radio-pill);background:var(--tint-soft);font:500 15px/1.2 var(--font-body);color:var(--fg)}
.ld-busca-campo svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--fg-muted);stroke-width:2}
.ld-busca-campo span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ld-busca.is-buscando .ld-busca-campo span::after{content:"";display:inline-block;width:2px;height:1.1em;margin-inline-start:2px;vertical-align:-3px;background:var(--brand-cobalt);animation:ld-cursor .8s steps(2) infinite}
.ld-busca-res{display:flex;align-items:center;gap:12px;margin:0;padding:10px 6px 4px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ld-busca.is-buscando .ld-busca-res{opacity:0;transform:translateY(6px)}
.ld-busca-res img{flex:0 0 28px;width:28px;height:28px}
.ld-busca-res span{display:grid;gap:3px;min-width:0}
.ld-busca-res b{font:600 16px/1.25 var(--font-display);color:var(--brand-cobalt);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ld-busca-res small{justify-self:start;padding:3px 8px;border-radius:6px;background:var(--brand-yellow);color:var(--brand-navy);font:600 11px/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
@keyframes ld-cursor{50%{opacity:0}}
@media (max-width:1100px){.ld-busca{display:none}}
/* Juez 8-oct (m3): en «Próximamente» el botón de WhatsApp bajaba a otra fila y cruzaba el riel. En escritorio va al lado,
   redondo, con el ícono (el nombre queda para lectores de pantalla); en el teléfono sigue con su texto. */
@media (min-width:901px){
 .ld-hero--pronto .ld-acciones{flex-wrap:nowrap;gap:12px}
 .ld-hero--pronto .ld-boton-wa{width:52px;min-height:52px;padding:0;justify-content:center}
 .ld-hero--pronto .ld-boton-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* (m5): a 320 la cabecera no cabía (fr, ka) y la lista de idiomas cerrada igual ocupaba lugar (ar). */
.ld-idiomas-menu:not([open]) ul{display:none}
@media (max-width:380px){
 .ld-barra{gap:8px;padding-inline:12px}
 .ld-barra-acciones{gap:6px}
 .ld-marca{gap:8px}
 .ld-marca b{font-size:16px}
 .ld-tech{height:18px;padding:0 5px;font-size:9px}
 .ld-marca img{width:28px}
 .ld-marca b{font-size:15px}
 .ld-acceder{padding:0 10px;font-size:13px;gap:6px}
 .ld-acceder svg,.ld-barra .ld-idiomas-menu summary svg{display:none}
 .ld-barra .ld-idiomas-menu summary{padding:0 8px;min-width:44px;justify-content:center}
}
/* Revisión en el teléfono (8-oct, noche): la pestaña elegida no se distinguía sobre el fondo oscuro y entre secciones
   quedaban 176 px en blanco. */
@media (max-width:900px){
 .ld-oscura .ld-vitrina-lista [aria-selected=true]{background:var(--brand-yellow);border-color:var(--brand-yellow);color:var(--brand-navy)}
 .ld-oscura .ld-vitrina-lista [aria-selected=true] .ld-vitrina-nombre,.ld-oscura .ld-vitrina-lista [aria-selected=true] .ld-vitrina-n{color:var(--brand-navy)}
}
@media (max-width:700px){.ld{--sec:64px}}
/* Juez 9-oct: en árabe `letter-spacing:0!important` anulaba el -.06em del lema y se salía 13 px. */
html[lang=ar] .ld .ld-pie-lema{letter-spacing:-.06em!important}
/* 9-oct: al final de la página el botón del chat (fijo, 56 px, a la derecha también en árabe) tapaba
   «Volver arriba» a 390. La fila de abajo le deja su lugar: borde del botón + 12 px − el margen del pie. */
.ld-pie-abajo{padding-right:max(0px,calc(clamp(16px,3vw,24px) + 68px - var(--g)))}
@media (max-width:700px){.ld-pie-abajo{padding-right:max(0px,calc(80px - var(--g)))}}
/* ════ El chat de Truly AI · copia de trulytech.ai (tech-immersive-20260910/web/chat.css) ════
   Sus variables son las del sistema del sitio de Truly Tech; acá se nombran con los tokens de Truly
   Inbound para que la piel siga siendo una sola (lo vigila gate-la-landing). */
.tia{--tia-px:40px;--text-primary:var(--fg);--text-muted:var(--fg-muted);--text-inverse:var(--fg-on-deep);--text-inverse-muted:var(--fg-on-deep-muted);--rule-subtle:var(--line);--surface-page:var(--bg-surface);--surface-soft:var(--tint-soft);--surface-deep:var(--bg-deep);--surface-accent:var(--brand-yellow);--shadow-panel:var(--sombra-panel);--radius-pill:var(--radio-pill);--radius-panel:20px;--duration-fast:var(--t-ui);--duration-slow:var(--t-panel);--ease-out:var(--ease);--type-index:12px;--type-label:14px;--hover-subtle:var(--bg-hover);--hover-inverse:color-mix(in srgb,var(--white) 12%,transparent)}
/* ── Truly AI · el chat del sitio ───────────────────────────────────────────────
   Anatomía del widget de Cata (la que Pablo aprobó en Londri), vestida de Truly Nolen.
   Toda la ropa sale de los tokens: si cambia el cobalto, cambia el chat. */
/* El chat esconde piezas con `hidden` y les pone `display` propio: sin esta regla, el
   atributo pierde contra la clase y la invitación, el contador y el reinicio se ven siempre.
   Vive AQUÍ porque el chat también se usa fuera del sitio completo. */
.tia [hidden]{display:none!important}
.tia{position:fixed;right:clamp(16px,3vw,24px);bottom:clamp(16px,3vw,24px);z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:var(--font-body)}
.tia-marca{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--tia-px);height:var(--tia-px);border-radius:50%;isolation:isolate}
.tia-disco{position:absolute;inset:0;border-radius:50%;background:radial-gradient(120% 120% at 30% 25%,var(--brand-yellow-light) 0%,var(--surface-accent) 55%,var(--brand-yellow) 100%);box-shadow:var(--shadow-panel)}
.tia-marca svg{position:relative;width:58%;height:58%;color:var(--brand-ink);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tia-marca--saludo svg{animation:tia-bob 1.1s var(--ease-out) 2}
.tia-marca--pensando svg{animation:tia-tap 1.1s ease-in-out infinite}
.tia-marca--pensando .tia-disco{animation:tia-late 1.6s ease-in-out infinite}
.tia-marca--celebrando svg{animation:tia-pop .7s var(--ease-out) both}
@keyframes tia-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12%)}}
@keyframes tia-tap{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes tia-late{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes tia-pop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
/* El lanzador: muta a ✕ al abrir, y late hasta el primer contacto. */
.tia-fab{position:relative;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;padding:0;background:var(--surface-deep);color:var(--surface-accent);display:grid;place-items:center;box-shadow:var(--shadow-panel);transition:background var(--duration-fast),transform var(--duration-fast);--focus-color:var(--brand-yellow)}
.tia-fab:hover{transform:translateY(-2px)}
.tia-fab svg{grid-area:1/1;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration-slow),opacity var(--duration-fast)}
.tia-fab .tia-fx{width:16px;height:16px;opacity:0;transform:rotate(-90deg) scale(.5)}
.tia--on .tia-fab>svg:first-of-type{opacity:0;transform:rotate(90deg) scale(.5)}
.tia--on .tia-fab .tia-fx{opacity:1;transform:none}
.tia:not(.tia--on):not(.tia--quieta) .tia-fab:before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand-yellow) 60%,transparent);animation:tia-pulso 3.4s var(--ease-out) 1.2s infinite}
@keyframes tia-pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand-yellow) 55%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tia-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--surface-accent);color:var(--text-primary);font-family:var(--font-mono);font-size:11px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface-deep)}
/* La invitación, a los ~6 s y una sola vez. */
.tia-nudge{display:flex;align-items:center;gap:6px;background:var(--surface-page);border:1px solid var(--rule-subtle);border-radius:var(--radius-pill);padding:6px 6px 6px 10px;box-shadow:var(--shadow-panel);animation:tia-entra var(--duration-slow) var(--ease-out) both;max-width:min(84vw,320px)}
.tia-nudge-open{display:flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:var(--text-primary);padding:2px 4px}
.tia-nudge-open b{display:block;font-size:var(--type-label);font-weight:600}
.tia-nudge-open span span{display:block;font-size:var(--type-index);color:var(--text-muted)}
.tia-nudge-x{border:0;background:none;cursor:pointer;color:var(--text-muted);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;order:2}
.tia-nudge-x:hover{background:var(--hover-subtle);color:var(--text-primary)}
.tia-nudge-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@keyframes tia-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* El panel. */
.tia-panel{width:min(92vw,380px);height:min(70vh,560px);display:none;flex-direction:column;background:var(--surface-page);border:1px solid var(--rule-subtle);border-radius:var(--radius-panel);overflow:hidden;box-shadow:var(--shadow-panel)}
.tia--on .tia-panel{display:flex;animation:tia-entra var(--duration-slow) var(--ease-out) both}
.tia-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:var(--surface-deep);color:var(--text-inverse)}
.tia-id{flex:1;min-width:0}
.tia-id b{display:block;font-family:var(--font-display);font-size:var(--type-label);font-weight:600}
.tia-stat{display:flex;align-items:center;gap:6px;font-size:var(--type-index);color:var(--text-inverse-muted)}
.tia-stat i{width:7px;height:7px;border-radius:50%;background:var(--surface-accent)}
.tia-x{border:0;background:none;cursor:pointer;color:var(--text-inverse-muted);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;--focus-color:var(--brand-yellow)}
.tia-x:hover{background:var(--hover-inverse);color:var(--text-inverse)}
.tia-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tia-body{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--surface-soft)}
.tia-hilo{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.tia-msg{max-width:86%;padding:9px 12px;border-radius:var(--radius-panel);font-size:var(--type-label);line-height:1.5;background:var(--surface-page);border:1px solid var(--rule-subtle);color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere}
.tia-msg--yo{align-self:flex-end;background:var(--surface-deep);color:var(--text-inverse);border-color:transparent}
.tia-puntos{align-self:flex-start;display:flex;gap:4px;padding:11px 13px}
.tia-puntos i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:tia-punto 1.2s ease-in-out infinite}
.tia-puntos i:nth-child(2){animation-delay:.15s}.tia-puntos i:nth-child(3){animation-delay:.3s}
@keyframes tia-punto{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.tia-atajos{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px}
.tia-atajo{border:1px solid var(--rule-subtle);background:var(--surface-page);border-radius:var(--radius-pill);padding:7px 12px;font:inherit;font-size:var(--type-index);color:var(--text-primary);cursor:pointer;transition:border-color var(--duration-fast),transform var(--duration-fast)}
.tia-atajo:hover{border-color:var(--brand-cobalt);transform:translateY(-1px)}
.tia-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rule-subtle);background:var(--surface-page)}
.tia-campo{flex:1;min-width:0;border:1px solid var(--rule-subtle);border-radius:var(--radius-pill);padding:10px 14px;font:inherit;font-size:16px;color:var(--text-primary);background:var(--surface-soft)}
.tia-campo:focus-visible{outline:none;border-color:var(--brand-cobalt);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-cobalt) 22%,transparent)}
.tia-send{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;background:var(--brand-cobalt);color:var(--text-inverse);cursor:pointer;display:grid;place-items:center;transition:opacity var(--duration-fast)}
.tia-send[disabled]{opacity:.35;cursor:default}
.tia-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tia-foot{display:flex;align-items:center;justify-content:center;padding:9px;border-top:1px solid var(--rule-subtle);background:var(--surface-page)}
.tia-wa{display:inline-flex;align-items:center;gap:7px;font-size:var(--type-index);color:var(--text-muted)}
.tia-wa:hover{color:var(--text-primary)}
.tia-wa svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:700px){.tia{right:12px;bottom:12px;gap:9px}.tia-panel{width:calc(100vw - 24px);height:min(74vh,540px)}}
html:not(.js) .tia{display:none}
@media(prefers-reduced-motion:reduce){.tia-fab:before,.tia-marca svg,.tia-disco,.tia-puntos i{animation:none!important}.tia-nudge,.tia--on .tia-panel{animation:none!important}}