/* El Jardín de las Emociones · estilos comunes */

/* Letras de la web, alojadas aquí mismo (no se pide nada a otros servidores).
   Fredoka y Nunito, con licencia libre SIL Open Font License 1.1 (ver fuentes/LICENCIA-*.txt). */
@font-face {
  font-family: "Fredoka";
  src: url("fuentes/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fuentes/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #fffaf0;
  --fondo-2: #fffdf7;
  --fondo-claro: #e3f6e8;
  --tarjeta: #ffffff;
  --texto: #2b3350;
  --texto-suave: #58607a;
  --borde: #e4e7f2;
  --verde: #17854a;
  --verde-oscuro: #0f6638;
  --amarillo: #ffc83d;
  --azul: #1a73c4;
  --rosa: #d6336c;
  --rojo: #d93a4a;
  --morado: #6d4fe0;
  --naranja: #c2530a;
  --cielo: #bfe6ff;
  --error: #b8392d;
  --error-fondo: #fdecea;
  --sombra: 0 12px 30px rgba(50, 60, 120, 0.14);
  --sombra-suave: 0 5px 16px rgba(50, 60, 120, 0.11);
  --radio: 28px;
  --letra: "Nunito", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --letra-titulos: "Fredoka", "Nunito", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; }

/* Fondo: un cielo con nubes arriba que se funde con un color crema, y confeti muy suave */
body {
  min-height: 100vh;
  font-family: var(--letra);
  font-size: 1.1rem;
  color: var(--texto);
  background-color: var(--fondo);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1600 420%27%3E%3Cg fill=%27%23fff%27 fill-opacity=%27.85%27%3E%3Cg transform=%27translate(60 40) scale(1.25)%27%3E%3Cellipse cx=%2760%27 cy=%2750%27 rx=%2760%27 ry=%2724%27/%3E%3Ccircle cx=%2740%27 cy=%2736%27 r=%2724%27/%3E%3Ccircle cx=%2774%27 cy=%2728%27 r=%2730%27/%3E%3Ccircle cx=%27100%27 cy=%2744%27 r=%2720%27/%3E%3C/g%3E%3Cg transform=%27translate(520 150) scale(.8)%27%3E%3Cellipse cx=%2760%27 cy=%2750%27 rx=%2760%27 ry=%2724%27/%3E%3Ccircle cx=%2740%27 cy=%2736%27 r=%2724%27/%3E%3Ccircle cx=%2774%27 cy=%2728%27 r=%2730%27/%3E%3Ccircle cx=%27100%27 cy=%2744%27 r=%2720%27/%3E%3C/g%3E%3Cg transform=%27translate(900 20) scale(1)%27%3E%3Cellipse cx=%2760%27 cy=%2750%27 rx=%2760%27 ry=%2724%27/%3E%3Ccircle cx=%2740%27 cy=%2736%27 r=%2724%27/%3E%3Ccircle cx=%2774%27 cy=%2728%27 r=%2730%27/%3E%3Ccircle cx=%27100%27 cy=%2744%27 r=%2720%27/%3E%3C/g%3E%3Cg transform=%27translate(1330 110) scale(1.4)%27%3E%3Cellipse cx=%2760%27 cy=%2750%27 rx=%2760%27 ry=%2724%27/%3E%3Ccircle cx=%2740%27 cy=%2736%27 r=%2724%27/%3E%3Ccircle cx=%2774%27 cy=%2728%27 r=%2730%27/%3E%3Ccircle cx=%27100%27 cy=%2744%27 r=%2720%27/%3E%3C/g%3E%3Cg transform=%27translate(250 270) scale(.65)%27%3E%3Cellipse cx=%2760%27 cy=%2750%27 rx=%2760%27 ry=%2724%27/%3E%3Ccircle cx=%2740%27 cy=%2736%27 r=%2724%27/%3E%3Ccircle cx=%2774%27 cy=%2728%27 r=%2730%27/%3E%3Ccircle cx=%27100%27 cy=%2744%27 r=%2720%27/%3E%3C/g%3E%3Cg transform=%27translate(1090 300) scale(.6)%27%3E%3Cellipse cx=%2760%27 cy=%2750%27 rx=%2760%27 ry=%2724%27/%3E%3Ccircle cx=%2740%27 cy=%2736%27 r=%2724%27/%3E%3Ccircle cx=%2774%27 cy=%2728%27 r=%2730%27/%3E%3Ccircle cx=%27100%27 cy=%2744%27 r=%2720%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #bfe6ff 0, #d9f1ff 260px, #fff1d6 680px, #fffaf0 920px),
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 320 320%27%3E%3Cg fill-opacity=%27.3%27%3E%3Ccircle cx=%2730%27 cy=%2740%27 r=%275%27 fill=%27%23ffd98a%27/%3E%3Ccircle cx=%27200%27 cy=%2790%27 r=%274%27 fill=%27%23bfe6ff%27/%3E%3Ccircle cx=%27110%27 cy=%27190%27 r=%276%27 fill=%27%23ffc9d6%27/%3E%3Ccircle cx=%27280%27 cy=%27240%27 r=%275%27 fill=%27%23c9efd3%27/%3E%3Ccircle cx=%2760%27 cy=%27290%27 r=%274%27 fill=%27%23d9cffb%27/%3E%3Cpath d=%27M250 30l3 7 7 3-7 3-3 7-3-7-7-3 7-3z%27 fill=%27%23ffd98a%27/%3E%3Cpath d=%27M150 120l2.500 6 6 2.500-6 2.500-2.500 6-2.500-6-6-2.500 6-2.500z%27 fill=%27%23c9efd3%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center 70px, 0 0, 0 920px;
  background-size: max(1100px, 100%) auto, 100% 920px, 320px 320px;
  line-height: 1.45;
}

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

a { color: var(--verde-oscuro); }

:focus-visible { outline: 4px solid #1f5fbf; outline-offset: 3px; border-radius: 8px; }

.oculto { display: none !important; }

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  padding: 10px 16px;
  background: var(--verde-oscuro);
  color: #fff;
  border-radius: 12px;
  z-index: 10;
}

.saltar:focus { top: 16px; }

.ancho { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.contenedor { width: 100%; max-width: 640px; margin: 0 auto; padding: 32px 16px 48px; }

/* ---------- Portada de la página de inicio ---------- */

.portada-inicio {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 16px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.portada-texto { text-align: center; }

.flores { width: 170px; height: auto; margin: 0 auto 8px; }

.titulo {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 1.05;
  margin: 0;
  color: var(--verde-oscuro);
  font-weight: 800;
}

.lema {
  margin: 12px 0 0;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: #b0453a;
  font-weight: 700;
}

.portada-imagen {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 6px solid #fff;
}

.menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.boton-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--color-menu);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  transition: transform 0.1s, box-shadow 0.1s;
}

.boton-menu span { font-size: 1.6rem; }

/* En móvil, si el último botón queda solo en su fila, ocupa todo el ancho */
@media (max-width: 859px) {
  .boton-menu:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* En móviles pequeños, botones algo más compactos para que «Colecciones» quepa */
@media (max-width: 420px) {
  .boton-menu { gap: 6px; padding: 12px 8px; font-size: 1.1rem; }
  .boton-menu span { font-size: 1.35rem; }
}

.boton-menu:hover { transform: translateY(-2px); }

.boton-menu:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22); }

@media (min-width: 860px) {
  .portada-inicio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-top: 48px; }
  .portada-texto { text-align: left; }
  .flores { margin-left: 0; }
  .menu { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Apartados ---------- */

.apartado { padding: 48px 0; }

.apartado-claro { background: var(--fondo-claro); }

.titulo-apartado {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  margin: 0;
  color: var(--texto);
}

.intro { margin: 8px 0 24px; font-size: 1.2rem; color: var(--texto-suave); max-width: 46em; }

/* ---------- Colecciones ---------- */

.rejilla-colecciones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.tarjeta-coleccion {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tarjeta);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  color: inherit;
  text-decoration: none;
  border-bottom: 8px solid var(--color-coleccion);
  transition: transform 0.15s, box-shadow 0.15s;
}

.tarjeta-coleccion:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.imagen-coleccion { width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; }

.textos-coleccion { padding: 16px 18px 18px; }

.nombre-coleccion { margin: 0; font-size: 1.35rem; color: var(--color-coleccion); }

.descripcion-coleccion { margin: 6px 0 10px; color: var(--texto-suave); }

.cuenta-libros {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-coleccion);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---------- Biblioteca: estantes con carrusel ---------- */

.estante {
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 18px;
  margin-bottom: 28px;
  border-top: 10px solid var(--color-coleccion);
  display: grid;
  gap: 18px;
}

.cabecera-estante { display: grid; gap: 14px; }

.imagen-estante {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 18px;
}

.titulo-estante { margin: 0; font-size: 1.6rem; color: var(--color-coleccion); }

@media (min-width: 860px) {
  .estante { grid-template-columns: 320px 1fr; align-items: center; padding: 22px; }
  .cabecera-estante { align-self: start; }
}

.carrusel { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }

.fila-libros {
  list-style: none;
  margin: 0;
  padding: 6px 4px 14px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  flex: 1;
  min-width: 0;
  /* Para que los textos ocultos de los libros (posición absoluta) no se salgan del carrusel */
  position: relative;
}

.fila-libros li { flex: 0 0 auto; width: min(220px, 70vw); scroll-snap-align: start; }

.pestanas-biblioteca { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; }

.pestana {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--verde-oscuro);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
}

.pestana-gratis { background: #b0453a; }

/* Pestañas de la Biblioteca: la elegida va rellena de su color y las demás en blanco con borde */
button.pestana {
  border: 3px solid var(--color-pestana);
  background: var(--color-pestana);
  font-family: inherit;
  cursor: pointer;
}

button.pestana[aria-selected="false"] { background: #fff; color: var(--color-pestana); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); }

.panel-biblioteca { margin-top: 16px; }

.panel-biblioteca:focus-visible { outline-offset: 6px; }

.sello-amazon-libro { background: #a34a0c; }

.sello-pronto { background: #6a55c9; }

.enlace-titulo-libro { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.enlace-titulo-libro:hover { color: var(--verde-oscuro); }

/* «Muy pronto en Amazon»: botón apagado mientras no hay enlace de compra */
.boton.boton-apagado,
.boton.boton-apagado:hover { background: #ece6d8; color: #5f594c; box-shadow: none; cursor: not-allowed; }

.pestana:hover { transform: translateY(-2px); }

.enlace-tienda { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--color-coleccion); }

.rejilla-gratis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.tarjeta-gratis {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tarjeta);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border: 4px solid var(--color-coleccion);
}

.marco-gratis { position: relative; }

.sello-gratis {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #b0453a;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.aviso-gratis {
  margin: 32px 0 0;
  padding: 16px 20px;
  border-radius: 18px;
  background: #fde9e6;
  font-weight: 600;
}

.aviso-gratis a { color: #8f2f26; }

.libro {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 18px;
  padding: 6px;
  transition: transform 0.15s;
}

.libro:hover { transform: translateY(-4px) rotate(-1deg); }

.marco-portada {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border: 4px solid var(--color-coleccion);
}

.imagen-portada { width: 100%; height: auto; aspect-ratio: 641 / 457; object-fit: cover; }

.sello {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.titulo-portada { display: block; margin-top: 10px; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }

.flecha-carrusel {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--color-coleccion);
  color: #fff;
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.flecha-carrusel:disabled { opacity: 0.3; cursor: default; }

.sin-flechas .flecha-carrusel { display: none; }

@media (max-width: 600px) {
  .flecha-carrusel { display: none; }
}

/* ---------- Actividades ---------- */

.subapartado { margin-top: 36px; }

.subapartado:first-of-type { margin-top: 8px; }

.titulo-subapartado { font-size: 1.6rem; margin: 0 0 12px; }

.subapartado .etiqueta { margin-top: 4px; }

.filtro-tipo { max-width: 360px; margin-bottom: 8px; }

.selector {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--texto);
  background: #fff;
  border: 3px solid #cfc6ad;
  border-radius: 14px;
  cursor: pointer;
}

.cuenta-fichas { margin: 14px 0; color: var(--texto-suave); font-weight: 600; }

.rejilla-fichas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.tarjeta-ficha {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tarjeta);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border-top: 8px solid var(--color-coleccion);
}

.miniatura-ficha {
  width: 100%;
  height: auto;
  aspect-ratio: 272 / 360;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--borde);
  background: #fff;
}

.rejilla-cuadernos .miniatura-ficha { aspect-ratio: 4 / 3; }

.textos-ficha { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }

.nivel-ficha { font-size: 0.9rem; font-weight: 700; color: var(--color-coleccion); }

.titulo-ficha { margin: 0; font-size: 1.15rem; line-height: 1.25; }

.instrucciones-ficha { margin: 2px 0 0; color: var(--texto-suave); font-size: 1rem; }

.detalle-ficha { margin: 2px 0 0; font-size: 0.92rem; color: var(--texto-suave); }

.boton-mas { width: fit-content; max-width: 100%; margin: 24px auto 0; display: flex; }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

.filtro {
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  min-height: 48px;
  border-radius: 999px;
  border: 3px solid var(--color-coleccion, var(--verde-oscuro));
  background: #fff;
  color: var(--color-coleccion, var(--verde-oscuro));
  cursor: pointer;
}

.filtro[aria-pressed="true"] { background: var(--color-coleccion, var(--verde-oscuro)); color: #fff; }

.rejilla-actividades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.tarjeta-actividad {
  display: flex;
  gap: 14px;
  height: 100%;
  padding: 14px;
  background: var(--tarjeta);
  border-radius: 20px;
  box-shadow: var(--sombra-suave);
  border-left: 8px solid var(--color-coleccion);
}

.miniatura { width: 104px; height: 74px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }

.textos-actividad { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }

.coleccion-actividad { font-size: 0.9rem; font-weight: 700; color: var(--color-coleccion); }

.titulo-actividad { margin: 0; font-size: 1.05rem; line-height: 1.25; }

.acciones-actividad { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }

/* ---------- Tarjetas, formularios y botones ---------- */

.tarjeta {
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 26px 22px;
}

.tarjeta h2, .tarjeta h3 { margin: 0 0 6px; font-size: 1.4rem; }

.ayuda { margin: 0 0 18px; color: var(--texto-suave); }

.dos-columnas { display: grid; gap: 20px; }

@media (min-width: 800px) {
  .dos-columnas { grid-template-columns: 1fr 1fr; }
}

.etiqueta { display: block; font-weight: 700; margin-bottom: 8px; }

.campo-clave {
  width: 100%;
  font: inherit;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px 14px;
  border: 3px solid #cfc6ad;
  border-radius: 16px;
  background: #fffdf7;
  color: var(--texto);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campo-clave::placeholder { color: #7a7465; letter-spacing: 0.04em; }

.campo-clave:focus { border-color: var(--verde); box-shadow: 0 0 0 5px rgba(47, 138, 76, 0.2); }

.campo-clave.mal { border-color: var(--error); animation: temblor 0.4s; }

@keyframes temblor {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  padding: 14px 20px;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  background: var(--verde);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--verde-oscuro);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
  text-decoration: none;
}

.boton:hover { background: var(--verde-oscuro); }

.boton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--verde-oscuro); }

.boton-secundario { background: var(--amarillo); color: var(--texto); box-shadow: 0 5px 0 #c99a25; }

.boton-secundario:hover { background: #f8cf5f; }

.boton-pequeno { width: auto; min-height: 44px; margin-top: 0; padding: 8px 16px; font-size: 1rem; }

.enlace-descarga { color: var(--verde-oscuro); font-weight: 600; }

.mensaje { min-height: 1.5em; margin: 14px 0 0; text-align: center; font-weight: 600; }

.mensaje.error { color: var(--error); background: var(--error-fondo); border-radius: 12px; padding: 10px 12px; }

.mensaje.bien { color: var(--verde-oscuro); }

.enlace-suave {
  background: none;
  border: none;
  padding: 4px;
  font: inherit;
  color: var(--texto-suave);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Pregunta sorpresa ---------- */

.tarjeta-sorpresa { background: #fff8de; display: flex; flex-direction: column; }

.texto-sorpresa { font-size: 1.4rem; font-weight: 700; margin: 8px 0; flex: 1; }

.libro-sorpresa { margin: 0; color: var(--texto-suave); }

/* ---------- Libros abiertos ---------- */

.mis-libros { margin-top: 32px; }

.mis-libros h3 { font-size: 1.3rem; margin: 0 0 12px; }

.lista-libros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.libro-enlace {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--tarjeta);
  border-radius: 16px;
  box-shadow: var(--sombra-suave);
  color: inherit;
  text-decoration: none;
  border-left: 8px solid var(--color-coleccion, var(--verde));
  transition: transform 0.12s;
}

.libro-enlace:hover { transform: translateX(4px); }

.miniatura-lista { width: 64px; height: 46px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }

.libro-enlace .titulo-libro { font-weight: 700; display: block; line-height: 1.25; }

.libro-enlace .coleccion-libro { font-size: 0.9rem; color: var(--texto-suave); }

.libro-enlace .flecha { margin-left: auto; font-size: 1.6rem; color: var(--texto-suave); }

.pie-lista { margin: 14px 0 0; }

/* ---------- Ventana de clave ---------- */

.ventana {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: none;
  border-radius: var(--radio);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  color: var(--texto);
  background: var(--tarjeta);
}

.ventana::backdrop { background: rgba(47, 58, 43, 0.55); }

.contenido-ventana { position: relative; padding: 22px; border-top: 10px solid var(--color-coleccion, var(--verde)); }

.portada-ventana {
  width: 100%;
  aspect-ratio: 641 / 457;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 14px;
}

.titulo-ventana { margin: 0 0 4px; font-size: 1.4rem; padding-right: 40px; }

.cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--texto);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* ---------- Barra superior: logotipo, buscador y menú ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 252, 244, 0.97);
  border-bottom: 3px solid #f3e6c4;
  box-shadow: 0 4px 16px rgba(70, 60, 30, 0.08);
}

.barra-dentro {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo boton" "buscador buscador";
  gap: 10px 12px;
  align-items: center;
}

.logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--verde-oscuro);
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  line-height: 1.1;
  min-width: 0;
}

.logo-flor { width: 36px; height: 36px; flex: 0 0 auto; }

.buscador { grid-area: buscador; position: relative; }

.campo-buscador {
  width: 100%;
  min-height: 50px;
  padding: 10px 16px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--texto);
  background: #fff;
  border: 3px solid #cfc6ad;
  border-radius: 999px;
  outline: none;
}

.campo-buscador:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(47, 138, 76, 0.2); }

.resultados-buscador {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  max-height: min(420px, 70vh);
  overflow-y: auto;
  z-index: 30;
}

.enlace-resultado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.resultado[aria-selected="true"] .enlace-resultado,
.enlace-resultado:hover { background: var(--fondo-claro); }

.miniatura-resultado { width: 60px; height: 43px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }

.titulo-resultado { display: block; font-weight: 700; line-height: 1.2; }

.coleccion-resultado { font-size: 0.9rem; color: var(--texto-suave); }

.sin-resultados { padding: 12px; color: var(--texto-suave); }

.boton-hamburguesa {
  grid-area: boton;
  min-height: 48px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--verde-oscuro);
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

.menu-sitio { display: none; border-top: 2px solid #f3e6c4; }

.menu-sitio.abierto { display: block; }

.lista-menu {
  list-style: none;
  margin: 0 auto;
  padding: 8px 16px 12px;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.enlace-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 14px;
  color: var(--texto);
  font-weight: 700;
  text-decoration: none;
}

.enlace-menu:hover { background: var(--fondo-claro); }

.enlace-menu[aria-current="page"] { background: var(--verde-oscuro); color: #fff; }

@media (min-width: 980px) {
  .barra-dentro { grid-template-columns: auto 1fr; grid-template-areas: "logo buscador"; gap: 24px; }
  .buscador { max-width: 520px; justify-self: end; width: 100%; }
  .boton-hamburguesa { display: none; }
  .menu-sitio, .menu-sitio.abierto { display: block; }
  .lista-menu { display: flex; flex-wrap: wrap; justify-content: center; padding: 4px 16px 8px; }
  .enlace-menu { min-height: 44px; }
}

html { scroll-padding-top: 150px; }

/* ---------- Tienda ---------- */

.rejilla-tienda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.tarjeta-tienda {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tarjeta);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border-top: 8px solid var(--color-coleccion);
}

.boton-comprar { background: #be5711; box-shadow: 0 4px 0 #8f3f0a; }

.boton-comprar:hover { background: #a94d0f; }

.proximamente {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #f1ece0;
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 0.95rem;
}

.enlace-suave-libro { color: var(--verde-oscuro); font-weight: 600; }

.comprar-libro { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.comprar-centrado { justify-content: center; margin-top: 14px; }

.comprar-centrado:empty { display: none; }

/* ---------- Formulario y lista de propuestas ---------- */

.formulario .etiqueta { margin-top: 14px; }

.formulario .etiqueta:first-child { margin-top: 0; }

.campo {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--texto);
  background: #fffdf7;
  border: 3px solid #cfc6ad;
  border-radius: 14px;
  outline: none;
}

.campo:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(47, 138, 76, 0.2); }

.area { resize: vertical; min-height: 120px; line-height: 1.4; }

.opcional { font-weight: 400; color: var(--texto-suave); }

.aviso-prueba {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff3cd;
  border: 2px solid #ecd28a;
  color: #5a4610;
}

.vacio {
  padding: 22px;
  border-radius: 18px;
  background: var(--tarjeta);
  border: 3px dashed #d8ceb2;
  color: var(--texto-suave);
  text-align: center;
  font-weight: 600;
}

.texto-mensaje { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

.detalle-tema { font-size: 0.95rem; color: var(--texto-suave); }

/* ---------- Propuestas ---------- */

.lista-propuestas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

@media (min-width: 800px) {
  .columnas-propuestas { grid-template-columns: 1fr 1.1fr; align-items: start; }
}

.propuesta { padding: 18px; background: var(--tarjeta); border-radius: 18px; box-shadow: var(--sombra-suave); border-left: 8px solid var(--amarillo); }

.titulo-propuesta { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }

.etiquetas-propuesta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

.etiqueta-edad, .etiqueta-tema { padding: 3px 12px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; }

.etiqueta-edad { background: #e3f5e8; color: var(--verde-oscuro); }

.etiqueta-tema { background: #fde2ea; color: #9c2f52; }

.pie-propuesta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

.boton-apoyo {
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid #e5c55a;
  background: #fffdf3;
  color: var(--texto);
  cursor: pointer;
}

.boton-apoyo[aria-pressed="true"] { background: var(--amarillo); border-color: #c99a25; }

/* ---------- Pie ---------- */

.pie { padding: 28px 16px 36px; text-align: center; color: var(--texto-suave); font-size: 0.95rem; }

.contacto { font-size: 1.05rem; color: var(--texto); }

.contacto a { color: var(--verde-oscuro); font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Página del libro ---------- */

.navegacion { margin-bottom: 20px; }

.volver { color: var(--verde-oscuro); font-weight: 700; text-decoration: none; font-size: 1.1rem; }

.volver:hover { text-decoration: underline; }

/* Ruta de navegación: Tienda › Colección › Libro */
.migas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; }

.migas li + li::before { content: "›"; margin-right: 8px; color: var(--texto-suave); }

.migas a { color: var(--verde-oscuro); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; }

.migas [aria-current] { color: var(--texto-suave); }

.cabecera-libro { text-align: center; margin-bottom: 28px; }

.portada-libro {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  border: 6px solid #fff;
  box-shadow: var(--sombra);
  margin-bottom: 18px;
}

.etiqueta-coleccion {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-coleccion, var(--verde));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.titulo-libro-grande { font-size: clamp(1.8rem, 6vw, 2.4rem); }

.subtitulo { margin: 10px 0 0; color: var(--texto-suave); }

.bloque { margin-top: 32px; }

.titulo-bloque { font-size: 1.5rem; margin: 0 0 4px; }

.lista-preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.pregunta {
  position: relative;
  background: var(--tarjeta);
  border-radius: 18px;
  box-shadow: var(--sombra-suave);
  padding: 18px 18px 16px 66px;
  border: 3px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.pregunta.hecha { border-color: #a9d8b5; background: #f4fbf6; }

.numero {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: var(--color-coleccion, var(--verde));
}

.texto-pregunta { margin: 4px 0 12px; font-size: 1.25rem; font-weight: 600; }

.marca {
  font: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid #cfc6ad;
  background: #fffdf7;
  color: var(--texto-suave);
  cursor: pointer;
}

.marca[aria-pressed="true"] { border-color: var(--verde); background: var(--verde); color: #fff; }

.opciones { display: grid; gap: 8px; }

.opcion {
  font: inherit;
  font-size: 1.15rem;
  text-align: left;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 3px solid #cfc6ad;
  background: #fffdf7;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.opcion:hover:not(:disabled) { border-color: var(--color-coleccion, var(--verde)); }

.opcion:disabled { cursor: default; }

.opcion.correcta { border-color: var(--verde); background: #e3f5e8; font-weight: 700; }

.opcion.correcta::after { content: " ✓"; color: var(--verde-oscuro); }

.opcion.incorrecta { border-color: #efc2bc; background: var(--error-fondo); color: var(--texto-suave); text-decoration: line-through; }

.respuesta { margin: 10px 0 0; min-height: 1.4em; font-weight: 700; }

.respuesta.bien { color: var(--verde-oscuro); }

.respuesta.casi { color: #9a4f17; }

.final-juego {
  margin-top: 16px;
  padding: 20px;
  border-radius: 18px;
  background: #fff6d6;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
}

.final-juego p { margin: 0; }

.final-juego .boton { width: auto; }

.tarjeta-pdf { padding: 22px; }

.tarjeta-pdf .boton { margin-top: 0; }

.tarjeta-pdf .enlace-descarga { display: block; margin-top: 14px; text-align: center; }

.sin-margen { margin: 0; }

@media (max-width: 420px) {
  .pregunta { padding-left: 56px; }
  .numero { left: 12px; width: 32px; height: 32px; }
}

/* ---------- Vídeos ---------- */

.rejilla-videos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 22px;
}

.tarjeta-video {
  margin: 0;
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  border-top: 8px solid #2c6e91;
}

.video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #1d2a33;
}

.pie-video { padding: 14px 18px 18px; }

.titulo-video { font-size: 1.2rem; font-weight: 800; }

/* ---------- Novedad en la página de inicio ---------- */

.apartado-novedad { padding: 32px 0 0; }

.lista-novedades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 18px;
}

.lista-novedades > li { display: flex; }

.boton-mas-novedades { margin-top: 18px; }

@media (max-width: 599px) {
  .lista-novedades:not(.ver-todas) > .novedad-ancha { display: none; }
}

.titulo-novedades { margin-bottom: 18px; }

.sellos-novedad { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }

.sello-amazon {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #2d8449;
  color: #fff;
  font-weight: 800;
}

.sello-gratis-novedad { background: #b0453a; }

.tarjeta-novedad {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  border-top: 10px solid #6f58b0;
}

.imagen-novedad { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }

.textos-novedad { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 18px; }

.sello-nuevo {
  display: inline-block;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: #6f58b0;
  color: #fff;
  font-weight: 800;
}

.titulo-novedad { margin: 0 0 6px; font-size: 1.3rem; color: #4f3d8c; }

.texto-novedad { margin: 0 0 14px; }

.acciones-novedad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }


/* ---------- Ficha de producto de un cuaderno ---------- */

.cabecera-ficha { display: grid; gap: 18px; justify-items: center; text-align: center; }

.portada-ficha {
  width: min(100%, 300px);
  height: auto;
  border-radius: 14px;
  border: 6px solid #fff;
  box-shadow: var(--sombra);
}

.subtitulo-ficha { margin: 8px 0 4px; font-size: 1.2rem; font-weight: 700; color: var(--color-coleccion); }

.detalles-ficha { margin: 0 0 6px; color: var(--texto-suave); font-weight: 700; }

.descripcion-corta { margin: 10px 0 0; font-size: 1.1rem; max-width: 36em; text-align: left; }

.descripcion-libro { margin: 12px auto 0; }

.cabecera-ficha .comprar-libro { justify-content: center; }

@media (min-width: 600px) {
  .cabecera-ficha { grid-template-columns: 220px 1fr; align-items: center; justify-items: start; text-align: left; }
  .cabecera-ficha .comprar-libro { justify-content: flex-start; }
}

/* Portada y contraportada juntas (libros con contraportada) */
.tapas-ficha {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 340px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: center;
}

.tapa-ficha img { aspect-ratio: 920 / 1200; }

.nombre-tapa { display: block; margin-top: 6px; font-weight: 700; color: var(--texto-suave); font-size: 0.95rem; }

@media (min-width: 600px) {
  .cabecera-ficha.con-contraportada { grid-template-columns: 320px 1fr; align-items: start; }
}

/* Aviso de los libros que no son para niños */
.aviso-edad {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #fde8e6;
  border: 2px solid #b23a35;
  color: #7d1f1b;
  font-weight: 800;
}

.edad-tienda { margin: 0 0 4px; font-weight: 700; color: var(--texto-suave); }

.formato-tienda { margin: 0 0 10px; color: var(--texto-suave); font-size: 0.95rem; }

.edad-adultos {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  background: #fde8e6;
  border: 2px solid #b23a35;
  color: #7d1f1b;
  font-weight: 800;
}

.galeria-ficha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.miniatura-galeria {
  display: block;
  width: 100%;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sombra-suave);
  cursor: zoom-in;
  overflow: hidden;
}

.miniatura-galeria img { width: 100%; height: auto; aspect-ratio: 850 / 1100; object-fit: cover; }

.miniatura-galeria:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.miniatura-galeria:focus-visible { outline: 4px solid var(--color-coleccion, var(--verde)); outline-offset: 3px; }

.ventana-visor { width: min(720px, calc(100% - 24px)); }

.imagen-visor {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  margin: 10px 0 14px;
  background: #f6f2e8;
  border-radius: 12px;
}

.botones-visor { display: flex; justify-content: space-between; gap: 12px; }

.botones-visor .boton { width: auto; margin-top: 0; min-height: 48px; }

/* ---------- Sello de lanzamiento: «Próximamente» y «Muy pronto» ---------- */

.tarjeta-coleccion, .cabecera-estante, .tarjeta-tienda { position: relative; }

.sello-lanzamiento {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--amarillo);
  color: #3d2f05;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.15);
  transform: rotate(-3deg);
}

.sello-muy-pronto { background: #fde2ea; color: #8a2346; border: 2px solid #f08aa8; }

.sello-disponible { background: #2d8449; color: #fff; }

/* ---------- Grupos de lanzamiento: ya disponibles, próximamente y muy pronto ---------- */

.grupo-lanzamiento + .grupo-lanzamiento { margin-top: 40px; }

.cabecera-grupo {
  margin: 0 0 18px;
  padding: 12px 18px;
  border-radius: 18px;
  border-left: 8px solid var(--amarillo);
  background: #fff8e1;
}

#estanterias .cabecera-grupo { margin-top: 12px; }

.cabecera-grupo.grupo-disponible { border-left-color: #2d8449; background: #e8f5ec; }

.cabecera-grupo.grupo-muy-pronto { border-left-color: #f08aa8; background: #fdeef3; }

.titulo-grupo { margin: 0; font-size: 1.45rem; }

.texto-grupo { margin: 4px 0 0; color: var(--texto-suave); }

/* ---------- Pie común ---------- */

.pie { border-top: 3px solid #f3e6c4; background: rgba(255, 252, 244, 0.7); }

.pie p { margin: 0 0 10px; }

.confianza { font-weight: 700; color: var(--verde-oscuro); }

.enlaces-pie ul {
  list-style: none;
  margin: 14px auto 16px;
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
}

.enlaces-pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--texto);
  font-weight: 700;
}

.enlaces-pie a:hover { background: var(--fondo-claro); }

.enlaces-pie a[aria-current="page"] { background: var(--verde-oscuro); color: #fff; text-decoration: none; }

.derechos { font-size: 0.9rem; }

.logo-pie { display: inline-flex; justify-content: center; margin-bottom: 8px; font-size: 1.15rem; text-decoration: none; }

.menu-pie ul {
  list-style: none;
  margin: 0 auto 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}

.menu-pie a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--tarjeta);
  border: 2px solid #e8dcc0;
  color: var(--verde-oscuro);
  font-weight: 800;
  text-decoration: none;
}

.menu-pie a:hover { border-color: var(--verde-oscuro); }

.menu-pie a[aria-current="page"] { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; }

.dudas-pie a { color: var(--verde-oscuro); font-weight: 700; }

.compra-pie { max-width: 38em; margin-left: auto; margin-right: auto; }

/* ---------- Páginas de texto: legales, quiénes somos y guía ---------- */

.texto-legal { max-width: 52em; overflow-wrap: break-word; }

.texto-legal h2 { margin: 28px 0 8px; font-size: 1.35rem; color: var(--verde-oscuro); }

.texto-legal h2:first-child, .texto-legal h3:first-child { margin-top: 0; }

.texto-legal h3 { margin: 22px 0 6px; font-size: 1.2rem; }

.texto-legal p { margin: 0 0 12px; }

.texto-legal ul { margin: 0 0 12px; padding-left: 1.3em; }

.texto-legal li { margin-bottom: 6px; }

.texto-legal a { color: var(--verde-oscuro); font-weight: 700; overflow-wrap: anywhere; }

.actualizacion { margin-top: 28px !important; color: var(--texto-suave); font-size: 0.95rem; }

.lista-somos { list-style: none; padding-left: 0 !important; }

.lista-somos li { position: relative; padding-left: 46px; margin-bottom: 14px; }

.emoji-somos { position: absolute; left: 0; top: 0; font-size: 1.7rem; line-height: 1; }

.rejilla-promesas {
  list-style: none;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

.tarjeta-promesa {
  margin: 0 !important;
  padding: 18px;
  border-radius: 18px;
  background: var(--fondo-claro);
  border-top: 6px solid var(--verde);
}

.tarjeta-promesa p { margin: 0; }

.emoji-promesa { display: block; font-size: 2.2rem; line-height: 1; margin-bottom: 8px; }

.despedida { margin-top: 24px !important; font-size: 1.15rem; text-align: center; }

.pestanas-guia { margin-bottom: 4px; }

.pestanas-guia .pestana { min-height: 48px; padding: 8px 16px; font-size: 1.05rem; }

.rejilla-guia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.tarjeta-guia {
  height: 100%;
  background: var(--tarjeta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  border-top: 8px solid var(--color-coleccion);
  overflow: hidden;
}

.imagen-guia { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }

.textos-guia { padding: 16px 18px 20px; }

.trabaja-guia { margin: 0 0 12px; }

.lista-dudas { display: grid; gap: 12px; max-width: 52em; }

.duda { background: var(--tarjeta); border-radius: 18px; box-shadow: var(--sombra-suave); }

.duda summary {
  min-height: 56px;
  padding: 14px 18px;
  font-weight: 800;
  cursor: pointer;
}

.duda p { margin: 0; padding: 0 18px 18px; }

.duda a { color: var(--verde-oscuro); font-weight: 700; }

/* ---------- Propuestas: aviso y casilla de persona adulta ---------- */

.aviso-adultos {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff3c8;
  font-weight: 700;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-weight: 600;
  cursor: pointer;
}

.casilla input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--verde-oscuro); }

.casilla a { color: var(--verde-oscuro); }

/* ---------- Puerta para adultos al salir de la web ---------- */

.dibujo-salida { margin: 0 0 6px; font-size: 2.6rem; line-height: 1; }

.quedarse { display: block; margin: 12px auto 0; min-height: 44px; }

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

/* ---------- Más libros de la colección (al final de la ficha) ---------- */

.rejilla-mas-libros {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 16px;
}

.rejilla-mas-libros > li:only-child { max-width: 280px; }

.tarjeta-mas-libro {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tarjeta);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border-top: 6px solid var(--color-coleccion, var(--verde));
  color: inherit;
  text-decoration: none;
}

.tarjeta-mas-libro:hover { box-shadow: var(--sombra); }

.tarjeta-mas-libro:hover .titulo-mas-libro { text-decoration: underline; }

.tarjeta-mas-libro .imagen-portada { width: 100%; height: auto; aspect-ratio: 641 / 457; object-fit: cover; }

.titulo-mas-libro { padding: 10px 14px 2px; font-weight: 800; }

.edad-mas-libro { padding: 0 14px 12px; color: var(--texto-suave); font-size: 0.95rem; }

.enlace-coleccion { color: var(--verde-oscuro); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mapa del sitio ---------- */

.lista-mapa { margin: 0; padding-left: 1.3em; }

.lista-mapa li { margin: 4px 0; }

.lista-mapa a { color: var(--verde-oscuro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-block; vertical-align: top; padding: 4px 0; }

.lista-mapa ul { padding-left: 1.3em; }

.lista-mapa-secciones { font-size: 1.1rem; }

.rejilla-mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }

.bloque-mapa { background: var(--tarjeta); border-radius: 18px; box-shadow: var(--sombra-suave); padding: 16px 18px; border-top: 6px solid var(--color-coleccion); }

.titulo-mapa { margin: 0 0 8px; font-size: 1.2rem; }

.titulo-mapa a { color: var(--color-coleccion); text-decoration: underline; text-underline-offset: 3px; }

.nota-mapa { color: var(--texto-suave); font-size: 0.95rem; }

/* ---------- Colecciones con libro principal (candado y extras gratuitos con su clave) ---------- */

.sello-desbloqueado { background: #2d8449; }

/* Etiquetas largas de la tarjeta del libro principal: sin mayúsculas, para que no tapen la portada */
.tarjeta-principal .sello-gratis { right: 12px; width: fit-content; text-transform: none; letter-spacing: 0; font-size: 0.95rem; }

.extra-principal {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--fondo-claro);
  font-weight: 600;
}

/* Ya desbloqueada, la tarjeta ocupa toda la fila para enseñar todos sus libros */
.elemento-desbloqueado { grid-column: 1 / -1; }

@media (min-width: 860px) {
  .elemento-desbloqueado .tarjeta-principal { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}

.libros-desbloqueados {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.libro-desbloqueado {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-content: start;
  gap: 6px 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--fondo-claro);
}

.miniatura-desbloqueado { grid-row: span 3; width: 96px; height: auto; border-radius: 10px; }

.libro-desbloqueado .acciones-actividad { grid-column: 1 / -1; }

.titulo-desbloqueado { color: var(--texto); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.nota-desbloqueado { color: var(--texto-suave); font-size: 0.95rem; }

.mensaje-protegido { flex-basis: 100%; margin: 4px 0 0; text-align: left; }

/* =====================================================================
   TEMA «UN DÍA DE SOL EN EL JARDÍN» (noviembre de 2026)
   Solo cambia el aspecto: colores, fondo, bordes y pequeños adornos.
   La estructura de las páginas no cambia. Para volver al aspecto anterior,
   basta con restaurar la copia de Copias_diseno_2026-11-10/estilos.css.
   ===================================================================== */

a { color: var(--verde-oscuro); }

/* ---------- Barra superior: blanca, con una cinta de arcoíris ---------- */

.barra {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: none;
  box-shadow: 0 6px 20px rgba(50, 60, 120, 0.1);
}

.barra::after {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #ff6b6b, #ffc83d, #4cc777, #3aa8f0, #8b6cf0);
}

.menu-sitio { border-top-color: #eef0f8; }

.boton-hamburguesa { background: var(--verde); border-radius: 999px; box-shadow: 0 4px 0 var(--verde-oscuro); }

.enlace-menu { border-radius: 999px; }

.enlace-menu:hover { background: #e6f3ff; }

.enlace-menu[aria-current="page"] { background: var(--verde); box-shadow: 0 3px 0 var(--verde-oscuro); }

.campo-buscador,
.campo,
.campo-clave,
.selector { border-color: #cfd6ea; background: #fff; }

.campo-buscador:focus,
.campo:focus,
.campo-clave:focus,
.selector:focus { border-color: var(--azul); box-shadow: 0 0 0 5px rgba(26, 115, 196, 0.2); }

.resultado[aria-selected="true"] .enlace-resultado,
.enlace-resultado:hover { background: #e6f3ff; }

/* ---------- Portada ---------- */

.titulo {
  color: var(--verde-oscuro);
  text-shadow: 0 2px 0 #fff, 0 6px 0 rgba(255, 200, 61, 0.6);
  letter-spacing: -0.01em;
}

.lema { color: #c22f48; }

.portada-imagen {
  border: 8px solid #fff;
  border-radius: 34px;
  box-shadow: 0 18px 40px rgba(40, 80, 140, 0.22);
  transform: rotate(1deg);
}

.flores { transform-origin: 50% 100%; }

/* Botones grandes del inicio: de colores, con el dibujo dentro de una burbuja blanca */
.boton-menu {
  min-height: 78px;
  border-radius: 26px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  background-color: var(--color-menu);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.2), 0 14px 22px rgba(50, 60, 120, 0.16);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.boton-menu span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
  text-shadow: none;
}

@media (max-width: 420px) {
  .boton-menu span { width: 40px; height: 40px; }
}

.boton-menu:hover { transform: translateY(-3px); }

/* ---------- Títulos de apartado: con un garabato de color debajo ---------- */

.titulo-apartado::after {
  content: "";
  display: block;
  width: 112px;
  height: 12px;
  margin-top: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 12'%3E%3Cpath d='M4 8Q15-3 26 8T48 8T70 8T92 8T108 6' fill='none' stroke='%23ffc83d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

[style*="text-align:center"] .titulo-apartado::after { margin-left: auto; margin-right: auto; }

/* ---------- Apartados de color, con el borde en forma de olas ---------- */

.apartado-claro {
  --color-seccion: #e3f6e8;
  position: relative;
  margin: 26px 0;
  background: var(--color-seccion);
}

#preguntas.apartado-claro { --color-seccion: #efeaff; }

.apartado-claro::before,
.apartado-claro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  background: var(--color-seccion);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M0 22V12Q30-6 60 12T120 12V22Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 22px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M0 22V12Q30-6 60 12T120 12V22Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 22px;
  pointer-events: none;
}

.apartado-claro::before { top: -21px; }

.apartado-claro::after { bottom: -21px; transform: scaleY(-1); }

/* ---------- Tarjetas ---------- */

.tarjeta-coleccion,
.tarjeta-gratis,
.tarjeta-ficha,
.tarjeta-tienda,
.tarjeta-novedad,
.tarjeta-actividad { transition: transform 0.18s, box-shadow 0.18s; }

.tarjeta-coleccion:hover { transform: translateY(-6px) rotate(-0.6deg); }

.tarjeta-gratis:hover,
.tarjeta-ficha:hover,
.tarjeta-tienda:hover,
.tarjeta-novedad:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.tarjeta-ficha, .tarjeta-tienda, .tarjeta-actividad { border-radius: 24px; }

.marco-portada { border-radius: 18px; }

.cuenta-libros { padding: 5px 14px; }

.tarjeta-novedad { border-top-color: var(--morado); }

.sello-nuevo { background: var(--morado); }

.titulo-novedad { color: #4a35b0; }

.tarjeta-sorpresa { background: #fff6cf; }

.vacio { border-color: #cfd6ea; }

/* ---------- Botones: redondeados y de colores vivos ---------- */

.boton { border-radius: 999px; }

.boton-secundario { box-shadow: 0 5px 0 #d9a21c; }

.boton-secundario:hover { background: #ffd666; }

.boton-comprar { background: var(--naranja); box-shadow: 0 4px 0 #8f3c06; }

.boton-comprar:hover { background: #a84807; }

.boton.boton-apagado,
.boton.boton-apagado:hover { background: #eceef6; color: #555c75; }

.pestana { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18); }

.pestana-gratis,
.sello-gratis,
.sello-gratis-novedad { background: var(--rojo); }

.sello-amazon-libro { background: var(--naranja); }

.sello-pronto { background: var(--morado); }

.sello-amazon,
.sello-disponible,
.sello-desbloqueado { background: var(--verde); }

.cabecera-grupo.grupo-disponible { border-left-color: var(--verde); }

.flecha-carrusel { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); }

.filtro { background: #fff; }

.proximamente { background: #eceef6; }

.aviso-gratis { background: #ffe9ec; }

/* ---------- Pie: colinas de hierba ---------- */

.pie {
  position: relative;
  margin-top: 72px;
  border-top: none;
  background: #e1f5dc;
}

.pie::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  height: 45px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 45'%3E%3Cpath d='M0 45V30Q70 2 150 22T300 16T480 26V45Z' fill='%23aee0a2'/%3E%3Cpath d='M0 45V38Q90 14 200 32T380 28T480 36V45Z' fill='%23e1f5dc'/%3E%3Cg fill='%23ff8fab'%3E%3Ccircle cx='96' cy='27' r='3'/%3E%3Ccircle cx='352' cy='24' r='3'/%3E%3C/g%3E%3Cg fill='%23ffc83d'%3E%3Ccircle cx='228' cy='29' r='3'/%3E%3Ccircle cx='440' cy='30' r='2.500'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 100% / 480px 45px;
  pointer-events: none;
}

.menu-pie a { border-color: #bfe3b6; }

.enlaces-pie a:hover { background: #cdeec5; }

.enlaces-pie a[aria-current="page"],
.menu-pie a[aria-current="page"] { background: var(--verde); border-color: var(--verde); }

/* ---------- Pequeños movimientos (solo si el dispositivo no pide reducirlos) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .flores { animation: mecer 5s ease-in-out infinite; }

  .boton-menu:hover span { animation: saltito 0.5s ease; }

  @keyframes mecer {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
  }

  @keyframes saltito {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-7px) rotate(-8deg); }
    70% { transform: translateY(1px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada-imagen { transform: none; }
}

/* ---------- Letra de los títulos y los botones ---------- */

h1, h2, h3,
.titulo, .lema, .logo,
.boton, .boton-menu, .pestana, .filtro, .boton-hamburguesa, .enlace-menu,
.sello-gratis, .sello-nuevo, .sello-amazon, .sello-lanzamiento, .cuenta-libros { font-family: var(--letra-titulos); }

h1, h2, h3, .titulo { font-weight: 600; letter-spacing: 0; }

.boton, .boton-menu, .pestana, .filtro, .enlace-menu, .boton-hamburguesa { font-weight: 600; }

/* Nunito algo más gruesa para que se lea bien en pantalla */
body { font-weight: 500; }