/* ==========================================================================
   Responsive
   · ≥1750px  → 1:1 con el Figma, contenido centrado (1594px)
   · 1435–1750 → escalado proporcional exacto (sin reflow)
   · 1200–1435 → layout de diseño, escala congelada al 82%
   · 1024–1200 → grillas reducidas
   · 768–1024  → tablet
   · ≤767px    → móvil
   ========================================================================== */

/* El arte 3D del hero no debe alejarse del texto en pantallas anchas:
   se ancla al ancho del frame de diseño. */
.hero__art {
  left: 50%;
  right: auto;
  width: min(100%, calc(1750 * var(--s)));
  transform: translateX(-50%);
}

/* --------------------------------------------------------- ≤1434px ------- */
/* Debajo del ancho de diseño el H1 ocupa proporcionalmente más ancho, así que
   el vidrio 3D se corre hacia afuera para no pisar el texto. */
@media (max-width: 1434px) {
  .hero__glass { opacity: .62; }
  .hero__glass--left {
    width: calc(300 * var(--s));
    left: calc(-150 * var(--s));
    top: calc(120 * var(--s));
  }
  .hero__glass--right {
    width: calc(340 * var(--s));
    right: calc(-170 * var(--s));
    top: calc(150 * var(--s));
  }
}

/* ------------------------------------------------------- 1024 – 1200px --- */
@media (max-width: 1200px) {
  .services__grid > .card:not(.card--wide) { grid-column: span 3; }
  .services__grid > .card:not(.card--wide):last-child { grid-column: 2 / span 3; }

  /* Las cards se angostan y el párrafo más largo queda a menos px del borde:
     la ampliación del hover se modera para que no se recorte. */
  .card { --card-zoom: 1.06; }

  .steps__list { margin-left: calc(400 * var(--s)); }
  .step { padding-inline: calc(44 * var(--s)); }
  /* Por token y no por font-size: los aros se centran contra --fs-numeral, y
     si el numeral se achicaba por otro lado el centro quedaba corrido. */
  .steps { --fs-numeral: calc(320 * var(--s)); }
}

/* ------------------------------------------------------------- ≤1023px --- */
@media (max-width: 1023px) {
  :root {
    --s: 0.66px;
    --gutter: clamp(24px, 5vw, 44px);
    --nav-h: 78px;

    --fs-h1: clamp(33px, 5.1vw, 47px);       --lh-h1: 1.08;
    --fs-h2: clamp(33px, 5.1vw, 47px);       --lh-h2: 1.12;
    /* En em, no sin unidad: sections.css lo usa dentro de un calc() de altura
       (el alto fijo de 3 líneas del bloque de frases). */
    --fs-h2-standard: clamp(29px, 4.4vw, 40px); --lh-h2-standard: 1.18em;
    --fs-h2-center: clamp(31px, 4.7vw, 42px);
    --fs-h2-engine: clamp(33px, 5.3vw, 49px);
    --fs-h2-cta: clamp(38px, 6vw, 58px);     --lh-h2-cta: 1.08;
    --fs-stat: clamp(34px, 5vw, 46px);
    --fs-stat-label: 12px;
    --fs-lead: 17px;                          --lh-lead: 27px;
    --fs-card-title: 20px;
    --fs-card-text: 15px;                     --lh-card-text: 24px;
    --fs-nav: 17px;
    --fs-chip: 13px;
    --fs-btn: 16px;
    --fs-step-title: 19px;
    --fs-step-text: 17px;                     --lh-step-text: 27px;
    --fs-footer-title: 18px;
    --fs-footer-link: 15px;                   --lh-footer-link: 20px;
    --fs-numeral: 200px;

    --btn-h: 48px;
    --chip-h: 30px;
    --r-card: 24px;
    --r-panel: 36px;
  }

  .section { padding-block: 96px 0; }

  /* --- Nav en drawer --- */
  .nav__burger { display: block; margin-left: auto; }
  .nav__brand { margin-left: 0; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    left: 0;
    transform: none;
    flex-direction: column;
    gap: 4px;
    padding: 14px var(--gutter) 26px;
    /* La pastilla es de escritorio: aca vuelve a ser un panel a todo el ancho. */
    border-radius: 0;
    background: rgba(250, 252, 252, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(0, 60, 120, .10);
    opacity: 0;
    visibility: hidden;
    translate: 0 -12px;
    transition: opacity var(--t) var(--ease), translate var(--t) var(--ease), visibility var(--t);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; translate: 0 0; }
  .nav__link { padding: 12px 0; font-size: 18px; }
  .nav__link::after { display: none; }

  /* --- Hero --- */
  .hero { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 90px; }
  .hero__glass { width: 420px; opacity: .5; }
  .hero__glass--left  { top: 40px; left: -250px; }
  .hero__glass--right { top: 90px; right: -260px; }
  .hero__title br { display: none; }
  .hero__lead br { display: none; }
  .hero__lead { margin-top: 22px; }
  .hero__actions { margin-top: 26px; gap: 14px; }

  /* --- Stats --- */
  .stats { margin-top: 74px; gap: 8px; }
  .stat__label { margin-top: 16px; letter-spacing: .22em; }
  .stat__rule { display: none; }   /* los separadores del diseño no escalan bien acá */

  /* --- Brands: menos celdas para que entren sin apretarse. El pool de logos
     sigue rotando igual por las celdas que quedan. --- */
  .brands { margin-top: 74px; --brand-h: 46px; }
  .brands__track li { width: 110px; }
  .brands__track li:nth-child(n+5) { display: none; }

  /* --- Servicios --- */
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .card--wide,
  .services__grid > .card:not(.card--wide),
  .services__grid > .card:not(.card--wide):last-child { grid-column: span 1; }
  /* Acá los márgenes internos bajan de 45px a 26px y las cards se angostan, así
     que el texto queda a un pelo del borde: la ampliación se modera todavía más.
     Igual es el rango táctil, donde casi no hay hover. */
  .card { --card-zoom: 1.04; }
  .card__title { margin-inline: 26px; }
  .card__text { margin: 8px 26px 26px; }

  /* --- Estándar --- */
  .standard { padding-top: 60px; --hl-run: 160vh; }
  .standard__title { margin-top: 22px; }
  .standard__rain { font-size: 13px; gap: 6px; }

  /* --- Proceso --- */
  .process { padding-top: 70px; }
  .process__panel { margin-inline: 12px; padding-top: 44px; }
  .process__head { flex-direction: column; }
  .process__badges { margin-top: 0; align-self: flex-end; }
  .process__badge { width: 58px; height: 58px; }
  .process__shot { margin-top: 44px; width: 100%; }

  /* --- Filosofía: los pasos se apilan --- */
  .philosophy { padding-top: 40px; }
  .philosophy__lead br { display: none; }
  /* Sin pin: aca los tres pasos ya son tarjetas apiladas y no hay numeral a
     la izquierda que preservar, asi que el track solo agregaria pantallas de
     scroll vacio. */
  .steps__track { height: auto; }
  .steps__sticky { position: static; height: auto; }
  .steps { margin-top: 60px; min-height: 0; }
  .steps__art { display: none; }
  .steps__list { margin-left: 0; gap: 22px; }
  .step,
  .step:nth-child(2),
  .step:nth-child(3) {
    margin-left: 0;
    max-width: none;
    gap: 20px;
    padding: 26px 24px;
    background: #fff;
    box-shadow: var(--shadow-card);
  }
  .step__num { width: 64px; height: 64px; margin-top: 0; font-size: 22px; }
  .step__text { max-width: none; margin-top: 12px; }

  /* --- Trabajos --- */
  .work { padding-top: 120px; }
  .work__viewport { margin-top: calc(40px - var(--work-bleed)); }
  .work__track { padding-left: var(--gutter); }
  .work__track > li { margin-right: 14px; }
  .work-card { width: 250px; height: 330px; }
  /* Se mantiene en 19px bold para seguir contando como "texto grande" (3:1) */
  .work-card__cta { bottom: 24px; font-size: 19px; }
  /* Blanco táctil mínimo de 44px */
  .work__arrow { width: 44px; height: 44px; }

  /* --- Motor --- */
  .engine { padding-block: 72px; }
  .engine__spark--l { left: -30px; width: 24px; }
  .engine__spark--r { right: -34px; width: 30px; }
  .orbit { height: 225px; margin-top: 66px; --orbit-d: 168px; --orbit-logo: 57px; --orbit-logo-max: 102px; --orbit-celda: 224px; --orbit-tira: 38px; --orbit-tira-max: 128px; }
  .orbit__rings svg { width: 100%; height: 300px; }
  .orbit__hub, .orbit__disc, .orbit__pulse { width: var(--orbit-d); height: var(--orbit-d); }
  .orbit__spin { width: 188px; height: 188px; }

  /* --- CTA --- */
  .cta { padding-top: 110px; }
  .cta__inner { align-items: center; }
  .cta__title { margin-top: 20px; }
  .cta__slot { margin-top: 26px; }
  /* Aca no hay franja libre a la derecha —el robot esta al lado y abajo— asi
     que el panel vuelve al flujo, debajo de la pastilla y con el ancho de la
     columna. Empuja, pero es lo unico que entra sin taparle nada. */
  .cta__form { position: static; width: 100%; --sf: var(--s); margin-top: 14px; }
  /* Aca el panel esta EN el flujo, asi que la pastilla tiene que dejarle el
     lugar: si conservara su caja —como si hace en escritorio, para que la
     seccion no se acorte— el formulario aparecería 74px mas abajo del boton.
     Absoluta y no display:none para que el fundido de salida se vea. */
  .pill.is-morphing { position: absolute; top: 0; left: 0; }
  .pill { gap: 16px; padding: 10px 10px 10px 26px; font-size: 24px; }
  .pill__icon { width: 40px; height: 40px; }
  .cta__robot { width: 190px; margin-right: 0; }

  /* --- Footer --- */
  .footer { padding-bottom: 60px; }
  .footer__block { width: calc(100% - 24px); border-radius: 32px; }
  .footer__inner { padding: 48px 30px 0; }
  .footer__top { flex-direction: column; align-items: flex-start; gap: 26px; }
  .footer__brand img { width: 190px; }
  .footer__tagline { margin-top: 12px; font-size: 16px; }
  .pill--light { padding: 16px 28px; font-size: 20px; }
  .footer__cols { margin-top: 54px; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
  .footer__col-title { font-size: 18px; }
  .footer__col ul { margin-top: 16px; }
  .footer__col a, .footer__contact a, .footer__contact p { font-size: 15px; line-height: 20px; }
  .footer__contact { grid-column: 1 / -1; text-align: left; gap: 10px; }
  .footer__bottom { margin-top: 54px; height: auto; }
  .footer__ghost { position: static; width: 260px; opacity: .24; margin-bottom: 14px; left: auto; bottom: auto; }
  .footer__copy { position: static; font-size: 13px; }
}

/* -------------------------------------------------------------- ≤767px --- */
@media (max-width: 767px) {
  :root {
    --s: 0.5px;
    --gutter: 20px;
    --fs-stat-label: 10px;
    --fs-lead: 16px;  --lh-lead: 26px;
    /* Más chico que el clamp general: si no, la línea más larga del titular
       llega casi al borde y el óvalo del fondo no puede sobresalirlo sin
       quedarse sin aire hasta el borde de la pantalla. */
    --fs-h2-standard: 20px;
  }

  .section { padding-block: 72px 0; }

  .hero { padding-top: calc(var(--nav-h) + 36px); }
  .hero__glass { width: 300px; opacity: .38; }
  .hero__glass--left  { top: 20px; left: -190px; }
  .hero__glass--right { top: 120px; right: -190px; }
  .hero__actions .btn { flex: 1 1 auto; }

  /* Stats en 3 filas, sin separadores */
  .stats { grid-template-columns: 1fr; gap: 30px; }
  .stat__rule { display: none; }

  .brands { --brand-h: 36px; }
  .brands__track li { width: 92px; }
  .brands__track li:nth-child(n+4) { display: none; }

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

  .standard { padding-top: 40px; --hl-run: 130vh; }

  .process__panel { margin-inline: 0; border-radius: 28px 28px 0 0; }
  .process__badges { align-self: flex-start; margin-top: 18px; }

  .work-card { width: 210px; height: 280px; }
  .work__nav { justify-content: center; }

  .orbit { height: 185px; --orbit-d: 130px; --orbit-logo: 42px; --orbit-logo-max: 77px; --orbit-celda: 156px; --orbit-tira: 28px; --orbit-tira-max: 96px; }
  .orbit__hub, .orbit__disc, .orbit__pulse { width: var(--orbit-d); height: var(--orbit-d); }
  .orbit__spin { width: 145px; height: 145px; }

  .cta__inner { flex-direction: column; align-items: flex-start; }
  .cta__robot { align-self: flex-end; width: 150px; margin-top: -30px; }
  .pill { font-size: 20px; }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__ghost { width: 200px; }
}

/* -------------------------------------------------------- ≥1751px -------- */
/* Arriba del ancho de diseño, el "marco" pasa a ser la pantalla: si el arte 3D
   se queda encerrado en una caja de 1750px, quedan cientos de px de fondo vacío
   a los costados y las formas dejan de sangrar por el borde (se ven flotando).
   Así que a partir de acá el arte ocupa todo el ancho. */
@media (min-width: 1751px) {
  .hero__art { width: 100%; }
}

/* Pantalla baja: el bloque pinneado no entra. El caso mas ajustado es el del
   viewport mas bajo que SI pinnea, y es el que fija cuanto gap se puede dar
   arriba: con el umbral en 880 entra un gap de 14vh sin cortar el 01. */
@media (max-height: 879px) {
  .steps__track { height: auto; }
  .steps__sticky { position: static; height: auto; padding-top: 0; }
}