/* ==========================================================================
   UMBRA · piezas de museo — componentes REALES de la app UMBRA Lite,
   extraídos de 01_ASSETS/DESDE_ECLIPSES/UMBRA/umbra-lite.html (regla de oro).
   Mostrados SIEMPRE dentro de un mockup de iPhone, en tamaños simétricos.
   Estética original crema/tinta/oro aislada bajo .umbra-museo. Fuentes propias.
   ========================================================================== */
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url(../fonts/Jost-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url(../fonts/Jost-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(../fonts/IBMPlexMono-Regular.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(../fonts/IBMPlexMono-Medium.woff2) format('woff2'); }

/* ==========================================================================
   MOCKUP iPhone (idéntico para todas las pantallas → simetría)
   ========================================================================== */
.iphone {
  position: relative; width: 100%; max-width: 292px; margin: 0 auto;
  aspect-ratio: 292 / 606; border-radius: 52px; padding: 5px;
  /* banda de titanio natural (plata cepillada) */
  background: linear-gradient(135deg, #eceef0 0%, #b2b6bb 19%, #d6d9dd 37%, #94989e 55%, #dfe2e6 73%, #a4a8ae 91%, #cfd2d6 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.42), inset 0 0 2px rgba(255, 255, 255, 0.95),
              0 3px 6px rgba(0, 0, 0, 0.4), 0 60px 92px -44px rgba(0, 0, 0, 0.86);
}
/* botones laterales de titanio */
.iphone::before { content: ""; position: absolute; left: -1.5px; top: 116px; width: 2.5px; height: 86px; border-radius: 3px 0 0 3px; background: linear-gradient(#c8cbcf, #8b8e93); }
.iphone::after  { content: ""; position: absolute; right: -1.5px; top: 154px; width: 2.5px; height: 56px; border-radius: 0 3px 3px 0; background: linear-gradient(#c8cbcf, #8b8e93); }
/* La pantalla define su PROPIA proporción (282/596 = marco menos bisel de 5px):
   en Safari iOS, height:100% contra una altura derivada de aspect-ratio se
   resuelve mal y la pantalla salía más alta que el marco. Con aspect-ratio
   propio se calcula directo contra el ancho. El clip-path redondeado recorta
   SIEMPRE a los descendientes (overflow+border-radius no basta en Safari). */
.iphone-screen { position: relative; width: 100%; aspect-ratio: 282 / 596; border-radius: 47px; overflow: hidden; background: #05070a; -webkit-clip-path: inset(0 round 47px); clip-path: inset(0 round 47px); }
/* Dynamic Island en TODOS los mockups (coherencia): ninguna de nuestras
   capturas trae isla propia, así que la ponemos siempre. Sobre pantalla clara
   se lee como muesca real; sobre pantalla oscura queda discreta. */
.iphone .iphone-screen::before {
  content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px; background: #05070a; border-radius: 14px; z-index: 20;
}
.iphone-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Superficie de la app (crema) dentro de la pantalla
   ========================================================================== */
.umbra-museo {
  --paper:#FEFAF1; --card:#FBF7EC; --ink:#1E2A44; --ink-soft:#5A6580; --line:#D8CDB4;
  --gold:#C4A253; --gold-line:rgba(196,162,83,.55); --btn-bg:#1E2A44; --btn-ink:#F5EDDA;
  --sans:'Jost',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  position: absolute; inset: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); display: flex; flex-direction: column;
  padding: 44px 20px 22px; overflow: hidden;
}
.umbra-museo * { box-sizing: border-box; }
.um-topline { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); text-transform: uppercase; }
.um-topline span:last-child { margin-right: -.14em; }
.um-dots { display: flex; gap: 6px; justify-content: center; margin: 9px 0 2px; }
.um-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.um-dots i.on { background: var(--gold); }
.um-q { font-family: var(--sans); font-weight: 600; font-size: 16.5px; line-height: 1.22; color: var(--ink); margin: 10px 0 3px; text-align: center; }
.um-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0; text-align: center; }
.um-hint { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-align: center; margin: auto 0 2px; }

/* ---- EMOCIÓMETRO ---- */
.umbra-museo .gridwrap { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; margin: auto 0; }
.umbra-museo .gridmap { display: grid; grid-template-columns: 20px 1fr 20px; grid-template-rows: 1fr auto auto; gap: 7px; width: 100%; max-width: 230px; }
.umbra-museo .axisY { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 9px 0; }
.umbra-museo .gridmap .gridpad { grid-column: 2; grid-row: 1; }
.umbra-museo .axisX { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; align-items: center; padding: 0 1px; }
.umbra-museo .gridmap .gridword { grid-column: 2; grid-row: 3; justify-self: center; margin-top: 5px; }
.umbra-museo .axisY span, .umbra-museo .axisX span { font-family: var(--mono); font-size: 8px; line-height: 1; letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase; white-space: nowrap; }
.umbra-museo .axisY span { writing-mode: vertical-rl; transform: rotate(180deg); }
.umbra-museo .axisX span:last-child { margin-right: -.12em; }
.umbra-museo .axname { letter-spacing: .18em !important; color: var(--ink) !important; }
.umbra-museo .gridpad { position: relative; width: 100%; aspect-ratio: 1; border-radius: 13px; border: 1px solid var(--gold-line); overflow: hidden; background: linear-gradient(90deg, #B84B47 0%, #C0783F 50%, #CE9142 100%); touch-action: none; cursor: crosshair; box-shadow: inset 0 0 30px rgba(3,4,9,.44); }
.umbra-museo .gridsky { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #2C4C86 0%, #356A5C 50%, #46865A 100%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 9%, #000 91%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 9%, #000 91%); }
.umbra-museo .gridline { position: absolute; background: rgba(240,242,252,.24); pointer-events: none; }
.umbra-museo .gridline.v { left: 50%; top: 7px; bottom: 7px; width: 1px; }
.umbra-museo .gridline.h { top: 50%; left: 7px; right: 7px; height: 1px; }
.umbra-museo .griddot { position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%,-50%); background: #0B0A08; border: 1.6px solid #FDF1C4; display: none; pointer-events: none; z-index: 2; box-shadow: 0 0 0 3px rgba(251,233,176,.32), 0 0 11px 3px rgba(253,241,196,.42); }
.umbra-museo .gridword { font-family: var(--sans); font-size: 14px; letter-spacing: .04em; color: var(--ink); background: var(--card); border: 1px solid var(--gold-line); border-radius: 999px; padding: 9px 22px; min-width: 150px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .18s; text-transform: lowercase; }
.umbra-museo .gridword.show { opacity: 1; }
.umbra-museo .gridclear { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--ink-soft); background: none; border: none; cursor: pointer; text-transform: uppercase; padding: 4px; }

/* ---- VENTANILLA + SLIDER ---- */
.umbra-museo .scene-porthole { --pw: 152px; width: var(--pw); aspect-ratio: 725/1055; position: relative; margin: auto auto 0; filter: drop-shadow(0 10px 18px rgba(5,10,20,.35)); }
.umbra-museo .scene-box { position: absolute; left: 9.655%; top: 12.038%; width: 79.448%; height: 79.621%; overflow: hidden; transform: translateZ(0); }
.umbra-museo .sc-fondo { position: absolute; inset: -2%; background: url(../img/umbra/sc-fondo.jpg) center/100% 100% no-repeat; }
.umbra-museo .sc-patch { position: absolute; left: 0; right: 0; top: 0; height: 43%; background: linear-gradient(180deg,#030C15 0%,#01070E 8.6%,#050F19 13.3%,#041424 21%,#051626 25.7%,#07182A 29.5%,#072034 33.3%,#09233C 37.1%,#0A2542 43%); -webkit-mask-image: linear-gradient(180deg,#000 83%,rgba(0,0,0,0) 88.5%); mask-image: linear-gradient(180deg,#000 83%,rgba(0,0,0,0) 88.5%); }
.umbra-museo .sc-patch2 { position: absolute; left: 0; right: 0; top: 0; height: 43%; background: linear-gradient(180deg,#060E16 0%,#040C16 14%,#050F19 28%,#051320 42%,#051626 56%,#081A2C 70%,#0A2138 84%,#0F2A42 95%,#0F2D46 100%); -webkit-mask-image: linear-gradient(180deg,#000 83%,rgba(0,0,0,0) 88.5%); mask-image: linear-gradient(180deg,#000 83%,rgba(0,0,0,0) 88.5%); }
.umbra-museo .sc-shade { position: absolute; inset: 0; background: radial-gradient(130% 80% at 50% 14%,#01050D 0%,rgba(1,5,13,.85) 55%,rgba(1,5,13,.4) 100%); opacity: 0; }
.umbra-museo .sc-night { position: absolute; inset: 0; z-index: 1; opacity: 0; background: linear-gradient(180deg,rgba(7,22,38,0) 0%,rgba(7,22,38,0) 30%,rgba(7,22,38,.32) 46%,rgba(8,23,40,.66) 62%,rgba(9,22,38,.80) 100%); }
.umbra-museo .sc-rim { position: absolute; inset: 0; z-index: 1; opacity: 0; border-radius: 26px; box-shadow: inset 0 0 0 5px rgba(9,22,38,.95), inset 0 0 18px 9px rgba(9,22,38,.8); }
.umbra-museo .sc-stars, .umbra-museo .sc-stars2 { position: absolute; inset: 0; opacity: 0; }
.umbra-museo .sc-stars { z-index: 3; } .umbra-museo .sc-stars2 { z-index: 2; }
.umbra-museo .sc-stars i, .umbra-museo .sc-stars2 i { position: absolute; width: 1.2px; height: 1.2px; border-radius: 50%; background: #EDEAF7; }
.umbra-museo .sc-venus { position: absolute; left: 75%; top: 33.5%; width: 3px; height: 3px; border-radius: 50%; background: #F6F3FF; box-shadow: 0 0 4px 1.5px rgba(242,238,255,.85); opacity: 0; z-index: 3; }
.umbra-museo .sc-sun { position: absolute; width: 31.5%; aspect-ratio: 1; border-radius: 50%; left: 41.15%; top: 12.3%; z-index: 2; background: radial-gradient(circle,#FFF6DC 0%,#FFD98A 55%,#F6A83C 100%); box-shadow: 0 0 20px 7px rgba(246,168,60,.75), 0 0 52px 17px rgba(246,168,60,.35); }
.umbra-museo .sc-moon { position: absolute; width: 33%; aspect-ratio: 1; border-radius: 50%; background: rgba(11,18,28,0); left: 3%; top: 11.8%; z-index: 4; }
.umbra-museo .sc-moon.corona { box-shadow: 0 0 0 1px rgba(255,227,168,.95), 0 0 14px 5px rgba(255,215,140,.85), 0 0 42px 15px rgba(246,168,60,.45); }
.umbra-museo .sc-d { position: absolute; width: 70%; aspect-ratio: 1; top: 0.5%; right: -34%; opacity: 0; transform: scale(.25); transition: opacity .4s, transform .4s; pointer-events: none; }
.umbra-museo .sc-moon.total .sc-d { opacity: 1; transform: scale(1); }
.umbra-museo .sc-d i { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: block; }
.umbra-museo .sc-d .h2x { width: 110%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(248,150,60,.42) 0%,rgba(248,150,60,.16) 48%,rgba(248,150,60,0) 74%); }
.umbra-museo .sc-d .h1x { width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(255,214,140,.9) 0%,rgba(252,180,90,.5) 52%,rgba(252,180,90,0) 80%); }
.umbra-museo .sc-d .rh { width: 96%; height: 1.6px; background: linear-gradient(90deg,transparent,rgba(255,205,130,.55) 30%,#FFF6E2 50%,rgba(255,205,130,.55) 70%,transparent); }
.umbra-museo .sc-d .rv { height: 96%; width: 1.6px; background: linear-gradient(180deg,transparent,rgba(255,205,130,.5) 30%,#FFF6E2 50%,rgba(255,205,130,.5) 70%,transparent); }
.umbra-museo .sc-d .r1, .umbra-museo .sc-d .r2 { width: 1.3px; height: 70%; background: linear-gradient(180deg,transparent,rgba(255,215,150,.55) 40%,rgba(255,240,215,.8) 50%,rgba(255,215,150,.55) 60%,transparent); }
.umbra-museo .sc-d .r1 { transform: translate(-50%,-50%) rotate(45deg); }
.umbra-museo .sc-d .r2 { transform: translate(-50%,-50%) rotate(-45deg); }
.umbra-museo .sc-d .core { width: 20%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#FFFEF9 0%,#FFEFCB 55%,rgba(241,175,81,.6) 78%,rgba(241,175,81,0) 100%); box-shadow: 0 0 9px 3px rgba(255,240,210,.9); }
.umbra-museo .sc-frame { position: absolute; left: 0; top: -0.19%; width: 100.138%; height: 100.379%; z-index: 5; pointer-events: none; background: url(../img/umbra/sc-frame.png) center/100% 100% no-repeat; }
.umbra-museo .bignum { font-family: var(--mono); font-weight: 500; font-size: 42px; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.umbra-museo input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: none; cursor: pointer; margin: 0; }
.umbra-museo input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg,#06080F 0%,#12253E 22%,#2E5077 42%,#96603F 62%,#E0722E 82%,#FF8E2E 100%); box-shadow: inset 0 0 0 .5px rgba(196,162,83,.35); }
.umbra-museo input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -16px; border: none; background: url(../img/umbra/sc-thumb.png) center/contain no-repeat; filter: drop-shadow(0 3px 6px rgba(5,10,20,.4)); }
.umbra-museo input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg,#06080F 0%,#12253E 22%,#2E5077 42%,#96603F 62%,#E0722E 82%,#FF8E2E 100%); box-shadow: inset 0 0 0 .5px rgba(196,162,83,.35); }
.umbra-museo input[type=range]::-moz-range-thumb { width: 38px; height: 38px; border: none; border-radius: 0; background: url(../img/umbra/sc-thumb.png) center/contain no-repeat; }
.umbra-museo .slider-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ink-soft); }
.umbra-museo .slider-ends span:last-child { margin-right: -.12em; }

/* ---- RECUERDO (después de la totalidad) ---- */
.umbra-museo .um-recall { display: flex; flex-direction: column; gap: 11px; width: 100%; margin: auto 0; }
.umbra-museo .um-recall-field { min-height: 92px; border: 1px solid var(--gold-line); border-radius: 14px; background: var(--card); padding: 14px 15px; font-size: 13.5px; line-height: 1.5; color: var(--ink); box-shadow: inset 0 1px 3px rgba(30,42,68,.05); }
.umbra-museo .um-voice { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1px solid var(--gold-line); border-radius: 999px; padding: 12px; cursor: default; }
.umbra-museo .um-voice svg { width: 15px; height: 15px; color: var(--gold); }

/* ==========================================================================
   Rejilla de demos (dos iPhones simétricos) + placa
   ========================================================================== */
.umbra-demos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: start; margin-top: 42px; }
@media (max-width: 720px) { .umbra-demos { grid-template-columns: 1fr; gap: 40px; max-width: 320px; margin-inline: auto; } }
.umbra-demo { display: flex; flex-direction: column; align-items: center; }
.umbra-demo-cap { font-family: "B612 Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cian); margin: 28px 0 4px; text-align: center; }
.umbra-demo-cap small { display: block; color: var(--gris); letter-spacing: .1em; margin-top: 5px; }

/* Qué estudiamos · bloques texto+componente (rediseño 02-ago) */
.umbra-demos:has(.umbra-demo--estudio) { align-items: stretch; }
.umbra-demo--estudio { padding: clamp(24px, 3.4vw, 38px) clamp(20px, 3vw, 34px) clamp(20px, 2.6vw, 30px); border-radius: 22px; }
.umbra-estudio-copy { flex: 1 0 auto; margin-bottom: clamp(22px, 3vw, 30px); }
.umbra-estudio-copy h3 { font-size: clamp(19px, 1.8vw, 22px); font-weight: 620; margin: 0 0 12px; }
.umbra-estudio-copy p { font-size: 16px; line-height: 1.7; color: var(--gris); margin: 0; }
.umbra-estudio-copy p strong { color: var(--blanco); font-weight: 600; }
.umbra-estudio-cierre { margin: 44px auto 0; text-align: center; }
@media (max-width: 720px) { .umbra-demos:has(.umbra-demo--estudio) { max-width: 460px; } }

/* Punto y aparte con aire: párrafos seguidos respiran (lectura) */
.umbra-lead + .umbra-lead, .umbra-intro + .umbra-intro { margin-top: 1.5em; }

/* ==========================================================================
   Momentos (tres iPhones simétricos con capturas en acción)
   ========================================================================== */
.umbra-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: 42px; }
@media (max-width: 820px) { .umbra-moments { grid-template-columns: 1fr; gap: 44px; max-width: 300px; margin-inline: auto; } }
.umbra-moment { text-align: center; }
.umbra-moment .iphone { margin-bottom: 8px; }
.umbra-moment-tag { font-family: "B612 Mono", monospace; font-size: 11px; line-height: 1.7; letter-spacing: .18em; text-transform: uppercase; color: var(--cian); margin: 40px 0 14px; }
.umbra-moment h3 { font-size: 18px; font-weight: 560; margin: 0 0 10px; }
.umbra-moment h3 + p { font-size: 14px; line-height: 1.65; color: var(--gris); margin: 0 auto; max-width: 30ch; }
.umbra-moment--during .umbra-moment-tag { color: var(--ambar); }

/* ==========================================================================
   Scrollytelling: el eclipse al hacer scroll revela el iPhone con la app
   ========================================================================== */
.umbra-reveal { position: relative; }
.ur-stage { position: relative; height: 100vh; min-height: 620px; overflow: hidden; display: grid; place-items: center; }
.ur-sky { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 44%, #0a1c3e 0%, #061127 46%, #030812 100%); }
.ur-scene { position: relative; width: min(78vw, 440px); aspect-ratio: 1; }
.ur-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,150,.5) 0%, rgba(255,190,110,.16) 34%, rgba(255,190,110,0) 62%); }
.ur-sun { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, #FFF6DC 0%, #FFD98A 52%, #F6A83C 100%); box-shadow: 0 0 60px 20px rgba(246,168,60,.5); }
.ur-moon { position: absolute; inset: 12%; border-radius: 50%; background: #05070d; transform: translateX(-84%); box-shadow: 0 0 0 1px rgba(255,227,168,0); }
.ur-corona { position: absolute; inset: 12%; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 2px rgba(255,232,180,.95), 0 0 26px 10px rgba(255,214,140,.8), 0 0 80px 30px rgba(246,168,60,.4); }
.ur-phone { position: absolute; left: 50%; top: 50%; width: 318px; max-width: 82vw; margin: -330px 0 0 -159px; opacity: 0; transform: scale(0.2); z-index: 4; }

/* Titular del hero: aparece DENTRO del escenario cuando el móvil se aparta. */
.ur-copy { position: absolute; opacity: 0; z-index: 5; }
.ur-copy .page-title { font-size: clamp(32px, 3.7vw, 50px); font-weight: 550; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 18px; color: #F4F7FB; }
.ur-copy .umbra-lead { color: rgba(244, 247, 251, 0.9); font-size: clamp(16px, 1.55vw, 19px); }
/* escritorio: titular + móvil forman un PAR centrado en pantalla, juntos.
   right:50% ancla el bloque de texto contra el centro; el móvil se desplaza
   256 px a la derecha (JS) → separación fija de ~72 px, par centrado. */
@media (min-width: 960px) {
  .ur-copy { top: 50%; right: 50%; margin-right: -25px; width: min(40%, 440px); text-align: left; }
  .ur-copy .section-kicker { margin-bottom: 18px; }
}
/* móvil: el móvil sube y el titular entra por abajo — A LA IZQUIERDA como el
   resto de la página (orden de Jesús 02-ago; antes iba centrado) */
@media (max-width: 959px) {
  .ur-copy { left: 0; right: 0; bottom: clamp(24px, 6vh, 60px); padding: 0 8vw; text-align: left; }
}
/* pantallas bajitas (SE y similares): titular un punto menor para que el móvil
   y el texto respiren — sin esto, el fit del JS toca suelo y se solapan */
@media (max-width: 959px) and (max-height: 700px) {
  .ur-copy .page-title { font-size: 26px; margin-bottom: 12px; }
  .ur-copy .umbra-lead { font-size: 15px; }
  .ur-copy .section-kicker { margin-bottom: 10px; }
}
@media (max-width: 959px) {
  .ur-phone { width: min(78vw, 288px); max-width: none; margin-left: calc(min(78vw, 288px) / -2); margin-top: calc(min(78vw, 288px) * -1.038); }
}

/* «Cómo empezar»: teléfono de portada + tarjeta de embarque */
.umbra-start { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 38px; }
@media (max-width: 700px) { .umbra-start { grid-template-columns: 1fr; justify-items: center; gap: 34px; } .umbra-start .umbra-board { margin-top: 0; } }

/* marca de la app: logo CORONA (lockup horizontal, variante clara) → ruta
   punteada → Airbus de Iberia, enteros y a plena opacidad */
.umbra-plane-band { display: flex; align-items: center; gap: clamp(18px, 3vw, 30px); margin-top: clamp(52px, 8vh, 92px); }
.upb-lockup { flex: none; width: clamp(190px, 24vw, 300px); height: auto; display: block; }
.upb-route { flex: 1; border-top: 1px dashed rgba(244, 247, 251, 0.28); }
.upb-plane { flex: none; width: clamp(250px, 34vw, 450px); height: auto; display: block; filter: drop-shadow(0 18px 28px rgba(2, 6, 18, 0.55)); }
@media (max-width: 560px) { .umbra-plane-band { flex-direction: column; gap: 26px; } .upb-route { display: none; } .upb-lockup { width: min(64vw, 250px); } .upb-plane { width: 62vw; } }
/* emblema de la app en la cabecera de la tarjeta de embarque, sobre disco
   crema (el emblema es azul marino: sin disco desaparece sobre la tarjeta) */
.umbra-board-brand { display: inline-flex; align-items: center; gap: 10px; }
.umbra-board-brand img { width: 26px; height: 26px; object-fit: contain; display: block; background: #FEFAF1; border-radius: 50%; padding: 3px; box-sizing: content-box; }

/* ==========================================================================
   CÓMO EMPEZAR · tarjeta de embarque (guiño aeropuerto)
   ========================================================================== */
.umbra-board {
  position: relative; margin: 40px auto 0; max-width: 560px;
  display: grid; grid-template-columns: 1fr auto;
  background: linear-gradient(135deg, #0b1d3e, #071630);
  border: 1px solid rgba(55, 200, 232, 0.28); border-radius: 16px; overflow: hidden;
  box-shadow: 0 34px 66px -38px rgba(2, 6, 18, 0.8);
}
.umbra-board-main { padding: 26px 30px; }
.umbra-board-head { display: flex; justify-content: space-between; align-items: center; font-family: "B612 Mono", monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cian); padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px dashed rgba(244, 247, 251, 0.16); }
.umbra-board-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 16px 30px; }
.umbra-board-field .k { font-family: "B612 Mono", monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: 0 0 4px; }
.umbra-board-field .v { font-size: 15px; color: var(--blanco); margin: 0; }
.umbra-board-note { font-size: 13px; line-height: 1.55; color: var(--gris); margin: 20px 0 22px; max-width: 46ch; }
/* talón perforado con código de barras */
.umbra-board-stub {
  position: relative; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 22px 14px; border-left: 1px dashed rgba(244, 247, 251, 0.22);
  background: rgba(255, 255, 255, 0.02);
}
.umbra-board-stub::before, .umbra-board-stub::after { content: ""; position: absolute; left: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--azul-noche); }
.umbra-board-stub::before { top: -7px; } .umbra-board-stub::after { bottom: -7px; }
.umbra-board-barcode { width: 30px; flex: 1; min-height: 90px; background: repeating-linear-gradient(180deg, #cdd6e4 0 2px, transparent 2px 4px, #cdd6e4 4px 5px, transparent 5px 9px); border-radius: 2px; }
.umbra-board-seat { font-family: "B612 Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--gris); writing-mode: vertical-rl; }
@media (max-width: 560px) {
  .umbra-board { grid-template-columns: 1fr; }
  .umbra-board-grid { grid-template-columns: repeat(2, auto); }
  .umbra-board-stub { width: auto; flex-direction: row; border-left: 0; border-top: 1px dashed rgba(244, 247, 251, 0.22); padding: 16px; }
  .umbra-board-barcode { min-height: 0; height: 34px; width: 100%; flex: 1; background: repeating-linear-gradient(90deg, #cdd6e4 0 2px, transparent 2px 4px, #cdd6e4 4px 5px, transparent 5px 9px); }
  .umbra-board-seat { writing-mode: horizontal-tb; }
  .umbra-board-stub::before { top: -7px; left: 50%; margin-left: -6px; }
  .umbra-board-stub::after { bottom: auto; top: -7px; left: auto; right: 50%; margin-right: -6px; }
}
/* sin motion (o sin GSAP): el escenario queda estático y legible, en columna,
   con el iPhone arriba y el titular debajo, centrados. */
.no-umbra-scenes .ur-stage { height: auto; min-height: 0; padding: clamp(60px,10vh,120px) 0; display: flex; flex-direction: column; align-items: center; }
.no-umbra-scenes .ur-scene { display: none; }
.no-umbra-scenes .ur-phone { position: static; width: 300px; max-width: 78vw; margin: 0 auto; transform: none; opacity: 1; }
.no-umbra-scenes .ur-copy { position: static; opacity: 1; margin: 52px auto 0; width: auto; max-width: 620px; padding: 0 6vw; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .ur-stage { height: auto; min-height: 0; padding: clamp(60px,10vh,120px) 0; display: flex; flex-direction: column; align-items: center; }
  .ur-scene { display: none; }
  .ur-phone { position: static; width: 300px; max-width: 78vw; margin: 0 auto; transform: none; opacity: 1; }
  .ur-copy { position: static; opacity: 1; margin: 52px auto 0; width: auto; max-width: 620px; padding: 0 6vw; text-align: left; }
}

/* ==========================================================================
   CORONA · TIERRA (v90) — reseña de la línea de tierra del experimento.
   Panel contenido y teléfono a escala 0,685 → jerarquía menor que la app
   de vuelo, a propósito (la web trata la experiencia en vuelo).
   ========================================================================== */
.umbra-tierra { display: grid; grid-template-columns: 1fr 200px; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 44px); margin-top: 8px; }
.umbra-tierra-copy h2 { font-size: 24px; font-weight: 620; margin: 10px 0 14px; }
.umbra-tierra-copy p { font-size: 15px; line-height: 1.7; color: var(--gris); max-width: 56ch; margin: 0 0 12px; }
.umbra-tierra-copy p strong { color: var(--blanco); font-weight: 600; }
.umbra-tierra-note { font-family: "B612 Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.umbra-tierra-phone .iphone { max-width: 200px; border-radius: 36px; padding: 4px; }
.umbra-tierra-phone .iphone::before { top: 79px; height: 59px; }
.umbra-tierra-phone .iphone::after { top: 105px; height: 38px; }
.umbra-tierra-phone .iphone-screen { border-radius: 32px; -webkit-clip-path: inset(0 round 32px); clip-path: inset(0 round 32px); }
.umbra-tierra-phone .iphone .iphone-screen::before { width: 59px; height: 16px; top: 9px; border-radius: 10px; }
@media (max-width: 720px) {
  .umbra-tierra { grid-template-columns: 1fr; justify-items: start; }
  .umbra-tierra-phone { justify-self: center; }
}