/* ==========================================================================
   PRINT'N RUN â€” INICIO: maquetaciÃ³n exacta
   Todas las medidas provienen del Ã¡rbol de Figma (lienzo 1440 px,
   bloque de contenido 1367 px en x = 37). Los valores en % y en cqw
   reproducen el diseÃ±o 1:1 y se escalan proporcionalmente.
   ========================================================================== */

/* Cajas de referencia (container queries) -------------------------------- */
.hero > .shell,
.about > .shell,
.trusted > .shell,
.brands > .shell,
.location > .shell { container-type: inline-size; position: relative; }

.products > .shell {
  container-type: inline-size;
  width: min(1376px, 100% - 64px);
}

/* --------------------------------------------------------------------------
   HERO â€” caja 1367 Ã— 550 (x = 37, y = 190)
   -------------------------------------------------------------------------- */
.hero { padding-top: min(48px, 3.34vw); }

.hero__card {
  position: relative;
  background: var(--teal);
  border-radius: 4.46cqw;             /* 61 px */
  aspect-ratio: 1367 / 550;
  overflow: hidden;
}

/* TÃ­tulo vectorial: grupo 552 Ã— 284 en (105, 120) dentro de la tarjeta */
.hero__title {
  position: absolute;
  left: 7.6796%;                      /* x 105 â†’ pÃ¡gina 142 */
  top: 21.8182%;                      /* y 120 â†’ pÃ¡gina 310 */
  width: 40.3804%;                    /* 552 */
  aspect-ratio: 552 / 284;
  margin: 0;
  z-index: 3;
}

.hero__title .line {
  position: absolute;
  display: block;
}

.hero__title .line svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__title .line--1 { left: 0.9239%;  top: 11.0563%; width: 64.0217%; }  /* IMPULSA   353.4Ã—59.2  en (5.1, 31.4) */
.hero__title .line--2 { left: 0.4167%;  top: 35.0352%; width: 81.9565%; }  /* TU MARCA  452.4Ã—80.1  en (2.3, 99.5) */
.hero__title .line--3 { left: 0.2355%;  top: 70.6690%; width: 96.4311%; }  /* A OTRO NIVEL 532.3Ã—56.6 en (1.3, 200.7) */

/* Grupo de fotos: 780 Ã— 474 en (605.5, 33) de la tarjeta */
.hero__media {
  position: absolute;
  left: 44.2924%;                     /* 605.5 */
  top: 6%;                            /* 33 */
  width: 57.0593%;                    /* 780 */
  aspect-ratio: 780 / 474;
  z-index: 2;
}

.hero__media img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

/* Recortes y giros exactos del diseÃ±o */
.hero__media .m4 {                    /* 203 Ã— 254 en (514, 229.087) giro âˆ’16.0389Â° (atrÃ¡s) */
  left: 65.8974%;
  top: 48.3302%;
  width: 26.0256%;
  height: 53.5865%;
  transform: rotate(-16.0389deg);
  transform-origin: 0 0;
  z-index: 1;
}
.hero__media .m1 {                    /* lanyard  436.482 Ã— 398 en (0, 0) */
  left: 0;
  top: 0;
  width: 55.9592%;
  height: 83.9662%;
  object-fit: cover;
  object-position: 50% 31.25%;        /* recorte del diseÃ±o: 80 px arriba de 654 */
  z-index: 2;
}
.hero__media .m2 {                    /* chaqueta 372 Ã— 428 en (250, 15) */
  left: 32.0513%;
  top: 3.1646%;
  width: 47.6923%;
  height: 90.2954%;
  z-index: 3;
}
.hero__media .m3 {                    /* vaso rosa 210.177 Ã— 262.721 en (537.393, 3) giro 8.62361Â° */
  left: 68.8965%;
  top: 0.6329%;
  width: 26.9458%;
  height: 55.4264%;
  transform: rotate(8.62361deg);
  transform-origin: 0 0;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   Â¿QUIÃ‰NES SOMOS? â€” grupo 1320 Ã— 748 (x 59, y 866)
   Tarjetas 400Ã—697 / 400Ã—577 / 398Ã—577 Â· borde 1px #00AEA2 Â· radio 35
   -------------------------------------------------------------------------- */
.about { padding-top: min(152px, 10.56vw); }

.about__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1367 / 748;
}

/* Tarjetas con contorno turquesa */
.about__card {
  position: absolute;
  border: 1px solid var(--teal);
  border-radius: 2.5604cqw;            /* 35 */
}
.about__card--left   { left: 1.6094%; top: 3.5021%; width: 29.2612%; height: 93.1818%; }
.about__card--center { left: 35.3694%; top: 19.6782%; width: 29.2612%; height: 77.0053%; }
.about__card--right  { left: 69.0929%; top: 19.6782%; width: 29.1148%; height: 77.0053%; }

/* Fotos: recorte exacto (patrÃ³n de Figma) */
.about__photo { position: absolute; overflow: hidden; }
.about__photo img { position: absolute; max-width: none; height: auto; }

.about__photo--bucket { left: 1.6825%; top: 9.4513%; width: 42.7213%; height: 90.5080%; }
.about__photo--bucket img { right: 0; top: -5.8618%; width: 153.73%; }

.about__photo--arch { left: 63.5699%; top: 31.6439%; width: 34.6013%; height: 58.4225%; }
.about__photo--arch img { left: 0; top: 0; width: 164.06%; }

/* TÃ­tulo: Â¿QUIÃ‰NES sÃ³lido + SOMOS? inclinado y contorneado */
.about__title {
  position: absolute;
  right: 2.436%;
  top: .85cqw;
  margin: 0;
  color: var(--orange);
  font-size: 6.9861cqw;               /* 95.5 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.about__title em {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: .0628em var(--orange);   /* 6 px en el diseÃ±o */
}

/* Â¿QUÃ‰ HACEMOS? */
.about__h3 {
  position: absolute;
  left: 37.999%;                      /* x 519.5 */
  top: 32.279%;                       /* y 241.5 */
  width: 30%;
  margin: 0;
  color: var(--teal);
  font-size: 4.1639cqw;               /* 56.9 */
  font-weight: 700;
  line-height: .98;
  letter-spacing: 0;
  text-transform: uppercase;
  z-index: 3;
}

.about__h3 em { font-style: italic; }

.about__rule {
  position: absolute;
  left: 49.9634%;                     /* x 683 */
  top: 36.3230%;                      /* y 271.7 */
  width: 11.3387%;                    /* 155 */
  height: 2.0053%;                    /* 15 */
  background: var(--orange);
  border-radius: 999px;
  z-index: 3;
}

.about__p1 {
  position: absolute;
  left: 38.35%;                       /* x 524 */
  top: 50.0%;                         /* y 374 */
  width: 23.995%;                     /* 328 */
  margin: 0;
  color: var(--teal-deep);
  font-size: 1.1704cqw;               /* 16 */
  font-weight: 500;
  line-height: 1.5;
  z-index: 3;
}

.about__p1 strong { font-weight: 700; }

.about__p2 {
  position: absolute;
  left: 79.70%;                       /* x 1089.5 */
  top: 61.51%;                        /* y 460 */
  width: 16.240%;                     /* 222 */
  margin: 0;
  color: var(--teal-deep);
  font-size: 1.1704cqw;
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
  z-index: 3;
}

.about__p2 strong { font-weight: 700; }

/* BotÃ³n circular naranja con la flecha recortada */
.about__badge {
  position: absolute;
  left: 58.1697%;
  top: 85.5495%;
  width: 4.5574%;
  height: 8.2794%;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   PRODUCTOS â€” caja 1376 Ã— 728 (x = 32, y = 1751)
   -------------------------------------------------------------------------- */
.products { padding-top: min(161px, 11.18vw); }

.products__box {
  position: relative;
  container-type: inline-size;
  background: var(--teal-dark);
  border-radius: 5.6cqw;              /* 77 px */
  aspect-ratio: 1376 / 728;
  overflow: hidden;
}

.products__pill {
  position: absolute;
  left: 6.5407%;                      /* x 90 */
  top: 14.4231%;                      /* y 105 */
  width: 30.4506%;                    /* 419 */
  height: 10.3345%;                   /* 75.2348 */
  display: flex;
  align-items: center;
  padding-left: 2.673%;               /* 36.78 px */
  border-radius: 2.7338cqw;           /* 37.6174 */
  background: var(--teal);
  color: var(--white);
  font-size: 3.9772cqw;               /* 54.726 px */
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  z-index: 4;
}

/* Tarjetas menta (319 Ã— 338 en y = 2016) */
.product-card {
  position: absolute;
  top: 36.4%;                         /* y 2016 */
  width: 23.18%;                      /* 319 */
  height: 46.43%;                     /* 338 */
  background: var(--mint);
  border-radius: 2.4cqw;              /* 33 px */
  z-index: 1;
}

.product-card--1 { left: 9.01%;  }    /* x 156 */
.product-card--2 { left: 38.44%; }    /* x 561 */
.product-card--3 { left: 67.88%; }    /* x 966 */

/* Recortes con la geometrÃ­a exacta del diseÃ±o (caja propia que desborda la tarjeta) */
.product-card {
  transition: transform .5s var(--ease);
}

.product-card__media {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.product-card__img {
  position: absolute;
  height: 100%;
  width: auto;
  max-width: none;
}

/* Tarjeta 1: recorte 354 Ã— 435 en (90, 169), radio 36 */
.product-card--1 .product-card__media {
  left: -10.6583%;                    /* -34 */
  top: -28.4024%;                     /* -96 */
  width: 110.9718%;                   /* 354 */
  height: 128.6982%;                  /* 435 */
  border-radius: 2.6163cqw;           /* 36 */
}
.product-card--1 .product-card__img { left: -38.4181%; top: 0; }

/* Tarjeta 2: recorte 349 Ã— 338 en (514, 254) */
.product-card--2 .product-card__media {
  left: -4.7022%;                     /* -15 */
  top: -3.2544%;                      /* -11 */
  width: 109.4044%;                   /* 349 */
  height: 100%;                       /* 338 */
}
.product-card--2 .product-card__img { left: -34.2292%; top: -14.2012%; height: 115.9763%; }

/* Tarjeta 3: recorte 344 Ã— 368 en (909, 235) */
.product-card--3 .product-card__media {
  left: -7.8369%;                     /* -25 */
  top: -8.8757%;                      /* -30 */
  width: 107.8369%;                   /* 344 */
  height: 108.8757%;                  /* 368 */
}
.product-card--3 .product-card__img { left: -27.5465%; top: 0; height: 103.8043%; }

.product-card:hover { transform: translateY(-1%); }

/* Botones naranjas con la flecha calada (39.52 Ã— 39.52 en y = 545.49) */
.product-card__arrow {
  position: absolute;
  top: 82.9852%;                      /* y 545.49 */
  width: 12.3887%;                    /* 39.52 */
  aspect-ratio: 1;
  z-index: 3;
  transition: transform .35s var(--ease);
}

.product-card--1 .product-card__arrow { left: 5.4828%; }  /* x 141.49 */
.product-card--2 .product-card__arrow { left: 6.4232%; }  /* x 549.49 */
.product-card--3 .product-card__arrow { left: 7.0502%; }  /* x 956.49 */

.product-card__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__arrow:hover { transform: scale(1.08); }

/* Flechas laterales (30 Ã— 30 en y = 2109) */
.products__nav {
  position: absolute;
  top: 49.18%;                        /* y 2109 */
  width: 2.18%;                       /* 30 */
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  z-index: 5;
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.products__nav:hover { background: var(--orange); }

.products__nav svg { width: 52%; height: 52%; }

.products__nav--prev { left: 2.98%; }  /* x 73 */
.products__nav--next { right: 3.2%; }  /* x 1334 */

/* --------------------------------------------------------------------------
   CONFIARON EN ELLOS â€” bloque 1367 Ã— 703 (y = 2617)
   -------------------------------------------------------------------------- */
.trusted { padding-top: min(138px, 9.58vw); }   /* 2479 â†’ 2617 */

.trusted__stage {
  position: relative;
  aspect-ratio: 1367 / 703;
  container-type: inline-size;
}

/* TÃ­tulo vectorial del diseÃ±o: 556 Ã— 157,5 en (70, 7) del bloque */
.trusted__title {
  position: absolute;
  left: 5.1207%;                      /* 70  â†’ x 107 */
  top: 0.9929%;                       /* 7   â†’ y 2624 */
  width: 40.6730%;                    /* 556 */
  margin: 0;
  z-index: 2;
}

.trusted__title img { display: block; width: 100%; height: auto; }

.photo-card {
  position: absolute;
  overflow: hidden;
  z-index: 1;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.photo-card:hover img { transform: scale(1.05); }

/* 4 columnas de 275 px en x = 68 / 378 / 688 / 998 del bloque */
.photo-card--1 { left: 4.9744%;  top: 30.1565%; width: 20.1170%; height: 71.4083%; border-radius: 5.633cqw; }  /* y 212 h 502 */
.photo-card--2 { left: 27.6518%; top: 30.1565%; width: 20.1170%; height: 71.4083%; border-radius: 6.072cqw; }   /* y 212 h 502 */
.photo-card--3 { left: 50.3292%; top: 7.1110%;  width: 20.0439%; height: 94.4524%; border-radius: 5.267cqw; }   /* y 50  h 664 */
.photo-card--4 { left: 73.0066%; top: 6.5405%;  width: 20.1902%; height: 96.0171%; border-radius: 6.291cqw; }   /* y 46  h 675 */

/* --------------------------------------------------------------------------
   MARCAS PRINT â€” caja 1367 Ã— 664 (y = 3460)
   -------------------------------------------------------------------------- */
.brands { padding-top: min(129px, 8.96vw); }

.brands__box {
  position: relative;
  container-type: inline-size;
  background: var(--teal);
  border-radius: 4.46cqw;             /* 61 px */
  width: 99.78%;                      /* 1364 / 1367 */
  margin-inline: auto;
  aspect-ratio: 1364 / 657;
  transform: rotate(-.297771deg);     /* tarjeta girada como en Figma */
  overflow: hidden;
}

.brands__title {
  position: absolute;
  left: 6.22%;                        /* x 122 */
  top: 39.76%;                        /* y 3724 */
  width: 34%;
  margin: 0;
  color: var(--white);
  font-size: 7.4cqw;                  /* 101 px */
  line-height: .88;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.brands__title span { display: block; }

.brands__logos {
  position: absolute;
  left: 40.16%;                       /* x 586 */
  top: 13.86%;                        /* y 3552 */
  width: 54.65%;                      /* 747 */
  height: auto;                       /* ratio 747 / 487 */
  display: block;
}

/* --------------------------------------------------------------------------
   UBÃCANOS â€” grupo 1326 Ã— 954 en (0, 4124) Â· bloque 1367 en x = 37
   El grupo arranca en el borde izquierdo de la pÃ¡gina (la foto sangra).
   -------------------------------------------------------------------------- */
.location {
  position: relative;
  padding-top: 0;
  padding-bottom: 2.38%;              /* 34,3: el mapa termina 34 px bajo el stage */
}

/* Mapa de fondo: 1530 x 739 en (-42, 633,684) con 16 % de opacidad */
.location__map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: .16;                       /* el mapa va al 16 %, como en Figma */
}

.location__map img {
  position: absolute;
  left: -2.917%;                      /* -42 / 1440 */
  top: -4.276%;                       /* -30,316 / 709 */
  width: 106.25%;                     /* 1530 / 1440 */
  max-width: none;
  height: 104.23%;                    /* 739 / 709 */
}

.location .shell { position: relative; z-index: 1; }

.location__stage {
  position: relative;
  width: 96.999%;                     /* 1326 / 1367 */
  margin-left: calc(var(--gutter) * -1);   /* x = 0 */
  margin-top: -20.435%;               /* -279,316: el telefono entra en la caja de arriba */
  aspect-ratio: 1326 / 954;
  container-type: inline-size;
}

.location__media { position: absolute; inset: 0; }

/* TelÃ©fono 1227 Ã— 921 girado 1,53034Â° sobre su esquina superior izquierda */
.location__phone {
  position: absolute;
  left: -17.9038%;                    /* -237,403 */
  top: 0;
  width: 92.5339%;                    /* 1227 */
  height: 96.5409%;                   /* 921 */
  transform: rotate(1.53034deg);
  transform-origin: 0 0;
}

/* Pin 270 Ã— 363 en (568, 353) */
.location__pin {
  position: absolute;
  left: 42.8356%;                     /* 568 */
  top: 37.0021%;                      /* 353 */
  width: 20.3620%;                    /* 270 */
  height: 38.0503%;                   /* 363 */
  z-index: 1;
}

/* TÃ­tulo vectorial 436 Ã— 89 en (876, 433) */
.location__title {
  position: absolute;
  left: 66.0634%;                     /* 876 */
  top: 45.3878%;                      /* 433 */
  width: 32.8810%;                    /* 436 */
  margin: 0;
  z-index: 2;
}

.location__title img { display: block; width: 100%; height: auto; }

/* DirecciÃ³n 467,84 Ã— 43,45 en (857,43, 543,63) */
.location__address {
  position: absolute;
  left: 64.6629%;                     /* 857,43 */
  top: 56.2500%;                      /* caja; la tinta arranca en 543,63 */
  width: 35.2821%;                    /* 467,84 */
  margin: 0;
  color: var(--teal-deep);            /* #108F8A */
  font-size: 1.3952cqw;               /* 18,5 px */
  font-weight: 700;
  line-height: 1.4595;                /* 27 px entre lÃ­neas */
  letter-spacing: -.004em;
  text-align: right;
  z-index: 2;
}

.location__address span { display: block; white-space: nowrap; }

/* Flecha 62,3 Ã— 61,93 en (1251,17, 623,22) */
.location__arrow {
  position: absolute;
  left: 94.3567%;                     /* 1251,17 */
  top: 65.3267%;                      /* 623,22 */
  width: 4.6983%;                     /* 62,3 */
  display: block;
  z-index: 2;
}

.location__arrow img { display: block; width: 100%; height: auto; transition: transform .45s var(--ease); }
.location__arrow:hover img,
.location__arrow:focus-visible img { transform: scale(1.08) rotate(6deg); }

/* --------------------------------------------------------------------------
   Responsive â€” por debajo de 1080 px se vuelve un flujo normal
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { padding-top: 24px; }
  .hero__card { aspect-ratio: auto; padding: 34px 26px 0; }
  .hero__title { position: relative; left: 0; top: 0; width: 100%; }
  .hero__media { position: relative; left: 0; top: 0; width: 100%; aspect-ratio: 700 / 420; margin-top: 18px; }
  .hero__media img,
  .hero__media .m1,
  .hero__media .m2,
  .hero__media .m3,
  .hero__media .m4 { height: auto; transform: none; }
  .hero__media .m1 { left: 0;    top: 10%;  width: 46%; }
  .hero__media .m2 { left: 30%;  top: 14%;  width: 40%; }
  .hero__media .m3 { left: 74%;  top: 6%;   width: 26%; }
  .hero__media .m4 { left: 76%;  top: 46%;  width: 28%; }

  .about { padding-top: 56px; }
  .about__stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 22px; }
  .about__card { display: none; }
  .about__title { position: static; order: 1; font-size: clamp(34px, 7.6vw, 62px); white-space: normal; }
  .about__photo,
  .about__photo--bucket,
  .about__photo--arch { position: static; width: 100%; height: auto; overflow: visible; }
  .about__photo img,
  .about__photo--bucket img,
  .about__photo--arch img { position: static; right: auto; left: auto; top: auto; width: 100%; height: auto; }
  .about__photo--bucket { order: 2; }
  .about__photo--arch { order: 6; }
  .about__h3 { position: static; order: 3; width: 100%; font-size: clamp(26px, 5.4vw, 44px); }
  .about__rule { position: static; order: 4; width: 120px; height: 10px; }
  .about__p1 { position: static; order: 5; width: 100%; font-size: clamp(14px, 1.9vw, 16px); }
  .about__p2 { position: static; order: 7; width: 100%; font-size: clamp(14px, 1.9vw, 16px); text-align: left; }
  .about__badge { position: static; order: 8; width: 48px; height: 48px; align-self: flex-start; }

  .products { padding-top: 60px; }
  .products > .shell { width: min(var(--frame), 100% - 36px); }
  .products__box {
    aspect-ratio: auto;
    padding: 30px 24px 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(70px, 14vw, 110px) 16px;
  }
  .products__pill { grid-column: 1 / -1; justify-self: start; position: static; width: auto; height: auto; display: inline-flex; padding: .3em 1.4em .4em; font-size: clamp(24px, 5vw, 40px); margin-bottom: 0; }
  .products__nav { display: none; }
  .product-card { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 319 / 338; margin: 0; overflow: hidden; }

  /* En mÃ³vil la foto se contiene dentro de la tarjeta (sin recortes que invadan otras tarjetas) */
  .product-card .product-card__media {
    left: 0; top: 0; width: 100%; height: 100%;
    border-radius: 0;
    padding: 7%;
    box-sizing: border-box;
  }
  .product-card .product-card__img {
    left: 0; top: 0; width: 100%; height: 100%;
    object-fit: contain;
  }

  .trusted { padding-top: 60px; }
  .trusted__stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; container-type: normal; }
  .trusted__title { position: static; width: 100%; max-width: 480px; margin-bottom: 14px; grid-column: 1 / -1; }
  .photo-card { position: static; width: 100%; height: auto; aspect-ratio: 275 / 502; border-radius: 26px; }
  .photo-card--3, .photo-card--4 { aspect-ratio: 275 / 664; }

  .brands { padding-top: 52px; }
  .brands__box { aspect-ratio: auto; padding: 34px 26px; }
  .brands__title { position: static; width: 100%; font-size: clamp(34px, 7.4vw, 60px); margin-bottom: 24px; }
  .brands__logos { position: static; width: 100%; height: auto; }

  .location { padding-top: 40px; padding-bottom: 0; }
  .location__stage { width: 100%; margin-left: 0; margin-top: 0; aspect-ratio: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; container-type: normal; }
  .location__media { position: relative; inset: auto; width: 100%; aspect-ratio: 1227 / 921; }
  .location__phone { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  .location__pin { left: 46.29%; top: 38.33%; width: 22%; height: 39.41%; }
  .location__title { position: static; width: min(72%, 420px); }
  .location__address { position: static; width: 100%; font-size: min(3.68cqw, 17px); line-height: 1.5; text-align: left; }
  .location__address span { white-space: normal; }
  .location__arrow { position: static; width: 56px; }
}

@media (max-width: 640px) {
  .products__box { grid-template-columns: 1fr; gap: 96px; padding: 26px 20px 34px; }
  .trusted__stage { grid-template-columns: 1fr; gap: 14px; }
  .photo-card, .photo-card--3, .photo-card--4 { aspect-ratio: 275 / 380; }

}

/* Móvil: misma cabecera que el resto de páginas */
@media (max-width: 720px) {
  .nav-bar { width: min(961px, calc(100% - clamp(18px, 4vw, 64px))); margin: 0 auto; flex-wrap: wrap; row-gap: 12px; }
  .nav-logo { width: 104px; }
  .nav-links {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    min-height: 46px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex: 0 0 auto; }
  .nav-links a { font-size: 10.5px; white-space: nowrap; }
}
@media (max-width: 720px) {
  .nav-links { width: 100% !important; min-height: 44px !important; padding: 9px 14px !important; gap: 10px !important; justify-content: space-between !important; margin: 0 !important; }
  .nav-links a { font-size: 10.5px !important; padding: 4px 0 !important; }
  .nav-logo { width: 100px !important; }
  .site-header { padding-inline: 14px !important; }
}
/* Móvil · 4ª pasada: productos compactos y flechas discretas */
@media (max-width: 720px) {
  .products__box { gap: 22px !important; padding: 22px 18px 26px !important; aspect-ratio: auto !important; }
  .products__pill { margin-bottom: 2px !important; }
  .product-card__arrow { width: 34px !important; height: 34px !important; top: auto !important; bottom: 12px !important; }
  .about__badge { width: 36px !important; height: 36px !important; }
  img[src*="ubicacion-flecha"] { width: 34px !important; height: 34px !important; }
}