/* Landing de Calculia — menú simple por bloques (Matemáticas / Razonamiento).
   Lo común está en assets/css/ (tokens, base, components). */

/* Padding lateral y vertical del container, reducidos para aprovechar
   mejor la pantalla en escritorios sin hacer scroll. Lo común (max-width,
   margin auto) sigue en components.css. */
.container {
  padding: 8px var(--espacio);
}

.idioma-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio);
  justify-content: center;
}

.btn-lang {
  min-height: 44px;
  min-width: 64px;
  padding: 0 12px;
  font-family: var(--fuente);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  cursor: pointer;
}

@media (max-width: 719px) {
  /* En móvil/tablet táctil los botones cumplen la regla 2 (>= 64px). */
  .btn-lang { min-height: var(--boton-min); }
}

.btn-lang:hover { border-color: var(--color-foco); }

.btn-lang[aria-pressed="true"] {
  border-color: var(--color-foco);
  background: var(--mod-razonamiento-suave);
}

/* Anclas de bloque: acceso directo a cada sección. Enlaces normales
   (funcionan con teclado y sin JS); el scroll suave global de
   assets/css/base.css ya respeta prefers-reduced-motion. */
.anclas-modulo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio);
  justify-content: center;
  padding: var(--espacio) 0;
}

.ancla-modulo {
  display: flex;
  align-items: center;
  min-height: var(--boton-min);
  padding: 8px var(--espacio);
  font-family: var(--fuente);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 3px solid var(--acento);
  border-radius: var(--radio);
}

.ancla-modulo:hover,
.ancla-modulo:focus-visible {
  background: var(--acento);
  color: #FFFFFF;
}

/* Shortcuts a las apps hermanas (servicios independientes, mismo equipo) */
.anclas-hermanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio);
  justify-content: center;
  padding: 0 0 var(--espacio);
}

.ancla-hermana {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--boton-min);
  padding: 8px var(--espacio);
  font-family: var(--fuente);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 3px dashed var(--color-borde);
  border-radius: var(--radio);
}

.ancla-hermana:hover,
.ancla-hermana:focus-visible {
  border-color: var(--mod-razonamiento);
}

/* Variante "pill" usada en la cabecera horizontal (más compacta). */
.cabecera-hermanas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.hermana-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--fuente);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  white-space: nowrap;
}

.hermana-pill:hover,
.hermana-pill:focus-visible {
  border-color: var(--mod-razonamiento);
}

.cabecera {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--espacio);
  padding: 8px 0;
}

.cabecera-izq {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cabecera-der {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "idiomas estrellas"
    "titulo   titulo"
    "saludo   saludo"
    "hermanas hermanas";
  column-gap: var(--espacio);
  row-gap: 2px;
  align-items: center;
  min-width: 0;
}

.cabecera-izq .logo { width: 56px; height: 56px; }

.cabecera-der .idioma-selector { grid-area: idiomas; justify-content: flex-end; }
.cabecera-der .stars { grid-area: estrellas; justify-self: end; font-size: var(--texto-pequeno); margin: 0; }
.cabecera-der h1 {
  grid-area: titulo;
  color: var(--color-texto);
  text-align: center;
  margin: 0;
  font-size: var(--texto-grande);
  line-height: 1.1;
}
.cabecera-der .fila { grid-area: saludo; justify-content: center; flex-wrap: wrap; }
.cabecera-der .cabecera-hermanas { grid-area: hermanas; justify-content: center; }

.logo { margin: 0; }

.saludo {
  font-size: var(--texto-base);
  font-weight: 700;
  text-align: center;
}

.centrado-fila { justify-content: center; }

.modulos {
  gap: 8px;
  margin-top: 8px;
}

/* Cada bloque define --acento y --acento-suave en su style="" */
.modulo h2 {
  color: var(--acento);
  border-left: 6px solid var(--acento);
  padding-left: 10px;
  margin-bottom: 4px;
  font-size: var(--texto-base);
}

/* ---- Cards de actividades ----
   Los selectores deben coincidir EXACTAMENTE con el marcado de
   site/index.html: `.grid-cards` envuelve a cada <a class="card">, y
   dentro cuelgan `.picto`, `.name` y `.detalle`.

   OJO: una versión anterior de este archivo estilaba `.grid-tarjetas`
   / `.tarjeta` / `.nombre` (nombres en español). Cuando el HTML se
   renombró a `.grid-cards` / `.card` / `.name` el CSS se quedó atrás y
   las cards se quedaron SIN ESTILO: al ser <a> en línea, el texto se
   montaba unas encima de otras. Si algún día se renombra una clase en
   el marcado, hay que renombrarla aquí en el mismo commit.

   Se usan áreas de grid en vez de flex para que el nombre y la
   descripción se apilen a la derecha del pictograma, en vez de ocupar
   las dos el mismo ancho (los nombres largos se partían en media
   pantalla). */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--espacio-grande);
}

.grid-cards > .card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "picto name"
    "picto detalle";
  align-items: center;
  column-gap: var(--espacio);
  row-gap: 2px;
  min-height: 84px;
  min-width: 0;
  padding: 12px var(--espacio);
  background: var(--color-superficie);
  border: 3px solid var(--acento-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-decoration: none;
  text-align: left;
  color: var(--color-texto);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.grid-cards > .card:hover,
.grid-cards > .card:focus-visible {
  transform: scale(1.02);
  border-color: var(--acento);
}

.grid-cards .picto {
  grid-area: picto;
  font-size: 36px;
  line-height: 1.1;
  text-align: center;
}

.grid-cards .name {
  grid-area: name;
  align-self: end;
  font-size: var(--texto-base);
  font-weight: 800;
  color: var(--acento);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.grid-cards .detalle {
  grid-area: detalle;
  align-self: start;
  font-size: var(--texto-pequeno);
  color: var(--color-texto-suave);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Compactación extra cuando la ventana es alta (escritorio típico).
   Se aplica por altura, no por ancho, así no afecta a móviles en
   vertical (donde sigue haciendo falta scroll por el ancho reducido).
   El texto de las cards NO se oculta: es la explicación en lenguaje
   claro de qué hace cada actividad (UNE 153101). */
@media (min-height: 720px) {
  .cabecera {
    padding: 4px 0;
  }
  .cabecera h1 {
    font-size: var(--texto-grande);
  }
  .saludo {
    font-size: var(--texto-base);
  }
  .modulos {
    gap: var(--espacio-grande);
  }
  .grid-cards > .card {
    min-height: 72px;
    padding: 8px var(--espacio);
  }
  .grid-cards .picto {
    font-size: 32px;
  }
}

/* En pantallas anchas (escritorio), las cards se reparten en columnas
   para aprovechar mejor el espacio. */
@media (min-width: 720px) {
  .grid-cards {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--espacio);
  }
  .grid-cards > .card {
    min-height: 72px;
    padding: 8px var(--espacio);
  }
  .grid-cards .picto {
    font-size: 32px;
  }
}

@media (min-width: 720px) and (min-height: 720px) {
  .grid-cards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
  }
  .grid-cards > .card {
    min-height: 64px;
    padding: 6px var(--espacio);
  }
  .grid-cards .picto {
    font-size: 26px;
  }
  .grid-cards .name {
    font-size: var(--texto-pequeno);
  }
}

/* En móvil (vertical), cabecera de nuevo vertical y cards verticales
   con el pictograma encima, centradas. */
@media (max-width: 719px) {
  .cabecera {
    flex-direction: column;
  }
  .cabecera-der {
    grid-template-columns: 1fr;
    grid-template-areas:
      "idiomas"
      "estrellas"
      "titulo"
      "saludo"
      "hermanas";
    text-align: center;
  }
  .cabecera-der .idioma-selector,
  .cabecera-der .cabecera-hermanas,
  .cabecera-der .stars { justify-content: center; justify-self: center; }
  .cabecera-der h1 { text-align: center; }
  .grid-cards {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .grid-cards > .card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "picto"
      "name"
      "detalle";
    justify-items: center;
    text-align: center;
    min-height: 140px;
    padding: 12px 8px;
  }
  .grid-cards .picto {
    font-size: 48px;
  }
  .grid-cards .name,
  .grid-cards .detalle { align-self: center; }
}

/* Compact suite header: branding and controls share one row. */
header.suite-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding-block: 8px;
  margin-bottom: 0;
  text-align: left;
}
.suite-header .suite-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
}
.suite-header .suite-brand > img,
.suite-header .hero-mark { width: 44px; height: 44px; flex: 0 0 44px; margin: 0; }
.suite-header .hero-mark img { width: 100%; height: 100%; }
.suite-header .suite-brand-copy { min-width: 0; }
.suite-header .suite-brand-copy h1,
.suite-header .suite-brand-copy .logo,
.suite-header .brand {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--mod-razonamiento);
  font-size: 28px;
  line-height: 1.1;
  text-align: left;
}
.suite-header .suite-attribution {
  position: static;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  color: inherit;
}
.suite-attribution a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
.suite-attribution a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.suite-header .suite-controls,
.suite-header .suite-controls [role="group"] { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; margin: 0; }
.suite-header .suite-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.2;
  border-width: 2px;
  white-space: nowrap;
}
.suite-header .locale-short { display: none; }
.suite-header .suite-details {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.suite-header .suite-details .fila { justify-content: flex-start; min-width: 0; flex: 1; margin: 0; gap: 8px; }
.suite-header .saludo,
.suite-header .tagline { font-weight: 400; color: var(--color-texto-suave); margin: 0; max-width: none; font-size: 18px; line-height: 1.35; text-align: left; }
.suite-header .stars { min-height: 0; background: var(--accent-2-soft, #F7EFDD); border-radius: 999px; flex: 0 0 auto; margin: 0; padding: 2px 8px; font-size: 18px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 650px) {
  header.suite-header { gap: 6px 8px; padding-block: 8px; margin-bottom: 0; }
  .suite-header .suite-brand { gap: 8px; }
  .suite-header .suite-brand > img,
  .suite-header .hero-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .suite-header .suite-brand-copy h1,
  .suite-header .suite-brand-copy .logo,
  .suite-header .brand { font-size: 22px; }
  .suite-header .locale-full { display: none; }
  .suite-header .locale-short { display: inline; }
  .suite-header .suite-controls button { padding-inline: 6px; }
  .suite-header .saludo,
  .suite-header .tagline { font-size: 16px; }
}


/* Match Memofun's top inset without changing activity containers. */
.container.suite-home { padding-top: 0; }
.suite-header + .anclas-modulo { padding-top: 8px; }
@media (max-width: 650px) {
  .container.suite-home { padding-inline: 12px; }
}