.cs { position: relative; background: var(--bg); padding: var(--reserva) var(--m) clamp(40px, 9vw, 72px); display: flex; flex-direction: column; gap: clamp(24px, 6vw, 40px); }
.cs__t { position: relative; z-index: 5; }
.cs__t h1 { color: var(--ink); text-wrap: initial; font-size: min(var(--t1), 11.2vw); }
.cs__t h1 .mask { display: block; white-space: nowrap; padding-block: .16em; margin-block: -.16em; }
.cs__baj { margin: 12px 0 0; color: var(--text); }
.cs__r { position: relative; z-index: 6; display: grid; gap: 18px; }
.cs__txt { margin: 0; color: var(--text); text-wrap: pretty; }
.cs__acc { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.cs__pausa { color: var(--text); font-size: var(--t5); font-weight: 500; line-height: 1.4; }
.cs__pausa[hidden] { display: none; }

.cs .button--line { color: var(--brand); border-color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .cs .button--line:hover { background: var(--brand); color: #fff; } }

.casc__cinta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.casc__it { width: min(calc(100% - 12vw), 720px); align-self: center; translate: -6vw 0; }
.casc__it:nth-child(even) { translate: 6vw 0; }
.pieza { display: flex; flex-direction: column; width: 100%; border-radius: 4px; overflow: hidden; overflow: clip; background: #00335F; color: #fff; text-decoration: none; transition: transform 320ms var(--ease-out); -webkit-user-drag: none; user-select: none; }
.pieza:focus-visible, .casc__it.is-foco .pieza { outline: 2px solid var(--ink); outline-offset: 4px; }
.pieza img { -webkit-user-drag: none; user-select: none; }
.pieza__video { position: relative; flex: none; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; overflow: clip; background: #00335F; }
.pieza__video img, .pieza__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pieza__panel { position: relative; flex: none; width: 100%; min-height: 64px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #00335F; }

.pieza__cota { position: relative; order: 2; flex: none; width: 30px; height: 30px; pointer-events: none; }
.pieza__ln { position: absolute; left: 19%; top: 81%; width: 87.68%; height: 2px; margin-top: -1px; background: var(--c); transform-origin: 0 50%; transform: rotate(-45deg) scaleX(1); transition: transform 1100ms var(--ease-out); }
.pieza__tk { position: absolute; width: 8px; height: 2px; margin: -1px 0 0 -4px; background: var(--c); rotate: 45deg; transition: opacity 200ms linear, scale 240ms var(--ease-out); }
.pieza__tk--a { left: 19%; top: 81%; }
.pieza__tk--b { left: 81%; top: 19%; transition-delay: 900ms; }
@media (prefers-reduced-motion: no-preference) {
  .js .casc__it:not(.is-in) .pieza__ln { transform: rotate(-45deg) scaleX(0); }
  .js .casc__it:not(.is-in) .pieza__tk { opacity: 0; scale: .2; transition-delay: 0ms; }
}

.pieza__lab { position: relative; z-index: 2; order: 1; flex: 0 1 36%; display: grid; place-items: center start; padding: 0; background: #00335F; transition: opacity 220ms var(--ease-out); }
.pieza__logo { display: block; width: min(calc(100% * var(--lwn, .55) / .5), 100px); height: auto; }
.pieza__info { position: static; order: 3; flex: 1 1 0; display: grid; justify-items: end; gap: 2px; padding: 0; background: #00335F; text-align: right; }
.pieza__n { font-size: 16px; font-weight: 500; line-height: 1.25; text-wrap: balance; }
.pieza__ver { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pieza__ver svg { width: 14px; height: 14px; flex: none; }
.casc__it--sl .pieza__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes cs-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .pieza__video--foto img { animation: cs-zoom 18s ease-in-out infinite alternate; }
  .cs.is-pausada .pieza__video--foto img { animation-play-state: paused; }
}
@keyframes cs-entra { from { opacity: .35; translate: 56px -30px; } to { opacity: 1; translate: 0 0; } }

html.una-pantalla, html.una-pantalla body { height: 100svh; overflow: hidden; }
.cs.is-viva {
  --pw: 220px;
  --ph: calc(var(--pw) * 9 / 16);
  --W: calc(var(--pw) + var(--ph));
  --tt: min(var(--t1), 5.6vw, 13svh);
  display: block; padding: 0; height: 100svh; overflow: hidden; overflow: clip;
}
.cs.is-viva .cs__t { position: absolute; left: var(--m); top: var(--reserva); }
.cs.is-viva .cs__t h1 { font-size: var(--tt); }
.cs.is-viva .cs__baj { margin-top: 14px; white-space: nowrap; }

@media (max-width: 1199px) { .cs.is-viva .cs__baj { white-space: normal; max-width: 21em; } }
.cs.is-viva .casc { position: absolute; inset: 0; z-index: 2; overflow: hidden; overflow: clip; touch-action: none; user-select: none; }
.cs.is-viva .casc__cinta { position: absolute; inset: 0; display: block; }

.cs.is-viva .casc__it { position: absolute; left: 0; top: 0; width: calc(var(--W) + 40px); padding: 20px; box-sizing: border-box; translate: none; align-self: auto; contain: layout paint style; will-change: transform; pointer-events: none; z-index: 10; }
.cs.is-viva .casc__it:nth-child(even) { translate: none; }
.cs.is-viva .casc__it.is-activa { z-index: 99999 !important; }
.cs.is-viva .pieza { flex-direction: row; pointer-events: auto; }
.cs.is-viva .pieza__video { width: var(--pw); }
.cs.is-viva .pieza__panel { width: var(--ph); height: var(--ph); min-height: 0; padding: 0; display: grid; place-items: center; container-type: size; }
.cs.is-viva .pieza__cota { position: absolute; inset: 0; width: auto; height: auto; order: 0; }
.cs.is-viva .pieza__ln { height: 2px; }
.cs.is-viva .pieza__tk { width: 14px; margin: -1px 0 0 -7px; }
.cs.is-viva .pieza__lab { order: 0; flex: none; padding: 8px 10px; place-items: center; }
.cs.is-viva .pieza__logo { width: min(calc(var(--ph) * var(--lwn, .55) * 1.2), 140px); }
.cs.is-viva .pieza__info { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; order: 0; flex: none; width: max-content; max-width: 92%; justify-items: center; padding: 9px 10px; text-align: center; gap: 6px; opacity: 0; transition: opacity 220ms var(--ease-out); }
.cs.is-viva .pieza__n { font-size: clamp(13px, calc(var(--ph) * .09), var(--t4)); }
.cs.is-viva .casc__it--sl .pieza__n { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
.cs.is-viva .pieza__ver { font-size: clamp(13px, calc(var(--ph) * .078), var(--t5)); gap: 6px; }
.cs.is-viva .pieza__ver svg { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease-out); }

@container (max-width: 150px) { .pieza__ver { font-size: 0; gap: 0; } .pieza__ver svg { width: 16px; height: 16px; } }

.cs.is-viva .casc__it.is-activa .pieza { transform: translateY(-8px) scale(1.03); }
.cs.is-viva .casc__it.is-activa .pieza__lab { opacity: 0; }
.cs.is-viva .casc__it.is-activa .pieza__info { opacity: 1; }
.cs.is-viva .casc__it.is-activa .pieza__ver svg { transform: translateX(4px); }

.cs.is-viva .casc__it.lab-off .pieza__lab, .cs.is-viva .casc__it.lab-off .pieza__info { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cs.is-viva .pieza { animation: cs-entra 760ms var(--ease-out) backwards; animation-delay: calc(var(--k) * 70ms); }
}

.cs.is-viva .cs__r { position: absolute; right: 40px; bottom: 40px; width: clamp(340px, 38vw, 480px); gap: 16px; }
.cs.is-viva .cs__acc { flex-wrap: nowrap; gap: 12px 24px; }
.cs.is-viva .cs__r .button--line { padding: 0 20px; }

@media (prefers-reduced-motion: reduce) {
  .pieza, .pieza__lab, .pieza__info, .pieza__ln, .pieza__tk { transition: none; }
}