/* ==========================================================================
   FRIM de Sonora: ajustes para pantallas mayores (min-width)
   El breakpoint de 48em también gobierna el acordeón de servicios: si cambia,
   actualizar styles.css y ACCORDION_QUERY en js/main.js.
   ========================================================================== */

/* Móviles medianos en adelante */
@media (min-width: 22em) {
  .btn__arrow {
    display: block;
  }
}

/* Móviles grandes: el botón del hero recupera su ancho natural */
@media (min-width: 30em) {
  .hero .btn {
    width: auto;
  }

  .contact-link {
    text-align: center;
  }
}

/* Tablets en adelante */
@media (min-width: 48em) {
  :root {
    --header-h: 7rem;
    --header-h-compact: 5.25rem;
    --logo-h: 6rem;
    --logo-h-compact: 4.5rem;
    --hero-text-width: min(36rem, 60vw);
  }

  /* Header superpuesto al hero; se vuelve sólido al hacer scroll */
  .site-header {
    background: linear-gradient(180deg, rgb(var(--color-green-rgb) / 0.88) 0, rgb(var(--color-green-rgb) / 0.6) 60%, rgb(var(--color-green-rgb) / 0) 100%);
  }

  .site-header.is-scrolled {
    background: var(--color-green);
  }

  .js .nav-toggle {
    display: none;
  }

  .js .site-nav,
  .js .site-nav.is-open {
    position: static;
    visibility: visible;
    padding: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  html:not(.js) .site-nav__list,
  .site-nav__list {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .js .site-nav__link {
    padding-inline: 0;
    border-bottom: 0;
  }

  .site-nav__link {
    position: relative;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.5rem;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--color-olive);
    transform: scaleX(0);
    transition: transform var(--ease);
  }

  .js .site-nav__link[aria-current] {
    color: inherit;
  }

  .site-nav__link[aria-current]::after {
    transform: scaleX(1);
  }

  /* Hero: video de fondo a sección completa */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(34rem, 92svh, 60rem);
    padding-block: calc(var(--header-h) + 2rem) 5rem;
    overflow: hidden;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background:
      var(--pattern-wheat) 0 100% / 8rem auto repeat-x,
      radial-gradient(55% 60% at 80% 62%, rgb(247 246 240 / 0.8), rgb(247 246 240 / 0) 70%),
      linear-gradient(180deg, #2f6136 0, var(--color-olive) 62%, var(--color-wheat) 100%);
  }

  /* El tramo opaco sigue al ancho del texto para garantizar la lectura sobre cualquier video */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        rgb(var(--color-green-rgb) / 0.94) 0,
        rgb(var(--color-green-rgb) / 0.84) calc(var(--hero-text-width) + 3rem),
        rgb(var(--color-green-rgb) / 0.12) calc(var(--hero-text-width) + 38%)
      ),
      linear-gradient(0deg, rgb(0 0 0 / 0.3) 0, rgb(0 0 0 / 0) 28%);
    pointer-events: none;
  }

  .video-toggle {
    right: var(--gutter);
    bottom: 1.5rem;
    left: auto;
  }

  .hero__body {
    z-index: 1;
    padding-block: 0;
  }

  .hero__content {
    max-width: var(--hero-text-width);
  }

  .hero__title::before {
    margin-bottom: 1.5rem;
  }

  /* Nosotros: dos columnas */
  .about {
    container-type: inline-size;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    padding-bottom: 0.875rem;
    border-top: 0;
  }

  /* Franjas de marca al pie, como en la propuesta del cliente */
  .about::after {
    content: "";
    position: absolute;
    right: 44.44%;
    bottom: 0;
    left: 0;
    height: 0.875rem;
    background: linear-gradient(90deg, var(--color-green) 33%, var(--color-wheat) 33%, var(--color-wheat) 66%, var(--color-olive) 66%);
  }

  .about__content {
    display: flex;
    align-items: center;
    /* cqw excluye la barra de scroll y alinea con el .container del header */
    --about-inset: max(var(--gutter), (100cqw - var(--container)) / 2);
    padding-right: clamp(2rem, 5vw, 5rem);
  }

  .about__sprouts {
    right: clamp(1.5rem, 4vw, 3.5rem);
    width: 6.5rem;
    height: 9.1rem;
  }

  .about__media {
    aspect-ratio: auto;
    min-height: 100%;
    margin-bottom: -0.875rem;
  }

  /* Banda translúcida entre el fondo verde y la fotografía */
  .about__media::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: clamp(1rem, 2.5vw, 2rem);
    background: rgb(var(--color-green-rgb) / 0.55);
  }

  /* Servicios: tarjetas abiertas con la imagen integrada a la cabecera */
  .service-card {
    --card-head: 10.5rem;
  }

  .service-card__toggle {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.75rem;
    min-height: var(--card-head);
    padding: 1.25rem 45% 1rem 1.5rem;
  }

  .service-card__chevron {
    display: none;
  }

  .service-card__icon {
    width: 3.25rem;
    height: 3.25rem;
  }

  .service-card__title {
    flex: none;
  }

  .service-card__inner {
    overflow: visible;
  }

  .service-card__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: var(--card-head);
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    -webkit-mask-image: radial-gradient(ellipse 105% 135% at 100% 38%, #000 70%, transparent 71%);
    mask-image: radial-gradient(ellipse 105% 135% at 100% 38%, #000 70%, transparent 71%);
  }

  .service-card__body {
    padding: 0.5rem 1.5rem 1.75rem;
  }

  @media (hover: hover) {
    .service-card:hover {
      box-shadow: var(--shadow-card-hover);
      transform: translateY(-4px);
    }
  }

  /* Contacto en una sola fila */
  .contact-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

/* Laptops en adelante */
@media (min-width: 64em) {
  .about {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .about::after {
    right: 40%;
  }

  .about__content {
    padding-block: clamp(5rem, 8vw, 8rem);
  }

  .service-card {
    --card-head: 11.5rem;
  }
}

/* Pantallas amplias */
@media (min-width: 90em) {
  .hero {
    min-height: clamp(40rem, 96svh, 68rem);
  }
}