/* =====================================================================
   RESPONSIVE.CSS  ·  Ajustes para tablet y móvil
   Se carga de último para que sus reglas manden sobre las anteriores.
   ===================================================================== */

/* ---------------- Tablet (≤ 1024px) ---------------- */
@media (max-width: 1024px) {
  :root { --r-xl: 56px; --r-lg: 38px; }

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

  .fundadora { grid-template-columns: 1fr; }
  .fundadora__texto { margin-left: 0; margin-top: -2.5rem; padding-top: 3.5rem; padding-left: clamp(1.6rem, 3vw, 2.6rem); }

  .donaciones-cabecera { grid-template-columns: 1fr; }
  .charlas-fotos { grid-template-columns: 1fr 1fr; }
  .gracias-fotos { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Móvil (≤ 760px) ---------------- */
@media (max-width: 760px) {
  :root { --r-xl: 42px; --r-lg: 30px; --r-md: 22px; }

  /* En móvil se apila: el titular arriba y la figura rayada debajo,
     completa, sin muesca. */
  .gracias { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .gracias__muesca { display: none; }
  .gracias__fondo { grid-area: 2 / 1 / -1 / -1; }
  .gracias__titulo { grid-area: 1 / 1 / 2 / 2; padding: 0 0 1rem; }
  .gracias__panel { grid-area: 2 / 1 / 3 / 2; min-height: 0; padding-bottom: 0; }
  .gracias__nota { grid-area: 3 / 1 / 4 / 2; }

  /* Navegación en menú desplegable */
  .nav__toggle { display: flex; }

  .nav__lista {
    flex-direction: column;
    border-radius: var(--r-md);
    margin-top: 0.6rem;
    max-height: 0;
    opacity: 0;
    border-width: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
  }
  .nav__lista.abierta {
    max-height: 460px;
    opacity: 1;
    border-width: 2px;
  }
  .nav__item + .nav__item { border-left: 0; border-top: 2px solid var(--oliva-claro); }
  .nav__enlace { padding: 0.9em 1rem; font-size: 0.9rem; }

  /* Portada: se apila para que el título no se encime */
  .portada__lienzo { aspect-ratio: auto; min-height: 0; display: grid; gap: 0.8rem; }
  .portada__forma { position: relative; inset: auto; }
  .portada__forma--cuerpo { display: none; }
  .portada__forma--ceja { order: 2; aspect-ratio: 4 / 3; }
  .portada__titulo { position: relative; order: 1; }
  .portada__titulo--abajo { order: 3; text-align: right; }
  /* En móvil la ilustración ES el bloque rosa: se apila entre los dos
     títulos, sin encimarse con ellos. */
  .portada__ilustracion--cuerpo { display: none; }
  .portada__forma--ceja { display: none; }

  .portada__ilustracion--ceja {
    position: relative;
    inset: auto;
    order: 2;
    aspect-ratio: 4 / 3;
    background: var(--rosa);
    border-radius: var(--r-xl);
  }
  .portada__ilustracion--ceja img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .franja-peluditos__grid,
  .grid-fotos,
  .videos-destacados,
  .pasos,
  .historias,
  .charlas-fotos,
  .gracias-fotos,
  .tarjeta-especie,
  .tarjeta-charlas,
  .fundacion-dos,
  .fundacion-fotos,
  .navidad { grid-template-columns: 1fr; }

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

  .especie { grid-template-columns: 1fr; }
  .especie__titulo { padding-top: 0; }

  .cifras { grid-template-columns: 1fr; gap: 1.6rem; }

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

  .carrusel__flecha { display: none; }
  .carrusel__pista { grid-auto-columns: minmax(160px, 70%); grid-template-rows: repeat(2, auto); }

  .lista-donaciones { grid-template-columns: 1fr 1fr; }

  .tarjeta-charlas { text-align: center; }
  .bloque-instituciones { justify-content: center; text-align: center; }
}

/* ---------------- Pantallas muy pequeñas (≤ 420px) ---------------- */
@media (max-width: 420px) {
  .marca { gap: 0.3rem; }
  .historia__par { grid-template-columns: 1fr 1fr; }
  .lista-donaciones { grid-template-columns: 1fr; }
}

/* ---------------- Impresión ---------------- */
@media print {
  .nav, .carrusel__flecha, .buscador, .lightbox { display: none !important; }
  body { background: #fff; }
}