/* ═══════════════════════════════════════════════════════════════
   CEO® · Sistema de diseño v4 — minimalista, monocromo, editorial
   Paleta de la guía de marca: Black 6 C #000 · Cool Gray 11 #53565A
   · Cool Gray 9 #75787B · Bright White #F4F5F0
   Tipografías: Maxima Nouva (títulos) + Montserrat (texto)
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Maxima Nouva'; src: url('/v4/fonts/MaximaNouva-Thin.otf') format('opentype'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Maxima Nouva'; src: url('/v4/fonts/MaximaNouva-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Maxima Nouva'; src: url('/v4/fonts/MaximaNouva-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }

:root {
  --bg: #000;
  --ink: #F4F5F0;
  --g9: #75787B;
  --g11: #53565A;
  --s1: #0A0A0B;
  --s2: #121214;
  --line: rgba(244, 245, 240, .12);
  --line2: rgba(244, 245, 240, .24);
  --f-display: 'Maxima Nouva', 'Montserrat', system-ui, sans-serif;
  --f-body: 'Montserrat', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: var(--nav-h); }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ── Tipografía ─────────────────────────────────────────────── */
.d-xl, .d-l, .d-m, .d-s { font-family: var(--f-display); font-weight: 400; letter-spacing: -.035em; line-height: .96; text-wrap: balance; }
.d-xl { font-size: clamp(42px, 6.4vw, 108px); }
.d-l  { font-size: clamp(32px, 4.2vw, 68px); line-height: 1; }
.d-m  { font-size: clamp(26px, 2.9vw, 46px); line-height: 1.04; letter-spacing: -.03em; }
.d-s  { font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -.02em; }
.d-xl em, .d-l em, .d-m em, .d-s em { font-style: normal; color: var(--g9); }
.label { font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--g9); }
.label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-right: 12px; vertical-align: 1px; }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; font-weight: 300; color: rgba(244, 245, 240, .78); max-width: 46ch; }
.body { color: rgba(244, 245, 240, .72); max-width: 60ch; }
.body strong, .lead strong { color: var(--ink); font-weight: 500; }
.muted { color: var(--g9); }
.num { font-family: var(--f-display); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── Layout ─────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { position: relative; padding: clamp(72px, 9vw, 140px) 0; }
.sec-tight { padding: clamp(64px, 8vw, 120px) 0; }
.rule { height: 1px; background: var(--line); border: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.stack > * + * { margin-top: 24px; }
.head { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: clamp(32px, 5vw, 80px); row-gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); }
.head > .label { flex: 0 0 100%; }
.head > h2 { flex: 0 1 auto; max-width: 15ch; }
.head > p { flex: 0 1 44ch; margin-top: .35em; }
@media (max-width: 900px) { .head > p { flex-basis: 100%; margin-top: 4px; } }

/* Secciones claras (Bright White) */
.is-light { background: var(--ink); color: var(--bg); }
.is-light .label { color: var(--g11); }
.is-light .lead, .is-light .body { color: rgba(0, 0, 0, .7); }
.is-light .d-xl em, .is-light .d-l em, .is-light .d-m em { color: var(--g9); }
.is-light .rule { background: rgba(0, 0, 0, .12); }

/* ── Botones ────────────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 30px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); transition: color .5s var(--ease); }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); transform: translateY(101%); border-radius: inherit; transition: transform .6s var(--ease); }
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--ink); }
.btn .arr { width: 18px; height: 18px; flex: none; transition: transform .6s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--bg); border-color: var(--ink); }
.is-light .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.is-light .btn::before { background: var(--ink); }
.is-light .btn:hover { color: var(--bg); }
.btn--sm { height: 44px; padding: 0 22px; font-size: 11px; }
.link { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding-bottom: 6px; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease); }
.link:hover::after { transform: scaleX(0); transform-origin: left; }
.link .arr { width: 16px; height: 16px; transition: transform .6s var(--ease); }
.link:hover .arr { transform: translateX(4px); }

/* ── Navegación ─────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--nav-h); transition: transform .6s var(--ease), background-color .4s, border-color .4s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(0, 0, 0, .86); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 24px; width: auto; aspect-ratio: 1953 / 560; }
.nav-links { display: flex; gap: clamp(18px, 2.4vw, 38px); list-style: none; }
.nav-links a { position: relative; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 245, 240, .72); transition: color .3s; padding: 6px 0; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--ink); transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 85; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 24px) var(--gut) 40px;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); visibility: hidden; }
.menu.is-open { clip-path: inset(0); visibility: visible; }
.menu a.m-link { display: block; font-family: var(--f-display); font-size: clamp(38px, 10vw, 64px); letter-spacing: -.03em; line-height: 1.14; overflow: hidden; }
.menu a.m-link span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.menu.is-open a.m-link span { transform: none; }
.menu .m-foot { margin-top: 48px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; opacity: 0; transition: opacity .6s .35s; }
.menu.is-open .m-foot { opacity: 1; }
@media (max-width: 1080px) { .nav-links { display: none; } .burger { display: block; } .nav-cta .btn { display: none; } }
@media (max-width: 1080px) { .nav-cta .btn.keep { display: inline-flex; } }

/* ── Medios ─────────────────────────────────────────────────── */
.media { position: relative; overflow: hidden; background: var(--s1); }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
.media .inner { position: absolute; inset: -8% 0; }
.media .inner > img, .media .inner > video { width: 100%; height: 100%; object-fit: cover; }
.media figcaption, .cap { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--g9); margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ticks { position: absolute; inset: 14px; pointer-events: none; z-index: 3; }
.ticks i { position: absolute; width: 14px; height: 14px; border-color: rgba(244, 245, 240, .55); border-style: solid; border-width: 0; }
.ticks i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.ticks i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.ticks i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.ticks i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ── Encabezado de páginas internas ─────────────────────────── */
.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(72px, 12vw, 180px)) 0 clamp(56px, 8vw, 120px); }
.page-hero .label { margin-bottom: 28px; display: block; }
.page-hero .lead { margin-top: 32px; }
.page-hero .ph-meta { margin-top: clamp(48px, 7vw, 96px); padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Marquesina (fina) ─────────────────────────────────── */
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.marquee .track { display: inline-flex; will-change: transform; }
.marquee .item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--f-display); font-size: clamp(14px, 1.15vw, 17px); letter-spacing: .01em; line-height: 1; color: var(--g11); }
.marquee .item b { font-weight: 400; color: var(--ink); }
.marquee .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--g11); flex: none; }

/* ── Pie de página (compacto) ───────────────────────────── */
.foot { position: relative; padding: clamp(56px, 7vw, 96px) 0 28px; border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-col .label { display: block; margin-bottom: 16px; }
.foot-col ul { list-style: none; display: grid; gap: 9px; }
.foot-col a { font-size: 13px; color: rgba(244, 245, 240, .66); transition: color .3s; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--ink); }
.foot-sign { margin-top: clamp(48px, 6vw, 80px); display: flex; justify-content: center; }
.foot-logo { height: 20px; width: auto; aspect-ratio: 1953 / 560; opacity: .9; }
.foot-bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--g11); }
@media (max-width: 900px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-col:last-child { grid-column: 1 / -1; } }

/* ── Transición entre páginas e intro ───────────────────────── */
.curtain { position: fixed; inset: 0; z-index: 200; background: var(--bg); pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); }
.curtain.is-on { opacity: 1; pointer-events: all; }
.intro { position: fixed; inset: 0; z-index: 210; background: var(--bg); display: grid; place-items: center; pointer-events: none; }
.intro img { width: clamp(120px, 14vw, 200px); height: auto; aspect-ratio: 1953 / 560; }
.intro .bar { position: absolute; left: 50%; bottom: 18%; width: clamp(120px, 14vw, 200px); height: 1px; background: var(--line); transform: translateX(-50%); overflow: hidden; }
.intro .bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
html:not(.js-motion) .intro { display: none; }

/* ── Estados iniciales de animación (solo si GSAP cargó) ───── */
.js-motion [data-split] .w { display: inline-block; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; clip-path: inset(-.4em -.5em -.04em -.5em); }
.js-motion [data-split].is-in .w { clip-path: none; }
.js-motion [data-split] .w > span { display: inline-block; }
.js-motion [data-split] .c { display: inline-block; transform: translateY(120%); will-change: transform; }
.js-motion [data-fade] { opacity: 0; transform: translateY(28px); }
.js-motion [data-clip] { clip-path: inset(100% 0 0 0); }
.js-motion [data-line] { transform: scaleX(0); transform-origin: left; }
[data-scrub-words] .sw { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-split] .c { transform: none; }
  .js-motion [data-fade] { opacity: 1; transform: none; }
  .js-motion [data-clip] { clip-path: none; }
  .js-motion [data-line] { transform: none; }
}

/* ── Logo «ceo®» dentro de un título, a la altura de las letras ─── */
.h-logo { display: inline-block; vertical-align: baseline; line-height: 1; }
.h-logo img { display: inline-block; height: .77em; width: auto; aspect-ratio: 1953 / 560; vertical-align: -.035em; }
.js-motion .h-logo { opacity: 0; }

/* ── Líneas fijas de fondo: la página se mueve por encima ─────── */
.bg-waves { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; animation: bgWavesIn 2.6s ease .4s forwards;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }
@keyframes bgWavesIn { to { opacity: 1; } }
.bg-waves.soft { animation-name: bgWavesSoft; }
@keyframes bgWavesSoft { to { opacity: .6; } }
.has-bg-waves main, .has-bg-waves .foot { position: relative; z-index: 1; }
@media (max-width: 760px) { .bg-waves { animation-name: bgWavesInM; } @keyframes bgWavesInM { to { opacity: .75; } } }

/* ── Tipografía en movimiento (biblioteca de Santi: n.º 4, 6, 7 y 14) ─── */
/* Ruleta: una línea con máscara donde las palabras giran como rodillo */
.roller { display: block; height: 1.12em; overflow: hidden; color: var(--g9); }
.roll-in { display: block; will-change: transform; }
.roll-in > span { display: block; height: 1.12em; line-height: 1.12em; white-space: nowrap; }
/* Marcador que se dibuja detrás de la palabra clave */
[data-marker] { position: relative; display: inline-block; z-index: 0; transition: color .35s ease .25s; }
[data-marker]::before { content: ''; position: absolute; z-index: -1; left: -.08em; right: -.08em; top: .1em; bottom: -.02em; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
[data-marker].on { color: var(--bg) !important; }
[data-marker].on::before { transform: scaleX(1); }
html:not(.js-motion) [data-marker] { color: var(--bg) !important; }
html:not(.js-motion) [data-marker]::before { transform: scaleX(1); }
/* Checklist que se marca */
.ckl li::before { display: none !important; }
.ckl li { transition: color .5s ease; transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.ckl .ck { position: absolute; left: 0; top: .28em; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ckl .ck path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .55s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.ckl.on .ck path, html:not(.js-motion) .ckl .ck path { stroke-dashoffset: 0; }
.js-motion .ckl:not(.on) li { color: var(--g11) !important; }
/* Cortina sobre cifras */
.cu { position: relative; display: inline-block; }
.cu-b { position: absolute; inset: .02em -.06em; background: var(--ink); transform: scaleX(0); pointer-events: none; }

/* ── Celular: tamaños contenidos ─────────────────────────── */
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .d-xl { font-size: clamp(34px, 9.6vw, 44px); line-height: 1; }
  .d-l { font-size: clamp(28px, 8vw, 36px); }
  .d-m { font-size: clamp(23px, 6.4vw, 28px); }
  .d-s { font-size: 20px; }
  .lead { font-size: 15.5px; line-height: 1.6; }
  .body { font-size: 15px; }
  .label { font-size: 10px; letter-spacing: .22em; }
  .sec { padding: 56px 0; }
  .sec-tight { padding: 40px 0; }
  .page-hero { padding: calc(var(--nav-h) + 48px) 0 40px; }
  .page-hero .lead { margin-top: 20px; }
  .btn { height: 50px; padding: 0 24px; font-size: 11px; }
  .brand img { height: 21px; }
  .foot { padding: 48px 0 24px; }
  .foot-top { gap: 24px; }
}

/* ── Utilidades ─────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }
.center { text-align: center; }
.hide-m { } .show-m { display: none; }
@media (max-width: 760px) { .hide-m { display: none !important; } .show-m { display: block; } }