/* ============================================================
   ARCAICOS BEBIDAS NATURALES
   Responsive · responsive.css
   Mobile-first breakpoints

   Breakpoints:
     xs  < 480px   (mobile pequeño)
     sm  = 480px   (mobile landscape)
     md  = 768px   (tablet)
     lg  = 1024px  (desktop)
     xl  = 1280px  (desktop ancho)
   ============================================================ */


/* -- Desktop mid-range (1024px-1279px): compact 7-item nav -- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar__nav {
    gap: 0;
  }

  .navbar__link {
    padding: var(--space-2) var(--space-2);
  }

  .navbar__link--cta {
    padding: var(--space-2) var(--space-3);
  }
}

/* -- XL Desktop -- */
@media (min-width: 1280px) {
  .navbar__link {
    font-size: var(--size-sm);
    padding: var(--space-2) var(--space-4);
  }

  .navbar__link--cta {
    padding: var(--space-2) var(--space-5);
  }
}


/* -- Tablet & below (< 1024px) -- */
@media (max-width: 1023px) {

  /* Navbar ? modo mobile */
  .navbar__nav,
  .navbar__social {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* Hero ? single column */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: var(--space-16);
    gap: var(--space-8);
  }

  .hero__logo-wrap {
    margin-inline: auto;
    width: min(320px, 90%);
  }

  .hero__description {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__image-wrap {
    order: -1;
  }

  .hero__image-wrap img {
    max-width: 300px;
  }

  /* About */
  .about__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-10);
  }

  .about__pillars {
    max-width: 500px;
    margin-inline: auto;
  }

  .about__pillar {
    text-align: left;
  }

  /* Franchise CTA */
  .franchise-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Community */
  .community__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

  .community__actions {
    margin-inline: auto;
  }

  /* Footer */
  .footer__inner,
  .footer__inner--pdf {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__col--left,
  .footer__col--brand,
  .footer__col--right {
    justify-self: center;
    width: 100%;
    max-width: 26rem;
  }

  .footer__col--right {
    text-align: center;
    align-items: center;
  }

  .footer__social {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Benefits strip */
  .benefits-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  /* Product detail */
  .product-detail__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-detail__img-col {
    position: static;
    max-width: 460px;
    margin-inline: auto;
  }

  /* Product grid */
  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Map */
  .map-section__embed {
    height: 360px;
  }

  /* Franchise hero */
  .franchise-hero__title {
    font-size: var(--size-4xl);
  }

  /* Contacto */
  .contact-canales__arab {
    width: min(240px, 42vw);
    opacity: 0.07;
  }
}


/* -- Mobile (< 768px) -- */
@media (max-width: 767px) {

  /* Escala tipográfica */
  h1 { font-size: var(--size-4xl); }
  h2 { font-size: var(--size-3xl); }
  h3 { font-size: var(--size-2xl); }

  .section-header__title {
    font-size: var(--size-3xl);
  }

  /* Container */
  .container {
    padding-inline: var(--space-5);
  }

  /* Section spacing */
  .section {
    padding-block: var(--space-16);
  }
  .section--lg {
    padding-block: var(--space-20);
  }

  /* Hero */
  .hero__inner {
    padding-block: var(--space-12);
  }

  .hero__image-wrap img {
    max-width: 240px;
  }

  .hero__tagline {
    font-size: var(--size-lg);
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Lines grid */
  .lines-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
  }

  /* Product grid */
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contacto */
  .section--contact-canales {
    background-size:
      100% 100%,
      120px 240px,
      120px 240px;
    background-position:
      0 0,
      -16px -10px,
      34px 94px;
  }

  .contact-canales__arab {
    width: min(190px, 46vw);
    opacity: 0.06;
  }

  .benefit-card__icon-wrap {
    width: 66px;
    height: 66px;
    margin-bottom: var(--space-4);
  }

  .benefit-card__icon-wrap .bi {
    font-size: 1.6rem;
  }

  .grid--auto-280 {
    grid-template-columns: 1fr;
  }

  /* About */
  .about__image,
  .about__image-ring {
    width: min(300px, 100%);
    height: min(300px, 100%);
  }

  .about__image.about__image--banner {
    width: min(100%, 320px);
    height: auto;
    max-height: min(440px, 88vw);
  }

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

  /* About title */
  .about__title {
    font-size: var(--size-3xl);
  }

  /* Franchise CTA */
  .franchise-cta__title {
    font-size: var(--size-2xl);
  }

  /* Community */
  .community__title {
    font-size: var(--size-3xl);
  }

  .community__social-btn {
    width: 100%;
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__social {
    position: static;
    flex-direction: row;
  }

  .footer__col-title {
    min-width: 0;
    width: 100%;
  }

  .footer__link,
  .footer__contact-text {
    font-size: var(--size-sm);
  }

  .footer__col--brand .footer__logo {
    width: min(120px, 38vw);
    height: auto;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Process steps */
  .process-step {
    flex-direction: column;
  }

  /* Map */
  .map-section__embed {
    height: 260px;
  }

  .map-section__contact-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  /* Form */
  .form-card {
    padding: var(--space-6);
  }

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

  .form-group--full {
    grid-column: 1;
  }

  /* Page banner */
  .page-banner {
    height: 200px;
  }

  .page-banner__title {
    font-size: var(--size-2xl);
  }

  /* Franchise hero */
  .franchise-hero__title {
    font-size: var(--size-3xl);
  }

  .franchise-hero__subtitle {
    font-size: var(--size-lg);
  }

  /* Benefits strip */
  .benefits-strip__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  /* Filters */
  .filters {
    gap: var(--space-2);
  }

  /* Product detail */
  .product-detail__cta-actions {
    flex-direction: column;
  }

  .product-detail__cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  body.body--product-detail::before {
    background-size: cover, auto, min(118vw, 540px) auto;
    background-position: 0 0, 92% 36%, 94% 44%;
  }

  body.body--product-detail .product-detail,
  body.body--product-detail main > .section.section--light:last-of-type {
    background-color: rgba(250, 247, 242, 0.76);
    -webkit-backdrop-filter: saturate(1.05) blur(10px);
    backdrop-filter: saturate(1.05) blur(10px);
  }

  body.body--product-detail .product-detail__img-col {
    background-color: rgba(245, 236, 226, 0.78);
    -webkit-backdrop-filter: saturate(1.04) blur(6px);
    backdrop-filter: saturate(1.04) blur(6px);
  }

  /* Category grid */
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* FAB */
  .whatsapp-fab {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 52px;
    height: 52px;
  }
}


/* -- Small mobile (< 480px) -- */
@media (max-width: 479px) {

  h1 { font-size: var(--size-3xl); }
  h2 { font-size: var(--size-2xl); }

  .section-header__title {
    font-size: var(--size-2xl);
  }

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

  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Contacto */
  .contact-canales__decor {
    display: none;
  }

  .benefit-card {
    padding: var(--space-6);
  }

  .benefit-card__icon-wrap {
    width: 60px;
    height: 60px;
    margin-bottom: var(--space-3);
  }

  .benefit-card__icon-wrap .bi {
    font-size: 1.4rem;
  }

  .grid--auto-220 {
    grid-template-columns: 1fr 1fr;
  }

  .filter-btn {
    font-size: var(--size-xs);
    padding: var(--space-2) var(--space-3);
  }

  .franchise-hero__title {
    font-size: var(--size-2xl);
  }

  .benefits-strip__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .benefit-item__icon {
    font-size: 36px;
  }

  .community__title {
    font-size: var(--size-2xl);
  }

  .form-card {
    padding: var(--space-5);
  }
}


/* -- Inicio (maqueta PDF) -- */
@media (max-width: 1400px) {
  .page-home .lines-grid--pdf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .page-home .lines-grid--pdf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  .navbar--home-pdf .navbar__link {
    font-size: 0.65rem;
    padding: var(--space-2) var(--space-1);
    letter-spacing: 0.01em;
  }

  .navbar--home-pdf .navbar__link--cta {
    padding: var(--space-2) var(--space-2);
  }
}

@media (max-width: 767px) {
  .page-home .lines-grid--pdf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__inner--pdf {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .about__image-col--pdf {
    order: -1;
  }

  .community__pdf-shell {
    grid-template-columns: 1fr;
  }

  .community__pdf-panel--photo {
    order: -1;
  }

  .map-section__filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 479px) {
  .page-home .lines-grid--pdf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .line-card--pdf .line-card__label {
    font-size: 0.58rem;
    min-height: 42px;
  }

  .map-section__filters {
    grid-template-columns: 1fr;
  }

  .footer__inner--pdf {
    grid-template-columns: 1fr;
  }

  .hero:not(.hero--pdf) .hero__dec-arabesco {
    display: none;
  }

  .community .community__dec {
    display: none;
  }
}


/* ============================================================
   Tablet / móvil — arabescos contenidos, footer estable, tacto
   ============================================================ */

@media (max-width: 1023px) {
  .hero:not(.hero--pdf) .hero__decorations {
    contain: layout style;
  }

  .hero:not(.hero--pdf) .hero__dec-arabesco--tl {
    top: 0;
    left: max(-3rem, -10vw);
    width: min(14rem, 42vw);
    opacity: 0.055;
  }

  .hero:not(.hero--pdf) .hero__dec-arabesco--br {
    bottom: 3rem;
    right: max(-2.5rem, -8vw);
    width: min(12rem, 38vw);
    opacity: 0.055;
  }

  .community__dec--left {
    top: 0;
    left: max(-3rem, -11vw);
    width: min(15rem, 56vw);
    opacity: 0.055;
  }

  .community__dec--right {
    bottom: 0;
    right: max(-2.75rem, -10vw);
    width: min(14rem, 50vw);
    opacity: 0.055;
  }

  .navbar__inner {
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }

  .btn,
  .mobile-menu__link {
    touch-action: manipulation;
  }
}

@media (max-width: 767px) {
  .hero:not(.hero--pdf) .hero__dec-arabesco--tl,
  .hero:not(.hero--pdf) .hero__dec-arabesco--br {
    width: min(9rem, 40vw);
    opacity: 0.04;
  }

  .community__dec--left,
  .community__dec--right {
    width: min(10rem, 46vw);
    opacity: 0.04;
  }

  .hero__logo-deco {
    width: min(10rem, 68%);
    opacity: 0.28;
  }
}

@media (max-width: 900px) {
  .footer__inner,
  .footer__inner--pdf {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
    justify-items: center;
  }

  .footer__col--left,
  .footer__col--brand,
  .footer__col--right {
    justify-self: center;
    max-width: 26rem;
  }

  .footer__col--right {
    text-align: center;
    align-items: center;
  }

  .footer__social {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-2);
  }

  .footer__col-title {
    min-width: 0;
    width: auto;
    max-width: 100%;
  }

  .footer__links {
    align-items: center;
  }
}

/* Tablet: contacto + empresa en dos columnas (prioridad sobre reglas del bloque anterior) */
@media (min-width: 640px) and (max-width: 1023px) {
  .footer__col--right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
    justify-items: stretch;
    max-width: min(42rem, 100%);
  }

  .footer__col--right .footer__subcol {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .footer__links--2col {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .footer__links--2col .footer__link {
    text-align: center;
  }
}