/* ============================================================
   Estudio Reformas BCN — mobile-compact.css
   Activa solo en pantallas <= 720px. Reduce paddings, tipografias
   y oculta elementos secundarios para hacer la web mas rapida de
   recorrer en telefono.
   ============================================================ */

@media (max-width: 720px) {

  /* ── Tipografias generales mas compactas ─────────────────── */
  h1 { font-size: clamp(34px, 9vw, 46px) !important; line-height: 1.06 !important; }
  h2, .section-title { font-size: clamp(28px, 7.5vw, 36px) !important; }
  h3 { font-size: 20px !important; }

  /* ── Paddings de seccion mucho mas justos ────────────────── */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .hero { padding-top: 90px !important; padding-bottom: 56px !important; }
  .page-hero { padding-top: 96px !important; padding-bottom: 40px !important; }

  /* ── HERO de home ────────────────────────────────────────── */
  .hero .hero-lead,
  .hero p.hero-lead { font-size: 15px !important; line-height: 1.55 !important; }
  .hero-stats { gap: 18px !important; margin-top: 28px !important; }
  .hero-stats > div { flex: 1 !important; min-width: 0 !important; }
  /* Ocultar imagen secundaria del hero (la pequena) para ahorrar espacio */
  .hero-small,
  .hero img.hero-small,
  img[alt*="cocina reformada"] { display: none !important; }
  /* Si el hero tiene grid imagen+texto, la imagen va debajo y mas baja */
  .hero-image,
  .hero-image-wrap { aspect-ratio: 16/10 !important; margin-top: 28px !important; }

  /* ── Bandas decorativas (marquees, tickers de servicios) ─── */
  .marquee,
  .ticker,
  .scroller,
  .services-marquee { padding-top: 12px !important; padding-bottom: 12px !important; }

  /* ── About / Servicios: cards mas compactos ──────────────── */
  .about-preview,
  .about-preview .about-content { gap: 24px !important; }
  .services-grid,
  .services .grid { gap: 14px !important; }
  .service-item,
  .service-card { padding: 18px !important; }
  .service-title { font-size: 17px !important; margin-bottom: 6px !important; }

  /* ── Proceso (4 pasos): que no ocupen tanto ──────────────── */
  .process .steps,
  .process-grid { gap: 14px !important; }
  .step { padding: 16px !important; }
  .step-num,
  .step .num { font-size: 12px !important; }
  .step-title { font-size: 17px !important; }
  .step p { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* ── Testimonios: ocultar a partir del 2 (en movil basta uno) */
  .testimonials .testimonial-list > *:nth-child(n+2),
  .testimonials .testimonials-grid > *:nth-child(n+2) {
    display: none !important;
  }
  .testimonials .testimonial { padding: 18px !important; }

  /* ── Stats strip (proyectos): puro decorativo, fuera ─────── */
  .stats-strip { display: none !important; }

  /* ── Proyectos: grid compacto ────────────────────────────── */
  .projects-grid { gap: 16px !important; }
  .project-card { padding: 0 !important; }
  .project-card .project-info { padding: 14px 16px !important; }
  .project-card h3,
  .project-title { font-size: 17px !important; }

  /* ── Sobre-nosotros: secciones decorativas mas estrechas ── */
  .numbers-section { padding-top: 36px !important; padding-bottom: 36px !important; }
  .numbers-section .numbers-grid { gap: 18px !important; }
  .numbers-section h3 { font-size: 28px !important; }
  .values-section .value-card { padding: 18px !important; }

  /* ── CTA final: mas justo ────────────────────────────────── */
  .cta-final { padding-top: 56px !important; padding-bottom: 56px !important; }
  .cta-final h2 { font-size: 30px !important; }
  .cta-final p { font-size: 14.5px !important; }

  /* ── FAQ contacto: compacto ──────────────────────────────── */
  .faq-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .faq-item { padding: 14px 0 !important; }
  .faq-item h3 { font-size: 15.5px !important; }
  .faq-item p { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* ── Formulario contacto ─────────────────────────────────── */
  .contact-layout { gap: 28px !important; }
  .contact-form .form-row { gap: 12px !important; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: 16px !important; /* evita zoom auto en iOS */ }
  .contact-form textarea { min-height: 100px !important; }

  /* ── Footer: mas pequeno ─────────────────────────────────── */
  footer { padding-top: 36px !important; padding-bottom: 24px !important; }
  footer .footer-grid { gap: 24px !important; }
  footer h4 { font-size: 13px !important; margin-bottom: 10px !important; }
  footer a, footer li { font-size: 13px !important; }

  /* ── Botones algo mas anchos para tap mas facil ──────────── */
  .btn,
  .btn-primary,
  .btn-outline { padding-top: 13px !important; padding-bottom: 13px !important; font-size: 14px !important; }

  /* ── Overlay Sitalia (banner DEMO + boton volver) ────────── */
  .s-demo-banner { font-size: 9.5px !important; padding: 7px 12px !important; letter-spacing: .14em !important; }
  .s-back { top: 40px !important; padding: 6px 10px !important; font-size: 10.5px !important; }

}

/* ── Telefonos muy pequenos (<= 380px): un poco mas ahorro ── */
@media (max-width: 380px) {
  h1 { font-size: 30px !important; }
  .section-title, h2 { font-size: 25px !important; }
  section { padding-top: 44px !important; padding-bottom: 44px !important; }
  .hero { padding-top: 80px !important; padding-bottom: 44px !important; }
}