/* ==========================================================================
   La Trastienda — Media queries mobile-first
   style.css define la base (~320-479px). Aquí solo AÑADE o REEMPLAZA
   propiedades a partir de cada breakpoint — nunca dupliques un selector
   completo, para no desincronizar los dos ficheros con el tiempo.
   Breakpoints (ver variables.css): 480 / 768 / 1024 / 1280
   ========================================================================== */

/* ==========================================================================
   480px — móvil grande
   ========================================================================== */
@media (min-width: 480px) {
  .btn {
    flex: 0 0 auto;
    width: auto;
  }

  .consent-banner__actions .btn {
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   Barra de acciones móvil (sólo en móvil < 768px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Mostrar la barra */
  .mobile-action-bar {
    display: block;
  }

  /* Añadir espacio inferior al body para que el contenido no quede
     oculto bajo la barra (altura de la barra ~68px + safe-area) */
  body.has-mobile-bar {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   768px — tablet: la navegación pasa de panel móvil a barra horizontal
   ========================================================================== */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-32);
  }

  .header__logo img {
    height: 64px;
  }

  .footer__logo img {
    height: 68px;
  }

  .header__menu-toggle {
    display: none;
  }

  .header__cta {
    display: inline-flex;
  }

  .nav {
    position: static;
    inset: auto;
    transform: none;
    visibility: visible; /* en desktop el panel siempre está "abierto" (es la barra horizontal), sin depender de data-open */
    padding: 0;
    background: transparent;
    overflow: visible;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
  }

  .nav__link {
    padding: var(--space-8) var(--space-4);
    font-size: var(--font-size-body);
  }

  .nav__link[aria-current='page'] {
    background: transparent;
    color: var(--color-brown);
  }

  .nav__footer {
    display: none; /* en desktop el nav es barra horizontal, no necesita el footer de móvil */
  }

  .nav__cta {
    display: none; /* ya está el CTA del header en desktop, no se duplica */
  }

  .footer__details {
    border-bottom: none;
  }

  .footer__heading {
    pointer-events: none;
    padding-block: 0;
    margin-bottom: var(--space-12);
  }

  .footer__icon {
    display: none;
  }

  .hero {
    min-height: 80vh;
  }

  .hero__status {
    padding: var(--space-12) var(--space-24);
    font-size: 1.125rem;
  }

  .hero__media::after {
    background: linear-gradient(0deg, rgba(46, 28, 15, 0.75) 0%, rgba(46, 28, 15, 0.5) 60%, rgba(46, 28, 15, 0.3) 100%);
  }

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

  .feature {
    flex-direction: row;
    align-items: center;
  }

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

  .consent-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-16);
  }

  .consent-banner__text {
    max-width: 60ch;
  }
}

/* ==========================================================================
   1024px — tablet grande / portátil pequeño
   ========================================================================== */
@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-64);
  }

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

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

  .hero__content {
    max-width: 720px;
  }
}

/* ==========================================================================
   1280px — escritorio
   ========================================================================== */
@media (min-width: 1280px) {
  .section {
    padding-block: var(--space-80);
  }

  .cards {
    gap: var(--space-32);
  }
}