/* ============================================================
       0. FONTS — Graphik (display + body, único face del sistema)
       ============================================================ */
    @font-face { font-family: "Graphik"; src: url("fonts/GraphikLight.otf")      format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
    @font-face { font-family: "Graphik"; src: url("fonts/GraphikRegular.otf")    format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: "Graphik"; src: url("fonts/GraphikMedium.otf")     format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
    @font-face { font-family: "Graphik"; src: url("fonts/GraphikSemibold.otf")   format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
    @font-face { font-family: "Graphik"; src: url("fonts/GraphikBold.otf")       format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: "Graphik"; src: url("fonts/GraphikLightItalic.otf")    format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }

    /* ============================================================
       1. TOKENS
       ============================================================ */
    :root {
      --c-teal:      #008996;
      --c-teal-deep: #006670;
      --c-teal-haze: #E6F3F4;
      --c-dark:      #161B1C;
      --c-dark-2:    #0B0E0F;
      --c-gray-50:   #F4F4F2;
      --c-gray-100:  #EAEAE7;
      --c-gray-200:  #D9D9D6;
      --c-gray-500:  #6A6A6A;
      --c-white:     #FFFFFF;

      --font: "Graphik", "Helvetica Neue", Arial, sans-serif;
      --ease: cubic-bezier(.22,.61,.36,1);
      --ease-io: cubic-bezier(.65,0,.35,1);
      --w-max: 1280px;

      --nav-h: 64px;
    }

    /* ============================================================
       2. RESET + BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      font-weight: 400;
      color: var(--c-dark);
      background: var(--c-white);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    img, video { display: block; max-width: 100%; }
    button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }

    /* ============================================================
       3. TYPE PRIMITIVES
       ============================================================ */
    .t-overline { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-gray-500); }
    .t-overline--light { color: rgba(255,255,255,.6); }
    .t-overline--teal  { color: var(--c-teal); }
    /* Editorial-bold headlines — UPPERCASE heavy, italic-light teal callout on .em */
    .t-h1      {
      font-weight: 700;
      font-size: clamp(40px, 5.6vw, 84px);
      line-height: 0.94;
      letter-spacing: -0.015em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .t-h2      {
      font-weight: 700;
      font-size: clamp(28px, 3.6vw, 54px);
      line-height: 0.98;
      letter-spacing: -0.008em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .t-h3      { font-weight: 600; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.25; letter-spacing: 0; }
    .t-lead    { font-weight: 300; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.6; color: var(--c-gray-500); }

    /* Italic teal-callout — used as accent inside h1/h2/h3 to mix bold + italic on title lines. */
    .t-h1 em, .t-h2 em, .t-h3 em {
      font-style: italic; font-weight: 300; color: var(--c-teal);
      text-transform: uppercase; letter-spacing: -0.005em;
    }
    .tech .t-h2 em, .video .t-h2 em, .cta .t-h1 em, .cta .t-h2 em,
    .intro .t-h1 em { color: var(--c-teal); }
    /* ============================================================
       4. APPEAR ON SCROLL (fade-up)
       ============================================================ */
    [data-anim] {
      opacity: 0; transform: translateY(16px);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    [data-anim].is-in { opacity: 1; transform: none; }
    [data-anim-delay="1"].is-in { transition-delay: .08s; }
    [data-anim-delay="2"].is-in { transition-delay: .16s; }
    [data-anim-delay="3"].is-in { transition-delay: .24s; }
    [data-anim-delay="4"].is-in { transition-delay: .32s; }
    [data-anim-delay="5"].is-in { transition-delay: .40s; }
    [data-anim-delay="6"].is-in { transition-delay: .48s; }

    /* ============================================================
       5. NAV (top fixed) — auto theme by section
       ============================================================ */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
      display: flex; align-items: center; gap: 32px;
      padding: 0 32px; z-index: 100;
      transition: background-color .45s var(--ease), border-color .45s var(--ease);
      background: rgba(11,14,15, .65);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav.is-light {
      background: rgba(255,255,255, .85);
      border-bottom-color: rgba(22,27,28,.06);
    }
    .nav__brand { height: 22px; transition: filter .45s var(--ease); }
    .nav.is-light .nav__brand { filter: invert(1) brightness(0.05); }
    .nav__items { display: flex; gap: 28px; margin-left: auto; }
    .nav__items a {
      font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(255,255,255,.7); padding: 8px 0; transition: color .3s var(--ease);
      border-bottom: 1px solid transparent;
    }
    .nav.is-light .nav__items a { color: var(--c-gray-500); }
    .nav__items a:hover { color: var(--c-white); }
    .nav.is-light .nav__items a:hover { color: var(--c-dark); }
    .nav__items a.is-active { color: var(--c-teal); border-color: var(--c-teal); }
    .nav.is-light .nav__items a.is-active { color: var(--c-teal); }

    .nav__cta {
      font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
      padding: 9px 18px; border-radius: 999px;
      background: var(--c-teal); color: #fff; transition: background-color .25s var(--ease);
    }
    .nav__cta:hover { background: var(--c-teal-deep); }

    .nav__burger { display: none; width: 28px; height: 28px; margin-left: auto; position: relative; }
    .nav__burger span { position: absolute; left: 4px; right: 4px; height: 1.5px; background: #fff; transition: all .3s var(--ease); }
    .nav.is-light .nav__burger span { background: var(--c-dark); }
    .nav__burger span:nth-child(1) { top: 9px; }
    .nav__burger span:nth-child(2) { top: 17px; }
    .nav.is-menu-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    .nav.is-menu-open .nav__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

    /* ============================================================
       6. SIDE PROGRESS DOTS
       ============================================================ */
    .dots {
      position: fixed; top: 50%; right: 24px; transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 14px; z-index: 90;
      transition: opacity .4s var(--ease);
    }
    .dots__item {
      position: relative; display: flex; align-items: center; gap: 12px;
    }
    .dots__dot {
      width: 6px; height: 6px; border-radius: 999px;
      background: rgba(22,27,28,.25);
      transition: all .4s var(--ease); display: block;
    }
    .dots.is-dark .dots__dot { background: rgba(255,255,255,.3); }
    .dots__item:hover .dots__dot { background: var(--c-teal); transform: scale(1.5); }
    .dots__item.is-active .dots__dot {
      background: var(--c-teal); height: 24px; border-radius: 999px;
    }
    .dots__label {
      position: absolute; right: 18px; white-space: nowrap;
      font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--c-dark); background: var(--c-white);
      padding: 4px 10px; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.08);
      opacity: 0; transform: translateX(8px); pointer-events: none;
      transition: all .3s var(--ease);
    }
    .dots.is-dark .dots__label { background: var(--c-dark); color: var(--c-white); }
    .dots__item:hover .dots__label { opacity: 1; transform: none; }

    /* ============================================================
       7. SECTION SHELLS
       ============================================================ */
    .section {
      position: relative; padding: 120px 32px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .section--full   { min-height: 100vh; }
    .section--light  { background: var(--c-white); }
    .section--gray   { background: var(--c-gray-50); }
    .section__inner  { max-width: var(--w-max); margin: 0 auto; width: 100%; }
    .section__header { margin-bottom: 64px; max-width: 800px; }

    /* ============================================================
       8. SECTION 01 — PORTADA (HERO)
       ============================================================ */
    .hero {
      position: relative; min-height: 100vh; overflow: hidden;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      color: var(--c-white); text-align: center; padding: var(--nav-h) 32px 96px;
    }
    .hero__bg {
      position: absolute; inset: 0; z-index: 0;
      background:
        radial-gradient(60% 50% at 50% 50%, rgba(0,137,150,.22), transparent 70%),
        url("assets/backgrounds/fondo-cubes-teal.png") center/cover no-repeat,
        var(--c-dark-2);
    }
    .hero__bg::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(11,14,15,.4) 0%, transparent 30%, transparent 70%, rgba(11,14,15,.6) 100%);
    }
    .hero__inner { position: relative; z-index: 1; max-width: 1080px; }
    .hero__overline { margin-bottom: 28px; color: rgba(255,255,255,.55); letter-spacing: 0.32em; }
    .hero__logo { width: min(52vw, 440px); height: auto; margin: 0 auto 8px; display: block; filter: drop-shadow(0 18px 50px rgba(0,137,150,.42)); }
    .hero__rule {
      width: 80px; height: 1px; background: rgba(255,255,255,.35);
      margin: 28px auto 22px;
    }
    .hero__tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
      color: rgba(255,255,255,.7);
    }
    .hero__tag::before, .hero__tag::after {
      content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--c-teal);
      box-shadow: 0 0 10px var(--c-teal);
    }
    .hero__foot {
      position: absolute; bottom: 32px; left: 0; right: 0; z-index: 2;
      display: flex; justify-content: space-between; align-items: center;
      padding: 0 32px;
      font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.55);
    }
    /* ============================================================
       9. SECTION 02 — PORTAFOLIO (intro video-loop)
       ============================================================ */
    .intro {
      position: relative; overflow: hidden;
      min-height: 100vh; padding: 140px 32px 120px;
      background: var(--c-dark-2); color: #fff;
      display: flex; align-items: center;
    }
    .intro__video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: 0; pointer-events: none;
      filter: saturate(.85) contrast(1.05);
    }
    .intro__scrim {
      position: absolute; inset: 0; z-index: 1;
      background:
        radial-gradient(70% 95% at 0% 50%, rgba(11,14,15,.92) 0%, rgba(11,14,15,.55) 55%, transparent 100%),
        linear-gradient(180deg, rgba(11,14,15,.55) 0%, rgba(11,14,15,.30) 50%, rgba(11,14,15,.80) 100%);
    }
    .intro__inner { position: relative; z-index: 2; max-width: 720px; }
    .intro__title { color: #fff; margin: 18px 0 32px; }
    .intro__lead  { color: rgba(255,255,255,.86); margin-bottom: 22px; max-width: 620px; }
    .intro__lead:last-child { margin-bottom: 0; }
    .intro__badge {
      position: absolute; right: 28px; bottom: 28px; z-index: 2;
      font-family: var(--font);
      font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,.55);
      padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
      backdrop-filter: blur(8px); background: rgba(11,14,15,.35);
    }
    .intro__badge::before {
      content:""; display:inline-block; width:6px; height:6px; border-radius:999px;
      background: var(--c-teal); margin-right: 10px; vertical-align: middle;
      box-shadow: 0 0 12px var(--c-teal);
      animation: livePulse 1.8s ease-in-out infinite;
    }
    @keyframes livePulse { 0%,100%{ opacity:1; transform: scale(1);} 50%{ opacity:.5; transform: scale(.85);} }

    /* ============================================================
       10. SECTION 03 — ENFOQUE (manifiesto + métricas)
       ============================================================ */
    .focus__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 96px; align-items: center; }
    .focus__metrics { display: flex; flex-direction: column; gap: 24px; }
    .focus__metric {
      position: relative;
      padding: 28px 28px 28px 32px;
      border-left: none;
      border-radius: 14px;
      background: var(--c-gray-50);
      display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
      transition: background-color .35s var(--ease), transform .35s var(--ease);
      overflow: hidden;
    }
    .focus__metric:hover { background: var(--c-dark); transform: translateX(4px); }
    .focus__metric:hover strong, .focus__metric:hover span,
    .focus__metric:hover .focus__metric__hash { color: #fff; }
    .focus__metric:hover .focus__metric__hash { color: var(--c-teal); }

    .focus__metric__hash {
      font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
      color: var(--c-gray-500);
      font-feature-settings: "tnum" 1;
      transition: color .35s var(--ease);
      align-self: start; padding-top: 14px;
    }
    .focus__metric strong {
      font-weight: 800;
      font-size: clamp(72px, 8.2vw, 128px);
      color: var(--c-dark); line-height: .88; display: block;
      letter-spacing: -0.045em;
      font-feature-settings: "tnum" 1;
      transition: color .35s var(--ease);
      position: relative;
    }
    .focus__metric strong sup {
      color: var(--c-teal);
      font-size: 0.42em;
      font-weight: 700;
      vertical-align: top;
      letter-spacing: 0;
      margin-left: 4px;
      top: 0.18em;
      position: relative;
    }
    .focus__metric span {
      font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--c-gray-500); margin-top: 8px; display: block;
      transition: color .35s var(--ease);
    }
    .focus__metric::after {
      content: ""; position: absolute; right: -10px; bottom: -10px;
      width: 80px; height: 80px; border-radius: 999px;
      background: radial-gradient(closest-side, rgba(0,137,150,.18), transparent 70%);
      opacity: 0; transition: opacity .4s var(--ease);
    }
    .focus__metric:hover::after { opacity: 1; }

    /* ============================================================
       11. SECTION 04 — CLIENTES (compact carousel)
       ============================================================ */
    .clients-car { position: relative; }
    .clients-car__tabs {
      display: flex; gap: 6px; flex-wrap: wrap;
      margin-bottom: 28px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--c-gray-200);
    }
    .clients-car__tab {
      font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--c-gray-500);
      padding: 10px 18px; border-radius: 999px;
      background: transparent; transition: background-color .3s var(--ease), color .3s var(--ease);
      display: inline-flex; align-items: center; gap: 10px;
    }
    .clients-car__tab span {
      font-size: 10px; opacity: .55; font-weight: 400; letter-spacing: 0;
      font-feature-settings: "tnum" 1;
    }
    .clients-car__tab:hover { color: var(--c-dark); background: var(--c-gray-50); }
    .clients-car__tab.is-active { background: var(--c-dark); color: #fff; }
    .clients-car__tab.is-active span { color: rgba(255,255,255,.7); opacity: 1; }

    .clients-car__stage {
      position: relative;
      min-height: 340px;
    }
    .clients-car__panel {
      position: absolute; inset: 0;
      opacity: 0; pointer-events: none;
      transform: translateY(8px);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }
    .clients-car__panel.is-active { opacity: 1; pointer-events: auto; transform: none; }

    .clients-car__panel-head {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 24px; margin-bottom: 20px;
    }
    .clients-car__title {
      font-weight: 700; font-size: clamp(28px, 3.4vw, 44px);
      text-transform: uppercase; letter-spacing: -0.005em; line-height: 1;
    }
    .clients-car__title em {
      font-style: italic; font-weight: 300; color: var(--c-teal);
      letter-spacing: 0; margin-left: 14px;
    }
    .clients-car__pageinfo {
      font-family: var(--font); font-size: 11px; font-weight: 500;
      letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gray-500);
      font-feature-settings: "tnum" 1; white-space: nowrap;
    }
    .clients-car__strip {
      display: grid; gap: 10px;
      grid-template-columns: repeat(8, 1fr);
    }
    .clients-car__cell {
      aspect-ratio: 480/220;
      background: var(--c-white);
      border: 1px solid var(--c-gray-100);
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      padding: 10px;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    }
    .clients-car__cell:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,27,28,.08); border-color: var(--c-gray-200); }
    .clients-car__cell img { max-width: 100%; max-height: 100%; object-fit: contain; }

    .clients-car__progress {
      display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 26px;
      flex-wrap: wrap;
    }
    .clients-car__pdot {
      width: 28px; height: 3px; border-radius: 999px;
      background: var(--c-gray-200);
      transition: all .3s var(--ease); cursor: pointer;
    }
    .clients-car__pdot.is-active { background: var(--c-teal); width: 52px; }

    /* Next-country nudge button */
    .clients-car__nav {
      display: flex; justify-content: center; align-items: center; gap: 14px;
      margin-top: 22px;
    }
    .clients-car__next {
      display: inline-flex; align-items: center; gap: 12px;
      font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--c-gray-500);
      padding: 12px 22px; border-radius: 999px;
      background: var(--c-white);
      border: 1px solid var(--c-gray-200);
      transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
      cursor: pointer;
    }
    .clients-car__next:hover {
      color: var(--c-teal); border-color: var(--c-teal);
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(0,137,150,.15);
    }
    .clients-car__next-arrow {
      width: 22px; height: 1.5px; background: currentColor; position: relative;
      transition: width .25s var(--ease);
    }
    .clients-car__next-arrow::after {
      content: ""; position: absolute; right: 0; top: 50%;
      width: 8px; height: 8px;
      border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
      transform: translateY(-50%) rotate(45deg);
    }
    .clients-car__next:hover .clients-car__next-arrow { width: 32px; }
    .clients-car__next-label-country { color: var(--c-dark); letter-spacing: 0.04em; text-transform: none; font-weight: 600; }
    .clients-car__next:hover .clients-car__next-label-country { color: var(--c-teal); }

    /* ============================================================
       12. SECTION 05 — PRODUCTOS (3 cards)
       ============================================================ */
    .prod-overview__head { text-align: center; max-width: 720px; margin: 0 auto 72px; }
    .prod-overview__head p { margin-top: 18px; }
    .prod-overview__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .prod-card {
      background: var(--c-white); border-radius: 12px; overflow: hidden;
      border: 1px solid var(--c-gray-100);
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
      display: flex; flex-direction: column; cursor: pointer;
    }
    .prod-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 48px rgba(22,27,28,.10);
      border-color: var(--c-teal);
    }
    .prod-card__visual {
      aspect-ratio: 5/4;
      background: var(--c-gray-50);
      display: flex; align-items: center; justify-content: center;
      padding: 40px; transition: background-color .4s var(--ease);
    }
    .prod-card:hover .prod-card__visual { background: var(--c-teal-haze); }
    .prod-card__visual img {
      max-height: 100%; max-width: 80%; object-fit: contain;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,.18));
      transform: translateY(28px) scale(.86);
      opacity: 0;
      transition: transform 1.1s var(--ease) .12s, opacity .9s var(--ease) .12s, filter .35s var(--ease);
    }
    .prod-card[data-anim].is-in .prod-card__visual img { transform: none; opacity: 1; }
    .prod-card:hover .prod-card__visual img {
      transform: translateY(-10px) scale(1.05) rotate(-1.5deg);
      filter: drop-shadow(0 32px 56px rgba(0,137,150,.30));
    }
    .prod-card__body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
    .prod-card__tech { color: var(--c-teal); margin-bottom: 10px; }
    .prod-card__title { margin-bottom: 12px; }
    .prod-card__desc { font-size: 14px; line-height: 1.6; color: var(--c-gray-500); margin-bottom: 24px; flex: 1; }
    .prod-card__link {
      font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--c-teal); display: inline-flex; align-items: center; gap: 8px;
    }
    .prod-card__link::after { content: "→"; transition: transform .25s var(--ease); }
    .prod-card:hover .prod-card__link::after { transform: translateX(4px); }

    /* ============================================================
       13. PRODUCT SECTIONS — shared layout
       ============================================================ */
    /* Video module */
    .video {
      position: relative;
      background: var(--c-dark-2); color: var(--c-white);
      padding: 100px 32px;
    }
    .video__inner { max-width: var(--w-max); margin: 0 auto; }
    .video__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
    .video__frame {
      aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; position: relative;
      background: #000; box-shadow: 0 40px 80px rgba(0,0,0,.5);
    }
    .video__frame video, .video__frame img {
      width: 100%; height: 100%; object-fit: cover;
    }
    /* Tech slab */
    .tech { padding: 120px 32px; background: var(--c-dark); color: var(--c-white); }
    .tech__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
    .tech__logo { height: 56px; margin: 0 auto 32px; object-fit: contain; }
    .tech__title { color: var(--c-teal); margin-bottom: 16px; }
    .tech__body { max-width: 760px; margin: 0 auto; color: rgba(255,255,255,.85); font-weight: 300; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.7; }
    .tech__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
    .tech__chips span {
      font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
      padding: 10px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
      color: rgba(255,255,255,.85);
      background: rgba(255,255,255,.04);
    }

    /* Benefits / features grid (roundels) */
    .benefits { padding: 120px 32px; background: var(--c-white); }
    .benefits--gray { background: var(--c-gray-50); }
    .benefits__inner { max-width: var(--w-max); margin: 0 auto; }
    .benefits__head { text-align: center; max-width: 800px; margin: 0 auto 32px; }
    .benefits__head p { margin-top: 16px; }
    .benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .benefits__grid--6 { grid-template-columns: repeat(3, 1fr); }
    .benefit { text-align: center; padding: 16px; }
    .benefit img { width: 96px; height: 96px; margin: 0 auto 20px; object-fit: contain; }
    .benefit h4 { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
    .benefit p  { font-size: 13px; color: var(--c-gray-500); line-height: 1.5; }

    /* SKU grid (Desmoldante family) */
    .sku-grid { padding: 120px 32px; background: var(--c-gray-50); }
    .sku-grid__inner { max-width: var(--w-max); margin: 0 auto; }
    .sku-grid__head { text-align: center; max-width: 800px; margin: 0 auto 56px; }
    .sku-grid__intro { margin-top: 16px; }
    .sku-grid__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .sku { background: #fff; border-radius: 12px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
    .sku:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(22,27,28,.10); }
    .sku__img { aspect-ratio: 1/1.1; display: flex; align-items: center; justify-content: center; padding: 28px; }
    .sku__img img { max-height: 100%; object-fit: contain; }
    .sku__band { padding: 20px 22px; color: #fff; display: flex; flex-direction: column; gap: 4px; min-height: 100px; }
    .sku__name { font-weight: 700; font-size: 22px; letter-spacing: 0; }
    .sku__line { font-weight: 400; font-size: 13px; opacity: .92; line-height: 1.4; }
    .sku__badge {
      position: absolute; top: 12px; right: 12px;
      background: var(--c-teal); color: #fff;
      font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
      padding: 6px 10px; border-radius: 4px;
    }
    .sku-wrap { position: relative; }

    /* ============================================================
       15. CTA + CIERRE
       ============================================================ */
    .cta {
      background: var(--c-dark-2); color: var(--c-white);
      padding: 140px 32px; position: relative; overflow: hidden;
    }
    .cta::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(60% 60% at 50% 100%, rgba(0,137,150,.25), transparent 70%);
    }
    .cta__inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
    .cta__title { margin-bottom: 24px; }
    .cta__sub { color: rgba(255,255,255,.75); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; }
    .cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn {
      display: inline-block;
      font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
      padding: 18px 36px; border-radius: 4px; transition: all .25s var(--ease);
      border: 1.5px solid transparent; cursor: pointer;
    }
    .btn--primary { background: var(--c-teal); color: #fff; }
    .btn--primary:hover { background: var(--c-teal-deep); }
    .btn--ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
    .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

    .closing { background: var(--c-dark-2); color: #fff; padding: 120px 32px 36px; position: relative; }
    .closing__bg { position: absolute; inset: 0; background: url("assets/backgrounds/fondo-cubes-teal.png") center/cover; opacity: .35; }
    .closing__logo { width: min(48vw, 280px); height: auto; margin: 0 auto 14px; display: block; filter: drop-shadow(0 14px 40px rgba(0,137,150,.35)); }
    .closing__inner {
      position: relative; z-index: 1; max-width: var(--w-max); margin: 0 auto;
      text-align: center;
    }
    .closing__rule {
      width: 80px; height: 1px; background: rgba(255,255,255,.35);
      margin: 22px auto 18px;
    }
    .closing__tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
      color: rgba(255,255,255,.7); margin-bottom: 64px;
    }
    .closing__tag::before, .closing__tag::after {
      content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--c-teal);
      box-shadow: 0 0 10px var(--c-teal);
    }
    .closing__foot {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1);
      font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.55);
    }

    /* ============================================================
       16. CONTACT MODAL
       ============================================================ */
    .modal {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(11,14,15,.6); backdrop-filter: blur(8px);
      display: none; align-items: center; justify-content: center;
      padding: 24px;
    }
    .modal.is-open { display: flex; animation: fadeIn .3s var(--ease); }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    .modal__panel {
      width: 100%; max-width: 480px; background: var(--c-white); border-radius: 12px;
      padding: 40px; position: relative;
    }
    .modal__close {
      position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      transition: background-color .2s; color: var(--c-gray-500); font-size: 18px;
    }
    .modal__close:hover { background: var(--c-gray-50); color: var(--c-dark); }
    .modal h3 { margin-bottom: 8px; }
    .modal p { color: var(--c-gray-500); margin-bottom: 24px; font-size: 14px; }
    .modal__form { display: flex; flex-direction: column; gap: 12px; }
    .modal__form label {
      font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--c-gray-500); margin-bottom: -8px;
    }
    .modal__form input, .modal__form select, .modal__form textarea {
      font-family: var(--font); font-size: 14px;
      padding: 12px 14px; border: 1px solid var(--c-gray-200); border-radius: 4px;
      outline: none; background: var(--c-white); color: var(--c-dark);
      transition: border-color .2s, box-shadow .2s;
    }
    .modal__form input:focus, .modal__form select:focus, .modal__form textarea:focus {
      border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(0,137,150,.12);
    }
    .modal__form button { margin-top: 8px; }
    .modal__sent { padding: 32px 0; text-align: center; color: var(--c-teal); font-weight: 500; }

    /* ============================================================
       17. RESPONSIVE
       ============================================================ */
    @media (max-width: 1024px) {
      .clients-car__strip { grid-template-columns: repeat(6, 1fr); }
      .prod-overview__grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-left: auto; margin-right: auto; }
      .focus__grid { grid-template-columns: 1fr; gap: 56px; }
      .sku-grid__list { grid-template-columns: repeat(2, 1fr); }
      .benefits__grid { grid-template-columns: repeat(2, 1fr); }
      .benefits__grid--6 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px) {
      .nav { padding: 0 20px; }
      .nav__items, .nav__cta { display: none; }
      .nav__burger { display: block; }
      .nav.is-menu-open .nav__items {
        display: flex; flex-direction: column; gap: 0;
        position: fixed; top: var(--nav-h); left: 0; right: 0;
        background: var(--c-dark-2); padding: 24px 32px;
      }
      .nav.is-light.is-menu-open .nav__items { background: var(--c-white); border-bottom: 1px solid var(--c-gray-100); }
      .nav.is-menu-open .nav__items a { padding: 14px 0; }
      .dots { display: none; }
      .section, .intro { padding: 80px 20px; }
      .intro__inner { max-width: 100%; }
      .intro__badge { right: 14px; bottom: 14px; font-size: 9px; padding: 6px 10px; }
      .hero__foot { font-size: 9px; padding: 0 20px; }
      .clients-car__strip { grid-template-columns: repeat(3, 1fr); }
      .clients-car__panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
      .clients-car__title { font-size: 28px; }
      .focus__metric strong { font-size: 56px; }
      .video, .tech, .benefits, .sku-grid, .versions, .cta { padding-left: 20px; padding-right: 20px; padding-top: 80px; padding-bottom: 80px; }
      .sku-grid__list { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
      .benefits__grid, .benefits__grid--6 { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
      .closing__foot { flex-direction: column; gap: 20px; text-align: center; }
      .modal__panel { padding: 28px; }
    }

    /* ============================================================
       18. PLUS DESIGN LAYER — head rows, hovers llamativos, glow
       ============================================================ */

    /* Editorial head-row: overline · rule · counter — used for Focus/Clients/Productos */
    .focus__title { margin: 22px 0 36px; }
    .clients__header { max-width: 100%; text-align: left; margin-left: 0; margin-right: 0; }
    .clients__head-row, .prod-overview__head-row {
      display: flex; align-items: center; gap: 16px;
      margin-bottom: 22px; flex-wrap: wrap;
    }
    .clients__divider, .prod-overview__divider {
      flex: 1; min-width: 40px; height: 1px;
      background: linear-gradient(90deg, var(--c-teal), transparent);
      opacity: .6;
    }
    .clients__title { max-width: 760px; }
    .prod-overview__head { text-align: left; max-width: none; margin: 0 0 64px; }
    .prod-overview__head-row { justify-content: flex-start; }
    .prod-overview__title { max-width: 880px; }
    .prod-overview__sub   { max-width: 540px; margin-top: 22px; }

    /* Focus metrics — handled in main rule above */

    /* ---- PRODUCT CARDS — colored hover overlay + glow ---- */
    .prod-card { position: relative; isolation: isolate; }
    .prod-card__visual { position: relative; overflow: hidden; }
    .prod-card__visual::before {
      content: ""; position: absolute; inset: 0; z-index: 0;
      background: radial-gradient(70% 70% at 50% 60%, rgba(0,137,150,.18), transparent 75%);
      opacity: 0; transition: opacity .5s var(--ease);
    }
    .prod-card:hover .prod-card__visual::before { opacity: 1; }
    .prod-card__visual img { position: relative; z-index: 1; }
    .prod-card__tag {
      position: absolute; top: 16px; left: 16px; z-index: 2;
      font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--c-teal); background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
      padding: 6px 10px; border-radius: 999px;
      box-shadow: 0 4px 14px rgba(0,0,0,.06);
      transform: translateY(-4px); opacity: 0;
      transition: transform .4s var(--ease), opacity .4s var(--ease);
    }
    .prod-card[data-anim].is-in .prod-card__tag { transform: none; opacity: 1; }
    .prod-card:hover .prod-card__tag { background: var(--c-teal); color: #fff; }
    .prod-card__link {
      align-self: flex-start;
      padding: 10px 0;
      border-bottom: 1.5px solid transparent;
      transition: border-color .25s var(--ease), color .25s var(--ease);
    }
    .prod-card:hover .prod-card__link { border-bottom-color: var(--c-teal); }
    .prod-card:hover { box-shadow: 0 30px 70px rgba(0,137,150,.20); }

    /* ---- SKU CARDS — flashy hover (tilt, color reveal, big shadow) ---- */
    .sku { position: relative; isolation: isolate; cursor: pointer; }
    .sku__img { position: relative; overflow: hidden; }
    .sku__img::before {
      content: ""; position: absolute; inset: 0; z-index: 0;
      background: radial-gradient(closest-side, currentColor, transparent 75%);
      color: var(--c-teal); opacity: 0;
      transition: opacity .5s var(--ease);
      transform: scale(.6);
    }
    .sku__img img {
      position: relative; z-index: 1;
      transition: transform .65s var(--ease), filter .5s var(--ease);
    }
    .sku:hover .sku__img::before { opacity: .35; transform: scale(1.1); }
    .sku:hover .sku__img img {
      transform: translateY(-8px) rotate(-4deg) scale(1.08);
      filter: drop-shadow(0 24px 36px rgba(0,0,0,.25));
    }
    .sku:hover {
      transform: translateY(-10px);
      box-shadow: 0 30px 60px rgba(22,27,28,.22);
    }
    .sku__band { position: relative; overflow: hidden; transition: padding .35s var(--ease); }
    .sku__band::after {
      content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0;
      background: rgba(255,255,255,.7); transition: width .55s var(--ease);
    }
    .sku:hover .sku__band::after { width: 100%; }
    /* Per-SKU accent glow color */
    .sku-wrap:nth-child(1) .sku__img { color: #A6C946; }
    .sku-wrap:nth-child(2) .sku__img { color: #0B86A0; }
    .sku-wrap:nth-child(3) .sku__img { color: #E89B26; }
    .sku-wrap:nth-child(4) .sku__img { color: #0B3A4A; }
    .sku__name { transition: letter-spacing .35s var(--ease); }
    .sku:hover .sku__name { letter-spacing: 0.02em; }

    /* ---- BENEFITS — circular icon plinth + hover (contained) ---- */
    .benefit { padding: 28px 18px; border-radius: 14px; transition: background-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); overflow: hidden; }
    .benefit:hover { background: var(--c-white); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(22,27,28,.08); }
    .benefits:not(.benefits--gray) .benefit:hover { background: var(--c-gray-50); }
    .benefit__plinth {
      width: 104px; height: 104px; margin: 0 auto 22px;
      border-radius: 999px;
      background: var(--c-white);
      display: flex; align-items: center; justify-content: center;
      position: relative;
      transition: background .35s var(--ease), box-shadow .35s var(--ease);
      box-shadow: 0 6px 18px rgba(22,27,28,.06);
    }
    .benefits--gray .benefit__plinth { background: var(--c-white); }
    /* Subtle teal ring grows on hover — stays within the plinth */
    .benefit__plinth::after {
      content: ""; position: absolute; inset: 6px; border-radius: 999px;
      border: 1.5px solid var(--c-teal);
      opacity: 0; transform: scale(.85);
      transition: opacity .4s var(--ease), transform .5s var(--ease), inset .4s var(--ease);
    }
    .benefit:hover .benefit__plinth { box-shadow: 0 10px 28px rgba(0,137,150,.18); }
    .benefit:hover .benefit__plinth::after { opacity: 1; transform: scale(1); inset: 2px; }
    .benefit__plinth img { width: 64px; height: 64px; object-fit: contain; margin: 0; transition: transform .4s var(--ease); }
    .benefit:hover .benefit__plinth img { transform: scale(1.06); }
    .benefit h4 { transition: color .25s var(--ease); }
    .benefit:hover h4 { color: var(--c-teal); }

    /* ---- TECH section — subtle animated halo ---- */
    .tech { overflow: hidden; }
    .tech::before {
      content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: 600px; height: 600px; border-radius: 999px;
      background: radial-gradient(closest-side, rgba(0,137,150,.22), transparent 70%);
      filter: blur(20px); animation: heroGlowPulse 8s ease-in-out infinite;
      pointer-events: none;
    }
    .tech__inner { position: relative; z-index: 1; }
    .tech__chips span { transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
    .tech__chips span:hover { background: var(--c-teal); border-color: var(--c-teal); color: #fff; transform: translateY(-2px); }

    /* ---- VERSIONS — bigger swatch with subtle pulse ---- */
    .versions__swatch {
      width: 160px; height: 160px;
      box-shadow: 0 18px 40px rgba(22,27,28,.10);
      transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
    }
    /* ---- INTRO BADGE: bigger, more presence ---- */
    .intro__badge { padding: 10px 16px; font-size: 11px; letter-spacing: 0.24em; }

    /* ---- CLIENT CELLS — punchier hover ---- */
    .clients-car__cell { position: relative; overflow: hidden; cursor: default; }
    .clients-car__cell::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(closest-side, rgba(0,137,150,.10), transparent 70%);
      opacity: 0; transition: opacity .4s var(--ease);
    }
    .clients-car__cell:hover { transform: translateY(-3px) scale(1.04); border-color: var(--c-teal); box-shadow: 0 16px 32px rgba(0,137,150,.18); }
    .clients-car__cell:hover::before { opacity: 1; }

    /* ---- CTA buttons — micro-bounce ---- */
    .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,137,150,.35); }
    .btn--ghost:hover { transform: translateY(-2px); }

    /* ---- Responsive tweaks for new bits ---- */
    @media (max-width: 1024px) {
      .clients__header, .prod-overview__head { text-align: center; }
      .clients__head-row, .prod-overview__head-row { justify-content: center; }
      .clients__divider, .prod-overview__divider { display: none; }
    }
    @media (max-width: 720px) {
      .benefit__plinth { width: 96px; height: 96px; }
      .benefit__plinth img { width: 56px; height: 56px; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
      [data-anim] { opacity: 1; transform: none; }
    }

/* Fallback: si el JS aún no corre, el contenido es visible */
html:not(.js-anim) [data-anim] { opacity: 1; transform: none; }

/* Productos grid — 4 líneas: 4 en desktop, 2 tablet, 1 móvil */
@media (max-width: 720px) { .prod-overview__grid { grid-template-columns: 1fr; max-width: 480px; } }

/* Tecnologías BASIS */
.tech__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 48px; }
.tech__item { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tech__item img { height: 44px; object-fit: contain; }
.tech__item p { color: rgba(255,255,255,.85); font-weight: 300; font-size: 17px; line-height: 1.65; max-width: 320px; margin: 0 auto; }
@media (max-width: 1024px) { .tech__grid { grid-template-columns: 1fr; gap: 40px; } }

/* SKU grid de 3 (BASIS) */
.sku-grid__list--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .sku-grid__list--3 { grid-template-columns: 1fr; } }

/* BASIS SKUs — imagen un poco más pequeña */
.sku-grid__list--3 .sku__img img { max-height: 260px; width: auto; margin: 0 auto; }

/* Beneficios portafolio */
.pf-benefits { padding: 120px 32px; }
.pfb { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: stretch; }
.pfb__tabs { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.pfb__tab { appearance: none; display: flex; align-items: baseline; gap: 16px; position: relative; background: none; border: 1px solid transparent; border-radius: 8px; text-align: left; padding: 18px 48px 18px 20px; font-family: inherit; font-size: 17px; font-weight: 500; color: #6A6A6A; cursor: pointer; transition: color .22s, background-color .22s, border-color .22s, box-shadow .22s, transform .22s; }
.pfb__num { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #A8ADAE; transition: color .22s; }
.pfb__tab::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #C4C8C9; border-right: 2px solid #C4C8C9; transform: translateY(-50%) rotate(45deg); transition: border-color .22s, right .22s; }
.pfb__tab:hover { color: var(--c-dark); background: rgba(255,255,255,.7); transform: translateX(2px); }
.pfb__tab:hover::after { border-color: var(--c-teal); right: 16px; }
.pfb__tab.is-active { color: var(--c-dark); background: var(--c-white); border-color: #D9D9D6; box-shadow: 0 10px 26px rgba(22,27,28,.07); }
.pfb__tab.is-active .pfb__num { color: var(--c-teal); }
.pfb__tab.is-active::after { border-color: var(--c-teal); }
.pfb__panels { position: relative; border-left: 1px solid #D9D9D6; padding-left: 56px; }
.pfb__panel { display: none; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
.pfb__panel.is-active { display: grid; animation: pfbFade .35s var(--ease, ease) both; }
@keyframes pfbFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pfb__item { position: relative; padding: 18px 20px 20px; border: 1px solid transparent; border-bottom: 1px solid #E4E4E1; border-radius: 8px; transition: background-color .25s var(--ease, ease), box-shadow .25s, transform .25s, border-color .25s; }
.pfb__item::after { content: ""; position: absolute; left: 20px; bottom: -1px; height: 2px; width: 0; background: var(--c-teal); transition: width .3s var(--ease, ease); }
.pfb__item:hover { background: var(--c-white); border-color: #E4E4E1; box-shadow: 0 12px 28px rgba(22,27,28,.08); transform: translateY(-3px); }
.pfb__item:hover::after { width: calc(100% - 40px); }
.pfb__item h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-teal); transition: color .25s; }
.pfb__item:hover h4 { color: var(--c-teal-deep); }
.pfb__item p { margin: 0; font-size: 15px; line-height: 1.55; color: #4A4F50; }
.pfb__foot { margin: 40px auto 0; max-width: 760px; text-align: center; font-size: 15px; line-height: 1.6; color: #6A6A6A; }
.pfb__foot strong { color: var(--c-dark); font-weight: 600; }
@media (max-width: 1024px) { .pfb { grid-template-columns: 1fr; gap: 32px; } .pfb__tabs { flex-direction: row; flex-wrap: wrap; gap: 8px; } .pfb__tab { padding: 12px 40px 12px 16px; font-size: 14px; } .pfb__panels { border-left: none; padding-left: 0; } }
@media (max-width: 720px) { .pf-benefits { padding: 80px 20px; } .pfb__panel { grid-template-columns: 1fr; } }

/* Manifiesto */
.manifesto__inner { max-width: 1100px; text-align: left; }
.manifesto__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; margin-top: 32px; }
.manifesto__body { margin-top: 0; }
.manifesto__lines { margin-top: 0; font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; color: var(--c-dark); border-left: 1px solid var(--c-teal); padding-left: 40px; }
@media (max-width: 900px) { .manifesto__cols { grid-template-columns: 1fr; gap: 40px; } .manifesto__lines { padding-left: 24px; } }
.manifesto__lines em { color: var(--c-teal); font-style: normal; font-weight: 500; }

/* Aplicación en obra */
.building__head { text-align: center; margin-bottom: 48px; }
.building__slot { max-width: 1100px; margin: 0 auto; position: relative; }

/* Grid de videos de aplicación */
.vidgrid__inner { max-width: 1280px; margin: 0 auto; }
.vidgrid .video__head { text-align: center; margin-bottom: 48px; }
.vidgrid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.vidgrid__card { display: flex; flex-direction: column; gap: 14px; }
.vidgrid__frame { border-radius: 12px; overflow: hidden; background: #0d1112; aspect-ratio: 16/9; border: 1px solid rgba(255,255,255,.08); }
.vidgrid__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vidgrid__title { font-weight: 500; font-size: 17px; color: rgba(255,255,255,.9); letter-spacing: .01em; }
@media (max-width: 1024px) { .vidgrid__grid { grid-template-columns: 1fr; } }

/* Resultados de pruebas de campo */
.field-results { margin-top: 80px; padding-top: 64px; border-top: 1px solid var(--c-gray-200); }
.field-results__head { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.field-results__title { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; margin: 0 0 16px; color: var(--c-dark); }
.field-results__title em { font-style: italic; color: var(--c-teal); font-weight: 700; }
.field-results__desc { font-size: 16px; line-height: 1.7; color: var(--c-gray-500); }
.field-results__desc strong { color: var(--c-dark); font-weight: 600; }