/* ==========================================================================
   Maestros Mundi · Hoja de estilos principal
   Recursos educativos e inclusivos para familias, docentes y aula
   Diseño: Aidu24 · Pictogramas: ARASAAC (Sergio Palao) CC BY-NC-SA
   ========================================================================== */

/* ---------- 1. Tokens de diseño ---------- */
:root{
  /* Marca */
  --azul:        #0072BC;   /* azul del autismo: color eje del proyecto */
  --azul-oscuro: #0A4F80;
  --azul-claro:  #E7F3FB;
  --amarillo:    #FFC43D;
  --coral:       #FF6B6B;
  --verde:       #17B890;
  --morado:      #7C5CFF;
  --melocoton:   #FFF1E6;

  /* Neutros */
  --tinta:       #0F2233;
  --tinta-2:     #3C5470;
  --tinta-3:     #6B7F96;
  --linea:       #DDE6EF;
  --fondo:       #F6F9FC;
  --blanco:      #FFFFFF;

  /* Tipografía */
  --fuente: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  --escala: 1;               /* se ajusta con el botón A+ / A- */

  /* Métricas */
  --radio: 18px;
  --radio-sm: 12px;
  --radio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(15,34,51,.06), 0 8px 24px rgba(15,34,51,.06);
  --sombra-2: 0 12px 34px rgba(15,34,51,.12);
  --ancho: 1180px;
  --header-h: 68px;
}

/* ---------- 2. Reset suave ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  font-size:calc(16px * var(--escala));
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--fuente);
  color:var(--tinta);
  background:var(--fondo);
  line-height:1.65;
  font-size:1rem;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul-oscuro);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--fuente-titulo);line-height:1.2;color:var(--tinta);margin:0 0 .5rem}
h1{font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.5px}
h2{font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.3px}
h3{font-size:1.22rem}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-left:1.2rem}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px;border-radius:6px}

/* ---------- 3. Utilidades ---------- */
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding:64px 0}
.seccion--ajustada{padding:40px 0}
.seccion--color{background:var(--blanco)}
.centrado{text-align:center}
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.oculto{display:none !important}
.salto-linea{display:block}
.etiqueta-seccion{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--azul-claro);color:var(--azul-oscuro);
  font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:var(--radio-pill);margin-bottom:.9rem;
}
.entradilla{font-size:1.08rem;color:var(--tinta-2);max-width:70ch}
.centrado .entradilla{margin-left:auto;margin-right:auto}

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.7rem 1.3rem;border-radius:var(--radio-pill);
  font-weight:800;font-size:1rem;border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-decoration:none !important;line-height:1.1;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primario{background:var(--azul);color:#fff;box-shadow:0 8px 20px rgba(0,114,188,.28)}
.btn--primario:hover{background:var(--azul-oscuro)}
.btn--amarillo{background:var(--amarillo);color:#3A2B00;box-shadow:0 8px 20px rgba(255,196,61,.35)}
.btn--claro{background:#fff;color:var(--azul-oscuro);border-color:var(--linea)}
.btn--claro:hover{border-color:var(--azul)}
.btn--fantasma{background:transparent;color:var(--azul-oscuro);border-color:var(--azul)}
.btn--pequeno{min-height:38px;padding:.45rem .9rem;font-size:.9rem}
.btn--bloque{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- 5. Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);
}
.cabecera__barra{
  display:flex;align-items:center;gap:1rem;min-height:var(--header-h);
}
.marca{display:flex;align-items:center;gap:.65rem;text-decoration:none !important}
.marca__logo{width:42px;height:42px;flex:0 0 auto}
.marca__texto{display:flex;flex-direction:column;line-height:1.05}
.marca__nombre{font-family:var(--fuente-titulo);font-weight:800;font-size:1.18rem;color:var(--tinta)}
.marca__lema{font-size:.72rem;color:var(--tinta-3);font-weight:700;letter-spacing:.04em;text-transform:uppercase}

.menu{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.menu a{
  padding:.55rem .78rem;border-radius:var(--radio-pill);color:var(--tinta-2);
  font-weight:700;font-size:.95rem;text-decoration:none !important;
}
.menu a:hover{background:var(--azul-claro);color:var(--azul-oscuro)}
.menu a[aria-current="page"]{background:var(--azul);color:#fff}
.menu__acciones{display:flex;align-items:center;gap:.4rem;margin-left:.5rem}
.icono-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:1.05rem;color:var(--tinta-2);transition:background .15s ease,color .15s ease
}
.icono-btn:hover{background:var(--azul-claro);color:var(--azul-oscuro)}
.hamburguesa{display:none}

@media (max-width:1000px){
  .hamburguesa{display:inline-flex}
  .menu{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--linea);padding:.6rem 16px 1rem;gap:.1rem;
    transform:translateY(-130%);transition:transform .28s ease;box-shadow:var(--sombra-2)
  }
  .menu.abierto{transform:translateY(0)}
  .menu a{padding:.85rem 1rem;font-size:1.05rem}
  .menu__acciones{margin-left:0;padding-top:.5rem;border-top:1px solid var(--linea)}
}

/* ---------- 6. Portada ---------- */
.portada{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 420px at 88% -10%, rgba(255,196,61,.28), transparent 60%),
    radial-gradient(900px 420px at 6% 0%, rgba(23,184,144,.20), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%, var(--fondo) 100%);
  padding:70px 0 60px;
}
.portada__rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.portada h1 span{color:var(--azul)}
.portada__acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0 1.1rem}
.portada__avales{display:flex;flex-wrap:wrap;gap:1.2rem;color:var(--tinta-3);font-size:.88rem;font-weight:700}
.portada__avales span{display:inline-flex;align-items:center;gap:.4rem}

.mosaico{position:relative;min-height:330px}
.mosaico__tarjeta{
  position:absolute;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra-1);padding:12px;display:flex;align-items:center;justify-content:center;
  animation:flotar 5.5s ease-in-out infinite
}
.mosaico__tarjeta img{width:100%;height:100%;object-fit:contain}
.mosaico__tarjeta:nth-child(1){width:130px;height:130px;top:6px;left:6%;animation-delay:.1s}
.mosaico__tarjeta:nth-child(2){width:104px;height:104px;top:26px;right:10%;animation-delay:.7s}
.mosaico__tarjeta:nth-child(3){width:150px;height:150px;bottom:8px;left:24%;animation-delay:1.3s;background:var(--melocoton)}
.mosaico__tarjeta:nth-child(4){width:118px;height:118px;bottom:36px;right:4%;animation-delay:1.9s}
.mosaico__tarjeta:nth-child(5){width:96px;height:96px;top:46%;left:-2%;animation-delay:2.4s}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){
  .mosaico__tarjeta{animation:none}
  html{scroll-behavior:auto}
}
@media (max-width:900px){
  .portada__rejilla{grid-template-columns:1fr}
  .mosaico{min-height:260px;order:2}
}

/* ---------- 7. Selector de perfil ---------- */
.perfiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.perfil{
  background:#fff;border:2px solid var(--linea);border-radius:var(--radio);padding:22px;
  text-align:left;cursor:pointer;transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease
}
.perfil:hover{transform:translateY(-3px);box-shadow:var(--sombra-1)}
.perfil[aria-pressed="true"]{border-color:var(--azul);box-shadow:0 10px 26px rgba(0,114,188,.16)}
.perfil__emoji{font-size:1.9rem}
.perfil h3{margin:.4rem 0 .3rem}
.perfil p{margin:0;color:var(--tinta-2);font-size:.94rem}
@media (max-width:780px){.perfiles{grid-template-columns:1fr}}

/* ---------- 8. Tarjetas ---------- */
.rejilla{display:grid;gap:20px}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.rejilla--3,.rejilla--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:1fr}}

.tarjeta{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:20px;
  display:flex;flex-direction:column;gap:.6rem;box-shadow:var(--sombra-1);
  transition:transform .18s ease, box-shadow .18s ease
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-2)}
.tarjeta__cabecera{display:flex;align-items:flex-start;gap:.8rem}
.tarjeta__picto{
  width:56px;height:56px;flex:0 0 56px;border-radius:var(--radio-sm);
  background:var(--azul-claro);display:flex;align-items:center;justify-content:center;overflow:hidden
}
.tarjeta__picto img{width:48px;height:48px;object-fit:contain}
.tarjeta h3{margin:0}
.tarjeta p{color:var(--tinta-2);font-size:.95rem;margin:0}
.tarjeta__pie{margin-top:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-top:.4rem}

.app-destacada{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sombra-1);transition:transform .18s ease, box-shadow .18s ease
}
.app-destacada:hover{transform:translateY(-4px);box-shadow:var(--sombra-2)}
.app-destacada__cinta{padding:16px 18px;color:#fff;display:flex;align-items:center;gap:.7rem}
.app-destacada__cinta--azul{background:linear-gradient(135deg,#0072BC,#2A96D8)}
.app-destacada__cinta--morado{background:linear-gradient(135deg,#7C5CFF,#A18BFF)}
.app-destacada__cinta--verde{background:linear-gradient(135deg,#17B890,#4BD3AE)}
.app-destacada__cinta--coral{background:linear-gradient(135deg,#FF6B6B,#FF9A8B)}
.app-destacada__cinta--amarillo{background:linear-gradient(135deg,#FFC43D,#FFD976);color:#3A2B00}
.app-destacada__cinta h3{color:inherit;margin:0;font-size:1.15rem}
.app-destacada__cinta span{font-size:1.5rem}
.app-destacada__cuerpo{padding:18px;display:flex;flex-direction:column;gap:.7rem;flex:1}
.app-destacada__cuerpo p{margin:0;color:var(--tinta-2);font-size:.95rem}
.app-destacada__cuerpo .btn,.app-destacada__cuerpo .tarjeta__pie{margin-top:auto}

/* ---------- 9. Chips y etiquetas ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  border:1px solid var(--linea);background:#fff;color:var(--tinta-2);border-radius:var(--radio-pill);
  padding:.42rem .85rem;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .15s ease
}
.chip:hover{border-color:var(--azul);color:var(--azul-oscuro)}
.chip[aria-pressed="true"],.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff}
.chip--estatico{cursor:default;font-weight:700;font-size:.78rem;padding:.25rem .65rem;background:var(--azul-claro);border-color:transparent;color:var(--azul-oscuro)}
.chip--verde{background:#E4F7F1;color:#0B6B53}
.chip--coral{background:#FFEDEC;color:#A63434}
.chip--amarillo{background:#FFF6DE;color:#7A5700}
.chip--morado{background:#EFEBFF;color:#4B34B8}

/* ---------- 10. Buscador / formularios ---------- */
.buscador{position:relative;display:flex;gap:.6rem;flex-wrap:wrap}
.campo{
  flex:1 1 260px;position:relative;display:flex;align-items:center;
  background:#fff;border:2px solid var(--linea);border-radius:var(--radio-pill);padding:0 .4rem 0 1rem;
  transition:border-color .15s ease
}
.campo:focus-within{border-color:var(--azul)}
.campo input,.campo select,.campo textarea{
  border:0;background:transparent;font:inherit;color:inherit;padding:.85rem 0;width:100%;outline:none
}
.campo__icono{font-size:1.05rem;color:var(--tinta-3);margin-right:.4rem}
.campo--area{border-radius:var(--radio);align-items:flex-start;flex-direction:column;padding:.8rem 1rem;gap:.35rem}
.campo--area textarea{resize:vertical;min-height:110px;width:100%}
.campo__etiqueta{font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3)}

.filtros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
@media (max-width:900px){.filtros{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.filtros{grid-template-columns:1fr}}
.filtros label{display:block;font-size:.82rem;font-weight:800;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}
.filtros select,.filtros input{
  width:100%;padding:.7rem .9rem;border:2px solid var(--linea);border-radius:var(--radio-sm);
  font:inherit;background:#fff;color:var(--tinta)
}
.filtros select:focus,.filtros input:focus{border-color:var(--azul);outline:none}

.resultado-info{margin:1.1rem 0 .4rem;color:var(--tinta-3);font-weight:700;font-size:.9rem}

/* ---------- 11. Visor de pictogramas ---------- */
.picto-visor{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:16px;
  display:flex;flex-direction:column;gap:.6rem;align-items:center;text-align:center
}
.picto-visor__marco{
  width:100%;aspect-ratio:1/1;background:var(--azul-claro);border-radius:var(--radio-sm);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px
}
.picto-visor__marco img{max-width:100%;max-height:100%;object-fit:contain}
.picto-visor__marco--cargando::after{
  content:"";width:26px;height:26px;border-radius:50%;border:3px solid var(--azul);
  border-top-color:transparent;animation:girar .8s linear infinite
}
@keyframes girar{to{transform:rotate(360deg)}}
.picto-visor strong{font-family:var(--fuente-titulo);font-size:1.02rem}
.picto-visor small{color:var(--tinta-3)}

/* Escenario tipo Pictomóvil */
.pantalla-picto{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra-1)
}
.pantalla-picto__barra{
  background:var(--azul);color:#fff;padding:.6rem .9rem;display:flex;align-items:center;gap:.6rem;font-weight:800
}
.pantalla-picto__barra img{width:28px;height:28px;object-fit:contain;border-radius:8px;background:#fff;padding:2px}
.pantalla-picto__marco{
  min-height:330px;display:flex;align-items:center;justify-content:center;background:#F4F8FC;padding:18px
}
.pantalla-picto__marco img{max-height:330px;object-fit:contain}
.pantalla-picto__texto{font-family:var(--fuente-titulo);font-size:1.4rem;text-transform:capitalize;text-align:center}
.pantalla-picto__vacio{color:var(--tinta-3);text-align:center;max-width:32ch}

/* ---------- 12. Cantapicto ---------- */
.cancion{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:20px;box-shadow:var(--sombra-1)}
.cancion__cabecera{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between}
.cancion__letra{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.1rem}
.cancion__linea{
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:flex-start;
  padding:.6rem .7rem;border-radius:var(--radio-sm);transition:background .25s ease
}
.cancion__linea.activa{background:#FFF6DE}
.cancion__palabra{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:74px;max-width:104px;
  cursor:pointer;border-radius:var(--radio-sm);padding:.3rem
}
.cancion__palabra:hover{background:var(--azul-claro)}
.cancion__palabra img{width:64px;height:64px;object-fit:contain}
.cancion__palabra span{font-size:.8rem;font-weight:700;color:var(--tinta-2);text-align:center;line-height:1.2}
.cancion__palabra.oculta img{opacity:0}
.cancion__palabra.oculta span{visibility:visible}
.modo-letra .cancion__palabra span{display:none}
.modo-pictos .cancion__palabra img{display:none}
.controles-cancion{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
.velocidad{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--tinta-2)}
.velocidad input{width:130px}

/* ---------- 13. Juegos ---------- */
.juego{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra-1)}
.juego__marcador{display:flex;gap:1.4rem;flex-wrap:wrap;margin:0 0 1rem;font-weight:800;color:var(--tinta-2)}
.juego__marcador b{color:var(--azul-oscuro)}
.tablero-memoria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:560px){.tablero-memoria{grid-template-columns:repeat(3,1fr)}}
.carta{
  aspect-ratio:1/1;border:2px solid var(--linea);border-radius:var(--radio-sm);background:#fff;
  cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;padding:6px;
  transition:transform .15s ease, border-color .15s ease
}
.carta:hover{transform:translateY(-2px);border-color:var(--azul)}
.carta__dorso{font-size:1.8rem;color:var(--azul)}
.carta img{width:78%;height:78%;object-fit:contain}
.carta.girada{background:var(--azul-claro);border-color:var(--azul)}
.carta.acertada{border-color:var(--verde);background:#E4F7F1;cursor:default}
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.opciones{grid-template-columns:1fr}}
.opcion{
  border:2px solid var(--linea);border-radius:var(--radio-sm);background:#fff;padding:14px;cursor:pointer;
  font-weight:800;font-size:1.05rem;color:var(--tinta);min-height:58px;transition:all .15s ease
}
.opcion:hover{border-color:var(--azul)}
.opcion.correcta{border-color:var(--verde);background:#E4F7F1}
.opcion.incorrecta{border-color:var(--coral);background:#FFEDEC}
.picto-grande{
  display:flex;align-items:center;justify-content:center;background:var(--azul-claro);border-radius:var(--radio);
  min-height:230px;margin-bottom:1rem;padding:12px
}
.picto-grande img{max-height:210px;object-fit:contain}

/* ---------- 14. Agenda visual ---------- */
.agenda{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
@media (max-width:900px){.agenda{grid-template-columns:1fr}}
.agenda__pasos{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.agenda__paso{
  display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio-sm);padding:.5rem .7rem
}
.agenda__paso img{width:42px;height:42px;object-fit:contain}
.agenda__paso span{flex:1;font-weight:700;text-transform:capitalize}
.agenda__paso button{
  border:1px solid var(--linea);background:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--coral)
}
.hoja-agenda{
  background:#fff;border:2px dashed var(--linea);border-radius:var(--radio);padding:18px
}
.hoja-agenda__linea{
  display:flex;align-items:center;gap:.7rem;border-bottom:1px solid var(--linea);padding:.45rem 0;min-height:62px
}
.hoja-agenda__linea img{width:46px;height:46px;object-fit:contain}
.hoja-agenda__linea b{font-family:var(--fuente-titulo)}
.hoja-agenda__hora{color:var(--tinta-3);font-weight:800;min-width:64px}

/* ---------- 15. Contenido largo / artículos ---------- */
.articulo{max-width:78ch}
.articulo h2{margin-top:2rem}
.aviso{
  background:var(--melocoton);border-left:6px solid var(--amarillo);border-radius:var(--radio-sm);
  padding:1rem 1.2rem;margin:1.4rem 0
}
.aviso--azul{background:var(--azul-claro);border-left-color:var(--azul)}
.aviso--verde{background:#E4F7F1;border-left-color:var(--verde)}
.aviso p:last-child{margin-bottom:0}
.pasos{list-style:none;counter-reset:paso;padding:0;margin:1.2rem 0;display:flex;flex-direction:column;gap:.9rem}
.pasos li{counter-increment:paso;position:relative;padding-left:3rem;min-height:2.2rem}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800
}
.enlaces-utiles{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem}
.enlaces-utiles li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-sm);padding:.75rem 1rem}
.enlaces-utiles a{font-weight:800}
.enlaces-utiles small{display:block;color:var(--tinta-3);font-weight:600}

/* ---------- 16. Pie ---------- */
.pie{background:#0F2233;color:#C7D5E3;margin-top:60px;padding:52px 0 26px}
.pie a{color:#E7F3FB}
.pie__rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px}
@media (max-width:860px){.pie__rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__rejilla{grid-template-columns:1fr}}
.pie h4{color:#fff;font-size:1rem;margin-bottom:.7rem}
.pie ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem;font-size:.94rem}
.pie__marca{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.pie__marca .marca__nombre{color:#fff}
.pie__marca .marca__lema{color:#8EA6BD}
.pie__legal{
  margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;color:#9FB3C6;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between
}
.creditos-arasaac{
  background:rgba(255,255,255,.06);border-radius:var(--radio-sm);padding:.8rem 1rem;font-size:.85rem;color:#B8C9DA
}
.creditos-arasaac strong{color:#fff}

/* ---------- 17. Aviso de pictograma ausente ---------- */
.sin-datos{
  border:2px dashed var(--linea);border-radius:var(--radio);padding:2rem 1.2rem;text-align:center;color:var(--tinta-3)
}

/* ---------- 18. Animación de entrada ---------- */
.aparece{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.aparece{opacity:1;transform:none;transition:none}}

/* ---------- 20. Material del aula: fichas, cuadernos y apps ---------- */
.ficha-tarjeta{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;
  display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--sombra-1);
  transition:transform .18s ease, box-shadow .18s ease
}
.ficha-tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.ficha-tarjeta h3{margin:0}
.ficha-tarjeta__minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ficha-tarjeta__minis img{
  width:100%;height:180px;object-fit:contain;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio-sm);padding:4px;cursor:zoom-in
}
.ficha-tarjeta__meta{font-size:.84rem;color:var(--tinta-3);font-weight:800;margin:0;letter-spacing:.01em}
.ficha-tarjeta__pie{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.3rem}
.ficha-tarjeta--ancha{grid-column:1/-1}
.ficha-tarjeta__lamina{
  width:100%;height:230px;object-fit:cover;border:1px solid var(--linea);
  border-radius:var(--radio-sm);background:#fff;cursor:zoom-in
}
.ficha-tarjeta__nota{font-size:.86rem;color:var(--tinta-3);margin:0}
.ficha-tarjeta__minis--tarjetas{grid-template-columns:repeat(3,1fr)}
.ficha-tarjeta__tarjeta{margin:0;display:flex;flex-direction:column;gap:4px}
.ficha-tarjeta__tarjeta img{
  width:100%;height:130px;object-fit:contain;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio-sm);padding:4px
}
.ficha-tarjeta__tarjeta figcaption{
  font-size:.78rem;text-align:center;color:var(--tinta-2);font-weight:700;text-transform:capitalize
}
.tarjeta__emoji{font-size:2.5rem;line-height:1;display:block;text-align:center}
.pinta-marco{
  border:2px dashed var(--linea);border-radius:var(--radio);padding:14px;background:#fff;
  display:grid;gap:12px
}
.pinta-marco img{width:100%;border-radius:var(--radio-sm);border:1px solid var(--linea)}
.tabla-material{width:100%;border-collapse:collapse;margin-top:1rem}
.tabla-material th,.tabla-material td{border-bottom:1px solid var(--linea);padding:.6rem .5rem;text-align:left;font-size:.94rem}
.tabla-material th{color:var(--tinta-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:640px){
  .ficha-tarjeta__minis{grid-template-columns:repeat(2,1fr)}
  .ficha-tarjeta__minis img{height:132px}
  .ficha-tarjeta__lamina{height:170px}
}

/* ---------- 19. Impresión ---------- */
@media print{
  .cabecera,.pie,.portada__acciones,.controles-cancion,.juego__marcador,.no-imprimir{display:none !important}
  body{background:#fff}
  .hoja-agenda{border-style:solid;page-break-inside:avoid}
  .seccion{padding:10px 0}
}