/* ==========================================================================
   BIG BOSS — responsive.css
   Breakpoints dedicados: >1440 wide / 1024-1440 desktop / 768-1024 tablet /
   480-768 mobile grande / <480 mobile
   ========================================================================== */

/* ---- Wide desktop (>1440px): más aire, contenedor más ancho ---------------- */
@media (min-width: 1441px) {
  :root { --container: 1360px; }
  .hero-blob.one { width: 560px; height: 560px; }
  .hero-blob.two { width: 500px; height: 500px; }
}

/* ---- Laptop / desktop estándar (1024-1440px) es el layout base definido en style.css --- */

/* ---- Tablet (768-1024px) --------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }

  .nav-links, .header-actions .btn-ghost { display: none; }
  .nav-toggle { display: flex; }

  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-badge { margin-inline: auto; }
  .hero .lead { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { max-width: 420px; margin-inline: auto; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .packages-grid { grid-template-columns: repeat(2, 1fr); }

  .split, .split.reverse { grid-template-columns: 1fr; }
  .split .split-media, .split.reverse .split-media { order: 1 !important; }
  .split .split-copy, .split.reverse .split-copy { order: 2 !important; }

  .service-row { grid-template-columns: 1fr; text-align: left; }
  .service-row .frame { max-width: 480px; }

  .team-highlight { grid-template-columns: 1fr; }
  .team-highlight .frame { max-width: 460px; margin-inline: auto; }

  .feature-banner { grid-template-columns: 1fr; text-align: center; }
  .feature-banner .phases { justify-content: center; }

  .contact-layout { grid-template-columns: 1fr; }

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

/* ---- Mobile grande / phablet (480-768px) ------------------------------------ */
@media (max-width: 768px) {
  :root { --header-h: 70px; }
  .section { padding-block: 3.5rem; }

  .grid-4, .grid-3, .grid-2, .stats-strip, .packages-grid { grid-template-columns: 1fr; }

  .hero { min-height: auto; padding-bottom: 4rem; }
  .hero-visual { max-width: 300px; }
  .floater.f1 { width: 76px; height: 76px; }
  .floater.f2 { width: 64px; height: 64px; }
  .floater.f3 { display: none; }

  .marquee-track img { height: 26px; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .cta-final { padding-inline: 1.5rem; }
  .feature-banner { padding: 2rem; }

  .tabs-nav { width: 100%; justify-content: center; }
}

/* ---- Mobile (<480px) --------------------------------------------------------- */
@media (max-width: 480px) {
  .container { padding-inline: 1.25rem; }
  .hero-badge { font-size: 0.74rem; text-align: left; }
  .btn { width: 100%; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .cta-final .ctas { flex-direction: column; }
  .cta-final .ctas .btn { width: 100%; }

  .card, .package-card, .mv-card, .contact-info-card, .form-card { padding: 1.5rem; }
  .split-media .accent-badge { position: static; margin-top: -2.5rem; margin-inline: 1rem; }
}

/* ---- Landscape phones: recuperar altura del hero ------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 6rem 3rem; }
}