.hero__scrim { background: linear-gradient(180deg, rgba(0,51,95,.3) 0%, rgba(0,51,95,.1) 34%, rgba(0,51,95,0) 52%, rgba(0,51,95,.7) 74%, rgba(0,51,95,.9) 88%, #00335F 92%, #00335F 100%);  }
.hero__scrim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, rgba(0,51,95,.62) 0%, rgba(0,51,95,0) 100%);  }
.hero__top p { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.45; color: var(--on-chapter); max-width: 56ch; }
.hero__top .hero__l2 { display: block; margin-top: 6px; color: var(--on-chapter-2); }

.como__pin { padding: 0 var(--m); }
.como__step { margin: 0; }
.como__verb { color: var(--ink); }
.como__body { margin-top: 24px; max-width: calc((100vw - 2 * var(--m) - 11 * var(--gap)) / 3 + 3 * var(--gap)); }
.como__body p + p { margin-top: 16px; }
.como__pie { color: var(--text); }
.como__mob, .como__slot { display: none; }

.como__frase { margin: 0 0 22px; font-size: clamp(19px, 1.7vw, 25px); font-weight: 500; line-height: 1.32; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .como__step.is-on .como__frase .l { animation: frase-in 560ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 120ms); }
}
@keyframes frase-in { from { opacity: .35; } to { opacity: 1; } }
.como__media { position: absolute; top: calc(var(--nav-h) + 3vh + var(--t1) * .95 + 28px); bottom: 9vh; right: 0; left: calc(var(--m) + (100% - 2 * var(--m) - 11 * var(--gap)) / 3 + 4 * var(--gap)); }
.como__m { position: absolute; inset: 0; }

@media (min-width: 821px) {
  .js .chapter .pin-wrap[data-pin="pasos"] .como__media .como__m[data-paso="0"] { transition: visibility 0s linear 0s; }
  .js .is-swap.chapter .pin-wrap[data-pin="pasos"] .como__media .como__m[data-paso="0"] { transition: visibility 0s linear 0s; }
  .js .is-swap.chapter .pin-wrap[data-pin="pasos"] .como__media .como__m[data-paso="0"].is-on { transition: visibility 0s linear 560ms; }
}
.como__photo { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.como__photo img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; background: var(--chapter); transform: scale(1.04); transition: transform 7s var(--ease-soft); }
.como__photo.is-on img { transform: scale(1); }
.como__photo--v img { object-fit: cover; object-position: 50% 70%; }
.como__photo figcaption { margin: 0; flex: none; }
@media (min-width: 821px) {
  .js .como__step { position: absolute; top: calc(var(--nav-h) + 3vh); left: var(--m); right: var(--m); }
}

.plano__lines .plano__ghost { opacity: .42; }
.plano__lines img { opacity: 1; }
.js .plano.is-scrub .plano__case.is-on .plano__lines img:not(.plano__ghost) { clip-path: inset(0 calc((1 - (.34 + var(--trazo) * .66)) * 100%) 0 0); }
.js .plano.is-scrub .plano__case.is-on .plano__lines::after { transform: translateX(calc((.34 + var(--trazo) * .66) * 100cqw)); }

.marcas { padding-block: calc(var(--pausa) * .7); }
.marcas__cinta { margin: clamp(48px, 6vw, 88px) calc(-1 * var(--m)) 0; }
.marcas .cinta--logos { padding: 20px var(--g) 20px 0; }
.marcas .cinta--logos.cinta--b { margin-top: clamp(8px, 1.5vw, 24px); }
.marcas .cinta--logos img { opacity: .9; transition: opacity var(--t-hover) linear; }
@media (hover: hover) and (pointer: fine) { .marcas .cinta--logos figure:hover img { opacity: 1; } }
.marcas__pausa { margin-top: 18px; font-size: var(--t5); font-weight: 500; }
@media (max-width: 820px) { .marcas__cinta { margin-top: 36px; } }

.planta .scrim { background: linear-gradient(180deg, #00335F 0%, rgba(0,51,95,.74) 16%, rgba(0,51,95,.64) 55%, rgba(0,51,95,.9) 88%, #00335F 100%);  }

.reel { padding: var(--pausa) 0 calc(var(--pausa) * .8); }
.reel__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding: 0 var(--m); }
.reel__head .t2 { grid-column: 1 / 8; }
.reel__sub { grid-column: 8 / 13; max-width: 46ch; color: var(--text); margin: 0; }
.reel__ctl { justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: clamp(28px, 4vw, 56px); }
@media (max-width: 820px) {
  .reel { padding-top: calc(var(--pausa) * .8); }
  .reel__head { display: block; }
  .reel__sub { margin-top: 18px; }
  .reel__ctl { flex-wrap: wrap; padding-top: 24px; }
}

.hace { --cortina-r: clamp(28px, 4vw, 56px); padding: calc(var(--pausa) * .25) 0 calc(var(--pausa) * .5); background: var(--bg); }
.hace__t { padding: 0 var(--m); margin-bottom: clamp(32px, 4vw, 56px); }
.paneles { position: relative; }
.panel { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; isolation: isolate; border-radius: var(--cortina-r) var(--cortina-r) 0 0; background: var(--chapter); color: var(--on-chapter); }
.panel__in { position: relative; height: 100%; overflow: hidden; transform-origin: 50% 0; transform: scale(calc(1 - .035 * var(--q, 0))); }
.panel__in::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--chapter); opacity: calc(.3 * var(--q, 0)); }
.panel__media { position: absolute; inset: 0; z-index: 0; }
.panel__media img, .panel__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,51,95,.7) 0%, rgba(0,51,95,.55) 40%, rgba(0,51,95,0) 72%);  }
.panel__texto { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(32px, 7vh, 72px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.panel__nombre { margin: 0; color: var(--on-chapter); line-height: 1.05; }
.panel__detalle { margin: 0; max-width: 46ch; color: var(--on-chapter); text-wrap: pretty; }
.panel__ver { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid #fff; color: var(--on-chapter); font-weight: 500; text-decoration: none; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); }
.panel__ver svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .panel__ver:hover { background: #fff; color: var(--brand); } .panel__ver:hover svg { transform: translateX(5px); } }
.panel__ver:focus-visible, .panel__pausa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel__pausa { position: absolute; z-index: 5; right: var(--m); bottom: clamp(16px, 3vh, 32px); min-height: 44px; padding: 0 18px; border: 0; background: var(--chapter); color: var(--on-chapter); font: inherit; font-size: var(--t5); font-weight: 500; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .panel__pausa:hover { background: var(--brand); } }
@media (prefers-reduced-motion: reduce) {
  .panel { position: relative; top: auto; }
  .panel__in { transform: none; }
  .panel__in::after { display: none; }
}
@media (max-width: 820px) {
  .hace { padding-top: calc(var(--pausa) * .3); }
  .panel { position: relative; top: auto; height: 70svh; min-height: 420px; }
  .panel + .panel { margin-top: calc(-1 * var(--cortina-r)); }
  .panel__in { transform: none; }
  .panel__in::after { display: none; }
  .panel__media video, .panel__pausa { display: none; }
  .panel__scrim { background: linear-gradient(180deg, rgba(0,51,95,0) 0%, rgba(0,51,95,.55) 45%, rgba(0,51,95,.85) 100%);  }
  .panel__texto { bottom: calc(var(--cortina-r) + 28px); }
  .panel__nombre { font-size: var(--t2); }
}

@media (max-width: 820px) {

  .hero__media img, .hero__media video { object-position: 38% 50%; transform: scale(1.12); }
  .hero__scrim { background: linear-gradient(180deg, rgba(0,51,95,.4) 0%, rgba(0,51,95,.12) 30%, rgba(0,51,95,.2) 52%, rgba(0,51,95,.86) 80%, #00335F 92%, #00335F 100%);  }

  .hero__actions { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero__actions .button--accent { flex: 0 0 auto; }
  .hero__actions .hero__link { flex: 0 0 auto; background: none; color: var(--on-chapter); padding: 0; min-height: 44px; }

  .como__pin { padding: 0 var(--m) var(--pausa); }
  .como__step { padding-top: 96px; }
  .como__body { margin-top: 22px; max-width: none; }
  .como__mob { display: block; margin: 0 calc(-1 * var(--m)) 24px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--chapter); }
  .como__mob img { width: 100%; height: 100%; object-fit: cover; }
  .como__step[data-paso="2"] .como__mob { aspect-ratio: 3 / 4; }
  .como__slot { display: block; margin: 0 calc(-1 * var(--m)) 24px; }
  .como__slot .plano { display: flex; flex-direction: column; height: auto; row-gap: 12px; }
  .como__slot .plano__nav { order: -1; padding: 0 var(--m); }
  .como__slot .plano__hint { order: -1; flex: 0 0 100%; margin: 0 0 4px; }
  .como__slot .plano__stage { height: calc(100vw + 44px); }
  .como__slot .plano__tag { left: var(--m); right: var(--m); }
  .como__media { display: none; }
}

@media (min-width: 821px) {
  .como__verb { font-size: var(--t2); line-height: 1; }
  .como__media { top: calc(var(--nav-h) + 3vh); bottom: 6vh; left: calc(var(--m) + (100% - 2 * var(--m) - 11 * var(--gap)) / 3 + 4 * var(--gap)); }
  .como__body { margin-top: 28px; }
  .como__frase { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.3; margin-bottom: 26px; }
  .como__body p:not(.como__frase) { font-size: var(--t5); line-height: 1.55; }
  .como__body p:not(.como__frase) + p { margin-top: 14px; }
  .como__photo figcaption { font-size: var(--t5); }
  .plano__hint-m { display: none; }
}
@media (max-width: 820px) { .plano__hint-d { display: none; } }

.js .planta .pin-wrap { --pin-alto: 220svh; height: 220svh; }
.js .planta .planta__t[data-paso="0"] { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .reel__view { --cw: min(calc(100vw - var(--m) - var(--gap) - 28px), 540px); }
  .reel__cap { font-size: var(--t5); }
}

.hero__scrim { background: linear-gradient(180deg, rgba(0,51,95,.6) 0%, rgba(0,51,95,.52) 30%, rgba(0,51,95,.3) 48%, rgba(0,51,95,0) 60%, rgba(0,51,95,.7) 76%, rgba(0,51,95,.9) 88%, #00335F 92%, #00335F 100%);  }
.hero__top .hero__l2 { color: var(--on-chapter); opacity: 1; }
@media (max-width: 820px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(0,51,95,.62) 0%, rgba(0,51,95,.5) 34%, rgba(0,51,95,.32) 52%, rgba(0,51,95,.86) 80%, #00335F 92%, #00335F 100%);  }
}

@media (max-width: 820px) { .js .planta .pin-wrap { height: auto; } }

.reel { padding-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 821px) { .hace { padding-top: calc(var(--pausa) * .25); } }

.hero__top { position: relative; }
.hero__film { --d: clamp(64px, 6.6vw, 104px); position: relative; display: inline-flex; align-items: center; gap: clamp(16px, 1.5vw, 24px); margin: 4px 0 0; padding: 10px clamp(28px, 2.6vw, 40px) 10px 10px; border: 0; border-radius: 999px; background: #00335F; color: #F4F7FB; font: inherit; text-align: left; cursor: pointer; transition: background-color 300ms ease, border-color 300ms ease; }
.hero__film-disco { position: relative; flex: none; display: grid; place-items: center; width: var(--d); height: var(--d); border-radius: 50%; background: var(--accent); color: var(--accent-ink); transition: scale 500ms var(--ease-out); }
.hero__film-disco svg { width: 36%; height: 36%; fill: currentColor; margin-left: 6%; }
.hero__film-disco::before, .hero__film-disco::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.hero__film-txt { display: flex; flex-direction: column; gap: 4px; }
.hero__film-t { font-size: var(--t3); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.hero__film-d { font-size: var(--t5); font-weight: 500; line-height: 1.3; color: var(--on-chapter-2); font-variant-numeric: tabular-nums; }
.hero__film:hover, .hero__film:focus-visible { background: #0A4170; }
.hero__film:hover .hero__film-disco, .hero__film:focus-visible .hero__film-disco { scale: 1.08; }
.hero__film:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__film-disco::before { animation: hero-onda 2.6s var(--ease-out) 1.4s infinite; }
  .hero__film-disco::after { animation: hero-onda 2.6s var(--ease-out) 2.7s infinite; }
}
@keyframes hero-onda { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
@media (min-width: 1100px) {
  .hero__film { position: absolute; right: 0; top: 50%; translate: 0 -50%; margin: 0; }
}