/* Compliance — hoja de página. Generada por build-webflow.py desde
   assets/design-studio/prototype/compliance.html. NO editar a mano:
   se regenera. El marcador del final existe porque Webflow deduplica
   assets por hash de contenido y devolvería el fichero viejo. */

/* ── armadura contra la cascada del sitio ──────────────────────────────────
   ultratug.webflow.shared.css declara reglas por selector de elemento que se
   aplican dentro del embed: p{letter-spacing:1px}, h1..h6{margin-top:20px;
   font-weight:700}, ul/ol{padding-left:40px}. :where() las neutraliza con
   especificidad 0, así que cualquier regla propia de más abajo sigue mandando. */
.cmp-root :where(p){letter-spacing:normal}
.cmp-root :where(h1,h2,h3,h4,h5,h6){margin-top:0;font-weight:inherit}
.cmp-root :where(ul,ol){padding-left:0;margin-bottom:0}
.cmp-root :where(figure,blockquote,dl,dd){margin:0}
.cmp-root :where(img,video){max-width:100%;display:block}

/* ── reveal del design system (solo esto; la hoja entera choca con el
   sitio: lleva reset * y clases .container/.footer-*/.btn-pill) ── */
.cmp-root /* Reveal base: fade + rise. data-reveal en el elemento; .is-in al entrar al viewport. */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.cmp-root [data-reveal].is-in { opacity: 1; transform: none; }
.cmp-root [data-reveal="fade"] { transform: none; }
.cmp-root [data-reveal="left"] { transform: translateX(-32px); }
.cmp-root [data-reveal="right"] { transform: translateX(32px); }
.cmp-root [data-reveal="scale"] { transform: scale(0.96); }
.cmp-root [data-reveal].is-in { transform: none; }
.cmp-root [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
.cmp-root [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.cmp-root [data-reveal], .cmp-root [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   COMPLIANCE — Ultratug · maquetado 1:1 del Figma v3 (nodo 4976:2911)
   Diseño: cT9O6tUlAhxHGuXwJOREe8 · 1440 × 12289
   Copy verbatim del diseño. Vanilla CSS, sin frameworks. Breakpoints 991/767/478.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reveal degradable: el DS oculta [data-reveal] de base; sin JS debe verse todo. */
.cmp-root:not(.js-on) [data-reveal],
.cmp-root:not(.js-on) [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }

/* ─── TIPOGRAFÍA DE MARCA REAL — Helvetica Neue LT Std ───
   Extraída del propio sitio del cliente (uploads del proyecto). Sustituye al
   stand-in Manrope/Inter que usaban las 4 páginas de Deploy 2. 4 pesos, 60 KB. */





:root {
  --cmp-navy-950: #000e1e;   /* fondo base                     */
  --cmp-navy-900: #001226;   /* tarjeta de principio           */
  --cmp-navy-870: #001830;   /* sección General Business Ppios */
  --cmp-navy-800: #002855;   /* tarjeta del Compliance Program */
  --cmp-navy-700: #03244b;   /* sección Crime Prevention Model */
  --cmp-cyan:     #019cde;
  --cmp-cyan-dim: #015478;
  --cmp-paper:    #e6eaee;
  --cmp-ink:      #001830;   /* texto sobre superficies claras */
  --cmp-ink-soft: #4a5565;

  --cmp-display: 'HNLT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cmp-body:    'Inter', 'HNLT', Helvetica, Arial, sans-serif;

  --cmp-max: 1280px;
  --cmp-pad: 64px;
}

.cmp { font-family: var(--cmp-body); background: var(--cmp-navy-950); }
.cmp-container { max-width: var(--cmp-max); margin: 0 auto; padding: 0 var(--cmp-pad); }
/* Titular sólo para lectores de pantalla: el diseño no lo dibuja, pero sin él
   las tarjetas del programa (h3) cuelgan del h1 y se salta un nivel. */
.cmp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cmp ::selection { background: var(--cmp-cyan); color: #fff; }

/* ─── TITULARES DISPLAY ───
   Patrón del diseño: palabra ancla a 118px con degradado cian→cian oscuro recortado
   al texto, y línea de apoyo a 51px en #e6eaee. Ambas HNLT 75 Bold, tracking 2.4px. */
.cmp-display { text-align: center; text-transform: uppercase; font-family: var(--cmp-display); font-weight: 700; letter-spacing: 2.4px; }
.cmp-display .lead {
  display: block; font-size: clamp(52px, 8.2vw, 118px); line-height: 1.02;
  background: linear-gradient(to bottom, var(--cmp-cyan) 65.886%, var(--cmp-cyan-dim) 82.058%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cmp-display .sub  { display: block; font-size: clamp(26px, 3.6vw, 51px); line-height: 1.1; color: var(--cmp-paper); margin-top: 6px; }
.cmp-display .note { display: block; font-size: clamp(18px, 2.2vw, 32px); line-height: 1.1; color: var(--cmp-paper); font-weight: 500; margin-top: 10px; }

/* Titulares ligados al scroll: parten 70px más abajo y a opacidad 0, y suben a su
   sitio conforme la sección entra. Sin JS quedan en su posición final. */
.cmp-root [data-rise] { will-change: transform, opacity; }
.cmp-root.js-on [data-rise] { opacity: 0; }
/* UT-36: la rueda del CPM además entra girada `data-spin` grados (negativo = antihorario)
   y se endereza conforme su centro llega a la mitad de la ventana. Gira sobre su centro. */
[data-spin] { transform-origin: 50% 50%; }

.cmp-lede { font-family: var(--cmp-body); font-weight: 300; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; letter-spacing: -0.02em; color: rgba(255,255,255,0.85); text-align: center; margin: 32px auto 0; max-width: 900px; }

/* ─── BOTÓN PASTILLA ─── */
.cmp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 16px 32px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--cmp-cyan); color: #fff;
  font-family: var(--cmp-display); font-weight: 500; font-size: 16px; letter-spacing: 0.8px; text-transform: uppercase;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .25s;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.55);
}
.cmp-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(0,0,0,.6); }
.cmp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cmp-btn img { width: 20px; height: 20px; }
/* El Figma dibuja este botón con borde y texto #001830 sobre fondo navy: queda
   ilegible. Se pasa a contorno claro. Divergencia anotada en el HANDOFF. */
.cmp-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); box-shadow: none; }
.cmp-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; box-shadow: none; }
.cmp-btn--ghost img { filter: brightness(0) invert(1); }
.cmp-btn-row { display: flex; justify-content: center; }

/* ─── TRAZOS DIBUJADOS A MANO (decorativos del diseño) ─── */
.cmp-doodle { position: absolute; pointer-events: none; opacity: .85; z-index: 3; }

/* ═══ 1 · NAVBAR — pastilla flotante, como en el diseño ═══ */
.cmp-nav { position: fixed; top: 20px; left: 0; right: 0; z-index: 200; display: flex; justify-content: center; padding: 0 24px; transition: top .3s ease; }
.cmp-nav-pill {
  width: min(1096px, 100%); height: 56px; background: #fff; border-radius: 999px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: box-shadow .3s ease;
}
.cmp-nav.scrolled .cmp-nav-pill { box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.cmp-nav-menu, .cmp-nav-cta { background: none; border: 0; cursor: pointer; font-family: var(--cmp-display); font-weight: 500; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cmp-ink); }
.cmp-nav-cta { justify-self: end; color: var(--cmp-ink); }
.cmp-nav-menu { justify-self: start; display: inline-flex; align-items: center; gap: 9px; }
.cmp-nav-menu .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.cmp-nav-menu .bars i { display: block; width: 15px; height: 1.5px; background: var(--cmp-ink); transition: transform .3s, opacity .3s; }
.cmp-nav-brand { justify-self: center; display: block; }
.cmp-nav-brand img { height: 22px; width: auto; }
.cmp-nav-cta:hover, .cmp-nav-menu:hover { color: var(--cmp-cyan); }
.cmp-nav-cta:hover .bars i, .cmp-nav-menu:hover .bars i { background: var(--cmp-cyan); }

/* Panel de menú (el sitio real lo abre lateral; aquí velo a pantalla completa) */
.cmp-menu { position: fixed; inset: 0; z-index: 190; background: rgba(0,14,30,.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.cmp-menu.open { opacity: 1; visibility: visible; backdrop-filter: blur(14px); }
.cmp-menu a { font-family: var(--cmp-display); font-weight: 500; font-size: clamp(22px, 3.4vw, 34px); letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.72); transition: color .2s; padding: 10px 22px; }
.cmp-menu a:hover, .cmp-menu a[aria-current="page"] { color: #fff; }
.cmp-menu a[aria-current="page"] { color: var(--cmp-cyan); }

/* ═══ 2 · HERO ═══ */
.cmp-hero { position: relative; height: 783px; max-height: 92vh; min-height: 560px; overflow: hidden; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }
.cmp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,14,30,.42) 0%, rgba(0,14,30,0) 34%, rgba(0,14,30,.30) 100%); }
/* Tarjeta traslúcida del hero (revisión de Andrés, 01-sep): el titular va dentro de la
   tarjeta azul de las demás páginas y a los 8 s sin interacción se retira hacia la
   izquierda dejando 69 px con la flecha. Es el mecanismo del custom code de la home
   (`__flD1Hero`), con su misma flecha (arrow_lateral.svg del sitio) y su misma curva.
   UT-35 (10-sep): «el texto es más grande y está más lejos del borde que en la home».
   Medido en la home y en la capa `[data-fl-hero-card]` del sitio a 1440×900: la tarjeta
   mide 686 px, arranca 18 px por fuera del borde izquierdo (`left:-18px`), el titular va
   a 38/44 px con 41 px de aire; a 393 mide 373 (10 px a cada lado) con el titular a 28 px
   y 85 px al borde inferior. Aquí estaba a 760 de ancho, 75 px del borde y 64 px de
   titular. Se copian esas medidas; el ancho es fijo (no max-width) porque lo es en el
   sitio, y por debajo de 716 px lo acota el viewport. */
.cmp-hero-card {
  position: absolute; z-index: 2; left: -18px; bottom: 82px; width: min(686px, calc(100vw - 30px));
  background: rgba(8,20,38,.34); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 28px;
  padding: 41px 86px 41px 41px;   /* los 86 de la derecha son el sitio de la pestaña (la home deja 86 al texto) */
  transition: transform .9s cubic-bezier(.16,1,.3,1); will-change: transform;
}
.cmp-hero-card.is-hidden { transform: translateX(calc(-100% + 69px)); cursor: pointer; }
.cmp-hero-title {
  margin: 0;
  font-family: var(--cmp-display); font-weight: 500; font-size: 38px; line-height: 44px; color: #fff;
  text-shadow: 0 2px 30px rgba(0,14,30,.55);
}
.cmp-hero-tab { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; }
/* UT-35: la flecha NO gira. En la home (`.image-12`) y en la capa del sitio
   (`[data-fl-hero-card] .fl-hero-arrow`) el chevron mira siempre a la derecha, abierta o
   retirada la tarjeta; aquí giraba 180° con la tarjeta abierta y era la única página en la
   que apuntaba «al lado equivocado» (medido en staging el 10-sep: matrix(-1,0,0,-1)). */
.cmp-hero-tab img { width: 21px; height: auto; display: block; }
.cmp-hero-tab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
/* Botón de bajada: cuadrado navy en el borde; al pasar el ratón despliega la etiqueta
   cian que en el Figma vive fuera del lienzo (left 1333 + 595 de ancho). */
.cmp-scroll { position: absolute; z-index: 4; right: 0; bottom: 22px; display: flex; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; }
.cmp-scroll-label {
  display: flex; align-items: center; justify-content: center; background: var(--cmp-cyan); color: #fff;
  height: 72px; width: 340px; padding: 24px 26px;
  font-family: var(--cmp-display); font-weight: 500; font-size: 15px; letter-spacing: .6px; white-space: nowrap;
  /* Se revela con clip-path (se compone en GPU) en vez de animar max-width/padding,
     que provocan recálculo de layout en cada fotograma. */
  clip-path: inset(0 0 0 100%); pointer-events: none;
  transition: clip-path .5s cubic-bezier(.16,1,.3,1);
  order: -1;
}
.cmp-scroll:hover .cmp-scroll-label, .cmp-scroll:focus-visible .cmp-scroll-label { clip-path: inset(0 0 0 0); }
.cmp-scroll-btn { width: 72px; height: 72px; flex: none; background: var(--cmp-navy-800); display: grid; place-items: center; }
.cmp-scroll-btn img { width: 28px; height: 28px; animation: cmp-bob 2.4s ease-in-out infinite; }
@keyframes cmp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.cmp-scroll:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ═══ 3 · INTRO — párrafo que se rellena con el scroll ═══ */
.cmp-intro { position: relative; padding: clamp(90px, 12vw, 170px) 0 clamp(70px, 8vw, 120px); }
.cmp-intro-text {
  max-width: 940px; margin: 0 auto; text-align: center;
  font-family: var(--cmp-display); font-weight: 500; font-size: clamp(24px, 4vw, 57px); line-height: 1.05;
  color: rgba(230,234,238,.3);
}
.cmp-intro-text b { font-weight: inherit; color: var(--cmp-paper); transition: color .35s ease; }
.cmp-intro-text .w { transition: color .3s ease; }
.cmp-intro-text .w.lit { color: var(--cmp-paper); }

/* ═══ 4 · COMPLIANCE PROGRAM ═══ */
.cmp-program { position: relative; padding-bottom: clamp(80px, 10vw, 150px); }
.cmp-program-card {
  position: relative; max-width: 1104px; margin: 0 auto; background: var(--cmp-navy-800);
  border: 1px solid rgba(255,255,255,.5); border-radius: 40px; padding: 36px 34px 56px;
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
}
.cmp-program-photo { width: 100%; aspect-ratio: 1039 / 635; object-fit: cover; border-radius: 30px; }
/* v4: el párrafo pasa de Inter Light 20px a Inter Bold 32px y una caja más estrecha */
.cmp-program-lede { max-width: 540px; margin: 42px auto 0; text-align: center; font-weight: 700; font-size: clamp(20px, 2.3vw, 32px); line-height: 1.13; letter-spacing: -0.014em; color: rgba(255,255,255,.8); }

/* ─── Tarjetas horizontales (Figma v4, nodo 5000:3388) ───
   Foto a la izquierda (51,6% del ancho), contenido a la derecha sobre el patrón
   topográfico al 5%. Proporción del diseño: 906,4 × 424,8. */
/* Las tres tarjetas se apilan con sticky: cada una se queda bajo el navbar y la
   siguiente la cubre dejando asomar un escalón. Mismo recurso que los Pilares. */
.cmp-cards { max-width: 1104px; margin: clamp(38px, 4vw, 56px) auto 0; display: block; padding: 0 100px; }
.cmp-card {
  position: sticky; display: grid; grid-template-columns: 51.6% 1fr;
  background: #fff; border-radius: 26px; overflow: hidden; aspect-ratio: 906.4 / 424.8;
  box-shadow: 0 -10px 30px rgba(0,0,0,.45), 0 0 16px rgba(0,24,48,.3);
  margin-bottom: 40px;
}
.cmp-card:nth-child(1) { top: 104px; }
.cmp-card:nth-child(2) { top: 122px; }
.cmp-card:nth-child(3) { top: 140px; }
.cmp-card:last-child { margin-bottom: 0; }
/* La tarjeta cubierta retrocede (JS bloque 4sexies). El origen arriba evita que al
   encoger se despegue del borde superior, que es justo la franja que tiene que asomar. */
.cmp-card { transform-origin: 50% 0; will-change: transform, filter; }
.cmp-card-photo { width: 100%; height: 100%; object-fit: cover; }
.cmp-card-body { position: relative; display: flex; align-items: center; overflow: hidden; }
.cmp-card-topo { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 100%; height: auto; opacity: .05; pointer-events: none; }
.cmp-card-inner { position: relative; z-index: 1; padding: 0 6% 0 5.5%; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.cmp-card-icon { width: clamp(44px, 4.3vw, 62px); height: auto; border-radius: 9px; }
.cmp-card h3 { font-family: var(--cmp-display); font-weight: 700; font-size: clamp(22px, 2.7vw, 38px); line-height: 1.05; letter-spacing: -0.01em; color: var(--cmp-navy-950); }
.cmp-card p { font-family: var(--cmp-display); font-weight: 300; font-size: clamp(14px, 1.36vw, 19px); line-height: 1.16; color: #737373; }
/* El botón no está en el Figma: lo pidió Andrés para enlazar cada tarjeta con su sección */
.cmp-card-cta {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 20px;
  border-radius: 999px; background: var(--cmp-cyan); color: #fff;
  font-family: var(--cmp-display); font-weight: 500; font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .6px; text-transform: uppercase;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.6);
}
.cmp-card-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(0,0,0,.6); }
.cmp-card-cta:focus-visible { outline: 2px solid var(--cmp-navy-950); outline-offset: 3px; }
.cmp-card-cta svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }

/* ═══ 5 · GENERAL BUSINESS PRINCIPLES ═══ */
.cmp-gbp { position: relative; background: var(--cmp-navy-870); border-radius: 100px; padding: clamp(72px, 9vw, 130px) 0 clamp(64px, 7vw, 104px); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.cmp-gbp::before { content: ''; position: absolute; left: 13%; top: 3%; width: 74%; height: 88%; background: rgba(1,156,222,.10); filter: blur(120px); border-radius: 50%; pointer-events: none; }
.cmp-gbp > * { position: relative; z-index: 1; }
.cmp-gbp-kicker { text-align: center; font-family: var(--cmp-display); font-weight: 500; font-size: clamp(17px, 1.5vw, 20px); color: #fff; margin: 32px 0 18px; }

/* Carrusel de principios */
.cmp-carousel { position: relative; }
/* La tarjeta se dimensiona contra el ALTO del viewport: el diseño la deja a 797px
   con la escala activa, y así ni la tarjeta ni las flechas caben juntas en una
   pantalla de portátil. Aquí la altura sale de la ventana y el carrusel entero
   (tarjeta + flechas + puntos + contador) entra siempre en un solo viewport. */
.cmp-carousel { --slideH: clamp(400px, calc(100vh - 300px), 620px); }
.cmp-track { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 20px max(24px, calc(50% - 192px)) 24px; scrollbar-width: none; }
.cmp-track::-webkit-scrollbar { display: none; }
.cmp-slide {
  flex: none; width: 346px; height: var(--slideH); scroll-snap-align: center; background: var(--cmp-navy-900); border-radius: 34px;
  padding: 20px 20px 26px; display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 21px 21px rgba(0,0,0,.2); transition: transform .45s cubic-bezier(.16,1,.3,1), background .45s, box-shadow .45s;
}
.cmp-slide img { width: 100%; height: calc(var(--slideH) * 0.355); flex: none; object-fit: cover; border-radius: 26px; }
.cmp-slide h3 { font-family: var(--cmp-display); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.08; color: #fff; margin: 15px 0 8px; }
.cmp-slide p { font-size: clamp(13.5px, 1.02vw, 14.5px); line-height: 1.5; letter-spacing: -0.011em; color: rgba(255,255,255,.88); flex: 1 1 auto; min-height: 0; }
/* Slide activa: la del centro crece y pasa a cian, como en el diseño */
.cmp-slide.is-active { background: var(--cmp-cyan); transform: scale(1.055); box-shadow: 0 24px 24px rgba(0,0,0,.2); z-index: 2; }

.cmp-arrows { display: flex; justify-content: center; gap: 20px; margin-top: 18px; }
.cmp-arrows button { width: 60px; height: 60px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 8px; transition: transform .2s, opacity .2s; }
.cmp-arrows button:hover:not(:disabled) { transform: translateY(-2px); }
.cmp-arrows button:disabled { opacity: .35; cursor: default; }
.cmp-arrows button:focus-visible { outline: 2px solid var(--cmp-cyan); outline-offset: 3px; }
.cmp-arrows img { width: 100%; height: 100%; }

/* Puntos y contador en la MISMA fila: en vertical se comían 30px que el carrusel
   necesita para caber en una pantalla de portátil. */
.cmp-indicator { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.cmp-dots { display: flex; justify-content: center; gap: 10px; }
.cmp-dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cmp-dots button::before { content: ''; width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.28); transform-origin: center; transition: background .25s, transform .25s; }
.cmp-dots button[aria-selected="true"]::before { transform: scale(1.45); background: var(--cmp-cyan); }
.cmp-dots button:focus-visible { outline: 2px solid var(--cmp-cyan); outline-offset: 2px; border-radius: 999px; }
.cmp-count { font-family: var(--cmp-display); font-weight: 500; font-size: 14px; letter-spacing: 2px; color: rgba(255,255,255,.55); }
.cmp-count #cmpCountNow { color: #fff; }

/* ═══ 6 · CODE OF CONDUCT ═══ */
.cmp-coc { position: relative; padding: clamp(80px, 10vw, 150px) 0 clamp(80px, 9vw, 130px); overflow: hidden; }
.cmp-coc::before { content: ''; position: absolute; inset: 0; background: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9699d0e09a12ebccacd6fc_cmp-sea.webp') center/cover; opacity: .13; mix-blend-mode: screen; pointer-events: none; }
.cmp-coc > * { position: relative; z-index: 1; }
.cmp-coc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; max-width: 1152px; margin: 60px auto 0; }
/* Tres columnas independientes, como el acordeón de la web viva: al abrir una ficha
   empuja solo a las de su columna, no a toda la fila. */
.cmp-coc-col { display: flex; flex-direction: column; gap: 16px; }
.cmp-coc-item { display: block; }
.cmp-pill { width: 100%; text-align: left; font: inherit; }
.cmp-pill .ico svg { width: 16px; height: 16px; stroke: var(--cmp-ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cmp-pill[aria-expanded="true"] .ico svg { transform: rotate(180deg); }
.cmp-pill[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cmp-coc-panel { overflow: hidden; background: #fff; border: 1px solid #e5e7eb; border-top: 0; border-radius: 0 0 26px 26px; }
.cmp-coc-panel[hidden] { display: none; }
.cmp-coc-panel p { padding: 4px 25px 22px; font-family: var(--cmp-body); font-weight: 400; font-size: 15px; line-height: 1.55; letter-spacing: -0.011em; color: var(--cmp-ink-soft); }
/* Estado inicial de la entrada una a una (JS bloque 4quinquies). Va en CSS y no en el
   JS para que no haya un fotograma con las 12 pastillas ya puestas antes del primer
   pintado. La clase la pone el propio JS, así que sin JS las pastillas se ven. */
.cmp-coc-grid--scroll .cmp-coc-item { opacity: 0; transform: translateY(26px); }
/* Al terminar de entrar, el JS borra los estilos en línea y marca `is-in`. Hace falta
   porque un `transform` en línea NO lo puede pisar el `:hover` de la hoja: sin esto la
   pastilla entra bien y luego se queda sin el levantamiento al pasar el ratón. */
.cmp-coc-grid--scroll .cmp-coc-item.is-in { opacity: 1; transform: none; }
.cmp-coc-grid--scroll .cmp-coc-item.is-in:hover .cmp-pill { transform: translateY(-3px); }
/* Los 6 pilares entran de tres en tres con el scroll (ver bloque 4quinquies-ter). La clase
   la pone el JS: sin JS, ni la clase ni el estado oculto. */
.cmp-pillars--scroll .cmp-pillar { opacity: 0; transform: translateY(34px); }
.cmp-pillars--scroll .cmp-pillar.is-in { opacity: 1; transform: none; }
/* Las 3 tarjetas del programa entran más despacio y más escalonadas que el stagger del
   DS (0,6 s / 90 ms): Andrés, 01-sep, «la haría un poco más lenta». */
.cmp-cards > * { transition-duration: .95s; transition-delay: calc(var(--i, 0) * 170ms); }
.cmp-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 12px 25px; min-height: 65px;
  color: var(--cmp-ink); font-family: var(--cmp-body); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.cmp-pill:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -14px rgba(0,0,0,.7); }
.cmp-pill:focus-visible { outline: 2px solid var(--cmp-cyan); outline-offset: 3px; }
.cmp-pill .ico { flex: none; width: 32px; height: 32px; border-radius: 999px; background: #f0f4f8; display: grid; place-items: center; }
.cmp-pill .ico img { width: 16px; height: 16px; }

/* ═══ 7 · CRIME PREVENTION MODEL ═══ */
.cmp-cpm { position: relative; background: var(--cmp-navy-700); border-radius: 32px; padding: clamp(80px, 9vw, 129px) 0 clamp(72px, 8vw, 120px); overflow: hidden; }
.cmp-cpm::before, .cmp-cpm::after { content: ''; position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(1,156,222,.28) 0%, rgba(1,156,222,0) 70%); pointer-events: none; }
.cmp-cpm::before { width: 333px; height: 333px; left: 44%; top: 18%; }
.cmp-cpm::after  { width: 274px; height: 274px; left: 26%; top: 25%; }
.cmp-cpm > * { position: relative; z-index: 1; }
.cmp-wheel { display: block; width: min(621px, 86vw); height: auto; margin: clamp(46px, 5vw, 76px) auto 0; }

/* PILLARS va en un plano por debajo de las tarjetas de su sección: al subir se
   mete detrás de ellas en vez de pasarles por encima. */
.cmp-cpm-pillars-head { margin-top: clamp(70px, 8vw, 118px); position: relative; z-index: 0; }
.cmp-pillars { position: relative; z-index: 1; }
.cmp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 32px; max-width: 1152px; margin: clamp(48px, 5vw, 74px) auto 0; }
.cmp-pillar { position: relative; padding-top: 26px; }
/* Capa de vidrio desplazada tras la tarjeta — la profundidad del diseño */
.cmp-pillar::before {
  content: ''; position: absolute; right: 0; top: 0; width: 85%; height: calc(100% - 30px);
  border-radius: 32px; border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(228deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.05) 100%);
  backdrop-filter: blur(2px);
}
.cmp-pillar-card {
  position: relative; background: rgba(255,255,255,.92); border: 1px solid #e5e7eb; border-radius: 24px;
  padding: 32px; min-height: 340px;
  box-shadow: 0 20px 25px rgba(0,0,0,.1), 0 8px 10px rgba(0,0,0,.1);
}
.cmp-pillar-num {
  position: absolute; right: 26px; top: 6px; font-family: var(--cmp-display); font-weight: 500; font-size: 92px; line-height: 1;
  background: linear-gradient(to bottom, var(--cmp-ink) 72.9%, rgba(0,24,48,.15) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cmp-pillar-card h3 { font-family: var(--cmp-display); font-weight: 500; text-transform: uppercase; letter-spacing: .4px; font-size: 16px; line-height: 1.25; color: var(--cmp-ink); max-width: 60%; margin: 52px 0 18px; }
.cmp-pillar-card p { font-weight: 300; font-size: 14px; line-height: 1.62; letter-spacing: -0.011em; color: var(--cmp-ink-soft); }

/* ═══ 8 · WHISTLEBLOWING ═══ */
.cmp-wb { position: relative; padding: clamp(90px, 11vw, 165px) 0 clamp(90px, 10vw, 150px); }
/* Las palabras entran desde fuera del viewport: el recorte impide que eso genere
   desplazamiento horizontal. El aire vertical evita cortar el degradado del texto. */
.cmp-words { overflow: hidden; padding: 8px 0; }
.cmp-words > span { will-change: transform; }
.cmp-words > span { margin: 0 0 8px; }   /* los tres iguales: antes 10 · 0 · 0 */
.cmp-words .sub { margin: 0 0 8px; }
.cmp-wb-photo { display: block; width: min(739px, 88vw); height: clamp(120px, 13vw, 185px); object-fit: cover; border-radius: 999px; margin: clamp(38px, 4.5vw, 62px) auto; }
.cmp-wb .cmp-lede { max-width: 863px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.46; color: rgba(255,255,255,.9); }

/* ═══ 9 · FOOTER (el real del sitio, según el Figma v3) ═══ */
.cmp-foot { position: relative; padding-top: clamp(60px, 7vw, 96px); }
.cmp-foot-hero { position: relative; max-width: 1364px; margin: 0 auto; border-radius: 8px; overflow: hidden; }
.cmp-foot-hero img.photo { width: 100%; aspect-ratio: 1364 / 705; object-fit: cover; display: block; }
.cmp-foot-hero .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(506px, 56%); }
.cmp-foot-body { max-width: 1312px; margin: 0 auto; padding: clamp(56px, 6vw, 80px) var(--cmp-pad) 40px; }
.cmp-foot-top { display: grid; grid-template-columns: 1fr 490px; gap: 60px; align-items: start; }
.cmp-foot-claim { font-family: var(--cmp-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.16; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.cmp-foot-links { list-style: none; }
.cmp-foot-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 14px; color: rgba(255,255,255,.85); transition: color .2s, transform .25s; }
.cmp-foot-links a:hover { color: #fff; transform: translateX(6px); }
.cmp-foot-links a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; flex: none; }
.cmp-foot-brand { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: clamp(48px, 5vw, 76px); padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.14); }
.cmp-foot-brand img.word { width: min(360px, 52%); }
.cmp-foot-social { display: flex; gap: 24px; }
.cmp-foot-social img { width: 24px; height: 24px; opacity: .85; transition: opacity .2s, transform .2s; }
.cmp-foot-social a:hover img { opacity: 1; transform: translateY(-2px); }
.cmp-foot-meta { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 22px; font-size: 13px; color: rgba(255,255,255,.72); }
.cmp-foot-meta a:hover { color: #fff; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 991px) {
  :root { --cmp-pad: 40px; }
  .cmp-hero { height: 620px; }
  .cmp-program-card { border-radius: 32px; padding: 26px 22px 44px; }
  .cmp-cards { padding: 0 24px; }
  .cmp-card-inner { padding: 0 26px; }
  .cmp-gbp { border-radius: 56px; }
  .cmp-coc-grid { grid-template-columns: repeat(2, 1fr); }
  .cmp-pillars { grid-template-columns: repeat(2, 1fr); }
  .cmp-foot-top { grid-template-columns: 1fr; gap: 32px; }
  .cmp-foot-brand { flex-direction: column; align-items: flex-start; gap: 26px; }
  .cmp-foot-brand img.word { width: 68%; }
}
@media (max-width: 767px) {
  :root { --cmp-pad: 24px; }

  /* ── Ritmo vertical ──
     A 390 px la página medía 10.645 px con los aires de escritorio. Aquí se
     recortan los respiros de sección, no el contenido. */
  .cmp-intro   { padding: 64px 0 48px; }
  .cmp-program { padding-bottom: 64px; }
  .cmp-gbp     { padding: 64px 0 56px; border-radius: 36px; }
  .cmp-coc     { padding: 64px 0 64px; }
  .cmp-cpm     { padding: 64px 0 56px; border-radius: 24px; }
  .cmp-wb      { padding: 64px 0 56px; }

  /* ── Navbar: los tres controles medían 14-22 px de alto. El área táctil se
     agranda con padding negativo para no mover la pastilla. ── */
  .cmp-nav { top: 12px; }
  .cmp-nav-pill { padding: 10px 14px; }
  .cmp-nav-menu, .cmp-nav-cta, .cmp-nav-brand { padding: 16px 6px; margin: -16px -6px; }
  .cmp-nav-cta { font-size: 11px; letter-spacing: .8px; }
  .cmp-nav-menu { font-size: 11px; letter-spacing: .8px; }
  .cmp-nav-brand img { height: 20px; }

  /* ── Hero ──
     A 390×560 sobre una foto 4:3 se ve una franja de 940 px de los 1800: centrada
     se comía la superestructura. Al 62% entra el buque entero con la estela. */
  .cmp-hero { height: 560px; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
  .cmp-hero-img { object-position: 62% center; }
  /* Velo inferior más marcado: el titular cae sobre la cubierta clara del remolcador */
  .cmp-hero::after { background: linear-gradient(to bottom, rgba(0,14,30,.35) 0%, rgba(0,14,30,0) 30%, rgba(0,14,30,.30) 58%, rgba(0,14,30,.78) 100%); }
  .cmp-hero-card { left: 10px; right: 10px; width: auto; bottom: 85px; padding: 21px 62px 21px 21px; border-radius: 24px; }
  .cmp-hero-title { font-size: 28px; line-height: 1.12; }

  /* La palabra ancla del titular no se parte nunca: por debajo de 768 hay que
     bajarla o desborda el viewport. "WHISTLEBLOWING" (14 signos) es la más larga
     del conjunto y necesita su propio tope. */
  .cmp-display .lead { font-size: clamp(32px, 7.4vw, 56px); }
  .cmp-wb .cmp-display .lead { font-size: clamp(32px, 8.4vw, 40px); line-height: 1.6; }
  .cmp-display .sub { font-size: clamp(24px, 4.4vw, 30px); }

  /* ── Programa ── */
  .cmp-program-card { border-radius: 26px; padding: 16px 16px 36px; }
  .cmp-program-photo { border-radius: 18px; }
  .cmp-program-lede { margin-top: 28px; }
  /* La tarjeta horizontal no cabe en 390: foto arriba, contenido debajo. */
  .cmp-cards { padding: 0; margin-top: 30px; }
  .cmp-card { grid-template-columns: 1fr; aspect-ratio: auto; border-radius: 22px; margin-bottom: 24px; }
  /* La barra global del sitio mide 72 px: con top:82 quedaban 10 px de hueco.
     100/115/130 deja 28 px, dentro de los 24-32 pedidos, y mantiene el escalón de 15. */
  .cmp-card:nth-child(1) { top: 100px; }
  .cmp-card:nth-child(2) { top: 115px; }
  .cmp-card:nth-child(3) { top: 130px; }
  .cmp-card-photo { aspect-ratio: 16 / 10; }
  .cmp-card-body { padding: 26px 0 30px; }
  .cmp-card-inner { padding: 0 24px; gap: 12px; }
  .cmp-card h3 { font-size: 26px; }
  .cmp-card p { font-size: 15px; line-height: 1.42; }
  .cmp-card-topo { width: 150%; right: -30%; }

  /* ── Carrusel ──
     La tarjeta activa crecía un 11% y se solapaba con las vecinas en 390 px.
     En móvil se distingue solo por color; el tamaño se reserva a escritorio. */
  .cmp-track { gap: 16px; padding-top: 26px; padding-bottom: 30px; }
  .cmp-slide { padding: 16px 16px 24px; border-radius: 26px; }
  .cmp-slide.is-active { transform: none; }
  .cmp-slide h3, .cmp-slide.is-active h3 { font-size: 23px; margin: 18px 0 10px; }
  .cmp-slide p, .cmp-slide.is-active p { font-size: 15px; }
  .cmp-arrows { gap: 20px; margin-top: 18px; }

  /* ── Code of Conduct ── */
  .cmp-coc-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .cmp-pill { font-size: 15px; padding: 14px 18px 14px 22px; min-height: 60px; }

  /* ── Crime Prevention Model ──
     La rueda lleva el texto incrustado: a 335 px es ilegible, así que va a sangre
     y se puede ampliar a pantalla completa. */
  /* La sangría a todo el ancho va en el BOTÓN (elemento de bloque) y la imagen se
     centra dentro. Puesta sobre la imagen quedaba descuadrada 7 px a la derecha. */
  /* A sangre en móvil. OJO: sin el visor, el texto incrustado en el diagrama vuelve
     a ser ilegible a este tamaño — era el motivo por el que se puso el zoom. */
  .cmp-wheel { width: 100vw; max-width: none; margin: 38px calc(50% - 50vw) 0; }
  /* ── Pilares apilados ──
     Las seis tarjetas se quedan pegadas bajo el navbar y cada una tapa a la
     anterior, con un escalón de 10 px para que se vea el borde de las de abajo.
     La tarjeta pasa a blanco opaco: al 92% se transparentaba la de debajo. */
  .cmp-pillars { display: block; margin-top: 34px; }
  .cmp-pillar { position: sticky; padding-top: 0; margin-bottom: 22px; }
  /* El escalón de 15 px es lo que deja asomar el borde de la tarjeta anterior: sin
     él las seis se tapan a ras y el apilado no se lee. */
  .cmp-pillar:nth-child(1) { top: 82px; }
  .cmp-pillar:nth-child(2) { top: 97px; }
  .cmp-pillar:nth-child(3) { top: 112px; }
  .cmp-pillar:nth-child(4) { top: 127px; }
  .cmp-pillar:nth-child(5) { top: 142px; }
  .cmp-pillar:nth-child(6) { top: 157px; }
  .cmp-pillar:last-child { margin-bottom: 0; }
  /* La hoja de vidrio desplazada es un recurso de escritorio: en el apilado ocupa
     justo el sitio por donde tiene que asomar la tarjeta de debajo. */
  .cmp-pillar::before { display: none; }
  .cmp-pillar-card { min-height: 0; padding: 24px; border-radius: 20px; background: #fff; border-top: 1px solid rgba(0,24,48,.14); box-shadow: 0 -10px 26px rgba(0,0,0,.45); }
  .cmp-pillar-card h3 { font-size: 24px; line-height: 1.12; margin: 44px 0 14px; max-width: 72%; }
  .cmp-pillar-num { font-size: 68px; right: 22px; top: 4px; }

  /* ── Whistleblowing: la pastilla a 120 px cortaba las cabezas ── */
  .cmp-wb-photo { height: 168px; border-radius: 84px; margin: 34px auto; }

  /* ── Botones: 11,5 px era demasiado pequeño y el alto quedaba por debajo del
     objetivo táctil cómodo cuando la etiqueta ocupaba dos líneas. ── */
  .cmp-btn { min-height: 54px; height: auto; padding: 15px 24px; font-size: 12.5px; letter-spacing: .5px; line-height: 1.35; text-wrap: balance; }

  /* ── Footer: filas de 21-35 px de alto, iconos de 24 ── */
  .cmp-foot-body { padding-top: 44px; }
  .cmp-foot-links a { padding: 15px 0; font-size: 15px; }
  .cmp-foot-brand { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
  .cmp-foot-brand img.word { width: min(56%, 190px); }
  .cmp-foot-social { gap: 6px; }
  .cmp-foot-social a { display: grid; place-items: center; width: 44px; height: 44px; }
  .cmp-foot-meta { flex-direction: column; gap: 0; font-size: 14px; }
  .cmp-foot-meta > * { padding: 12px 0; }
  /* Los puntos miden 26px a propósito; el área táctil sube a 44 con padding y
     margen vertical negativo, así el punto no crece ni la fila se hace más alta
     (el carrusel entero tiene que seguir cabiendo en una pantalla). */
  .cmp-dots button { width: 44px; height: 44px; margin: -9px 0; }

  .cmp-doodle { display: none; }
}
@media (max-width: 478px) {
  .cmp-slide { width: 296px; }
  .cmp-track { padding-left: max(16px, calc(50% - 148px)); padding-right: max(16px, calc(50% - 148px)); }
  .cmp-arrows button { width: 56px; height: 56px; }
  .cmp-btn { font-size: 12px; letter-spacing: .4px; padding: 15px 20px; }
}
/* ── Objetivos táctiles ──
   El tamaño mínimo no es cuestión de ancho de pantalla sino de con qué se toca:
   una tablet a 768 o un portátil táctil también necesitan 44 px. Por eso va por
   tipo de puntero y no por breakpoint (misma lección que el selector de países
   de Our Team, donde los listeners se filtran por `pointer: fine`). */
@media (hover: none) and (pointer: coarse) {
  .cmp-nav-menu, .cmp-nav-cta, .cmp-nav-brand { padding: 16px 6px; margin: -16px -6px; }
  .cmp-menu a { padding: 10px 22px; }
  .cmp-foot-links a { padding: 15px 0; }
  .cmp-foot-social a { display: grid; place-items: center; width: 44px; height: 44px; }
  .cmp-foot-meta > * { padding: 12px 0; }
  /* Los puntos miden 26px a propósito; el área táctil sube a 44 con padding y
     margen vertical negativo, así el punto no crece ni la fila se hace más alta
     (el carrusel entero tiene que seguir cabiendo en una pantalla). */
  .cmp-dots button { width: 44px; height: 44px; margin: -9px 0; }
  .cmp-btn { min-height: 52px; height: auto; }
  /* Sin hover no hay forma de descubrir la etiqueta del botón de bajada: se muestra fija */
  .cmp-scroll-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-scroll-btn img { animation: none !important; }
  .cmp-track { scroll-behavior: auto; }
  .cmp-intro-text .w { color: var(--cmp-paper); }
}

@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e32e179766f5e3a30e_hnlt-light.woff2')  format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e3f870ac00542c755f_hnlt-roman.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e35850f3c2a795e711_hnlt-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNLT'; src: url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6a9698e32e179766f5e3a280_hnlt-bold.woff2')   format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── capa de porte: lo que solo se rompe sobre el sitio ────────────────────
   El navbar global de Ultratug lleva `z-index: 2147483647` (el máximo de un
   int32). Con el visor de la rueda del CPM a 300, la barra flotaba ENCIMA del
   visor a pantalla completa — el mismo fallo que se comió el modal de galería
   de Life at Ultratug. No se puede subir por encima de ese valor, así que se
   iguala: `.cmp-zoom` va después del navbar en el DOM, y a igualdad de
   z-index gana el que pinta más tarde. */
.cmp-root .cmp-zoom{z-index:2147483647}

/* El vídeo del hero tiene que arrancar POR DETRÁS de la barra, no debajo. Medido en
   staging: la barra global ocupa 72 px de flujo y `.cmp-root` empezaba justo a 72, así
   que quedaba una franja oscura encima del vídeo. Se sube el bloque esos 72 px; la
   barra sigue pintando por encima porque lleva z-index máximo. */
.cmp-root{margin-top:-72px}

/* build 026db35aaa */