/* ============================================
   RESPONSIVE
   Ajustes para laptop pequeña, tablet y móvil.
   ============================================ */

/* ---- Tablet horizontal: buscador desplegable ---- */
@media (max-width: 900px) {
  .search {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 1rem;
    visibility: hidden;
    width: min(430px, calc(100vw - 2rem));
    min-width: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    box-shadow: 0 18px 55px rgba(7, 66, 88, 0.18);
  }

  .search.search--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .search__panel {
    right: 0;
    width: 100%;
  }

  .search-toggle {
    display: grid;
    margin-left: auto;
  }
}

/* ---- Tablet (≤ 900px) ---- */
@media (max-width: 900px) {
  .nav {
    gap: 1rem;
  }

  /* La tarjeta de tips se apila en columna */
  .tips__card {
    grid-template-columns: 1fr;
  }

  .tips__panel {
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 2.25rem;
  }

  .tips__figure {
    margin: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }

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

  /* FAQ pasa a una sola columna */
  .faq__box {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1rem;
  }
}

/* ---- Móvil (≤ 700px) ---- */
@media (max-width: 700px) {
  :root {
    --section-padding: 3.5rem 0;
    --header-height: 4.5rem;
  }

  /* Menú hamburguesa */
  .nav__toggle {
    display: block;
  }

  .search {
    top: calc(100% + 0.45rem);
    right: 0.5rem;
    width: calc(100vw - 1rem);
  }

  .search__panel {
    top: calc(100% + 0.45rem);
    border-radius: 17px;
  }

  .search__results {
    max-height: min(54vh, 360px);
  }

  .search__result {
    min-height: 3.55rem;
    padding-inline: 0.55rem;
  }

  .nav__menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background-color: var(--color-bg);
    padding: 1rem 3%;
    box-shadow: var(--shadow);
    transform: translateY(-150%);
    transition: transform 0.4s ease;
    z-index: -1;
  }

  .nav__menu--open {
    transform: translateY(0);
  }

  .nav__pill {
    width: 100%;
    padding: 0.75rem 1rem;
  }

  .nav__pill--active {
    background-color: var(--color-bg-alt);
  }

  .nav__pill--active::after {
    top: 0.7rem;
    right: auto;
    bottom: 0.7rem;
    left: 0;
    width: 3px;
    height: auto;
  }

  /* El banner es muy panorámico: en móvil se le da altura mínima */
  .hero__img {
    min-height: 220px;
    object-fit: cover;
    object-position: center;
  }

  .logo__img {
    height: 3rem;
  }

  .categories {
    padding: 3rem 0 2.75rem;
  }

  .categories__header {
    margin-bottom: 1.75rem;
    text-align: center;
  }

  .categories__heading {
    font-size: 1.4rem;
  }

  .categories__swiper {
    padding-inline: 2.5rem;
  }

  .category__img-wrap {
    width: min(140px, 88%);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand {
    align-items: center;
  }

  .footer__social-icons {
    justify-content: center;
  }

  /* Botones flotantes más pequeños en móvil */
  .floats__btn {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
  }

}

/* ---- Ajustes del refinamiento visual ---- */
@media (max-width: 900px) {
  .hero__content {
    width: min(680px, 76%);
  }

  .hero__overlay {
    background: linear-gradient(90deg, rgba(8, 43, 49, 0.9), rgba(8, 43, 49, 0.55) 65%, rgba(8, 43, 49, 0.12));
  }

  .categories__header {
    max-width: 650px;
  }

  .categories__carousel { width: calc(100% - 5rem); }
  .categories__arrow--prev { left: -3.5rem; }
  .categories__arrow--next { right: -3.5rem; }

  .tips__card {
    overflow: hidden;
    border-radius: 24px;
  }

  .tips__panel { border-radius: 0; }
  .tips__figure { min-height: 380px; border-radius: 0; }

  .product-directory {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .product-directory__cta { grid-column: 1 / -1; }

  .product-mega { right: 0.75rem; left: 0.75rem; }
  .product-mega__inner { max-height: calc(100vh - 6.5rem); }

  .line-card { min-height: 135px; }
}

@media (max-width: 700px) {
  .container { width: min(var(--container-width), calc(100% - 1.5rem)); }

  .header,
  .header--scrolled { height: 4.75rem; }

  .nav__menu { top: 4.75rem; }
  .logo__img { height: 3.1rem; }

  .hero {
    padding-top: calc(4.75rem + 0.75rem);
    padding-bottom: 1.25rem;
  }

  .hero__card {
    min-height: 610px;
    border-radius: 22px;
  }

  .hero__img {
    min-height: 100%;
    object-position: 55% center;
  }

  .hero__overlay {
    background: linear-gradient(0deg, rgba(8, 43, 49, 0.96) 0%, rgba(8, 43, 49, 0.78) 55%, rgba(8, 43, 49, 0.2) 100%);
  }

  .hero__content {
    justify-content: flex-end;
    width: 100%;
    padding: 1.5rem;
  }

  .hero__title {
    font-size: clamp(2.15rem, 10.5vw, 2.65rem);
    letter-spacing: -0.055em;
  }

  .hero__text { max-width: 34ch; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; width: 100%; }
  .hero__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    font-size: 0.64rem;
  }

  .hero__benefits li:last-child { grid-column: 1 / -1; }

  .categories { padding: 4rem 0 3.5rem; }
  .categories__header { margin-bottom: 1.75rem; text-align: center; }
  .categories__heading { font-size: 1.55rem; }
  .categories__description { font-size: 0.8rem; }
  .categories__carousel { width: calc(100% - 3.25rem); }
  .categories__swiper { padding-inline: 0; }
  .categories__arrow { width: 2.35rem; height: 2.35rem; }
  .categories__arrow--prev { left: -2.75rem; }
  .categories__arrow--next { right: -2.75rem; }
  .category { padding-inline: 0.4rem; }
  .category__img-wrap { width: min(112px, 88%); }

  .section__header { margin-bottom: 2.25rem; }

  .tips__panel { padding: 2rem 1.5rem; }
  .tips__heading { font-size: 2rem; }
  .tips__figure { min-height: 290px; }

  .reviews__grid { grid-template-columns: 1fr; }
  .review { padding: 1.4rem; }

  .faq__box { padding: 0.75rem; }
  .faq__question { font-size: 0.8rem; }

  .footer { padding-top: 4rem; }

  .nav.container,
  .hero.container { width: calc(100% - 1rem); }

  .header,
  .header--scrolled { height: 5rem; }

  .nav__menu { top: 5rem; }
  .logo__img { height: 3.35rem; }

  .hero { padding-top: calc(5rem + 0.5rem); }
  .hero__card { min-height: 650px; border-radius: 22px; }

  .product-directory {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 1.25rem;
    border-radius: 22px;
  }

  .product-directory__cta {
    grid-column: auto;
    min-height: 0;
    padding: 1.75rem;
  }

  .product-mega {
    top: calc(100% + 0.35rem);
    right: 0.4rem;
    left: 0.4rem;
  }

  .product-mega__inner {
    max-height: calc(100vh - 5.75rem);
    padding: 0.35rem;
    border-radius: 20px;
  }

  .product-mega .product-directory { padding: 1rem; }
  .product-mega .product-directory__cta { min-height: 0; }

  .lines-carousel { padding: 1rem 1rem 1.35rem; border-radius: 20px; }
  .line-card { min-height: 120px; padding: 1rem 1.25rem; }
  .line-card img { width: 72px; height: 72px; flex-basis: 72px; }
  .line-card h3 { font-size: 1rem; }
  .lines__arrow { width: 2.4rem; height: 2.4rem; }
  .lines__arrow--prev { left: -0.9rem; }
  .lines__arrow--next { right: -0.9rem; }
}