/* HILO Beauty Studio - breakpoints.
   The Figma file only contains the 1920w desktop frame, so everything below
   1920 is derived: the container and type scale are fluid, and these queries
   reflow the grids at the widths where each one starts to crowd. */

/* -------------- 1300: the hero's 286px Figma gap no longer fits, close it up
   and switch the row back to space-between so the cards keep the edges */
@media (max-width: 1300px) {
  .hero__inner {
    justify-content: space-between;
    gap: 48px;
  }
}

/* ------------------------------------- 1180: nav collapses, cards go 3-up */
@media (max-width: 1180px) {
  .nav { padding: 9px 12px 9px 18px; }

  .nav__toggle { display: inline-flex; }

  .nav__list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border-radius: var(--r-28);
    /* Fully opaque on purpose. A translucent sheet sits over the hero photo AND
       the hero's own backdrop-filtered card, which leaves the menu unreadable;
       no blur here either, so the panel never joins that compositing group. */
    background: #ffffff;
    box-shadow:
      inset 0 0 0 1px var(--rose-7-10),
      var(--sh-nav);
    z-index: 1;
    /* closed state */
    opacity: 0;
    translate: 0 -8px;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
  }
  .nav__list[data-open="true"] {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }
  .nav__link { padding: 12px 14px; font-size: var(--fs-sm); }
  .nav__cta { margin-left: 0; margin-top: 4px; }

  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------- 1040: 3-up pairs go 2-up */
@media (max-width: 1040px) {
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
  /* .reviews is a scroll track now, so its width comes from grid-auto-columns;
     grid-template-columns would not reach the auto-flowed children. */
  .reviews { grid-auto-columns: calc((100% - 16px) / 2); }

  .bio__body { padding: 36px 34px 38px; }
  .promo__glow--b { left: 62%; }
}

/* ------------------------------------ 940: two-column blocks stack */
@media (max-width: 940px) {
  .section { padding-top: 56px; padding-bottom: 32px; }
  .servicios { padding-top: 64px; }
  .contacto { padding-bottom: 56px; }

  .hero {
    min-height: 0;
    padding: 128px var(--gutter) 48px;
  }
  .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .hero__card { max-width: none; }
  .rating { max-width: none; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__cell { border-bottom: 1px solid var(--rose-7-8); }
  .stats__cell:nth-child(2n) { border-right: 0; }
  .stats__cell:nth-last-child(-n + 2) { border-bottom: 0; }

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

  .coffee__card { padding: 24px; }
  .coffee__panel { max-width: none; padding: 28px 26px; }

  /* The 330px copy column and the two promo tiles stop coexisting here. */
  .promos__inner { grid-template-columns: 1fr; gap: 26px; }

  .ig-grid { grid-template-columns: repeat(3, 1fr); }

  .bio__card { grid-template-columns: 1fr; }
  .bio__media img { min-height: 320px; max-height: 460px; }

  .contacto__grid { grid-template-columns: 1fr; }
  .contacto__map { min-height: 340px; }
  .contacto__map iframe { min-height: 340px; }

  .footer__top { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ----------------------------------------- 720: single-column card grids */
@media (max-width: 720px) {
  .ba-grid { grid-template-columns: 1fr; }
  /* One card fills the track, so the arrows page one review at a time. */
  .reviews { grid-auto-columns: 100%; }

  .resultados__head .h2,
  .resultados__note { max-width: none; }

  .section__head,
  .resultados__head,
  .resenas__head,
  .instagram__head {
    align-items: flex-start;
    gap: 20px;
  }

  .promos__card,
  .laser__card { padding: 40px 22px; }
  .promos__grid { grid-template-columns: 1fr; }

  .promo__card { padding: 48px 22px; }
  .promo__form { flex-direction: column; align-items: stretch; }
  /* flex-basis follows the main axis, so the 340px that sets the field's WIDTH
     in the desktop row became its HEIGHT the moment this turned into a column -
     a 340px-tall box that border-radius: 999px then rendered as a circle.
     Height has to come from the padding here, not from the basis. */
  .promo__input {
    max-width: none;
    flex: 0 0 auto;
  }

  .bio__body { padding: 30px 26px 32px; }
  .info-card { padding: 24px 22px; }
}

/* ---------------------------------------------- 560: phone single column */
@media (max-width: 560px) {
  :root { --gutter: 16px; }

  .nav { top: 10px; width: calc(100% - 20px); padding: 8px 10px 8px 14px; }
  .nav__logo img { width: 56px; }

  .hero { padding-top: 112px; }
  .hero__card { padding: 26px 22px; gap: 12px; }
  .hero__actions { padding-top: 6px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .stats__grid { grid-template-columns: 1fr; }
  .stats__cell { border-right: 0; }
  .stats__cell:last-child { border-bottom: 0; }

  .cards { grid-template-columns: 1fr; }
  .card__desc { min-height: 0; }

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

  .footer__top { grid-template-columns: 1fr; }

  .wa {
    right: 14px;
    bottom: 14px;
    padding: 12px 18px 12px 14px;
  }
}

/* ------------------------------------ 400: tighten the smallest phones */
@media (max-width: 400px) {
  .wa span { display: none; }
  .wa { padding: 14px; }
  .score { padding: 14px 18px; }
  .bio__stats { gap: 18px; }
}

/* --------------------------------------------------- print / no-blur fall */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Without backdrop-filter the translucent panels lose legibility, so make
     every glass surface opaque enough to read on its own. */
  .glass,
  .nav,
  .chip,
  .tag,
  .btn--glass,
  .btn--ghost,
  .ba__handle,
  .ig-tile__badge {
    background: rgba(255, 255, 255, 0.94);
  }
  .ba__tag { background: rgba(23, 13, 18, 0.82); }
  .promo__input { background: rgba(255, 255, 255, 0.18); }
  .wa { background: rgb(37, 211, 102); }
}