/* TotemXR — sistema visual compartido (home, museos, estudios)
   Tema oscuro por defecto; body.light para la página de museos. */
:root{
  --navy:#12202E; --navy-2:#182A3B; --navy-3:#21384D;
  --wall:#EEF1EF; --wall-2:#E2E7E4; --white:#FFFFFF;
  --ink:#14202B; --ink-soft:#4C5B68;
  --mist:#E7EDF0; --mist-soft:#9DB0BF;
  --blue:#3D74C4; --moss:#3FA67A; --moss-deep:#2A7A57; --amber:#E2B53C;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, sans-serif;
  --r-lg:26px; --r-md:16px; --r-sm:10px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{--bg:var(--navy);--bg-2:var(--navy-2);--bg-3:var(--navy-3);--fg:var(--mist);--fg-soft:var(--mist-soft);--rule:#2D4357;--accent:var(--amber);--accent-fg:var(--navy)}
body.light{--bg:var(--wall);--bg-2:var(--wall-2);--bg-3:#D6DDD9;--fg:var(--ink);--fg-soft:var(--ink-soft);--rule:#C8D0CC;--accent:var(--ink);--accent-fg:var(--wall)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-left:28px;padding-right:28px}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background:var(--grain);pointer-events:none;z-index:-1;opacity:.55}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px;position:relative;z-index:2}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:30px;width:auto}
.logo-mark{display:grid;gap:3px}
.logo-mark i{display:block;width:15px;height:6px;border-radius:2px;background:currentColor}
.logo-mark i:nth-child(2){background:var(--moss)}
.logo-mark i:nth-child(3){background:var(--amber)}
.nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;font-size:16px}
.nav ul a{text-decoration:none;color:var(--fg-soft);transition:color .15s}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--fg)}


/* Selector de idioma */
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(231,237,240,.35);font:700 13px/1 var(--body)}
.lang a{padding:8px 10px;border-radius:999px;text-decoration:none;color:var(--fg-soft);letter-spacing:.02em}
.lang a[aria-current]{background:var(--fg);color:var(--bg)}
.lang a:not([aria-current]):hover{color:var(--fg)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px/1 var(--body);padding:16px 24px;border-radius:999px;text-decoration:none;border:2px solid currentColor;transition:background .15s,color .15s,border-color .15s}
.btn-solid{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn-solid:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn-ghost:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Hero con video de fondo a pantalla completa */
.vhero{--fg:var(--mist);--fg-soft:#C9D5DE;--accent:var(--amber);--accent-fg:var(--navy);--bg:var(--navy);
  position:relative;min-height:min(94vh,1000px);display:flex;flex-direction:column;color:var(--mist);background:var(--navy);isolation:isolate;overflow:hidden}
.vhero > .wrap{width:100%}
.vhero > video.bg{transform-origin:50% 40%}
.vhero h1 .line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(231,237,240,.55);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--mist);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
/* Logos en movimiento continuo */
.logos.marquee{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos .track{display:flex;align-items:center;gap:88px;width:max-content;animation:marquee 38s linear infinite}
.logos .track:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.scroll-cue span,.logos .track{animation:none}}
.vhero > video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vhero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(18,32,46,.78) 0%,rgba(18,32,46,.35) 40%,rgba(18,32,46,0) 65%),
  linear-gradient(0deg,rgba(18,32,46,.96) 0%,rgba(18,32,46,.4) 30%,rgba(18,32,46,0) 55%),
  linear-gradient(180deg,rgba(18,32,46,.55) 0%,rgba(18,32,46,0) 16%)}
.vhero .hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:40px;padding-bottom:84px}
.vhero h1{font:700 clamp(44px,5.6vw,84px)/.98 var(--display);letter-spacing:-.035em;margin:0 0 26px;max-width:13.5ch;text-wrap:balance}
.vhero .lead{font-size:21px;line-height:1.55;color:#D3DDE5;max-width:34em;margin:0 0 34px}
.vhero .note{margin-top:28px;font-size:15px;color:#AFC0CD}
.vhero .btn-ghost{color:var(--mist)}
.vhero .btn-ghost:hover{background:var(--mist);color:var(--navy);border-color:var(--mist)}
.play{display:inline-flex;align-items:center;gap:12px;font:700 16px/1 var(--body);color:var(--mist);background:none;border:0;cursor:pointer;padding:8px 6px}
.play i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(231,237,240,.16);border:1px solid rgba(231,237,240,.4);backdrop-filter:blur(6px);transition:background .15s}
.play i::before{content:"";border-left:13px solid var(--mist);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.play:hover i{background:rgba(231,237,240,.3)}
.play span small{display:block;font-weight:400;font-size:14px;color:#AFC0CD;margin-top:3px}

/* Reel */
.reels{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.reel-card{margin:0}
.reel-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px}
.reel-card figcaption b{font:700 22px/1.2 var(--display);letter-spacing:-.01em}
.reel-card figcaption span{font-size:15px;color:var(--fg-soft)}
@media (max-width:960px){.reels{grid-template-columns:1fr}}

.reel{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
dialog.reel-dialog{width:min(1200px,94vw);padding:0;border:0;border-radius:var(--r-lg);background:#000;overflow:hidden}
dialog.reel-dialog::backdrop{background:rgba(10,18,26,.86);backdrop-filter:blur(4px)}
dialog.reel-dialog video{width:100%;aspect-ratio:16/9;display:block}
dialog.reel-dialog .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(231,237,240,.9);color:var(--navy);font:700 22px/1 var(--body);cursor:pointer;z-index:2}

/* Secciones */
.block{padding-top:112px;padding-bottom:112px}
.block.tight{padding-top:0}
.surface{background:var(--bg-2)}
.sec-head{max-width:740px;margin-bottom:56px}
.sec-head h2{font:700 clamp(34px,4.2vw,56px)/1.04 var(--display);letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance}
.sec-head p{color:var(--fg-soft);font-size:20px;margin:0}

/* Medios homogéneos: 16:10, mismo radio, video al pasar el cursor */
.media{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--bg-3)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s}
.media video{opacity:0}
.media.playing video{opacity:1}
.card:hover .media img,.card:hover .media video{transform:scale(1.03)}
.media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.media.title-tile{display:flex;align-items:flex-end;padding:22px;background:
  radial-gradient(60% 70% at 70% 30%, rgba(61,116,196,.55), transparent 70%),
  radial-gradient(50% 60% at 25% 85%, rgba(63,166,122,.4), transparent 70%), var(--navy-2)}
.media.title-tile span{position:relative;font:800 26px/1.05 var(--display);letter-spacing:-.02em;color:var(--mist);max-width:12em}
.media .badge{position:absolute;top:12px;left:12px;font-size:13px;font-weight:700;background:rgba(18,32,46,.8);color:var(--mist);padding:6px 10px;border-radius:8px;backdrop-filter:blur(6px)}

/* Tarjetas de trabajo */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 24px}
.card{grid-column:span 4;text-decoration:none;display:block}
.card.half{grid-column:span 6}
.card.wide{grid-column:span 8}
.card h3{font:700 22px/1.2 var(--display);letter-spacing:-.01em;margin:16px 0 4px}
.card .for{font-size:14px;font-weight:700;color:var(--moss);margin:16px 0 0}
.card .for + h3{margin-top:4px}
.card p{margin:0;color:var(--fg-soft);font-size:16px}
.card .result{margin-top:10px;font-size:15px;font-weight:700;color:var(--moss)}
body.light .card .for,body.light .card .result{color:var(--moss-deep)}

/* Banda destacada */
.feature{background:var(--navy);color:var(--mist)}
.feature .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding-top:104px;padding-bottom:104px}
.feature h2{font:700 clamp(36px,4.2vw,56px)/1.02 var(--display);letter-spacing:-.035em;margin:0 0 22px}
.feature p{color:var(--mist-soft);margin:0 0 18px;max-width:32em}
.feature .media{aspect-ratio:16/10}
.feature .media video{opacity:1}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid #2D4357}
.facts div{padding:18px 16px 0 0}
.facts b{display:block;font:800 30px/1.1 var(--display);color:var(--amber)}
.facts span{font-size:14px;color:var(--mist-soft)}

/* Logos de clientes: misma altura, monocromo */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:36px 48px;padding:40px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.logos img{width:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.75;transition:opacity .2s}
.logos img:hover{opacity:1}
body:not(.light) .logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.7}
.logos-caption{font-size:15px;color:var(--fg-soft);margin:0 0 18px;font-weight:400}

/* Cierre */
.close{border-radius:var(--r-lg);padding:76px 60px;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end;position:relative;overflow:hidden;isolation:isolate}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(50% 80% at 85% 20%, rgba(226,181,60,.28), transparent 70%),
  radial-gradient(50% 80% at 10% 100%, rgba(63,166,122,.35), transparent 70%)}
.close h2{font:700 clamp(36px,4.4vw,60px)/1.02 var(--display);letter-spacing:-.035em;margin:0 0 18px}
.close p{margin:0}
.close .ctas{display:grid;gap:12px}
.close.blue{background:var(--blue);color:#F3F6FA}
.close.blue p{color:#DCE6F4}
.close.blue .btn{color:#F3F6FA}
.close.blue .btn-solid{background:var(--amber);border-color:var(--amber);color:var(--navy)}
.close.blue .btn-solid:hover,.close.blue .btn-ghost:hover{background:#F3F6FA;border-color:#F3F6FA;color:var(--blue)}

footer{padding-top:56px;padding-bottom:64px;font-size:15px;color:var(--fg-soft)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 32px}
footer a{text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{border-color:var(--fg)}

@media (max-width:960px){
  .nav ul{display:none}
  .vhero{min-height:88vh}
  .vhero .hero{padding-bottom:56px}
  .vhero::after{background:linear-gradient(0deg,rgba(18,32,46,.95) 10%,rgba(18,32,46,.45) 60%,rgba(18,32,46,.6) 100%)}
  .feature .inner{grid-template-columns:1fr;padding-top:72px;padding-bottom:72px}
  .card,.card.half,.card.wide{grid-column:span 12}
  .logos{justify-content:center}
  .close{grid-template-columns:1fr;padding:48px 28px}
  .block{padding-top:80px;padding-bottom:80px}
  .block.tight{padding-top:0}
}
@media (min-width:600px) and (max-width:960px){.card,.card.half{grid-column:span 6}}
@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding-left:16px;padding-right:16px}
  .facts{grid-template-columns:1fr}
  .nav-right .btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .media img,.media video{transition:none}
}

/* Equipo */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.person{display:flex;gap:18px;align-items:center}
.person img,.person .mono{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none}
.person .mono{display:grid;place-items:center;background:var(--blue);color:#F3F6FA;font:800 28px/1 var(--display)}
.person h3{font:700 21px/1.2 var(--display);margin:0}
.person p{margin:4px 0 0;color:var(--fg-soft);font-size:16px}
@media (max-width:960px){.team{grid-template-columns:1fr}}