/* =====================================================================
NAVEO · Hoja de estilos
---------------------------------------------------------------------
Escrita a mano, movil primero. Sin Tailwind por CDN.
Por que no Tailwind CDN: esa version compila el CSS en el navegador
de cada visitante, cada vez que entra. En un celular con conexion
mediana eso es medio segundo de pantalla en blanco, y Google lo
penaliza. Este archivo se descarga una vez y queda en cache un ano.
PALETA (la misma del NAVEO original)
carbon #0A0E1A fondo
midnight #111827 superficie
offwhite #F4F4F2 texto
mist #6B7280 texto secundario
plasma #00FF94 acento principal · Carbon
cyan #00E0FF segundo canal · Circular
lilac #A855F7 tercer canal · Readiness
magenta #FF2E93 alertas y faltantes
===================================================================== */
:root{
--carbon:#0A0E1A;
--midnight:#111827;
--surface:#161C29;
--surface-2:#1E2634;
--offwhite:#F4F4F2;
--mist:#6B7280;
--mist-2:#9BA3AE;
--plasma:#00FF94;
--cyan:#00E0FF;
--lilac:#A855F7;
--magenta:#FF2E93;
--amber:#FFB020;
--line:rgba(244,244,242,.09);
--line-2:rgba(244,244,242,.16);
--r-sm:8px; --r:12px; --r-lg:18px;
--sp:16px;
--f-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
--f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
--w:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
margin:0;
background:var(--carbon);
color:var(--offwhite);
font-family:var(--f-body);
/* 16px minimo: por debajo, iOS hace zoom solo al enfocar un campo */
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* Sin overflow-x:hidden en el body a proposito: eso esconde los desbordes
en vez de arreglarlos, y ademas rompe position:sticky en algunos
navegadores. Cada tabla se contiene sola dentro de su .scroll. */
img,svg,video{max-width:100%;height:auto;display:block}
/* --- Fondo con retícula, muy sutil ---------------------------------- */
.grid-bg{
background-image:
radial-gradient(circle at 15% 0%, rgba(0,255,148,.07), transparent 42%),
radial-gradient(circle at 88% 18%, rgba(0,224,255,.05), transparent 48%),
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:auto,auto,48px 48px,48px 48px;
}
/* --- Estructura ------------------------------------------------------ */
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){ .wrap{padding-inline:32px} }
.sec{padding-block:56px}
@media (min-width:768px){ .sec{padding-block:88px} }
.stack{display:flex;flex-direction:column;gap:var(--sp)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
/* --- Tipografía ------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.025em;margin:0;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2rem,7.5vw,3.65rem);line-height:1.04}
h2{font-size:clamp(1.6rem,4.6vw,2.5rem);line-height:1.1}
h3{font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.22}
h4{font-size:1.05rem;line-height:1.3;font-weight:600}
p{margin:0 0 1rem;max-width:68ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.02rem,2.3vw,1.2rem);color:var(--mist-2);line-height:1.62}
.small{font-size:.875rem}
.muted{color:var(--mist)}
.mono{font-family:var(--f-mono)}
strong{font-weight:600;color:var(--offwhite)}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.grad-plasma{
background:linear-gradient(118deg,var(--offwhite) 0%,var(--plasma) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* --- Etiqueta / tag -------------------------------------------------- */
.tag{
display:inline-flex;align-items:center;gap:7px;
padding:5px 12px;border-radius:999px;
border:1px solid rgba(0,255,148,.35);color:var(--plasma);
font-family:var(--f-mono);font-size:11px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;
}
.tag.cy{border-color:rgba(0,224,255,.35);color:var(--cyan)}
.tag.li{border-color:rgba(168,85,247,.38);color:var(--lilac)}
.tag.mg{border-color:rgba(255,46,147,.38);color:var(--magenta)}
/* --- Botones ---------------------------------------------------------
44px de alto minimo: es el area de toque comoda en un celular. */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:46px;padding:12px 22px;border-radius:var(--r-sm);
font-family:var(--f-body);font-size:.95rem;font-weight:600;
border:1px solid transparent;cursor:pointer;text-decoration:none;
transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
line-height:1.2;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--plasma);color:var(--carbon)}
.btn-primary:hover{box-shadow:0 12px 34px -10px rgba(0,255,148,.55);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--offwhite);background:transparent}
.btn-ghost:hover{border-color:var(--plasma);color:var(--plasma)}
.btn-quiet{background:var(--surface-2);color:var(--offwhite);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--line-2)}
.btn-danger{background:transparent;border-color:rgba(255,46,147,.4);color:var(--magenta)}
.btn-danger:hover{background:rgba(255,46,147,.08)}
.btn-sm{min-height:38px;padding:8px 15px;font-size:.85rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
/* --- Tarjetas -------------------------------------------------------- */
.card{
background:var(--midnight);border:1px solid var(--line);
border-radius:var(--r-lg);padding:20px;
}
@media (min-width:768px){ .card{padding:26px} }
.card-hover{transition:border-color .2s,transform .2s}
.card-hover:hover{border-color:rgba(0,255,148,.35);transform:translateY(-2px)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
/* --- Rejillas -------------------------------------------------------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media (min-width:480px){ .g4{grid-template-columns:1fr 1fr} }
@media (min-width:640px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
/* Un hijo de rejilla o de flex NO baja de su ancho minimo de contenido
salvo que se lo digas. Sin esta linea, una palabra larga o un chip sin
corte estira su columna y desborda la pantalla completa en el celular.
Es la causa numero uno de scroll horizontal en moviles. */
.grid > *, .figs > *, .row > *, .between > *, .stack > *{min-width:0}
.card, .panel{min-width:0}
/* Palabras y direcciones largas se cortan en vez de estirar el contenedor */
p, li, td, th, h1, h2, h3, h4, summary, label, figcaption{overflow-wrap:break-word}
a, code, .mono{overflow-wrap:anywhere}
/* --- Cabecera -------------------------------------------------------- */
.top{
position:sticky;top:0;z-index:50;
background:rgba(10,14,26,.86);backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:26px;width:auto}
.brand:hover{text-decoration:none}
.nav-desk{display:none}
@media (min-width:1024px){
.nav-desk{display:flex;align-items:center;gap:26px}
.nav-desk a{color:var(--mist-2);font-size:.92rem;font-weight:500}
.nav-desk a:hover,.nav-desk a[aria-current=page]{color:var(--offwhite);text-decoration:none}
.nav-desk a[aria-current=page]{color:var(--plasma)}
}
.top-cta{display:none}
@media (min-width:1024px){ .top-cta{display:flex;gap:10px;align-items:center} }
.burger{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:var(--r-sm);
background:transparent;border:1px solid var(--line-2);color:var(--offwhite);cursor:pointer;
}
@media (min-width:1024px){ .burger{display:none} }
.burger svg{width:20px;height:20px}
.nav-mob{display:none;border-top:1px solid var(--line);background:var(--carbon)}
.nav-mob.open{display:block}
@media (min-width:1024px){ .nav-mob{display:none!important} }
.nav-mob nav{display:flex;flex-direction:column;padding:12px 0 20px}
.nav-mob nav a{
color:var(--offwhite);padding:13px 4px;font-size:1.02rem;font-weight:500;
border-bottom:1px solid var(--line);
}
.nav-mob nav a:hover{color:var(--plasma);text-decoration:none}
.nav-mob .acciones{display:flex;flex-direction:column;gap:10px;padding:18px 0 8px}
/* --- Hero ------------------------------------------------------------ */
.hero{padding-block:52px 40px}
@media (min-width:768px){ .hero{padding-block:84px 64px} }
.hero h1{margin-bottom:18px}
.hero .lead{max-width:62ch;margin-bottom:26px}
.hero-acciones{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479px){ .hero-acciones .btn{width:100%} }
/* --- Cifras ---------------------------------------------------------- */
.figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:600px){ .figs{grid-template-columns:repeat(3,1fr)} }
.fig{background:var(--midnight);padding:18px}
.fig .v{font-family:var(--f-mono);font-size:1.75rem;font-weight:600;color:var(--plasma);line-height:1.1;font-variant-numeric:tabular-nums}
.fig .v.cy{color:var(--cyan)} .fig .v.li{color:var(--lilac)} .fig .v.mg{color:var(--magenta)}
.fig .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-top:7px}
.fig .s{font-size:.85rem;color:var(--mist-2);margin-top:8px;line-height:1.45}
/* --- Barra de alcances ----------------------------------------------- */
.barra{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--surface-2);margin:14px 0}
.barra span{display:block;height:100%}
.barra .s1{background:var(--plasma)} .barra .s2{background:var(--cyan)} .barra .s3{background:var(--lilac)}
.leyenda{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--mist-2)}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
/* --- Medidor de Readiness -------------------------------------------- */
.medidor{position:relative;height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.medidor span{display:block;height:100%;background:linear-gradient(90deg,var(--lilac),var(--cyan));border-radius:999px}
.medidor.bajo span{background:linear-gradient(90deg,var(--magenta),var(--amber))}
/* --- Chips de estado -------------------------------------------------- */
.chip{
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
padding:3px 9px;border-radius:5px;
font-family:var(--f-mono);font-size:10.5px;font-weight:600;
letter-spacing:.07em;text-transform:uppercase;
}
.chip::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;flex-shrink:0}
.chip.ok {color:var(--plasma); background:rgba(0,255,148,.11)}
.chip.warn{color:var(--amber); background:rgba(255,176,32,.12)}
.chip.bad {color:var(--magenta);background:rgba(255,46,147,.12)}
.chip.mute{color:var(--mist); background:rgba(107,114,128,.16)}
.chip.info{color:var(--cyan); background:rgba(0,224,255,.11)}
/* --- Avisos ----------------------------------------------------------- */
.aviso{
display:flex;gap:12px;align-items:flex-start;
padding:14px 16px;border-radius:var(--r);font-size:.92rem;line-height:1.55;
border:1px solid transparent;
}
.aviso b{display:block;margin-bottom:3px}
.aviso.ok {background:rgba(0,255,148,.08); border-color:rgba(0,255,148,.28); color:#C9FFE6}
.aviso.info {background:rgba(0,224,255,.07); border-color:rgba(0,224,255,.26); color:#C9F4FF}
.aviso.warn {background:rgba(255,176,32,.08);border-color:rgba(255,176,32,.28);color:#FFE7BE}
.aviso.error{background:rgba(255,46,147,.08);border-color:rgba(255,46,147,.30);color:#FFD0E4}
/* --- Formularios ------------------------------------------------------ */
.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.campo label{font-size:.88rem;font-weight:500;color:var(--offwhite)}
.campo .ayuda{font-size:.8rem;color:var(--mist);line-height:1.45}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=url],select,textarea{
width:100%;
/* 16px exactos: evita el zoom automatico de iOS al enfocar */
font-size:16px;
font-family:var(--f-body);
min-height:46px;padding:11px 13px;
background:var(--carbon);color:var(--offwhite);
border:1px solid var(--line-2);border-radius:var(--r-sm);
transition:border-color .15s,box-shadow .15s;
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
select{appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px;
}
input:focus,select:focus,textarea:focus{
outline:none;border-color:var(--plasma);box-shadow:0 0 0 3px rgba(0,255,148,.14);
}
input::placeholder,textarea::placeholder{color:#4B5563}
input[type=number]{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
fieldset{border:none;margin:0;padding:0}
legend{font-family:var(--f-display);font-weight:600;font-size:1.05rem;padding:0;margin-bottom:12px}
/* Selector de calidad del dato */
.calidad{display:flex;gap:6px;flex-wrap:wrap}
.calidad label{
flex:1 1 auto;min-width:76px;
display:flex;align-items:center;justify-content:center;
min-height:40px;padding:7px 10px;cursor:pointer;
border:1px solid var(--line-2);border-radius:var(--r-sm);
font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--mist-2);background:var(--carbon);
transition:all .15s;text-align:center;
}
.calidad input{position:absolute;opacity:0;width:0;height:0}
.calidad input:checked + span,
.calidad label:has(input:checked){border-color:var(--plasma);color:var(--plasma);background:rgba(0,255,148,.09)}
.calidad label:has(input[value=ESTIMADO]:checked){border-color:var(--amber);color:var(--amber);background:rgba(255,176,32,.1)}
.calidad label:has(input[value=NO_DISPONIBLE]:checked){border-color:var(--magenta);color:var(--magenta);background:rgba(255,46,147,.1)}
.calidad label:has(input[value=NO_APLICA]:checked){border-color:var(--line-2);color:var(--mist);background:var(--surface-2)}
.calidad input:focus-visible + span{outline:2px solid var(--plasma);outline-offset:2px}
/* --- Filas de dato de actividad --------------------------------------- */
.dato{
display:grid;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);
grid-template-columns:1fr;
}
.dato:last-child{border-bottom:none}
@media (min-width:860px){
.dato{grid-template-columns:minmax(0,1.5fr) 150px minmax(0,1fr);align-items:start;gap:18px}
}
.dato .nom{font-weight:500;font-size:.95rem}
.dato .met{font-family:var(--f-mono);font-size:11px;color:var(--mist);margin-top:3px;letter-spacing:.04em}
/* --- Tablas ------------------------------------------------------------
Toda tabla va dentro de .scroll para que la PAGINA nunca se mueva
de lado en el celular; se mueve solo la tabla. */
/* position:relative es obligatorio: sin el, un hijo con position:absolute
(como el oculto para lectores de pantalla) se posiciona respecto
de la pagina, escapa del recorte y desborda la pantalla en el celular. */
.scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--midnight)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--mist);font-weight:500;background:var(--surface);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.n,th.n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* --- Layout de la app -------------------------------------------------- */
.app-shell{display:block}
@media (min-width:1024px){
.app-shell{display:grid;grid-template-columns:224px minmax(0,1fr);gap:0;min-height:100vh}
}
.app-side{display:none}
@media (min-width:1024px){
.app-side{
display:block;border-right:1px solid var(--line);background:var(--midnight);
padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.app-side nav{display:flex;flex-direction:column;gap:3px;margin-top:22px}
.app-side nav a{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);
color:var(--mist-2);font-size:.92rem;font-weight:500;
}
.app-side nav a:hover{background:var(--surface-2);color:var(--offwhite);text-decoration:none}
.app-side nav a[aria-current=page]{background:rgba(0,255,148,.1);color:var(--plasma)}
}
.app-main{padding:24px 20px 64px;min-width:0}
@media (min-width:768px){ .app-main{padding:32px 32px 80px} }
/* Barra inferior en movil */
.app-tabs{
position:fixed;bottom:0;left:0;right:0;z-index:60;
display:grid;grid-template-columns:repeat(4,1fr);
background:rgba(17,24,39,.97);backdrop-filter:blur(12px);
border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:1024px){ .app-tabs{display:none} }
.app-tabs a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-height:56px;color:var(--mist);font-size:10.5px;font-weight:500;
font-family:var(--f-mono);letter-spacing:.05em;text-transform:uppercase;
}
.app-tabs a:hover{text-decoration:none}
.app-tabs a[aria-current=page]{color:var(--plasma)}
.app-tabs svg{width:20px;height:20px}
body.tiene-tabs .app-main{padding-bottom:88px}
@media (min-width:1024px){ body.tiene-tabs .app-main{padding-bottom:80px} }
/* --- Barra de acciones fija --------------------------------------------
Delgada a proposito. Una barra alta tapa los primeros campos del
formulario al abrirlo en el celular y hace que parezca vacio. */
.barra-acciones{
position:sticky; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:20;
display:flex; gap:10px; flex-wrap:wrap;
padding:10px; margin-top:20px;
background:rgba(17,24,39,.96); backdrop-filter:blur(12px);
border:1px solid var(--line); border-radius:var(--r);
}
.barra-acciones .btn{flex:1 1 auto}
@media (min-width:1024px){
.barra-acciones{bottom:16px}
.barra-acciones .btn{flex:0 0 auto}
}
/* --- Pasos del formulario ---------------------------------------------- */
.pasos{display:flex;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.paso{
flex:1 1 0;min-width:56px;height:4px;border-radius:999px;background:var(--surface-2);
}
.paso.hecho{background:var(--plasma)}
.paso.actual{background:linear-gradient(90deg,var(--plasma) 50%,var(--surface-2) 50%)}
.pasos-txt{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
/* --- Pie --------------------------------------------------------------- */
.pie{border-top:1px solid var(--line);padding-block:40px 48px;margin-top:40px}
.pie-cols{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:640px){ .pie-cols{grid-template-columns:1.4fr 1fr 1fr} }
.pie h5{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin:0 0 12px;font-weight:500}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pie ul a{color:var(--mist-2);font-size:.9rem}
.pie ul a:hover{color:var(--offwhite)}
.pie-legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--mist);line-height:1.6}
/* --- Detalles / acordeon ------------------------------------------------ */
details{border:1px solid var(--line);border-radius:var(--r);background:var(--midnight);margin-bottom:10px}
details summary{
cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;
display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:52px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--f-mono);color:var(--plasma);font-size:1.2rem;flex-shrink:0}
details[open] summary::after{content:"−"}
details .cuerpo{padding:0 18px 18px;color:var(--mist-2)}
/* --- Lista con check ---------------------------------------------------- */
.check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.check li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;line-height:1.5}
.check li::before{
content:"";flex-shrink:0;width:17px;height:17px;margin-top:3px;background:var(--plasma);
-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;
mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;
}
.check.cy li::before{background:var(--cyan)}
.check.li li::before{background:var(--lilac)}
/* --- Accesibilidad ------------------------------------------------------ */
:focus-visible{outline:2px solid var(--plasma);outline-offset:2px;border-radius:3px}
.saltar{
position:absolute;left:-9999px;top:0;background:var(--plasma);color:var(--carbon);
padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;z-index:100;
}
.saltar:focus{left:0;text-decoration:none}
.solo-lectores{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
white-space:nowrap;border:0;
}
/* --- Utilidades --------------------------------------------------------- */
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);border:none;margin:32px 0}
.centro{text-align:center}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.txt-plasma{color:var(--plasma)}.txt-cyan{color:var(--cyan)}
.txt-lilac{color:var(--lilac)}.txt-magenta{color:var(--magenta)}