/* ==========================================================================
   responsive.css — Mobile-first. Breakpoints del original: 768px y 1025px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet — 768px en adelante
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --fs-h1: 3rem;
    --fs-display: 8vw;
    --section-padding-block: 5rem;
    --container-gutter: 2rem;
    --gap-grid: 1.5rem;
  }

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

  .logos {
    grid-template-columns: repeat(3, 1fr);
  }

  .plans {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
  }

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-xl);
  }

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

  /* `.split` normal recién se divide a los 1025px. Esta variante lo hace desde
     tablet, para bloques livianos como el texto + mapa de "Nuestros clientes",
     donde esperar hasta 1025 deja la imagen suelta abajo en media pantalla. */
  .split--early {
    grid-template-columns: 58fr 42fr;
    gap: var(--sp-2xl);
  }

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

  .callout {
    padding: var(--sp-3xl);
  }
}

/* --------------------------------------------------------------------------
   Desktop — 1025px en adelante (el original cambia a menu horizontal aqui)
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  :root {
    --fs-eyebrow: 0.8125rem; /* 13px, valor exacto del original */
    --fs-h1: 4rem;
    --fs-h2: 2.375rem; /* 38px, valor exacto del original */
    --fs-h3: 1.5625rem; /* 25px, valor exacto del original */
    --fs-display: 5vw;
    --section-padding-block: 7rem;
    --eyebrow-rule-width: 70px; /* padding-left: 70px del original */
    --header-height: 88px;
    --gap-grid: 1.75rem;
  }

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

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

  /* Split 58% / 42%, la proporcion del sitio original */
  .split {
    grid-template-columns: 58fr 42fr;
    gap: var(--sp-4xl);
  }

  .split--reverse > :first-child {
    order: 0;
  }

  .split--media-first {
    grid-template-columns: 42fr 58fr;
  }

  /* ---- Navegacion horizontal ---- */

  .nav-toggle {
    display: none;
  }

  .header__phone {
    display: block;
  }

  .nav {
    position: static;
    z-index: auto;
    display: block;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    clip-path: none;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-lg);
    max-width: none;
    margin: 0;
    overflow: visible;
  }

  .nav__link,
  .nav__submenu-toggle {
    padding: var(--sp-xs) 0;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    white-space: nowrap;
  }

  /* Submenu como dropdown flotante */
  .nav__submenu {
    position: absolute;
    inset-block-start: calc(100% + var(--sp-sm));
    inset-inline-start: -1rem;
    display: block;
    min-width: 220px;
    padding: var(--sp-xs);
    background-color: var(--color-overlay);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility var(--dur-fast) var(--ease-out);
  }

  .nav__item--has-submenu:hover .nav__submenu,
  .nav__item--has-submenu:focus-within .nav__submenu,
  .nav__submenu[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__submenu-inner {
    padding: 0;
    border: 0;
  }

  .nav__sublink {
    padding: var(--sp-xs) var(--sp-sm);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body-sm);
    transition: background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }

  .nav__sublink:hover {
    background-color: rgba(255, 255, 255, 0.07);
  }

  /* Zona invisible que evita que el dropdown se cierre al mover el mouse */
  .nav__item--has-submenu::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    height: var(--sp-sm);
  }

  /* ---- Otros ajustes de desktop ---- */

  .hero__title {
    max-width: 16ch;
  }

  .step {
    padding-block: var(--sp-lg) 0;
  }

  .step__number {
    font-size: 3.5rem;
  }

  .steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* El proceso pasa a dos columnas: etiqueta del paso | contenido */
  .process__item {
    display: grid;
    grid-template-columns: 42fr 58fr;
    gap: var(--sp-2xl);
    align-items: start;
    padding-block: var(--sp-2xl);
  }

  .process__item .eyebrow {
    margin: 0;
  }

  .process__title {
    grid-column: 2;
    grid-row: 1;
  }

  .process__text {
    grid-column: 2;
  }

  .whatsapp-fab {
    inset-block-end: var(--sp-xl);
    inset-inline-end: var(--sp-xl);
  }
}

/* --------------------------------------------------------------------------
   Pantallas anchas
   -------------------------------------------------------------------------- */

@media (min-width: 1400px) {
  :root {
    --section-padding-block: 8rem;
  }
}

/* --------------------------------------------------------------------------
   Impresion
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .nav,
  .nav-toggle,
  .whatsapp-fab,
  .modal,
  .hero__media,
  .hero__overlay {
    display: none !important; /* justificado: no aplica en papel */
  }

  body {
    background: #fff;
    color: #000;
  }
}