/* ==========================================================================
   Responsive — ajustes por breakpoint
   Fase 1: estructura apilada. Fase 2: luz y escena del hero por breakpoint.
   Fase 7: hero móvil (< 768px) y tablet (768–1023px), WhatsApp flotante.
   ========================================================================== */

/* ---------- Header desktop (≥ 900px): el hamburguesa se oculta ---------- */
@media (min-width: 56.25em) {
  .menu-toggle {
    display: none;
  }
}

/* ---------- Header desktop angosto (900–1199px) ----------
   No cabe todo junto a la pastilla del nav: "Síguenos en redes" y el
   texto del correo se ocultan a la vista (los lectores de pantalla los
   siguen leyendo) y el correo queda solo como ícono junto al teléfono. */
@media (min-width: 56.25em) and (max-width: 74.999em) {
  .follow__label,
  .contact-list__link[href^="mailto:"] .contact-list__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .contact-list__link[href^="mailto:"] .contact-list__icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ---------- Header móvil (< 900px): logo + hamburguesa y overlay ----------
   El panel (nav + redes) se vuelve un overlay fijo a pantalla completa.
   Cerrado usa visibility: hidden, así sale del orden de tabulación y del
   árbol de accesibilidad; main.js lo abre con .is-open. */
@media (max-width: 56.249em) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .logo__img {
    height: 3.25rem;
  }

  .site-header__panel {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding:
      calc(var(--header-h) + var(--space-6))
      var(--gutter)
      max(var(--space-7), env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(ellipse 90% 55% at 30% 35%, color-mix(in srgb, var(--glow) 24%, transparent), transparent 70%),
      var(--menu-overlay-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    visibility: hidden;
    opacity: 0;
    transition:
      opacity var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }

  .site-header__panel.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--duration-base) var(--ease-out);
  }

  /* Links grandes en Playfair Display, sin pastilla ni indicador */
  .main-nav {
    background: none;
    box-shadow: none;
  }

  .main-nav::before,
  .main-nav::after,
  .main-nav__glass {
    display: none;
  }

  .main-nav__list {
    flex-direction: column;
    gap: var(--space-1);
    padding: 0;
  }

  .main-nav__link {
    display: inline-block;
    padding-block: var(--space-2);
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    white-space: normal;
  }

  .main-nav__link:focus-visible {
    outline-offset: 2px;
  }

  /* Sin la línea del indicador, el activo se marca en naranja: texto
     grande sobre el overlay navy (6.8:1) */
  .main-nav__link.is-active {
    color: var(--orange-500);
  }

  .main-nav__indicator,
  html:not(.js) .main-nav__link.is-active::after {
    display: none;
  }

  /* Redes y contacto al pie del overlay, alineados a la izquierda */
  .site-header__aside {
    align-items: stretch;
    gap: var(--space-5);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
  }

  .follow {
    justify-content: space-between;
  }

  .contact-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .contact-list__link {
    font-size: var(--fs-base);
  }

  .social {
    gap: var(--space-4);
  }

  .social__link {
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1);
  }

  /* Scroll del body bloqueado mientras el menú está abierto */
  html.is-menu-open {
    overflow: hidden;
  }
}

/* ---------- WhatsApp flotante: más aire en desktop ---------- */
@media (min-width: 56.25em) {
  .whatsapp-float {
    right: calc(var(--space-6) + env(safe-area-inset-right));
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
}

/* ---------- Desktop angosto (1024–1199px): pila sobre el cofre ----------
   La van arranca casi donde termina el párrafo y la pila a un lado del
   frente lo tocaría: asoma sobre el cofre, detrás del pin de inicio. */
@media (min-width: 64em) and (max-width: 74.999em) {
  /* La pila sube: la pared también, para que su base quede en el piso */
  .scene__stage {
    --floor-y: 38%;
  }

  .scene__stack--back {
    left: 3%;
    bottom: 52%;
    width: 19%;
  }
}

/* ==========================================================================
   Hero < 1024px (móvil y tablet)
   - La luz se ancla a la escena (.hero__scene::before/::after) y no al %
     de alto del hero: así sigue detrás de la van aunque el texto crezca.
     La luz y el brillo del fondo (.hero__light, .hero__glow) se apagan.
   - La ruta es la versión corta (main.js cambia el path con
     data-d-compact): el pin final cae sobre el techo, no fuera de la van.
   ========================================================================== */
@media (max-width: 63.999em) {
  .hero__light,
  .hero__glow {
    display: none;
  }

  /* Reflector detrás de la van, con caída en curva como el de desktop */
  .hero__scene::before,
  .hero__scene::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    pointer-events: none;
  }

  .hero__scene::before {
    top: var(--scene-light-y, 56%);
    width: 160%;
    aspect-ratio: 1.45;
    translate: -50% -50%;
    background: radial-gradient(
      closest-side,
      var(--klein-500) 0%,
      color-mix(in srgb, var(--klein-500) 92%, transparent) 22%,
      color-mix(in srgb, var(--klein-500) 70%, transparent) 40%,
      color-mix(in srgb, var(--klein-500) 40%, transparent) 58%,
      color-mix(in srgb, var(--klein-500) 16%, transparent) 76%,
      transparent 100%
    );
  }

  /* Brillo --glow pegado al techo: respira igual que en desktop */
  .hero__scene::after {
    top: calc(var(--scene-light-y, 56%) - 8%);
    width: 80%;
    aspect-ratio: 2;
    translate: -50% -50%;
    background: var(--glow-soft);
    opacity: 0.3;
  }

  /* Ruta corta: (700, -170) ÷ 1324 y ÷ 740 */
  .scene__pin--end {
    left: 52.87%;
    top: -22.97%;
  }
}

/* ---------- Tablet (768–1023px): texto a la izquierda, van a la derecha ----------
   La van se sale un poco por la derecha y los badges van en fila
   debajo de ella. */
@media (min-width: 48em) and (max-width: 63.999em) {
  .hero {
    --light-x: 68%;
    --light-y: 50%;
    --vignette-w: 95%;
    --vignette-h: 85%;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-areas:
      "content scene"
      "content badges";
    align-content: center;
    column-gap: var(--space-4);
    row-gap: var(--space-5);
    padding-block: var(--space-6) var(--space-8);
  }

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

  .hero__lead {
    font-size: 1.0625rem;
  }

  /* Escena: aire arriba para la ruta y los pines */
  .hero__scene {
    align-self: end;
    padding-top: 10vw;
  }

  .scene__stage {
    --floor-y: 42%;
    width: 124%;
    translate: 9% 0;
  }

  /* Pila trasera más chica y más arriba: asoma junto al frente sin
     acercarse al párrafo (más abajo la tapa la defensa) */
  .scene__stack--back {
    left: -7%;
    bottom: 48%;
    width: 21%;
  }

  .hero__badges {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .badge {
    width: 6.75rem;
  }

  /* Solo la pila de la izquierda: la de la derecha queda tras el corte */
  .scene__stack--front {
    display: none;
  }
}

/* ---------- Móvil (< 768px): composición vertical ----------
   Orden: eyebrow → H1 → escena → párrafo → CTA → beneficios.
   .hero__content se vuelve "display: contents" para que sus hijos
   entren al grid y la escena quede en medio, sin duplicar HTML.
   Los badges comparten celda con la escena y flotan encima. */
@media (max-width: 47.999em) {
  .hero {
    --light-x: 50%;
    --light-y: 46%;
    --vignette-w: 150%;
    --vignette-h: 95%;
  }

  /* Viñeta más suave: en pantallas chicas la oscuridad pesa más */
  .hero__vignette {
    opacity: 0.72;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "scene"
      "lead"
      "cta"
      "trust";
    align-content: center;
    padding-block: var(--space-4) var(--space-8);
  }

  .hero__content {
    display: contents;
  }

  /* Texto por encima de la luz de la escena */
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__cta,
  .hero__trust {
    position: relative;
    z-index: var(--z-overlay);
  }

  .hero__eyebrow {
    grid-area: eyebrow;
    font-size: 0.75rem;
  }

  .hero__title {
    grid-area: title;
    margin-top: var(--space-3);
    font-size: clamp(2rem, 10.2vw, 3rem);
  }

  .hero__lead {
    grid-area: lead;
    max-width: 34ch;
    margin-top: var(--space-2);
    font-size: 1.0625rem;
  }

  /* CTA de ancho completo, 56px de alto; el texto queda centrado */
  .hero__cta {
    grid-area: cta;
    width: 100%;
    height: 3.5rem;
    margin-top: var(--space-5);
    padding-left: 3.5rem;
  }

  .hero__cta .btn__label {
    flex: 1;
    text-align: center;
  }

  /* Beneficios repartidos a todo el ancho */
  .hero__trust {
    grid-area: trust;
    justify-content: space-between;
    margin-top: var(--space-6);
  }

  .trust__item {
    padding-inline: var(--space-3);
  }

  .trust__item:last-child {
    padding-right: 0;
  }

  /* Escena a sangre: ocupa todo el ancho de la pantalla y la van
     (115%) se sale por la derecha. Arriba deja aire para la ruta. */
  .hero__scene {
    --scene-light-y: 58%;
    grid-area: scene;
    display: block;
    place-items: normal; /* sin esto, Chrome centra el escenario desbordado */
    margin-inline: calc(var(--gutter) * -1);
    padding-block: 25vw 13vw;
  }

  .scene__stage {
    --floor-y: 32%;
    width: 115%;
    margin-left: 3%;
    translate: none;
  }

  /* Cajas: la van llega casi al borde izquierdo, así que la pila asoma
     sobre el cofre, detrás del pin de inicio; la base queda oculta */
  .scene__stack--front {
    display: none;
  }

  .scene__stack--back {
    left: 5%;
    bottom: 59%;
    width: 19%;
  }

  /* Badges flotando sobre la escena: arriba a la derecha y abajo
     a la izquierda. Comparten la celda de la escena. */
  .hero__badges {
    grid-area: scene;
    align-self: stretch;
    display: block;
    pointer-events: none;
  }

  .badge {
    position: absolute;
    width: 5.25rem;
    pointer-events: auto;
  }

  .badge:nth-child(1) {
    top: 0;
    right: 0;
  }

  .badge:nth-child(2) {
    bottom: 0;
    left: 0;
  }

  /* Letra del anillo más grande y menos espaciada para que se lea a 84px */
  .badge__curve-text {
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  /* Preguntas: pestañas más compactas (las 3 caben en una fila desde
     360px) y el cierre apilado, con los contactos a todo el ancho */
  .faq__tab {
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
  }

  .faq__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .faq__contacts {
    width: 100%;
    text-align: left;
  }
}

/* ==========================================================================
   Nosotros
   ========================================================================== */
/* < 1024px: texto arriba y valores debajo, en 2 columnas parejas; la
   luz baja detrás de las tarjetas y la viñeta se abre como en el hero */
@media (max-width: 63.999em) {
  .about {
    --light-x: 50%;
    --light-y: 70%;
    --light-w: 70%;
    --light-h: 42%;
    --vignette-w: 110%;
    --vignette-h: 90%;
  }

  .about__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .value-card:nth-child(even) {
    margin-top: 0;
  }
}

/* < 576px: una tarjeta por fila, con el ícono a la izquierda del título
   para que no se vean tan altas */
@media (max-width: 35.999em) {
  .about__values {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .value-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: center;
  }

  .value-card__title {
    margin-top: 0;
    padding-right: var(--space-7);
  }

  .value-card__text {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
  }
}

/* ==========================================================================
   Servicios
   ========================================================================== */
/* < 1024px: encabezado en una columna; la luz baja detrás de la galería */
@media (max-width: 63.999em) {
  .services {
    --light-y: 72%;
    --light-w: 90%;
    --light-h: 50%;
    --vignette-w: 120%;
  }

  .services__intro {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* Tablet (768–1023px): el texto y el botón en una fila */
@media (min-width: 48em) and (max-width: 63.999em) {
  .services__aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .services__cta {
    flex: none;
    margin-top: 0;
  }
}

/* Celular (< 768px): la galería es una columna. Los cerrados son
   franjas de 3rem con el nombre en horizontal; el abierto toma el alto
   que sobra. Sin giro; el paralaje de la foto va en vertical. */
@media (max-width: 47.999em) {
  .service-gallery {
    --pad: var(--space-4);
    --closed-h: 3rem;
    height: 32rem;
    flex-direction: column;
  }

  .service-panel {
    flex: 0 0 var(--closed-h);
  }

  .service-panel.is-active {
    flex-grow: 1;
  }

  .service-panel__frame {
    transform: none;
  }

  /* El panel abierto es bajo: el degradado de abajo sube más */
  .service-panel__frame::before {
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--klein-900) 92%, transparent) 0%,
      color-mix(in srgb, var(--klein-900) 76%, transparent) 45%,
      color-mix(in srgb, var(--klein-900) 30%, transparent) 75%,
      color-mix(in srgb, var(--klein-900) 10%, transparent) 100%
    );
  }

  .service-panel__media {
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(100cqh - 3 * (var(--closed-h) + var(--gap)) + 2.5rem);
    translate: 0 calc(-50% + clamp(-1, var(--offset, 0), 1) * 8%);
  }

  .service-panel__number {
    top: 0.9375rem;
    right: var(--pad);
    left: auto;
    font-size: 1.125rem;
  }

  .service-panel__name {
    writing-mode: horizontal-tb;
    rotate: none;
  }

  .service-panel.is-active .service-panel__name {
    width: auto;
    font-size: clamp(1.25rem, 5.6vw, 1.5rem);
  }

  .service-panel.is-active .service-panel__heading::before {
    margin-bottom: var(--space-2);
  }

  .service-panel__text {
    right: var(--pad);
    width: auto;
    font-size: 0.875rem;
  }

  .service-panel.is-active .service-panel__text {
    margin-top: var(--space-2);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* < 1024px: la marca arriba a todo el ancho y las 3 columnas debajo */
@media (max-width: 63.999em) {
  .site-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__tagline {
    max-width: 40ch;
  }
}

/* < 768px: navegación y horario lado a lado; contacto (el correo es
   largo) a todo el ancho */
@media (max-width: 47.999em) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "brand brand"
      "nav hours"
      "contact contact";
    gap: var(--space-7) var(--space-5);
  }

  .site-footer__brand { grid-area: brand; }
  .site-footer__group--nav { grid-area: nav; }
  .site-footer__group--contact { grid-area: contact; }
  .site-footer__group--hours { grid-area: hours; }

  /* Copyright y lema en dos renglones */
  .site-footer__bottom {
    flex-direction: column;
  }
}

/* ==========================================================================
   Inicio con pantallas completas (.has-paging): todo cabe en la pantalla
   Hero, Nosotros y Servicios miden el alto exacto de la pantalla, así que en
   pantallas bajas se compactan por alto (max-height) además de por ancho.
   ========================================================================== */

/* ---------- Hero móvil (< 768px): la escena toma el alto que sobra ----------
   El texto, el CTA y los beneficios miden lo que miden; la escena se
   queda con la fila flexible (1fr) y es un contenedor de tamaño: el
   escenario (la van) mide lo más que quepa a lo ancho (115 %, a sangre)
   o a lo alto (--stage-w por cqh), y aire arriba para la ruta (0.22 del
   ancho) y abajo para la sombra (0.11). En pantallas altas queda igual
   que antes; en bajas la van se achica y se centra. */
@media (max-width: 47.999em) {
  .has-paging .hero__inner {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    align-content: stretch;
    padding-block: var(--space-3) max(var(--space-6), env(safe-area-inset-bottom));
  }

  .has-paging .hero__scene {
    --stage-w: min(115cqw, 110cqh);
    container-type: size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0;
  }

  .has-paging .scene__stage {
    flex: none;
    width: var(--stage-w);
    margin: calc(var(--stage-w) * 0.22) 0 calc(var(--stage-w) * 0.11) max(3cqw, (100cqw - var(--stage-w)) / 2);
  }

  /* Badges más chicos si la escena se achica */
  .has-paging .badge {
    width: clamp(4.25rem, 11dvh, 5.25rem);
  }
}

/* Celulares bajos (≤ 740px de alto): menos aire entre bloques */
@media (max-width: 47.999em) and (max-height: 46.25em) {
  .has-paging .hero__title {
    margin-top: var(--space-2);
    font-size: clamp(1.875rem, 9vw, 2.5rem);
  }

  .has-paging .hero__lead {
    margin-top: 0;
    font-size: 1rem;
  }

  .has-paging .hero__cta {
    height: 3.25rem;
    margin-top: var(--space-4);
  }

  .has-paging .hero__trust {
    margin-top: var(--space-4);
  }
}

/* ---------- Nosotros en celular (< 768px): versión compacta ----------
   Un solo párrafo (el segundo se oculta) y las 4 tarjetas en 2×2 con
   ícono y título, sin descripción. Así cabe en una pantalla. */
@media (max-width: 47.999em) {
  .has-paging .about {
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }

  .has-paging .about__inner {
    gap: clamp(var(--space-5), 4dvh, var(--space-7));
  }

  .has-paging .about__title {
    font-size: clamp(1.875rem, 8.6vw, 2.5rem);
  }

  .has-paging .about__body {
    font-size: 1rem;
  }

  .has-paging .about__body p + p {
    display: none;
  }

  .has-paging .about__link {
    margin-top: var(--space-5);
  }

  .has-paging .about__values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .has-paging .value-card {
    display: block;
    padding: var(--space-4);
  }

  .has-paging .value-card__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .has-paging .value-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .has-paging .value-card__number {
    top: var(--space-4);
    right: var(--space-4);
    font-size: 1.125rem;
  }

  .has-paging .value-card__title {
    margin-top: var(--space-3);
    padding-right: 0;
    font-size: 1rem;
  }

  .has-paging .value-card__text {
    display: none;
  }
}

/* Celulares bajos (≤ 740px de alto): Nosotros más apretado para que el
   eyebrow no choque con el header */
@media (max-width: 47.999em) and (max-height: 46.25em) {
  .has-paging .about__inner {
    gap: var(--space-4);
  }

  .has-paging .about__title {
    font-size: clamp(1.75rem, 8vw, 2.125rem);
  }

  .has-paging .about__body {
    font-size: 0.9375rem;
  }

  .has-paging .about__link {
    margin-top: var(--space-4);
  }

  .has-paging .value-card {
    padding: var(--space-3) var(--space-4);
  }

  .has-paging .value-card__number {
    top: var(--space-3);
  }

  .has-paging .value-card__title {
    margin-top: var(--space-2);
  }
}

/* ---------- Nosotros en desktop bajo (≥ 1024px y ≤ 760px de alto) ----------
   Laptops de 1366×768 o 1280×720 con barras del navegador: todo un poco
   más chico para que el texto y las tarjetas quepan sin cortarse. */
@media (min-width: 64em) and (max-height: 47.5em) {
  .has-paging .about__title {
    margin-top: var(--space-3);
    font-size: clamp(2rem, 1.2rem + 2vw, 2.75rem);
  }

  .has-paging .about__body {
    margin-top: var(--space-4);
    font-size: 1rem;
  }

  .has-paging .about__body p + p {
    margin-top: var(--space-3);
  }

  .has-paging .about__link {
    margin-top: var(--space-5);
  }

  .has-paging .about__values {
    gap: var(--space-3);
  }

  .has-paging .value-card {
    padding: var(--space-5);
  }

  .has-paging .value-card:nth-child(even) {
    margin-top: var(--space-6);
  }

  .has-paging .value-card__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .has-paging .value-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .has-paging .value-card__number {
    top: var(--space-5);
    right: var(--space-5);
    font-size: 1.25rem;
  }

  .has-paging .value-card__title {
    margin-top: var(--space-3);
    font-size: 1.0625rem;
  }

  .has-paging .value-card__text {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/* ---------- Servicios en celular (< 768px) ---------- */
@media (max-width: 47.999em) {
  .has-paging .services {
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }

  .has-paging .services__title {
    font-size: clamp(1.875rem, 8.6vw, 2.5rem);
  }

  .has-paging .service-gallery {
    height: auto;
  }
}

/* Celulares bajos (≤ 740px de alto): encabezado más apretado */
@media (max-width: 47.999em) and (max-height: 46.25em) {
  .has-paging .services__inner {
    gap: var(--space-4);
  }

  .has-paging .services__title {
    margin-top: var(--space-3);
    font-size: clamp(1.75rem, 8vw, 2.125rem);
  }

  .has-paging .services__lead {
    font-size: 0.9375rem;
  }

  .has-paging .services__cta {
    margin-top: var(--space-4);
  }
}

/* Celulares muy bajos (≤ 700px de alto, ej. 375×667): sin el párrafo
   de introducción, para que el panel abierto tenga espacio */
@media (max-width: 47.999em) and (max-height: 43.75em) {
  .has-paging .services__lead {
    display: none;
  }

  .has-paging .services__cta {
    margin-top: var(--space-5);
  }
}

/* ---------- Servicios en desktop bajo (≥ 1024px y ≤ 760px de alto) ---------- */
@media (min-width: 64em) and (max-height: 47.5em) {
  .has-paging .services__title {
    margin-top: var(--space-3);
    font-size: clamp(2rem, 1.2rem + 2vw, 2.75rem);
  }

  .has-paging .services__cta {
    margin-top: var(--space-4);
  }
}