/* ============================================================
   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: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--blue);
  color: var(--white);
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

: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-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"],
html.corpo-auth a.nav-login-btn[href="login.html"] { 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 {
  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;
}

.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.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);
}