/* ============================================================
Nivelación y adaptación UV — kit web v1
Universidad de Valparaíso
Autosuficiente: no depende de ningún otro archivo.
Cárgalo, agrega la fuente y ya tienes tokens, base y componentes.
============================================================ */
/* ---------- 1. Fuente ----------
Pega esto en el antes de esta hoja:
En iPhone y Mac manda SF por sistema; Inter Tight es el respaldo enviado. */
:root{
/* — Marca — */
--uv-deep:#003c58; /* principal: fondos grandes, botón primario */
--uv-abyss:#002E38; /* el fondo más oscuro del sistema */
--uv-teal:#06717e; /* acento interactivo: enlaces, seleccionado */
--uv-lime:#b8e412; /* energía: SOLO sobre navy o teal */
/* — Rampa navy — */
--uv-deep-900:#00202f; --uv-deep-800:#002b40; --uv-deep-700:#003049;
--uv-deep-600:#003c58; --uv-deep-500:#0b5074; --uv-deep-400:#2c6d91;
--uv-deep-300:#6b9db5; --uv-deep-200:#aecbd9; --uv-deep-100:#d9e7ee;
--uv-deep-050:#eef4f7;
/* — Rampa teal — */
--uv-teal-700:#044c55; --uv-teal-600:#055c67; --uv-teal-500:#06717e;
--uv-teal-400:#2a8f9b; --uv-teal-300:#6bb6bf; --uv-teal-200:#a9d7dc;
--uv-teal-100:#d7eef0; --uv-teal-050:#edf8f9;
/* — Semánticos — */
--uv-coral:#ff6b57; --uv-coral-soft:#ffe3de;
--uv-sun:#ffb020; --uv-sun-soft:#fff0d1;
--uv-success:#0f9d63; --uv-success-soft:#e2f5ec;
--uv-danger:#e03b2f; --uv-danger-soft:#fdeae8;
/* — Neutros, fríos, virados al navy. Nunca #000, nunca un gris cálido — */
--gray-950:#0b1417; --gray-900:#131e23; --gray-800:#1f2c32; --gray-700:#39494f;
--gray-600:#5b6b72; --gray-500:#7d8d94; --gray-400:#a3b1b7; --gray-300:#c7d1d5;
--gray-200:#e0e7ea; --gray-100:#eff3f5; --gray-050:#f6f8f9; --white:#ffffff;
/* — Superficies — */
--surface-page:#ffffff;
--surface-alt:#f2f5f7; /* secciones alternas */
--surface-card:#ffffff;
--surface-inverse:#002E38;
/* — Texto. La escala termina en --text-faint: no bajes de ahí — */
--text-title:#002E38; --text-body:#1f2c32; --text-muted:#5b6b72;
--text-faint:#7d8d94; --text-inverse:#ffffff; --text-link:#06717e;
/* — Líneas — */
--border-hairline:rgba(0,46,56,.10);
--border-subtle:#e0e7ea;
--border-focus:#2a8f9b;
/* — Gradientes. Máximo UNO por pantalla — */
--grad-brand:linear-gradient(160deg,#005274 0%,#003c58 46%,#002E38 100%);
--grad-teal:linear-gradient(140deg,#0b8b98 0%,#06717e 100%);
--grad-protect:linear-gradient(180deg,rgba(0,32,47,0) 0%,rgba(0,32,47,.62) 100%);
/* — Sombras: siempre viradas al navy, siempre verticales — */
--sh-xs:0 1px 2px rgba(0,46,56,.06);
--sh-sm:0 2px 6px rgba(0,46,56,.07);
--sh-md:0 6px 18px rgba(0,46,56,.10);
--sh-lg:0 14px 34px rgba(0,46,56,.12);
--sh-brand:0 8px 22px rgba(0,60,88,.28);
/* — Radios. Nada es de esquina recta — */
--r-xs:6px; --r-sm:10px; --r-ctl:14px; --r-card:18px; --r-panel:24px; --r-xl:32px; --r-pill:999px;
/* — Espaciado, base 4 — */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
--sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
--gutter:40px; --col:1120px;
/* — Tipografía — */
--font:-apple-system,BlinkMacSystemFont,'Inter Tight',system-ui,sans-serif;
--font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
/* — Movimiento: una sola curva para todo — */
--ease:cubic-bezier(.32,.72,0,1);
--t-press:90ms; --t-hover:160ms; --t-std:240ms; --t-slow:360ms;
/* — Iconos. El acento del pack; cambialo por fondo, no por icono — */
--ic-accent:#06717e;
}
/* Sobre navy. Los componentes de fondo oscuro del kit (--uv-hero, --uv-footer,
.uv-card--brand) ya lo traen puesto: no hace falta marcarlos. Usa el atributo
data-uv-ground="navy" solo cuando pongas tu propia sección sobre navy. */
[data-uv-ground="navy"],.uv-on-navy,.uv-hero,.uv-footer,.uv-card--brand{color:var(--text-inverse);--ic-accent:var(--uv-lime);--text-title:#ffffff;--text-body:rgba(255,255,255,.86);--text-muted:rgba(255,255,255,.66);--text-link:var(--uv-lime)}
/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:400 17px/27px var(--font);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;color:var(--text-title);text-wrap:balance}
p{margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--uv-teal-700)}
[data-uv-ground="navy"] a:hover,.uv-on-navy a:hover,.uv-hero a:hover,.uv-footer a:hover,.uv-card--brand a:hover{color:#d6f56a}
:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px;border-radius:var(--r-xs)}
button{font-family:inherit}
[disabled],.uv-disabled{opacity:.38;pointer-events:none}
::selection{background:var(--uv-teal-100);color:var(--uv-teal-700)}
/* ---------- 3. Tipografía. Escala web: la columna es 1120, no 390 ---------- */
.uv-hero-title{font:800 56px/1.02 var(--font);letter-spacing:-1.6px;color:var(--text-title)}
.uv-title{font:700 34px/1.12 var(--font);letter-spacing:-.8px;color:var(--text-title)}
.uv-section-title{font:700 24px/1.2 var(--font);letter-spacing:-.5px;color:var(--text-title)}
.uv-card-title{font:700 19px/1.2 var(--font);letter-spacing:-.3px;color:var(--text-title)}
.uv-body{font:400 17px/27px var(--font);color:var(--text-body)}
.uv-support{font:500 15px/23px var(--font);color:var(--text-muted)}
.uv-footnote{font:500 13px/20px var(--font);color:var(--text-muted)}
.uv-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--font);letter-spacing:.10em;text-transform:uppercase;color:var(--uv-teal)}
[data-uv-ground="navy"] .uv-eyebrow,.uv-on-navy .uv-eyebrow,.uv-hero .uv-eyebrow,.uv-footer .uv-eyebrow,.uv-card--brand .uv-eyebrow{color:var(--uv-lime)}
.uv-data{font:700 15px/1 var(--font-mono);color:var(--uv-deep)}
/* Casing: frase, siempre. Sin Title Case, sin punto final en botones ni labels. */
/* ---------- 4. Layout ---------- */
.uv-frame{max-width:var(--col);margin-inline:auto;padding-inline:var(--gutter)}
.uv-section{padding-block:var(--sp-20)}
.uv-section--alt{background:var(--surface-alt)}
.uv-sechead{max-width:660px}
.uv-sechead .uv-title{margin-top:14px}
.uv-sechead p{margin-top:12px;font:400 17px/27px var(--font);color:var(--text-muted)}
.uv-grid{display:grid;gap:var(--sp-5)}
.uv-grid--2{grid-template-columns:repeat(2,1fr)}
.uv-grid--3{grid-template-columns:repeat(3,1fr)}
.uv-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.uv-grid--3,.uv-grid--4{grid-template-columns:repeat(2,1fr)}:root{--gutter:24px}}
@media (max-width:600px){.uv-grid--2,.uv-grid--3,.uv-grid--4{grid-template-columns:1fr}.uv-hero-title{font-size:38px;letter-spacing:-1px}.uv-title{font-size:27px;letter-spacing:-.6px}}
/* ---------- 5. Botones. 48px base; 40px compacto; 44px icono ---------- */
.uv-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border:0;border-radius:var(--r-ctl);font:600 16px/1 var(--font);cursor:pointer;text-decoration:none;transition:background var(--t-hover) var(--ease),transform var(--t-press) var(--ease),box-shadow var(--t-hover) var(--ease)}
.uv-btn:active{transform:scale(.965)}
.uv-btn--sm{height:40px;padding:0 16px;font-size:15px;border-radius:12px}
.uv-btn--lg{height:56px;padding:0 28px;font-size:17px}
.uv-btn--block{width:100%}
.uv-btn--primary{background:var(--uv-deep);color:#fff;box-shadow:var(--sh-brand);--ic-accent:#b8e412}
.uv-btn--primary:hover{background:var(--uv-deep-500);color:#fff}
.uv-btn--primary:active{background:var(--uv-deep-800)}
.uv-btn--tonal{background:var(--uv-teal-050);color:var(--uv-teal-700);--ic-accent:#06717e}
.uv-btn--tonal:hover{background:var(--uv-teal-100);color:var(--uv-teal-700)}
.uv-btn--ghost{background:transparent;color:var(--uv-deep);box-shadow:inset 0 0 0 1.5px rgba(0,46,56,.16)}
.uv-btn--ghost:hover{background:rgba(0,60,88,.06);color:var(--uv-deep)}
.uv-btn--lime{background:var(--uv-lime);color:var(--uv-deep-900);--ic-accent:#00202f}
.uv-btn--lime:hover{background:#c9ee3f;color:var(--uv-deep-900)}
.uv-btn--glass{background:rgba(255,255,255,.14);color:#fff;--ic-accent:#b8e412;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.uv-btn--glass:hover{background:rgba(255,255,255,.22);color:#fff}
.uv-iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:12px;color:var(--gray-700);cursor:pointer;transition:background var(--t-hover) var(--ease)}
.uv-iconbtn:hover{background:rgba(0,60,88,.06);color:var(--uv-deep)}
[data-uv-ground="navy"] .uv-iconbtn,.uv-on-navy .uv-iconbtn,.uv-hero .uv-iconbtn,.uv-footer .uv-iconbtn,.uv-card--brand .uv-iconbtn{color:#fff;background:rgba(255,255,255,.10)}
[data-uv-ground="navy"] .uv-iconbtn:hover,.uv-on-navy .uv-iconbtn:hover,.uv-hero .uv-iconbtn:hover,.uv-footer .uv-iconbtn:hover,.uv-card--brand .uv-iconbtn:hover{background:rgba(255,255,255,.18)}
/* ---------- 6. Chips y badges ---------- */
.uv-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-alt);color:var(--gray-700);font:600 13px/1 var(--font);border:0;cursor:default}
.uv-chip--on{background:var(--uv-deep);color:#fff;--ic-accent:#b8e412}
.uv-chip--tonal{background:var(--uv-teal-050);color:var(--uv-teal-700)}
.uv-badge{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font);padding:8px 11px;border-radius:var(--r-pill)}
.uv-badge--neutral{background:var(--surface-alt);color:var(--text-muted)}
.uv-badge--info{background:var(--uv-teal-050);color:var(--uv-teal-700)}
.uv-badge--open{background:var(--uv-deep);color:var(--uv-lime)}
.uv-badge--ok{background:var(--uv-success-soft);color:#0a6b44}
.uv-badge--warn{background:var(--uv-sun-soft);color:#8a5a00}
.uv-badge--danger{background:var(--uv-danger-soft);color:#b3271d}
/* ---------- 7. Tarjetas ---------- */
.uv-card{background:var(--surface-card);border-radius:var(--r-card);padding:var(--sp-6);box-shadow:var(--sh-sm);transition:box-shadow var(--t-hover) var(--ease)}
.uv-card:hover{box-shadow:var(--sh-md)}
.uv-card--flat{box-shadow:none;border:1px solid var(--border-hairline)}
.uv-card--brand{background:var(--grad-brand);color:#fff;--ic-accent:#b8e412;box-shadow:var(--sh-md)}
.uv-card__icon{width:52px;height:52px;border-radius:var(--r-ctl);background:var(--uv-teal-050);display:grid;place-items:center;color:var(--uv-deep);margin-bottom:18px}
.uv-card p{margin-top:9px;font:400 15px/23px var(--font);color:var(--text-muted)}
.uv-card__more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:600 14px/1 var(--font);color:var(--uv-teal)}
/* ---------- 8. Listas agrupadas. Un bloque, divisores insertos ---------- */
.uv-list{background:var(--surface-card);border-radius:var(--r-card);box-shadow:var(--sh-sm);overflow:hidden}
.uv-row{display:flex;align-items:center;gap:var(--sp-4);padding:19px 22px;transition:background var(--t-hover) var(--ease)}
.uv-row:hover{background:var(--gray-050)}
.uv-row+.uv-row{box-shadow:inset 0 1px 0 var(--border-hairline)}
.uv-row__icon{width:44px;height:44px;border-radius:13px;background:var(--surface-alt);display:grid;place-items:center;color:var(--uv-deep);flex:none}
.uv-row__text{flex:1;min-width:0}
.uv-row__text b{display:block;font:600 17px/1.3 var(--font);color:var(--text-title)}
.uv-row__text span{display:block;margin-top:3px;font:500 14px/1.3 var(--font);color:var(--text-muted)}
/* ---------- 9. Avance. El único lugar del lima ---------- */
.uv-bar{height:8px;border-radius:var(--r-pill);background:var(--uv-deep-100);overflow:hidden}
.uv-bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--uv-teal);transition:width var(--t-slow) var(--ease)}
[data-uv-ground="navy"] .uv-bar,.uv-on-navy .uv-bar,.uv-hero .uv-bar,.uv-footer .uv-bar,.uv-card--brand .uv-bar{background:rgba(255,255,255,.16)}
[data-uv-ground="navy"] .uv-bar>i,.uv-on-navy .uv-bar>i,.uv-hero .uv-bar>i,.uv-footer .uv-bar>i,.uv-card--brand .uv-bar>i{background:var(--uv-lime)}
.uv-ring{position:relative;display:grid;place-items:center;flex:none}
.uv-ring__label{position:absolute;text-align:center}
.uv-ring__label b{display:block;font:800 40px/1 var(--font);letter-spacing:-1.2px}
.uv-ring__label span{font:500 12px/1 var(--font);color:var(--text-muted)}
/* ---------- 10. Chrome. Translúcido SOLO donde el contenido pasa por debajo ---------- */
.uv-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border-hairline)}
.uv-header__in{max-width:var(--col);margin-inline:auto;padding-inline:32px;height:76px;display:flex;align-items:center;gap:var(--sp-8)}
.uv-brand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none}
.uv-brand__name{display:block;font:800 19px/1 var(--font);letter-spacing:-.5px;color:var(--text-title)}
.uv-brand__name em{font-style:normal;color:var(--uv-teal)}
[data-uv-ground="navy"] .uv-brand__name em,.uv-on-navy .uv-brand__name em,.uv-hero .uv-brand__name em,.uv-footer .uv-brand__name em,.uv-card--brand .uv-brand__name em{color:var(--uv-lime)}
.uv-brand__sub{display:block;margin-top:4px;font:500 11px/1.3 var(--font);color:var(--text-muted)}
.uv-nav{display:flex;gap:var(--sp-1)}
.uv-nav a{display:flex;align-items:center;gap:8px;height:40px;padding:0 13px;border-radius:12px;font:600 15px/1 var(--font);color:var(--gray-700);transition:background var(--t-hover) var(--ease)}
.uv-nav a:hover{background:rgba(0,60,88,.06);color:var(--uv-deep)}
.uv-nav a[aria-current]{background:var(--uv-teal-050);color:var(--uv-teal-700)}
.uv-spacer{flex:1}
.uv-header__menu{display:none}
@media (max-width:1040px){.uv-nav{display:none}.uv-header__menu{display:grid}.uv-header__in{padding-inline:24px;gap:var(--sp-4)}}
@media (max-width:560px){.uv-brand__sub{display:none}.uv-header__in{height:64px}}
/* ---------- 11. Hero ---------- */
.uv-hero{background:var(--grad-brand);color:#fff;--ic-accent:#b8e412;padding-top:var(--sp-20)}
.uv-hero__in{max-width:var(--col);margin-inline:auto;padding-inline:32px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.uv-hero .uv-hero-title{color:#fff;margin-top:18px}
.uv-hero p{margin-top:18px;font:400 18px/28px var(--font);color:rgba(255,255,255,.76);max-width:460px}
.uv-hero__cta{display:flex;gap:var(--sp-3);margin-top:30px;flex-wrap:wrap}
.uv-stats{display:flex;gap:var(--sp-7);margin-top:44px;padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.16)}
.uv-stat b{display:block;font:800 30px/1 var(--font);letter-spacing:-.9px;white-space:nowrap}
.uv-stat span{display:block;margin-top:7px;font:500 13px/1.3 var(--font);color:rgba(255,255,255,.62)}
.uv-hero__art{position:relative;height:400px;border-radius:var(--r-panel) var(--r-panel) 0 0;overflow:hidden;background:var(--uv-deep-800)}
.uv-hero__art .uv-scrim{position:absolute;inset:0;background:var(--grad-protect);pointer-events:none}
@media (max-width:900px){.uv-hero__in{grid-template-columns:1fr;gap:36px}.uv-hero__art{height:280px}}
/* ---------- 12. Footer ---------- */
.uv-footer{background:var(--surface-inverse);color:#fff;--ic-accent:#b8e412;padding:var(--sp-16) 0 34px}
.uv-footer__in{max-width:var(--col);margin-inline:auto;padding-inline:32px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--sp-10)}
.uv-footer .uv-brand__name{color:#fff}
.uv-footer .uv-brand__sub{color:rgba(255,255,255,.6)}
.uv-footer p{margin-top:18px;font:400 14px/22px var(--font);color:rgba(255,255,255,.6);max-width:280px}
.uv-fcol b{display:block;margin-bottom:16px;font:600 11px/1 var(--font);letter-spacing:.10em;text-transform:uppercase;color:var(--uv-lime)}
.uv-fcol a{display:block;padding:7px 0;font:500 15px/1 var(--font);color:rgba(255,255,255,.78)}
.uv-fcol a:hover{color:#fff}
.uv-footer__bottom{max-width:var(--col);margin:var(--sp-10) auto 0;padding:22px 32px 0;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.uv-footer__bottom>span{font:400 13px/1.4 var(--font);color:rgba(255,255,255,.5)}
@media (max-width:900px){.uv-footer__in{grid-template-columns:1fr 1fr}}
/* ---------- 13. Iconos ----------
uv-icon.js define .
El trazo principal hereda currentColor; el acento sale de --ic-accent.
Grosor: 2,2 hasta 31px, 2,4 de 32 a 47, 2,6 desde 48. Lo calcula el componente. */
uv-icon{display:inline-block;flex:none;line-height:0}
.uv-inline-icon{display:inline-flex;align-items:center;gap:7px}
/* ---------- 14. Prohibido ----------
· lima sobre blanco (contraste 1,6:1)
· sombras negras — siempre viradas al navy
· grises cálidos, #000, #fff puro como texto sobre color
· más de un gradiente por pantalla
· bordes de acento a la izquierda de una tarjeta
· emoji en la interfaz
· texto por debajo de --text-faint (#7d8d94)
· escalar en hover; el press sí baja a scale(.965)
*/