@font-face { font-family: "Ind Krisha"; src: url("/assets/fonts/KrishaRegular-518Zx.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ind Poppins"; src: url("/assets/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
/* Page-local artboards preserve the supplied PNG coordinates and aspect ratios. */
.ind-page { color: #111; font-family: "Ind Poppins", sans-serif; font-weight: 500; }
.ind-section { background-position: center; background-size: cover; scroll-margin-top: 90px; }
.ind-stage { position: relative; width: 100%; max-width: 1525px; margin-inline: auto; container-type: inline-size; isolation: isolate; }
.ind-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ind-intro { background-image: url("/assets/indumentarias/indumentarias-bg.png"); }
.ind-intro .ind-stage { aspect-ratio: 1906 / 939; }
.ind-prendas { background-image: url("/assets/indumentarias/indumentarias-bg-2.png"); }
.ind-prendas .ind-stage { aspect-ratio: 1906 / 1347; }
.ind-personaliza { background-image: url("/assets/indumentarias/indumentarias-bg-3.png"); }
.ind-quality { background-image: url("/assets/indumentarias/indumentarias-bg-4.png"); }
.ind-personaliza .ind-stage,.ind-quality .ind-stage { aspect-ratio: 1906 / 1249; }
.ind-page h1,.ind-page h2,.ind-page h3,.ind-number { font-family: "Ind Krisha", sans-serif; font-weight: 400; letter-spacing: 0; margin: 0; }
.ind-page em { font-style: normal; }
.ind-page p { margin: 0; line-height: 1.2; }
.ind-intro-copy { position: absolute; left: 11.1%; top: 24.6%; width: 57%; }
.ind-intro h1 { font-size: 17.4cqw; line-height: .82; white-space: nowrap; transform: scaleX(.93); transform-origin: left; }
.ind-intro h1 span { display: block; }
.ind-intro h1 span:first-child { line-height: .75; }
.ind-intro h1 span + span { font-size: 80%; margin-top: -.45cqw; }
.ind-intro em { color: #ce0000; }
.ind-intro p { border-top: 1px solid #999; padding-top: 1cqw; margin-top: 1.2cqw; font-size: 1.08cqw; }
.ind-products { position: absolute; left: 10.75%; top: 18.7%; width: 56%; }
.ind-products article { border-bottom: 1px solid #999; height: 16.1cqw; }
.ind-products h2 { font-size: 12.2cqw; line-height: .9; display: flex; align-items: baseline; gap: 2.1cqw; }
.ind-products h2 span { color: #0800d9; font-size: 7.2cqw; min-width: 3.9cqw; }
.ind-products p { font-size: 1.08cqw; margin-top: .95cqw; }
.ind-prendas .ind-art { top: -.4cqw; }
.ind-personaliza h2 { position: absolute; top: 6.3%; width: 100%; text-align: center; font-size: 13cqw; line-height: 1; }
.ind-personaliza .ind-art { top: -1.3cqw; }
.ind-quality h2 { position: absolute; top: 7.8%; width: 100%; text-align: center; font-size: 11.2cqw; line-height: 1; z-index: 1; }
.ind-quality .ind-art { top: -2.4cqw; transform: translateX(-8cqw); }
.ind-quality em,.ind-number { color: #0800d9; }
.ind-benefits { position: absolute; left: 37.4%; top: 31.6%; width: 51.4%; }
.ind-benefits article { display: flex; align-items: center; justify-content: flex-end; gap: 1.1cqw; border-bottom: 1px solid #999; height: 9.55cqw; }
.ind-number { font-size: 3.7cqw; line-height: 1; }
.ind-benefits article > div { text-align: right; width: 27.5cqw; }
.ind-benefits h3 { font-size: 6.05cqw; line-height: .95; white-space: nowrap; }
.ind-benefits article:last-child h3 { font-size: 4.35cqw; }
.ind-benefits p { font-size: .76cqw; margin-top: .35cqw; }
/* Extend only the rules, not the text layout. The later PNG paints over them. */
@media (min-width: 651px) {
  /* The image starts 2.4cqw above its section: hide that overhang, then soften the cable. */
  .ind-quality .ind-art {
    -webkit-mask-image: linear-gradient(to bottom, transparent 2.4cqw, #000 5.4cqw);
    mask-image: linear-gradient(to bottom, transparent 2.4cqw, #000 5.4cqw);
  }
  .ind-benefits article { position: relative; border-bottom-color: transparent; }
  .ind-benefits article::after { content: ""; position: absolute; left: -20cqw; right: 0; bottom: -1px; height: 1px; background: #999; pointer-events: none; }
}
@media (max-width: 650px) {
  .ind-intro .ind-stage { aspect-ratio: auto; min-height: 700px; }
  .ind-intro-copy { top: 115px; left: 7%; width: 86%; }
  .ind-intro h1 { font-size: 23cqw; }
  .ind-intro p { font-size: 3.3cqw; margin-top: 4cqw; padding-top: 3cqw; }
  .ind-intro .ind-art { width: 200%; height: auto; top: auto; bottom: 0; left: -94%; }
  .ind-prendas .ind-stage { aspect-ratio: auto; min-height: 880px; }
  .ind-products { top: 50px; left: 7%; width: 86%; }
  .ind-products h2 { font-size: 17cqw; gap: 4cqw; }
  .ind-products h2 span { font-size: 10cqw; }
  .ind-products p { font-size: 3.2cqw; margin-top: 3cqw; }
  .ind-products article { height: auto; padding-bottom: 5cqw; margin-bottom: 5cqw; }
  .ind-desktop-break { display: none; }
  .ind-prendas .ind-art { width: 155%; height: auto; top: auto; bottom: 0; left: -73%; }
  .ind-quality .ind-stage { aspect-ratio: auto; min-height: 650px; }
  .ind-quality h2 { top: 35px; font-size: 11.5cqw; }
  .ind-quality .ind-art { width: 130%; height: auto; top: 20px; left: 8%; }
  .ind-benefits { top: auto; bottom: 35px; left: 7%; width: 86%; z-index: 2; }
  .ind-benefits h3 { font-size: 8cqw; }
  .ind-benefits article:last-child h3 { font-size: 6cqw; }
  .ind-benefits p { font-size: 2.8cqw; }
  .ind-number { font-size: 7cqw; }
  .ind-benefits article { height: auto; margin-bottom: 5cqw; padding-bottom: 4cqw; }
  .ind-benefits article > div { width: auto; }
}