/* ================================
   Exam Generator · Estilos mejorados
   - Layout fluido con CSS Grid/Flex
   - Variables de color/tipografía
   - Accesible (focus visibles)
   - Modo oscuro opcional
   - Sin posiciones absolutas frágiles
=================================== */

/* ---------- Variables & base ---------- */
:root{
  --bg: #d5faff;
  --surface: #ffffff;
  --brand: #2feaff;
  --brand-700:#1ecfe1;
  --accent: #2f90ff;
  --accent-700:#2680ef;
  --text: #0d082c;
  --text-2:#222;
  --muted:#5b6470;
  --border:#09155e1a;
  --media-width: min(960px, 95vw);

  --radius: 20px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);

  --fs-h1: clamp(1.4rem, 1.1rem + 2vw, 2rem);
  --fs-h2: clamp(1.2rem, 1rem + 1.5vw, 1.75rem);
  --fs-lg: clamp(1rem, .95rem + .5vw, 1.25rem);
  --fs-md: 1rem;
  --fs-sm: .95rem;

  --container-max: 1200px; /* antes tenías 1512px; más cómodo para desktop */
  --gutter: clamp(16px, 4vw, 40px);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f172a;
    --surface:#111827;
    --brand:#0ea5b7;
    --brand-700:#0891a2;
    --accent:#3b82f6;
    --accent-700:#2563eb;
    --text:#e5e7eb;
    --text-2:#cbd5e1;
    --muted:#9ca3af;
    --border:#ffffff1a;
    --shadow: 0 8px 24px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  text-rendering:optimizeLegibility;
}

/* ---------- Contenedor principal ---------- */
.HOME{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:stretch;
  min-height:100dvh;
}

.HOME .div{
  width:100%;
  max-width: 100%;
  margin:0 auto;
  padding-inline: 20px;
  padding-bottom: 56px;
  display:grid;

  /* Layout de áreas */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "video"
    "hero";
  gap: clamp(10px, 2vw, 20px);
}

/* ---------- Header ---------- */
.HOME .overlap{
  grid-area: header;
  position: sticky; /* visible al hacer scroll */
  top: 0;
  z-index: 10;
  background: var(--brand);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);

  display:flex;
  align-items:center;
  gap: 16px;
  padding: 16px clamp(12px, 2vw, 20px);
  border-radius: 0 0 16px 16px;
}

/* Título + subtítulo como bloque flexible */
.HOME .text-wrapper{
  margin:0;
  font-weight:800;
  font-size: var(--fs-h1);
  color: var(--text);
}

.HOME .line{
  width:2px;
  height: 1.8em;
  background: currentColor;
  opacity:.35;
  border-radius: 2px;
}

.HOME .p{
  margin:0;
  font-weight:600;
  font-size: var(--fs-sm);
  color: var(--text);
  opacity:.9;
}

/* Lado derecho: botón login */
.HOME .boton-iniciar-sesin{
  margin-left:auto; /* empuja a la derecha */
}

/* contenedor de botones */
.HOME .boton-iniciar-sesin {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

/* botón base (ya lo tienes como .rectangle) */

/* Botón "Crear cuenta" en naranja oscuro */
.HOME .rectangle.secondary {
  background: #cc460c; /* naranja oscuro */
  border: none;
  color: #fff;
}

.HOME .rectangle.secondary:hover {
  background: #b53e0b; /* un tono más oscuro al pasar el ratón */
}

.HOME .rectangle.secondary:focus-visible {
  outline: 3px solid color-mix(in oklab, #cc460c, white 35%);
  outline-offset: 2px;
}


.HOME .overlap-group{ display:contents; } /* no necesita wrapper con tamaño fijo */

/* Botón accesible (también para <a>) */
.HOME .rectangle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 130px;
  padding: 12px 18px;
  background: var(--accent);
  color:#fff;
  border:none;
  border-radius: var(--radius);
  text-decoration:none;
  font-weight:800;
  font-size: var(--fs-sm);
  line-height:1;
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.HOME .rectangle:hover{ background: var(--accent-700); transform: translateY(-1px); }
.HOME .rectangle:active{ transform: translateY(0); }
.HOME .rectangle:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent), white 35%);
  outline-offset: 2px;
}
.HOME .text-wrapper-2{ /* contenido del botón */
  color: #fff;
  font-size: var(--fs-sm);
}

/* ---------- Hero: copy only ---------- */
.HOME .hero-content{
  width: var(--media-width);
  margin: 0 auto;                    /* centrado del bloque */
  padding: 0;                        /* quitamos relleno extra del contenedor */
  display: block;
}

.HOME .img{
  grid-area: logo;
  width: 300px;
  height: 100%;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
  transition: transform 0.3s ease;
}

.HOME .img:hover{
  transform: scale(1.05);
}

/* Texto principal */
.HOME .genera-y-corrige-ex{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(25px, 3vw, 40px);
  box-shadow: var(--shadow);
  width: 100%;
  text-align: left;
}

.HOME .span{
  display:block;
  font-weight:800;
  font-size: var(--fs-h2);
  margin-bottom: .25em;
}

.HOME .text-wrapper-3{
  font-weight:600;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: .5em;
}

.HOME .text-wrapper-4{
  font-weight:500;
  font-size: var(--fs-md);
  color: var(--text-2);
  margin: .25em 0 .75em;
}

.HOME .text-wrapper-5{
  font-weight:700;
  font-size: var(--fs-lg);
  margin: 0;
}

/* ---------- Video (placeholder) ---------- */
.video-section{
  grid-area: video;
  display: grid;
  gap: 12px;
  width: 100%;
  justify-self: stretch;
}

.HOME .rectangle-2{
  width: 100%;
  aspect-ratio: 16/9;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--accent) 25%, transparent),
      color-mix(in oklab, var(--accent) 25%, transparent) 12px,
      transparent 12px,
      transparent 24px
    );
  border: 1px dashed color-mix(in oklab, var(--accent), black 30%);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.HOME .VIDEO-DE-EJEMPLO{
  margin:0;
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing:.04em;
}
.HOME .text-wrapper-6{ font-weight: 800; color: color-mix(in oklab, var(--accent), black 10%); }
.HOME .text-wrapper-7{ font-weight: 800; color: var(--text); }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px){
  .HOME .div{
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "video"
      "hero";
  }
  .HOME .hero-content{
    padding: 15px 10px;
  }
  .HOME .genera-y-corrige-ex{
    width: 100%;
    text-align: left;
  }
  .HOME .span,
.HOME .text-wrapper-3,
.HOME .text-wrapper-4,
.HOME .text-wrapper-5{
  text-align: left;
}
}

@media (max-width: 640px){
  .HOME .overlap{
    flex-wrap: wrap;
    gap:8px 12px;
    justify-content:center;
    border-radius:0 0 12px 12px;
  }
  .HOME .line{ display:none; }
  .HOME .p{ text-align:center; width:100%; }
  .HOME .boton-iniciar-sesin{ width:100%; display:flex; justify-content:center; }
  .HOME .rectangle{ width: 100%; max-width: 320px; }
}

/* ---------- Accesibilidad/movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  .HOME .rectangle{ transition: none; }
}

/* ---------- Utilidades pequeñas ---------- */
.HOME .sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* ---------- Pantallas 4K con escala 150% ---------- */
@media (min-width: 2560px) {
  :root {
    --fs-h1: clamp(2rem, 1.5rem + 1vw, 3rem);
    --fs-h2: clamp(1.6rem, 1.2rem + .8vw, 2.25rem);
    --fs-lg: clamp(1.25rem, 1rem + .5vw, 1.75rem);
    --fs-md: 1.125rem;
    --fs-sm: 1rem;
    --container-max: 1600px; /* más ancho para aprovechar el espacio */
    --gutter: clamp(40px, 6vw, 96px);
  }

  .HOME .div {
    gap: 48px; /* más aire entre secciones */
  }

  .HOME .img {
    max-width: 400px;
  }

  .HOME .genera-y-corrige-ex {
    padding: 40px;
    font-size: var(--fs-md);
  }

  .HOME .rectangle {
    min-width: 160px;
    padding: 16px 28px;
    font-size: var(--fs-md);
  }

  .HOME .rectangle-2 {
    border-radius: 20px;
  }
}