/* ═══════════════════════════════════════════════════════════
   BETHER STUDIO · RESPONSIVE
   1024 → tablet · 760 → mobile grande · 520 → mobile
═══════════════════════════════════════════════════════════ */

@media (max-width:1024px){
  .portfolio__grid{grid-template-columns:repeat(4,1fr)}
  .servicios__grid{grid-template-columns:repeat(2,1fr)}
  .servicios__grid .card:nth-child(4){grid-column:auto;transform:none}
  .servicios__grid .card:nth-child(5){grid-column:auto;transform:none}
  .servicios__grid .card:nth-child(4):hover,
  .servicios__grid .card:nth-child(5):hover{transform:translateY(-6px)}
  .proceso__grid{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .paso__arrow{display:none}
}

@media (max-width:900px){
  .hero{padding-top:112px;min-height:auto}
  .hero__inner{grid-template-columns:1fr;gap:54px;text-align:center}
  .hero__sub{margin-left:auto;margin-right:auto}
  .hero__actions{justify-content:center}
  .hero__scroll{display:none}
  .phone{width:235px}
  .phone__badge--1{left:-26px}
  .phone__badge--2{right:-26px}
  .nav__links{display:none}
  .contacto__inner{grid-template-columns:1fr}
  .testimonios__grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .portfolio__grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:760px){
  .portfolio__grid{grid-template-columns:repeat(2,1fr);gap:13px}
  .servicios__grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .form__row{grid-template-columns:1fr}
  /* Fondo aliviado: el grid futurista no aporta en mobile y cuesta GPU */
  .bg-grid{display:none}
  .bg-nebula{animation:none;filter:blur(4px)}
}

@media (max-width:520px){
  .proceso__grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .phone{width:215px}
  .phone__badge{display:none}
  .hero__actions .btn{flex:1 1 100%}
  .fab-wa{right:16px;bottom:16px;width:54px;height:54px}
  .appmodal__close{top:14px;right:14px}
}

/* Hover-dependientes: solo donde hay mouse real */
@media (hover:none){
  .phone__reflect{display:none}
}

/* ── NAV MOBILE ──────────────────────────────────────────── */
@media(max-width:900px){
  .nav__links{ display:none }
  .nav__burger{ display:flex }
}

/* ── FOOTER ──────────────────────────────────────────────── */
@media(max-width:760px){
  .footer__inner{ grid-template-columns:1fr;gap:28px }
}

/* ── HOME ────────────────────────────────────────────────── */
@media(max-width:900px){
  .hero__inner{ grid-template-columns:1fr;gap:48px;text-align:center }
  .hero__eyebrow,.hero__actions{ justify-content:center }
  .hero__sub,.hero__pills{ text-align:center }
  .hero__scroll{ display:none }
  .stats-row{ grid-template-columns:repeat(2,1fr) }
  .proceso__grid{ grid-template-columns:1fr;max-width:480px;margin:0 auto }
  .bento{ grid-template-columns:repeat(2,1fr) }
  .bento-card.wide{ grid-column:span 2 }
}
@media(max-width:600px){
  .bento{ grid-template-columns:1fr }
  .bento-card.wide{ grid-column:span 1 }
  .proof-item{ padding:6px 14px }
}

/* ── PORTFOLIO ───────────────────────────────────────────── */
@media(max-width:900px){
  .portf-layout{ grid-template-columns:1fr;gap:40px }
  .portf-phone-col{ order:-1 }
  .portf-phone{ width:min(260px,70vw) }
}
@media(max-width:520px){
  .ptab{ padding:10px 18px;font-size:var(--fs-tiny) }
  .portf-cta-row{ flex-direction:column;text-align:center }
}

/* ── PRECIOS ─────────────────────────────────────────────── */
@media(max-width:900px){
  .planes-grid{ grid-template-columns:1fr;max-width:480px;margin:0 auto }
  .amedida-card{ flex-direction:column }
  .proceso-mini{ flex-direction:column;align-items:flex-start }
  .proceso-mini__arrow{ transform:rotate(90deg) }
}

/* ── CONTACTO ────────────────────────────────────────────── */
@media(max-width:900px){
  .contacto-layout{ grid-template-columns:1fr }
}
@media(max-width:520px){
  .form__row{ grid-template-columns:1fr }
}

/* ── PORTADA TELÉFONO PORTFOLIO — mobile ─────────────────── */
@media(max-width:900px){
  /* El teléfono va arriba en mobile */
  .portf-layout{ grid-template-columns:1fr; gap:36px }
  .portf-phone-col{ order:-1 }
  .portf-phone{ width:min(260px,68vw) }
  .portf-cover-emoji{ font-size:clamp(2.4rem,12vw,3.8rem) }
}
@media(max-width:520px){
  .portf-phone{ width:min(230px,75vw) }
  .portf-play-dot{ font-size:.7rem; padding:9px 16px }
  .ptab{ padding:10px 16px; font-size:.72rem }
}

/* ── HERO STATS — mobile ──────────────────────────────────── */
@media(max-width:520px){
  .stats-row{ grid-template-columns:repeat(2,1fr) }
  .stat{ padding:10px 0 }
  .stat-n{ font-size:1.6rem }
}

/* ── BENTO — mobile ──────────────────────────────────────── */
@media(max-width:520px){
  .bento{ grid-template-columns:1fr; gap:12px }
  .bento-card.wide{ grid-column:span 1 }
}

/* ── PROOF BAR — mobile ──────────────────────────────────── */
@media(max-width:600px){
  .proof-inner{ gap:0 }
  .proof-item{ padding:6px 12px }
  .proof-div{ display:none }
  .proof-bar .proof-inner{ flex-wrap:wrap; justify-content:flex-start }
}

/* ── CTA FINAL — mobile ──────────────────────────────────── */
@media(max-width:520px){
  .cta-final__actions{ flex-direction:column; align-items:stretch }
  .cta-final__actions .btn{ text-align:center }
}

/* ── TABLA PRECIOS — mobile ──────────────────────────────── */
@media(max-width:700px){
  .tabla-comp th, .tabla-comp td{ padding:10px 10px; font-size:.75rem }
}

/* ── PAGE HERO — mobile ──────────────────────────────────── */
@media(max-width:520px){
  .page-hero{ padding-top:clamp(90px,20vw,130px) }
}

/* ── FEATURES responsive ─────────────────────────────────── */
@media(max-width:640px){
  .fslider{ padding:44px 20px 36px }
  .fslider__viewport{ min-height:220px }
  .fslider__emoji{ font-size:3rem }
  .fslider__title{ font-size:2.1rem }
}

/* ── Pantallas grandes (>1400px): aprovechar el espacio ──── */
@media(min-width:1400px){
  :root{ --maxw:1360px; --gutter:80px; }
  .hero__inner{ max-width:1400px; }
  .phone{ width:360px !important; }
}