/* Up Corporations — marca 2.0 «Altura»: tokens, firma, logo, intro y rayo.
   Valores de estandares/marca/tokens-marca.json. Claro primero; oscuro por elección. */

:root {
  color-scheme: light;
  --bg: #F7F6F2;            /* fondo */
  --bg-rgb: 247, 246, 242;
  --surface: #FFFFFF;       /* superficie: tarjetas, gráficos y maquetas opacas */
  --bg-2: #EEEDE7;          /* superficie_alta */
  --fg-rgb: 14, 26, 31;
  --text: #0E1A1F;
  --muted: #56616A;         /* texto_secundario, 5,9:1 */
  --faint: #56616A;         /* los títulos inactivos también pasan AA */
  --silver: #56616A;
  --line: #D8D9D3;          /* borde decorativo */
  --control: #7F8789;       /* borde_control, 3:1 */
  --primary: #0F252D;
  --on-primary: #FFFFFF;
  --gold: #84652B;          /* oro_texto: detalles, 5 % de la pantalla o menos */
  --gold-g: #A8803F;        /* oro_grafico: líneas y gráficos */
  --luz: #84652B;           /* animaciones de marca: oro texto en claro, champán en oscuro (condición 1 de A1) */
  --gold-hi: #A8803F;
  --gold-lo: #84652B;
  --focus: #0F252D;
  --brand-bg: #0F252D;      /* fondo_marca */
  --u: #0F252D;             /* símbolo: U */
  --cumbre: #A8803F;        /* símbolo: cumbre */
  --halo: color-mix(in srgb, #A8803F 8%, transparent);
  --tl: rgba(15, 37, 45, .07);
  --shadow-1: 0 1px 1px rgba(14, 26, 31, .08);
  --shadow-2: 0 1px 1px rgba(14, 26, 31, .06), 0 8px 24px -8px rgba(40, 40, 20, .14);
  --shadow-3: 0 2px 4px rgba(14, 26, 31, .06), 0 24px 48px -12px rgba(40, 40, 20, .22);
  --good-soft: #E3EFEA;
  --warn-soft: #F5EEDF;
  --bad-soft: #F6E6E1;

  /* Gráficos: series de la marca; el oro solo para comparar */
  --s1: #0F252D;
  --s2: #A8803F;
  --s3: #4B7282;
  --s4: #A0BDC8;
  --good: #2F6B55;
  --warn: #84652B;
  --bad: #9A4434;
  --info: #2F5F6B;

  --tip-a: rgba(255, 255, 255, .96);
  --tip-b: rgba(255, 255, 255, .96);
  --tip-shadow: rgba(14, 26, 31, .18);

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --fast: 120ms;
  --normal: 220ms;
  --slow: 360ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070B0C;
  --bg-rgb: 7, 11, 12;
  --surface: #10171A;
  --bg-2: #182226;
  --fg-rgb: 236, 235, 229;
  --text: #ECEBE5;
  --muted: #A2ABAF;
  --faint: #A2ABAF;
  --silver: #A2ABAF;
  --line: #2A353A;
  --control: #7F8789;
  --primary: #D4B47A;
  --on-primary: #0B0E0C;
  --gold: #D4B47A;
  --gold-g: #D4B47A;
  --luz: #D4B47A;
  --gold-hi: #D4B47A;
  --gold-lo: #A8875A;
  --focus: #D4B47A;
  --u: #ECEBE5;
  --cumbre: #D4B47A;
  --halo: color-mix(in srgb, #D4B47A 10%, transparent);
  --tl: rgba(247, 246, 242, .07);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --good-soft: #13271F;
  --warn-soft: #2A2417;
  --bad-soft: #2E1B16;
  --s1: #8CC3CB;
  --s2: #D4B47A;
  --s3: #5E979F;
  --s4: #35646B;
  --good: #7CC4A8;
  --warn: #D4B47A;
  --bad: #E3A595;
  --info: #8CC3CB;
  --tip-a: #182226;
  --tip-b: #182226;
  --tip-shadow: rgba(0, 0, 0, .6);
}

/* ---------- Firma Altura: curvas de nivel + un halo, solo en la portada ---------- */
.firma { position: relative; isolation: isolate; }
.firma::after { /* halo: un foco en la esquina superior derecha */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(55% 60% at 96% 4%, var(--halo), transparent 70%);
}
.firma::before { /* curvas de nivel en dos capas, se desvanecen antes del texto */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-radial-gradient(ellipse 130% 95% at 100% 0%, transparent 0 22px, var(--tl) 22px 23px),
    repeating-radial-gradient(ellipse 95% 130% at 100% 0%, transparent 0 34px, var(--tl) 34px 35px);
  -webkit-mask-image: radial-gradient(70% 85% at 100% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 85% at 100% 0%, #000 0%, transparent 78%);
}
/* En oscuro la portada va sobre el azul páramo profundo */
:root[data-theme="dark"] .firma { background: var(--brand-bg); border-bottom: 1px solid var(--line); }
/* En celular el texto ocupa todo el ancho: las curvas se quedan en la esquina, arriba del titular */
@media (max-width: 720px) {
  .firma::before { -webkit-mask-image: radial-gradient(48% 22% at 100% 0%, #000 0%, transparent 100%); mask-image: radial-gradient(48% 22% at 100% 0%, #000 0%, transparent 100%); }
}

/* ---------- Logo 2.0: símbolo plano y nombre en Geist ---------- */
.simbolo { display: block; width: 36px; height: 36px; flex: none; }
.simbolo .u { fill: var(--u); }
.simbolo .c { fill: var(--cumbre); }
.wordmark { display: grid; line-height: 1; }
.wordmark b { font: 600 1.45rem/1 var(--sans); letter-spacing: -.045em; color: var(--text); }
.wordmark i { margin-top: 3px; font: 500 .56rem/1 var(--sans); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--text); }

/* ---------- Intro «rama de progreso»: el símbolo se dibuja y se llena de abajo arriba ---------- */
.intro-screen { display: none; }
.intro .intro-screen {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: 26px;
  background: var(--bg); color: var(--text);
  transition: opacity var(--slow) ease, visibility 0s var(--slow);
}
.intro .intro-screen.out { opacity: 0; visibility: hidden; }
.intro-mark { position: relative; width: clamp(96px, 12vw, 132px); aspect-ratio: 1; }
.intro-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-line path { fill: none; stroke: var(--u); stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .4s cubic-bezier(.6, 0, .3, 1) forwards; }
.intro-line path + path { stroke: var(--cumbre); animation-delay: .25s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.intro-fill { clip-path: inset(100% 0 0 0); animation: rise-fill .4s cubic-bezier(.7, 0, .2, 1) .55s forwards; }
.intro-fill .u { fill: var(--u); }
.intro-fill .c { fill: var(--cumbre); }
@keyframes rise-fill { to { clip-path: inset(0); } }
.intro-bar { position: relative; width: clamp(140px, 16vw, 180px); height: 2px; background: var(--line); overflow: hidden; }
.intro-bar i { position: absolute; inset: 0; background: var(--gold-g); transform-origin: left; transform: scaleX(0); }
.intro-words { display: flex; gap: 12px; font: 500 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.intro-words span { opacity: 0; animation: word-in var(--normal) ease-out forwards; }
.intro-words span:nth-child(1) { animation-delay: .2s; } .intro-words span:nth-child(2) { animation-delay: .5s; } .intro-words span:nth-child(3) { animation-delay: .8s; }
.intro-words span + span::before { content: "·"; margin-right: 12px; }
@keyframes word-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.intro:not(.intro-done) .load { animation-play-state: paused; }
.intro:not(.intro-done) body { overflow: hidden; }

/* ---------- Rayo: una línea de luz recorre el borde bajo la cabecera al pasar de sección ----------
   Solo color de marca (oro gráfico / champán), sin degradados; nunca cruza el texto. */
.rayo { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.rayo i { position: absolute; top: 0; left: 0; width: 28%; height: 100%; background: var(--luz); border-radius: 2px; transform: translateX(-110%); opacity: 0; }
.rayo.go i { animation: rayo .4s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes rayo { 0% { transform: translateX(-110%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(380%); opacity: 0; } }

/* ---------- Firma animada en la portada: una luz recorre las mismas curvas de nivel, una sola vez ----------
   En computador las curvas se dibujan en SVG (debajo de la cabecera) para que la luz siga exactamente las que se ven.
   Excepción a la regla de líneas pedida por E para conservar el «rayo»: una sola pasada, 1 px, 50 % como máximo y en color --luz. Requiere visto bueno de A1. */
.firma-luz { position: absolute; top: 76px; right: 0; z-index: -1; width: min(52vw, 760px); height: auto; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 90% at 100% 0%, #000 0%, transparent 82%); mask-image: radial-gradient(80% 90% at 100% 0%, #000 0%, transparent 82%); }
.firma-luz path { fill: none; stroke: var(--tl); stroke-width: 1; vector-effect: non-scaling-stroke; }
.firma-luz .luz { stroke: var(--luz); stroke-linecap: round; stroke-dasharray: .18 1; stroke-dashoffset: .18; opacity: 0; animation: luz .8s cubic-bezier(.45, 0, .25, 1) forwards; animation-delay: calc(var(--k) * 60ms + 200ms); }
@keyframes luz { 0% { stroke-dashoffset: .18; opacity: 0; } 15% { opacity: .5; } 80% { opacity: .5; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.intro:not(.intro-done) .firma-luz .luz { animation-play-state: paused; }
@media (min-width: 1001px) { .firma::before { display: none; } } /* en computador las curvas las dibuja el SVG */

@media (max-width: 1000px) { .firma-luz { display: none; } } /* en celular el texto ocupa todo el ancho */
@media (prefers-reduced-motion: reduce) {
  .rayo, .firma-luz .luz { display: none; } /* las curvas quietas se quedan */
}