/* ============================================================
   responsive.css — Desktop 2560px → Mobile 360px
   ============================================================ */

/* ── TABLET GRANDE: 1024px ── */
@media (max-width: 1024px) {
  .sobre__grid        { grid-template-columns: 1fr; gap: var(--sp-10); }
  .sobre__img-wrapper { display: none; }
  .autora__grid       { grid-template-columns: 1fr; gap: var(--sp-10); }
  .autora__visual     { max-width: 300px; margin: 0 auto; }
  .contacto__grid     { grid-template-columns: 1fr; }
  .footer__top        { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-bottom: var(--sp-10);
  }
  .hero__content { order: 1; }
  .hero__visual  { order: 0; }

  .hero__subtitle,
  .hero__buttons { margin-left: auto; margin-right: auto; }
  .hero__buttons { justify-content: center; }

  .hero__img-wrapper { max-width: 320px; }

  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  .galeria__grid { columns: 3 180px; }
}

/* ── TABLET: 768px ── */
@media (max-width: 768px) {
  .section-padding { padding: var(--sp-16) 0; }
  .container       { padding: 0 var(--sp-4); }

  .section-title   { font-size: 1.85rem; }

  .sobre__valores  { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }

  .libros__grid    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .personajes__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .mascotas__grid  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .footer__top     { grid-template-columns: 1fr 1fr; }
  .footer__brand   { grid-column: 1 / -1; }

  .galeria__grid   { columns: 2 150px; }

  .autora__grid    { grid-template-columns: 1fr; }
  .autora__visual  { max-width: 260px; margin: 0 auto var(--sp-8); }

  .player__now     { flex-direction: column; text-align: center; }
}

/* ── MOBILE GRANDE: 640px ── */
@media (max-width: 640px) {
  .hero__title     { font-size: 2rem; }
  .hero__buttons   { flex-direction: column; align-items: center; }
  .btn-lg          { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); }

  .sobre__valores  { grid-template-columns: repeat(2, 1fr); }

  .libros__grid    { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
  .personajes__grid { grid-template-columns: repeat(2, 1fr); }
  .mascotas__grid  { grid-template-columns: repeat(2, 1fr); }

  .actividades__grid { grid-template-columns: 1fr 1fr; }

  .autora__firma   { font-size: 2rem; }

  .footer__top     { grid-template-columns: 1fr; }
  .footer__bottom  { flex-direction: column; text-align: center; }
  .footer__legal   { justify-content: center; }

  .otros-libros__grid { grid-template-columns: 1fr 1fr; }

  .galeria__grid   { columns: 2 140px; }

  .cta-final__buttons { flex-direction: column; align-items: center; }

  .videos__grid    { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}

/* ── MOBILE PEQUEÑO: 480px ── */
@media (max-width: 480px) {
  .hero__title     { font-size: 1.75rem; }
  .hero__coleccion-label { font-size: var(--text-xs); }

  .personajes__grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }

  .mascotas__grid  { grid-template-columns: repeat(2, 1fr); }

  .actividades__grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }

  .otros-libros__grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }

  .sobre__valores  { grid-template-columns: 1fr 1fr; }

  .contacto__form  { padding: var(--sp-6); }

  .player          { padding: var(--sp-5); }

  .scroll-top      { width: 44px; height: 44px; right: var(--sp-4); bottom: var(--sp-4); }
}

/* ── MOBILE MÍNIMO: 360px ── */
@media (max-width: 360px) {
  .container       { padding: 0 var(--sp-3); }
  .hero__title     { font-size: 1.5rem; }

  .mascotas__grid  { grid-template-columns: 1fr; }

  .personajes__grid { grid-template-columns: 1fr; }
}

/* ── PANTALLAS GRANDES: 1440px+ ── */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
  .hero__inner { max-width: 1360px; }
}

@media (min-width: 1920px) {
  :root { font-size: 17px; }
  .container { max-width: 1600px; }
  .hero__inner { max-width: 1600px; }
}

@media (min-width: 2560px) {
  :root { font-size: 18px; }
  .container { max-width: 1920px; }
  .hero__inner { max-width: 1920px; }
}