

.hero--masivo .hero__top p { color: var(--on-chapter); max-width: 46ch; }

.hero--masivo .mask { padding-block: .2em; margin-block: -.2em; }

.momento__in {
  --g: 6px;
  --ch0: calc((100svh - var(--nav-h) - 80px - 9 * var(--g)) / 10);
  --ar: .4852;
  --cwtope: calc((100vw - 2 * var(--m) - 96px - 340px - 48px - 9 * var(--g)) / 10);
  --cw: max(13px, min(calc(var(--ch0) * var(--ar)), var(--cwtope)));
  --ch: calc(var(--cw) / var(--ar));
  --ox: calc(4 * (var(--cw) + var(--g)) + var(--cw) / 2);
  --pp: var(--p, 1);
  --dd: clamp(0, calc(var(--pp) / .18), 1);
  --sc: clamp(0, calc((var(--pp) - .18) / .12), 1);
  --S: calc(8 - 7 * var(--sc));
  --s1: clamp(0, calc((var(--pp) - .32) / .08), 1);
  --s2: clamp(0, calc((var(--pp) - .5) / .1), 1);
  --s3: clamp(0, calc((var(--pp) - .7) / .1), 1);
  --n: calc(1 + 9 * var(--s1) + 40 * var(--s2) + 50 * var(--s3));
  --qa: clamp(0, calc((var(--pp) - .36) / .06), 1);
  --qb: clamp(0, calc((var(--pp) - .56) / .08), 1);
  --qc: clamp(0, calc((var(--pp) - .76) / .08), 1);
  --s5: clamp(0, calc((var(--pp) - .9) / .06), 1);
  box-sizing: border-box; height: 100%; min-height: 100svh; padding: calc(var(--nav-h) + 28px) var(--m) 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 3vw, 48px); align-items: stretch; align-content: center;
}
.momento__txt { display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
.momento__txt .t2 { color: var(--on-chapter); }
.momento__p { max-width: 40ch; color: var(--on-chapter-2); }
.mcierre { margin-top: auto; display: flex; flex-direction: column; gap: 14px; max-width: 34ch; opacity: var(--s5); transform: translateY(calc((1 - var(--s5)) * 16px)); }
.mcierre .t4 { color: var(--on-chapter-2); }

.mfin { display: flex; gap: 10px; }
.mfin i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--c0); transform: scale(calc(1 + .9 * clamp(0, calc(1 - max(var(--pp) - var(--c1), var(--c1) - var(--pp)) * 18), 1))); }
.mfin i:nth-child(1) { --c0: var(--cian); --c1: .92; }
.mfin i:nth-child(2) { --c0: var(--magenta); --c1: .945; }
.mfin i:nth-child(3) { --c0: var(--amarillo); --c1: .97; }

.mstage { position: relative; align-self: center; overflow: clip; height: calc(10 * var(--ch) + 9 * var(--g)); }
.msolo { display: none; margin: 0; }
.mgrid-w { position: relative; margin-right: 96px; width: calc(10 * var(--cw) + 9 * var(--g)); }
.mgrid { display: grid; grid-template-columns: repeat(10, var(--cw)); gap: var(--g); transform: scale(var(--S)); transform-origin: var(--ox) 0; }

.mdef { position: absolute; width: 0; height: 0; overflow: hidden; }
.mp { --dq: var(--dd, 1); display: block; width: var(--cw); height: var(--ch); overflow: visible; }
.mp--solo path { --q: clamp(0, calc((var(--dq) - var(--i) * .035) / .4), 1); fill: none; stroke: #F4F7FB; stroke-opacity: .7; stroke-width: calc(1.5 * var(--k, 6) / var(--S, 1)); stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--q)); }
.mp--solo path.mp__s { stroke: #00335F; stroke-opacity: 1; stroke-width: calc(.9 * var(--k, 6) / var(--S, 1)); }

.mp--solo path.mp__c, .mp--solo path.mp__m, .mp--solo path.mp__y, .mp--solo path.mp__w { --pu: clamp(0, calc(1 - max(var(--dq) - .965, .965 - var(--dq)) * 28), 1); stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: calc(.9 * var(--pu)); stroke-width: calc(7 * var(--pu) * var(--k, 6) / var(--S, 1)); opacity: clamp(0, calc((var(--dq) - .92) / .08), 1); }
.mp--solo path.mp__c { fill: #2D82C9; stroke: #2D82C9; }
.mp--solo path.mp__m { fill: #D33481; stroke: #D33481; }
.mp--solo path.mp__y { fill: #FAD32C; stroke: #FAD32C; }
.mp--solo path.mp__w { fill: #FFFFFF; fill-opacity: .25; stroke: #FFFFFF; }
.mgrid i { --o: clamp(0, calc(var(--n) - var(--r)), 1); display: block; height: var(--ch); opacity: var(--o); transform: scale(calc(.8 + .2 * var(--o))); }

.mcota { position: absolute; left: calc(100% + 8px); top: 0; width: 88px; height: 100%; pointer-events: none; }
.mcota__s { position: absolute; top: 0; width: 80px; }
.mcota__s--10 { left: 28px; height: var(--ch); --q: var(--qa); --ly: 50%; }
.mcota__s--50 { left: 14px; height: calc(5 * var(--ch) + 4 * var(--g)); --q: var(--qb); --ly: 50%; }
.mcota__s--100 { left: 0; height: 100%; --q: var(--qc); --ly: 78%; }
.mcota__s .cota__l { left: 0; top: 0; width: 2px; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--q)); }
.mcota__s .cota__t { left: -6px; width: 14px; height: 2px; opacity: clamp(0, calc(var(--q) * 40), 1); }
.mcota__s .cota__t--a { top: 0; }
.mcota__s .cota__t--b { bottom: 0; }
.mcota__s .cota { left: 0; top: var(--ly); font-size: var(--t4); font-weight: 500; color: var(--on-chapter); opacity: clamp(0, calc(var(--q) * 2 - 1), 1); }

@media (prefers-reduced-motion: reduce) {
  .momento__in { --pp: 1; }
  .mfin i { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 821px) {
  .js .momento .pin-wrap { height: auto; }
  .js .momento .pin { position: relative; height: auto; min-height: 100svh; }
}

@media (max-width: 820px) {
  .momento__in {
    --g: 4px;
    --cw: calc((100vw - 2 * var(--m) - 86px - 9 * var(--g)) / 10);
    --ch: calc(var(--cw) / var(--ar));
    --S: 1; --pp: calc(.2 + .78 * var(--mp, 1)); --dd: 1;
    display: flex; flex-direction: column; min-height: 0; height: auto; padding: calc(var(--pausa) / 2 + var(--nav-h) / 2) var(--m) calc(var(--pausa) / 2);
  }
  .momento__txt { display: contents; }
  .momento__txt .t2 { order: 1; margin-top: 0; }
  .momento__p { order: 2; margin-top: 20px; }
  .mstage { order: 3; margin-top: 8px; align-self: stretch; height: auto; }
  .mcierre { order: 4; margin-top: 56px; max-width: none; }
  .msolo { display: block; margin-top: 40px; }
  .msolo .mp { --dq: var(--md, 1); --k: var(--ks, 6); width: min(62%, 240px); height: auto; aspect-ratio: 262 / 540; }
  .mgrid-w { margin: 56px 86px 0 0; }
  .mgrid { transform: none; }
  .mgrid .mp { --dq: 1; }
  .mcota { left: calc(100% + 10px); width: 76px; }
  .mcota__s--10 { left: 24px; } .mcota__s--50 { left: 12px; }
  .mcota__s .cota { font-size: var(--t5); }
}

.serie { --sh: min(66svh, 640px); }
.serie__t { margin: 0 0 clamp(40px, 4.5vw, 64px); }
.serie__rail { display: flex; gap: clamp(16px, 2vw, 28px); margin-inline: calc(-1 * var(--m)); padding: 0 var(--m) 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); scrollbar-width: thin; scrollbar-color: #004381 transparent; }
.serie__rail:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.serie__f { position: relative; flex: 0 0 min(calc((var(--sh) - 36px) * var(--r, .5625)), calc(100vw - 2 * var(--m))); height: var(--sh); margin: 0; scroll-snap-align: start; }
.serie__m { position: absolute; left: 0; top: 0; right: 0; bottom: 36px; overflow: hidden; background: var(--bg-2); }
.serie__m img { display: block; width: 100%; height: 100%; object-fit: cover; }
.serie__f--w .serie__m { top: auto; height: auto; aspect-ratio: var(--r); }
.serie__f--w .serie__m img { object-fit: cover; }
.serie__f figcaption { position: absolute; left: 0; bottom: 0; height: 28px; display: flex; align-items: flex-end; font-size: var(--t5); font-weight: 500; color: var(--ink); white-space: nowrap; }
.serie__nav { display: flex; gap: 12px; margin: 8px 0 0; }
.serie__nav button { width: 48px; height: 48px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color 180ms ease, color 180ms ease; }
.serie__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .serie__nav button:hover { background: var(--ink); color: #fff; } }
@media (max-width: 820px) { .serie { --sh: min(60svh, 520px); } }

main.cortinas > section#momento > .cortina__in { padding-top: 0; }

.mcifra { margin: 18px 0 0; display: flex; flex-direction: column; gap: 2px; color: var(--on-chapter); opacity: var(--qc, 1); transform: translateY(calc((1 - var(--qc, 1)) * 14px)); }
.mcifra__n { display: block; line-height: 1.05; }
.mcifra__t { color: var(--on-chapter-2); }
@media (max-width: 820px) { .mcifra { opacity: 1; transform: none; } }

.marcas-az { padding: clamp(56px, 7vw, 88px) var(--m) 0; overflow: visible; }
.marcas-az .marcas__cinta { margin: clamp(32px, 4vw, 56px) calc(-1 * var(--m)) 0; overflow: hidden; }
.marcas-az .cinta--logos { padding: 20px var(--g) 20px 0; }
.marcas-az .cinta--logos img { filter: none; opacity: .9; transition: opacity var(--t-hover) linear; }
.marcas-az .marcas__pausa { margin-top: 12px; font-size: var(--t5); font-weight: 500; }
