/* VITRU — estilos comunes de las páginas del kit (usa tokens.css). */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg);
       background: var(--halo), var(--fondo), var(--bg); background-attachment: fixed; min-height: 100vh; }
[data-theme="dark"] body, body[data-theme="dark"] {
  background: var(--halo), radial-gradient(140% 70% at 50% 20%, var(--vitru-verde-850), var(--vitru-verde-900) 60%, var(--vitru-verde-950));
  background-attachment: fixed; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.vt-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter-phone); }
@media (min-width: 768px) { .vt-wrap { padding: 0 var(--container-gutter-tablet); } }
@media (min-width: 1100px) { .vt-wrap { padding: 0 var(--container-gutter-desktop); } }
.vt-seccion { padding: var(--section-y-phone) 0; }
@media (min-width: 768px) { .vt-seccion { padding: var(--section-y-tablet) 0; } }
@media (min-width: 1100px) { .vt-seccion { padding: var(--section-y-desktop) 0; } }

/* Cabecera verde con logo cobre */
.vt-cabecera { position: relative; display: grid; place-items: center; text-align: center; color: var(--vitru-offwhite-calido);
               background: radial-gradient(120% 90% at 50% 0%, #113F36 0%, #082822 55%, #051B17 100%); }
.vt-cabecera::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--hilo-cobre); opacity: .8; }
.vt-logo { filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }

/* Barra superior */
.vt-barra { position: sticky; top: 0; z-index: 10; background: rgba(8,40,34,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vt-barra::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--hilo-cobre); opacity: .6; }
.vt-barra-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 72px; }
.vt-barra img { height: 40px; width: auto; }
.vt-nav { display: flex; gap: var(--space-6); font-size: var(--text-sm); color: var(--vitru-offwhite-calido); }
.vt-nav a { text-decoration: none; opacity: .86; }
.vt-nav a:hover { opacity: 1; }
@media (max-width: 760px) { .vt-nav { display: none; } }

/* Texto */
.vt-antetitulo { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em;
                 text-transform: uppercase; color: var(--antetitulo); }
.vt-sobre-verde .vt-antetitulo { color: var(--vitru-cobre-claro); }
.vt-antetitulo::before { content: ""; width: 22px; height: 1px; background: var(--detalle); flex: none; }
.vt-titulo { font-family: var(--font-display); font-weight: var(--peso-titulo); font-size: var(--text-3xl); line-height: var(--leading-tight);
             letter-spacing: var(--tracking-display); margin-top: var(--space-2); }
.vt-titulo-xl { font-size: clamp(34px, 6vw, var(--text-4xl)); }
.vt-subtitulo { font-family: var(--font-display); font-weight: var(--peso-titulo); font-size: var(--text-xl); line-height: 1.2; }
.vt-texto { color: var(--texto-parrafo); max-width: 60ch; }
.vt-suave { color: var(--muted); font-size: var(--text-sm); }
/* Número grande de una fila (cantidad): Candara, grafito en la clara (v5) */
.vt-numero { font-family: var(--font-display); font-weight: var(--peso-numero); font-size: var(--text-3xl); line-height: var(--leading-tight);
             color: var(--numero); font-variant-numeric: tabular-nums; }
.vt-sobre-verde { color: var(--vitru-offwhite-calido); }
.vt-sobre-verde .vt-texto { color: rgba(237,228,216,.86); }

/* Vidrio */
.vt-tarjeta { position: relative; overflow: hidden; border-radius: var(--radius-md); padding: var(--space-6) var(--space-5) var(--space-5);
              background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
              -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.vt-tarjeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-shine); pointer-events: none; }
.vt-tarjeta > * { position: relative; }
.vt-tarjeta .vt-subtitulo { color: var(--titulo-tarjeta); }   /* letra liviana (KM-13): título de tarjeta en grafito */

/* Botones */
.vt-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }
.vt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 48px; padding: 0 var(--space-6);
          border-radius: var(--radius-sm); font: 600 15px var(--font-body); text-decoration: none; cursor: pointer;
          transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-base) var(--ease-standard); }
.vt-btn:focus-visible, .vt-campo input:focus-visible, .vt-campo select:focus-visible, .vt-campo textarea:focus-visible, .vt-enlace:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-btn:active { transform: translateY(1px); }
.vt-btn-principal { color: var(--accent-on); background: var(--accent-gradient); border: 1px solid transparent; box-shadow: var(--accent-shadow); }
[data-theme="dark"] .vt-btn-principal, .vt-sobre-verde .vt-btn-principal { border-color: rgba(229,150,97,.45);
  background: linear-gradient(180deg, #2E7465, #256659 45%, #1B5146); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 20px -8px rgba(0,0,0,.65); }
.vt-btn-secundario { color: var(--fg); background: rgba(8,40,34,.03); border: 1px solid rgba(8,40,34,.20); }
[data-theme="dark"] .vt-btn-secundario, .vt-sobre-verde .vt-btn-secundario { color: var(--vitru-offwhite-calido); background: rgba(246,243,238,.04); border-color: rgba(246,243,238,.28); }

/* Campos */
.vt-campo { display: grid; gap: 6px; }
.vt-campo label { font-size: var(--text-sm); font-weight: 600; }
.vt-campo input, .vt-campo select, .vt-campo textarea { width: 100%; min-height: 48px; border-radius: var(--radius-sm); padding: 12px var(--space-4);
  font: 400 var(--text-base) var(--font-body); color: var(--fg); background: var(--glass-bg); border: 1px solid rgba(8,40,34,.16);
  box-shadow: inset 0 1px 2px rgba(8,40,34,.06); }
[data-theme="dark"] .vt-campo input, [data-theme="dark"] .vt-campo select, [data-theme="dark"] .vt-campo textarea { border-color: rgba(246,243,238,.22); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.vt-campo textarea { min-height: 120px; resize: vertical; }
.vt-campo ::placeholder { color: var(--muted); opacity: .8; }

/* Aviso: vidrio off-white (clara, v5) o verde (oscura); título y sombra en el color del aviso */
.vt-aviso { position: relative; overflow: hidden; border-radius: var(--radius-md); padding: 16px 18px;
            background: var(--aviso-bg); border: 1px solid var(--aviso-border);
            box-shadow: var(--aviso-inset), 0 14px 30px -18px color-mix(in oklab, var(--c), transparent 70%);   /* v5: sombra de color más tenue (la oscura sigue igual) */
            -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
[data-theme="dark"] .vt-aviso { box-shadow: var(--aviso-inset), 0 20px 36px -16px color-mix(in oklab, var(--c), transparent 50%); }
.vt-aviso::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-shine); pointer-events: none; }
.vt-aviso > * { position: relative; }
.vt-aviso-titulo { display: block; color: var(--c); font-family: var(--font-display); font-size: 19px; font-weight: var(--peso-aviso); line-height: 1.3; }
.vt-aviso-texto { font-size: var(--text-sm); color: var(--aviso-texto); }   /* v5: grafito en la clara */
.vt-aviso-ok { --c: var(--success); } .vt-aviso-atencion { --c: var(--warn); } .vt-aviso-error { --c: var(--danger); }

/* Enlace */
.vt-enlace { color: var(--link); font-weight: 600; text-decoration: none; padding-bottom: 3px; background-image: var(--hilo-cobre);
             background-size: 100% 1px; background-repeat: no-repeat; background-position: bottom; }

/* Grillas */
.vt-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .vt-grilla-2 { grid-template-columns: repeat(2, 1fr); } .vt-grilla-3 { grid-template-columns: repeat(3, 1fr); } .vt-grilla-4 { grid-template-columns: repeat(4, 1fr); } }

.vt-hilo { height: 1px; background: var(--hilo-cobre); border: 0; opacity: .7; }
.vt-pie { padding: var(--space-8) 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .vt-btn { transition: none; } }