/* La portada EN MOVIMIENTO (carril WEB-EN, 13 oct 2026; plan: docs/PAGINA_WEB.md §10 y docs/WEB_INVESTIGACION.md).
   Solo la pide index.html (las demás páginas siguen con sitio.css): aquí va lo del HÉROE y lo común; lo de las secciones
   de abajo está en portada-secciones.css (se pide dentro del body, después del héroe). Va DESPUÉS de sitio.css y cambia lo que la portada
   hacía antes (el héroe claro con su tarjeta) por una portada que se cuenta bajando:
     - héroe de NOCHE con el robot vivo (su cabeza voltea en 3D: configurar({ giro: true }) de personaje.js), su luz, los
       objetos que flotan a su alrededor y «Hazlo tuyo» como una hoja que se abre;
     - secciones que se quedan fijas mientras las recorres (data-escena → portada.js les pone .w-viva y .e1, .e2…): el chat
       que se arma solo, Mi computadora, el iPhone con su Actividad en Vivo;
     - lo demás aparece al llegar (.w-revela → .w-visto).
   Las secciones alternan NOCHE (fondo casi negro, letra clara) y DÍA (claro; en tema oscuro, gris muy oscuro) y cada una
   se monta sobre la anterior con las esquinas redondas.
   Sin JavaScript, con «Reducir movimiento» o con «Pausar animaciones» todo se ve completo y quieto: lo escondido y lo
   fijo solo existen bajo html.w-mov (lo pone portada.js) y las animaciones solo bajo «no-preference». */

:root {
  --w-noche: #07060d; --w-noche-2: #0f0d1a; --w-noche-3: #17142a; --w-noche-linea: rgba(255, 255, 255, 0.1);
  --w-tinta: #f6f4ff; --w-tinta-2: #cfc9e8; --w-tinta-3: #a7a1c4;
  --w-dia: #f8f7fd; --w-dia-carta: #ffffff; --w-dia-2: #efedf7; --w-dia-linea: #e6e3f0;
  --w-dia-texto: #0e0c17; --w-dia-texto-2: #4c4763; --w-dia-texto-3: #625d7c;
  --w-luz: #a36bff; --w-luz-2: color-mix(in srgb, var(--w-luz) 40%, #fff); /* (la luz de tu Lyron: hazlo-tuyo.js cambia --w-luz) */
  --w-azul: #1f5fe6; --w-azul-suave: #e7eeff; --w-azul-texto: #1a52cc;
  --w-naranja: #e6740c; --w-naranja-suave: #fff1e2; --w-naranja-texto: #a64e02;
  --w-verde: #16a35a; --w-verde-suave: #e3f7eb; --w-verde-texto: #0f7a40;
  --w-yo: #e8e2ff; --w-yo-texto: #1c1536; --w-el: #f0eff6;
  --w-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --w-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --w-ancho: 1200px;
  --w-orilla: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --w-dia: #0e0d14; --w-dia-carta: #191722; --w-dia-2: #211e2c; --w-dia-linea: #2c2939;
    --w-dia-texto: #f3f1fb; --w-dia-texto-2: #bfb9d6; --w-dia-texto-3: #a49fbd;
    --w-azul: #3b7bff; --w-azul-suave: #172443; --w-azul-texto: #8fb4ff;
    --w-naranja: #f59a3c; --w-naranja-suave: #2d1f0e; --w-naranja-texto: #ffbf7a;
    --w-verde: #2fc073; --w-verde-suave: #10291b; --w-verde-texto: #5fdc98;
    --w-yo: #3a2f66; --w-yo-texto: #f0ebff; --w-el: #25222f;
  }
}
:root[data-tema="oscuro"] {
  --w-dia: #0e0d14; --w-dia-carta: #191722; --w-dia-2: #211e2c; --w-dia-linea: #2c2939;
  --w-dia-texto: #f3f1fb; --w-dia-texto-2: #bfb9d6; --w-dia-texto-3: #a49fbd;
  --w-azul: #3b7bff; --w-azul-suave: #172443; --w-azul-texto: #8fb4ff;
  --w-naranja: #f59a3c; --w-naranja-suave: #2d1f0e; --w-naranja-texto: #ffbf7a;
  --w-verde: #2fc073; --w-verde-suave: #10291b; --w-verde-texto: #5fdc98;
  --w-yo: #3a2f66; --w-yo-texto: #f0ebff; --w-el: #25222f;
}

/* ---------- La página: la portada es de noche arriba (la barra también, mientras va sobre la noche) ---------- */
body[data-pantalla="inicio"] { background: var(--w-noche); }
html:has(body[data-pantalla="inicio"]) { background: var(--w-noche); }
.w-portada { display: block; font-family: var(--letra); }
.w-portada h2, .w-portada h3 { text-wrap: balance; }
/* (la barra sobre una sección de noche —desde el principio: el héroe es de noche—: vidrio oscuro y letra clara; al bajar,
   portada.js pone html[data-barra="dia"] sobre las secciones de día y el pie) */
html:not([data-barra="dia"]) body[data-pantalla="inicio"] .barra { background: color-mix(in srgb, var(--w-noche) 72%, transparent); color: var(--w-tinta); box-shadow: 0 1px 0 var(--w-noche-linea); }
html:not([data-barra="dia"]) body[data-pantalla="inicio"] .barra .marca { color: var(--w-tinta); }
html:not([data-barra="dia"]) body[data-pantalla="inicio"] .nav-principal a { color: var(--w-tinta-2); }
html:not([data-barra="dia"]) body[data-pantalla="inicio"] .nav-principal a:hover { color: var(--w-tinta); background: rgba(255, 255, 255, 0.08); }
html:not([data-barra="dia"]) body[data-pantalla="inicio"] .barra-acciones .texto { color: var(--w-tinta); }
html:not([data-barra="dia"]) body[data-pantalla="inicio"] .barra-acciones .principal { background: #fff; color: #0e0c17; }
html:not([data-barra="dia"]) body[data-pantalla="inicio"] .menu-btn { background: rgba(255, 255, 255, 0.1); color: var(--w-tinta); }
html:not([data-barra="dia"]) body[data-pantalla="inicio"] :where(a, button):focus-visible { outline-color: #fff; }
.barra { transition: background-color 0.35s, color 0.35s, box-shadow 0.35s; }

/* ---------- Letras, etiquetas y botones de la portada ---------- */
.w-etiqueta { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-luz-ink, #6b3fe0); }
.w-noche .w-etiqueta { color: var(--w-luz-2); }
:root[data-tema="oscuro"] .w-dia .w-etiqueta { color: var(--w-luz-2); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .w-dia .w-etiqueta { color: var(--w-luz-2); } }
.w-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--w-luz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-luz) 26%, transparent), 0 0 18px var(--w-luz); }
.w-h2 { margin: 14px 0 16px; font-size: clamp(36px, 5vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; word-spacing: 0.04em; }
.w-entrada { margin: 0; max-width: 680px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--w-dia-texto-2); text-wrap: pretty; }
.w-noche .w-entrada { color: var(--w-tinta-2); }
.w-cabeza-centro { text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto clamp(40px, 5vw, 72px); }
.w-cabeza-centro .w-entrada { margin: 0 auto; }
.w-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border-radius: 99px;
  font: inherit; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s var(--w-rebote), box-shadow 0.3s, background-color 0.3s;
}
.w-boton svg { width: 19px; height: 19px; }
.w-boton.chico { min-height: 46px; padding: 0 18px; font-size: 15px; }
.w-boton-luz { background: #fff; color: #0e0c17; box-shadow: 0 10px 34px -8px color-mix(in srgb, var(--w-luz) 70%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.w-boton-luz:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -8px color-mix(in srgb, var(--w-luz) 85%, transparent); }
.w-boton-vidrio { background: rgba(255, 255, 255, 0.08); color: var(--w-tinta); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.w-boton-vidrio:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.w-boton:active { transform: scale(0.97); }
.w-portada :where(a, button, summary, input):focus-visible { outline: 3px solid var(--w-luz); outline-offset: 3px; }
.w-noche :where(a, button, summary, input):focus-visible { outline-color: #fff; }
.w-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.w-acciones.centradas { justify-content: center; }
.w-chip-mini { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; background: color-mix(in srgb, var(--w-luz) 22%, transparent); color: var(--w-luz-2); white-space: nowrap; }
.w-dia .w-chip-mini { background: var(--w-naranja-suave); color: var(--w-naranja-texto); }
.w-portada .mas-enlace a { color: var(--w-azul-texto); }
.w-noche .mas-enlace a, .w-noche a:not(.w-boton) { color: var(--w-luz-2); }

/* ---------- Secciones: noche y día, cada una montada sobre la anterior ---------- */
.w-seccion { position: relative; padding: clamp(96px, 12vw, 168px) var(--w-orilla); }
.w-seccion > :not(.w-pin):not(.w-cinta):not(.w-cierre-luz) { max-width: var(--w-ancho); margin-left: auto; margin-right: auto; }
.w-noche { background: var(--w-noche); color: var(--w-tinta); }
.w-dia { background: var(--w-dia); color: var(--w-dia-texto); }
.w-portada > .w-seccion { border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0; margin-top: calc(-1 * clamp(28px, 4vw, 48px)); z-index: 1; }
.w-portada > .w-seccion.w-noche { background: radial-gradient(120% 60% at 50% 0%, var(--w-noche-3) 0%, var(--w-noche) 60%); }

/* =====================================================================================================================
   1. EL HÉROE
   ===================================================================================================================== */
.w-heroe { position: relative; isolation: isolate; overflow: clip; min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 4vw, 48px) var(--w-orilla) clamp(84px, 9vw, 120px); }
/* (sube con la barra: la portada empieza detrás de ella) */
body[data-pantalla="inicio"] .w-heroe { margin-top: calc(-1 * (64px + env(safe-area-inset-top))); padding-top: calc(64px + env(safe-area-inset-top) + clamp(20px, 4vw, 48px)); }
.w-cielo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.w-nube { position: absolute; border-radius: 50%; opacity: 0.55; }
.w-nube.n1 { width: 70vmax; height: 70vmax; left: 38%; top: -22vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--w-luz) 46%, transparent), transparent); }
.w-nube.n2 { width: 56vmax; height: 56vmax; left: -18vmax; top: 30%; background: radial-gradient(closest-side, rgba(59, 104, 255, 0.32), transparent); }
.w-nube.n3 { width: 46vmax; height: 46vmax; right: -14vmax; bottom: -20vmax; background: radial-gradient(closest-side, rgba(255, 112, 176, 0.2), transparent); }
.w-estrellas { position: absolute; inset: 0; opacity: 0.6;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 62%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 44% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 78%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 72% 31%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 66%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 93% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 84%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 36% 92%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 66% 52%, #fff 50%, transparent 51%);
}
.w-heroe-dentro { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); grid-template-areas: "texto escenario"; gap: clamp(20px, 4vw, 64px); align-items: center; }
.w-heroe-texto { grid-area: texto; }
.w-escenario-caja { grid-area: escenario; display: flex; flex-direction: column; align-items: center; }
.w-titulo { margin: 22px 0 22px; font-size: clamp(50px, 5.8vw, 96px); font-weight: 800; line-height: 0.96; letter-spacing: -0.035em; word-spacing: 0.06em; }
.w-linea { display: block; overflow: hidden; padding: 0.02em 0 0.1em; margin-bottom: -0.08em; }
.w-linea > span { display: inline-block; }
.w-brilla { color: #fff; background: linear-gradient(100deg, #ffffff 18%, var(--w-luz-2) 40%, var(--w-luz) 52%, var(--w-luz-2) 64%, #ffffff 86%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.w-sub { margin: 0 0 30px; max-width: 560px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--w-tinta-2); text-wrap: pretty; }
.w-donde { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--w-tinta-2); font-size: 14.5px; font-weight: 600; }
.w-donde li { display: inline-flex; align-items: center; gap: 7px; }
.w-donde svg { width: 18px; height: 18px; color: var(--w-tinta-3); }
.w-donde rect { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* El escenario de noche: el robot grande con su luz, su piso de luz y los objetos que flotan a su alrededor */
.w-escenario.escenario { background: none; box-shadow: none; overflow: visible; padding: 0; border-radius: 0; width: 100%; }
.w-escenario .escena { --heroe: clamp(200px, 20vw, 290px); --globo: 76px; padding: 8px 0 18px; }
.w-escenario .escena::before { content: ""; position: absolute; left: 50%; top: calc(var(--globo) + var(--heroe) * 0.55); width: calc(var(--heroe) * 2.6); height: calc(var(--heroe) * 2.6); translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--w-luz) 55%, transparent) 0%, color-mix(in srgb, var(--w-luz) 18%, transparent) 45%, transparent 100%); opacity: 0.75; }
.w-piso { position: absolute; left: 50%; top: calc(var(--globo) + var(--heroe) * 1.22); width: calc(var(--heroe) * 2.2); height: calc(var(--heroe) * 0.5); translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--w-luz) 34%, transparent), transparent 72%); }
.w-piso::after { content: ""; position: absolute; inset: 18% 22%; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-luz) 40%, transparent); opacity: 0; }
.w-escenario .hz-globo { background: #fff; color: #0e0c17; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
.w-escenario .hz-pastilla span { background: rgba(7, 6, 13, 0.62); color: var(--w-tinta); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.w-escenario .pausa-escena { right: 4px; top: 4px; background: rgba(255, 255, 255, 0.1); color: var(--w-tinta); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.w-escenario :is(.pj-rb-piso) { opacity: 0.4; }
.w-orbita { position: absolute; inset: 0; pointer-events: none; } /* (sin z-index: así cada objeto pasa delante o detrás del robot) */
.w-obj { --n: 0; position: absolute; left: 50%; top: calc(var(--globo) + var(--heroe) * 0.6); width: clamp(54px, 5.4vw, 82px); aspect-ratio: 1; margin: calc(clamp(54px, 5.4vw, 82px) / -2) 0 0 calc(clamp(54px, 5.4vw, 82px) / -2); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); user-select: none; will-change: transform;
  /* (los cinco objetos van en UNA imagen —central/orbita.ts—: cada uno es un cuadro de la tira) */
  background: url("/i3d/orbita-p.webp") calc(var(--n) * 25%) 0 / 500% 100% no-repeat; }
@media (min-width: 761px) and (min-resolution: 1.5dppx) { .w-obj { background-image: url("/i3d/orbita-s.webp"); } }
.w-obj[data-orbita="1"] { --n: 1; } .w-obj[data-orbita="2"] { --n: 2; } .w-obj[data-orbita="3"] { --n: 3; } .w-obj[data-orbita="4"] { --n: 4; }
/* (quietos —sin JavaScript, en pausa o con «Reducir movimiento»—: en su lugar alrededor del robot; con movimiento,
   portada.js los mece desde estos mismos lugares: LUGARES) */
.w-obj[data-orbita="0"] { transform: translate(calc(var(--heroe) * 1.05), calc(var(--heroe) * -0.62)) rotate(8deg); }
.w-obj[data-orbita="1"] { transform: translate(calc(var(--heroe) * 1.12), calc(var(--heroe) * 0.42)) rotate(-8deg) scale(0.9); }
.w-obj[data-orbita="2"] { transform: translate(calc(var(--heroe) * -1.12), calc(var(--heroe) * 0.38)) rotate(9deg) scale(0.92); }
.w-obj[data-orbita="3"] { transform: translate(calc(var(--heroe) * -1.02), calc(var(--heroe) * -0.6)) rotate(-10deg) scale(0.85); }
.w-obj[data-orbita="4"] { transform: translate(calc(var(--heroe) * -0.78), calc(var(--heroe) * -1.22)) rotate(-6deg) scale(0.75); }
.escena > :is(.hz-globo, .avatar, .hz-pastilla) { z-index: 2; }

/* «Hazlo tuyo»: el botón con su orilla de luz que gira, y la hoja */
.w-hazlo { position: relative; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px 0 18px; border: 0; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--w-tinta); background: rgba(7, 6, 13, 0.55); isolation: isolate; transition: transform 0.25s var(--w-rebote), background-color 0.25s; }
.w-hazlo::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1; padding: 1.5px;
  background: conic-gradient(from var(--w-ang, 0deg), var(--w-luz), #6f9bff, #ff8fc8, var(--w-luz-2), var(--w-luz));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.w-hazlo svg { width: 20px; height: 20px; color: var(--w-luz-2); }
.w-hazlo svg path { stroke-width: 1.6; }
.w-hazlo:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.w-hazlo[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
@property --w-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.w-panel.hz-panel { color: var(--texto); grid-area: texto; align-self: center; z-index: 3; max-width: 560px; width: 100%; justify-self: start; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 1px var(--linea-tarjeta); }
.w-panel .hz-arriba { gap: 6px; }
.w-panel .hz-arriba h2 { margin-right: auto; }
.w-panel-listo { min-height: 44px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--texto); color: var(--fondo); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.w-heroe[data-panel="abierto"] .w-heroe-texto { display: none; }
.w-heroe[data-panel="abierto"] .w-bajar { visibility: hidden; }

/* La flecha de «baja»: una línea de luz que cae */
.w-bajar { position: absolute; left: 50%; bottom: clamp(18px, 3vw, 34px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 6px 12px; color: var(--w-tinta-3); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
.w-bajar i { position: relative; width: 1.5px; height: 34px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.w-bajar i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(transparent, #fff); }
.w-portada .w-bajar:not(:hover) { color: var(--w-tinta-3); }

@media (max-width: 1000px) {
  .w-heroe { min-height: auto; padding-bottom: 104px; }
  .w-heroe-dentro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "escenario" "panel"; justify-items: center; text-align: center; }
  .w-heroe-texto { display: flex; flex-direction: column; align-items: center; max-width: 680px; }
  .w-sub { margin-left: auto; margin-right: auto; }
  .w-acciones { justify-content: center; }
  .w-donde { justify-content: center; }
  .w-panel.hz-panel { grid-area: panel; justify-self: center; text-align: left; }
  .w-heroe[data-panel="abierto"] .w-heroe-texto { display: flex; }
}
@media (max-width: 760px) {
  /* (en el celular el robot va justo debajo del título: se ve en la primera pantalla) */
  .w-heroe-dentro { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .w-heroe-texto { display: contents; }
  .w-heroe-texto > .w-etiqueta { order: 1; }
  .w-titulo { order: 2; }
  .w-escenario-caja { order: 3; width: 100%; margin: 0 0 18px; }
  .w-sub { order: 4; font-size: 17px; }
  .w-acciones { order: 5; }
  .w-donde { order: 6; }
  .w-panel.hz-panel { order: 7; margin-top: 18px; }
  .w-escenario .pausa-escena { top: auto; bottom: 0; right: 0; }
  .w-escenario .hz-globo { max-width: calc(100% - 40px); }
  .w-titulo { font-size: clamp(40px, 12vw, 64px); margin: 16px 0 6px; }
  .w-escenario .escena { --heroe: 136px; --globo: 66px; padding: 2px 0 10px; }
  .w-obj { width: 48px; margin: -24px 0 0 -24px; }
  .w-obj[data-orbita="4"] { display: none; } /* (en el celular, el de arriba se encimaría con el título) */
  /* (y los de arriba bajan a los lados: el globo ocupa casi todo el ancho; los mismos de LUGARES_CEL en portada.js) */
  .w-obj[data-orbita="0"] { transform: translate(calc(var(--heroe) * 1.1), calc(var(--heroe) * -0.2)) rotate(8deg); }
  .w-obj[data-orbita="1"] { transform: translate(calc(var(--heroe) * 1.16), calc(var(--heroe) * 0.32)) rotate(-8deg) scale(0.9); }
  .w-obj[data-orbita="2"] { transform: translate(calc(var(--heroe) * -1.18), calc(var(--heroe) * 0.3)) rotate(9deg) scale(0.92); }
  .w-obj[data-orbita="3"] { transform: translate(calc(var(--heroe) * -1.2), calc(var(--heroe) * -0.18)) rotate(-10deg) scale(0.85); }
  .w-escenario .hz-globo { font-size: 14.5px; }
  .w-acciones .w-boton { flex: 1 1 100%; }
  .w-acciones { width: 100%; max-width: 420px; }
  .w-bajar span { display: none; }
}

/* =====================================================================================================================
   APARECER AL LLEGAR (.w-revela): solo con movimiento; portada.js marca .w-visto lo que ya se ve al cargar
   ===================================================================================================================== */
html.w-mov .w-revela { transition: opacity 0.9s var(--w-curva), translate 0.9s var(--w-curva), scale 0.9s var(--w-curva); transition-delay: calc(var(--i, 0) * 90ms); }
html.w-mov .w-revela:not(.w-visto) { opacity: 0; translate: 0 34px; }
html.w-mov .w-agente.w-revela:not(.w-visto) { scale: 0.94; }

/* =====================================================================================================================
   MOVIMIENTO: todo lo que se mueve solo va aquí, bajo «no-preference», y se apaga con «Pausar animaciones»
   (la regla de sitio.css: html[data-movimiento="quieto"] * { animation: none; transition: none }).
   ===================================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-movimiento="quieto"]) { scroll-behavior: smooth; }
  .w-linea > span { animation: w-linea-sube 1.05s var(--w-curva) both; animation-delay: calc(0.12s + var(--i, 0) * 0.11s); }
  .w-entra { animation: w-sube 0.9s var(--w-curva) both; animation-delay: calc(0.2s + var(--i, 0) * 0.1s); }
  .w-escenario-caja { animation: w-escenario-entra 1.3s 0.25s var(--w-curva) both; }
  .w-brilla { animation: w-brillo 7s 1.4s ease-in-out infinite; }
  .w-nube.n1 { animation: w-deriva 18s ease-in-out infinite alternate; }
  .w-nube.n2 { animation: w-deriva 22s -6s ease-in-out infinite alternate-reverse; }
  .w-nube.n3 { animation: w-deriva 26s -3s ease-in-out infinite alternate; }
  .w-estrellas { animation: w-titila 5s ease-in-out infinite alternate; }
  .w-escenario .escena::before { animation: w-respira 5.5s ease-in-out infinite; }
  .w-piso::after { animation: w-anillo 3.6s ease-out infinite; }
  .w-hazlo::before { animation: w-gira 5s linear infinite; }
  .w-bajar i::after { animation: w-cae 2.2s var(--w-curva) infinite; }
  .w-punto { animation: w-late 2.4s ease-in-out infinite; }
  .w-panel:not([hidden]) { animation: w-panel-entra 0.55s var(--w-rebote) both; }
}
@keyframes w-linea-sube { from { transform: translateY(42%); } } /* (nunca invisible: el título es lo primero que se pinta —LCP—) */
@keyframes w-sube { from { opacity: 0.3; transform: translateY(16px); } }
@keyframes w-escenario-entra { from { opacity: 0.35; transform: translateY(26px); } }
@keyframes w-brillo { 0%, 18% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@keyframes w-deriva { to { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes w-titila { to { opacity: 0.25; } }
@keyframes w-respira { 0%, 100% { scale: 1; opacity: 0.75; } 50% { scale: 1.08; opacity: 1; } }
@keyframes w-anillo { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes w-gira { to { --w-ang: 360deg; } }
@keyframes w-cae { from { transform: translateY(-110%); } to { transform: translateY(260%); } }
@keyframes w-late { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes w-panel-entra { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@keyframes w-entra-msj { from { opacity: 0; transform: translateY(14px) scale(0.92); } }
@keyframes w-traza { from { stroke-dashoffset: 20; } }
@keyframes w-gira-rueda { to { transform: rotate(360deg); } }
@keyframes w-clic { 50% { transform: scale(0.78); } }
@keyframes w-puntitos { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes w-onda { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@keyframes w-manecilla { to { transform: rotate(360deg); } }
@keyframes w-zzz { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-3px); opacity: 0.5; } }
@keyframes w-viaja { from { transform: translateX(-12px); } to { transform: translateX(48px); } }
@keyframes w-anillo-pausa { from { transform: scale(0.94); opacity: 1; } to { transform: scale(1.22); opacity: 0; } }
@keyframes w-cinta { to { transform: translateX(-50%); } }
@keyframes w-ecualiza { to { transform: scaleY(0.2); } }
@keyframes w-timbre { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -14deg; } 84% { rotate: 12deg; } 92% { rotate: -6deg; } }
@keyframes w-escribe-linea { 0% { transform: scaleX(0); } 40%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes w-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes w-ondea { from { transform: scale(0.9); opacity: 0.9; } to { transform: scale(2); opacity: 0; } }
@keyframes w-traza-larga { from { stroke-dashoffset: 260; } }
@keyframes w-aparece { from { opacity: 0; transform: scale(0.4); } }
@keyframes w-traza-icono { from { stroke-dashoffset: 80; } }
@keyframes w-candado { from { transform: translateY(-3px) rotate(-12deg); } }

/* (oscuro: los botones azules un poco más hondos —letra blanca con contraste AA—) */
:root[data-tema="oscuro"] { --w-azul: #2a63e3; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --w-azul: #2a63e3; } }

/* (con «Reducir movimiento», tampoco transiciones: los cambios de color, de tamaño y de lugar son inmediatos) */
@media (prefers-reduced-motion: reduce) { .w-portada *, .w-portada *::before, .w-portada *::after, .barra, .barra-pegada { transition: none !important; } }