/* La biblioteca de Bitri (/libros). Se apoya en portada.css: colores, botones, nav, hero, .dia y preguntas. */

/* ── Hero ── */
.hero-libros{min-height:auto;padding:150px 0 90px;background:radial-gradient(120% 90% at 80% 30%,rgba(61,116,255,.28),transparent 60%),var(--noche)}
.datos-hero{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 30px}
.datos-hero span{font-size:15px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--tenue)}
.datos-hero b{color:var(--sol);font-weight:700}

.abanico-libros{position:relative;height:440px}
.abanico-libros img{position:absolute;left:50%;top:50%;width:200px;height:auto;border-radius:10px;border:3px solid var(--tinta);
  box-shadow:0 18px 40px rgba(0,0,0,.45);transform-origin:50% 120%;
  transform:translate(-50%,-50%) rotate(calc((var(--k) - 2) * 11deg)) translateY(calc(var(--k) * 0px));
  animation:abre .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 90ms + .2s)}
.abanico-libros img:nth-child(3){z-index:3;width:216px}
.abanico-libros img:nth-child(2),.abanico-libros img:nth-child(4){z-index:2}
@keyframes abre{from{transform:translate(-50%,-50%) rotate(0deg);opacity:0}}

/* ── Por dentro ── */
.muestras{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.muestra{margin:0;background:#fff;color:var(--tinta);border:3px solid var(--tinta);border-radius:var(--radio);overflow:hidden;box-shadow:0 8px 0 var(--tinta)}
.muestra img{display:block;width:100%;height:auto;image-rendering:pixelated;border-bottom:3px solid var(--tinta)}
.muestra figcaption{padding:16px 20px 18px;font-size:16px;color:#33504a}
.muestra figcaption b{display:block;font-family:var(--pixel);font-weight:400;font-size:28px;line-height:1;color:var(--tinta);margin-bottom:6px}

/* ── Catálogo ── */
.filtros{display:grid;gap:12px;justify-items:center;margin-bottom:34px}
.fila-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip{font:600 15px/1 var(--texto);padding:10px 16px;border-radius:999px;border:3px solid var(--tinta);background:#fff;color:var(--tinta);cursor:pointer;
  transition:transform .12s}
.chip:hover{transform:translateY(-2px)}
.chip.activo{background:var(--tinta);color:#fff}
.chip[hidden]{display:none}
.materias .chip{font-size:14px;padding:8px 13px;border-width:2px}
.buscador{display:flex;align-items:center;gap:10px;width:min(560px,100%);background:#fff;border:3px solid var(--tinta);border-radius:999px;padding:4px 18px;color:var(--tinta)}
.buscador svg{width:20px;height:20px;flex:none}
.buscador input{flex:1;border:0;outline:0;background:none;font:500 16px/1 var(--texto);padding:10px 0;color:var(--tinta);min-width:0}
.cuenta{margin:0;font-weight:600;color:#1f3d1c}

.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.libro{display:flex;flex-direction:column;background:#fff;color:var(--tinta);border:3px solid var(--tinta);border-radius:18px;overflow:hidden;
  box-shadow:0 6px 0 var(--tinta);transition:transform .15s,box-shadow .15s}
.libro:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--tinta)}
.libro[hidden]{display:none}
.tapa{aspect-ratio:5/8;background:#e9efe9;border-bottom:3px solid var(--tinta)}
.tapa img{display:block;width:100%;height:100%;object-fit:cover}
.info{padding:14px 14px 4px;flex:1}
.info h3{font-size:26px;line-height:1}
.info .sub{margin:6px 0 0;font-size:14px;line-height:1.35;color:#33504a}
.libro .datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.libro .datos span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:#eef6ec;color:#1f3d1c}
.compra{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 14px}
.compra b{font-family:var(--pixel);font-weight:400;font-size:24px}
.compra .boton.chico{font-size:19px;padding:7px 12px 5px}
.muy-pronto{font-size:13px;font-weight:600;color:#6a7d76;padding:8px 10px;border:2px dashed #b8c6c0;border-radius:12px}
.vacio{text-align:center;font-weight:600;color:#1f3d1c;margin-top:20px}

/* ── Cómo llega ── */
.pasos-compra{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pasos-compra li{background:#fff;border:3px solid var(--tinta);border-radius:var(--radio);padding:24px 22px;box-shadow:0 6px 0 var(--tinta)}
.pasos-compra li>b{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--sol);border:3px solid var(--tinta);
  font-family:var(--pixel);font-weight:400;font-size:30px;margin-bottom:12px}
.pasos-compra h3{font-size:30px;margin-bottom:8px}
.pasos-compra p{margin:0;color:#33504a}

.estrecha{width:min(820px,100% - 32px)}
#catalogo{padding-bottom:70px}
#como-llega{padding:50px 0 70px}
#preguntas{padding-top:50px}

/* ── Móvil ── */
@media (max-width:900px){
  .hero-libros .envoltura{grid-template-columns:1fr}
  .abanico-libros{height:330px}
  .abanico-libros img{width:150px}.abanico-libros img:nth-child(3){width:164px}
  .muestras,.pasos-compra{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hero-libros{padding:120px 0 50px}
  .estante{grid-template-columns:repeat(2,1fr);gap:12px}
  .info{padding:10px 10px 2px}.info h3{font-size:21px}.info .sub{font-size:13px}
  .compra{flex-direction:column;align-items:stretch;padding:10px}
  .compra .boton.chico{justify-content:center}
  .materias{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;padding-bottom:4px;scrollbar-width:none}
  .materias .chip{flex:none}
}
@media (prefers-reduced-motion:reduce){.abanico-libros img{animation:none}}

/* ── Catálogo guiado (07-10-2026): 2 preguntas → resultados ── */
.guia{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;margin:0 0 26px}
.pregunta-guia{margin:0;border:3px solid var(--tinta);border-radius:var(--radio);background:#fff;padding:20px 20px 22px;box-shadow:0 6px 0 var(--tinta);min-width:0;
  transition:opacity .25s,filter .25s}
.pregunta-guia[disabled]{opacity:.55;filter:saturate(.4)}
.pregunta-guia legend{float:left;width:100%;display:flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:30px;line-height:1;color:var(--tinta);margin-bottom:14px;padding:0}
.pregunta-guia legend i{font-style:normal;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--sol);border:3px solid var(--tinta);font-size:24px}
.grupo{clear:both;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;padding:8px 0;border-top:2px dashed #dfe8e2}
.grupo:first-of-type{border-top:0}
.grupo>b{font-size:14px;font-weight:700;color:#4b6b60;text-transform:uppercase;letter-spacing:.04em}
.botones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;min-height:56px;padding:8px 12px;border-radius:14px;
  border:3px solid var(--tinta);background:#f4f8f5;color:var(--tinta);cursor:pointer;font:inherit;line-height:1.1;
  box-shadow:0 4px 0 var(--tinta);transition:transform .12s,box-shadow .12s,background .15s}
.opcion span{font-family:var(--pixel);font-size:24px}
.opcion small{font-size:11px;font-weight:600;color:#5d7a70;margin-top:3px}
.opcion:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta);background:#fff}
.opcion:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tinta)}
.opcion[aria-pressed="true"]{background:var(--verde);box-shadow:0 4px 0 var(--verdeHondo),0 4px 0 3px var(--tinta)}
.opcion[aria-pressed="true"] small{color:#0d3b22}
#paso2 .botones{clear:both}
.opcion.materia{flex-direction:row;gap:8px;min-height:50px;animation:sube .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*40ms)}
.opcion.materia span{font-family:var(--texto);font-weight:700;font-size:16px}
.opcion.materia small{margin:0;background:#fff;border-radius:999px;padding:2px 7px;border:2px solid var(--tinta);color:var(--tinta)}
.opcion.materia::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c,#999);border:2px solid var(--tinta)}
.m-todas{--c:#fff}.m-mate{--c:#3d74ff}.m-rm{--c:#7d56c9}.m-com{--c:#ff4d6d}.m-cyt{--c:#2bd67b}.m-ps{--c:#ff9a3d}.m-ccss{--c:#d99a1a}.m-dpcc{--c:#ffa8d6}.m-en{--c:#3ad6ff}.m-enp{--c:#1b7fa4}
.espera{margin:0;color:#6a7d76;font-weight:600}
@keyframes sube{from{opacity:0;transform:translateY(10px)}}

/* barra de lo elegido: queda pegada arriba al bajar por los libros */
.seleccion{position:sticky;top:76px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 22px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:3px solid var(--tinta);transition:box-shadow .2s}
.seleccion.pegada{box-shadow:0 10px 24px rgba(13,31,23,.25)}
.aplicados{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-left:6px}
.aplicados b{font-size:15px}
.aplicados .nota-total{font-size:14px;color:#5d7a70}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--texto);padding:8px 12px;border-radius:999px;border:2px solid var(--tinta);background:var(--sol);color:var(--tinta);cursor:pointer}
.pill:hover{background:#ffe08a}
.limpiar{font:600 14px/1 var(--texto);background:none;border:0;color:#0a7d55;text-decoration:underline;cursor:pointer;padding:6px}
.seleccion .buscador{width:min(340px,100%);border-width:2px;padding:2px 14px}
.seleccion .buscador input{padding:8px 0;font-size:15px}

/* tarjetas: la tapa abre la ficha; entran escalonadas al filtrar */
.libro .tapa{display:block;width:100%;padding:0;border:0;border-bottom:3px solid var(--tinta);cursor:zoom-in;overflow:hidden;background:#e9efe9}
.libro .tapa img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.libro:hover .tapa img{transform:scale(1.04) translateY(-2px)}
.libro.entra{animation:entra .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--orden,0)*35ms)}
@keyframes entra{from{opacity:0;transform:translateY(16px) scale(.97)}}

/* ficha del libro */
.ficha{border:3px solid var(--tinta);border-radius:24px;padding:0;max-width:760px;width:calc(100% - 32px);box-shadow:0 10px 0 var(--tinta),0 30px 80px rgba(0,0,0,.5);color:var(--tinta)}
.ficha::backdrop{background:rgba(6,16,11,.6);backdrop-filter:blur(3px)}
.ficha[open]{animation:abreFicha .3s cubic-bezier(.2,.8,.2,1)}
@keyframes abreFicha{from{opacity:0;transform:translateY(20px) scale(.97)}}
.ficha-cuerpo{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:24px}
.ficha-cuerpo img{width:100%;height:auto;border-radius:12px;border:3px solid var(--tinta)}
.ficha-grado{margin:0 0 6px;font-size:13px;font-weight:700;color:#0a7d55;text-transform:uppercase;letter-spacing:.04em}
.ficha h3{font-size:36px;margin-bottom:6px}
.ficha-sub{margin:0 0 12px;color:#33504a;font-weight:600}
.ficha p{margin:0 0 12px;font-size:16px;color:#33504a}
.ficha-datos{margin:0 0 16px;padding-left:20px;font-size:14px;color:#33504a}
.ficha .compra{padding:0;justify-content:flex-start;gap:16px}
.ficha .compra b{font-size:30px}
.ficha .cerrar{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:999px;border:2px solid var(--tinta);background:#fff;font-size:18px;cursor:pointer}

@media (max-width:900px){
  .guia{grid-template-columns:1fr}
  .seleccion{border-radius:18px;top:70px}
  .seleccion .buscador{width:100%}
}
@media (max-width:520px){
  .pregunta-guia{padding:16px 14px 18px}
  .pregunta-guia legend{font-size:25px}
  .grupo{grid-template-columns:1fr;gap:6px}
  .opcion{min-width:56px;min-height:52px;flex:1 0 auto}
  .opcion span{font-size:21px}
  .ficha-cuerpo{grid-template-columns:1fr;padding:18px}
  .ficha-cuerpo img{width:150px;margin:0 auto}
  .ficha h3{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.libro.entra,.opcion.materia,.ficha[open]{animation:none}}
.sugerencia{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:26px;padding:16px;border-radius:18px;background:rgba(255,255,255,.7);border:3px dashed var(--tinta)}
.sugerencia[hidden]{display:none}
.sugerencia p{margin:0;font-weight:600}
/* botones de una misma fila del mismo tamaño (regla de Christopher): cuadrícula pareja en el celular */
@media (max-width:520px){
  .grupo .botones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .grupo .botones .opcion{min-width:0;flex:none}
  .grupo .botones .opcion[data-grado="prog"]{grid-column:1/-1}
  #materias{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #materias .opcion{min-width:0;justify-content:flex-start;padding:8px 10px}
  #materias .opcion span{font-size:14px;text-align:left}
}
.opcion small{white-space:nowrap}
.opcion.materia::before{flex:none}
@media (max-width:520px){#materias .palabra{display:none}#materias .opcion small{min-width:24px;text-align:center}#materias .opcion span{flex:1}}
@media (max-width:520px){#materias .opcion{gap:6px;padding:8px 8px}#materias .opcion span{font-size:13px}#materias .opcion small{padding:2px 5px}}
.libro h3 a{color:inherit;text-decoration:none}.libro h3 a:hover{text-decoration:underline}
.ver-completo{margin:14px 0 0!important;font-weight:700}.ver-completo a{color:#0a5c3e}
.explorar{margin-top:34px;background:rgba(255,255,255,.75);border:3px solid var(--tinta);border-radius:var(--radio);padding:20px 24px;color:var(--tinta)}
.explorar h3{font-size:26px;margin:4px 0 8px}
.explorar p{margin:0 0 8px;line-height:1.8}
.explorar a{color:#0a5c3e;font-weight:600}
.mas-metodo{text-align:center;margin:26px 0 0;font-weight:700}.mas-metodo a{color:var(--lima)}

/* ── Packs del año (08-10-2026) ── */
.franja-packs{display:inline-flex;align-items:center;gap:10px;margin:-6px 0 16px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,201,60,.14);
  border:1px solid rgba(255,201,60,.5);color:#fff;text-decoration:none;font-size:15px}
.franja-packs b{background:var(--sol);color:var(--tinta);border-radius:999px;padding:3px 10px;font-size:13px}
.franja-packs:hover{background:rgba(255,201,60,.24)}
.pack-catalogo{display:grid;grid-template-columns:230px 1fr auto;align-items:center;gap:22px;margin:0 0 26px;padding:20px 24px;border:3px solid var(--tinta);
  border-radius:var(--radio);background:linear-gradient(120deg,#fff6d8,#fff);color:var(--tinta);box-shadow:0 7px 0 var(--tinta)}
.pack-catalogo[hidden]{display:none}
.pack-catalogo.entra-pack{animation:entra .5s cubic-bezier(.2,.8,.2,1) both}
.tapas-pack{position:relative;height:150px}
.tapas-pack img{position:absolute;top:8px;left:50%;width:78px;height:auto;border-radius:6px;border:2px solid var(--tinta);box-shadow:0 6px 12px rgba(0,0,0,.25);
  transform-origin:50% 130%;transform:translateX(-50%) translateX(calc((var(--k) - (var(--n) - 1) / 2) * 22px)) rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg))}
.ahorro-pack{display:inline-block;margin:0 0 6px;font-size:13px;font-weight:700;background:var(--sol);border:2px solid var(--tinta);border-radius:999px;padding:2px 10px}
.texto-pack h3{font-size:clamp(26px,3vw,34px);line-height:1}
.texto-pack p{margin:6px 0 0;color:#33504a}
.texto-pack s{color:#7a8c86}
.compra-pack{display:grid;justify-items:center;gap:8px;text-align:center}
.compra-pack b{font-family:var(--pixel);font-weight:400;font-size:40px;line-height:1}
.ver-pack{font-size:14px;font-weight:700;color:#0a5c3e}
.pack-ficha{margin:12px 0 0!important;padding:10px 12px;border-radius:12px;background:#fff6d8;border:2px dashed #e0b84a;font-size:14px!important}
.pack-ficha a{font-weight:700;color:#0a5c3e}
@media (max-width:860px){.pack-catalogo{grid-template-columns:1fr;text-align:center;padding:18px}.tapas-pack{height:130px}}
.pack-catalogo .tapas-pack{overflow:visible;width:230px;max-width:100%;margin:0 auto}
.tapas-pack img{width:62px;transform:translateX(-50%) translateX(calc((var(--k) - (var(--n) - 1) / 2) * 20px)) rotate(calc((var(--k) - (var(--n) - 1) / 2) * 6deg))}
.pack-tarjeta .tapas-pack img{width:66px}
.pack-catalogo{overflow:hidden}
.datos-hero-linea{margin:-6px 0 26px;color:var(--tenue);font-size:16px}.datos-hero-linea b{color:var(--sol)}