:root {
  --brand-blue:#1e40af;    /* azul corporativo */
  --brand-sky:#60a5fa;     /* azul claro */
  --brand-green:#79b34d;   /* verde títulos de libro */
  --brand-orange:#f59e0b;  /* naranja (Preescolar) */
  --brand-primary:#0ea5e9; /* acentos */
  --text:#0f172a;
  --muted:#64748b;
  --grid-max:1520px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
}
a{color:inherit;text-decoration:none}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px}
.brand-left{display:flex;align-items:center;gap:14px}
.logo-cat{font-weight:800;font-size:28px;display:flex;align-items:center;gap:10px}
.logo-cat::before{content:"";width:28px;height:28px;border:3px solid var(--text);border-radius:4px;box-shadow:8px 0 0 0 var(--text),16px 0 0 0 var(--text)}
.logo-cat small{display:block;font-size:14px;font-weight:700;color:#d22}

.logo-mont{height:90px;display:block;margin:0 auto}

.meta{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted)}
.meta a{color:var(--muted)}

/* Filtros */
.filters{display:flex;gap:8px;justify-content:center;align-items:center;padding:8px 12px;flex-wrap:wrap}
.search{width:min(320px, 90vw);height:36px;border:1px solid #cbd5e1;border-radius:8px;padding:0 10px}

.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:8px 12px;border:1px solid #cbd5e1;border-radius:20px;color:#475569;background:#fff;cursor:pointer;font-weight:600}
.tab[data-active="true"]{background:#e2e8f0;color:#0f172a;border-color:#94a3b8}
.tab.orange[data-active="true"]{background:#fff7ed;color:#9a3412;border-color:#fdba74}
.tab.green[data-active="true"]{background:#f0fdf4;color:#166534;border-color:#86efac}
.tab.blue[data-active="true"]{background:#eff6ff;color:#1e40af;border-color:#93c5fd}

/* Grid */
.grid{
  max-width:var(--grid-max);
  margin:12px auto 60px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:56px 60px
}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(180px,1fr))}}
@media (max-width:800px){.grid{grid-template-columns:repeat(2,minmax(160px,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

/* Cards */
.card{display:flex;flex-direction:column;align-items:center;text-align:center}

/* --- Ajuste de tamaño de portadas --- */
.card figure{
  margin:0;
  height:260px;              /* antes 210px */
  display:grid;
  place-items:center
}
.card img{
  max-width:220px;           /* antes 150px */
  max-height:260px;          /* antes 210px */
  display:block;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .2s ease;
  object-fit:contain;
}
.card:hover img{transform:translateY(-3px)}

.title{margin-top:10px;font-weight:700;font-size:14px;line-height:1.15}
.title a{color:var(--brand-green)}
.title.orange a{color:var(--brand-orange)}

/* Footer */
footer{
  border-top:1px dashed #e2e8f0;
  color:var(--muted);
  font-size:12px;
  text-align:center;
  padding:18px
}

/* --- Botón “Mostrar más” --- */
.more-wrapper {
  display: flex;
  justify-content: center;
  margin: 1rem 0 2rem;
}
.btn.more {
  padding: .75rem 1.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: var(--text);
}
.btn.more:hover {
  background:#f8fafc;
}

/* --- Botón flotante “Subir arriba” --- */
.btn.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  background: var(--brand-orange);
  color: white;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  transition: transform .2s ease, opacity .2s ease;
  opacity: .95;
}
.btn.to-top:hover {
  transform: translateY(-2px);
  opacity: 1;
}
.btn.to-top:focus-visible {
  outline:3px solid var(--brand-sky);
  outline-offset:3px;
}

/* --- Nota de rotación --- */
#rotate-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.82);
  color: #fff;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  transition: opacity .4s ease;
}
#rotate-hint .rh-icon {
  font-size: 20px;
  display: inline-block;
  animation: rh-spin 2s linear infinite;
}
@keyframes rh-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Botones de zoom --- */
.zoom-btn {
  position: absolute;
  right: 10px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  background: var(--brand-blue);
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .1s ease;
  touch-action: manipulation;
  user-select: none;
}
.zoom-btn:hover  { background: #1e3a8a; transform: scale(1.08); }
.zoom-btn:active { transform: scale(0.94); }
.zoom-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

#zoom-in-btn  { bottom: 10px; }
#zoom-out-btn { bottom: 68px; }

/* --- Botón flotante "Descargar PDF" --- */
.download-btn {
  position: fixed;
  bottom: 20px;
  right: 90px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-blue);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 9999px;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
  z-index: 9999;
  transition: background .3s ease, transform .2s ease;
}
.download-btn:hover {
  background: #1e3a8a;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .download-btn {
    right: 12px;
    bottom: 80px;
    padding: 10px 14px;
    font-size: 13px;
  }
}