/* ---------------------------------------------
   Below 960px the "nosotros" section is tall and narrow, so a 16:9 photo
   stretched to cover it crops down to a hugely zoomed face. Instead the photo
   becomes a band across the top that fades into the section's solid green.
   --------------------------------------------- */
@media (max-width: 959px) {
  /* The bar already carries WhatsApp, so the floating bubble would just be a
     second stacked control over the same content. */
  .mobile-bar { display: flex; }
  .wa-float { display: none; }

  /* The hero is very tall on phones, so covering it with a 16:9 photo zooms
     the crop into an unreadable blur. Pinned to the lower band instead, at a
     sane scale, fading out before it reaches the copy. */
  .hero__scene {
    top: auto;
    height: 42%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  }
  .hero__scene img { object-position: 22% 78%; }

  .nosotros__media {
    bottom: auto;
    height: 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  .nosotros__media img { object-position: center 38%; }
  .nosotros::before {
    background: linear-gradient(180deg, rgba(8,42,34,0.74) 0%, rgba(8,42,34,0.86) 42%, rgba(8,42,34,0.95) 60%);
  }
}

/* ---------------------------------------------
   540px+ — small tablets / large phones
   --------------------------------------------- */
@media (min-width: 540px) {
  .quote-form__row { flex-direction: row; }
  .final-cta__btns { flex-direction: row; width: auto; max-width: none; justify-content: center; }
  .proceso__steps { gap: var(--space-6); }
}

/* ---------------------------------------------
   768px+ — tablets
   --------------------------------------------- */
@media (min-width: 768px) {
  .creds__inner { grid-template-columns: repeat(4, 1fr); }
  .testimonios__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
  .seguros__head { margin-bottom: var(--space-12); }
}

/* ---------------------------------------------
   960px+ — hero goes two-column, product tabs go
   side-by-side. This is the first width where the
   quote card and the copy can genuinely coexist.
   --------------------------------------------- */
@media (min-width: 960px) {
  .hero { padding: var(--space-16) 0 var(--section-pad); }
  /* Grid regroups the mobile order back into two columns: copy + points
     stack on the left, the quote card spans both rows on the right. */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "copy   card"
      "points card";
    column-gap: var(--space-12);
    row-gap: var(--space-8);
  }
  .hero__copy { grid-area: copy; padding-top: var(--space-4); }
  /* align-self keeps the points directly under the copy instead of being
     stretched down by the taller quote card spanning both rows. */
  .hero__points { grid-area: points; align-self: start; }
  /* No sticky here: the card is the tallest grid item, so its area gives it
     zero travel. The offset it used to carry became a 92px push-down the one
     time another rule downgraded it to `relative`. */
  .quote-card { grid-area: card; align-self: start; }

  .seguros__layout { flex-direction: row; gap: var(--space-10); }
  .seguros__side { flex: 0 0 var(--tabs-w); }
  .seg-panel { flex: 1; min-width: 0; }
  .seg-tab--active::after { display: block; }

  .nosotros__inner { flex-direction: row; gap: var(--space-16); }
  .nosotros__lead { flex: 1 1 45%; }
  .nosotros__list { flex: 1 1 55%; }

  .proceso__steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

  .faq__inner { flex-direction: row; gap: var(--space-16); }
  .faq__head { flex: 0 0 34%; }
  .testimonios__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------
   1024px+ — the whole "seguros" section switches to
   its composed form: ambient header image bled to the
   viewport edge and dissolved by a mask, plus the
   photo-faced product card below.
   --------------------------------------------- */
@media (min-width: 1024px) {
  .seguros__head-media {
    display: block;
    position: absolute;
    z-index: 0;
    /* Height is bound to the header band, never derived from its own width:
       the width grows with the viewport (it bleeds off-screen), so an
       aspect-ratio here made the image spill down over the product card on
       wide screens. Top/bottom pin it inside the header instead. */
    top: 0;
    bottom: 0;
    /* Left edge lands on the same vertical as the product card's photo below
       (tabs + gap + the card body's 56%), so both photographic masses share
       one line. Right edge reaches the viewport from inside the container. */
    left: calc(var(--tabs-w) + var(--space-10) + (100% - var(--tabs-w) - var(--space-10)) * 0.56);
    right: calc(50% - 50vw);
    opacity: 0.9;
    /* Two masks intersected: the radial dissolves it toward the headline,
       the linear softens the top and bottom so it has no cut edge at all. */
    -webkit-mask-image:
      radial-gradient(108% 125% at 92% 50%, #000 26%, rgba(0,0,0,0.5) 56%, transparent 80%),
      linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(108% 125% at 92% 50%, #000 26%, rgba(0,0,0,0.5) 56%, transparent 80%),
      linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
  }
  .seguros__head-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Sets the height of the header's photographic band */
  .seguros__head { min-height: 360px; display: flex; align-items: center; }

  /* The photo becomes the card's right-hand face: full height, no gap, no
     radius of its own — the card's own corners do the shaping. */
  .seg-card { flex-direction: row; align-items: stretch; }
  .seg-card__body { order: 1; flex: 1 1 56%; padding: var(--space-8); align-self: center; }
  .seg-card__figure { order: 2; flex: 1 1 44%; aspect-ratio: auto; }
}

/* ---------------------------------------------
   1080px+ — only now is there room for the full
   horizontal nav without it wrapping
   --------------------------------------------- */
@media (min-width: 1080px) {
  .navbar__nav { display: block; }
  .navbar__actions { display: flex; }
  .navbar__compact { display: none; }
  .navbar__mobile { display: none !important; }

  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: var(--space-10); }
}