/* ============================================================
   4BITS · Responsive (MXDEV-181)
   Breakpoints: 1600 base · 1440 · 1200 · 992 · 768 · 576 · 375
   ============================================================ */

/* ── ≤1600: el gutter y las tipografías empiezan a escalar ── */
@media (max-width: 1600px) {
  :root {
    --fb-gutter: clamp(20px, 6.25vw, 100px);
    --fb-fs-display: clamp(32px, 3.75vw, 60px);
    --fb-fs-h1:      clamp(26px, 3.125vw, 50px);
    --fb-fs-h2:      clamp(26px, 3.125vw, 50px);
    --fb-fs-card:    clamp(20px, 1.75vw, 28px);
    --fb-fs-lead:    clamp(17px, 1.375vw, 22px);
    --fb-fs-h3:      clamp(24px, 2.125vw, 34px);
  }

  .fb-hero__carousel,
  .fb-hero__carousel .fb-carousel__track,
  .fb-hero__slide { min-height: min(900px, 100svh); }

  .fb-hero__inner { padding-top: clamp(140px, 27.5vw, 247.5px); }

  .fb-hero .fb-carousel__arrow--prev,
  .fb-hero .fb-carousel__arrow--next { top: auto; bottom: 80px; }
  .fb-hero .fb-carousel__dots { top: auto; bottom: 95px; }

  .fb-carousel__arrow--prev { left: clamp(16px, 10vw, 160px); }
  .fb-carousel__arrow--next { right: clamp(16px, 10vw, 160px); }

  .fb-promo__inner { padding-inline: clamp(20px, 13.75vw, 220px); }
  .fb-promo .fb-carousel__arrow--prev,
  .fb-promo .fb-carousel__arrow--next { top: auto; bottom: 52px; }
  .fb-promo .fb-carousel__dots { top: auto; bottom: 67px; }
}

/* ── ≤1400: la tarjeta del hero se acomoda al ancho disponible ── */
@media (max-width: 1400px) {
  .fb-hero__card { margin-right: 0; flex-basis: 360px; width: 360px; }
  .fb-about__cards { flex-basis: 460px; width: 460px; }
  .fb-contact__info { flex-basis: 45%; width: 45%; padding: 40px; }
  .fb-form { padding: 40px; }
}

/* ── ≤1200: tarjeta del hero debajo, servicios a 2 columnas ── */
@media (max-width: 1200px) {
  .fb-hero__inner { flex-direction: column; }
  .fb-hero__card {
    flex-basis: auto;
    width: 100%;
    max-width: 480px;
    margin-top: 40px;
  }

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

  .fb-about__inner { flex-direction: column; }
  .fb-about__cards { flex-basis: auto; width: 100%; }
  .fb-about__img { min-height: 300px; }
}

/* ── ≤992: menú hamburguesa, contacto apilado ── */
@media (max-width: 992px) {
  :root { --fb-header-h: 76px; }

  .fb-header__inner { padding-block: 12px; }
  .fb-header__logo-img { width: 124px; height: 46px; }

  .fb-header__toggle { display: flex; }
  .fb-header__cta { display: none; }

  .fb-header__nav {
    position: fixed;
    inset: var(--fb-header-h) 0 auto;
    max-height: calc(100svh - var(--fb-header-h));
    overflow-y: auto;
    padding: 24px var(--fb-gutter) 40px;
    background: var(--fb-dark);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fb-t), transform var(--fb-t), visibility var(--fb-t);
  }
  .fb-header.is-scrolled .fb-header__nav { background: #d5d5d5; }
  .fb-header__nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .fb-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .fb-menu li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .fb-header.is-scrolled .fb-menu li { border-bottom-color: rgba(71, 0, 0, .14); }
  .fb-menu a { padding: 16px 0; font-size: 17px; }

  .fb-section { padding-block: 64px; }

  .fb-contact__panel { flex-direction: column; min-height: 0; margin-top: 36px; }
  .fb-contact__info { flex-basis: auto; width: 100%; padding: 36px 28px; }
  .fb-contact__info-inner { gap: 28px; }
  .fb-contact__group { gap: 14px; }
  .fb-form { padding: 32px 28px; gap: 28px; }
  .fb-form__row { flex-direction: column; gap: 22px; }
  .fb-form__row .fb-field { flex-basis: auto; width: 100%; }

  .fb-services__grid { margin-top: 36px; }

  .fb-promo__inner { flex-direction: column; padding-block: 56px; text-align: center; }
  .fb-promo__content { align-items: center; }
  .fb-promo__list { text-align: left; }
  .fb-promo__figure {
    order: -1;
    width: 320px;
    max-width: 70%;
    margin-bottom: 0;
    align-self: center;
  }
  .fb-promo__carousel,
  .fb-promo__carousel .fb-carousel__track,
  .fb-promo__slide { min-height: 0; }
  .fb-promo .fb-carousel__arrow--prev,
  .fb-promo .fb-carousel__arrow--next { display: none; }
  .fb-promo .fb-carousel__dots { bottom: 20px; }

  .fb-footer__top-inner { flex-direction: column; text-align: center; gap: 24px; }
  .fb-footer__bottom-inner { flex-direction: column; text-align: center; gap: 14px; }
  .fb-footer__legal-menu { justify-content: center; }

  .fb-map { padding-bottom: 64px; }
  .fb-map__frame { height: var(--fb-map-h-mobile, 320px); }
}

/* ── ≤768: una columna en todo ── */
@media (max-width: 768px) {
  .fb-services__grid { grid-template-columns: 1fr; }

  .fb-hero__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .fb-hero__actions .fb-btn { width: 100%; }

  .fb-hero__subtitle { margin-top: 18px; }
  .fb-hero__desc { margin-top: 18px; }
  .fb-hero__actions { margin-top: 26px; }

  .fb-hero .fb-carousel__arrow--prev,
  .fb-hero .fb-carousel__arrow--next { display: none; }
  .fb-hero .fb-carousel__dots { bottom: 40px; }

  .fb-hero__card { padding: 24px; }
  .fb-pillar, .fb-service { padding: 24px; }

  .fb-about__inner { gap: 32px; }
  .fb-about__col { gap: 28px; }
  .fb-about__head .fb-section__title { margin-bottom: 20px; }
  .fb-about__cards { gap: 20px; }

  .fb-partners__list { gap: 28px; }
  .fb-partners__item { width: 160px; height: 56px; }

  .fb-modal__dialog { padding: 44px 24px; }
  .fb-modal__close { top: 12px; right: 12px; }

  /* Deja aire para que el botón de WhatsApp no tape el Enviar */
  .fb-form { padding-bottom: 40px; }
  .fb-wa { bottom: 20px; }
  .fb-wa--right { right: 20px; }
  .fb-wa--left  { left: 20px; }
  .fb-wa__tooltip { display: none; }
}

/* ── ≤576 ── */
@media (max-width: 576px) {
  .fb-section { padding-block: 48px; }

  .fb-contact__info { padding: 28px 20px; }
  .fb-form { padding: 28px 20px; }

  .fb-partners__item { width: 132px; height: 48px; }

  .fb-footer__logo img { width: 158px; }
}

/* ── Inputs ≥16px en iOS para evitar el zoom automático ── */
@media (max-width: 992px) {
  .fb-field__input { font-size: 16px; }
  .fb-field__label { font-size: 16px; }
}

/* ── Áreas táctiles mínimas ── */
@media (pointer: coarse) {
  .fb-carousel__arrow { width: 48px; height: 48px; }
  .fb-menu a { min-height: 44px; display: flex; align-items: center; }
}