/* Estilos comunes de "Aprende Jugando" */
:root {
  --fondo: #fff8ec;
  --texto: #2d2a32;
  --suave: #6b6475;
  --borde: #eadfcb;
  --acento: #3aa76d;
}

/* Color de cada asignatura */
.cono   { --acento: #3aa76d; }
.mates  { --acento: #e8833a; }
.lengua { --acento: #d64f7a; }
.ingles { --acento: #3b7dd8; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-size: 19px;
  color: var(--texto);
  background: var(--fondo);
}

.cabecera {
  background: var(--acento);
  color: #fff;
  padding: 20px 16px 28px;
  text-align: center;
}
.cabecera h1 { margin: 4px 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.cabecera a  { color: #fff; font-weight: bold; text-decoration: none; }

.envoltorio { max-width: 960px; margin: 0 auto; padding: 16px; }
h2 { text-align: center; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: #fff;
  border: 3px solid var(--borde);
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
}
.tarjeta:hover { border-color: var(--acento); }
.tarjeta .icono  { font-size: 3.5rem; }
.tarjeta .nombre { font-size: 1.3rem; font-weight: bold; }

.boton {
  padding: 12px 28px;
  border: 0;
  border-radius: 99px;
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.vacio {
  padding: 48px 16px;
  text-align: center;
  color: var(--suave);
  border: 3px dashed var(--borde);
  border-radius: 20px;
}