/* ==========================================================================
   DRIFT — Responsive
   Breakpoints: 1199 / 1100 / 1024 / 767 / 620 / 480 / 360
   Base (arriba de 1199px) definida en styles.css.

   Cada corte tiene estrategia propia, no es "apilar y listo":
   · 1199px el header conserva contacto y menú; el hero se convierte en una
            composición tipográfica propia y no descarga la escena desktop.
   · 1024px el riel horizontal del Proceso cambia de eje a vertical,
            conservando la misma lógica de progreso.
   · 1024px Qué hacemos pasa a filas editoriales.
   · 620px  esas filas se reorganizan para lectura mobile.
   ========================================================================== */

/* ---------- ≤1199px — header sin nav, hero en columna única ---------- */
@media (max-width: 1199px) {
  .header__nav { display: none; }
  .header__logo {
    display: inline-flex;
    align-items: center;
    min-height: 2.875rem;
  }
  .header__actions .cta-talk--header { display: inline-flex; min-height: 2.875rem; }
  .menu-toggle { display: flex; width: 46px; height: 46px; }

  /* WhatsApp ya está siempre en el header responsive. El hero conserva su
     acción hacia proyectos para no duplicar la misma intención. */
  .hero__link { display: inline-flex; }
  .hero__whatsapp { display: none; }
  .hero__link,
  .project__link { min-height: 2.875rem; }

  .footer__copy-button { min-height: 2.875rem; }
  .footer__contact-item > a,
  .footer__contact-value {
    display: inline-flex;
    align-items: center;
    min-height: 2.875rem;
  }

  .header {
    padding-top: max(clamp(0.75rem, 2vw, 1.2rem), env(safe-area-inset-top));
  }

  .header__inner {
    padding: 0.65rem 0.75rem;
    gap: var(--space-xs);
  }

  .hero {
    min-height: 100svh;
    padding-top: clamp(6.75rem, 14vh, 8.5rem);
    padding-bottom: clamp(3.5rem, 8vh, 5.5rem);
  }

  /* Composición tipográfica propia: alineación editorial a la izquierda,
     ancho controlado y espacio negativo útil a la derecha. */
  .hero__grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  .hero__content {
    max-width: min(46rem, 86vw);
    align-items: flex-start;
    text-align: left;
  }

  .hero__title {
    align-items: flex-start;
    max-width: min(100%, 44rem);
  }

  .hero__title .reveal-mask > span {
    font-size: clamp(2.75rem, min(6.2vw, 7.4vh), 4.4rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  .hero__subtext { max-width: 42ch; }
  .hero__actions { justify-content: flex-start; }

  /* ---------- Fondo mobile/tablet ----------
     Nada de la foto de escritorio: rejilla y un lavado muy suave arriba a la
     derecha. Los puntos aislados se omiten porque en pantallas sin dispositivos
     competían con la composición tipográfica. */
  .hero__ambient {
    /* `background` shorthand, no `background-image`: la lista mezcla
       posición/tamaño por capa y termina en un color plano, y eso sólo es
       válido dentro del shorthand — como longhand es una declaración
       inválida entera y el navegador la descarta silenciosamente (sin error
    visible, el fondo simplemente vuelve al de escritorio). */
    background:
      radial-gradient(85% 60% at 82% 6%, rgba(var(--color-accent-rgb), 0.11), transparent 72%),
      linear-gradient(to right, rgba(126, 155, 205, 0.03) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(to bottom, rgba(126, 155, 205, 0.03) 1px, transparent 1px) 0 0 / 44px 44px,
      #000;
  }

  /* ---------- Título: corte de color distinto al de desktop ----------
     La referencia mobile sólo pinta "tu negocio" de azul — "necesita" vuelve
     a blanco. Son los mismos dos <em> del HTML, sólo cambia cuál lleva el
     color en cada rango. */
  .hero__title-accent-b { color: var(--color-text); }

  .hero__scroll-cue { bottom: clamp(1.25rem, 3vh, 2rem); }

  .mobile-menu {
    padding-top: max(6rem, calc(env(safe-area-inset-top) + 5rem));
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }
}

/* ---------- ≤1100px — laptop chico / tablet landscape ---------- */
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- ≤1024px — tablet ---------- */
@media (max-width: 1024px) {
  :root {
    --section-padding: clamp(5rem, 10vw, 6.5rem);
    --section-head-gap: clamp(2.75rem, 6vw, 4rem);
  }

  /* ---------- Proceso: el riel cambia de eje ----------
     Cinco columnas dejan las descripciones en renglones de ~20 caracteres, así
     que el recorrido pasa a vertical: la línea baja por los nodos y el
     contenido queda a la derecha. Sigue siendo el mismo timeline, no cinco
     bloques apilados. */
  .timeline {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* En vertical el riel se arma por tramos, uno por paso: va del borde
     inferior de un nodo al superior del siguiente. Con una sola línea de
     punta a punta —como en desktop— sobraba por debajo del último nodo,
     porque su título y su bajada siguen ocupando alto. */
  /* El carril cambia de eje: va del borde inferior de un nodo al superior del
     siguiente. El JS reposiciona la vía recorrida porque deduce la orientación
     de los centros medidos. */
  .timeline__step:not(:last-child)::before {
    left: calc(var(--node) / 2);
    top: var(--node);
    bottom: 0;
    width: 1px;
    height: auto;
    background-image: none;
  }

  /* El número deja de estar sobre el nodo y encabeza el texto: apilado, arriba
     del círculo, empujaría la línea fuera de los centros. */
  .timeline__step {
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    grid-template-areas:
      "node num"
      "node body";
    align-items: start;
    column-gap: clamp(1.1rem, 3vw, 1.9rem);
    text-align: left;
    padding-bottom: var(--space-xl);
  }

  .timeline__num {
    grid-area: num;
    height: auto;
    line-height: 1.1;
    margin-bottom: var(--space-2xs);
  }

  .timeline__node { grid-area: node; align-self: start; flex-shrink: 0; }
  .timeline__body { grid-area: body; margin-top: 0; }

  /* Los puntos intermedios son un detalle del riel horizontal: en vertical
     caerían sobre el propio recorrido. */
  .timeline__step::after { display: none; }

  .timeline__title { font-size: 1.15rem; }
  .timeline__desc { font-size: 0.88rem; max-width: 48ch; }

  /* Servicios como filas editoriales: icono, título y explicación tienen
     columnas propias en lugar de tres versiones angostas del desktop. */
  .what-we-do__list { grid-template-columns: minmax(0, 1fr); }

  .svc {
    display: grid;
    grid-template-columns: 4rem minmax(12rem, 0.8fr) minmax(0, 1.25fr);
    grid-template-areas:
      "icon title desc"
      "icon rule desc";
    column-gap: clamp(1.5rem, 4vw, 3rem);
    row-gap: 0.85rem;
    align-items: start;
    padding: clamp(2rem, 5vw, 3rem) 0;
    text-align: left;
  }

  .svc + .svc {
    border-left: 0;
    border-top: 1px solid rgba(var(--color-border-rgb), 0.2);
  }

  .svc__icon { grid-area: icon; width: 3.25rem; margin: 0; }
  .svc__title { grid-area: title; max-width: 18ch; margin: 0; }
  .svc__desc { grid-area: desc; max-width: 42ch; margin: 0; }
  .svc__rule { grid-area: rule; width: 54px; margin: 0; }
  .svc:hover .svc__rule { width: 68px; }

  /* Tablet: la etiqueta pasa arriba y los cuatro cuadrantes se quedan con el
     ancho completo. Sostener las dos columnas dejaba cada motivo en ~180px. */
  .reasons__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 4rem);
  }

  .reasons__grid::after { left: 0; }

}

/* ---------- ≤900px — tablet angosta ---------- */
@media (max-width: 900px) {
  .portfolio__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .project:nth-child(2n) { margin-top: 0; }
}

/* ---------- ≤620px — mobile ---------- */
@media (max-width: 620px) {
  :root {
    --container-padding: clamp(1.15rem, 5.2vw, 1.4rem);
    --section-padding: clamp(4.5rem, 18vw, 5.75rem);
    --section-head-gap: clamp(2.25rem, 9vw, 3rem);
    --fs-display-lg: clamp(2rem, 8.6vw, 2.45rem);
  }

  .field { overflow: clip; }
  .field__light,
  .field__scan,
  .field__grain { display: none; }

  .field__grid {
    opacity: 0.55;
    background-size: 48px 48px;
  }

  .header {
    padding: max(0.65rem, env(safe-area-inset-top)) var(--container-padding) 0;
  }

  .header[data-scrolled="true"] {
    padding-top: max(0.45rem, env(safe-area-inset-top));
  }

  .header__inner {
    min-height: 3.9rem;
    padding: 0.5rem 0.55rem 0.5rem 0.7rem;
  }

  .header__logo-img { height: 19px; }

  .cta-talk--header {
    min-width: 2.875rem;
    min-height: 2.875rem;
    padding: 0.6rem 0.8rem;
  }

  .hero {
    min-height: 100svh;
    padding-top: max(5.9rem, calc(env(safe-area-inset-top) + 5.25rem));
    padding-bottom: 0;
  }

  .hero__grid {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .hero__content { width: 100%; max-width: 27rem; }
  .hero__title { max-width: min(100%, 23rem); }

  .hero__title .reveal-mask > span {
    font-size: clamp(2.05rem, 10.15vw, 2.7rem);
    line-height: 1.06;
  }

  .hero__eyebrow {
    max-width: 100%;
    font-size: clamp(0.64rem, 2.75vw, 0.7rem);
    line-height: 1.45;
    letter-spacing: 0.16em;
  }

  .hero__subtext {
    max-width: 34ch;
    margin-top: clamp(1.15rem, 4.5vw, 1.45rem);
    font-size: clamp(0.96rem, 4vw, 1.04rem);
    line-height: 1.58;
  }

  .hero__actions {
    gap: 0.8rem;
    margin-top: clamp(1.5rem, 6vw, 1.9rem);
  }

  .hero__link { min-height: 2.875rem; }
  .hero__scroll-cue { display: none; }

  .hero__ambient {
    background: #000;
  }

  .hero__mobile-visual {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
  }

  .hero__mobile-visual picture,
  .hero__mobile-visual img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero__mobile-visual img {
    object-fit: cover;
    object-position: center bottom;
    opacity: 0.92;
    transform: translateY(2.5svh);
  }

  .hero__mobile-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 43%, rgba(0, 0, 0, 0) 68%),
      linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, 0.28) 100%);
  }

  .hero__capabilities {
    position: absolute;
    right: var(--container-padding);
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    left: var(--container-padding);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.35rem, 1.8vw, 0.55rem);
  }

  .hero__capability {
    min-width: 0;
    min-height: clamp(3.8rem, 16vw, 4.35rem);
    padding: clamp(0.45rem, 2vw, 0.6rem) clamp(0.25rem, 1.4vw, 0.45rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid rgba(var(--color-border-rgb), 0.24);
    border-radius: var(--radius-md);
    background: rgba(2, 7, 16, 0.62);
    color: rgba(238, 243, 251, 0.9);
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(0.61rem, 2.55vw, 0.7rem);
    font-weight: 600;
    line-height: 1.18;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .hero__capability-icon {
    display: block;
    width: clamp(1.15rem, 5vw, 1.35rem);
    color: var(--color-accent-soft);
  }

  .hero__capability-icon svg {
    display: block;
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .section__head { max-width: 34rem; }

  .section__lead {
    max-width: 38ch;
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .process .section__head {
    max-width: 22rem;
    margin-inline: 0;
    margin-bottom: clamp(2.75rem, 11vw, 3.5rem);
    text-align: left;
  }

  .process .label { justify-content: flex-start; }

  .timeline {
    --node: clamp(3.2rem, 14vw, 3.55rem);
  }

  .timeline__step {
    column-gap: clamp(1rem, 4.5vw, 1.3rem);
    padding-bottom: clamp(2.75rem, 12vw, 3.5rem);
  }

  .timeline__title { font-size: clamp(1.05rem, 4.8vw, 1.17rem); }

  .timeline__desc {
    max-width: 34ch;
    font-size: clamp(0.92rem, 3.8vw, 0.98rem);
    line-height: 1.62;
  }

  /* La fila tablet pasa a dos columnas: icono y contenido. */
  .svc {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon desc"
      ". rule";
    column-gap: clamp(1rem, 4.5vw, 1.25rem);
    row-gap: 0.65rem;
    padding-block: clamp(2.15rem, 10vw, 2.8rem);
  }

  .svc__icon { width: 2.5rem; }
  .svc__title { max-width: 22ch; }
  .svc__desc { max-width: 36ch; font-size: 0.96rem; line-height: 1.65; }
  .svc__rule { width: 42px; height: 1px; }

  /* Mobile: una sola columna. Desaparece la regla vertical —no divide nada—
     y los motivos quedan separados por reglas horizontales, que es lo que
     mantiene la lectura de composición única y no de cuatro bloques. */
  .reasons__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .reasons__grid::before,
  .reasons__grid::after,
  .reasons__cross { display: none; }

  .reason {
    padding-inline: 0;
    padding-block: clamp(2.15rem, 9vw, 2.75rem);
  }

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

  .reason__icon { width: clamp(3.9rem, 17vw, 4.4rem); }
  .reason__title { max-width: 24ch; }
  .reason__desc { max-width: 34ch; font-size: 0.92rem; line-height: 1.65; }

  .portfolio__grid { gap: clamp(3.25rem, 15vw, 4.25rem); }
  .project__frame { width: 100%; aspect-ratio: 16 / 9; }
  .project__meta { flex-direction: column; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; }
  .project__title { font-size: 1.15rem; }
  .project__desc { max-width: 38ch; line-height: 1.6; }
  .project__link { min-height: 2.75rem; }

  .faq__head { margin-bottom: clamp(2.25rem, 9vw, 3rem); }

  .faq__question {
    min-height: 4.25rem;
    gap: 1rem;
    padding-block: 1.15rem;
    font-size: clamp(1rem, 4.35vw, 1.08rem);
  }

  .faq__indicator::before,
  .faq__indicator::after { transition-duration: 200ms; }

  .faq__answer { transition-duration: 220ms; }
  .faq__answer-inner { padding: 0 2.25rem 1.35rem 0; }
  .faq__answer p { max-width: 36ch; font-size: 0.94rem; line-height: 1.65; }

  .footer {
    padding-block: clamp(3.75rem, 16vw, 5rem) max(1.25rem, env(safe-area-inset-bottom));
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 11vw, 3.5rem);
    padding-bottom: clamp(2.75rem, 12vw, 3.75rem);
  }

  .footer__brand p { margin-top: 0.9rem; }

  .footer__wordmark {
    max-width: 19rem;
    margin-top: 1.75rem;
  }

  .footer__col ul { gap: 0.75rem; }
  .footer__col a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .footer__contact-item { gap: 0.55rem; }

  .footer__contact-data {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    width: 100%;
  }

  .footer__contact-value {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 0.84rem;
  }

  .footer__copy-button {
    min-width: 3.5rem;
    min-height: 2.75rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    line-height: 1.55;
  }

  .copy-feedback {
    right: var(--container-padding);
    bottom: max(var(--container-padding), env(safe-area-inset-bottom));
    left: var(--container-padding);
    max-width: none;
  }

  .mobile-menu {
    justify-content: flex-start;
    gap: clamp(1.75rem, 7vh, 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu__nav a { min-height: 3.75rem; }
  .mobile-menu__footer { margin-top: auto; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-menu__footer .cta-talk { width: min(100%, 19rem); justify-content: center; }
}

/* ---------- ≤480px — mobile chico ---------- */
@media (max-width: 480px) {
  .error-page__title { max-width: none; }

  .hero__title .reveal-mask > span { font-size: clamp(2rem, 10.2vw, 2.6rem); }
  .hero__actions { gap: 0.8rem; }

  .mobile-menu {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 5.5rem;
  }

  .mobile-menu__nav a {
    min-height: 3.65rem;
    padding-block: 0.85rem;
    font-size: clamp(1.55rem, 8vw, 2.1rem);
  }

  .footer__contact-data {
    width: 100%;
  }
}

/* ---------- ≤360px — mobile mínimo ---------- */
@media (max-width: 360px) {
  :root { --container-padding: 1rem; }

  .header__inner { gap: 0.45rem; }
  .header__logo-img { height: 18px; }

  .cta-talk--header {
    width: 2.875rem;
    padding-inline: 0;
    justify-content: center;
  }

  .cta-talk--header .cta-talk__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .cta-talk--header .cta-talk__icon { width: 1rem; height: 1rem; }

  .hero__title .reveal-mask > span { font-size: clamp(1.92rem, 10.4vw, 2.2rem); }
  .hero__subtext { font-size: 0.94rem; }

  .faq__question { font-size: 1rem; }
}

/* En touch los estados persistentes de :hover generan una respuesta falsa.
   El feedback queda en :active y :focus-visible, que sí representan la
   interacción real del usuario. */
@media (max-width: 620px) and (hover: none),
       (max-width: 620px) and (pointer: coarse) {
  .cta-talk:hover { transform: none; }
  .cta-talk:hover::before { transform: translateX(-120%); }
  .cta-talk:hover::after { opacity: 0.35; transform: scaleX(0.2); }
  .cta-talk:hover .cta-talk__label,
  .cta-talk:hover .cta-talk__icon { transform: none; }

  .svc:hover .svc__icon svg { transform: none; }
  .svc:hover .svc__rule { width: 42px; }

  .reason:hover .reason__icon { border-color: var(--color-border); }
  .reason:hover .reason__rule { width: 34px; }
  .reason:hover :where(.tg-arrow, .tk-dot, .tm-side, .id-rays) { transform: none; }

  .project:hover .project__frame { transform: none; border-color: var(--color-border); }
  .project:hover .project__frame img { transform: scale(1.02); }
  .project:hover .project__frame::after { opacity: 0; }
  .project:hover .project__link svg { transform: none; }

  .footer__col a:hover { transform: none; }
  .footer__col a:hover::after { transform: scaleX(0); }
}

/* ---------- Altura reducida en desktop ----------
   Se conserva exactamente el ajuste que ya tenía la composición desktop. */
@media (max-height: 700px) {
  .hero {
    --hero-clear: clamp(5.25rem, 12vh, 5.75rem);
    padding-bottom: clamp(0.9rem, 2.5vh, 1.5rem);
  }
}

/* Mobile apaisado y tablets bajas necesitan menos altura visual que desktop. */
@media (max-width: 1199px) and (max-height: 700px) {
  .hero {
    padding-top: clamp(5.75rem, 15vh, 6.5rem);
    padding-bottom: clamp(2rem, 6vh, 3rem);
  }
}

/* En teléfonos bajos el texto mantiene su escala: se recupera espacio desde
   los intervalos y el paisaje baja un poco para no competir con el CTA. */
@media (max-width: 620px) and (max-height: 700px) {
  .hero {
    padding-top: max(5.25rem, calc(env(safe-area-inset-top) + 4.8rem));
    padding-bottom: 0;
  }

  .hero__title { margin-top: 0.85rem; }
  .hero__subtext { margin-top: 0.9rem; }
  .hero__actions { margin-top: 1rem; }
  .hero__mobile-visual img { transform: translateY(7svh); }
}