/* ULTRA MX 2026 · capa de marca compartida
 *
 * El sitio operativo viste como el sitio público de Ultra Worldwide:
 * fondo negro, blanco y grises, cabecera fija translúcida, menú en
 * mayúsculas con tracking, sidebar de secciones y filetes con degradado.
 *
 * Tipografías (Google Fonts, equivalentes a las comerciales del sitio público):
 *   Chakra Petch  ·  cuerpo, menú y datos  (en lugar de FoundryGridnik)
 *   Josefin Sans  ·  titulares y wordmark  (en lugar de Neutraface)
 *
 * Los estados de operación conservan color: --good verde, --crit rojo,
 * --warn ámbar. La marca es blanco sobre negro: --mark es blanco.
 */

:root{
  --paper:#000;
  --raise:#121316;
  --field:#0c0d0f;
  --ink:#fff;
  --soft:#9aa0a6;
  --faint:#62666b;
  --rule:#2b2e32;
  --rule2:#1a1c1f;
  --mark:#fff;            /* acento de marca: blanco */
  --gold:#fff;            /* alias histórico, ahora blanco */
  --warn:#e8b45a;         /* estado: atención */
  --good:#5ec07f;         /* estado: bien */
  --crit:#ff5a6e;         /* estado: crítico */
  --hdr:64px;             /* alto de la cabecera fija */
  --body:'Chakra Petch','Trebuchet MS',sans-serif;
  --disp:'Josefin Sans','Century Gothic',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:15.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(255,255,255,.25)}

/* ---------- filete con degradado, firma del sitio público ---------- */
.uaccent{
  display:block;height:1px;border:0;width:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,#fff 50%,rgba(255,255,255,0) 100%);
}
.uaccent.left{background:linear-gradient(90deg,#fff 0,rgba(255,255,255,0) 100%)}

/* ---------- cabecera fija ---------- */
.uhd{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--hdr);
  background:linear-gradient(to bottom right,rgba(0,0,0,.92),rgba(0,0,0,.78));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule2);
}
.uhd-in{
  max-width:1200px;height:100%;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.uhd::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
}
.unav{display:flex;align-items:center;gap:4px}
.unav a{
  font-family:var(--body);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft);text-decoration:none;padding:9px 13px;
  transition:color .2s,background .2s;
}
.unav a:hover{color:var(--ink)}
.unav a.on{color:var(--ink);background:#1e2023}
@media(max-width:640px){
  .unav a{padding:8px 7px;letter-spacing:.12em;font-size:10px}
  .uhd-in{padding:0 12px}
}

/* ---------- marca ---------- */
.umark{display:inline-flex;align-items:center;gap:0;text-decoration:none;color:inherit}
.umark img{height:var(--umh,26px);width:auto;display:block}
.umark .type{
  font-family:var(--disp);font-weight:700;letter-spacing:.06em;
  font-size:var(--umt,15px);line-height:1;text-transform:uppercase;white-space:nowrap;
}
.umark .type i{font-style:normal;color:var(--faint)}

/* ---------- sidebar de secciones ---------- */
.uside{
  position:fixed;top:var(--hdr);left:0;bottom:0;z-index:110;width:212px;
  padding:34px 0 30px 26px;display:none;
}
@media(min-width:1280px){.uside{display:block}}
.uside::before{
  content:'';position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
}
.uside .k{
  display:block;font-size:10px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--faint);margin-bottom:16px;
}
.uside a{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 14px 11px 0;text-decoration:none;color:var(--soft);
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--rule2);transition:color .2s,padding-left .2s;
}
.uside a .n{font-size:9.5px;color:var(--faint);letter-spacing:.1em}
.uside a:hover{color:var(--ink);padding-left:6px}
.uside a.on{color:var(--ink)}
.uside a.on .n{color:var(--ink)}

/* ---------- lienzo de página ---------- */
.upage{padding-top:var(--hdr)}
.sheet{max-width:980px;margin:0 auto;padding:0 26px}
@media(min-width:1280px){.sheet{margin-left:calc(212px + (100% - 212px - 980px)/2)}}
@media(min-width:1600px){.sheet{margin:0 auto}}

/* ---------- hero centrado, como la portada pública ---------- */
.uhero{text-align:center;padding:64px 0 30px}
.uhero .biglogo{height:clamp(52px,9vw,96px);width:auto;margin:0 auto 26px;display:inline-block}
.uhero h1{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,44px);line-height:1.1;letter-spacing:.08em;
}
.uhero h1 .yr{display:block;color:var(--faint);font-weight:300;letter-spacing:.3em;
  font-size:clamp(13px,1.8vw,18px);margin-top:10px}
.uhero .where{
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--soft);margin-top:18px;
}
.uhero .uaccent{max-width:520px;margin:30px auto 0}

/* ---------- encabezados de sección ---------- */
.band{padding:0 0 84px}
.band>.uaccent{margin-bottom:14px}
.rh{
  display:flex;justify-content:space-between;align-items:baseline;padding:0 0 44px;
  font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);
}
.rh .sig{color:var(--faint)}

h2{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(23px,3.4vw,36px);line-height:1.18;letter-spacing:.045em;
  max-width:28ch;margin-bottom:26px;
}
h2 i{font-style:normal;color:var(--soft);font-weight:300}
h3{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.9vw,19px);line-height:1.3;letter-spacing:.07em;
}

.lead{font-size:17px;font-weight:300;line-height:1.7;max-width:60ch}
.lead b{font-weight:600}
p.txt{font-size:15px;line-height:1.75;max-width:60ch;color:var(--soft);margin-top:15px}
p.txt b{color:var(--ink);font-weight:500}
.num{font-size:.95em;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
code{font-family:var(--body);font-size:.88em;background:var(--rule2);padding:2px 6px;white-space:nowrap;color:var(--ink)}

.pull{
  font-family:var(--disp);font-weight:300;text-transform:uppercase;
  font-size:clamp(16px,2.2vw,22px);line-height:1.5;letter-spacing:.08em;
  max-width:44ch;margin-top:44px;padding-left:24px;border-left:2px solid var(--ink);
}

.note{
  font-size:12.5px;line-height:1.85;color:var(--soft);
  border:1px dashed var(--rule);padding:18px 20px;margin-top:42px;
}
.note b{color:var(--ink);font-weight:500}
.note .k{color:var(--ink);letter-spacing:.2em;text-transform:uppercase;font-size:10px;
  font-weight:500;display:block;margin-bottom:9px}
.note a{color:var(--ink)}

/* ---------- tablas ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:40px}
.tbl thead th{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:0 16px 11px 0;border-bottom:1px solid var(--ink);
}
.tbl thead th.n{text-align:right}
.tbl td{padding:15px 16px 15px 0;border-bottom:1px solid var(--rule2);vertical-align:top;
  font-size:14.5px;line-height:1.5}
.tbl td.n{text-align:right;font-size:13.5px;font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr:hover td{background:rgba(255,255,255,.045)}
.tbl tr.tot td{border-top:1px solid var(--ink);border-bottom:none;font-weight:600;padding-top:16px}
.tbl .soft{color:var(--soft)}
.tbl .w{color:var(--warn)}
.tbl .c{color:var(--crit)}
.tbl .ok{color:var(--good)}
.tbl .who{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--soft);white-space:nowrap}
.tbl caption{caption-side:bottom;text-align:left;font-size:13px;
  color:var(--soft);padding-top:14px;max-width:70ch;line-height:1.6}
.tbl caption a{color:var(--ink)}
@media(max-width:760px){.tbl td{font-size:13px;padding-right:9px}.tbl td.n,.tbl .who{font-size:11px}}

/* ---------- clock, franja de datos ---------- */
.clock{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(4,1fr);margin:40px 0 0}
.clock.c5{grid-template-columns:repeat(5,1fr)}
.ck{background:var(--paper);padding:20px 18px;text-align:center}
.ck .n{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.7vw,30px);
  line-height:1;letter-spacing:.02em}
.ck .n.w{color:var(--warn)} .ck .n.c{color:var(--crit)}
.ck .l{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);display:block;margin-top:10px;line-height:1.6}
@media(max-width:820px){.clock,.clock.c5{grid-template-columns:repeat(2,1fr)}}

/* ---------- botones ---------- */
.bt{
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;border:1px solid var(--ink);background:none;color:var(--ink);
  padding:13px 22px;cursor:pointer;transition:background .2s,color .2s;
}
.bt:hover{background:var(--ink);color:var(--paper)}
.bt.fill{background:var(--ink);color:var(--paper)}
.bt.fill:hover{background:var(--soft);border-color:var(--soft)}
.bt.thin{border-color:var(--rule);color:var(--soft)}
.bt.thin:hover{background:var(--rule);color:var(--ink)}

/* ---------- campos ---------- */
.fld{margin-top:14px;max-width:60ch}
.fld label{
  font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:7px;
}
textarea,input[type=text],input[type=search],input[type=email]{
  width:100%;font-family:var(--body);font-weight:300;font-size:15px;line-height:1.55;
  color:var(--ink);background:var(--field);border:1px solid var(--rule);border-radius:0;
  padding:11px 13px;resize:vertical;outline:none;transition:border-color .2s;
}
textarea{min-height:46px}
textarea:focus,input:focus{border-color:var(--ink)}
textarea::placeholder,input::placeholder{color:var(--faint)}
.ok{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--good);opacity:0;transition:opacity .3s;display:block;height:13px;margin-top:5px}
.ok.on{opacity:1}

/* ---------- pie ---------- */
.ufoot{margin-top:70px;padding:0 0 60px}
.ufoot .uaccent{margin-bottom:36px}
.ufoot-in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ufoot p{font-size:11px;letter-spacing:.08em;color:var(--soft);line-height:2.1;margin-top:12px}
.ufoot .right{font-size:10.5px;letter-spacing:.1em;color:var(--faint);line-height:2.1;text-align:right}
.ufoot .right b{color:var(--soft);font-weight:500}
.ufoot .right a{color:var(--soft)}
.powered{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.powered a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.powered a:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:760px){
  .sheet{padding:0 18px}
  .ufoot-in{grid-template-columns:1fr;gap:26px}
  .ufoot .right{text-align:left}
}

/* ---------- notas fijadas ---------- */
body.notas section,body.notas [data-nt]{position:relative}
body.notas{padding-bottom:64px}
body.nt-arming{cursor:crosshair}
#ntbar{
  position:fixed;bottom:0;left:0;right:0;z-index:95;
  background:rgba(0,0,0,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-top:1px solid var(--rule);color:var(--ink);
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
#ntbar b{color:var(--ink);font-weight:700}
#ntbar button{
  margin-left:auto;background:var(--ink);color:var(--paper);border:none;padding:10px 18px;
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
}
#ntbar button:hover{background:var(--soft)}
.nt-pin,.pin{
  position:absolute;z-index:60;width:26px;height:26px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);
  font-family:var(--body);font-size:11px;font-weight:600;color:var(--ink);
  cursor:pointer;transform:translate(-50%,-50%);padding:0;
  display:flex;align-items:center;justify-content:center;
}
.nt-pin.lista,.pin.lista{background:var(--raise);color:var(--faint);border-color:var(--rule)}
.pin:hover{background:var(--ink);color:var(--paper)}
#ntform{
  position:fixed;bottom:0;left:0;right:0;z-index:96;background:var(--paper);
  border-top:2px solid var(--ink);padding:18px;display:none;flex-direction:column;gap:10px;
  max-width:660px;margin:0 auto;
}
#ntform input,#ntform textarea{
  border:1px solid var(--ink);border-radius:0;padding:12px;width:100%;
  background:var(--field);font-family:var(--body);font-size:14px;color:var(--ink);outline:none;
}
#ntform textarea{min-height:92px;font-size:15px;resize:vertical;margin:0}
#ntform .row{display:flex;gap:10px}
#ntform button{
  border:1px solid var(--ink);background:none;padding:12px 20px;
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;color:var(--ink);
}
#ntform button.save{background:var(--ink);color:var(--paper)}
#ntyo{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
#ntyo b{color:var(--ink);font-weight:600}
#ntyo button{border:none;background:none;color:var(--ink);padding:0 0 0 6px;
  font-family:var(--body);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:underline;cursor:pointer}
#ntpop{
  position:fixed;z-index:97;background:var(--raise);color:var(--ink);
  max-width:330px;padding:16px 18px;font-size:14px;line-height:1.55;display:none;
  border:1px solid var(--rule);
}
#ntpop .a{font-size:10px;font-weight:500;color:var(--soft);
  letter-spacing:.16em;text-transform:uppercase;margin-top:10px}
#ntpop .done{
  margin-top:12px;background:none;border:1px solid var(--soft);color:var(--ink);
  font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 12px;cursor:pointer;
}
#ntpop .done:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

@media print{.uhd,.uside,#ntbar,#ntform,#ntpop,.nt-pin{display:none!important}.upage{padding-top:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}