/* Reset & base */
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:#1f2937;background:#f3f4f6}

/* Navbar */
.navbar{position:sticky;top:0;z-index:1000;background:#111827;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:40px;border-radius:8px}
.brand h1{font-size:1.05rem;margin:0;letter-spacing:.3px}
.nav-links{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.nav-links a{color:#fff;text-decoration:none;font-weight:600;opacity:.95}
.nav-links a:hover{color:#fbbf24}
.burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}

/* Hero */
.hero{min-height:70vh;background:url('img/hero-bg.jpg') center/cover no-repeat;display:grid;place-items:center;position:relative;text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.65))}
.hero .hero-content{position:relative;max-width:900px;color:#fff;padding:0 16px}
.hero h2{font-size:clamp(2rem,4vw,3rem);margin:.25rem 0 .75rem}
.hero p{font-size:clamp(1rem,2vw,1.25rem);opacity:.95}

/* Sections & cards */
.section{padding:56px 16px}
.container{max-width:1100px;margin:0 auto}
.section h3{color:#111827;text-align:center;font-size:2rem;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px;text-decoration:none;color:#111827;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.10)}
.card h4{margin:0 0 8px;color:#0f172a}
.card p{margin:0;color:#4b5563}

/* Questions */
.area-header{background:#eef2ff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;padding:28px 16px;margin:22px 0}
.area-header .container{display:flex;flex-direction:column;gap:6px}
.q-block{background:#fff;border:1px solid #e5e7eb;border-left:6px solid #1e3a8a;border-radius:12px;margin:14px 0;padding:16px}
.q-title{font-weight:700;margin:0 0 10px}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.options button{padding:10px 12px;background:#f3f4f6;border:0;border-radius:10px;cursor:pointer;text-align:left;font-weight:600}
.options button:hover{background:#e5e7eb}
.options button.correct{background:#16a34a;color:#fff}
.options button.incorrect{background:#ef4444;color:#fff}
.actions{margin:16px 0;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:0;font-weight:800;cursor:pointer;text-decoration:none}
.btn-primary{background:#fbbf24;color:#111827}
.btn-secondary{background:#111827;color:#fff}
.btn-ghost{background:#fff;border:1px solid #e5e7eb;color:#111827}
.badge{display:inline-block;background:#e5e7eb;border-radius:999px;padding:6px 10px;font-weight:700}

/* Simulacro */
.sim-top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;margin:16px 0}
.timer{font-weight:900;color:#b91c1c}
.result{background:#ecfeff;border:1px solid #a5f3fc;padding:16px;border-radius:12px;margin-top:16px}

/* Sección Mejorar Puntaje */
.mejorar-puntaje {
  background: linear-gradient(90deg, #ffe4b5 60%, #fffbe7 100%);
  padding: 40px 0 30px 0;
  border-radius: 24px;
  box-shadow: 0 8px 32px #ffd70030;
  margin-bottom: 30px;
}
.mejorar-flex {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.mejorar-texto {
  flex: 1 1 320px;
}
.mejorar-titulo {
  color: #97632e;
  font-size: 2.3em;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.mejorar-descripcion {
  font-size: 1.2em;
  color: #333;
}
.mejorar-img {
  flex: 0 0 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 800px) {
  .mejorar-flex {
    flex-direction: column-reverse;
    text-align: center;
    gap: 20px;
  }
  .mejorar-texto {
    text-align: center;
  }
}

.promo-destacada {
  background: linear-gradient(90deg, #ff9800 0%, #ffc107 100%);
  color: #222;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  margin: 40px auto;
  padding: 40px 20px;
  text-align: center;
  max-width: 800px;
}

.promo-titulo {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 1px 2px 8px #d17b00;
}

.promo-texto {
  font-size: 1.5em;
  line-height: 1.5;
  color: #fff;
  text-shadow: 1px 1px 6px #d17b00;
}

.info-destacada {
  background: linear-gradient(90deg, #4fc3f7 0%, #1976d2 100%);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  margin: 40px auto;
  padding: 40px 20px;
  text-align: center;
  max-width: 800px;
}

.info-titulo {
  font-size: 2.3em;
  font-weight: bold;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 1px 2px 8px #1565c0;
}

.info-texto {
  font-size: 1.3em;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #fff;
  text-shadow: 1px 1px 6px #1565c0;
}

.info-boton {
  display: inline-block;
  background: #fff;
  color: #1976d2;
  font-size: 1.2em;
  font-weight: bold;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
  transition: background 0.2s, color 0.2s;
}

.info-boton:hover {
  background: #1976d2;
  color: #fff;
}

/* Sección Nosotros */
.nosotros {
  background: linear-gradient(90deg, #fffbe7 60%, #ffe4b5 100%);
  padding: 40px 0;
  margin-top: 0;
  border-radius: 24px;
  box-shadow: 0 8px 32px #ffd70030;
}
.nosotros-flex {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.nosotros-logo {
  flex: 0 0 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nosotros-texto {
  flex: 1 1 320px;
  text-align: left;
}
.nosotros-titulo {
  font-family: 'Segoe UI', Arial, sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
}
@media (max-width: 800px) {
  .nosotros-flex {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .nosotros-texto {
    text-align: center;
  }
}

/* ---------- Sección AUTH: registro e inicio (solo esta sección) ---------- */
.section.auth { padding: 48px 16px; }
.section.auth .container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  padding: 56px 28px 28px;
  border-radius: 14px;
  background: linear-gradient(180deg,#ffffff,#f3fbff);
  box-shadow: 0 16px 40px rgba(3,102,214,0.06);
  border: 1px solid rgba(3,102,214,0.06);
  position: relative;
  overflow: visible;
}

/* Título claro y centrado encima de la tarjeta */
.section.auth .container::before{
  content: "Regístrate";
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 30;
  background: linear-gradient(90deg,#ffb86b,#ffd166,#00d4ff);
  color: #062026;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 8px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  letter-spacing: 0.4px;
}

/* Cada columna centra su contenido y mantiene simetría */
.section.auth .container > * {
  min-height: 220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:6px;
}

/* Formularios: tarjetas iguales y centradas */
.section.auth form {
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  border-radius:12px;
  background: linear-gradient(180deg,#ffffff,#f8feff);
  border:1px solid rgba(3,102,214,0.04);
  box-shadow:0 10px 24px rgba(3,102,214,0.05);
}

/* Inputs coherentes */
.section.auth input[type="email"],
.section.auth input[type="password"],
.section.auth input[type="text"] {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #e6f3fb;
  background:#fff;
  transition: box-shadow .14s, border-color .12s, transform .08s;
}
.section.auth input:focus{
  box-shadow:0 10px 28px rgba(0,215,255,0.12);
  border-color:#00b7ff;
  transform: translateY(-2px);
}

/* Botones principales: equilibrados y centrados */
.section.auth button[type="button"]{
  padding:12px 14px;
  border-radius:10px;
  border:0;
  font-weight:800;
  cursor:pointer;
  color:#062026;
  background: linear-gradient(90deg,#00d4ff,#00b7ff 60%);
  box-shadow:0 10px 28px rgba(0,183,255,0.12);
  align-self:center;
  min-width:160px;
  transition: transform .12s, box-shadow .12s;
}
.section.auth button[type="button"]:hover{ transform: translateY(-4px); }

/* Botón secundario (si existe) */
.section.auth button.secondary{
  background: linear-gradient(90deg,#ffb86b,#ff8a4a);
  color:#fff;
}

.section.auth #logoutBtn{
  justify-self: end;
  align-self: start;
  padding: 0;                /* quitar padding para forma cuadrada */
  width: 20px;               /* ancho fijo */
  height: 20px;              /* alto igual al ancho -> cuadrado */
  min-width: 184px;
  min-height: 100px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg,#3c87e9,#437dca);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: 0 6px 12px rgba(149,95,43,0.10);
  transition: transform .12s, box-shadow .12s;
  margin-top: 6px;
}
.section.auth #logoutBtn:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(149,95,43,0.12);
}

/* Móvil: mantener cuadrado y centrar */
@media (max-width:900px){
  .section.auth #logoutBtn{
    justify-self: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* Mensaje de estado: ocupa fila completa y centrado */
.section.auth #message{
  grid-column: 1 / -1;
  margin-top:14px;
  padding:10px 14px;
  border-radius:10px;
  text-align:center;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}
.section.auth #message.success{ background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0;font-weight:700; }
.section.auth #message.error{ background:#fff1f2;color:#7f1d1d;border:1px solid #fecaca;font-weight:700; }

/* Nota pequeña centrada */
.section.auth .auth-note{ margin-top:10px;color:#445760;text-align:center; }

/* Responsive: apilar a una columna */
@media (max-width:900px){
  .section.auth .container{ grid-template-columns:1fr;padding:48px 18px 20px; }
  .section.auth .container::before{ top:-6px;padding:8px 18px;font-size:1rem; }
  .section.auth .container > *{ min-height:auto; align-items:stretch; }
  .section.auth form{ max-width:100%; width:100%; }
  .section.auth #logoutBtn{ justify-self:center; width:100%; max-width:360px; }
}
/* ---------- Fin AUTH ---------- */


/* Footer */
footer{background:#111827;color:#fff;text-align:center;padding:22px;margin-top:40px}

/* Mobile */
@media (max-width: 900px){
  .nav-links{display:none;position:absolute;top:62px;left:0;right:0;background:#111827;padding:14px 16px;flex-direction:column}
  .nav-links.open{display:flex}
  .burger{display:block}
}