/* ════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Mara Bermejo Fine Art Dolls
   Breakpoints: 480px | 768px | 900px | 1100px
   Strategy: Mobile-first corrections over base styles
════════════════════════════════════════════════════════ */

/* ─── GLOBAL ───────────────────────────────────────── */
@media (max-width: 768px) {
  .container {
    padding-inline: 1.2rem;
  }

  h2 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
}

/* ─── NAVBAR ───────────────────────────────────────── */
@media (max-width: 768px) {
  #navbar .nav-inner {
    position: relative;
  }

  /* Hide nav links by default, show as dropdown */
  #navbar .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: rgba(13, 8, 20, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    gap: 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    z-index: 200;
  }

  #navbar .nav-links.open {
    display: flex;
  }

  #navbar .nav-links li a {
    display: block;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 1rem;
  }

  #navbar .nav-links li:last-child a {
    border-bottom: none;
  }

  /* Hamburger button */
  #navToggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
  }

  #navToggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cream);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }

  #navToggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #navToggle.open span:nth-child(2) { opacity: 0; }
  #navToggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (min-width: 769px) {
  #navToggle { display: none; }
}

/* ─── HERO ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .hero-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .hero-sub {
    font-size: 1rem;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-float-cards {
    display: none; /* Ocultar tarjetas flotantes en móvil para evitar desbordamiento */
  }

  .hero-proof {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* ─── STATS / PROOF ─────────────────────────────────── */
@media (max-width: 600px) {
  .stats-bar,
  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* ─── PROCESO ───────────────────────────────────────── */
@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .proceso-manifiesto {
    padding: 1.5rem;
  }
}

/* ─── GALERÍA ───────────────────────────────────────── */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item:nth-child(1) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ─── TIPOS DE MUÑECAS ──────────────────────────────── */
@media (max-width: 768px) {
  .tipos-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── ADOPCIÓN / CTA ────────────────────────────────── */
@media (max-width: 600px) {
  .adoptar-card {
    padding: 2rem 1.25rem;
  }

  .adoptar-steps {
    gap: 0.75rem;
  }
}

/* ─── TESTIMONIOS / CARRUSEL ────────────────────────── */
@media (max-width: 768px) {
  .carousel-card {
    min-width: calc(100vw - 3rem);
  }

  .carousel-controls {
    display: none; /* En móvil el swipe táctil es suficiente */
  }
}

/* ─── FAQ ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── FOOTER ────────────────────────────────────────── */
@media (max-width: 600px) {
  footer .container {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

/* ─── MODALES ───────────────────────────────────────── */
@media (max-width: 768px) {
  .doll-modal {
    width: 95%;
    border-radius: 16px;
  }

  .modal-layout {
    flex-direction: column;
  }

  .modal-image img {
    min-height: 240px;
    max-height: 320px;
  }

  .modal-text {
    padding: 1.5rem 1.25rem;
  }

  .modal-title {
    font-size: 1.8rem;
  }

  .modal-story {
    font-size: 0.95rem;
  }

  .modal-close {
    top: 0.75rem;
    right: 1rem;
    font-size: 1.75rem;
  }

  .modal-media {
    padding: 0 1.25rem 1.5rem;
  }

  .modal-extra-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── FLOATING IG BUTTON ────────────────────────────── */
@media (max-width: 480px) {
  .float-ig-btn {
    width: 48px;
    height: 48px;
    bottom: 1rem;
    right: 1rem;
  }
}

/* ─── ADMIN PANEL ───────────────────────────────────── */
@media (max-width: 600px) {
  .admin-body {
    padding: 20px 12px;
  }

  .admin-header h1 {
    font-size: 1.4rem;
  }

  .admin-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .btn-logout {
    align-self: flex-end;
  }

  .admin-card {
    padding: 1.5rem 1.25rem;
  }

  .form-row {
    flex-direction: column;
  }
}