/* Truly Nolen Tech · página de expectativa
   Una pantalla con un solo protagonista, el teaser; alrededor, silencio: sin tarjetas,
   sin lavados, sin etiquetas en mayúsculas. Todo el color sale de tokens.css. */
@font-face{font-family:'Noto Sans Arabic';src:url('/assets/fonts/noto-sans-arabic.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
:root{--pr-font-arabic:'Noto Sans Arabic',var(--font-body);--pr-bar:64px;--pr-foco:color-mix(in srgb,var(--brand-cobalt) 55%,transparent)}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:auto}
body.pr{margin:0;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;color:var(--text-inverse);font-family:var(--font-body);-webkit-font-smoothing:antialiased;
 /* Un solo foco de luz, detrás del video: la pantalla ilumina la sala. */
 background:radial-gradient(64% 48% at 50% 46%,var(--pr-foco) 0%,transparent 72%),var(--surface-deep)}
button{font:inherit;color:inherit}
img,svg,video{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--surface-accent);outline-offset:3px;border-radius:4px}

.pr-skip{position:fixed;top:8px;inset-inline-start:16px;z-index:60;padding:12px 16px;border-radius:var(--radius-control);background:var(--surface-accent);color:var(--action-text);font-weight:600;text-decoration:none;transform:translateY(-220%)}
.pr-skip:focus{transform:none}

/* ── Barra ── */
.pr-barra{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--pr-bar);padding:var(--space-3) var(--gutter)}
.pr-marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.pr-marca img{width:30px;height:38px;object-fit:contain}
.pr-marca-tech{display:inline-block;margin-inline-start:8px;padding:3px 7px;border-radius:6px;vertical-align:2px;background:var(--surface-accent);color:var(--action-text);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.pr-idiomas{display:flex;gap:2px;padding:3px;border:1px solid var(--rule-inverse);border-radius:var(--radius-pill)}
.pr-idiomas a{min-width:38px;padding:7px 9px;border-radius:var(--radius-pill);text-align:center;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-inverse-muted);transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}
.pr-idiomas a:hover{background:var(--hover-inverse);color:var(--text-inverse)}
.pr-idiomas a[aria-current]{background:var(--text-inverse);color:var(--brand-navy)}

/* ── Escenario ── */
.pr-main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1180px;margin:0 auto;padding:clamp(4px,1.5vh,20px) var(--gutter) var(--space-10);text-align:center}
.pr-main:focus{outline:none}
.pr-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--space-3);font-size:15px;font-weight:500;color:var(--text-inverse-muted)}
/* El punto amarillo es el del teaser: el que recorre la red y termina en la fecha. */
.pr-punto{width:10px;height:10px;border-radius:50%;background:var(--surface-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand-yellow) 22%,transparent)}
/* En móvil estos textos se parten en dos líneas: `balance` reparte el peso y evita que una
   palabra quede sola abajo. */
.pr-titulo span,.pr-eyebrow,.pr-fecha,.pr-sede,.pr-tuhora,.pr-cta span,.pr-subtitulo{text-wrap:balance}
.pr-titulo{display:flex;flex-direction:column;margin:0;font-family:var(--font-display);line-height:.98;letter-spacing:-.035em}
.pr-titulo span:first-child{font-weight:800;font-size:clamp(2.6rem,min(5.4vw,8.4svh),4.75rem)}
.pr-titulo span:last-child{margin-top:.12em;font-weight:300;font-size:clamp(1.6rem,min(3vw,4.8svh),2.7rem);letter-spacing:-.02em}
.pr-lead{max-width:36rem;margin:var(--space-4) 0 0;font-size:var(--type-lead);line-height:1.5;color:var(--text-inverse-muted)}

/* ── El video ──
   El ancho sale de la altura de la ventana: video y contador entran en la primera pantalla. */
.pr-video{position:relative;width:min(100%,1000px,max(520px,calc((100svh - 470px) * 16 / 9)));margin:clamp(16px,2.6vh,32px) 0 0}
.pr-marco{position:relative;z-index:1;aspect-ratio:16/9;overflow:hidden;border-radius:clamp(12px,1.4vw,18px);background:var(--brand-ink);box-shadow:0 0 0 1px var(--rule-inverse),0 40px 90px color-mix(in srgb,var(--brand-ink) 70%,transparent)}
.pr-marco video{width:100%;height:100%;object-fit:cover;background:var(--brand-ink)}

.pr-boton{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:var(--radius-pill);cursor:pointer;font-weight:600;line-height:1;background:var(--action-bg);color:var(--action-text);box-shadow:0 10px 28px color-mix(in srgb,var(--brand-ink) 40%,transparent);transition:background var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}
.pr-boton:hover{background:var(--action-hover)}
.pr-boton[hidden]{display:none}
.pr-boton svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr-sonido{inset-block-end:16px;inset-inline-start:16px;padding:12px 18px 12px 14px;font-size:15px}
.pr-sonido svg path:first-child{fill:currentColor}
.pr-play{top:50%;left:50%;padding:18px 26px 18px 20px;font-size:17px;transform:translate(-50%,-50%)}
.pr-play:hover{transform:translate(-50%,calc(-50% - 1px))}
.pr-play svg{fill:currentColor;stroke:none}
.pr-video--sin .pr-marco video{opacity:.35}

/* Los subtítulos, debajo del marco: el teaser ya escribe en casi toda su superficie. */
.pr-subtitulo{position:relative;z-index:1;min-height:2.3em;margin:var(--space-2) auto 0;max-width:44rem;font-size:clamp(15px,1.35vw,18px);line-height:1.45;font-weight:500;color:var(--text-inverse)}
.pr-video--sonido[data-idioma="es"] .pr-subtitulo{visibility:hidden}
html:not(.js) .pr-subtitulo{display:none}

/* ── La cuenta regresiva ──
   Una tira, no cuatro tarjetas: las cifras en mono porque no bailan al cambiar. */
.pr-cuenta{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.pr-faltan{margin:0;font-size:15px;font-weight:500;color:var(--text-inverse-muted)}
.pr-reloj{display:flex;align-items:stretch}
.pr-reloj[hidden],.pr-faltan[hidden]{display:none}
.pr-celda{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:clamp(76px,9vw,116px);padding:var(--space-1) clamp(10px,1.6vw,22px)}
.pr-celda+.pr-celda{border-inline-start:1px solid var(--rule-inverse)}
.pr-num{font-family:var(--font-mono);font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pr-unidad{font-size:13px;color:var(--text-inverse-muted)}
.pr-lanzado{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.02em;color:var(--surface-accent)}
.pr-lanzado[hidden]{display:none}
html:not(.js) .pr-reloj,html:not(.js) .pr-faltan{display:none}
.pr-fecha{margin:var(--space-3) 0 0;font-size:var(--type-lead);font-weight:600}
.pr-sede,.pr-tuhora{margin:0;font-size:15px;color:var(--text-inverse-muted)}
.pr-tuhora[hidden]{display:none}

/* ── Hablar con Truly IA ── */
.pr-cta{display:inline-flex;align-items:center;gap:10px;margin-top:var(--space-6);padding:14px 22px;border:1px solid var(--rule-inverse);border-radius:var(--radius-pill);background:transparent;cursor:pointer;font-size:16px;font-weight:600;transition:border-color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease)}
.pr-cta:hover{border-color:var(--surface-accent);background:var(--hover-inverse)}
.pr-cta svg{width:20px;height:20px;fill:none;stroke:var(--surface-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html:not(.js) .pr-cta{display:none}
/* El lanzador del chat es navy sobre el blanco del sitio; aquí el fondo YA es navy y lo
   borraría. En esta página va en amarillo, como el punto del teaser. */
.pr .tia-fab{background:var(--surface-accent);color:var(--action-text);box-shadow:0 10px 28px color-mix(in srgb,var(--brand-ink) 45%,transparent)}

/* ── Pie ── */
.pr-pie{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-5);padding:var(--space-5) var(--gutter) var(--space-8);font-size:13px;color:var(--text-inverse-muted)}
.pr-pie p{margin:0}
.pr-pie nav{display:flex;gap:var(--space-4)}
.pr-pie a{text-decoration:none}
.pr-pie a:hover{color:var(--text-inverse);text-decoration:underline}

/* ── Árabe ──
   Nada de espaciado entre letras: rompe las ligaduras que unen el árabe. */
html[dir="rtl"] body.pr{font-family:var(--pr-font-arabic)}
html[dir="rtl"] .pr-titulo{font-family:var(--pr-font-arabic);letter-spacing:0;line-height:1.2}
html[dir="rtl"] .pr-titulo span:first-child{font-weight:800;font-size:clamp(2.2rem,min(4.6vw,7.4svh),4rem)}
html[dir="rtl"] .pr-titulo span:last-child{font-weight:400;letter-spacing:0}
html[dir="rtl"] .pr-lanzado{font-family:var(--pr-font-arabic);letter-spacing:0}
html[dir="rtl"] .pr-sonido{padding:12px 14px 12px 18px}
/* El armazón del chat se queda en LTR —el botón abajo a la derecha, como en los otros
   idiomas; en RTL `flex-end` lo mandaba a la izquierda del panel— y lo que se lee va en RTL. */
html[dir="rtl"] .tia{direction:ltr;font-family:var(--pr-font-arabic)}
html[dir="rtl"] .tia-panel,html[dir="rtl"] .tia-nudge{direction:rtl}

/* ── Anchos ── */
@media(max-width:700px){
 :root{--pr-bar:56px}
 .pr-barra{padding:var(--space-2) var(--space-4)}
 .pr-marca{font-size:15px;gap:8px}
 .pr-marca img{width:26px;height:32px}
 .pr-idiomas a{min-width:34px;padding:6px 7px;font-size:12px}
 .pr-main{padding:var(--space-2) var(--space-4) var(--space-8)}
 .pr-eyebrow{font-size:13px}
 .pr-lead{font-size:var(--type-body)}
 .pr-video{width:100%;min-width:0}
 .pr-sonido{inset-block-end:10px;inset-inline-start:10px;padding:9px 14px 9px 11px;font-size:13px}
 .pr-sonido svg{width:17px;height:17px}
 .pr-play{padding:14px 20px 14px 16px;font-size:15px}
 .pr-reloj{width:100%}
 .pr-celda{flex:1;min-width:0;padding-inline:4px}
 .pr-fecha{font-size:var(--type-body)}
 /* El botón del chat vive abajo a la derecha: el pie le deja lugar. */
 /* El pie queda a la izquierda del botón flotante del chat, sin empujar la página. */
 .pr-pie{flex-direction:column;align-items:flex-start;gap:2px;padding:var(--space-3) 88px var(--space-4) var(--space-4)}
 html[dir="rtl"] .pr-pie{align-items:flex-end}
}
@media(max-width:400px){.pr-marca>span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* ── Una sola vista (Pablo, 23-sep-2026: «que el sitio se vea en una sola vista») ─────────────
   La emoción está en ver JUNTOS el titular, el video, la cuenta regresiva y la fecha. En
   escritorio van en dos columnas —el mensaje a la izquierda, el video a la derecha— y el alto
   del video sale de la ventana, para que nunca empuje nada fuera de la vista. En árabe el grid
   se refleja solo (el video queda a la izquierda). Lo mide qa.mjs: la página no puede scrollear. */
@media (min-width:900px){
 .pr-main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);
   grid-template-areas:"eyebrow video" "titulo video" "cuenta video" "cta video";
   grid-template-rows:auto auto auto auto;align-content:center;align-items:start;column-gap:clamp(32px,4.5vw,80px);
   max-width:1560px;padding-block:clamp(8px,2svh,24px);text-align:start}
 .pr-eyebrow{grid-area:eyebrow;justify-self:start}
 .pr-titulo{grid-area:titulo}
 .pr-titulo span:first-child{font-size:clamp(2.8rem,min(4.8vw,9.5svh),5.4rem)}
 .pr-titulo span:last-child{font-size:clamp(1.5rem,min(2.5vw,4.8svh),2.7rem)}
 .pr-video{grid-area:video;align-self:center;justify-self:end;width:min(100%,calc((100svh - 200px) * 16 / 9));min-width:0;margin:0}
 .pr-subtitulo{max-width:none}
 .pr-cuenta{grid-area:cuenta;align-items:flex-start;margin-top:clamp(18px,4svh,40px)}
 .pr-celda:first-child{padding-inline-start:0;min-width:0}
 .pr-cta{grid-area:cta;justify-self:start;margin-top:clamp(16px,3.5svh,32px)}
 .pr-pie{padding-block:var(--space-2) var(--space-4)}
 /* En árabe la columna del mensaje es más alta (renglones más altos y más cortes): se compensa
    con el titular y el aire, no con el video. */
 html[dir="rtl"] .pr-titulo span:first-child{font-size:clamp(2.2rem,min(3.9vw,7.6svh),4.4rem)}
 html[dir="rtl"] .pr-titulo span:last-child{font-size:clamp(1.3rem,min(2.1vw,4svh),2.2rem)}
 html[dir="rtl"] .pr-cuenta{margin-top:clamp(12px,3svh,32px)}
 html[dir="rtl"] .pr-fecha,html[dir="rtl"] .pr-sede{line-height:1.35}
}
/* En árabe el titular es más largo: en celular se parte en dos renglones y empuja todo. */
@media (max-width:899px){
 html[dir="rtl"] .pr-titulo span:first-child{font-size:clamp(1.8rem,8.4vw,2.5rem)}
 html[dir="rtl"] .pr-titulo span:last-child{font-size:clamp(1.25rem,5.4vw,1.6rem)}
 html[dir="rtl"] .pr-sede,html[dir="rtl"] .pr-fecha{line-height:1.45}
}
/* Celulares bajos (iPhone SE, 375×667): se aprieta lo secundario para que titular, video y
   cuenta regresiva sigan entrando juntos. */
@media (max-width:899px) and (max-height:760px){
 .pr-main{padding-bottom:var(--space-4)}
 .pr-titulo span:first-child{font-size:clamp(2.2rem,11vw,2.9rem)}
 .pr-titulo span:last-child{font-size:clamp(1.3rem,6vw,1.6rem)}
 .pr-video{margin-top:var(--space-3)}
 .pr-tuhora{display:none}
 .pr-cta{margin-top:var(--space-4);padding:11px 18px}
}
@media (max-width:899px) and (max-height:700px){
 .pr-eyebrow{margin-bottom:var(--space-2);font-size:12px}
 .pr-subtitulo{min-height:1.5em;margin-top:6px}
 .pr-num{font-size:26px}
 .pr-unidad{font-size:11px}
 .pr-fecha{margin-top:var(--space-2);font-size:15px}
 .pr-sede{font-size:13px}
 .pr-cta{margin-top:var(--space-3)}
 .pr-cuenta{gap:4px}
 html[dir="rtl"] .pr-sede,html[dir="rtl"] .pr-fecha{line-height:1.3}
}