/* CIDRIA — landing
   Base: CSS original (v0/Tailwind). Se quitaron los @import de tailwindcss / tw-animate-css
   porque el sitio es estático; el reset mínimo de abajo reemplaza el preflight de Tailwind. */

/* Reset mínimo (reemplaza preflight) */
h1,h2,h3,p,figure { margin:0; }
img,svg,video { display:block; max-width:100%; }
input,textarea,button { font:inherit; }

:root { --paper:#f2f2f3; --graphite:#1d1f20; --steel:#5980a6; --deep-steel:#416180; --night:#1d2d3d; --light-steel:#94bce3; --tint:#d6ebff; --line:#d4d4d7; --muted:#5d5d60; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; background:var(--paper); color:var(--graphite); font-family:"Barlow",sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--steel); outline-offset:3px; } button { border:0; font:inherit; cursor:pointer; }
.container { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.site-shell { overflow:clip; }
.site-nav { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 94%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.nav-inner { width:min(1260px,calc(100% - 48px)); min-height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand-lockup { display:inline-flex; align-items:center; gap:10px; }.brand-mark { width:34px; height:34px; }.brand-name { font:700 25px/1 "Barlow Condensed",sans-serif; letter-spacing:.08em; }
.main-menu { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:500; }.main-menu a:not(.nav-cta):hover { color:var(--steel); }.nav-cta { padding:11px 15px; background:var(--steel); color:var(--paper); font:600 14px/1 "Barlow Condensed",sans-serif; letter-spacing:.07em; text-transform:uppercase; }.nav-cta:hover { background:var(--deep-steel); }.nav-cta span { margin-left:12px; font:400 16px "Barlow",sans-serif; }.menu-toggle { display:none; align-items:center; gap:9px; padding:8px 0; background:none; color:var(--graphite); font-size:14px; }.menu-toggle b { font-size:19px; font-weight:400; }
.hero,.invite { position:relative; color:var(--paper); background:var(--night); }.hero { min-height:calc(100vh - 72px); padding:clamp(65px,10vw,125px) 0 35px; display:flex; flex-direction:column; }.hero-grid { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(to right,rgba(148,188,227,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,188,227,.5) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.8fr); align-items:center; gap:clamp(50px,10vw,145px); flex:1; }.eyebrow { margin:0 0 20px; color:var(--deep-steel); font-size:12px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }.eyebrow-light { color:var(--light-steel); } h1,h2,h3 { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; } h1 { max-width:610px; margin:0 0 27px; font-size:clamp(62px,9vw,112px); font-weight:700; line-height:.86; letter-spacing:.015em; } h1 em,h2 em { color:var(--light-steel); font-style:normal; }.hero-lede { max-width:500px; margin:0 0 31px; color:#d5dee6; font-size:clamp(18px,2vw,22px); line-height:1.4; }.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:47px; padding:0 19px; font:600 15px "Barlow Condensed",sans-serif; letter-spacing:.05em; text-transform:uppercase; transition:transform .18s var(--ease),background .18s ease; }.button:hover { transform:translateY(-2px); }.button:active { transform:scale(.97); }.button span { font:400 18px "Barlow",sans-serif; }.button-primary { background:var(--steel); color:var(--paper); }.button-primary:hover { background:var(--light-steel); color:var(--night); }
.hero-diagram { position:relative; aspect-ratio:1.15; border:1px solid var(--light-steel); overflow:hidden; }.diagram-grid,.sample-grid { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(to right,rgba(148,188,227,.4) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,188,227,.4) 1px,transparent 1px); background-size:28px 28px; }.diagram-orbit { position:absolute; left:50%; top:50%; border:1px solid var(--light-steel); border-radius:50%; transform:translate(-50%,-50%) rotate(-20deg); }.orbit-a { width:52%; aspect-ratio:1/.65; }.orbit-b { width:74%; aspect-ratio:1/.48; transform:translate(-50%,-50%) rotate(25deg); opacity:.55; }.diagram-cross,.sample-cross { position:absolute; left:50%; top:50%; color:var(--light-steel); font:300 70px/1 "Barlow Condensed",sans-serif; transform:translate(-50%,-50%); }.diagram-label,.diagram-coord,.sample-id { position:absolute; color:var(--light-steel); font-size:9px; letter-spacing:.15em; }.diagram-label { top:13px; left:15px; }.diagram-coord { right:15px; bottom:13px; }.diagram-pulse { position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 0 rgba(148,188,227,.8); animation:pulse 2s infinite; }.register-mark { position:absolute; z-index:2; width:12px; height:12px; }.register-mark:before,.register-mark:after { content:""; position:absolute; background:var(--steel); }.hero .register-mark:before,.hero .register-mark:after { background:var(--light-steel); }.register-mark:before { width:1px; height:18px; left:5px; top:-3px; }.register-mark:after { width:18px; height:1px; top:5px; left:-3px; }.register-tl { top:-6px; left:-6px; }.register-tr { top:-6px; right:-6px; }.register-bl { bottom:-6px; left:-6px; }.register-br { bottom:-6px; right:-6px; }.hero-bottom { position:relative; z-index:1; display:flex; align-items:center; gap:18px; color:#92a1ad; font-size:11px; letter-spacing:.13em; text-transform:uppercase; }.hero-bottom span:last-child { width:80px; height:1px; background:var(--steel); }
.section { padding:clamp(85px,11vw,145px) 0; }.about { background:var(--paper); }.about-layout { display:grid; grid-template-columns:220px minmax(0,700px); gap:45px; }.section-tag { display:flex; flex-direction:column; gap:8px; color:var(--deep-steel); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.section-tag strong { color:var(--steel); font:600 62px/.8 "Barlow Condensed",sans-serif; letter-spacing:.02em; }.about-copy h2,.section-intro h2,.invite-copy h2 { margin:0 0 24px; font-size:clamp(40px,5.7vw,72px); font-weight:600; line-height:.9; }.about-copy p { max-width:600px; margin:0 0 17px; color:var(--muted); font-size:19px; line-height:1.5; }.about-highlight { display:flex; align-items:center; gap:20px; margin-top:42px; padding-top:18px; border-top:1px solid var(--line); color:var(--deep-steel); font:600 16px "Barlow Condensed",sans-serif; letter-spacing:.05em; text-transform:uppercase; }.about-highlight strong { color:var(--steel); font:400 25px "Barlow",sans-serif; }
.samples { background:#e9e9ea; border-top:1px solid var(--line); }.section-intro { display:grid; grid-template-columns:220px minmax(0,1fr); gap:45px; align-items:start; margin-bottom:58px; }.section-intro p { max-width:510px; margin:0; color:var(--muted); font-size:18px; }.sample-carousel { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); min-height:390px; border:1px solid var(--line); background:var(--paper); }.carousel-stage { min-width:0; padding:18px; border-right:1px solid var(--line); }.carousel-stage .sample-visual { height:100%; min-height:350px; }.carousel-copy { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:clamp(24px,4vw,48px); }.carousel-kicker { color:var(--steel); font-size:10px; font-weight:700; letter-spacing:.15em; }.carousel-kicker span { margin-left:9px; color:var(--deep-steel); }.carousel-copy h3 { margin:0; font-size:clamp(38px,5vw,62px); font-weight:600; line-height:.86; }.carousel-copy p { max-width:270px; margin:0; color:var(--muted); font-size:18px; line-height:1.4; }.carousel-label { color:var(--deep-steel); font-size:10px; letter-spacing:.11em; }.carousel-controls { display:flex; align-items:center; gap:14px; margin-top:18px; }.carousel-controls > button { width:34px; height:34px; border:1px solid var(--line); background:transparent; color:var(--deep-steel); font-size:18px; }.carousel-controls > button:hover { border-color:var(--steel); color:var(--steel); }.carousel-dots { display:flex; gap:6px; }.carousel-dots button { width:22px; height:3px; padding:0; background:var(--line); }.carousel-dots button.active { background:var(--steel); }.sample-visual { position:relative; min-height:245px; overflow:hidden; background:#dfe8ef; }.sample-light { background:var(--tint); }.sample-dark { background:var(--night); }.sample-dark .register-mark:before,.sample-dark .register-mark:after { background:var(--light-steel); }.sample-dark .sample-id { color:var(--light-steel); }.sample-visual .sample-grid { background-size:22px 22px; opacity:.5; }.sample-visual .register-mark:before,.sample-visual .register-mark:after { background:var(--deep-steel); }.sample-hand { position:absolute; border:1px solid var(--steel); border-radius:50%; transform:rotate(-25deg); }.sample-hand-a { width:43%; height:55%; left:27%; top:20%; }.sample-hand-b { width:22%; height:39%; left:43%; top:31%; border-color:var(--deep-steel); transform:rotate(32deg); }.sample-object { position:absolute; width:18%; height:20%; left:41%; top:41%; border:1px solid var(--steel); transform:rotate(18deg); }.sample-cross { font-size:48px; color:var(--steel); }.sample-axis { position:absolute; background:var(--steel); opacity:.55; }.sample-axis-x { left:12%; right:12%; top:50%; height:1px; }.sample-axis-y { top:12%; bottom:12%; left:50%; width:1px; }.sample-id { left:13px; top:12px; color:var(--deep-steel); }.sample-scan { position:absolute; width:35%; height:1px; left:12%; top:28%; background:var(--steel); animation:scan 3s ease-in-out infinite alternate; }
.invite { padding:clamp(90px,11vw,140px) 0; }.invite-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,430px); gap:clamp(50px,10vw,130px); align-items:start; }.invite-copy h2 { color:var(--paper); font-size:clamp(50px,6.5vw,86px); }.invite-copy > p:not(.eyebrow) { max-width:490px; margin:0; color:#c6d1da; font-size:19px; line-height:1.45; }.invite-note { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }.invite-note span { padding:6px 8px; border:1px solid color-mix(in srgb,var(--light-steel) 50%,transparent); color:var(--light-steel); font-size:10px; font-weight:700; letter-spacing:.12em; }.interest-form { display:flex; flex-direction:column; gap:19px; padding:27px; background:var(--deep-steel); border:1px solid var(--light-steel); }.interest-form .brand-lockup { margin-bottom:6px; }.interest-form label { display:flex; flex-direction:column; gap:6px; color:var(--light-steel); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.interest-form input,.interest-form textarea { padding:8px 0; border:0; border-bottom:1px solid color-mix(in srgb,var(--light-steel) 58%,transparent); border-radius:0; outline:0; background:transparent; color:var(--paper); font:500 15px "Barlow",sans-serif; resize:vertical; }.interest-form input::placeholder,.interest-form textarea::placeholder { color:#c0cbd3; opacity:.75; }.interest-form input:focus,.interest-form textarea:focus { border-color:var(--paper); }.button-form { align-self:flex-start; min-height:42px; background:var(--paper); color:var(--deep-steel); font-size:14px; }.button-form:hover { background:var(--light-steel); }.interest-form small { color:#c4d0d9; font-size:12px; }.site-footer { background:var(--paper); color:var(--muted); }.footer-layout { min-height:110px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; border-top:1px solid var(--line); }.footer-layout p,.footer-layout > span { margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }.footer-layout p { justify-self:center; }
.reveal { animation:rise .7s var(--ease) both; }.reveal-delay-1 { animation-delay:.1s; }.reveal-delay-2 { animation-delay:.18s; }.reveal-delay-3 { animation-delay:.26s; } @keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(148,188,227,.8); } 70% { box-shadow:0 0 0 14px rgba(148,188,227,0); } 100% { box-shadow:0 0 0 0 rgba(148,188,227,0); } } @keyframes scan { from { transform:translateX(0); opacity:.35; } to { transform:translateX(90px); opacity:1; } } @media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } html { scroll-behavior:auto; } }
@media (max-width:850px) { .container { width:min(100% - 44px,620px); }.nav-inner { width:calc(100% - 36px); }.hero-inner,.invite-layout { grid-template-columns:1fr; }.hero { min-height:auto; }.hero-diagram { max-width:560px; }.about-layout,.section-intro { grid-template-columns:120px minmax(0,1fr); gap:25px; }.sample-carousel { grid-template-columns:1fr; }.carousel-stage { border-right:0; border-bottom:1px solid var(--line); }.carousel-stage .sample-visual { min-height:290px; }.invite-copy { max-width:650px; }.interest-form { max-width:560px; }.footer-layout { grid-template-columns:1fr 1fr; }.footer-layout p { grid-column:1/-1; grid-row:2; justify-self:start; } }
@media (max-width:620px) { .container { width:calc(100% - 32px); }.nav-inner { width:calc(100% - 32px); min-height:65px; }.main-menu { position:absolute; top:64px; left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; background:var(--paper); border:1px solid var(--line); box-shadow:0 15px 30px rgba(29,31,32,.1); }.main-menu-open { display:flex; }.main-menu a { padding:12px 9px; border-bottom:1px solid var(--line); }.main-menu .nav-cta { margin-top:9px; text-align:center; border:0; }.menu-toggle { display:flex; }.hero { padding-top:63px; }.hero-inner { gap:50px; }.hero-lede { font-size:18px; }.hero-diagram { width:100%; }.hero-bottom { padding-top:55px; font-size:9px; }.section { padding:78px 0; }.about-layout,.section-intro { display:block; }.section-tag { margin-bottom:28px; }.section-tag strong { font-size:53px; }.about-copy h2,.section-intro h2 { font-size:clamp(42px,12vw,64px); }.about-copy p,.section-intro p { font-size:17px; }.about-highlight { gap:12px; flex-wrap:wrap; }.sample-carousel { display:block; }.carousel-stage { padding:10px; }.carousel-stage .sample-visual { min-height:245px; }.carousel-copy { padding:25px; }.sample-visual { min-height:220px; }.invite-copy h2 { font-size:clamp(52px,14vw,78px); }.invite-copy > p:not(.eyebrow) { font-size:18px; }.footer-layout { display:flex; flex-wrap:wrap; min-height:155px; padding:25px 0; gap:17px; }.footer-layout p { width:100%; order:3; }.footer-layout > span { margin-left:auto; } }

/* Hero signature motion */
.hero-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; max-width:650px; color:var(--light-steel); letter-spacing:.13em; animation:eyebrow-reveal .8s var(--ease) both; }
.hero-eyebrow span:first-child { position:relative; }
.hero-eyebrow span:first-child:after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px; background:var(--steel); transform-origin:left; animation:line-reveal 1.1s .35s var(--ease) both; }
.hero-eyebrow b { color:var(--steel); font-weight:400; }
.hero-copy h1 span { display:block; opacity:0; transform:translateY(28px); animation:title-line-in .75s var(--ease) forwards; }
.hero-copy h1 span:nth-child(1) { animation-delay:.12s; }
.hero-copy h1 span:nth-child(2) { animation-delay:.22s; }
.hero-copy h1 span:nth-child(3) { animation-delay:.32s; }
.hero-copy .hero-lede { animation:copy-reveal .8s .55s var(--ease) both; }
@keyframes eyebrow-reveal { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
@keyframes line-reveal { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes title-line-in { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes copy-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ------------------------------------------------------------------
   Media-player motion for real videos and task samples
   (esta parte se reconstruyó: el CSS original llegó cortado aquí)
   ------------------------------------------------------------------ */
.carousel-stage .sample-visual { transition:opacity .35s ease; }
.carousel-copy > * { transition:opacity .3s ease, transform .45s var(--ease); }
.sample-carousel.is-switching .carousel-stage .sample-visual { opacity:0; }
.sample-carousel.is-switching .carousel-copy > * { opacity:0; transform:translateY(8px); }

/* Video real: cuando hay un clip, cubre el diagrama y lo tiñe hacia la paleta */
.sample-video { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05); }
.sample-visual.has-video .sample-hand,.sample-visual.has-video .sample-object,.sample-visual.has-video .sample-cross,.sample-visual.has-video .sample-scan { display:none; }
.sample-visual.has-video .sample-grid { z-index:1; opacity:.18; }
.sample-visual.has-video .sample-id { z-index:2; padding:3px 6px; background:color-mix(in srgb,var(--night) 70%,transparent); color:var(--light-steel); }

/* HUD tipo reproductor: REC + timecode + barra de progreso */
.sample-hud { position:absolute; z-index:2; right:13px; top:10px; display:flex; align-items:center; gap:8px; color:var(--deep-steel); font-size:9px; letter-spacing:.15em; }
.sample-dark .sample-hud,.sample-visual.has-video .sample-hud { color:var(--light-steel); }
.sample-rec { width:6px; height:6px; border-radius:50%; background:#c9483f; animation:rec-blink 1.4s steps(2,start) infinite; }
.sample-progress { position:absolute; z-index:2; left:0; right:0; bottom:0; height:2px; background:color-mix(in srgb,var(--steel) 22%,transparent); }
.sample-progress i { display:block; height:100%; width:0; background:var(--steel); }
.sample-carousel.is-playing .sample-progress i { animation:progress var(--slide-ms,6000ms) linear forwards; }
.sample-carousel.is-paused .sample-progress i { animation-play-state:paused; }
@keyframes rec-blink { to { visibility:hidden; } }
@keyframes progress { from { width:0; } to { width:100%; } }

/* Form states (Netlify Forms) */
.form-status { min-height:18px; color:var(--paper); font-size:13px; }
.interest-form.is-sent .form-status { color:var(--tint); }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Scroll reveal for sections below the fold */
.js .reveal-on-scroll { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal-on-scroll.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .js .reveal-on-scroll { opacity:1; transform:none; } }

/* Isotipo (SVG <symbol>): colores por variable para positivo / reverso */
.brand-mark { flex:none; }
.mark-ink { fill:var(--ink,var(--graphite)); }
.mark-accent { fill:var(--accent,var(--steel)); }
.site-footer .brand-name { color:var(--graphite); }
.interest-form .brand-name { color:var(--paper); }

/* Ajuste: separación entre el CTA del hero y la franja inferior */
.hero-bottom { margin-top:clamp(40px,6vw,70px); }

/* Hero: etiquetas cortas bajo el lede */
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 30px; }
.hero-tags span { padding:6px 9px; border:1px solid color-mix(in srgb,var(--light-steel) 45%,transparent); color:var(--light-steel); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

/* ==================================================================
   v3 — capa "techy": POV real + HUD, ticker, glow, decodificado
   ================================================================== */

/* Brillo de cursor sobre la retícula del hero */
.hero:before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),rgba(148,188,227,.13),transparent 60%); }

/* Visual del hero: cuadro POV real con HUD de detección */
.hero-pov { margin:0; aspect-ratio:1.15; max-width:100%; background:var(--night); }
.hero-pov img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.55) contrast(1.08) brightness(.82); }
.hero-pov:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(29,45,61,.55),transparent 22%,transparent 72%,rgba(29,45,61,.7)),repeating-linear-gradient(0deg,rgba(29,45,61,.14) 0 1px,transparent 1px 3px); }
.pov-overlay { position:absolute; inset:0; z-index:1; width:100%; height:100%; }
.pov-box rect { fill:rgba(148,188,227,.08); stroke:var(--light-steel); stroke-width:2.5; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 1.2s var(--d,1s) var(--ease) forwards; }
.pov-box-obj rect { stroke:var(--paper); stroke-dasharray:6 6; stroke-dashoffset:0; opacity:0; animation:fade-in .6s var(--d,1.3s) forwards; fill:none; }
.pov-box text { fill:var(--light-steel); font:700 17px "Barlow",sans-serif; letter-spacing:.12em; opacity:0; animation:fade-in .5s calc(var(--d,1s) + .4s) forwards; }
.pov-box-obj text { fill:var(--paper); }
.pov-bones { fill:none; stroke:var(--paper); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.85; stroke-dasharray:400; stroke-dashoffset:400; animation:draw 1.4s 1.6s var(--ease) forwards; }
.pov-joints circle { fill:var(--steel); stroke:var(--paper); stroke-width:2; opacity:0; animation:fade-in .4s 2.2s forwards, joint 2.4s 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.pov-joints circle:nth-child(3n) { animation-delay:2.3s,2.9s; }
.pov-joints circle:nth-child(3n+1) { animation-delay:2.4s,3.2s; }
.pov-scanline { position:absolute; z-index:1; left:0; right:0; top:0; height:26%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(148,188,227,.16) 85%,rgba(148,188,227,.55) 100%); border-bottom:1px solid rgba(214,235,255,.6); animation:sweep 4.5s 1s cubic-bezier(.45,0,.55,1) infinite; }
.pov-hud { position:absolute; z-index:2; left:14px; right:14px; display:flex; justify-content:space-between; gap:12px; color:var(--light-steel); font-size:9px; font-weight:700; letter-spacing:.15em; font-variant-numeric:tabular-nums; }
.pov-hud span { display:inline-flex; align-items:center; gap:7px; }
.pov-hud b { color:var(--paper); font-weight:700; }
.pov-hud-top { top:12px; } .pov-hud-bottom { bottom:12px; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes fade-in { to { opacity:1; } }
@keyframes joint { 50% { transform:scale(1.35); } }
@keyframes sweep { 0% { transform:translateY(-100%); } 100% { transform:translateY(400%); } }

/* Ticker de tareas y sectores */
.ticker { overflow:hidden; background:var(--steel); color:var(--paper); border-block:1px solid var(--deep-steel); }
.ticker-track { display:flex; width:max-content; animation:ticker 32s linear infinite; }
.ticker-track span { display:inline-flex; align-items:center; gap:28px; padding:14px 0 14px 28px; font:600 15px/1 "Barlow Condensed",sans-serif; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.ticker-track span:after { content:"+"; color:var(--night); font-weight:400; font-size:18px; }
.ticker:hover .ticker-track { animation-play-state:paused; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* Carrusel con fotos POV reales */
.sample-photo { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.05); animation:ken 9s ease-out both; }
.sample-visual.has-video:after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(29,45,61,.45),transparent 30%,transparent 75%,rgba(29,45,61,.35)); }
.sample-visual.has-video .sample-axis { z-index:1; background:var(--light-steel); opacity:.35; }
.sample-visual.has-video .sample-hud { color:var(--light-steel); }
@keyframes ken { from { transform:scale(1.08); } to { transform:scale(1); } }

@media (max-width:620px) { .hero-pov { aspect-ratio:1.3; } .pov-box text { font-size:22px; } }
@media (prefers-reduced-motion:reduce) {
  .ticker-track { animation:none; flex-wrap:wrap; width:auto; }
  .pov-box rect,.pov-bones { stroke-dashoffset:0; }
  .pov-box text,.pov-joints circle,.pov-box-obj rect { opacity:1; }
  .pov-scanline { display:none; }
}
.hero-pov img { object-position:100% 50%; }
.carousel-copy h3 { font-size:clamp(34px,4vw,54px); overflow-wrap:anywhere; }
@media (max-width:620px) { .section-intro .section-tag { margin-bottom:22px; } }

/* v4 — hero visual más chico + leyenda que explica la detección de manos */
.hero-inner { grid-template-columns:minmax(0,1.3fr) minmax(280px,.62fr); }
.hero-pov { overflow:visible; aspect-ratio:auto; border:0; }
.pov-frame { position:relative; aspect-ratio:1.05; overflow:hidden; border:1px solid var(--light-steel); }
.hero-pov:after { display:none; }
.pov-frame:after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(29,45,61,.55),transparent 22%,transparent 72%,rgba(29,45,61,.7)),repeating-linear-gradient(0deg,rgba(29,45,61,.14) 0 1px,transparent 1px 3px); }
.pov-caption { margin-top:16px; color:#b9c6d1; font-size:14px; line-height:1.45; }
.pov-caption b { color:var(--paper); font-weight:600; }
.pov-caption span { display:block; margin-top:6px; color:#8295a5; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:850px) { .hero-inner { grid-template-columns:1fr; } .hero-pov { max-width:440px; } }
.pov-frame { aspect-ratio:1.3; }
.carousel-copy h3 { font-size:clamp(32px,3.4vw,48px); overflow-wrap:normal; hyphens:manual; }

/* v5 — muro de cámaras (reemplaza el carrusel) */
.feed-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,auto); gap:10px; }
.feed { position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--night); border:1px solid var(--line); }
.feed-xl { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.feed video,.feed img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.05); transition:filter .4s ease, transform .8s var(--ease); }
.feed:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(29,45,61,.55),transparent 28%,transparent 55%,rgba(29,45,61,.85)); }
.feed:hover video,.feed:hover img { filter:none; transform:scale(1.03); }
.feed:hover { border-color:var(--steel); }
.feed-hud { position:absolute; z-index:1; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; color:var(--light-steel); font-size:9px; font-weight:700; letter-spacing:.15em; font-variant-numeric:tabular-nums; }
.feed-hud span { display:inline-flex; align-items:center; gap:7px; }
.feed-dot { width:6px; height:6px; border:1px solid var(--light-steel); border-radius:50%; }
.feed figcaption { position:absolute; z-index:1; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; gap:2px; color:var(--paper); }
.feed figcaption b { font:600 22px/1 "Barlow Condensed",sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.feed-xl figcaption b { font-size:clamp(28px,3.4vw,44px); }
.feed figcaption span { color:var(--light-steel); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
@media (max-width:850px) { .feed-wall { grid-template-columns:repeat(2,minmax(0,1fr)); } .feed-xl { grid-row:span 1; aspect-ratio:16/9; } }
@media (max-width:520px) { .feed-wall { grid-template-columns:1fr; } .feed-xl { grid-column:auto; } }

/* v6 — carrusel solo de clips, escenario más grande */
.sample-carousel { grid-template-columns:minmax(0,1.9fr) minmax(260px,.6fr); }
.carousel-stage .sample-visual { min-height:0; aspect-ratio:16/9; height:auto; }
.sample-visual .sample-video { filter:grayscale(.15) contrast(1.05); }
.sample-progress i { transition:width .25s linear; }
.carousel-stage { padding:12px; }
@media (max-width:850px) { .carousel-stage .sample-visual { min-height:0; } }
@media (max-width:620px) { .carousel-stage .sample-visual { min-height:0; aspect-ratio:4/3; } }
.carousel-copy { padding:clamp(22px,3vw,36px); }
.carousel-copy h3 { font-size:clamp(30px,3vw,44px); }

/* v7 — muro 2×2 solo de clips, limpio */
.feed-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.feed { aspect-ratio:16/9; border:1px solid var(--line); }
.feed:after { background:linear-gradient(180deg,rgba(29,45,61,.5),transparent 26%,transparent 62%,rgba(29,45,61,.8)); }
.feed video { filter:grayscale(.35) contrast(1.05); }
.feed figcaption b { font-size:clamp(22px,2.4vw,30px); }
.feed-corners,.feed-corners:before,.feed-corners:after { position:absolute; pointer-events:none; }
.feed-corners { inset:10px; z-index:1; border:1px solid transparent; }
.feed-corners:before,.feed-corners:after { content:""; width:14px; height:14px; border-color:var(--light-steel); border-style:solid; opacity:.8; }
.feed-corners:before { left:-1px; bottom:-1px; border-width:0 0 1px 1px; }
.feed-corners:after { right:-1px; bottom:-1px; border-width:0 1px 1px 0; }
.feed-hud { top:16px; left:18px; right:18px; }
.feed figcaption { left:18px; right:18px; bottom:18px; }
.feed:hover { border-color:var(--steel); }
@media (max-width:620px) { .feed-wall { grid-template-columns:1fr; gap:10px; } }
.feed figcaption { bottom:28px; left:24px; } .feed-hud { left:24px; right:24px; }
.hero-bottom:hover { color:var(--light-steel); }

/* v9 — imagen del hero más grande en desktop */
@media (min-width:851px) {
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(400px,1fr); gap:clamp(40px,5vw,80px); }
  .pov-frame { aspect-ratio:1.4; }
  .pov-caption { max-width:520px; }
}

/* v10 — cada cámara rota entre clips con fundido */
.feed video { transition:opacity .35s ease, filter .4s ease, transform .8s var(--ease); }
.feed.is-switching video { opacity:0; }
.feed figcaption b,.feed figcaption span { transition:opacity .35s ease; }
.feed.is-switching figcaption b,.feed.is-switching figcaption span { opacity:0; }

/* v11 — sala de clips: reproductor grande + filtros + tira de miniaturas */
.reel { display:flex; flex-direction:column; gap:14px; }
.reel-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
.reel-filters { display:flex; flex-wrap:wrap; gap:6px; }
.reel-filters button { padding:8px 12px; border:1px solid var(--line); background:transparent; color:var(--deep-steel); font:600 13px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; text-transform:uppercase; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.reel-filters button:hover { border-color:var(--steel); color:var(--steel); }
.reel-filters button.active { background:var(--night); border-color:var(--night); color:var(--paper); }
.reel-count { margin:0; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.reel-count b { color:var(--steel); font:600 20px/1 "Barlow Condensed",sans-serif; letter-spacing:.02em; }
.reel-count i { margin:0 6px; color:var(--line); font-style:normal; }

.reel-stage { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--night); border:1px solid var(--line); }
.reel-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.05); transition:opacity .3s ease; }
.reel-stage:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(29,45,61,.5),transparent 22%,transparent 60%,rgba(29,45,61,.85)); }
.reel.is-switching .reel-stage video,.reel.is-switching .reel-caption { opacity:0; }
.reel-stage .feed-hud { font-size:10px; }
.reel-stage .feed-hud b { color:var(--light-steel); font-weight:700; }
.reel-caption { position:absolute; z-index:1; left:clamp(18px,3vw,36px); bottom:clamp(22px,3.4vw,44px); display:flex; flex-direction:column; gap:6px; color:var(--paper); transition:opacity .3s ease; }
.reel-caption b { font:600 clamp(34px,5.4vw,72px)/.9 "Barlow Condensed",sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.reel-caption span { color:var(--light-steel); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.reel-nav { position:absolute; z-index:1; right:clamp(18px,3vw,36px); bottom:clamp(22px,3.4vw,44px); display:flex; gap:8px; }
.reel-nav button { width:42px; height:42px; border:1px solid color-mix(in srgb,var(--light-steel) 60%,transparent); background:color-mix(in srgb,var(--night) 55%,transparent); color:var(--paper); font-size:18px; backdrop-filter:blur(6px); transition:background .2s ease; }
.reel-nav button:hover { background:var(--steel); }
.reel-progress { position:absolute; z-index:1; left:0; right:0; bottom:0; height:3px; background:rgba(148,188,227,.2); }
.reel-progress i { display:block; height:100%; width:0; background:var(--light-steel); transition:width .25s linear; }

.reel-strip { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.reel-thumb { position:relative; flex:0 0 clamp(128px,15vw,176px); aspect-ratio:16/9; padding:0; overflow:hidden; background:var(--night); border:1px solid var(--line); scroll-snap-align:start; text-align:left; }
.reel-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.7) brightness(.75); transition:filter .3s ease, transform .5s var(--ease); }
.reel-thumb:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(29,45,61,.85)); }
.reel-thumb:hover img { filter:grayscale(0) brightness(.95); transform:scale(1.05); }
.reel-thumb.active { border-color:var(--steel); outline:1px solid var(--steel); outline-offset:-2px; }
.reel-thumb.active img { filter:none; }
.reel-thumb-n { position:absolute; z-index:1; top:6px; left:8px; color:var(--light-steel); font-size:9px; font-weight:700; letter-spacing:.14em; }
.reel-thumb-t { position:absolute; z-index:1; left:8px; right:8px; bottom:8px; color:var(--paper); font:600 14px/1 "Barlow Condensed",sans-serif; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reel-thumb i { position:absolute; z-index:1; left:0; bottom:0; height:2px; width:0; background:var(--light-steel); }
.reel-thumb:not(.active) i { width:0 !important; }

@media (max-width:620px) {
  .reel-stage { aspect-ratio:4/3; }
  .reel-nav { top:44px; bottom:auto; }
  .reel-count { width:100%; }
}

/* v12 — contador genérico */
.reel-count { color:var(--deep-steel); font-size:11px; }
.reel-count:before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:#c9483f; vertical-align:1px; animation:rec-blink 1.4s steps(2,start) infinite; }

/* v13 — hero: video real ↔ manos en 3D */
.hero-pov video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pov-frame { aspect-ratio:1.6; background:#0f1a26; }
@media (min-width:851px) { .pov-frame { aspect-ratio:1.6; } }
.pov-frame:after { background:linear-gradient(180deg,rgba(29,45,61,.6),transparent 20%,transparent 76%,rgba(29,45,61,.75)); }
#hero-mode { transition:color .3s ease; }
.pov-frame.is-3d #hero-mode { color:var(--paper); }

/* v14 — sección "El dato": capa 2, acciones etiquetadas */
.layers { background:var(--paper); }
.act { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr); gap:14px; align-items:stretch; }
.act-stage { position:relative; margin:0; aspect-ratio:960/534; overflow:hidden; background:var(--night); border:1px solid var(--line); }
.act-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.act-stage:before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(29,45,61,.55),transparent 22%); }
.act-stage .feed-hud { z-index:2; font-size:10px; }
.act-stage .feed-hud b { color:var(--light-steel); font-weight:700; }
.act-labels { position:absolute; z-index:2; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:8px; padding:clamp(28px,5vw,54px) clamp(16px,2.6vw,30px) clamp(20px,2.6vw,30px); background:linear-gradient(180deg,transparent,rgba(29,45,61,.94) 30%,var(--night) 100%); }
.act-row { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:baseline; gap:12px; margin:0; }
.act-row span { color:var(--light-steel); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.act-row b { color:var(--paper); font:600 clamp(20px,2.6vw,32px)/1 "Barlow Condensed",sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.act-row:first-child span { color:#5fd6c4; } .act-row:nth-child(2) span { color:#f06aa8; }
.act-labels.flash .act-row b { animation:act-in .45s var(--ease) both; }
.act-labels.flash .act-row:nth-child(2) b { animation-delay:.06s; }
@keyframes act-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.act-timeline { position:absolute; z-index:3; left:0; right:0; bottom:0; display:flex; gap:2px; height:4px; }
.act-timeline span { flex:1 1 0; background:rgba(148,188,227,.25); }
.act-timeline i { display:block; height:100%; width:0; background:var(--light-steel); }

.act-side { display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); background:#ececed; }
.act-side-title { display:flex; justify-content:space-between; margin:0; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--deep-steel); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.act-side-title span { color:var(--steel); }
.act-log { flex:1 1 0; min-height:0; margin:0; padding:0; list-style:none; overflow-y:auto; scrollbar-width:thin; }
.act-log li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); border-left:3px solid transparent; cursor:pointer; transition:background .25s ease,border-color .25s ease,opacity .25s ease; }
.act-log li:hover { background:var(--paper); }
.act-log li.done { opacity:.5; }
.act-log li.active { background:var(--night); border-left-color:var(--light-steel); }
.act-log-tc { color:var(--steel); font-size:11px; font-weight:700; letter-spacing:.08em; font-variant-numeric:tabular-nums; padding-top:2px; }
.act-log-txt { display:flex; flex-direction:column; gap:2px; }
.act-log-txt b { color:var(--graphite); font:600 15px/1.15 "Barlow Condensed",sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.act-log-txt i { display:none; margin-top:5px; color:var(--light-steel); font:400 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.act-log li.active .act-log-txt b { color:var(--paper); }
.act-log li.active .act-log-tc { color:var(--light-steel); }
.act-log li.active .act-log-txt i { display:block; }
.act-note { margin:0; padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.4; }
@media (max-width:850px) { .act { grid-template-columns:1fr; } .act-log { max-height:300px; flex:none; } }
@media (max-width:620px) { .act-stage { aspect-ratio:4/3.4; } .act-row { grid-template-columns:70px minmax(0,1fr); gap:8px; } }
.act-log { position:relative; }

/* v15 — capa 2: video original con su subtítulo; registro con traducción ES/EN */
.act-stage:before { background:linear-gradient(180deg,rgba(29,45,61,.45),transparent 16%); }
.act-side-title { align-items:center; gap:10px; }
.act-side-title > span:first-child { color:var(--deep-steel); margin-right:auto; }
.act-lang { display:inline-flex; border:1px solid var(--line); }
.act-lang button { padding:4px 8px; background:transparent; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em; }
.act-lang button.active { background:var(--night); color:var(--paper); }
.act-es,.act-en { display:flex; flex-direction:column; gap:3px; }
.act-es b { display:grid; grid-template-columns:30px minmax(0,1fr); gap:6px; align-items:baseline; }
.act-es em { font:700 9px/1 "Barlow",sans-serif; font-style:normal; letter-spacing:.12em; }
.act-es b:first-child em { color:#2a9d8f; } .act-es b:nth-child(2) em { color:#d1478a; }
.act-log li.active .act-es b:first-child em { color:#5fd6c4; } .act-log li.active .act-es b:nth-child(2) em { color:#f06aa8; }
.act-en { color:var(--muted); font:400 12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }
.act-log li.active .act-en { color:var(--tint); }
.act-side[data-lang="es"] .act-en { display:none; }
.act-side[data-lang="en"] .act-es { display:none; }
/* en la acción activa se muestra también el otro idioma, más chico */
.act-side[data-lang="es"] .act-log li.active .act-en { display:flex; margin-top:6px; font-size:11px; color:var(--light-steel); }
.act-side[data-lang="en"] .act-log li.active .act-es { display:flex; margin-top:7px; opacity:.85; }
.act-side[data-lang="en"] .act-log li.active .act-es b { font-size:13px; }
@media (max-width:620px) { .act-stage { aspect-ratio:960/534; } }