/* ============================================================
   DRAKOWEBS — responsive.css
   Breakpoints con rediseño real de la distribución, no solo
   reescalado de tamaños. Mobile-first en el comportamiento del
   nav; el resto se define desde desktop hacia abajo para poder
   partir del layout editorial completo descrito en el brief.
   ============================================================ */

/* ============ LAPTOP (≤1200px) ============ */
@media (max-width: 1200px) {
  :root {
    --space-9: 96px;
    --space-10: 128px;
  }

  .service-list {
    gap: var(--space-6) var(--space-6);
  }
}

/* ============ TABLET HORIZONTAL (≤1024px) ============ */
@media (max-width: 1024px) {
  .client-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .case-study__body {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ============ Punto de quiebre del nav: menú a pantalla completa ============ */
@media (max-width: 880px) {
  .nav__toggle {
    display: flex;
    z-index: 2;
  }

  .nav__menu {
    position: fixed;
    inset: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-9) var(--gutter);
    background: var(--color-bg);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out),
                visibility 0s linear var(--duration-slow);
  }

  .nav__menu.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out),
                visibility 0s;
  }

  .nav__menu a::after { display: none; }
  .nav__cta {
    border: none;
    padding: 0;
    color: var(--color-accent);
  }

  html.nav-is-open {
    overflow: hidden;
  }

  /* Icono de menú: dos líneas → X */
  html.nav-is-open .nav__toggle-line:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  html.nav-is-open .nav__toggle-line:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
}

/* ============ TABLET VERTICAL (≤768px) ============ */
@media (max-width: 768px) {
  :root {
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;
  }

  .hero { min-height: 100svh; padding-block: var(--space-8); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .scroll-indicator { display: none; }

  .service-list {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .philosophy__statement { font-size: clamp(2rem, 8vw, 2.75rem); }

  .case-study__media {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .media-frame--desktop,
  .media-frame--mobile,
  .media-frame--detail {
    grid-column: 1;
    grid-row: auto;
  }
  .media-frame--desktop { aspect-ratio: 16 / 11; }
  .media-frame--mobile { aspect-ratio: 16 / 9; }

  .process-list {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .footer__grid {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============ MÓVIL GRANDE (≤480px) ============ */
@media (max-width: 480px) {
  :root {
    --text-hero: clamp(2.25rem, 10vw, 3rem);
    --text-3xl: clamp(2rem, 9vw, 2.75rem);
  }

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

  .case-study__title { font-size: clamp(2rem, 9vw, 2.75rem); }

  .contact-methods a { font-size: var(--text-sm); }
}

/* ============ MÓVIL PEQUEÑO (≤360px) ============ */
@media (max-width: 360px) {
  :root {
    --gutter: 20px;
  }

  .btn { padding-inline: var(--space-4); }
}

/* ============ ULTRAWIDE (≥1920px) ============ */
@media (min-width: 1920px) {
  :root {
    --content-max: 1360px;
  }
}