/* ============================================================
   CORPO — Sistema de diseño base (compartido por todas las páginas)
   Paleta: azul #0A84FF · negro #0B0D12 · blanco #FFFFFF
   Tema claro: fondos blancos, header y footer oscuros
   ============================================================ */

:root {
  --blue: #0a84ff;
  --blue-dark: #0066d6;
  --blue-soft: rgba(10, 132, 255, 0.08);
  --ink: #11141a;          /* texto principal */
  --dark: #0b0d12;         /* header, footer, tarjetas destacadas */
  --bg: #ffffff;
  --surface: #f5f7fa;      /* secciones alternas */
  --card: #ffffff;
  --border: #e5e9f0;
  --white: #ffffff;
  --text: #2a2f38;
  --text-muted: #5d6673;
  --shadow: 0 1px 2px rgba(17, 20, 26, 0.05), 0 8px 24px rgba(17, 20, 26, 0.06);
  --shadow-lg: 0 2px 6px rgba(17, 20, 26, 0.06), 0 18px 44px rgba(17, 20, 26, 0.1);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1140px;
  --header-h: 72px;
  --transition: 0.25s ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Barra de desplazamiento personalizada ---------- */
html {
  scrollbar-width: thin;
  scrollbar-color: #38404e #0b0d12;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: #0b0d12;
}

::-webkit-scrollbar-thumb {
  background: #38404e;
  border-radius: 999px;
  border: 3px solid #0b0d12;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--blue);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* El atributo hidden siempre debe ocultar (incluso en img/svg) */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 200;
  /* Oculto de forma robusta: 1px + clip → invisible en TODAS las páginas, sin depender
     del alto ni del posicionamiento del contenedor (el top:-100%/translateY fallaban en
     páginas donde el ancestro no daba la referencia esperada). Sigue enfocable por teclado. */
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--blue);
  color: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
}

/* Al recibir foco por teclado: position:fixed lo ancla al viewport (arriba a la izquierda)
   sin importar dónde esté en el DOM, y recupera su tamaño visible. */
.skip-link:focus {
  position: fixed;
  width: auto;
  height: auto;
  padding: 0.6rem 1.2rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.section-alt {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* ---------- Tipografía ---------- */
h1,
h2,
h3,
h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.display {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.h2 {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight: 900;
  text-transform: uppercase;
}

.accent {
  color: var(--blue);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
}

.lead {
  color: var(--text-muted);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  max-width: 56ch;
  margin-top: 1.1rem;
}

.section-head {
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.section-head.center {
  text-align: center;
}

.section-head.center .eyebrow {
  justify-content: center;
}

.section-head.center .lead {
  margin-inline: auto;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn:disabled:active { transform: none; }

.btn-primary {
  background: var(--blue);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--blue-dark);
}

.btn-dark {
  background: var(--dark);
  color: var(--white);
}

.btn-dark:hover {
  background: #23262e;
}

.btn-outline {
  border-color: #c9d0da;
  color: var(--ink);
  background: var(--white);
}

.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.btn-light {
  background: var(--white);
  /* color fijo: el botón blanco siempre lleva texto oscuro,
     aunque esté sobre una sección oscura (donde --ink se vuelve blanco) */
  color: #11141a;
}

.btn-light:hover {
  background: #e7ebf1;
}

.btn-lg {
  padding: 1.05rem 2.3rem;
  font-size: 1.05rem;
}

/* ---------- Header (oscuro fijo) ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(11, 13, 18, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* El logo es un wordmark horizontal dentro de un lienzo cuadrado:
   se agranda la imagen y se recorta el espacio transparente
   en ambos ejes para que el wordmark ocupe el header */
.brand {
  overflow: hidden;
  height: var(--header-h);
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto; /* empuja menú + cuenta hacia la derecha */
}

.brand img {
  width: 290px;
  height: 290px;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-menu a:not(.btn) {
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition);
  position: relative;
  padding-block: 0.4rem;
}

.nav-menu a:not(.btn):hover {
  color: var(--white);
}

.nav-menu a[aria-current="page"]:not(.btn) {
  color: var(--white);
}

.nav-menu a[aria-current="page"]:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 110;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle span {
  top: 21px;
}

.nav-toggle span::before {
  left: 0;
  top: -7px;
}

.nav-toggle span::after {
  left: 0;
  top: 7px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  /* Sin backdrop-filter en móvil: crearía un bloque contenedor
     y el menú fijo quedaría posicionado dentro del header */
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(11, 13, 18, 0.97);
  }

  .nav-toggle {
    display: block;
  }

  /* En mobile el botón de login va en la barra (lugar del avatar): compacto */
  .nav {
    gap: 0.9rem;
  }

  .nav-login-btn {
    padding: 0.55rem 1.05rem;
    font-size: 0.9rem;
  }

  .nav-menu {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    flex-direction: column;
    justify-content: center;
    /* compensa la altura del header para que el bloque
       quede centrado respecto de la pantalla completa */
    padding-bottom: var(--header-h);
    gap: 2.2rem;
    background: #0b0d12;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    visibility: hidden;
  }

  .nav-menu.open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-menu a:not(.btn) {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
  }
}

/* ---------- Secciones oscuras ----------
   Redefinen las variables del sistema, así las tarjetas y textos
   de cada página se adaptan solos al fondo negro */
.section-dark,
.page-hero {
  background: var(--dark);
  --card: #14171e;
  --surface: #11141a;
  --border: rgba(255, 255, 255, 0.09);
  --ink: #ffffff;
  --text: rgba(255, 255, 255, 0.85);
  --text-muted: #98a0ab;
  --shadow: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.45);
  color: var(--text);
}

/* Si dos secciones oscuras quedan seguidas, una línea sutil las separa */
.section-dark + .section-dark {
  border-top: 1px solid var(--border);
}

.section-dark .btn-outline,
.page-hero .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

.section-dark .btn-outline:hover,
.page-hero .btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* ---------- Hero interior (páginas internas) ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background: radial-gradient(
      900px 420px at 85% -10%,
      rgba(10, 132, 255, 0.16),
      transparent 65%
    ),
    #07090c;
}

/* ---------- Banda CTA ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--blue-dark), var(--blue));
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 0.8rem;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
  font-size: 1.08rem;
}

/* ---------- Footer (oscuro) ---------- */
.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.65);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

/* Mismo recorte del lienzo transparente que en el header:
   los márgenes negativos compensan el espacio vacío del PNG */
.footer-brand img {
  width: 290px;
  height: 290px;
  object-fit: contain;
  margin: -115px 0 -100px -70px;
}

.footer-brand p {
  max-width: 30ch;
}

/* Redes sociales en el footer */
.footer-social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  transition: background var(--transition), border-color var(--transition),
    color var(--transition), transform var(--transition);
}

.footer-social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}

.site-footer h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--white);
  margin-bottom: 1.1rem;
}

.site-footer li {
  margin-bottom: 0.6rem;
}

.site-footer li a,
.site-footer address {
  color: rgba(255, 255, 255, 0.65);
  font-style: normal;
  transition: color var(--transition);
}

.site-footer li a:hover {
  color: var(--blue);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.4rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem 1.4rem;
  font-size: 0.85rem;
}

/* copyright a la izquierda · crédito centrado · botón a la derecha */
.footer-credit {
  text-align: center;
}

.footer-bottom .back-to-top {
  justify-self: end;
}

.footer-credit a {
  font-weight: 800;
  color: var(--white);
  transition: color var(--transition);
}

.footer-credit a:hover {
  color: var(--blue);
}

.back-to-top {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition), transform var(--transition);
}

.back-to-top:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Ajustes para pantallas chicas ---------- */
@media (max-width: 480px) {
  :root {
    --header-h: 64px;
  }

  .brand {
    width: 132px;
  }

  .brand img {
    width: 255px;
    height: 255px;
  }

  .container {
    width: min(100% - 2rem, var(--container));
  }

  .section {
    padding-block: 3.2rem;
  }

  .display {
    font-size: clamp(2.1rem, 11vw, 2.8rem);
  }

  .h2 {
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }

  .btn-lg {
    padding: 0.95rem 1.7rem;
    font-size: 1rem;
  }

  .page-hero {
    padding-top: calc(var(--header-h) + 2.6rem);
    padding-bottom: 2.6rem;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-bottom .back-to-top {
    justify-self: center;
  }

  .cta-band {
    padding-inline: 0.5rem;
  }
}

/* ---------- Animaciones de aparición ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===== Mensajes de formulario (API) ===== */
.form-error,
.form-ok {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.form-error {
  background: #fdecec;
  color: #8a1c1c;
  border: 1px solid #f3b4b4;
}
.form-ok {
  background: #e9f7ee;
  color: #1c6b38;
  border: 1px solid #aadcbd;
}
/* Link a soporte en el aviso de cuenta suspendida */
.login-susp-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ===== Cuenta en el nav (logueado): avatar + minimenú ===== */
.nav-account {
  position: relative;
  display: flex;
  align-items: center;
  order: 2; /* después de los links del menú (order:1) */
}

/* Orden en la barra del nav: marca · links · cuenta/login · hamburger */
.nav-menu { order: 1; }
.nav-actions,
.nav-account,
.nav-login-btn { order: 2; }
.nav-toggle { order: 3; }

/* Slot estable de acciones (login / cuenta): existe en el HTML como hijo fijo de .nav,
   así el nav NO cambia de cantidad de hijos flex cuando el JS inserta la cuenta (lo que
   reacomodaba los links por un instante con justify-content:space-between). */
.nav-actions { display: flex; align-items: center; }

/* Pre-chequeo de sesión: un script inline en el <head> marca <html class="corpo-auth">
   si hay token, así "Iniciar sesión" no parpadea desde el primer pintado al navegar
   entre páginas. nav-session.js quita la clase si el token resultó inválido. */
html.corpo-auth #nav-menu a[href="/login"],
html.corpo-auth a.nav-login-btn[href="/login"] { display: none; }

/* Logueado (desktop): reservamos el ancho del avatar desde el primer pintado, mientras
   el JS inserta la cuenta. Así el slot mide lo mismo antes y después → cero reflow. */
@media (min-width: 861px) {
  html.corpo-auth .nav-actions { min-width: 40px; justify-content: flex-end; }
}

.nav-avatar-btn {
  display: inline-flex;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
}

.nav-avatar-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.nav-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  transition: box-shadow 0.2s ease;
}

/* Iniciales como base ESTABLE (fondo azul + letra): nunca se ve vacío. La foto se
   funde encima. Así el avatar no "flashea" al navegar entre páginas. */
.nav-avatar::before {
  content: attr(data-ini);
}

/* Foto por ENCIMA de las iniciales, con fade-in (opacity 0 → 1 al cargar). Si la
   imagen ya está en caché/dataURL, el JS marca is-loaded al instante (sin fade). */
.nav-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.nav-avatar img.is-loaded {
  opacity: 1;
}

/* Avatar TEMPRANO (estático en el HTML): se pinta en el PRIMER frame desde el caché,
   vía variables CSS que setea el script inline del <head> (--nav-avatar = foto dataURL,
   --nav-ini = inicial). Mismo patrón que corpo-auth. nav-session.js lo oculta apenas monta
   la cuenta real (misma foto → swap imperceptible). Reserva el círculo de 40px siempre. */
.nav-avatar-early { display: none; }
html.corpo-auth .nav-avatar-early {
  display: grid;
  background-image: var(--nav-avatar, none);
  background-size: cover;
  background-position: center;
}
html.corpo-auth .nav-avatar-early::before { content: var(--nav-ini, ""); }

.nav-avatar-btn:hover .nav-avatar {
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35);
}

.nav-account-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 288px;
  background: #14171e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
  max-width: calc(100vw - 24px);
  z-index: 300;
}

.nav-account-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.4rem;
}

.nav-avatar-lg {
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.nav-account-id {
  min-width: 0;
}

.nav-account-id strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.nav-account-id span {
  display: block;
  color: #98a0ab;
  font-size: 0.82rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.nav-account-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.62rem 0.55rem;
  border-radius: 9px;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

.nav-account-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.nav-account-item svg {
  color: #98a0ab;
  flex-shrink: 0;
}

.nav-account-logout {
  color: #ff7a7a;
}

.nav-account-logout svg {
  color: #ff7a7a;
}

.nav-account-logout:hover {
  background: rgba(255, 91, 91, 0.12);
}


/* ============================================================
   Mantenimiento — banner + pantalla de bloqueo + botones de acción.
   Autocontenido (colores fijos) para funcionar igual en el sitio público
   (tema claro) y en los paneles (tema oscuro).
   ============================================================ */
.mant-banner {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.7rem 1.1rem; font-size: 0.9rem; line-height: 1.45;
  background: #14171e; color: #d7dbe2; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mant-banner--proximo { box-shadow: inset 4px 0 0 #0a84ff; }
.mant-banner--encurso { box-shadow: inset 4px 0 0 #ffb020; }
.mant-ico { flex: none; display: grid; place-items: center; }
.mant-banner--proximo .mant-ico { color: #4aa3ff; }
.mant-banner--encurso .mant-ico { color: #ffb020; }
.mant-text { flex: 1 1 auto; min-width: 0; }
.mant-text strong { color: #fff; font-weight: 800; }
.mant-msg { margin-right: 0.3rem; }
.mant-count { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; }
@media (max-width: 600px) { .mant-banner { font-size: 0.82rem; padding: 0.6rem 0.9rem; } }
/* Sitio público: el banner queda sticky arriba y baja el header fijo su altura, para que el
   aviso aparezca por encima del header sin que éste lo tape. */
.mant-banner--fixed { position: sticky; top: 0; z-index: 1000; }
body.mant-banner-open .site-header,
body.mant-banner-open .login-topbar,
body.mant-banner-open .reg-header { top: var(--mant-banner-h, 44px); }

.mant-block-retry { min-width: 180px; margin-top: 0.4rem; }
/* "Volver al sitio" arriba a la izquierda, igual que el topbar de login */
.mant-block-topback {
  position: absolute; top: 1.4rem; left: clamp(1.25rem, 4vw, 2.5rem); z-index: 1;
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; font-weight: 600; text-decoration: none;
}
.mant-block-topback:hover { color: #fff; }

/* Aviso en la sección de planes cuando las inscripciones están deshabilitadas por mantenimiento */
.planes-mant-aviso {
  max-width: 1120px; margin: 1.4rem auto -0.4rem; padding: 0.8rem 1.1rem;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem; text-align: center;
  border-radius: 12px; background: #fff3d6; border: 1px solid #f0c45a; color: #7a4e00; font-size: 0.92rem; font-weight: 700;
}
.planes-mant-aviso svg { flex: none; color: #b9791a; }

body.mant-blocked { overflow: hidden; }
.mant-block {
  position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 1.5rem;
  background: rgba(8, 10, 14, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mant-block-card {
  width: min(100%, 440px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 2.2rem 1.8rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; background: #14171e;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); color: #d7dbe2;
}
.mant-block-logo { width: 64px; height: 64px; object-fit: contain; }
.mant-block-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 176, 32, 0.14); color: #ffb020; margin-top: 0.2rem; }
.mant-block-title { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0.2rem 0 0; }
.mant-block-msg { font-size: 0.95rem; color: #c2c6cd; line-height: 1.5; margin: 0; }
.mant-block-count { font-size: 0.95rem; color: #c2c6cd; margin: 0.5rem 0 0.2rem; }
.mant-block-clock { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 800; color: #fff; }
.mant-block-retry { margin-top: 0.4rem; min-width: 160px; }
.mant-block-foot { font-size: 0.8rem; color: #8a8f98; margin: 0.6rem 0 0; }

/* Botones de acción (registro / elegir plan / pagar) deshabilitados durante el bloqueo */
.is-mant-disabled { pointer-events: none; opacity: 0.55; cursor: not-allowed; }
.mant-action-note { font-size: 0.85rem; color: #b9791a; font-weight: 700; margin: 0 0 0.6rem; }