/* ============================================================
   Gaudí, crear sin límites — main.css
   Tokens, reset, tipografía y utilidades compartidas
   Recurso STEAM para Educación Secundaria · Año Gaudí 2026
   ============================================================ */

:root {
  /* Paleta mediterránea */
  --azul-profundo: #0a2240;
  --azul: #1a4d8f;
  --turquesa: #1abc9c;
  --turquesa-claro: #6fe0cf;
  --verde: #2e9e5b;
  --arena: #efe6d2;
  --arena-oscura: #d8c9a8;
  --amarillo: #ffd166;
  --coral: #ff7a59;
  --naranja: #f39c12;
  --blanco: #fffdf8;
  --tinta: #1f2a3a;       /* texto principal sobre claro */
  --tinta-suave: #5a6678;

  /* Colores de los 5 ejes STEAM */
  --eje-naturaleza: #4caf50;
  --eje-geometria: #9b59b6;
  --eje-arte: #e74c3c;
  --eje-estructura: #3498db;
  --eje-creatividad: #f39c12;

  /* Tipografía */
  --font-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Espacio y forma */
  --radio: 14px;
  --radio-s: 8px;
  --sombra: 0 8px 30px rgba(10, 34, 64, 0.12);
  --sombra-suave: 0 3px 12px rgba(10, 34, 64, 0.08);
  --max-ancho: 1100px;
  --transicion: 0.18s ease;
}

/* ---------- Reset ligero ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  color: var(--azul-profundo);
  line-height: 1.15;
  margin: 0 0 0.4em;
}

p { margin: 0 0 1em; }

a { color: var(--azul); }

img { max-width: 100%; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Utilidades ---------- */
.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;
}

.contenedor {
  width: 100%;
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* Acuarela decorativa reutilizable */
.acuarela {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* Píldoras de eje STEAM */
.eje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(10, 34, 64, 0.05);
  color: var(--tinta-suave);
}
.eje::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c, var(--azul));
}
.eje--naturaleza  { --c: var(--eje-naturaleza); }
.eje--geometria   { --c: var(--eje-geometria); }
.eje--arte        { --c: var(--eje-arte); }
.eje--estructura  { --c: var(--eje-estructura); }
.eje--creatividad { --c: var(--eje-creatividad); }

/* Botón general */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--turquesa);
  color: #fff;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.btn--secundario { background: rgba(10, 34, 64, 0.08); color: var(--azul-profundo); }
.btn--coral { background: var(--coral); }
.btn--amarillo { background: var(--amarillo); color: var(--azul-profundo); }

/* ============================================================
   Capa "aplicación": escenario fijo 16:9 a pantalla completa
   (letterbox sobre fondo oscuro; sin scroll de página)
   ============================================================ */
body.app {
  margin: 0;
  background: #ffffff;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* El escenario mantiene 16:9 y se escala para caber en la ventana */
.app-stage {
  position: relative;
  width: min(100vw, 177.78vh);   /* 16/9 × alto */
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--blanco);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* Escudo de la Junta de Castilla y León (esquina superior izquierda en
   todas las pantallas; en la portada se coloca abajo a la izquierda).
   Fondo por CSS: la ruta ../img es válida desde cualquier página. */
.marca-junta {
  position: absolute; top: 2.6%; left: 2.4%; z-index: 9;
  height: 9%; aspect-ratio: 405 / 224; pointer-events: none;
  background: url(../img/logojuntax.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 6px rgba(10, 34, 64, 0.18));
}
.marca-junta--portada { top: auto; bottom: 3.4%; }

/* Sello 100 años reutilizable (esquina superior derecha del escenario) */
.stage-seal {
  position: absolute; top: 2.6%; right: 2.4%; z-index: 8;
  height: 13%; width: auto;
  filter: drop-shadow(0 3px 8px rgba(10, 34, 64, 0.2));
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
}