/* ============================================================
   AGRO DRON IBERIA · responsive.css
   Puntos de ruptura: 1440 · 1200 · 992 · 768 · 576 · 390
   ============================================================ */

/* ---------- ≥1440 px: pantallas grandes ---------- */
@media (min-width: 1440px) {
  :root {
    --container: 1320px;
  }

  .hero {
    min-height: clamp(720px, 92svh, 1000px);
  }
}

/* ---------- ≤1200 px: portátil compacto ---------- */
@media (max-width: 1200px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  }

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

  .footer-main {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-main .footer-col--contact {
    grid-column: 1 / -1;
  }

  .footer-contact ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* ---------- ≤992 px: tableta ---------- */
@media (max-width: 992px) {
  :root {
    --header-h: 84px;
  }

  .brand img {
    height: 62px;
  }

  /* Menú móvil */
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.4rem;
    padding: calc(var(--header-h) + 1.5rem) clamp(1.8rem, 8vw, 4rem) 3rem;
    background:
      radial-gradient(700px 400px at 90% 0%, rgba(96, 183, 27, 0.14), transparent 60%),
      var(--color-green-black);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-slow), visibility 0s linear 340ms;
  }

  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--transition-slow), visibility 0s;
  }

  .site-nav a:not(.btn) {
    font-size: 1.02rem;
    letter-spacing: 0.18em;
    padding: 0.85rem 0;
  }

  .site-nav .btn {
    margin-top: 1.6rem;
    width: 100%;
    max-width: 320px;
  }

  /* Hero */
  .hero {
    min-height: 0;
    padding-bottom: 6.5rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .hero-panel {
    max-width: 560px;
  }

  .hero__lines {
    width: 62vw;
    opacity: 0.1;
  }

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

  .benefit + .benefit {
    border-left: 0;
  }

  .benefit:nth-child(even) {
    border-left: 1px solid var(--color-border-dark);
  }

  .benefit:nth-child(n + 3) {
    border-top: 1px solid var(--color-border-dark);
  }

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

  .remote-visual {
    order: -1;
  }

  /* Proceso radial: el núcleo pasa arriba y los pasos a dos columnas */
  .radial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 5vw, 2.8rem);
  }

  .radial__hub {
    position: static;
    order: -1;
  }

  .radial__list {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.8rem;
    align-items: start;
  }

  .radial__item:nth-child(1),
  .radial__item:nth-child(2),
  .radial__item:nth-child(3),
  .radial__item:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }

  .radial__item--l {
    flex-direction: row;
    text-align: left;
  }

  .radial__item--l .radial__num {
    right: -6px;
    left: auto;
  }

  .faq-cols {
    grid-template-columns: 1fr;
  }

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

  .media-row {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .media-row--reverse figure {
    order: 0;
  }

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

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-contact ul {
    grid-template-columns: 1fr;
  }
}

/* ---------- ≤768 px: móvil grande / tableta vertical ---------- */
@media (max-width: 768px) {
  .drones-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
  }

  .service-card {
    padding: 1.35rem 1.15rem;
  }

  .benefits {
    margin-top: -3.4rem;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .footer-legal__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ---------- ≤576 px: móvil ---------- */
@media (max-width: 576px) {
  :root {
    --section-pad: 3.4rem;
  }

  .hero {
    padding-top: calc(var(--header-h) + 2.2rem);
    padding-bottom: 5.6rem;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero-panel {
    padding-inline: 1.2rem;
  }

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

  .benefit {
    padding: 1.25rem 1.4rem;
  }

  .benefit:nth-child(even) {
    border-left: 0;
  }

  .benefit + .benefit {
    border-top: 1px solid var(--color-border-dark);
  }

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

  .radial {
    --hub: clamp(150px, 42vw, 190px);
  }

  .radial__list {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .radial__txt h3 {
    margin-top: 0.4rem;
  }

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

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

  .vigor-card {
    position: static;
    width: 100%;
    margin-top: -2.2rem;
    margin-inline: auto;
  }

  .remote-visual {
    padding-bottom: 0;
  }

  .cta__actions .btn {
    width: 100%;
  }

  .footer-group {
    --group-logo: 56px;
  }

  .gallery-grid {
    gap: 0.6rem;
  }

  .wa-tab {
    top: auto;
    bottom: 5.6rem;
    padding: 0.55rem 1rem 0.55rem 0.55rem;
    transform: translateX(calc(100% - 54px));
  }

  .wa-tab__icon {
    width: 42px;
    height: 42px;
  }

  .to-top {
    width: 48px;
    height: 48px;
    right: 0.9rem;
    bottom: 1rem;
  }
}

/* ---------- ≤390 px: móvil pequeño ---------- */
@media (max-width: 390px) {
  :root {
    --fs-h1: 2.15rem;
    --gutter: 1.05rem;
  }

  .brand img {
    height: 52px;
  }

  .btn {
    padding-inline: 1.15rem;
    font-size: 0.72rem;
  }

  .hero-panel li {
    grid-template-columns: 40px 1fr;
    gap: 0.85rem;
  }

  .hero-panel__icon {
    width: 40px;
    height: 40px;
  }

  .footer-group ul {
    gap: 1.3rem 1.6rem;
  }

  .footer-group {
    --group-logo: 48px;
  }
}