/* =========================================================
   Millennium Music Distribution — responsive.css
   Desktop -> Laptop -> Tablet -> Mobile
   ========================================================= */

/* ---------- <= 1180px : laptop ---------- */
@media (max-width:1180px){
  .nav{ gap:20px; }
  .nav-link{ font-size:13.5px; }
  .platform-row{ flex-wrap:wrap; justify-content:center; gap:22px 28px; }
  .benefit-grid--5{ grid-template-columns:repeat(3,1fr); }
  .benefit-grid--4{ grid-template-columns:repeat(3,1fr); }
  .tool-grid{ grid-template-columns:repeat(3,1fr); }
  .lyrics-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
  .splits-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .splits-right{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
  .splits-right .check-list{ flex-direction:row; flex-wrap:wrap; gap:16px 26px; }
}

/* ---------- <= 1024px : tablet grande ---------- */
@media (max-width:1024px){
  :root{ --header-h:66px; }

  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(9,10,16,.97);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-dark);
    padding:10px 24px 22px;
    margin:0;
    max-height:0; overflow:hidden;
    opacity:0; visibility:hidden;
    transition:max-height .42s var(--ease), opacity .28s var(--ease), visibility .28s var(--ease);
  }
  .nav.is-open{ max-height:min(78vh, 520px); opacity:1; visibility:visible; overflow-y:auto; }
  .nav-link{
    font-size:16px; padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav-link::after{ display:none; }
  .nav-mobile-actions{ display:flex; gap:10px; margin-top:18px; }
  .nav-mobile-actions .btn{ flex:1; }
  .header-actions{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }

  /* El header ya no es transparente cuando el menú está abierto */
  .site-header.is-menu-open{
    background:rgba(7,8,13,.92);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }

  .section{ padding:66px 0; }
  .hero{ padding:calc(var(--header-h) + 48px) 0 66px; }
  .hero-inner{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .hero-copy{ max-width:640px; min-width:0; }
  .hero-sub{ max-width:560px; }
  .hero-highlights{ flex-wrap:wrap; gap:20px 26px; }
  .hero-visual{ margin-right:0; }

  .eco-body{ grid-template-columns:1fr; gap:36px; }
  .eco-cta{ max-width:340px; }
  .pillars{ grid-template-columns:repeat(2,1fr); gap:28px 0; }
  .pillar:nth-child(odd){ border-left:0; padding-left:0; }

  .panel-inner{ grid-template-columns:1fr; gap:40px; }
  .footer-inner{ grid-template-columns:1fr; gap:38px; }
}

/* ---------- <= 860px : tablet ---------- */
@media (max-width:860px){
  .platform-row{ justify-content:center; gap:22px 30px; }
  .platform{ font-size:14px; }
  .benefit-grid--5,
  .benefit-grid--4{ grid-template-columns:repeat(2,1fr); }
  .tool-grid{ grid-template-columns:repeat(2,1fr); }

  .flow-inner{ grid-template-columns:1fr; gap:34px; }
  .steps{ flex-wrap:wrap; justify-content:center; gap:22px 10px; }
  .step{ flex:0 0 calc(50% - 24px); }
  .step-arrow{ display:none; }

  .splits-inner{ grid-template-columns:1fr; gap:34px; }
  .splits-left{ text-align:center; }
  .splits-right{ flex-direction:column; align-items:flex-start; }
  .splits-right .check-list{ flex-direction:column; }

  .lyrics-inner{ grid-template-columns:1fr; gap:32px; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
}

/* ---------- <= 560px : móvil ---------- */
@media (max-width:560px){
  :root{ --gutter:18px; }

  .section{ padding:54px 0; }
  .brand-text strong{ font-size:14px; }
  .brand-text small{ font-size:8.5px; }

  .hero{ padding:calc(var(--header-h) + 34px) 0 54px; }
  .hero-title{ font-size:clamp(30px,8.6vw,40px); }
  .hero-cta{ gap:10px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-highlights{ gap:18px 20px; }
  .hero-highlights li{ flex:0 0 calc(50% - 10px); }

  .platforms{ padding:56px 0 34px; }
  .platform-row{ gap:18px 24px; }

  .benefit-grid--5,
  .benefit-grid--4{ grid-template-columns:1fr; }
  .tool-grid{ grid-template-columns:1fr; }
  .tool-preview{ aspect-ratio:16/9; }

  .pillars{ grid-template-columns:1fr; gap:24px; }
  .pillar{ border-left:0; padding-left:0; }
  .eco-cta{ max-width:none; }

  .app--light{ grid-template-columns:1fr; }
  .app--light .app-side{
    flex-direction:row; overflow-x:auto; gap:6px;
    border-right:0; border-bottom:1px solid var(--app-line);
    padding:10px;
  }
  .app--light .app-side-brand{ padding:0 8px 0 2px; }
  .app--light .app-side-brand b{ display:none; }
  .app--light .app-nav{ white-space:nowrap; }
  .app--light .app-stats{ grid-template-columns:1fr; }
  .app--light .app-grid{ grid-template-columns:1fr; }
  .spark-tip{ display:none; }

  .step{ flex:0 0 100%; }
  .final-actions .btn{ flex:1 1 100%; }
  .footer-cols{ grid-template-columns:1fr; gap:24px; }
}

/* ---------- Pantallas muy anchas ---------- */
@media (min-width:1480px){
  :root{ --container:1240px; }
}

/* ---------- Calculadora ---------- */
@media (max-width:1024px){
  .calc-shell{ grid-template-columns:1fr; }
  .calc-form{ border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width:560px){
  .calc{ padding:54px 0; }
  .calc-form,
  .calc-result{ padding:22px 18px; }
  .calc-compare{ grid-template-columns:1fr 1fr; }
  .cmp-diff{ grid-column:1 / -1; text-align:left; padding-top:10px; border-top:1px solid #e2e9f6; }
  .cmp-diff b{ display:inline; }
  .calc-breakdown-head,
  .calc-breakdown li{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .calc-breakdown-head span:nth-child(2),
  .calc-breakdown li .calc-str{ display:none; }
}