/* === BASE GLOBAL xtudioLAB === */
/* Este archivo define las variables y estilos generales del sitio.
   Se carga ANTES de nav.css y de cualquier hoja específica. */

:root {
  /* Colores principales */
  --bg: #f6f7f8;
  --bg1: #f8fafc;
  --bg2: #eef1f5;

  /* Superficies y líneas */
  --surface: rgba(255,255,255,0.72);
  --surface-strong: #fff;
  --line: rgba(0,0,0,0.08);

  /* Texto */
  --txt: #1d1d1f;
  --muted: #6e6e73;

  /* Color cobre (identidad xtudioLAB) */
  --copper: #c27a43;
  --copper-rgb: 194,122,67;
  --copper-border: rgba(194,122,67,0.22);

  /* Sombras y profundidad */
  --shadow: 0 10px 30px rgba(15,23,42,0.10), 0 1px 0 rgba(255,255,255,0.8) inset;

  /* Contenedor y altura de sticky */
  --container-max: 1100px;
  --sticky-h: 64px;
}

/* Tipografía y body base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--txt);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  line-height: 1.6;
}

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

/* Contenedor general */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px;
}
@media(max-width: 640px) {
  .container { padding: 20px; }
}

/* Skip link accesible */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:10px 14px; z-index:9999;
  background:#111827; color:#fff; border-radius:10px; outline:2px solid #fff;
}


    /* ===== Packs ===== */
/* === Fix títulos de PACKS en móvil (dos líneas) === */
.packs h3.pack-title{
  display:flex;
  flex-direction:column;   /* apila eyebrow + main */
  gap:4px;
  margin:0 0 6px;
  line-height:1.2;
  align-items:flex-start;  /* izquierda por defecto */
}
.packs h3.pack-title .eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
}
.packs h3.pack-title .main{
  font-weight:800;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.01em;
}

/* Ajuste desktop: centrado y altura mínima coherente */
@media (min-width:860px){
  .packs h3.pack-title{
    align-items:center;    /* centra el bloque en desktop */
    min-height:48px;
  }
  .packs h3.pack-title .eyebrow{ text-align:center; }
}

@media (max-width:859px){
  .packs h3.pack-title{ align-items:center; }
}