/* ============================================================
   PLANET 6 INNOVATING — EXPERIENCE UNIVERSE
   Design system. Un solo lugar donde vive cada decisión visual.
   Paleta tomada del tablero propio "MISSION: EXPERIENCE BEYOND".
   ============================================================ */

:root{
  /* ---- color: base ---- */
  --space:      #0B1020;   /* space black  — el vacío */
  --space-deep: #05070F;   /* más profundo que el vacío */
  --carbon:     #10162A;
  --steel:      #7E96C4;
  --electric:   #1D4EDB;   /* electric blue */
  --cosmic:     #5B8CFF;   /* cosmic cyan  */
  --nebula:     #8B5CF6;   /* nebula violet */
  --gold:       #C7A86B;   /* stellar gold */
  --moon:       #F4F7FB;   /* moonlight white */

  --ink:        var(--moon);
  --ink-soft:   #A9B4CC;
  --ink-dim:    #626E8A;
  --hair:       rgba(244,247,251,.13);
  --hair-soft:  rgba(244,247,251,.07);

  /* ---- color: acento por mundo (regla 17) ---- */
  --accent:     var(--gold);
  --accent-rgb: 199,168,107;

  /* ---- tipografía ---- */
  --wm:   "Michroma","Arial Black",system-ui,sans-serif;
  --sans: "Archivo","Helvetica Neue",Arial,sans-serif;
  --mono: "Azeret Mono",ui-monospace,Menlo,monospace;

  /* ---- espacio ---- */
  --pad:    clamp(20px,3.4vw,58px);
  --gutter: clamp(14px,1.5vw,26px);
  --safe-t: clamp(60px,7vh,88px);
  --safe-b: clamp(52px,6vh,74px);

  /* ---- vidrio ---- */
  --glass-bg:     linear-gradient(158deg, rgba(244,247,251,.075), rgba(244,247,251,.018) 42%, rgba(11,16,32,.30));
  --glass-border: rgba(244,247,251,.16);
  --glass-blur:   blur(3px) saturate(1.05);
  --glass-shadow: 0 30px 80px rgba(0,0,0,.55), 0 2px 0 rgba(244,247,251,.06) inset;
  --radius:       3px;
  --radius-lg:    5px;

  /* ---- movimiento (regla 86) ---- */
  --motion-instant:   120ms;
  --motion-fast:      260ms;
  --motion-normal:    450ms;
  --motion-cinematic: 700ms;
  --motion-portal:    720ms;
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-inout:   cubic-bezier(.65,0,.35,1);
  --ease-out:     cubic-bezier(.22,.61,.36,1);

  --portal-lift:  -10px;
  --portal-scale: 1.018;
  --bg-fade:      620ms;

  /* ---- capas ---- */
  --z-bg: 0; --z-canvas: 1; --z-connect: 2; --z-main: 3;
  --z-portal: 4; --z-planet: 6; --z-chrome: 20; --z-menu: 40; --z-boot: 90;
}

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; overscroll-behavior-y:none }
body{
  margin:0; min-height:100svh; background:var(--space-deep); color:var(--ink);
  font-family:var(--sans); font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100% }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px }
::selection{ background:rgba(var(--accent-rgb),.30); color:var(--moon) }

/* ============================================================
   1. EL ESPACIO — fondo, atmósfera, lienzo
   ============================================================ */

/* el contenedor recorta: una capa fija mas grande que la pantalla puede
   alargar el area desplazable y provocar scroll horizontal */
.fondo{ position:fixed; inset:0; z-index:var(--z-bg); overflow:hidden; pointer-events:none }

/* dos capas que se cruzan: nunca se cambia background-image en caliente */
.bg{
  position:absolute; inset:-4%; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transform:scale(1.045);
  transition:opacity var(--bg-fade) var(--ease-inout),
             transform 1400ms var(--ease-premium),
             filter var(--bg-fade) var(--ease-inout);
  filter:blur(7px) saturate(.62) brightness(.42);
  will-change:opacity,transform;
}
.bg.on{ opacity:1; transform:scale(1.012) }
/* dentro de un mundo la foto respira: menos desenfoque, más presencia */
body[data-view="world"] .bg.on{ filter:blur(3px) saturate(.72) brightness(.46) }

/* velos: garantizan que el texto sea legible sobre cualquier foto (regla 92) */
.veil{ position:fixed; inset:0; z-index:var(--z-bg); pointer-events:none }
.veil.grad{
  background:
    radial-gradient(120% 80% at 50% 8%,  rgba(5,7,15,.10), rgba(5,7,15,.72) 78%),
    linear-gradient(180deg, rgba(5,7,15,.78) 0%, rgba(5,7,15,.22) 26%, rgba(5,7,15,.30) 58%, rgba(5,7,15,.88) 100%);
}
.veil.vig{
  background:radial-gradient(115% 92% at 50% 46%, transparent 44%, rgba(3,5,10,.66) 100%);
  mix-blend-mode:multiply;
}
/* tinte del mundo activo: unifica foto y marca sin teñir de más */
.veil.tint{
  background:radial-gradient(90% 70% at 50% 100%, rgba(var(--accent-rgb),.14), transparent 62%);
  opacity:0; transition:opacity var(--bg-fade) var(--ease-inout);
}
body.previewing .veil.tint{ opacity:1 }

#polvo{
  position:fixed; inset:0; z-index:var(--z-canvas); display:block; pointer-events:none;
  will-change:transform;
}

/* ---------- el planeta: SVG, existe aunque el JS no corra ---------- */
.planeta{
  position:fixed; left:50%; bottom:clamp(18px,3.4vh,46px); z-index:var(--z-planet);
  width:clamp(205px,19vw,300px); transform:translateX(-50%); pointer-events:none;
  --brillo:.58;
  opacity:0; transition:opacity 1200ms var(--ease-out) 260ms;
}
body.ready .planeta{ opacity:1 }
/* el planeta es una imagen de verdad: se ve aunque el JS no corra */
.planeta picture, .planeta .p6-img{ width:100%; height:auto; display:block }
body.reading .planeta{ --brillo:.42 }

/* zona interactiva del planeta: en el home no promete nada, en un mundo regresa */
.planet-hit{
  all:unset; position:fixed; left:50%; z-index:calc(var(--z-planet) + 1);
  bottom:clamp(18px,3.4vh,46px); width:clamp(205px,19vw,300px); aspect-ratio:1.1/1;
  transform:translateX(-50%); border-radius:50%; cursor:pointer; display:block;
}
body[data-view="home"] .planet-hit{ display:none }

/* dentro de un mundo el planeta se aparta: la lectura manda sobre la decoración.
   Sigue visible y sigue siendo el regreso al universo. */
/* Dentro de un mundo la esquina de abajo a la derecha la ocupa la marca de
   regreso —el emblema completo— y no el planeta central, que es del home.
   Va por encima de "Experiencias que trascienden", con sitio de sobra para
   que quepa su rotulo sin tocarlo. */
body[data-view="world"] .planeta{ display:none }
body[data-view="world"] .planet-hit{
  left:auto; right:clamp(12px,2.2vw,32px); transform:none;
  width:clamp(74px,6.2vw,98px); aspect-ratio:auto; height:auto;
  bottom:clamp(74px,10.5vh,104px); opacity:.82;
  transition:opacity var(--motion-normal) var(--ease-out);
}
body[data-view="world"] .planet-hit:hover,
body[data-view="world"] .planet-hit:focus-visible{ opacity:1 }
body[data-view="world"] .orbits{ display:none }

/* ============================================================
   2. CROMO — cabecera, menú, pie
   ============================================================ */
header{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-chrome);
  display:flex; align-items:center; gap:var(--gutter);
  padding:clamp(14px,1.7vh,22px) var(--pad);
}
/* EL VELO DEL ENCABEZADO.
   El contenido pasa POR DEBAJO del encabezado al desplazar, asi que en
   cuanto llega una foto clara el logotipo y el menu se quedan encima de
   ella y dejan de leerse. Es un descuido que un cliente si nota.
   Un degradado a negro que aparece solo cuando ya se ha bajado: arriba del
   todo no hay nada debajo y el velo sobraria. No intercepta el raton. */
header::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:190%;
  background:linear-gradient(to bottom,
    rgba(3,5,11,.86) 0%, rgba(3,5,11,.62) 42%, rgba(3,5,11,0) 100%);
  opacity:0; pointer-events:none; z-index:-1;
  transition:opacity 420ms var(--ease-out);
}
body.desplazada header::before{ opacity:1 }
@media (prefers-reduced-motion: reduce){
  header::before{ transition:none }
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
.brand picture{ display:block; flex:none }
.brand img{ width:clamp(26px,2.1vw,34px); height:auto; flex:none }
.brand b{
  font-family:var(--wm); font-weight:400; font-size:clamp(8.5px,.62vw,10px);
  letter-spacing:.16em; white-space:nowrap; color:var(--moon); opacity:.92;
}
nav.links{ display:flex; gap:clamp(14px,1.9vw,32px) }
nav.links a{
  position:relative; padding:6px 0; text-decoration:none;
  font-family:var(--mono); font-size:clamp(8.5px,.6vw,9.5px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
  transition:color var(--motion-fast) var(--ease-out);
}
nav.links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right var(--motion-normal) var(--ease-premium);
}
nav.links a:hover,nav.links a[aria-current]{ color:var(--moon) }
nav.links a:hover::after,nav.links a[aria-current]::after{ right:0 }

.burger{
  all:unset; box-sizing:border-box; cursor:pointer; flex:none;
  width:clamp(34px,2.6vw,40px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--hair); display:grid; place-items:center; gap:0;
  transition:border-color var(--motion-fast), background var(--motion-fast);
}
.burger:hover{ border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.07) }
.burger i{ display:block; width:13px; height:1px; background:var(--moon); transition:transform var(--motion-fast) var(--ease-inout) }
.burger i:first-child{ transform:translateY(-2.5px) }
.burger i:last-child{ transform:translateY(2.5px) }
.burger[aria-expanded="true"] i:first-child{ transform:rotate(45deg) }
.burger[aria-expanded="true"] i:last-child{ transform:rotate(-45deg) }

/* pie del universo */
.edge{
  position:fixed; bottom:clamp(16px,2.4vh,30px); z-index:var(--z-chrome);
  font-family:var(--mono); font-size:clamp(7.5px,.58vw,9px);
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-dim);
  line-height:1.9; pointer-events:none;
  opacity:0; transition:opacity var(--motion-cinematic) var(--ease-out);
}
body.ready .edge{ opacity:1 }
.edge.l{ left:var(--pad) } .edge.r{ right:var(--pad); text-align:right }

/* migas espaciales (regla 56) */
.crumb{
  position:fixed; top:calc(var(--safe-t) - 14px); left:var(--pad); z-index:var(--z-chrome);
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-dim); opacity:0; transform:translateY(-6px);
  transition:opacity var(--motion-normal), transform var(--motion-normal) var(--ease-premium);
}
body[data-view="world"] .crumb{ opacity:1; transform:none }
.crumb a{ text-decoration:none; color:var(--ink-soft); transition:color var(--motion-fast) }
.crumb a:hover{ color:var(--accent) }
.crumb s{ text-decoration:none; opacity:.42 }
.crumb b{ font-weight:400; color:var(--accent) }

/* ============================================================
   3. MENÚ COMPLETO
   ============================================================ */
.sheet{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:rgba(5,7,15,.90); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  display:grid; place-items:center; padding:var(--pad);
  opacity:0; visibility:hidden; transition:opacity var(--motion-normal), visibility var(--motion-normal);
}
.sheet[data-open="true"]{ opacity:1; visibility:visible }
.sheet ol{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(6px,1.1vh,14px) }
.sheet li{ overflow:hidden }
.sheet a{
  display:flex; align-items:baseline; gap:clamp(12px,1.6vw,24px); text-decoration:none;
  font-size:clamp(24px,4.2vw,52px); font-weight:600; letter-spacing:-.03em;
  font-variation-settings:"wdth" 112; color:var(--ink-soft);
  transform:translateY(105%); transition:transform var(--motion-cinematic) var(--ease-premium), color var(--motion-fast);
}
.sheet[data-open="true"] a{ transform:none }
.sheet li:nth-child(1) a{ transition-delay:40ms }  .sheet li:nth-child(2) a{ transition-delay:80ms }
.sheet li:nth-child(3) a{ transition-delay:120ms } .sheet li:nth-child(4) a{ transition-delay:160ms }
.sheet li:nth-child(5) a{ transition-delay:200ms } .sheet li:nth-child(6) a{ transition-delay:240ms }
.sheet li:nth-child(7) a{ transition-delay:280ms }
.sheet a:hover{ color:var(--moon) }
.sheet a i{ font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-dim) }

/* ============================================================
   4. HOME — el hub de exploración
   ============================================================ */
main{ position:relative; z-index:var(--z-main) }

.universe{
  min-height:100svh; display:grid; grid-template-rows:auto 1fr auto;
  padding:var(--safe-t) var(--pad) var(--safe-b);
}
.uhead{ text-align:center; margin:clamp(10px,3.2vh,44px) 0 clamp(14px,2.4vh,30px) }
.uhead .kicker{ margin:0 0 clamp(10px,1.5vh,18px); font-family:var(--mono);
  font-size:clamp(7.5px,.58vw,9px); letter-spacing:.34em; text-transform:uppercase; color:var(--accent) }
.uhead h1{
  margin:0; font-weight:300; font-variation-settings:"wdth" 108;
  font-size:clamp(19px,2.5vw,38px); letter-spacing:.32em; text-transform:uppercase;
  color:var(--moon);
}
.uhead p{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--mono);
  font-size:clamp(7.5px,.62vw,9.5px); letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-dim);
}
.uhead h1 span,.uhead p span{ display:inline-block; opacity:0; transform:translateY(14px);
  transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-premium) }
body.ready .uhead h1 span,body.ready .uhead p span{ opacity:1; transform:none }
body.ready .uhead p span{ transition-delay:180ms }

/* ---- el arco de portales ---- */
.arc{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(4px,.55vw,11px); perspective:1250px; perspective-origin:50% 52%;
  /* margen lateral: al girar, la cara cercana de las ventanas de los extremos
     se proyecta hacia afuera. Sin este aire, la página se desplaza de lado. */
  padding:0 clamp(10px,3.2vw,72px) clamp(84px,15vh,180px);
}
.portal{
  --tilt:0deg; --shift:0px;
  position:relative; flex:1 1 0; min-width:0; max-width:min(300px,22vw);
  aspect-ratio:5/7.6; display:block; text-decoration:none; color:inherit;
  transform:rotateY(var(--tilt)) translateZ(var(--shift)) translateY(var(--drop,0px)) scale(1);
  transform-style:preserve-3d;
  transition:transform var(--motion-cinematic) var(--ease-premium),
             opacity var(--motion-normal) var(--ease-out),
             filter var(--motion-normal) var(--ease-out);
  opacity:0;
}
body.ready .portal{ opacity:1 }
.portal:nth-child(1){ --tilt:27deg;  --shift:-132px; --drop:16px; transition-delay:60ms }
.portal:nth-child(2){ --tilt:14deg;  --shift:-42px;  --drop:5px;  transition-delay:120ms }
.portal:nth-child(3){ --tilt:0deg;   --shift:30px;   --drop:-4px; transition-delay:180ms }
.portal:nth-child(4){ --tilt:-14deg; --shift:-42px;  --drop:5px;  transition-delay:240ms }
.portal:nth-child(5){ --tilt:-27deg; --shift:-132px; --drop:16px; transition-delay:300ms }

/* ---- el cristal, tal como está en el boceto aprobado ----
   Dos marcos: la HOJA de vidrio (la lámina física, con sus filos de luz) y
   dentro, separado unos milímetros, el MARCO luminoso que encierra el
   contenido. Entre los dos queda el aire que hace que parezca cristal
   de verdad y no una tarjeta. */
.hoja{
  position:absolute; inset:0; border-radius:var(--radius-lg);
  background:linear-gradient(158deg, rgba(196,222,255,.09), rgba(160,196,248,.020) 40%, rgba(11,16,32,.34));
  border:1px solid rgba(196,222,255,.13);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:0 38px 92px rgba(0,0,0,.62), inset 0 1px 0 rgba(226,240,255,.20);
  transition:border-color var(--motion-normal), box-shadow var(--motion-normal), background var(--motion-normal);
}
/* los filos de luz de la lámina */
.filo{
  position:absolute; display:block; background:linear-gradient(var(--dir,180deg),
    transparent, rgba(214,236,255,.85) 20%, rgba(214,236,255,.92) 80%, transparent);
  opacity:.75; transition:opacity var(--motion-normal), box-shadow var(--motion-normal);
}
.filo.iz{ left:-0.5px; top:6%; bottom:6%; width:1px }
.filo.de{ right:-0.5px; top:6%; bottom:6%; width:1px }
.filo.ab{ left:8%; right:8%; bottom:-0.5px; height:1px; --dir:90deg }
/* los nodos de luz sobre el filo */
.nodo{
  position:absolute; display:block; width:3px; height:3px; border-radius:50%;
  background:rgba(226,242,255,.9); box-shadow:0 0 7px rgba(150,196,255,.9);
  opacity:.45; transition:opacity var(--motion-normal), box-shadow var(--motion-normal);
}
.nodo.n1{ left:-1px; top:26% }
.nodo.n2{ right:-1px; top:58% }
.nodo.n3{ left:50%; bottom:-1px; transform:translateX(-50%) }

/* el marco interior: es el que se enciende con el color del mundo */
.pane{
  position:absolute; inset:clamp(7px,1.05vw,15px); overflow:hidden; border-radius:2px;
  background:linear-gradient(180deg, rgba(6,9,18,.80), rgba(6,9,18,.58) 42%, rgba(5,7,15,.88));
  border:1px solid rgba(198,224,255,.22);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  transition:border-color var(--motion-normal), box-shadow var(--motion-normal);
}
.cab{
  z-index:2; display:grid; justify-items:center; gap:.62em;
  padding:clamp(14px,1.9vw,28px) 7% clamp(8px,1vw,14px);
}

/* el lienzo: la imagen flota en el centro y se funde con el negro del panel,
   como el foco del boceto. No es una foto a sangre. */
.lienzo{ position:relative; min-height:0; overflow:hidden }
.lienzo .shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:.9; filter:saturate(1.02) contrast(1.06) brightness(.94);
  transform:scale(1.04);
  -webkit-mask-image:radial-gradient(68% 70% at 50% 50%, #000 30%, rgba(0,0,0,.42) 60%, transparent 86%);
  mask-image:radial-gradient(68% 70% at 50% 50%, #000 30%, rgba(0,0,0,.42) 60%, transparent 86%);
  transition:opacity var(--motion-cinematic) var(--ease-out),
             filter var(--motion-cinematic) var(--ease-out),
             transform 1500ms var(--ease-premium);
  will-change:transform;
}
/* el halo detrás del sujeto: es lo que hace que la pieza "encienda" */
.aura{
  position:absolute; left:50%; top:52%; width:112%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),.26), transparent 62%);
  filter:blur(14px); opacity:.34; transition:opacity var(--motion-cinematic) var(--ease-out);
}

/* LA CARGA: una linea que sube por el vidrio al elegirlo, como se enciende
   un panel de verdad. Va aparte del barrido diagonal: el barrido es un
   reflejo, esto es el cristal encendiendose. */
.carga{
  position:absolute; inset:0; display:block; pointer-events:none; opacity:0;
  clip-path:var(--quad, none);
  background:linear-gradient(0deg,
    rgba(var(--accent-rgb),0) 0%,
    rgba(var(--accent-rgb),.10) 38%,
    rgba(255,255,255,.55) 49%,
    rgba(var(--accent-rgb),.42) 52%,
    rgba(var(--accent-rgb),0) 66%);
  background-size:100% 260%; background-position:0 130%;
}
.portal.live .carga{ animation:carga 900ms var(--ease-out) }
@keyframes carga{
  0%{ opacity:0; background-position:0 130% }
  18%{ opacity:1 }
  100%{ opacity:0; background-position:0 -130% }
}

/* el barrido de luz que cruza el cristal al pasar el cursor */
.barrido{
  position:absolute; inset:-30% -60%; pointer-events:none; opacity:0;
  background:linear-gradient(112deg, transparent 38%, rgba(226,240,255,.16) 48%,
                                     rgba(226,240,255,.30) 51%, rgba(226,240,255,.13) 55%, transparent 64%);
  transform:translateX(-46%);
}
.portal.live .barrido{ animation:barre 1100ms var(--ease-inout) }
@keyframes barre{
  0%{ opacity:0; transform:translateX(-46%) }
  22%{ opacity:1 }
  100%{ opacity:0; transform:translateX(46%) }
}

/* el borde que se dibuja (regla 16) */
.frame{ position:absolute; inset:0; pointer-events:none; overflow:visible }
.frame rect{
  fill:none; stroke:var(--accent); stroke-width:1.15; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len);
  filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.55));
  transition:stroke-dashoffset 900ms var(--ease-inout), opacity var(--motion-normal);
  opacity:0;
}
.portal.live .frame rect{ stroke-dashoffset:0; opacity:1 }
.portal.live .frame rect.hold{ transition-delay:900ms; opacity:.42; stroke-width:.8; filter:none }

/* ---- los rótulos viven en aire limpio, arriba y abajo del lienzo ---- */
.pnum{
  display:block; text-align:center;
  font-family:var(--mono); font-size:clamp(8px,.66vw,10px); letter-spacing:.34em;
  color:var(--ink-soft); transition:color var(--motion-normal);
}
.pregla{
  display:block; width:26px; height:1px; background:rgba(226,240,255,.34);
  transition:background var(--motion-normal), width var(--motion-normal) var(--ease-premium);
}
.pname{
  display:block; margin:0; text-align:center; text-wrap:balance;
  font-size:clamp(11.5px,1.08vw,17px); font-weight:300; line-height:1.24;
  letter-spacing:.11em; text-transform:uppercase; font-variation-settings:"wdth" 104;
  color:var(--moon); text-shadow:0 1px 16px rgba(5,7,15,.92);
}
.plabel{
  z-index:2; padding:clamp(8px,1vw,14px) 8% clamp(14px,1.7vw,26px);
  display:grid; gap:8px; text-align:center; align-content:end;
}
.pclaim{
  margin:0; font-family:var(--mono); font-size:clamp(6.8px,.55vw,8.4px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); line-height:1.8;
  transition:color var(--motion-normal);
}
.pgo{
  font-family:var(--mono); font-size:8px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); text-align:center; display:block;
  height:0; opacity:0; transform:translateY(8px);
  transition:opacity var(--motion-normal), transform var(--motion-normal) var(--ease-premium),
             height var(--motion-normal) var(--ease-premium);
}
.portal.live .pgo{ height:1.2em }

/* ---- al pasar el cursor el panel se ENCIENDE, no solo se mueve ---- */
.portal.live{ transform:rotateY(calc(var(--tilt)*.42)) translateZ(96px) translateY(calc(var(--drop,0px) + var(--portal-lift))) scale(var(--portal-scale)) }
.portal.live .hoja{
  border-color:rgba(var(--accent-rgb),.34);
  background:linear-gradient(158deg, rgba(var(--accent-rgb),.10), rgba(160,196,248,.030) 40%, rgba(11,16,32,.30));
  box-shadow:0 48px 112px rgba(0,0,0,.66),
             0 0 0 1px rgba(var(--accent-rgb),.20),
             0 0 76px rgba(var(--accent-rgb),.16);
}
.portal.live .pane{ border-color:rgba(var(--accent-rgb),.58); box-shadow:inset 0 0 40px rgba(var(--accent-rgb),.10) }
.portal.live .filo{ opacity:1; box-shadow:0 0 10px rgba(var(--accent-rgb),.6) }
.portal.live .nodo{ opacity:1; box-shadow:0 0 12px rgba(var(--accent-rgb),1) }
.portal.live .shot{ opacity:1; filter:saturate(1.1) contrast(1.06) brightness(1.06); transform:scale(1) }
.portal.live .aura{ opacity:1 }
.portal.live .pregla{ width:46px; background:rgba(var(--accent-rgb),.9) }
.portal.live .pnum,.portal.live .pclaim{ color:rgba(var(--accent-rgb),.95) }
.portal.live .pgo{ opacity:1; transform:none }
/* los hermanos ceden: la atención va a uno solo */
body.previewing .portal:not(.live){ opacity:.5; filter:saturate(.6) brightness(.72) }
body.previewing .portal:not(.live) .hoja{ box-shadow:0 20px 50px rgba(0,0,0,.5) }

/* atravesar: la ventana viaja desde su rectangulo real hasta ocupar la pantalla.
   La geometria la calcula el JS; aqui solo se define la capa que vuela. */
body.crossing .portal{ opacity:0; transition:opacity 240ms var(--ease-out) }
body.crossing .portal.going{ opacity:0 }
body.crossing .uhead,body.crossing .edge,body.crossing .pips{ opacity:0; transition:opacity var(--motion-fast) }
.vuelo{
  position:fixed; z-index:calc(var(--z-menu) - 2); overflow:hidden; will-change:transform;
  border:1px solid var(--glass-border); border-radius:var(--radius-lg);
  box-shadow:0 42px 96px rgba(0,0,0,.62);
  transform-origin:0 0; pointer-events:none; background:#05070F;
}
.vuelo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vuelo .scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,15,.55) 0%, rgba(5,7,15,0) 40%, rgba(5,7,15,.65) 100%);
  transition:opacity 320ms var(--ease-out) }

/* ---- el planeta ---- */
.planet-hit picture, .planet-hit img{ display:block; width:100%; height:auto }
/* El rotulo va ENCIMA de la marca, no debajo. Debajo caia justo sobre
   "Experiencias que trascienden", que vive en esa misma esquina, y los dos
   textos se encimaban al pasar el cursor. */
.planet-hit span{
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  white-space:nowrap; font-family:var(--mono); font-size:8px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-dim);
  opacity:0; transition:opacity var(--motion-fast), color var(--motion-fast);
}
.planet-hit:hover span,.planet-hit:focus-visible span{ opacity:1; color:var(--accent) }


/* suelo orbital: la sombra de las órbitas sobre el plano, como en el boceto */
.orbits{
  position:fixed; left:50%; z-index:var(--z-canvas); pointer-events:none;
  bottom:clamp(4px,1.2vh,22px); width:clamp(280px,30vw,520px); aspect-ratio:2.6/1;
  transform:translateX(-50%);
  opacity:0; transition:opacity 1400ms var(--ease-out) 500ms;
}
body.ready .orbits{ opacity:1 }
.orbits ellipse{ fill:none; stroke:rgba(var(--accent-rgb),.20); stroke-width:.7;
  transition:stroke var(--bg-fade) }
.orbits ellipse:nth-child(2){ stroke:rgba(var(--accent-rgb),.13) }
.orbits ellipse:nth-child(3){ stroke:rgba(var(--accent-rgb),.08) }
.orbits::after{
  content:""; position:absolute; inset:-30% -12% -40%;
  background:radial-gradient(58% 48% at 50% 62%, rgba(var(--accent-rgb),.13), transparent 72%);
}
body.reading .orbits{ opacity:.45 }

/* hilo planeta → portal (regla 38) */
#connect{ position:fixed; inset:0; z-index:var(--z-connect); pointer-events:none; opacity:0;
  transition:opacity var(--motion-normal) }
body.previewing #connect{ opacity:1 }
#connect path{
  fill:none; stroke:rgba(var(--accent-rgb),.5); stroke-width:1; stroke-linecap:round;
  stroke-dasharray:2 9; filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.45));
  animation:flow 1.9s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-44 } }

/* ============================================================
   5. MUNDOS — el contenido dentro del portal
   ============================================================ */
.world{ padding:calc(var(--safe-t) + 26px) var(--pad) clamp(90px,14vh,150px); max-width:1500px; margin-inline:auto }
.world > *{ opacity:0; transform:translateY(18px); filter:blur(5px) }
body.ready .world > *{ opacity:1; transform:none; filter:none;
  transition:opacity 760ms var(--ease-out), transform 760ms var(--ease-premium), filter 760ms var(--ease-out) }
body.ready .world > *:nth-child(1){ transition-delay:0ms }
body.ready .world > *:nth-child(2){ transition-delay:90ms }
body.ready .world > *:nth-child(3){ transition-delay:170ms }
body.ready .world > *:nth-child(4){ transition-delay:240ms }
body.ready .world > *:nth-child(n+5){ transition-delay:300ms }

.eyebrow{
  display:flex; align-items:center; gap:11px; margin:0 0 clamp(14px,2vh,22px);
  font-family:var(--mono); font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow s{ text-decoration:none; display:block; width:26px; height:1px; background:currentColor; opacity:.55 }

h1.big,h2.big{
  margin:0; font-weight:600; letter-spacing:-.035em; line-height:.96;
  font-variation-settings:"wdth" 116; max-width:19ch;
}
h1.big{ font-size:clamp(31px,5.2vw,74px) }
h2.big{ font-size:clamp(25px,3.4vw,46px) }
h2.sub{ margin:clamp(12px,1.8vh,20px) 0 0; font-weight:300; letter-spacing:-.018em;
  font-size:clamp(17px,1.9vw,26px); line-height:1.2; color:var(--ink-soft);
  font-variation-settings:"wdth" 104; max-width:26ch }
.big em{ font-style:normal; font-weight:300; color:var(--ink-soft) }

p.lede{ margin:clamp(16px,2.2vh,26px) 0 0; max-width:56ch;
  font-size:clamp(14px,1.05vw,17px); line-height:1.68; color:#C4CBDD }
p.note{ margin:10px 0 0; max-width:56ch; font-family:var(--mono);
  font-size:10px; line-height:1.8; letter-spacing:.04em; color:var(--ink-dim) }

.slab{
  margin-top:clamp(22px,3.4vh,44px); padding:clamp(20px,2.6vw,38px);
  background:linear-gradient(158deg, rgba(244,247,251,.055), rgba(11,16,32,.34));
  border:1px solid var(--hair-soft); border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(16px) saturate(.9); backdrop-filter:blur(16px) saturate(.9);
}

/* rejilla de capítulos / servicios */
.grid{ display:grid; gap:var(--gutter); margin-top:clamp(20px,3vh,38px) }
.grid.c2{ grid-template-columns:repeat(2,1fr) }
.grid.c3{ grid-template-columns:repeat(3,1fr) }
.grid.c4{ grid-template-columns:repeat(4,1fr) }

.chapter{
  padding:clamp(16px,1.7vw,26px); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(244,247,251,.05), rgba(11,16,32,.30));
  border:1px solid var(--hair-soft);
  transition:border-color var(--motion-normal), transform var(--motion-normal) var(--ease-premium);
}
.chapter:hover{ border-color:rgba(var(--accent-rgb),.30); transform:translateY(-3px) }
.chapter i{ font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--accent) }
.chapter h3{ margin:10px 0 8px; font-size:clamp(15px,1.2vw,19px); font-weight:500;
  letter-spacing:-.012em; font-variation-settings:"wdth" 108; line-height:1.2 }
.chapter p{ margin:0; font-size:13px; line-height:1.6; color:var(--ink-soft) }

/* ficha técnica */
.spec{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--hair-soft) }
.spec li{ display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid var(--hair-soft);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim) }
.spec b{ font-weight:400; color:var(--moon); letter-spacing:.04em; font-variant-numeric:tabular-nums }

.chips{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:clamp(16px,2.2vh,24px) 0 0; padding:0 }
.chips li{ font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  color:#B7C0D4; border:1px solid var(--hair); padding:7px 11px; border-radius:2px }
.chips li.hot{ color:var(--accent); border-color:rgba(var(--accent-rgb),.42) }

.inline{
  display:inline-flex; align-items:center; gap:8px; margin-top:clamp(18px,2.4vh,28px);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); text-decoration:none; padding-bottom:4px;
  border-bottom:1px solid rgba(var(--accent-rgb),.4);
  transition:color var(--motion-fast), border-color var(--motion-fast), gap var(--motion-fast);
}
.inline:hover{ color:var(--moon); border-color:var(--moon); gap:13px }

/* figura y comparador render/realidad */
figure{ margin:0 }
.shotbox{ position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--hair-soft); background:#080C18; aspect-ratio:16/10 }
.shotbox img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
figcaption{ margin-top:9px; font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim) }

.compare{ position:relative; overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--hair); aspect-ratio:16/9; touch-action:pan-y; cursor:ew-resize;
  background:#080C18; user-select:none }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.compare .after{ clip-path:inset(0 0 0 var(--split,50%)) }
.compare .bar{ position:absolute; top:0; bottom:0; left:var(--split,50%); width:1px;
  background:var(--moon); box-shadow:0 0 14px rgba(244,247,251,.55); pointer-events:none }
.compare .knob{ position:absolute; top:50%; left:var(--split,50%); width:38px; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; border:1px solid var(--moon);
  background:rgba(5,7,15,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:grid; place-items:center; pointer-events:none;
  font-family:var(--mono); font-size:11px; color:var(--moon) }
.compare .tagl,.compare .tagr{ position:absolute; bottom:12px; font-family:var(--mono);
  font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--moon);
  background:rgba(5,7,15,.5); padding:5px 9px; border-radius:2px; pointer-events:none }
.compare .tagl{ left:12px } .compare .tagr{ right:12px }

/* galería de portafolio */
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin-top:clamp(18px,2.6vh,32px) }
.card{ all:unset; box-sizing:border-box; cursor:pointer; display:block;
  position:relative; overflow:hidden; border-radius:2px; background:#080C18; aspect-ratio:16/9;
  transition:box-shadow var(--motion-normal), transform var(--motion-normal) var(--ease-premium) }
.card:nth-child(1){ grid-column:span 8; aspect-ratio:16/8.6 }
.card:nth-child(2){ grid-column:span 4; aspect-ratio:4/4.3 }
.card:nth-child(n+3){ grid-column:span 4 }
.card img,.card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.9); transition:filter var(--motion-normal), transform 900ms var(--ease-premium) }
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.card:hover{ box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--accent-rgb),.4) }
.card:hover img,.card:hover video{ filter:saturate(1) brightness(1.04); transform:scale(1.035) }
.card figcaption{ position:absolute; inset:auto 0 0 0; margin:0; padding:13px 14px; z-index:2; text-align:left;
  background:linear-gradient(0deg, rgba(5,7,15,.94), transparent);
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px }
.card h3{ margin:0; font-size:14px; font-weight:500; color:var(--moon); font-variation-settings:"wdth" 106 }
.card span{ font-family:var(--mono); font-size:8px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap }

/* constelación */
.constel{ position:relative; margin-top:clamp(18px,2.6vh,32px); aspect-ratio:16/8;
  border:1px solid var(--hair-soft); border-radius:var(--radius-lg); overflow:hidden;
  background:radial-gradient(70% 100% at 50% 100%, rgba(29,78,219,.10), transparent 70%) }
.constel svg{ position:absolute; inset:0; width:100%; height:100% }
.constel line{ stroke:rgba(244,247,251,.10); stroke-width:.6 }
.node{ all:unset; position:absolute; transform:translate(-50%,-50%); cursor:pointer;
  width:11px; height:11px; border-radius:50%; background:var(--ink-soft);
  box-shadow:0 0 0 4px rgba(244,247,251,.06);
  transition:background var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast) }
.node:hover,.node:focus-visible{ background:var(--accent); transform:translate(-50%,-50%) scale(1.35);
  box-shadow:0 0 0 7px rgba(var(--accent-rgb),.16), 0 0 22px rgba(var(--accent-rgb),.6) }
.node b{ position:absolute; left:50%; top:16px; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:8px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:400; color:var(--moon); opacity:0; transition:opacity var(--motion-fast) }
.node:hover b,.node:focus-visible b{ opacity:1 }
.toggle{ display:flex; gap:10px; align-items:center; margin-top:14px }
.toggle button{ all:unset; cursor:pointer; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); padding:7px 12px;
  border:1px solid var(--hair-soft); border-radius:2px; transition:color var(--motion-fast), border-color var(--motion-fast) }
.toggle button[aria-pressed="true"]{ color:var(--accent); border-color:rgba(var(--accent-rgb),.42) }

/* selector de mundos dentro de un mundo (regla 27) */
.dots{
  position:fixed; left:50%; bottom:clamp(14px,2.2vh,24px); transform:translateX(-50%);
  z-index:var(--z-chrome); display:flex; gap:14px; align-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--motion-normal), visibility var(--motion-normal);
}
body[data-view="world"] .dots{ opacity:1; visibility:visible; pointer-events:auto }
body[data-view="home"] .crumb{ visibility:hidden }
.dots{ padding:9px 16px; border-radius:20px; background:rgba(5,7,15,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--hair-soft) }
.dots a{ position:relative; width:7px; height:7px; border-radius:50%;
  background:rgba(244,247,251,.24); transition:background var(--motion-fast), transform var(--motion-fast) }
.dots a:hover,.dots a:focus-visible{ background:var(--moon); transform:scale(1.3) }
.dots a[aria-current]{ background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14) }
.dots a b{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:7.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:400; color:var(--moon); opacity:0; transition:opacity var(--motion-fast) }
.dots a:hover b,.dots a:focus-visible b{ opacity:1 }

/* ============================================================
   6. CONTACTO
   ============================================================ */
.cwrap{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(24px,4vw,64px); align-items:start;
  margin-top:clamp(20px,3vh,34px) }
.contact{ display:grid; gap:9px }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
input,select,textarea{
  width:100%; background:rgba(11,16,32,.55); color:var(--ink); border:1px solid var(--hair);
  padding:12px 13px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  outline:none; border-radius:2px; transition:border-color var(--motion-fast), box-shadow var(--motion-fast);
}
textarea{ resize:vertical; min-height:66px; line-height:1.6 }
input::placeholder,textarea::placeholder{ color:var(--ink-dim) }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14) }
select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%; background-size:5px 5px; background-repeat:no-repeat }
button.send{
  all:unset; box-sizing:border-box; cursor:pointer; text-align:center; border-radius:2px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--space-deep); background:var(--accent); padding:13px 16px;
  transition:box-shadow var(--motion-fast), transform var(--motion-fast), background var(--motion-fast);
}
button.send:hover{ box-shadow:0 10px 30px rgba(var(--accent-rgb),.32); transform:translateY(-1px) }
#note{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--accent);
  min-height:13px; text-transform:uppercase }
.direct{ display:grid; border-top:1px solid var(--hair) }
.direct a,.direct div{ display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--hair); text-decoration:none;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); transition:color var(--motion-fast) }
.direct b{ font-weight:400; color:var(--moon); letter-spacing:.03em; text-transform:none; font-size:11.5px }
.direct a:hover,.direct a:hover b{ color:var(--accent) }
.legal{ margin-top:16px; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; color:var(--ink-dim); line-height:1.9 }

/* ============================================================
   7. ARRANQUE
   ============================================================ */
#boot{ position:fixed; inset:0; z-index:var(--z-boot); display:grid; place-items:center;
  background:var(--space-deep); transition:opacity 700ms ease 120ms, visibility 700ms 120ms }
body.ready #boot{ opacity:0; visibility:hidden }
#boot div{ display:grid; gap:15px; justify-items:center; font-family:var(--mono);
  font-size:8px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-dim) }
#boot i{ display:block; width:150px; height:1px; background:var(--hair); position:relative; overflow:hidden }
#boot i::after{ content:""; position:absolute; inset:0; background:var(--accent);
  transform:scaleX(var(--p,0)); transform-origin:left; transition:transform 300ms ease }

/* ============================================================
   7b. EL ESCENARIO — la sala del universo
   Lo que se ve al entrar no es una página sobre negro: es un lugar.
   Cielo profundo, un planeta enorme asomando arriba, la sala curva,
   y un piso pulido donde todo se refleja. Igual que el boceto aprobado.
   ============================================================ */
.escenario{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  contain:strict;
}
/* el cielo: no es negro plano, tiene profundidad y temperatura */
.cielo{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(38,64,122,.50), transparent 62%),
    radial-gradient(70% 46% at 12% 26%,  rgba(30,52,104,.30), transparent 70%),
    radial-gradient(64% 44% at 88% 22%,  rgba(58,40,104,.26), transparent 70%),
    linear-gradient(180deg, #060A16 0%, #070B18 40%, #05070F 100%);
}
.estrellas{
  position:absolute; inset:-3%; width:106%; height:106%; display:block;
  transform:translate3d(calc(var(--px,0) * -0.16px), calc(var(--py,0) * -0.14px + var(--sy,0) * -26px), 0);
  transition:transform 60ms linear;
}

/* el planeta enorme que asoma por arriba: cuerpo, filo de atmosfera y bruma */
.astro{
  position:absolute; left:58%; top:0; width:230vw; aspect-ratio:1/1;
  transform:translate(-50%, calc(-224vw + var(--py,0) * 0.05px)) ;
  border-radius:50%;
  background:
    radial-gradient(52% 52% at 44% 92%, rgba(118,156,224,.13), transparent 62%),
    radial-gradient(100% 100% at 50% 96%, #16213F 0%, #111A33 34%, #0B1227 62%, #070C1B 100%);
}
/* el filo: una linea nitida y una bruma ancha por dentro */
.astro i{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:
    inset 0 -1.4px 0 rgba(212,232,255,.92),
    inset 0 -5px 10px rgba(168,206,255,.55),
    inset 0 -22px 54px rgba(126,174,250,.34),
    inset 0 -90px 190px rgba(84,132,226,.17);
}
/* la atmosfera que se escapa hacia el espacio, por fuera del cuerpo */
.astro b{
  position:absolute; left:0; right:0; bottom:-9vw; height:11vw; border-radius:50%;
  background:radial-gradient(60% 100% at 50% 0%, rgba(128,176,252,.30), rgba(96,140,232,.10) 42%, transparent 74%);
  filter:blur(10px);
}

/* la luna: cuerpo iluminado desde la izquierda, con crateres */
.luna{
  position:absolute; left:19%; top:12.5vh; width:clamp(38px,3.9vw,66px); aspect-ratio:1/1;
  border-radius:50%;
  transform:translate(calc(var(--px,0) * -0.35px), calc(var(--py,0) * -0.3px));
  background:
    radial-gradient(58% 58% at 32% 30%, #8A97B2 0%, #5A6880 38%, #2A3349 72%, #10162A 100%);
  box-shadow:0 0 40px rgba(130,162,222,.20), inset -7px -9px 22px rgba(3,5,10,.78);
  opacity:.92;
}
.luna i{
  position:absolute; inset:0; border-radius:50%; opacity:.55;
  background:
    radial-gradient(14% 14% at 38% 34%, rgba(10,14,26,.55), transparent 70%),
    radial-gradient(9%  9%  at 58% 52%, rgba(10,14,26,.45), transparent 70%),
    radial-gradient(11% 11% at 44% 66%, rgba(10,14,26,.40), transparent 70%),
    radial-gradient(7%  7%  at 66% 30%, rgba(10,14,26,.38), transparent 70%);
}

/* restos: dos o tres rocas lejanas a la derecha, como en el boceto */
.restos i{
  position:absolute; display:block; background:#1A2237; opacity:.75;
  box-shadow:inset -2px -2px 6px rgba(0,0,0,.8), 0 0 10px rgba(120,150,210,.10);
}
.restos .r1{ right:16%; top:11vh; width:34px; height:13px; border-radius:60% 40% 55% 45%/70% 60% 40% 30%; transform:rotate(-14deg) }
.restos .r2{ right:9.5%; top:15.5vh; width:17px; height:8px;  border-radius:55% 45% 60% 40%/65% 55% 45% 35%; transform:rotate(9deg); opacity:.55 }
.restos .r3{ right:22%; top:17vh; width:9px;  height:5px;  border-radius:50%; opacity:.45 }

/* el aro de la sala: la curva que cierra el techo por arriba */
.aro-sala{
  position:absolute; left:50%; top:9vh; width:184%; height:78vh;
  transform:translateX(-50%);
  border-radius:50%;
  border-top:1px solid rgba(150,186,246,.10);
  box-shadow:inset 0 3px 30px rgba(110,152,226,.055);
}

/* la sala: paredes curvas que envuelven, no bordes rectos */
.sala{
  position:absolute; inset:0;
  background:
    radial-gradient(150% 108% at 50% 44%, transparent 42%, rgba(4,6,13,.62) 78%, rgba(3,4,9,.94) 100%),
    linear-gradient(90deg, rgba(3,5,11,.80) 0%, transparent 17%, transparent 83%, rgba(3,5,11,.80) 100%);
}

/* ---------- el piso pulido: un espejo, no un degradado ----------
   Es lo que hace que la sala exista. Tres cosas a la vez: el charco de luz
   cálida, las columnas verticales que devuelve cada panel, y las órbitas
   doradas que se abren en perspectiva hacia el frente. */
.piso{
  position:absolute; left:-8%; right:-8%; bottom:0; height:41%;
  background:
    radial-gradient(44% 82% at 50% 26%, rgba(236,190,116,.34), transparent 68%),
    radial-gradient(26% 70% at 21% 18%, rgba(220,172,98,.24), transparent 72%),
    radial-gradient(26% 70% at 79% 18%, rgba(220,172,98,.24), transparent 72%),
    radial-gradient(20% 58% at 6% 12%,  rgba(200,154,86,.14), transparent 74%),
    radial-gradient(20% 58% at 94% 12%, rgba(200,154,86,.14), transparent 74%),
    linear-gradient(180deg, rgba(12,18,34,0) 0%, rgba(10,16,30,.30) 10%,
                            rgba(7,11,22,.68) 42%, rgba(5,8,16,.90) 72%, #04060D 100%);
}
/* el horizonte curvo: donde la pared se convierte en piso */
.piso::before{
  content:""; position:absolute; left:50%; top:-1px; width:196%; height:74%;
  transform:translateX(-50%); border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border-top:1px solid rgba(214,186,140,.22);
  background:linear-gradient(180deg, rgba(222,182,120,.10), transparent 32%);
}
/* la trama del piso: losas que se acercan */
.piso::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(226,192,132,.055) 78px 80px),
    repeating-linear-gradient(0deg,  transparent 0 34px, rgba(196,168,124,.030) 34px 35px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.5) 68%, transparent 92%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.5) 68%, transparent 92%);
}
/* LAS COLUMNAS: cada panel devuelve su luz al piso. Es el detalle que
   convierte el suelo en espejo y no en fondo. */
.vetas{
  position:absolute; left:0; right:0; top:0; height:88%;
  background:
    linear-gradient(90deg, transparent 12.4%, rgba(226,196,140,.20) 15%, transparent 17.6%),
    linear-gradient(90deg, transparent 29.4%, rgba(232,204,150,.26) 32%, transparent 34.6%),
    linear-gradient(90deg, transparent 47.2%, rgba(240,214,162,.34) 50%, transparent 52.8%),
    linear-gradient(90deg, transparent 65.4%, rgba(232,204,150,.26) 68%, transparent 70.6%),
    linear-gradient(90deg, transparent 82.4%, rgba(226,196,140,.20) 85%, transparent 87.6%);
  filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 38%, transparent 84%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 38%, transparent 84%);
  transition:opacity var(--motion-cinematic) var(--ease-out);
}
/* al elegir un mundo, la sala se apaga salvo la columna de ese panel */
body.previewing .vetas{ opacity:.45 }
/* las órbitas doradas dibujadas sobre el piso */
.orbitas{
  position:absolute; left:50%; bottom:-14%; width:162%; height:118%;
  transform:translateX(-50%); overflow:visible;
}
.orbitas ellipse{
  fill:none; stroke:rgba(232,192,124,.46); stroke-width:1.2; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(232,186,110,.5));
}
.orbitas ellipse:nth-child(1){ stroke:rgba(255,226,166,.90) }
.orbitas ellipse:nth-child(2){ stroke:rgba(250,216,152,.76) }
.orbitas ellipse:nth-child(3){ stroke:rgba(244,206,138,.60) }
.orbitas ellipse:nth-child(4){ stroke:rgba(236,196,126,.44) }
.orbitas ellipse:nth-child(5){ stroke:rgba(224,182,112,.28) }
.orbitas ellipse:nth-child(6){ stroke:rgba(212,170,102,.18) }
/* el charco de luz donde se apoya el planeta */
.lumbre{
  position:absolute; left:50%; bottom:12%; width:44%; height:34%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(246,206,140,.42), transparent 70%);
  filter:blur(10px);
}

/* en el home la foto del mundo no tapa la sala: solo la tiñe */
body[data-view="home"] .bg.on{ opacity:.42; filter:blur(16px) saturate(.6) brightness(.40) }
body[data-view="home"] .veil.grad{
  background:linear-gradient(180deg, rgba(5,7,15,.62) 0%, rgba(5,7,15,.06) 24%,
                                     rgba(5,7,15,.10) 56%, rgba(5,7,15,.72) 100%);
}
body[data-view="home"] .veil.vig{ opacity:.55 }

/* ---------- el reflejo de cada panel en el piso ---------- */
.eco{
  position:absolute; left:2%; right:2%; top:100%; width:96%; height:52%;
  object-fit:cover; object-position:center bottom;
  transform:scaleY(-1);                      /* voltea el contenido, no la caja */
  filter:blur(1.4px) saturate(.6) brightness(.72);
  opacity:.50; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 2%, rgba(0,0,0,.9) 100%);
  mask-image:linear-gradient(180deg, transparent 2%, rgba(0,0,0,.9) 100%);
  transition:opacity var(--motion-normal) var(--ease-out);
}
.portal.live .eco{ opacity:.72 }
body.crossing .eco{ opacity:0 }

/* ---------- el planeta ES el logotipo ---------- */
.planeta{
  width:clamp(230px,24vw,380px); bottom:clamp(14px,3vh,44px);
  --brillo:.45;
}
.planeta .p6{ width:100%; height:auto; display:block }
.planeta .p6-img{ width:100%; height:auto; display:block; pointer-events:none }

/* ---------- el hule ----------
   El lienzo se coloca exactamente encima de la imagen y pinta el planeta
   deformado bajo el cursor (assets/hule.js). Mientras el lienzo no esta
   listo —sin JS, con movimiento reducido, o en los primeros milisegundos—
   no existe la clase .con-hule y lo que se ve es la imagen. Cuando el
   lienzo toma el relevo, la imagen se oculta con visibility, no con
   display: asi sigue ocupando su sitio y el bloque conserva su altura.

   El lienzo no recibe eventos. Es deliberado: dentro de un mundo hay un
   boton invisible sobre el planeta para volver al universo, y el hule mira
   la posicion del cursor desde la ventana en vez de robarle los eventos. */
.p6-lienzo{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}
.planeta:not(.con-hule):not(.con-orbe) .p6-lienzo{ display:none }
.planeta.con-hule .p6-img,
.planeta.con-orbe .p6-img{ visibility:hidden }
/* el halo: la marca respira al acercarse el cursor, no se enciende de golpe */
.p6-halo{
  position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1.26/1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:
    radial-gradient(46% 46% at 50% 50%, rgba(150,190,255,.17), transparent 64%),
    radial-gradient(38% 38% at 50% 50%, rgba(10,14,26,.70), transparent 74%);
  filter:blur(22px);
  opacity:calc(.20 + var(--brillo,.45) * .62);
  transition:opacity 420ms var(--ease-out);
}
.p6-reflejo{
  position:absolute; left:50%; bottom:-7%; width:58%; aspect-ratio:3/1;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 40%, rgba(196,214,250,.26), transparent 68%);
  filter:blur(9px); opacity:calc(.24 + var(--brillo,.45) * .42);
}
body.reading .planeta{ opacity:.7 }

/* ---------- la invitación a bajar ---------- */
.scroll-cue{
  position:fixed; left:50%; bottom:clamp(14px,2.4vh,26px); z-index:var(--z-chrome);
  transform:translateX(-50%); margin:0; display:grid; gap:9px; justify-items:center;
  font-family:var(--mono); font-size:8px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-dim); pointer-events:none;
  opacity:0; transition:opacity 900ms var(--ease-out) 900ms;
}
body.ready .scroll-cue{ opacity:1 }
body.previewing .scroll-cue,body.crossing .scroll-cue{ opacity:0; transition-delay:0ms }
.scroll-cue i{
  width:15px; height:23px; border:1px solid rgba(244,247,251,.26); border-radius:8px;
  position:relative; display:block;
}
.scroll-cue i::after{
  content:""; position:absolute; left:50%; top:5px; width:2px; height:5px; border-radius:1px;
  background:var(--accent); transform:translateX(-50%);
  animation:cue 2.1s var(--ease-inout) infinite;
}
@keyframes cue{ 0%,100%{ opacity:0; transform:translate(-50%,0) } 40%{ opacity:1 } 70%{ opacity:0; transform:translate(-50%,7px) } }

/* ============================================================
   7c. EL MONTAJE — cada mundo se construye al entrar
   La secuencia arma una FOTOGRAFÍA REAL de Planet 6 a partir de sus propias
   piezas. Todas las piezas son la misma foto, al mismo tamaño y en el mismo
   encuadre: lo único que cambia es el recorte y de dónde entran. Cuando
   todas llegan, vuelven a componer la foto sin una sola costura.
   ============================================================ */
.montaje{
  position:absolute; right:-2%; top:0; width:min(58%, 700px); max-width:104%;
  aspect-ratio:4/3; pointer-events:none; z-index:0;
  opacity:0; transition:opacity 700ms var(--ease-out) 120ms;
  border-radius:3px; overflow:hidden;
  background-size:cover; background-position:center;
  box-shadow:0 44px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(var(--accent-rgb),.18);
  /* el filo se funde con la página: no es un recuadro pegado encima */
  -webkit-mask-image:linear-gradient(200deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(200deg,#000 62%,transparent 100%);
}
/* en pantalla ancha la obra es la protagonista: se fija arriba a la derecha
   y el texto del mundo se reserva su columna a la izquierda */

body.montado .montaje{ opacity:1 }

/* todas las piezas comparten la misma foto, el mismo tamaño y el mismo
   encuadre: por eso al llegar encajan */
.montaje i{
  position:absolute; inset:0; display:block;
  background-image:inherit;              /* ya resuelta por el padre */
  background-size:cover; background-position:center;
  will-change:transform,opacity;
}
/* la sala vacía: la foto casi apagada, antes de que llegue nada */
.montaje .sala{ filter:brightness(var(--base,.08)) saturate(.5); opacity:1 }
.montaje .pz{ clip-path:var(--clip,none); opacity:0 }
/* los trazos que se encienden en anillo usan máscara en vez de recorte */
.montaje .anillo{
  clip-path:none;
  -webkit-mask-image:var(--mask); mask-image:var(--mask);
}
/* la luz final: la sala termina de encenderse */
.montaje .luz{ filter:none; opacity:0 }

.montaje > b{
  position:absolute; right:3.5%; bottom:4%; z-index:3; font-weight:400;
  font-family:var(--mono); font-size:8px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(var(--accent-rgb),.85); text-shadow:0 2px 12px rgba(0,0,0,.9);
  opacity:0; transform:translateY(6px);
  transition:opacity 700ms var(--ease-out) 3.4s, transform 700ms var(--ease-premium) 3.4s;
}
body.montado .montaje > b{ opacity:1; transform:none }

/* el contenido del mundo siempre va por encima de la obra */
.world{ position:relative }
.world > *{ position:relative; z-index:1 }
/* la obra va detrás del texto y NO hereda el position:relative de la regla
   de arriba, que es la que antes la devolvía a la esquina equivocada */
.world > .montaje{ position:absolute; z-index:0 }
/* en pantalla ancha la obra es la protagonista: se fija arriba a la derecha
   y el texto del mundo se reserva su columna a la izquierda */
@media (min-width:1100px){
  .world > .montaje{
    position:fixed; right:3.2vw; top:13.5vh; left:auto; bottom:auto;
    width:min(43vw, 740px); aspect-ratio:4/3; max-width:none;
  }
  body[data-view="world"] .world > *:not(.montaje){ max-width:min(52vw, 760px) }
}

/* ---- cómo entra cada pieza ---- */
body.montado .montaje .pz{ animation:llega var(--t,760ms) var(--ease-premium) var(--d,0ms) both }
body.montado .montaje .de-abajo { --sx:0;    --sy:26%  }
body.montado .montaje .de-arriba{ --sx:0;    --sy:-26% }
body.montado .montaje .de-izq   { --sx:-22%; --sy:0    }
body.montado .montaje .de-der   { --sx:22%;  --sy:0    }
body.montado .montaje .de-centro{ --sx:0;    --sy:0; --z:.58 }
body.montado .montaje .de-nada  { --sx:0;    --sy:0    }
body.montado .montaje .luz{ animation:enciende var(--t,1100ms) var(--ease-out) var(--d,0ms) both }

@keyframes llega{
  from{ opacity:0; transform:translate(var(--sx,0),var(--sy,0)) scale(var(--z,1)); filter:brightness(.25) }
  55% { opacity:1 }
  to  { opacity:1; transform:none; filter:brightness(1) }
}
@keyframes enciende{
  from{ opacity:0 } to{ opacity:1 }
}

/* en pantallas chicas la obra se pone detrás del texto, no al lado */
@media (max-width:900px){
  .montaje{ right:-6%; left:-6%; top:auto; bottom:1%; width:112%; aspect-ratio:16/10 }
  body.montado .montaje{ opacity:.30 }
  .montaje > b{ display:none }
}
@media (prefers-reduced-motion:reduce){
  /* sin movimiento: la foto se muestra ya montada */
  .montaje{ transition:none }
  body.montado .montaje .pz,
  body.montado .montaje .luz{ animation:none !important; opacity:1; transform:none; filter:none }
}

/* ============================================================
   7d. EL HOME ES EL BOCETO
   La escena no es una interpretación: es la imagen aprobada por Jose, con el
   texto retirado y vuelto a escribir en HTML encima, en su mismo sitio y a su
   mismo tamaño. Así el diseño es idéntico y, además, el texto es texto de
   verdad: se lee en voz alta, lo indexa Google, se puede seleccionar y no se
   pixela al ampliar.

   Nada aquí lleva números sueltos. Todo se coloca contra la caja que ocupa la
   obra en pantalla (--ox, --oy, --w, --h) y, en el caso de los rótulos,
   contra su centro y su ancho medidos en el dibujo, que encuadre.js aplica.

   Regla importante: en esta capa ningún ancestro de un rótulo puede llevar
   transform, filter ni will-change. Cualquiera de los tres crea un nuevo
   marco de referencia y los rótulos, que van en position:fixed, se
   despegarían de su sitio. Por eso el resplandor del panel vive en .aureola,
   que es hija y no madre.
   ============================================================ */
@media (min-width:901px){

  /* ---------- la escena aprobada ---------- */
  .plano{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#04060D }
  .plano .lienzo{
    position:absolute; left:var(--ox,0px); top:var(--oy,0px);
    width:var(--w,100vw); height:var(--h,100vh); max-width:none;
  }
  /* la sala construida en CSS sólo gobierna el móvil: aquí manda el boceto */
  body[data-view="home"] .escenario{ display:none }
  body[data-view="home"] .veil.grad,
  body[data-view="home"] .veil.vig{ opacity:0 }
  body[data-view="home"] .bg.on{ opacity:.22; filter:blur(26px) saturate(.5) brightness(.34) }
  /* en el clon todo va en position:fixed, asi que la seccion no necesita
     alto: dejarselo haria la pagina mas larga que la pantalla y aparecia
     una barra de desplazamiento de once pixeles */
  body[data-view="home"] .universe{ display:block; min-height:0; padding:0 }
  body[data-view="home"] .uhead{ position:static; margin:0 }
  body[data-view="home"] .crumb{ display:none }
  body[data-view="home"] .uhead .kicker{ display:none }
  body[data-view="home"] .arc{ display:block; padding:0; perspective:none; gap:0 }
  /* en el boceto la marca es sólo el emblema: el nombre queda para lectores */
  body[data-view="home"] header .brand b{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }

  /* ---------- los cinco cristales ---------- */
  body[data-view="home"] .portal{
    position:fixed; z-index:var(--z-portal); opacity:0;
    left:calc(var(--ox) + var(--w) * var(--L));
    top:calc(var(--oy) + var(--h) * var(--T));
    width:calc(var(--w) * var(--PW));
    height:calc(var(--h) * var(--PH));
    max-width:none; aspect-ratio:auto; transform:none; filter:none;
    /* preserve-3d convierte al panel en marco de referencia y los rotulos,
       que van en position:fixed, se pegarian a el en vez de a la pantalla */
    transform-style:flat; perspective:none;
    transition:opacity var(--motion-cinematic) var(--ease-out);
  }
  body.ready[data-view="home"] .portal{ opacity:1 }
  body[data-view="home"] .portal .hoja,
  body[data-view="home"] .portal .pane{
    position:absolute; inset:0; border:0; border-radius:0; display:block;
    background:none; box-shadow:none; overflow:visible;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  body[data-view="home"] .portal .lienzo,
  body[data-view="home"] .portal .filo,
  body[data-view="home"] .portal .nodo,
  body[data-view="home"] .portal .eco,
  body[data-view="home"] .portal .frame,
  body[data-view="home"] .portal .aura{ display:none }
  body[data-view="home"] .portal .cab,
  body[data-view="home"] .portal .plabel{ display:contents }

  /* la ventana a la obra: mismo archivo, misma escala, mismo encuadre, de
     modo que en reposo es indistinguible del fondo */
  .vidrio{
    position:absolute; inset:0; display:block;
    background-image:url(escena.webp);
    background-size:var(--w) var(--h);
    background-position:calc(var(--w) * var(--L) * -1) calc(var(--h) * var(--T) * -1);
    background-repeat:no-repeat;
    clip-path:var(--quad);
    transition:filter var(--motion-cinematic) var(--ease-out);
  }
  /* el resplandor que se escapa del cristal al elegirlo */
  .aureola{
    position:absolute; inset:-6%; display:block; pointer-events:none; opacity:0;
    background:radial-gradient(58% 54% at 50% 50%, rgba(var(--accent-rgb),.42), transparent 72%);
    filter:blur(26px);
    transition:opacity var(--motion-cinematic) var(--ease-out);
  }
  body[data-view="home"] .barrido{
    position:absolute; inset:0; opacity:0; pointer-events:none; clip-path:var(--quad);
    background:linear-gradient(108deg, transparent 38%, rgba(226,240,255,.16) 48%,
                                       rgba(255,255,255,.30) 51%, rgba(226,240,255,.13) 55%, transparent 63%);
  }

  /* ---------- los rótulos: encuadre.js les pone sitio y cuerpo ---------- */
  body[data-view="home"] .pnum,
  body[data-view="home"] .pname,
  body[data-view="home"] .pclaim,
  body[data-view="home"] .pgo,
  body[data-view="home"] .uhead h1 span,
  body[data-view="home"] .uhead p span,
  body[data-view="home"] .edge span,
  body[data-view="home"] .scroll-cue span{
    position:fixed; z-index:var(--z-chrome); margin:0; padding:0;
    width:max-content; max-width:none; text-align:center;
    font-family:var(--sans); font-weight:300; text-transform:uppercase;
    line-height:1.20; white-space:normal;
    transform-origin:50% 50%; pointer-events:none;
  }
  body[data-view="home"] nav.links[data-cx]{
    position:fixed; z-index:var(--z-chrome); width:max-content; pointer-events:auto;
  }
  body[data-view="home"] .pregla{
    position:fixed; z-index:var(--z-chrome); height:1px; display:block;
    background:rgba(230,240,255,.62); transform-origin:50% 50%; pointer-events:none;
    transition:background var(--motion-normal), opacity var(--motion-normal);
  }
  /* cuerpos de partida: encuadre.js los reescala hasta el ancho del boceto,
     así que aquí sólo importa el color, el tracking y el peso */
  body[data-view="home"] .pnum   { font-size:14px; letter-spacing:.14em; color:#E6ECF6 }
  body[data-view="home"] .pname  { font-size:22px; letter-spacing:.045em; color:#F3F7FC;
                                   text-shadow:0 2px 20px rgba(4,7,14,.9) }
  body[data-view="home"] .pclaim { font-size:13px; letter-spacing:.11em; color:#D6DFEE;
                                   text-shadow:0 2px 16px rgba(4,7,14,.9) }
  body[data-view="home"] .pgo{
    font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--accent);
    opacity:0; height:auto; transition:opacity var(--motion-normal);
  }
  body[data-view="home"] .uhead h1 span{ font-size:34px; letter-spacing:.355em; color:#EDF2F9 }
  body[data-view="home"] .uhead p span { font-size:17px; letter-spacing:.235em; color:#B7C4DA }
  body[data-view="home"] .edge span    { font-size:14px; letter-spacing:.17em; color:#C0CCE0; line-height:1.85 }
  body[data-view="home"] .scroll-cue span{ font-size:14px; letter-spacing:.215em; color:#C0CCE0 }
  /* el tracking deja un hueco a la derecha: se compensa para que el texto
     quede centrado de verdad sobre su punto */
  body[data-view="home"] .pnum,
  body[data-view="home"] .pname,
  body[data-view="home"] .pclaim,
  body[data-view="home"] .uhead h1 span,
  body[data-view="home"] .uhead p span,
  body[data-view="home"] .edge span,
  body[data-view="home"] .scroll-cue span{ text-indent:0.5em; padding-right:0 }
  body[data-view="home"] .edge{ position:static; margin:0 }
  body[data-view="home"] .edge::after{ content:none }
  /* la entrada es sólo de opacidad: el transform lo gobierna encuadre.js */
  body[data-view="home"] .uhead h1 span,
  body[data-view="home"] .uhead p span{ opacity:0; transition:opacity 900ms var(--ease-out) }
  body.ready[data-view="home"] .uhead h1 span,
  body.ready[data-view="home"] .uhead p span{ opacity:1 }

  /* display:contents para que el contenedor no genere caja: si llevara
     transform seria marco de referencia y el rotulo se despegaria */
  body[data-view="home"] .scroll-cue{ display:contents }
  body[data-view="home"] .scroll-cue i{
    position:fixed; z-index:var(--z-chrome);
    left:calc(var(--ox) + var(--w) * .50120);
    top:calc(var(--oy) + var(--h) * .88097);
    transform:translate(-50%,-50%);
    width:calc(var(--w) * .0120); height:calc(var(--w) * .0215);
    border:1px solid rgba(206,220,240,.62); border-radius:calc(var(--w) * .0062);
  }

  /* ---------- al elegir un cristal ---------- */
  body[data-view="home"] .portal.live .vidrio{ filter:brightness(1.32) saturate(1.14) contrast(1.04) }
  body[data-view="home"] .portal.live .aureola{ opacity:1 }
  body[data-view="home"] .portal.live .barrido{ animation:barre 1150ms var(--ease-inout) }
  body[data-view="home"] .portal.live .pregla{ background:rgba(var(--accent-rgb),.98) }
  body[data-view="home"] .portal.live .pnum,
  body[data-view="home"] .portal.live .pclaim{ color:rgba(var(--accent-rgb),.98) }
  body[data-view="home"] .portal.live .pgo{ opacity:1 }
  /* los otros cuatro ceden: se apaga su pieza de la sala */
  body.previewing[data-view="home"] .portal:not(.live){ opacity:1; filter:none }
  body.previewing[data-view="home"] .portal:not(.live) .vidrio{ filter:brightness(.50) saturate(.52) }
  body.previewing[data-view="home"] .portal:not(.live) .pnum,
  body.previewing[data-view="home"] .portal:not(.live) .pname,
  body.previewing[data-view="home"] .portal:not(.live) .pclaim{ opacity:.42 }
  body.previewing[data-view="home"] .portal:not(.live) .pregla{ opacity:.42 }

  /* ---------- el planeta, en el hueco que deja el boceto ---------- */
  body[data-view="home"] .planeta{
    /* La caja del orbe no es la de la imagen: es mas ancha, porque los
       anillos se abren a los lados, y llega mas abajo, porque ahi va el
       reflejo en el piso. El centro de la bola cae en el mismo punto del
       boceto de siempre; el resto de la caja es aire. */
    left:calc(var(--ox) + var(--w) * .50538); top:calc(var(--oy) + var(--h) * .74160);
    bottom:auto; width:calc(var(--w) * .23500); aspect-ratio:1 / .62;
    transform:translate(-50%,-50%);
  }
  body[data-view="home"] .planeta .p6-img{
    /* la imagen de respaldo se centra dentro de esa caja mas grande */
    width:69%; margin:0 auto; position:relative; top:8%;
  }
  body[data-view="home"] .planeta.con-orbe .p6-halo,
  body[data-view="home"] .planeta.con-orbe .p6-reflejo{ display:none }

  /* el encabezado también se alinea con la obra */
  body[data-view="home"] header{
    position:fixed; inset:0 auto auto 0; width:100%; height:0;
    padding:0; display:block; background:none; border:0;
  }
  body[data-view="home"] header .brand{
    position:fixed; z-index:var(--z-chrome); gap:0;
    left:calc(var(--ox) + var(--w) * .04336);
    top:calc(var(--oy) + var(--h) * .05632);
    transform:translate(-50%,-50%);
  }
  body[data-view="home"] header .brand img{ width:calc(var(--w) * .0389); height:auto }
body[data-view="home"] header .brand picture{ display:block }
  body[data-view="home"] nav.links{
    font-size:14px; letter-spacing:.17em; gap:3.1em; display:flex;
    text-transform:uppercase; font-weight:300; color:#C6D2E4;
    transform-origin:50% 50%;
  }
  body[data-view="home"] .burger{
    position:fixed; z-index:var(--z-chrome);
    left:calc(var(--ox) + var(--w) * .96143);
    top:calc(var(--oy) + var(--h) * .05367);
    transform:translate(-50%,-50%);
    width:calc(var(--w) * .02691); height:calc(var(--w) * .02691);
  }
}

/* por debajo de 901 px el boceto no cabe: manda la sala construida en CSS */
@media (max-width:900px){
  .plano,.vidrio,.aureola{ display:none }
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .grid.c4{ grid-template-columns:repeat(2,1fr) }
  .grid.c3{ grid-template-columns:repeat(2,1fr) }
}
/* --- tablet: se conserva la atmósfera, se recorta el coste (regla 57) --- */
@media (max-width:1024px){
  .arc{ perspective:1500px; gap:8px }
  .portal{ max-width:none }
  .portal:nth-child(1){ --tilt:16deg;  --shift:-62px; --drop:8px }
  .portal:nth-child(2){ --tilt:8deg;   --shift:-20px; --drop:3px }
  .portal:nth-child(4){ --tilt:-8deg;  --shift:-20px; --drop:3px }
  .portal:nth-child(5){ --tilt:-16deg; --shift:-62px; --drop:8px }
  .cwrap{ grid-template-columns:1fr }
}
/* --- celular: no cinco paneles diminutos, un carrusel (regla 58) --- */
@media (max-width:760px){
  :root{ --pad:18px; --safe-t:62px; --safe-b:64px }
  nav.links{ display:none }
  .uhead .kicker{ margin:0 0 clamp(10px,1.5vh,18px); font-family:var(--mono);
  font-size:clamp(7.5px,.58vw,9px); letter-spacing:.34em; text-transform:uppercase; color:var(--accent) }
.uhead h1{ letter-spacing:.22em }
  .arc{
    /* justify-content:center sobre un flex que desborda empuja el contenido a
       coordenadas negativas que el scroll no alcanza. Aquí se alinea al inicio. */
    display:flex; justify-content:flex-start; align-items:stretch; gap:12px; perspective:none;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    /* el relleno lateral centra la PRIMERA ventana con scrollLeft = 0:
       ninguna queda en coordenadas negativas inalcanzables */
    padding:0 calc(50vw - 39vw) clamp(104px,18vh,158px);
    margin-inline:calc(var(--pad)*-1);
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .arc::-webkit-scrollbar{ display:none }
  .portal{ flex:0 0 78vw; scroll-snap-align:center; max-width:none; aspect-ratio:4/5.3;
    --tilt:0deg; --shift:0px; --drop:0px }
  .portal:nth-child(n){ --tilt:0deg; --shift:0px; --drop:0px }
  .portal.live{ transform:none }
  body.previewing .portal:not(.live){ opacity:.6; filter:none }
  .pgo{ opacity:1; transform:none }
  .planeta{ width:150px; bottom:clamp(14px,2.6vh,30px) }
  body[data-view="world"] .planet-hit{ width:78px; bottom:clamp(64px,11vh,92px) }
  body[data-view="world"] .edge{ display:none }
  .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:1fr }
  .cards{ gap:3px }
  .card:nth-child(n){ grid-column:span 12; aspect-ratio:16/9 }
  .two{ grid-template-columns:1fr }
  .constel{ aspect-ratio:1/1 }
  .edge{ font-size:7px; letter-spacing:.2em }
  .edge.l{ display:none }
  #connect{ display:none }
}
/* indicadores del carrusel en celular */
.pips{ display:none }
@media (max-width:760px){
  .pips{ display:flex; gap:8px; justify-content:center;
    position:absolute; left:0; right:0; bottom:calc(var(--safe-b) + 92px); z-index:var(--z-portal) }
  .pips i{ width:6px; height:6px; border-radius:50%; background:rgba(244,247,251,.22);
    transition:background var(--motion-fast), width var(--motion-fast) }
  .pips i.on{ background:var(--accent); width:16px; border-radius:3px }
}

/* --- pantallas muy anchas --- */
@media (min-width:1900px){ .arc{ gap:22px } .portal{ max-width:290px } }

/* ============================================================
   9. MOVIMIENTO REDUCIDO (regla 61)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  .bg{ transform:none } .portal{ opacity:1; transform:none }
  .portal.live{ transform:none }
  .world > *{ opacity:1; transform:none; filter:none }
  .uhead h1 span,.uhead p span{ opacity:1; transform:none }
  #sky{ display:none }
  #connect{ display:none }
}

/* ============================================================
   10. SIN JAVASCRIPT (regla 71)
   ============================================================ */
.no-js #boot{ display:none }
.no-js .portal,.no-js .world > *,.no-js .uhead h1 span,.no-js .uhead p span{ opacity:1; transform:none; filter:none }
.no-js .edge{ opacity:1 }
.no-js .bg.first{ opacity:1 }

/* ============================================================
   11. LA INTERFAZ SE CALMA CUANDO SE LEE (regla 48)
   ============================================================ */
body.reading .bg.on{ transform:scale(1.0) }
body.reading #sky{ opacity:.55; transition:opacity 900ms var(--ease-out) }
#sky{ opacity:1; transition:opacity 700ms var(--ease-out) }

/* ============================================================
   12. PROYECTO ABIERTO (constelación y galería)
   ============================================================ */
.proyecto{
  position:fixed; inset:0; z-index:var(--z-menu); display:grid; place-items:center;
  padding:clamp(16px,4vw,56px); background:rgba(5,7,15,.90);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; transition:opacity var(--motion-normal), visibility var(--motion-normal);
}
.proyecto[data-open="true"]{ opacity:1; visibility:visible }
.proyecto .caja{ width:min(1040px,100%); max-height:100%; overflow:auto;
  background:linear-gradient(158deg, rgba(244,247,251,.06), rgba(11,16,32,.45));
  border:1px solid var(--hair); border-radius:var(--radius-lg); padding:clamp(16px,2.2vw,30px);
  transform:translateY(16px); transition:transform var(--motion-cinematic) var(--ease-premium) }
.proyecto[data-open="true"] .caja{ transform:none }
.proyecto video,.proyecto img{ width:100%; border-radius:var(--radius); background:#080C18; display:block }
.proyecto h3{ margin:16px 0 6px; font-size:clamp(17px,1.6vw,24px); font-weight:500;
  font-variation-settings:"wdth" 108 }
.proyecto .cat{ margin:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent) }
.proyecto .desc{ margin:10px 0 0; max-width:62ch; font-size:13.5px; line-height:1.65; color:var(--ink-soft) }
.proyecto .cerrar{ all:unset; cursor:pointer; position:absolute; top:clamp(12px,2vh,26px); right:clamp(12px,2vw,26px);
  width:38px; aspect-ratio:1; border:1px solid var(--hair); border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; color:var(--ink-soft);
  transition:border-color var(--motion-fast), color var(--motion-fast) }
.proyecto .cerrar:hover{ border-color:var(--accent); color:var(--accent) }

/* ---------- capítulos con imagen: estación visual, no sólo texto ---------- */
.chapter figure{ margin:0 0 14px }
.chapter .shotbox{ aspect-ratio:3/2 }
.chapter .shotbox img{ transition:transform 900ms var(--ease-premium) }
.chapter:hover .shotbox img{ transform:scale(1.04) }

/* ============================================================
   13. AVISO DE VISTA PREVIA LOCAL
   ============================================================ */
.aviso-local{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:var(--z-menu); margin:0; max-width:min(560px,92vw); text-align:center;
  padding:10px 16px; border-radius:20px; border:1px solid var(--hair);
  background:rgba(5,7,15,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.8; color:var(--ink-soft);
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-premium);
}
.aviso-local.ir{ opacity:0; transform:translate(-50%,10px); pointer-events:none }

/* ============================================================
   9. EL CURSOR ES LA NAVECITA
   El puntero del sistema se retira y en su lugar vuela el transbordador del
   emblema "Operacion Planet 6". Lo mueve assets/nave.js.

   El puntero solo se retira cuando la nave ya esta montada y colocada (la
   clase .con-nave la pone el JS al primer movimiento). Asi, si algo falla o
   el JS no corre, el visitante conserva su cursor de siempre.

   Y se devuelve el cursor de escritura dentro de los campos de texto: ahi
   hace falta ver la barra para saber por donde se escribe.
   ============================================================ */
html.con-nave, html.con-nave *{ cursor:none }
html.con-nave.nave-escribiendo,
html.con-nave.nave-escribiendo *{ cursor:auto }
html.con-nave.nave-escribiendo .p6-nave{ opacity:0 }

.p6-nave{
  position:fixed; left:0; top:0; z-index:2147483000;
  width:52px; margin:calc(52px * 288 / 420 * -0.093) 0 0 calc(52px * -0.108);
  transform-origin:10.8% 9.3%;
  pointer-events:none; opacity:0;
  transition:opacity 260ms var(--ease-out);
  will-change:transform;
}
.p6-nave.ahi{ opacity:1 }
.p6-nave img{
  display:block; width:100%; height:auto;
  /* la nave es blanca y negra: sobre el espacio necesita despegarse del
     fondo, y sobre una foto clara necesita no desaparecer */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.65))
         drop-shadow(0 0 calc(4px + var(--sobre,0) * 10px)
                     rgba(var(--accent-rgb,199,168,107), calc(.25 + var(--sobre,0) * .55)));
  transition:filter 240ms var(--ease-out);
}
/* el fuego de los motores: crece con el empuje y se apaga al parar */
.p6-nave-fuego{
  position:absolute; right:88%; top:52%; width:52%; height:16%;
  transform:translateY(-50%) scaleX(calc(.2 + var(--empuje,0) * 1));
  transform-origin:100% 50%;
  background:linear-gradient(270deg,
    rgba(255,238,206,calc(.85 * var(--empuje,0))) 0%,
    rgba(255,196,120,calc(.45 * var(--empuje,0))) 34%,
    rgba(170,204,255,0) 100%);
  filter:blur(3px); border-radius:50%;
  opacity:var(--empuje,0); pointer-events:none;
}
.p6-nave.impulso{ filter:brightness(1.2) }

/* los puntos que va dejando detras */
.p6-estela{
  position:fixed; left:0; top:0; z-index:2147482999;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,226,168,.9), rgba(226,190,128,0) 70%);
  pointer-events:none; opacity:0; will-change:transform,opacity;
}
html:not(.con-nave) .p6-nave,
html:not(.con-nave) .p6-estela{ opacity:0 }

/* en tactil y con movimiento reducido no se monta nada: el JS ni empieza */
@media (hover: none), (pointer: coarse){
  .p6-nave,.p6-estela{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .p6-nave,.p6-estela{ display:none }
  html.con-nave, html.con-nave *{ cursor:auto }
}

/* ============================================================
   LA DISOLVENCIA DE LOS TEXTOS
   Jose, en lugar de los planetas que flotaban: "que a la hora de que se va
   desplazando, los textos salgan con efecto, que tengan una disolvencia".

   El que esconde es assets/app.js, no esta hoja: la clase .por-revelar la
   pone el JavaScript. Asi, si el JavaScript no corre, no hay NADA escondido
   y el texto se lee igual. Es la unica manera segura de hacer esto.

   400 ms y 14 px. Corto y corto a proposito: una disolvencia se nota cuando
   es breve; estirada parece que la pagina va lenta.
   ============================================================ */
.por-revelar{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),
             transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.por-revelar.revelado{ opacity:1; transform:none }
/* al terminar ya no hace falta reservar capa de dibujo */
.por-revelar.revelado{ will-change:auto }

@media (prefers-reduced-motion: reduce){
  .por-revelar{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ============================================================
   LA PAGINA QUE PRESENTA EL TRABAJO  (.escaparate)
   Jose: "esto no parece una empresa creativa de produccion".
   Tenia razon, y la razon de fondo no eran los planetas: sus fotos —que
   son el producto— estaban en cajas chicas mientras el espacio se lo
   llevaban los efectos y las listas de equipo.

   Aqui se invierte. Tres reglas, y de ellas sale todo lo demas:
     1. LA FOTO MANDA. A sangre, de borde a borde, alta. Sin marco, sin
        vidrio, sin nada encima que no sea una linea de texto.
     2. EL TEXTO ES GRANDE Y ES POCO. Una afirmacion por pantalla. Las
        listas de equipo bajan al final, que es donde sirven: tranquilizan
        al tecnico que ya decidio, no convencen al que esta decidiendo.
     3. NADA SE MUEVE SOLO. Las productoras que se ven caras se ven
        QUIETAS. Lo unico que se mueve es lo que el visitante provoca al
        bajar. El movimiento constante lee como inseguridad.
   ============================================================ */

/* la pagina no lleva el ancho maximo del resto: las bandas van a sangre */
.escaparate{ padding:0; max-width:none }
/* ...pero el texto si se contiene, y siempre a la misma columna */
.escaparate .columna{
  max-width:1400px; margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- 1. LA APERTURA ---------- */
.abre{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
       overflow:hidden; isolation:isolate }
.abre-foto{ position:absolute; inset:0; z-index:-2 }
.abre-foto img{ width:100%; height:100%; object-fit:cover; object-position:42% 58%;
                /* un acercamiento lentisimo: se siente, no se ve */
                transform:scale(1.06); transition:transform 2600ms cubic-bezier(.22,.61,.36,1) }
.abre.revelado .abre-foto img{ transform:scale(1) }
/* el degradado que deja leer el texto encima de la foto, sin apagarla */
.abre::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(3,5,11,.94) 0%, rgba(3,5,11,.62) 34%, rgba(3,5,11,.10) 66%, rgba(3,5,11,.38) 100%),
    linear-gradient(to right, rgba(3,5,11,.88) 0%, rgba(3,5,11,.55) 32%, rgba(3,5,11,.06) 68%, rgba(3,5,11,0) 100%);
}
.abre .columna{ width:100%; padding-bottom:clamp(56px,10vh,110px);
                padding-top:calc(var(--safe-t) + 40px) }

/* EL TITULAR. Esta es la pieza que decide si la pagina impone o no.
   Grande de verdad, apretado de interlineado y de letra: asi se ven los
   titulares de las productoras que uno admira. */
.titular{
  margin:0; font-weight:600; letter-spacing:-.042em; line-height:.92;
  font-size:clamp(34px,6.2vw,86px); font-variation-settings:"wdth" 112;
  max-width:15ch; color:var(--moon); text-wrap:balance;
}
/* EL TITULAR VA BLANCO ENTERO. Lo probe con la segunda mitad en el azul de
   la marca y gritaba: el color partia la frase en dos y la hacia parecer un
   anuncio. El acento se queda donde no compite —el antetitulo, las cifras,
   el enlace—, que es como lo usan las casas que se ven caras. */
.titular em{ font-style:normal; color:var(--moon); opacity:.72 }
.bajada{
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:46ch;
  font-size:clamp(14px,1.12vw,18px); line-height:1.64; color:#CBD2E4;
}
/* el pie de la apertura: donde, que y cuantos. Es el dato duro. */
.credito{
  margin:clamp(24px,3.4vh,40px) 0 0; display:flex; flex-wrap:wrap;
  gap:9px clamp(14px,1.6vw,26px);
  font-family:var(--mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-dim);
}
.credito b{ color:var(--moon); font-weight:400 }

/* ---------- 2. LAS CIFRAS ---------- */
/* Solo datos verificables de sus propios eventos. Ni uno inventado. */
.cifras{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,48px);
  padding-block:clamp(54px,9vh,104px);
  border-bottom:1px solid var(--hair-soft);
}
.cifra b{
  display:block; font-weight:600; letter-spacing:-.04em; line-height:1;
  font-size:clamp(28px,3.6vw,54px); font-variation-settings:"wdth" 112;
  color:var(--moon);
}
.cifra span{
  display:block; margin-top:11px; max-width:22ch;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim); line-height:1.9;
}

/* ---------- 3. LAS BANDAS DE FOTO ---------- */
.banda{ margin:0; position:relative }
.banda .marco{
  position:relative; overflow:hidden; background:#05070F;
  height:clamp(340px,74svh,760px);
}
.banda .marco img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.05); transition:transform 1800ms cubic-bezier(.22,.61,.36,1);
}
.banda.revelado .marco img{ transform:scale(1) }
.banda .marco::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(3,5,11,.80), rgba(3,5,11,0) 46%);
}
/* el pie va DENTRO de la foto, abajo a la izquierda: no roba una linea de
   pagina y ata el texto a la imagen que describe */
.banda .pie{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 var(--pad) clamp(22px,3.4vh,40px);
}
/* El pie hereda de figcaption, que es monoespaciada y en mayusculas. Aqui
   no: esta linea es una AFIRMACION, no una etiqueta, y en mayusculas de
   maquina de escribir parecia el rotulo de un archivo. Hay que apagar las
   dos cosas a mano. */
.banda .pie em{
  display:block; font-style:normal; font-weight:600; letter-spacing:-.03em;
  font-family:var(--sans); text-transform:none;
  font-size:clamp(20px,2.5vw,38px); line-height:1.04;
  font-variation-settings:"wdth" 112; color:var(--moon); max-width:20ch;
}
.banda .pie i{
  display:block; margin-top:10px; font-style:normal;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim);
}
.tira-bandas > * + *{ margin-top:clamp(10px,1.4vw,22px) }

/* ---------- 4. LO QUE HACEMOS ---------- */
.hace{ padding-block:clamp(64px,11vh,130px) }
.hace-lista{ list-style:none; margin:clamp(32px,5vh,60px) 0 0; padding:0 }
/* la lista se contiene: a 1600 px, con el titulo pegado a la izquierda y la
   descripcion pegada a la derecha, quedaba medio metro de vacio en medio y
   la vista tenia que viajar de un lado a otro para leer una sola fila */
.hace-lista{ max-width:1180px }
.hace-lista li{
  display:grid; grid-template-columns:5.5ch minmax(0,1fr) minmax(0,38ch);
  gap:clamp(14px,2.4vw,44px); align-items:start;
  padding-block:clamp(22px,3.4vh,40px);
  border-top:1px solid var(--hair-soft);
}
.hace-lista li:last-child{ border-bottom:1px solid var(--hair-soft) }
.hace-lista u{
  text-decoration:none; font-family:var(--mono); font-size:9px;
  letter-spacing:.22em; color:var(--accent); padding-top:.55em;
}
.hace-lista h3{
  margin:0; font-weight:600; letter-spacing:-.032em; line-height:1.04;
  font-size:clamp(19px,2.1vw,32px); font-variation-settings:"wdth" 112;
  color:var(--moon);
}
.hace-lista p{ margin:0; font-size:clamp(13px,.95vw,15.5px); line-height:1.72;
               color:#B9C1D4; padding-top:.35em }

/* ---------- 5. EL EQUIPO, AL FINAL ---------- */
.ficha{ padding-block:clamp(48px,8vh,96px); border-top:1px solid var(--hair-soft) }
.ficha > p{ margin:0 0 clamp(20px,3vh,34px); font-family:var(--mono);
            font-size:9px; letter-spacing:.3em; text-transform:uppercase;
            color:var(--ink-dim) }
.ficha dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
           gap:clamp(20px,2.6vw,40px); margin:0; max-width:1180px }
.ficha dt{ font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
           text-transform:uppercase; color:var(--accent); margin-bottom:9px }
.ficha dd{ margin:0; font-size:clamp(12.5px,.9vw,14.5px); line-height:1.8; color:#AEB7CC }

/* ---------- 6. EL CIERRE ---------- */
.cierre{ padding-block:clamp(70px,13vh,160px); text-align:center;
         border-top:1px solid var(--hair-soft) }
.cierre h2{
  margin:0 auto; max-width:17ch; font-weight:600; letter-spacing:-.04em;
  line-height:.98; font-size:clamp(28px,4.6vw,66px);
  font-variation-settings:"wdth" 112; color:var(--moon); text-wrap:balance;
}
.cierre .inline{ margin-top:clamp(26px,4vh,46px) }

/* ---------- lo estrecho ---------- */
@media (max-width:860px){
  .cifras{ grid-template-columns:repeat(2,1fr) }
  .hace-lista li{ grid-template-columns:4.5ch 1fr; }
  .hace-lista p{ grid-column:2; padding-top:10px }
  .banda .marco{ height:clamp(280px,58svh,480px) }
}
@media (max-width:480px){
  .cifras{ grid-template-columns:1fr 1fr; gap:26px 18px }
}
@media (prefers-reduced-motion: reduce){
  .abre-foto img, .banda .marco img{ transform:none !important; transition:none !important }
}

/* ============================================================
   EL ESCAPARATE, ENCAJADO EN LO QUE YA HABIA
   Dos ajustes, y los dos son consecuencia de decisiones anteriores:

   1. LA COLUMNA DE 52vw. Los mundos normales reservan la mitad izquierda
      para el texto porque la otra mitad la ocupa el montaje fijo. Aqui no:
      la foto ES la pagina. Se exime a .escaparate de esa regla.

   2. EL MONTAJE ES LA APERTURA. La secuencia que arma la foto pieza por
      pieza le gusto a Jose y no se pierde: en vez de ir en un recuadro a la
      derecha, ahora arma la foto de apertura a pantalla completa. Misma
      mecanica de siempre —todas las piezas son la misma foto, al mismo
      tamano y encuadre—, solo que el lienzo es toda la pantalla.
   ============================================================ */
@media (min-width:1100px){
  body[data-view="world"] .escaparate > *:not(.montaje){ max-width:none }
  .escaparate > .montaje{
    position:absolute; inset:0; right:auto; top:0;
    width:100%; aspect-ratio:auto; max-width:none;
  }
}
.escaparate > .montaje{
  position:absolute; inset:0; width:100%; height:100%;
  aspect-ratio:auto; right:auto; top:0;
  border-radius:0; box-shadow:none;
  -webkit-mask-image:none; mask-image:none;
  z-index:-2;
}
/* el montaje vive dentro de la apertura, no como hijo directo del articulo:
   estos son los mismos ajustes, alcanzados donde de verdad esta */
.abre > .montaje{
  position:absolute; inset:0; width:100%; height:100%;
  aspect-ratio:auto; right:auto; top:0;
  border-radius:0; box-shadow:none;
  -webkit-mask-image:none; mask-image:none;
  z-index:-2;
}
@media (min-width:1100px){
  .abre > .montaje{ position:absolute; inset:0; width:100%; max-width:none }
}
/* el rotulo que el montaje pinta en su esquina no va aqui: en la apertura
   el texto que manda es el titular, y dos textos se estorban */
.abre .montaje b{ display:none }

/* el antetitulo, sobre una foto, necesita mas cuerpo del que tiene en una
   pagina normal: en azul oscuro sobre una sala oscura no se leia */
.abre .eyebrow{ color:#EAF0FF; opacity:.82; font-size:9.5px }
.abre .eyebrow s{ background:var(--accent); opacity:1 }

/* y el bloque sube: abajo estan los rotulos de borde y los puntos del
   carrusel, y el credito se les echaba encima */
.abre .columna{ padding-bottom:clamp(92px,15vh,150px) }

/* ---------- EL ESCAPARATE, AFINADO SOBRE LO QUE SE VIO ----------
   Tres correcciones, las tres salidas de mirar la pagina hecha: */

/* 1. FONDO LISO. Detras del texto seguia corriendo la foto de fondo del
      mundo, y con el campo de estrellas encima quedaba un revoltijo. En una
      pagina donde las fotos son el argumento, entre foto y foto tiene que
      haber NEGRO. Asi cada imagen llega limpia. */
.escaparate{ background:#04060D; position:relative; z-index:1 }

/* 2. LOS ROTULOS DE BORDE SE QUITAN AQUI. "Del concepto a la realidad" y
      "Experiencias que trascienden" son adorno fijo de las esquinas y se
      montaban encima del titular. Sobre una pagina cuyo argumento es la foto,
      un rotulo decorativo que choca con el texto es justo lo que hace que se
      vea descuidada. El logotipo de la esquina se queda: ese si es marca. */
body[data-slug="produccion"] .edge{ display:none }

/* 3. JERARQUIA. El titular de apertura y el de seccion salian del mismo
      tamano, y entonces ninguno manda. El de seccion baja un escalon. */
.hace .titular, .cierre h2{ font-size:clamp(26px,4.2vw,58px) }

/* ============================================================
   EL CELULAR — LA CONSTELACION
   ============================================================
   Jose: "en el celular visualizo solamente como pagina por pagina, no
   alcanzo a notar el impacto de primera visualizacion donde se ve todo".
   Tenia razon y el diagnostico es exacto: en el telefono los cinco
   cristales estaban en un carrusel de uno en uno a 78vw. Nunca habia un
   momento en que se viera el universo. Eso no es una pantalla chica: es
   otra pagina, y peor.

   DECISION: en el telefono los cinco cristales se ven A LA VEZ, en abanico,
   con el planeta debajo. Es la misma composicion del escritorio, en
   miniatura, no un sustituto. Se pierde el detalle de cada cristal —a ese
   tamano no cabe el subtitulo ni el "explorar"— y se gana lo que el pidio:
   que de un vistazo se vea todo.

   Los numeros salen de la pantalla mas apretada que hay que aguantar, un
   iPhone con la barra del navegador puesta: 390 x 664. Si cabe ahi, cabe
   en todo lo demas.
   ============================================================ */
@media (max-width:760px){

  /* --- LA CABECERA SE APRIETA.
         Con el interletrado del escritorio, "Produccion de eventos · Ciudad
         de Mexico" caia en tres renglones desiguales y el lema en cuatro:
         siete renglones de texto chico antes de ver un solo cristal. En una
         pantalla de 664 puntos eso es la mitad. Menos interletrado, menos
         cuerpo y un ancho maximo que parta por donde tiene que partir. --- */
  .uhead{ padding-top:clamp(4px,1vh,12px); text-align:center }
  /* el antetitulo hereda un flex de su regla general y el flex se encoge a
     su contenido: por eso quedaba descentrado aunque el titular no. Aqui
     vuelve a ser un bloque normal, que es lo unico que se centra solo. */
  .uhead .kicker{ display:block; width:auto; max-width:none;
                  margin-inline:auto; text-align:center;
                  letter-spacing:.13em; font-size:7px }
  .uhead .kicker span{ display:inline; max-width:none }
  /* el titular necesita su margen: pegado a los dos cantos parece que la
     pantalla se le queda chica */
  .uhead h1{ font-size:clamp(18px,5.4vw,26px); letter-spacing:.11em; line-height:1.12;
             margin:clamp(6px,1.4vh,12px) auto; max-width:calc(100% - 28px) }
  .uhead p{ max-width:36ch; margin:0 auto; line-height:1.55;
            font-size:7.5px; letter-spacing:.12em; text-align:center;
            text-wrap:balance }

  /* --- EL ABANICO: tres arriba, dos abajo, y cada uno con su inclinacion,
         como los cristales del escritorio --- */
  .arc{
    display:grid !important;
    grid-template-columns:repeat(6,1fr);
    justify-content:center; align-items:start;
    gap:clamp(8px,2.4vw,14px);
    overflow:visible; scroll-snap-type:none;
    padding:0 0 clamp(96px,16vh,140px);
    margin-inline:0;
    perspective:900px;
  }
  /* tres arriba (dos columnas cada uno) y dos abajo (tres columnas cada uno):
     asi la fila de abajo queda centrada respecto a la de arriba sin trucos */
  .portal{
    flex:none !important; max-width:none; width:auto;
    aspect-ratio:4/5.15; scroll-snap-align:none;
    transform-style:preserve-3d;
  }
  .portal:nth-child(1){ grid-column:1 / span 2; --tilt:-7deg;  --drop:8px }
  .portal:nth-child(2){ grid-column:3 / span 2; --tilt:0deg;   --drop:0px }
  .portal:nth-child(3){ grid-column:5 / span 2; --tilt:7deg;   --drop:8px }
  .portal:nth-child(4){ grid-column:2 / span 2; --tilt:-4deg;  --drop:0px }
  .portal:nth-child(5){ grid-column:4 / span 2; --tilt:4deg;   --drop:0px }
  .portal:nth-child(n){ --shift:0px }
  .portal{ transform:rotateY(var(--tilt)) translateY(var(--drop)) }
  .portal.live{ transform:rotateY(var(--tilt)) translateY(var(--drop)) scale(1.03) }
  body.previewing .portal:not(.live){ opacity:.82; filter:none }

  /* A ESTE TAMANO SOLO CABEN EL NUMERO Y EL NOMBRE.
     La primera version dejo puestos el lema y el "explorar", y el resultado
     fue que la FOTO se quedo en una franja de cuatro dedos de alto: el
     cristal lleno de letra chica y sin imagen. En una pagina de productora
     eso es exactamente al reves de lo que tiene que pasar.
     Fuera el lema y el "explorar" —el nombre ya dice a donde se va— y la
     foto se queda con la mayor parte de la altura. */
  .portal .pclaim, .portal .pgo, .portal .plabel{ display:none }
  .portal .cab{ padding-block:clamp(8px,2vh,14px) 6px }
  .portal .pnum{ font-size:7.5px; letter-spacing:.2em }
  .portal .pregla{ margin-block:5px }
  .portal .pname{ font-size:clamp(8.5px,2.5vw,11px); line-height:1.22; letter-spacing:.09em }
  /* la foto se lleva lo que queda, que es casi todo */
  .portal .lienzo{ flex:1 1 auto; min-height:0 }
  .portal .lienzo .shot{ width:100%; height:100%; object-fit:cover }

  /* --- LA LLEGADA. El primer impacto que pedia: los cinco no estan ya
         puestos, LLEGAN, uno detras de otro, en poco mas de medio segundo. */
  body.ready .portal{ animation:aterriza 620ms var(--ease-premium) both }
  body.ready .portal:nth-child(1){ animation-delay:60ms }
  body.ready .portal:nth-child(2){ animation-delay:130ms }
  body.ready .portal:nth-child(3){ animation-delay:200ms }
  body.ready .portal:nth-child(4){ animation-delay:290ms }
  body.ready .portal:nth-child(5){ animation-delay:360ms }

  /* --- el planeta, debajo y centrado: es el ancla de la composicion --- */
  .planeta{ width:min(62vw,240px); bottom:clamp(6px,1.4vh,18px) }

  /* --- LOS LOGOS, A ESCALA DE TELEFONO.
         El emblema de regreso media 74 px sobre una pantalla de 390: casi
         una quinta parte del ancho. En el escritorio esos mismos 98 px sobre
         1600 son una quinceava parte. Por eso se veia enorme: estaba fijado
         en pixeles y el telefono es cuatro veces mas estrecho. --- */
  body[data-view="world"] .planet-hit{
    width:clamp(46px,13vw,58px); right:12px;
    bottom:clamp(58px,9vh,78px); opacity:.72;
  }
  .brand img{ width:24px }
  .brand b{ font-size:8px; letter-spacing:.13em }

  /* ya no hay carrusel que indicar */
  .pips{ display:none !important }
}

@keyframes aterriza{
  from{ opacity:0; transform:rotateY(var(--tilt)) translateY(calc(var(--drop) + 26px)) scale(.94) }
  to  { opacity:1; transform:rotateY(var(--tilt)) translateY(var(--drop)) scale(1) }
}
@media (prefers-reduced-motion: reduce){
  body.ready .portal{ animation:none !important }
}

/* pantallas muy cortas: el abanico se aprieta antes de desbordar */
@media (max-width:760px) and (max-height:700px){
  .arc{ gap:7px; padding-bottom:clamp(78px,13vh,110px) }
  .planeta{ width:min(52vw,190px) }
  .uhead h1{ font-size:clamp(19px,5.8vw,26px) }
}

/* ============================================================
   EL RECUADRO AZUL AL TOCAR
   En el telefono, al tocar un cristal aparecia un rectangulo azul plano
   encima, justo en el momento en que empieza la transicion. Es el
   resaltado que el navegador pone por defecto a todo lo que se toca, y en
   una pieza trabajada se ve barato: tapa el cristal justo cuando se esta
   encendiendo. Se apaga en todo el sitio. El aviso de que se toco ya lo da
   el propio cristal, que se ilumina.
   ============================================================ */
html{ -webkit-tap-highlight-color:transparent }
a, button, .portal, .planet-hit, summary, label{ -webkit-tap-highlight-color:transparent }
/* pero sin quitarle a nadie la forma de saber donde esta con el teclado */
.portal:focus-visible, a:focus-visible, button:focus-visible{
  outline:1px solid rgba(var(--accent-rgb),.8); outline-offset:3px;
}

/* ============================================================
   LA TABLET EN VERTICAL
   Entre 761 y 900 puntos no aplicaba ni el celular ni el clon del
   escritorio, y en un iPad de pie los cinco cristales quedaban en fila,
   del tamano de una estampilla, flotando a media pantalla con medio piso
   vacio debajo. El mismo defecto que Jose vio en el telefono con otra
   forma: no hay primer impacto porque lo importante es diminuto.
   Se le da el mismo abanico del celular, pero con cristales grandes y el
   ancho contenido, para que no se desparramen por los cantos.
   ============================================================ */
@media (min-width:761px) and (max-width:1099px) and (orientation:portrait){
  .arc{
    display:grid !important;
    grid-template-columns:repeat(6,1fr);
    gap:clamp(14px,2.2vw,22px);
    /* width:100% es obligatorio. Sin el, la rejilla se encoge al contenido,
       el contenido son cristales de ancho automatico, y el navegador resuelve
       ese circulo encogiendolo todo: salian cristales de veinte puntos. */
    width:100%; max-width:640px; margin:clamp(20px,4vh,48px) auto 0;
    padding:0 0 clamp(150px,20vh,230px);
    overflow:visible; scroll-snap-type:none; perspective:1100px;
  }
  .portal{ flex:none !important; width:auto; max-width:none; aspect-ratio:4/5.15;
           transform-style:preserve-3d }
  .portal:nth-child(1){ grid-column:1 / span 2; --tilt:-7deg; --drop:12px }
  .portal:nth-child(2){ grid-column:3 / span 2; --tilt:0deg;  --drop:0px }
  .portal:nth-child(3){ grid-column:5 / span 2; --tilt:7deg;  --drop:12px }
  .portal:nth-child(4){ grid-column:2 / span 2; --tilt:-4deg; --drop:0px }
  .portal:nth-child(5){ grid-column:4 / span 2; --tilt:4deg;  --drop:0px }
  .portal{ transform:rotateY(var(--tilt)) translateY(var(--drop)) }
  .portal.live{ transform:rotateY(var(--tilt)) translateY(var(--drop)) scale(1.03) }
  body.ready .portal{ animation:aterriza 680ms var(--ease-premium) both }
  body.ready .portal:nth-child(1){ animation-delay:60ms }
  body.ready .portal:nth-child(2){ animation-delay:130ms }
  body.ready .portal:nth-child(3){ animation-delay:200ms }
  body.ready .portal:nth-child(4){ animation-delay:290ms }
  body.ready .portal:nth-child(5){ animation-delay:360ms }
  /* aqui si caben el lema y el "explorar" */
  .portal .pname{ font-size:clamp(11px,1.7vw,15px) }
  .portal .lienzo{ flex:1 1 auto; min-height:0 }
  .portal .lienzo .shot{ width:100%; height:100%; object-fit:cover }
  .planeta{ width:min(40vw,300px) }
  .pips{ display:none !important }
}
@media (min-width:761px) and (max-width:1099px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  body.ready .portal{ animation:none !important }
}