/* Eye Candy — shared shell. Palette taken from the logo: red shutter on near-black. */
:root{
  --ink:#0d0d0f; --ink2:#141417; --line:#26262a; --line2:#34343a;
  --fg:#f2f2f3; --mut:#8a8a90; --dim:#5a5a60;
  --red:#e0261c; --red-d:#b01712;
  --sans:'Helvetica Neue',Helvetica,Arial,-apple-system,system-ui,sans-serif;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--fg);font:400 16px/1.62 var(--sans);
     -webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;
     flex-direction:column;min-height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;width:100%}
@media(max-width:600px){.wrap{padding:0 18px}}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
main{flex:1}

/* nav */
nav{position:sticky;top:0;z-index:90;background:rgba(13,13,15,.9);
    backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand img{width:34px;height:34px}
.brand b{font-weight:700;letter-spacing:.13em;font-size:.78rem;text-transform:uppercase}
.navlinks{display:flex;gap:23px;font-size:.75rem;letter-spacing:.11em;
          text-transform:uppercase;color:var(--mut);align-items:center;flex-wrap:wrap}
.navlinks a{transition:color .2s;padding:4px 0;border-bottom:1px solid transparent}
.navlinks a:hover{color:var(--fg)}
.navlinks a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--red)}
.navlinks .soon{color:var(--dim)}
.navlinks .soon::after{content:"pronto";font-size:.58rem;letter-spacing:.1em;
  color:var(--red);border:1px solid var(--red);border-radius:2px;padding:1px 4px;margin-left:6px}
@media(max-width:1000px){.navlinks{display:none}}

/* type */
h1{font-size:clamp(2.2rem,5.6vw,4.1rem);line-height:1.03;font-weight:700;
   letter-spacing:-.034em;max-width:22ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--red)}
h2{font-size:clamp(1.4rem,3.2vw,2rem);letter-spacing:-.024em;font-weight:700;text-wrap:balance}
.kicker{color:var(--red);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
        font-weight:700;margin-bottom:20px}
.lede{margin-top:22px;max-width:64ch;color:var(--mut);font-size:1.04rem}
.rule{width:62px;height:3px;background:var(--red);margin:30px 0 0}
.snote{color:var(--dim);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.intro{color:var(--mut);max-width:66ch;margin-bottom:28px}

header.page{padding:86px 0 66px;border-bottom:1px solid var(--line);position:relative}
header.page::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 86% at 88% 4%,rgba(224,38,28,.11),transparent 60%)}
section{padding:70px 0;border-bottom:1px solid var(--line)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
       margin-bottom:32px;flex-wrap:wrap}

/* buttons */
.cta{margin-top:32px;display:flex;gap:13px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;font-size:.78rem;font-weight:700;
     letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line2);transition:.2s}
.btn:hover{border-color:var(--fg)}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:var(--red-d);border-color:var(--red-d)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* cards / grids */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;
     background:var(--line);border:1px solid var(--line)}
.s{background:var(--ink);padding:25px 23px}
.s .n{color:var(--red);font-size:.71rem;letter-spacing:.18em;font-weight:700;
      font-variant-numeric:tabular-nums}
.s h3{font-size:1.02rem;margin:9px 0 7px;letter-spacing:-.012em}
.s p{color:var(--mut);font-size:.89rem}

.cgroup + .cgroup{margin-top:36px}
.cgroup h3{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;
           color:var(--red);font-weight:700;margin-bottom:6px}
.cgroup .role{color:var(--dim);font-size:.82rem;margin-bottom:14px;max-width:72ch}
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
         gap:1px;background:var(--line);border:1px solid var(--line)}
.client{background:var(--ink);padding:22px 19px;display:flex;flex-direction:column;
        justify-content:center;gap:5px;min-height:100px}
.client b{font-size:1rem;font-weight:700}
.client span{font-size:.76rem;color:var(--mut);line-height:1.45}

.credits{border-top:1px solid var(--line)}
.credit{display:grid;grid-template-columns:1fr 150px;gap:22px;padding:20px 0;
        border-bottom:1px solid var(--line);align-items:start}
@media(max-width:700px){.credit{grid-template-columns:1fr;gap:7px}}
.credit h4{font-size:1.01rem;font-weight:700;letter-spacing:-.012em}
.credit .org{color:var(--red);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
             margin-top:5px;font-weight:700}
.credit p{color:var(--mut);font-size:.9rem;margin-top:9px;max-width:74ch}
.credit .yrs{color:var(--dim);font-size:.8rem;font-variant-numeric:tabular-nums;
             white-space:nowrap;letter-spacing:.04em}
@media(min-width:701px){.credit .yrs{text-align:right}}

/* gallery */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{padding:8px 16px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
      color:var(--mut);border:1px solid var(--line);cursor:pointer;background:none;
      font-family:inherit;transition:.18s}
.chip:hover{color:var(--fg);border-color:var(--line2)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
figure{background:var(--ink2);border:1px solid var(--line);cursor:zoom-in;
       transition:transform .25s,border-color .25s}
figure:hover{transform:translateY(-3px);border-color:var(--line2)}
figure .shot{border-bottom:2px solid var(--red);width:100%;
             aspect-ratio:4/3;object-fit:cover;object-position:center}
figcaption{padding:11px 14px;font-size:.72rem;letter-spacing:.11em;
           text-transform:uppercase;color:var(--mut)}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:26px}}
.feature h3{font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:-.02em;margin-bottom:12px}
.feature p{color:var(--mut);margin-bottom:11px}
.badge{display:inline-block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
       color:var(--red);border:1px solid var(--red);padding:5px 11px;margin-bottom:15px}
.fimg{border:1px solid var(--line);border-bottom:2px solid var(--red)}
.specs{list-style:none;margin-top:16px;font-size:.87rem;color:var(--mut)}
.specs li{padding:7px 0;border-top:1px solid var(--line)}
.specs b{color:var(--fg);font-weight:600}

/* coming soon */
.soonbox{border:1px solid var(--line);background:
  repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(224,38,28,.045) 11px,rgba(224,38,28,.045) 22px);
  padding:64px 34px;text-align:center}
.soonbox .badge{margin-bottom:20px}
.soonbox h2{margin-bottom:14px}
.soonbox p{color:var(--mut);max-width:56ch;margin:0 auto 10px}

/* contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:28px}
.cbox span{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
           color:var(--dim);margin-bottom:8px}
.cbox a{font-size:1rem}
.cbox a:hover{color:var(--red)}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--dim);font-size:.78rem}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.footlinks{display:flex;gap:18px;flex-wrap:wrap}
.footlinks a:hover{color:var(--fg)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,6,7,.96);display:none;
    align-items:center;justify-content:center;padding:32px}
.lb.on{display:flex}
.lb img{max-width:min(1200px,94vw);max-height:84vh;border-bottom:3px solid var(--red)}
.lb .cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:var(--mut);
         font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.lb button{position:absolute;background:none;border:0;color:var(--fg);cursor:pointer;
           font-size:2.2rem;line-height:1;padding:12px;font-family:inherit}
.lb .x{top:12px;right:20px}
.lb .prev{left:10px;top:50%;transform:translateY(-50%)}
.lb .next{right:10px;top:50%;transform:translateY(-50%)}
.lb button:hover{color:var(--red)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;
  scroll-behavior:auto!important}}

/* ---------- noticias ---------- */
.newsmeta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--dim);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.newsmeta b{color:var(--mut);font-weight:600}
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.na{display:flex;flex-direction:column;background:var(--ink2);border:1px solid var(--line);
    transition:transform .22s,border-color .22s;height:100%}
.na:hover{transform:translateY(-3px);border-color:var(--line2)}
.na .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:2px solid var(--red);
           background:#0a0a0c}
.na .nb{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.na .src{display:flex;gap:10px;align-items:center;font-size:.67rem;letter-spacing:.13em;
         text-transform:uppercase;color:var(--red);font-weight:700}
.na .src .ago{color:var(--dim);font-weight:400;letter-spacing:.08em}
.na h3{font-size:.99rem;line-height:1.33;letter-spacing:-.011em;font-weight:700}
.na p{font-size:.84rem;color:var(--mut);line-height:1.5}
.na .tag{margin-top:auto;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
         color:var(--dim);border:1px solid var(--line);padding:2px 7px;align-self:flex-start}
.newsempty{color:var(--mut);padding:40px 0}

/* ---------- aviso de lentes ---------- */
.glasses{display:flex;gap:16px;align-items:center;border:1px solid var(--line);
  background:var(--ink2);padding:16px 20px;margin-bottom:28px;flex-wrap:wrap}
.glasses .ic{width:42px;height:22px;flex:0 0 auto;border-radius:3px;
  background:linear-gradient(90deg,var(--red) 0 50%,#18b7c8 50% 100%);
  border:1px solid var(--line2)}
.glasses p{color:var(--mut);font-size:.88rem;margin:0}
.glasses b{color:var(--fg)}

/* ---------- selector de idioma ---------- */
.navlinks .lang{border:1px solid var(--line2);padding:3px 9px;color:var(--mut);
  letter-spacing:.14em;font-weight:700}
.navlinks .lang:hover{color:var(--fg);border-color:var(--fg)}

/* --- servicios con detalle ------------------------------------------- */
.svc-det .s{padding:27px 24px 26px}
.svc-det .s p{margin-bottom:14px}
.det{list-style:none;border-top:1px solid var(--line);padding-top:13px}
.det li{color:var(--dim);font-size:.82rem;line-height:1.5;padding:5px 0 5px 15px;position:relative}
.det li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;
     background:var(--red);opacity:.85}

/* --- proceso ---------------------------------------------------------- */
.steps{list-style:none;display:grid;gap:1px;background:var(--line);
     border:1px solid var(--line)}
.step{background:var(--ink);display:grid;grid-template-columns:76px 1fr;align-items:start;
     padding:22px 24px;gap:6px}
.stn{color:var(--red);font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.02em;
     font-variant-numeric:tabular-nums;opacity:.9}
.stb h4{font-size:1.02rem;letter-spacing:-.012em;margin-bottom:3px}
.stw{color:var(--dim);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
     margin-bottom:8px;font-variant-numeric:tabular-nums}
.stb p{color:var(--mut);font-size:.89rem;max-width:74ch}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:2px}.stn{font-size:1.1rem}}

.note{color:var(--dim);font-size:.82rem;margin-top:16px;max-width:82ch;
     border-left:2px solid var(--line2);padding-left:13px}

/* --- formatos de contratación ---------------------------------------- */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
     background:var(--line);border:1px solid var(--line)}
.mode{background:var(--ink);padding:26px 24px;display:flex;flex-direction:column;gap:9px}
.mode h4{font-size:1.06rem;letter-spacing:-.014em}
.mode p{color:var(--mut);font-size:.89rem;flex:1}
.mw{color:var(--red);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;
     font-weight:700;border-top:1px solid var(--line);padding-top:11px}

/* --- preguntas frecuentes -------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
     font-size:1rem;letter-spacing:-.008em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:15px;color:var(--red);
     font-size:1.2rem;line-height:1;transition:transform .18s ease}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--red)}
.qa summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.qa p{color:var(--mut);font-size:.9rem;max-width:80ch;padding:0 34px 20px 0}

.chip i{font-style:normal;color:var(--dim);font-size:.72em;margin-left:7px;
     font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] i{color:rgba(255,255,255,.55)}

/* --- ensayo (Stereoglitch) ------------------------------------------- */
.essay{max-width:74ch;display:flex;flex-direction:column;gap:17px}
.essay p{color:var(--mut);font-size:.97rem;line-height:1.72}
.essay p:first-child{color:var(--fg);font-size:1.08rem;line-height:1.62}
.essay b{color:var(--fg);font-weight:600}

.feature .mut{color:var(--dim);font-size:.83rem}

.chip i{pointer-events:none}

/* --- video de Stereoglitch -------------------------------------------- */
.vidbox{border:1px solid var(--line);background:#000;line-height:0}
.vidbox video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000}
.vtitle{font-size:1.14rem;letter-spacing:-.014em;margin:30px 0 9px}
.vintro{color:var(--mut);font-size:.97rem;line-height:1.7;max-width:74ch;margin-bottom:24px}

/* ======================================================================
   ULTRA — la capa de movimiento, brillo y profundidad.
   El segundo acento no es decorativo: rojo y cian son los dos ojos del
   anaglifo, que es el medio de la casa. Todo el glow sale de ese par.
   ====================================================================== */
:root{
  --cy:#35d6e6; --cy-d:#17a3b2;
  --glow-r:0 0 24px rgba(224,38,28,.45);
  --glow-c:0 0 22px rgba(53,214,230,.34);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* fondo vivo: dos manchas muy tenues que respiran, nunca compiten con la foto */
body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 18% 12%, rgba(224,38,28,.075), transparent 62%),
    radial-gradient(34vw 34vw at 84% 78%, rgba(53,214,230,.055), transparent 62%);
  animation:drift 44s var(--ease) infinite alternate}
@keyframes drift{to{transform:translate3d(3%,-2.5%,0) scale(1.09)}}

/* ---- navegación ---------------------------------------------------- */
nav{position:sticky;top:0;z-index:120;
  background:rgba(10,10,12,.72);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:padding .32s var(--ease),background .32s var(--ease)}
nav.small{background:rgba(10,10,12,.9)}
.brand img{width:46px;height:46px;transition:width .3s var(--ease),height .3s var(--ease),
  filter .3s var(--ease);filter:drop-shadow(0 0 10px rgba(224,38,28,.5))}
.brand:hover img{filter:drop-shadow(0 0 20px rgba(224,38,28,.85))
  drop-shadow(0 0 34px rgba(53,214,230,.3))}
nav.small .brand img{width:34px;height:34px}
.brand b{font-size:1.02rem;letter-spacing:-.008em;transition:font-size .3s var(--ease)}
nav.small .brand b{font-size:.92rem}
.navlinks a{position:relative;padding-bottom:4px}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--red),var(--cy));
  transition:right .34s var(--ease)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{right:0}
.navlinks a[aria-current]{text-shadow:0 0 16px rgba(224,38,28,.55)}

/* ---- vuelo 3D ------------------------------------------------------- */
.flight{position:relative;isolation:isolate;background:#000;overflow:hidden}
.flight canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .9s var(--ease)}
.flight canvas.on{opacity:1}
.flight canvas.no-gl{display:none}
.flight .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1}
.flight canvas.on ~ .fallback{opacity:0;transition:opacity .9s var(--ease)}
.flight::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.72) 0%,rgba(10,10,12,.18) 34%,
    rgba(10,10,12,.34) 68%,var(--ink) 100%)}
.flight > .wrap{position:relative;z-index:2}

.hero3d{min-height:min(92vh,880px);display:flex;align-items:flex-end;
  padding:120px 0 74px}
.hero3d h1{font-size:clamp(2.7rem,7.4vw,6.2rem);line-height:.94;letter-spacing:-.036em;
  text-wrap:balance;text-shadow:0 8px 60px rgba(0,0,0,.65)}
.hero3d h1 em{font-style:normal;color:var(--red);
  text-shadow:0 0 42px rgba(224,38,28,.5),0 8px 60px rgba(0,0,0,.6)}
.hero3d .lede{max-width:56ch;text-shadow:0 2px 24px rgba(0,0,0,.8)}

/* barra de progreso entre imágenes del vuelo */
.fdots{display:flex;gap:7px;margin-top:30px;position:relative;z-index:2}
.fdots button{width:30px;height:3px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.22);transition:background .3s var(--ease),
  box-shadow .3s var(--ease),width .3s var(--ease)}
.fdots button[aria-pressed="true"]{background:var(--red);width:46px;
  box-shadow:var(--glow-r)}
.fdots button:hover{background:var(--cy);box-shadow:var(--glow-c)}

/* visor interactivo de Stereoglitch */
.viewer{position:relative;border:1px solid var(--line);background:#000;
  aspect-ratio:16/9;overflow:hidden}
.viewer canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;opacity:0;transition:opacity .9s var(--ease)}
.viewer canvas.on{opacity:1}
.viewer canvas.no-gl{display:none}
.viewer .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viewer canvas.on ~ .fallback{opacity:0;transition:opacity .9s var(--ease)}
.viewer canvas.grabbing{cursor:grabbing}
.viewer .hint{position:absolute;left:16px;bottom:14px;z-index:3;
  color:rgba(255,255,255,.72);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;pointer-events:none;
  text-shadow:0 2px 14px rgba(0,0,0,.9);transition:opacity .4s var(--ease)}
.viewer.touched .hint{opacity:0}

/* ---- revelados al hacer scroll -------------------------------------- */
[data-reveal]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .72s var(--ease),transform .72s var(--ease);
  transition-delay:calc(var(--d,0) * 85ms)}
[data-reveal].in{opacity:1;transform:none}

/* ---- botones -------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:color .28s var(--ease),border-color .28s var(--ease),
  box-shadow .28s var(--ease),transform .28s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.btn:hover{border-color:var(--red);box-shadow:var(--glow-r);transform:translateY(-2px)}
.btn:hover::before{transform:scaleX(1)}
.btn.solid:hover{box-shadow:0 0 30px rgba(224,38,28,.6)}
.btn:active{transform:translateY(0)}

/* ---- rejilla: el hover separa los canales, como unos lentes mal puestos */
.grid figure{transition:transform .42s var(--ease),filter .42s var(--ease)}
.grid figure:hover,.grid figure:focus-visible{transform:translateY(-5px);
  filter:drop-shadow(-4px 0 0 rgba(224,38,28,.5))
         drop-shadow(4px 0 0 rgba(53,214,230,.42))
         drop-shadow(0 14px 34px rgba(0,0,0,.6))}
.grid figure img{transition:transform .6s var(--ease)}
.grid figure:hover img{transform:scale(1.022)}

/* ---- encabezados, fichas, tarjetas ---------------------------------- */
.rule{background:linear-gradient(90deg,var(--red),var(--cy));height:2px;
  box-shadow:0 0 18px rgba(224,38,28,.45)}
.kicker{text-shadow:0 0 22px rgba(224,38,28,.4)}
.shead h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.024em}
.chip{transition:color .26s var(--ease),border-color .26s var(--ease),
  background .26s var(--ease),box-shadow .26s var(--ease)}
.chip:hover{border-color:var(--cy);box-shadow:var(--glow-c)}
.chip[aria-pressed="true"]{box-shadow:var(--glow-r)}
.s,.mode,.step{transition:background .3s var(--ease),transform .3s var(--ease)}
.s:hover,.mode:hover{background:var(--ink2);transform:translateY(-3px)}
.s .n,.stn{text-shadow:0 0 20px rgba(224,38,28,.45)}
.soonbox{box-shadow:inset 0 0 70px rgba(224,38,28,.07)}
.lb img{box-shadow:0 0 90px rgba(0,0,0,.9),0 0 46px rgba(224,38,28,.18)}
.vidbox{box-shadow:0 0 56px rgba(0,0,0,.6)}
.vidbox:hover{box-shadow:0 0 56px rgba(0,0,0,.6),0 0 34px rgba(53,214,230,.14)}
.fimg{transition:transform .6s var(--ease),filter .5s var(--ease)}
a:hover > .fimg{transform:scale(1.015);
  filter:drop-shadow(-3px 0 0 rgba(224,38,28,.4)) drop-shadow(3px 0 0 rgba(53,214,230,.34))}

/* ---- pie con la marca en grande ------------------------------------- */
.bigmark{display:flex;align-items:center;gap:22px;padding:56px 0 8px;
  border-top:1px solid var(--line)}
.bigmark img{width:88px;height:88px;filter:drop-shadow(0 0 26px rgba(224,38,28,.45))}
.bigmark div b{display:block;font-size:clamp(1.3rem,3.4vw,2rem);letter-spacing:-.028em}
.bigmark div span{color:var(--dim);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase}
@media(max-width:560px){.bigmark img{width:62px;height:62px}}

/* ---- quien pide menos movimiento, recibe menos ---------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  body::before{animation:none}
}

/* selector de imágenes del visor */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-top:0}
.thumb{border:0;padding:0;background:var(--ink);cursor:pointer;line-height:0;
  position:relative;overflow:hidden;aspect-ratio:3/2}
.thumb img{width:100%;height:100%;object-fit:cover;opacity:.44;
  transition:opacity .3s var(--ease),transform .5s var(--ease)}
.thumb:hover img{opacity:.8;transform:scale(1.05)}
.thumb[aria-pressed="true"] img{opacity:1}
.thumb[aria-pressed="true"]::after{content:"";position:absolute;inset:0;
  border:2px solid var(--red);box-shadow:inset 0 0 22px rgba(224,38,28,.45)}
.thumb:focus-visible{outline:2px solid var(--cy);outline-offset:-2px}

/* ======================================================================
   CINE — la página se comporta como material de rodaje: ventanilla de
   gate, grano, destello anamórfico y timecode corriendo. Nada de esto es
   adorno genérico: es el vocabulario del oficio de Rudy.
   ====================================================================== */

/* el velo del héroe ya no es una cortina pareja: pesa del lado del texto y
   suelta la imagen del otro, como un degradado de cámara */
.flight::after{
  background:
    linear-gradient(101deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.86) 26%,
      rgba(8,8,10,.42) 56%, rgba(8,8,10,.14) 78%, rgba(8,8,10,.30) 100%),
    linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.05) 20%,
      rgba(8,8,10,0) 58%, rgba(8,8,10,.55) 84%, var(--ink) 100%)}

/* --- ventanilla: las barras entran como si se abriera el obturador --- */
.gate{position:absolute;inset:0;z-index:3;pointer-events:none}
.gate span{position:absolute;left:0;right:0;height:38px;background:#06060700;
  background:linear-gradient(180deg,#060607,rgba(6,6,7,.86));
  transform:scaleY(0);transform-origin:top;
  animation:gateIn 1.15s .25s var(--ease) forwards}
.gate span:last-child{top:auto;bottom:0;transform-origin:bottom;
  background:linear-gradient(0deg,#060607,rgba(6,6,7,.86))}
.gate span:first-child{top:0}
.gate::before,.gate::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,38,28,.55) 22%,
    rgba(53,214,230,.5) 78%,transparent);opacity:0;
  animation:gateLine .9s 1.05s var(--ease) forwards}
.gate::before{top:38px} .gate::after{bottom:38px}
@keyframes gateIn{to{transform:scaleY(1)}}
@keyframes gateLine{to{opacity:1}}
@media(max-width:620px){.gate span{height:24px}
  .gate::before{top:24px}.gate::after{bottom:24px}}

/* --- destello anamórfico: la raya horizontal del lente de cine -------- */
.flare{position:absolute;left:-10%;right:-10%;top:38%;height:2px;z-index:2;
  pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(53,214,230,.0) 12%,
    rgba(53,214,230,.5) 46%,rgba(120,230,240,.75) 50%,rgba(53,214,230,.5) 54%,
    rgba(53,214,230,0) 88%,transparent);
  filter:blur(1.4px);opacity:.5;
  animation:flare 19s var(--ease) infinite alternate}
.flare::after{content:"";position:absolute;inset:-14px 0;
  background:radial-gradient(60% 100% at 50% 50%,rgba(53,214,230,.16),transparent 70%);
  filter:blur(9px)}
@keyframes flare{
  0%{transform:translate3d(-6%,0,0) scaleX(.9);opacity:.34}
  50%{opacity:.62}
  100%{transform:translate3d(6%,26px,0) scaleX(1.06);opacity:.4}}

/* --- pizarra: marca, timecode y formato, como el HUD de una cámara --- */
.slate{position:absolute;right:26px;top:60px;z-index:4;display:flex;gap:14px;
  align-items:center;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);pointer-events:none;
  font-variant-numeric:tabular-nums;
  opacity:0;animation:gateLine 1s 1.5s var(--ease) forwards}
.slate b{color:var(--red);text-shadow:0 0 16px rgba(224,38,28,.7)}
.slate .tc{color:rgba(255,255,255,.88);letter-spacing:.14em;
  padding:3px 9px;border:1px solid rgba(255,255,255,.16);
  background:rgba(6,6,7,.5)}
.slate .rec{width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 12px rgba(224,38,28,.9);animation:rec 2s steps(1) infinite}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.2}}
@media(max-width:820px){.slate{display:none}}

/* --- grano de película sobre todo el sitio --------------------------- */
.grain{position:fixed;inset:-60%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(5) infinite}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}      20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)}  60%{transform:translate3d(-2%,-2%,0)}
  80%{transform:translate3d(3%,1%,0)}   100%{transform:translate3d(0,0,0)}}

/* --- créditos de cierre ---------------------------------------------- */
.credits-roll{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border-top:1px solid var(--line);margin-top:34px}
.cr{background:var(--ink);padding:20px 22px}
.cr span{display:block;color:var(--dim);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:6px}
.cr b{font-weight:500;font-size:.92rem;letter-spacing:-.01em}

@media (prefers-reduced-motion: reduce){
  .grain,.flare,.gate span,.gate::before,.gate::after,.slate{animation:none}
  .gate span{transform:scaleY(1)}
  .gate::before,.gate::after,.slate{opacity:1}
}

/* ======================================================================
   ESCENARIO — el visor deja de ser una cajita dentro de la columna y pasa
   a ocupar el ancho completo, con controles encima como una plataforma de
   cámara. Es la pieza central de Stereoglitch.
   ====================================================================== */
.stage-wrap{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stage{position:relative;width:100%;height:min(78vh,760px);min-height:420px;
  background:#050506;overflow:hidden;isolation:isolate}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;opacity:0;transition:opacity 1s var(--ease);touch-action:none}
.stage canvas.on{opacity:1}
.stage canvas.grabbing{cursor:grabbing}
.stage canvas.no-gl{display:none}
.stage .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage canvas.on ~ .fallback{opacity:0;transition:opacity 1s var(--ease)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(5,5,6,.82) 0%,rgba(5,5,6,.1) 22%,
    rgba(5,5,6,0) 52%,rgba(5,5,6,.5) 82%,rgba(5,5,6,.92) 100%)}

.stage-top{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none;
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:30px clamp(20px,4vw,56px)}
.stage-top h2{font-size:clamp(1.6rem,4vw,2.9rem);letter-spacing:-.03em;
  text-shadow:0 6px 40px rgba(0,0,0,.8)}
.stage-top span{color:var(--cy);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;text-shadow:0 0 18px rgba(53,214,230,.6)}

/* flechas grandes: que se vea que se puede cambiar de foto */
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:58px;height:58px;border:1px solid rgba(255,255,255,.2);background:rgba(6,6,7,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .26s var(--ease),border-color .26s var(--ease),
    box-shadow .26s var(--ease),transform .26s var(--ease)}
.nav-arrow:hover{background:var(--red);border-color:var(--red);
  box-shadow:0 0 34px rgba(224,38,28,.6);transform:translateY(-50%) scale(1.07)}
.nav-arrow:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
.nav-arrow.prev{left:clamp(12px,2.5vw,34px)}
.nav-arrow.next{right:clamp(12px,2.5vw,34px)}
@media(max-width:620px){.nav-arrow{width:44px;height:44px;font-size:1.3rem}}

/* barra de controles: pie de foto, profundidad y mapa */
.stage-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap;
  padding:20px clamp(20px,4vw,56px) 24px}
.sb-cap{color:#fff;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 2px 16px rgba(0,0,0,.9);flex:1;min-width:130px}
.sb-slider{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.sb-slider input{-webkit-appearance:none;appearance:none;width:clamp(96px,16vw,190px);
  height:3px;background:rgba(255,255,255,.26);cursor:pointer;outline:none}
.sb-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:var(--red);box-shadow:0 0 16px rgba(224,38,28,.85);
  cursor:pointer;border:0}
.sb-slider input::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:0;
  background:var(--red);box-shadow:0 0 16px rgba(224,38,28,.85);cursor:pointer}
.sb-slider input:focus-visible{outline:2px solid var(--cy);outline-offset:6px}
.sb-btn{border:1px solid rgba(255,255,255,.22);background:rgba(6,6,7,.42);color:#fff;
  padding:9px 17px;font:inherit;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .26s var(--ease),border-color .26s var(--ease),
    box-shadow .26s var(--ease)}
.sb-btn:hover{border-color:var(--cy);box-shadow:var(--glow-c)}
.sb-btn[aria-pressed="true"]{background:var(--red);border-color:var(--red);
  box-shadow:var(--glow-r)}
.sb-btn:focus-visible{outline:2px solid var(--cy);outline-offset:3px}

.stage-hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.82);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.95);
  padding:9px 18px;border:1px solid rgba(255,255,255,.16);background:rgba(6,6,7,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .5s var(--ease)}
.stage.touched .stage-hint{opacity:0}

/* miniaturas más grandes, ya fuera del escenario */
.picks{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));margin-top:26px}
.thumb{aspect-ratio:16/10}

/* banda de video a todo lo ancho */
.stage-vid{height:auto;min-height:0;aspect-ratio:16/9;max-height:min(80vh,780px)}
.stage-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:#050506}

/* ======================================================================
   LOGO STEREOGLITCH — tres copias superpuestas. Las dos de encima se
   desplazan en horizontal y se fusionan en modo screen: sobre un logo que
   ya es rojo/cian, ese desfase es exactamente una mala registración de
   anaglifo. El gesto es el tema del proyecto, no un efecto prestado.
   ====================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sg-h1{margin:0}
.sglogo{position:relative;display:block;width:min(560px,78vw);margin:6px 0 4px;
  isolation:isolate}
.sglogo .lg{display:block;width:100%;height:auto}
.sglogo .lg-a,.sglogo .lg-b{position:absolute;inset:0;mix-blend-mode:screen;
  pointer-events:none}
.sglogo .lg-base{filter:drop-shadow(0 0 34px rgba(224,38,28,.28))
  drop-shadow(0 0 50px rgba(53,214,230,.2))}
.sglogo .lg-a{animation:glA 7.5s steps(1,end) infinite}
.sglogo .lg-b{animation:glB 7.5s steps(1,end) infinite}

/* el desajuste ocurre en ráfagas cortas y el resto del tiempo está limpio */
@keyframes glA{
  0%,85%   {opacity:0;transform:none;clip-path:inset(0 0 0 0)}
  86%      {opacity:.85;transform:translate3d(-9px,0,0);clip-path:inset(12% 0 46% 0)}
  88%      {opacity:.7; transform:translate3d(7px,-2px,0);clip-path:inset(58% 0 18% 0)}
  90%      {opacity:.9; transform:translate3d(-14px,1px,0);clip-path:inset(34% 0 40% 0)}
  92%      {opacity:.6; transform:translate3d(5px,0,0);clip-path:inset(70% 0 8% 0)}
  94%,100% {opacity:0;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes glB{
  0%,85%   {opacity:0;transform:none;clip-path:inset(0 0 0 0)}
  86%      {opacity:.75;transform:translate3d(11px,0,0);clip-path:inset(20% 0 52% 0)}
  89%      {opacity:.85;transform:translate3d(-6px,2px,0);clip-path:inset(4% 0 74% 0)}
  91%      {opacity:.65;transform:translate3d(13px,-1px,0);clip-path:inset(62% 0 14% 0)}
  93%      {opacity:.8; transform:translate3d(-8px,0,0);clip-path:inset(44% 0 30% 0)}
  95%,100% {opacity:0;transform:none;clip-path:inset(0 0 0 0)}}

/* al pasar el cursor, el desajuste se sostiene */
.sglogo:hover .lg-a{animation:glHoldA .55s steps(1,end) infinite}
.sglogo:hover .lg-b{animation:glHoldB .55s steps(1,end) infinite}
@keyframes glHoldA{
  0%{opacity:.8;transform:translate3d(-7px,0,0);clip-path:inset(16% 0 44% 0)}
  50%{opacity:.7;transform:translate3d(6px,1px,0);clip-path:inset(52% 0 22% 0)}
  100%{opacity:.8;transform:translate3d(-4px,0,0);clip-path:inset(30% 0 38% 0)}}
@keyframes glHoldB{
  0%{opacity:.7;transform:translate3d(9px,0,0);clip-path:inset(38% 0 36% 0)}
  50%{opacity:.8;transform:translate3d(-9px,-1px,0);clip-path:inset(8% 0 66% 0)}
  100%{opacity:.7;transform:translate3d(5px,0,0);clip-path:inset(60% 0 16% 0)}}

.sg-head{padding-bottom:18px}

@media (prefers-reduced-motion: reduce){
  .sglogo .lg-a,.sglogo .lg-b{animation:none;opacity:0}}

/* ======================================================================
   NOTICIAS — portada con jerarquía. La versión anterior era una lista de
   120 tarjetas idénticas; el problema no era estético sino de información:
   una de cada cinco notas era una historia repetida y no había forma de
   distinguir lo importante de lo accesorio.
   ====================================================================== */
.news-head{padding-bottom:26px}
.news-intro{max-width:70ch;display:flex;flex-direction:column;gap:14px;margin-top:8px}
.news-intro p{color:var(--mut);font-size:.98rem;line-height:1.72}
.news-intro p:first-child{color:var(--fg);font-size:1.08rem;line-height:1.64}
.news-intro b{color:var(--fg);font-weight:600}

/* barra pegajosa: estado, búsqueda y no leídos siempre a la mano */
.news-bar{position:sticky;top:0;z-index:90;background:rgba(10,10,12,.88);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
nav.small ~ main .news-bar{top:62px}
.news-bar-in{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);
  flex-wrap:wrap;padding:12px 28px}
.nstats{display:flex;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.nstats b{color:var(--fg);font-weight:600}
.nstats .nsep{padding-left:16px;border-left:1px solid var(--line2)}
@media(max-width:760px){.nstats .nsep{border:0;padding-left:0}}
.nsearch{position:relative;flex:1;min-width:190px}
.nsearch input{width:100%;background:var(--ink2);border:1px solid var(--line2);
  color:var(--fg);font:inherit;font-size:.88rem;padding:10px 34px 10px 14px;
  outline:none;transition:border-color .24s var(--ease),box-shadow .24s var(--ease)}
.nsearch input::placeholder{color:var(--dim)}
.nsearch input:focus{border-color:var(--cy);box-shadow:var(--glow-c)}
.nclear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--mut);font-size:1.2rem;cursor:pointer;padding:0 8px}
.nclear:hover{color:var(--red)}
.nread{white-space:nowrap}
.nread b{color:var(--red)}

/* facetas */
.nfacets .wrap{display:flex;flex-direction:column;gap:12px;padding-top:26px;padding-bottom:4px}
.fgroup{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.flabel{color:var(--dim);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  min-width:64px}

/* cada tema con su matiz: el ojo aprende la taxonomía sin leer */
.tag{display:inline-block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--line2);color:var(--mut);margin:0 6px 6px 0}
.tag.tb{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75)}
.t-camaras {border-color:rgba(224,38,28,.5); color:#ff8a82}
.t-opticas {border-color:rgba(53,214,230,.5); color:#7fe6f0}
.t-ia      {border-color:rgba(168,120,255,.5);color:#c4a5ff}
.t-luz     {border-color:rgba(255,193,74,.45);color:#ffd691}
.t-audio   {border-color:rgba(120,255,190,.4); color:#9dffd2}
.t-post    {border-color:rgba(120,170,255,.45);color:#a8c6ff}
.t-negocio {border-color:rgba(255,140,90,.42); color:#ffb48f}
.t-oficio  {border-color:rgba(190,190,200,.35);color:#cfcfd6}
.t-obra    {border-color:rgba(255,120,190,.42);color:#ffa3d0}
.t-industria{border-color:rgba(140,220,140,.38);color:#a9e3a9}

/* tarjeta base */
.nc{background:var(--ink2);border:1px solid var(--line);display:flex;flex-direction:column;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .34s var(--ease),border-color .34s var(--ease),
    box-shadow .34s var(--ease)}
.nc:hover,.nc:focus-visible,.nc.cur{transform:translateY(-4px);border-color:var(--line2);
  box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(53,214,230,.18)}
.nc:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.nc .ph{display:block;line-height:0;background:#0b0b0d;overflow:hidden}
.nc .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.nc:hover .ph img{transform:scale(1.04)}
.nc .nb{padding:18px 19px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.nc .src{color:var(--dim);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.nc .src .plus{font-style:normal;color:var(--red);font-weight:700;
  border:1px solid rgba(224,38,28,.4);padding:1px 5px;margin-left:6px}
.nc .ago{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.nc h3{font-size:1rem;line-height:1.32;letter-spacing:-.012em;text-wrap:balance}
.nc p{color:var(--mut);font-size:.86rem;line-height:1.58;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nc .ntags{margin-top:2px}
/* punto de no leído */
.nc.fresh::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--red),var(--cy));z-index:2}

/* la historia del día */
.nc.lead{flex-direction:row;background:var(--ink2)}
.nc.lead .ph{flex:0 0 54%;aspect-ratio:16/10}
.nc.lead .nb{padding:clamp(22px,3vw,40px);justify-content:center;gap:12px}
.nc.lead h3{font-size:clamp(1.4rem,2.9vw,2.15rem);line-height:1.1;letter-spacing:-.028em}
.nc.lead p{font-size:.98rem;-webkit-line-clamp:4}
.nc.lead .src{font-size:.68rem}
@media(max-width:820px){.nc.lead{flex-direction:column}.nc.lead .ph{flex:none;width:100%}}

/* los destacados */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.nc.sec .ph{aspect-ratio:16/9}
.nc.sec h3{font-size:1.04rem}
.nc.sec p{-webkit-line-clamp:2}

/* el río */
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.news .nc .ph{aspect-ratio:16/9}
.khint{color:var(--dim);font-size:.68rem;letter-spacing:.1em}
@media(max-width:700px){.khint{display:none}}

/* ---- panel de lectura ------------------------------------------------ */
.rd-veil{position:fixed;inset:0;z-index:180;background:rgba(5,5,7,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.reader{position:fixed;top:0;right:0;bottom:0;width:min(620px,100vw);z-index:190;
  background:var(--ink);border-left:1px solid var(--line2);
  transform:translateX(102%);transition:transform .42s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
  box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.reader.on{transform:none}
.rd-x{position:absolute;right:14px;top:12px;z-index:3;width:40px;height:40px;
  background:rgba(6,6,7,.66);border:1px solid rgba(255,255,255,.18);color:#fff;
  font-size:1.4rem;line-height:1;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rd-x:hover{background:var(--red);border-color:var(--red)}
.rd-x:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
#rd-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#0b0b0d}
.rd-body{padding:clamp(22px,4vw,34px);display:flex;flex-direction:column;gap:14px}
.rd-meta{display:flex;justify-content:space-between;gap:12px;color:var(--dim);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
#rd-title{font-size:clamp(1.3rem,3vw,1.85rem);line-height:1.18;letter-spacing:-.024em;
  text-wrap:balance}
#rd-sum{color:var(--mut);font-size:.98rem;line-height:1.74}
.rd-also{border-top:1px solid var(--line);padding-top:16px;display:flex;
  flex-direction:column;gap:10px}
.rd-also ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.rd-also a{color:var(--mut);font-size:.85rem;line-height:1.45;display:block;
  padding-left:13px;position:relative;transition:color .22s var(--ease)}
.rd-also a::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;
  background:var(--cy)}
.rd-also a b{color:var(--fg);font-weight:600}
.rd-also a:hover{color:var(--fg)}
@media (prefers-reduced-motion: reduce){.reader{transition:none}}

/* --- premios y concursos --------------------------------------------- */
.contests .cintro{color:var(--mut);font-size:.95rem;line-height:1.7;max-width:76ch;
  margin-bottom:24px}
.contests .cintro b{color:var(--fg);font-weight:600}
.cwhy{margin-top:22px;max-width:80ch}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.cc{background:var(--ink2);display:flex;gap:16px;padding:18px 19px;align-items:flex-start;
  transition:background .28s var(--ease),transform .28s var(--ease)}
.cc:hover{background:var(--ink);transform:translateY(-2px)}
.cnum{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:9px 4px;border:1px solid var(--line2);
  font-variant-numeric:tabular-nums;line-height:1}
.cnum i{font-style:normal;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:5px}
.cc.conf .cnum{font-size:1.5rem;font-weight:700;color:var(--red);
  border-color:rgba(224,38,28,.45);box-shadow:inset 0 0 22px rgba(224,38,28,.12)}
.cc.cyc .cnum{font-size:.8rem;font-weight:600;color:var(--cy);text-transform:capitalize;
  border-color:rgba(53,214,230,.3)}
.cc.unk .cnum{font-size:1.1rem;color:var(--dim)}
.cbody{display:flex;flex-direction:column;gap:6px;min-width:0}
.cbody b{font-size:.94rem;font-weight:600;letter-spacing:-.008em;line-height:1.3}
.cdesc{color:var(--mut);font-size:.8rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csrc{color:var(--dim);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.cc:hover .cbody b{color:var(--red)}

/* --- la tesis del operador: cita del libro + desarrollo ---------------- */
.thesis .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:860px){.thesis .wrap{grid-template-columns:1fr}}
.pull{border-left:2px solid var(--red);padding:4px 0 4px 26px;
  box-shadow:-2px 0 26px rgba(224,38,28,.28)}
.pull p{font-size:clamp(1.18rem,2.3vw,1.6rem);line-height:1.38;letter-spacing:-.018em;
  text-wrap:balance;color:var(--fg)}
.pull cite{display:block;margin-top:16px;color:var(--dim);font-style:normal;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.pull cite i{font-style:italic;color:var(--mut)}
.thesis-body{display:flex;flex-direction:column;gap:16px}
.thesis-body p{color:var(--mut);font-size:.98rem;line-height:1.74}
.thesis-body b{color:var(--fg);font-weight:600}

/* ======================================================================
   EL LIBRO — expediente de cine negro. La identidad la fija el taller que
   ya existe: el libro es un caso sobre la mesa. Aquí se le sube el volumen
   con gradientes en movimiento, la portada inclinada y botones que barren.
   ====================================================================== */
:root{--blood:#7a0f08; --cond:'Arial Narrow','Helvetica Neue Condensed',
  'Helvetica Neue',Helvetica,Arial,sans-serif}

.dossier{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(70px,10vh,130px) 0 clamp(50px,7vh,90px);border-bottom:1px solid var(--line)}
/* el fondo respira: rojo sangre que gira muy lento bajo el negro */
.dosbg{position:absolute;inset:-30%;z-index:-1;pointer-events:none;opacity:.9;
  background:
    radial-gradient(48% 42% at 22% 28%, rgba(122,15,8,.62), transparent 68%),
    radial-gradient(40% 38% at 82% 72%, rgba(224,38,28,.30), transparent 66%),
    radial-gradient(60% 50% at 60% 10%, rgba(53,214,230,.10), transparent 70%);
  animation:dosdrift 34s var(--ease) infinite alternate}
@keyframes dosdrift{
  to{transform:translate3d(-5%,4%,0) rotate(7deg) scale(1.18)}}
.dossier::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,10,.4),rgba(9,9,10,.86) 68%,var(--ink))}

.dos-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:900px){.dos-in{grid-template-columns:1fr}}
.dossier h1{font-family:var(--cond);font-size:clamp(2.6rem,7vw,5.6rem);line-height:.92;
  letter-spacing:-.02em;text-transform:uppercase;font-weight:700;
  text-shadow:0 10px 60px rgba(0,0,0,.7)}
.dossier h1 em{font-style:normal;color:var(--red);
  text-shadow:0 0 46px rgba(224,38,28,.6)}
.dos-sub{font-family:var(--cond);font-size:clamp(.92rem,1.7vw,1.15rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--cy);margin:14px 0 4px;
  text-shadow:0 0 22px rgba(53,214,230,.45)}
.dossier .lede{max-width:58ch}

/* la portada, inclinada como una foto sobre la mesa */
.dos-art{position:relative;display:flex;justify-content:center}
.tilt{transform:perspective(1400px) rotateY(-13deg) rotateX(4deg) rotate(-2deg);
  transition:transform .8s var(--ease);will-change:transform}
.dos-art:hover .tilt{transform:perspective(1400px) rotateY(-5deg) rotateX(1deg) rotate(0deg)}
.tilt img{width:min(340px,70vw);height:auto;display:block;
  box-shadow:0 40px 90px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07),
    0 0 70px rgba(224,38,28,.2)}
.stamp{position:absolute;right:2%;top:2%;font-family:var(--cond);font-size:1.5rem;
  letter-spacing:.2em;color:rgba(224,38,28,.85);border:2px solid rgba(224,38,28,.55);
  padding:6px 13px;transform:rotate(-13deg);text-transform:uppercase;
  box-shadow:0 0 26px rgba(224,38,28,.28);pointer-events:none}

/* botones grandes: el barrido de color entra desde la izquierda */
.dos-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.bigbtn{position:relative;overflow:hidden;isolation:isolate;display:flex;
  flex-direction:column;gap:3px;padding:16px 26px;border:1px solid var(--line2);
  min-width:212px;transition:border-color .3s var(--ease),transform .3s var(--ease),
    box-shadow .3s var(--ease)}
.bigbtn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);
  transition:transform .46s var(--ease)}
.bigbtn.buy::before{background:linear-gradient(100deg,var(--blood),var(--red))}
.bigbtn.ws::before{background:linear-gradient(100deg,#0f5560,var(--cy-d))}
.bigbtn:hover::before{transform:none}
.bigbtn:hover{transform:translateY(-3px)}
.bigbtn.buy:hover{border-color:var(--red);box-shadow:0 0 38px rgba(224,38,28,.5)}
.bigbtn.ws:hover{border-color:var(--cy);box-shadow:0 0 38px rgba(53,214,230,.4)}
.bb-l{font-family:var(--cond);font-size:1.06rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700}
.bb-p{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bigbtn:hover .bb-p{color:rgba(255,255,255,.82)}

/* los tres actos */
.actgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.act{background:var(--ink2);padding:30px 26px 28px;position:relative;overflow:hidden;
  transition:background .34s var(--ease)}
.act::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--red),var(--cy));transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease)}
.act:hover{background:var(--ink)}
.act:hover::after{transform:none}
.actn{font-family:var(--cond);font-size:2.6rem;line-height:1;color:var(--red);
  opacity:.5;letter-spacing:-.02em;margin-bottom:10px;
  font-variant-numeric:tabular-nums;transition:opacity .34s var(--ease)}
.act:hover .actn{opacity:1;text-shadow:0 0 26px rgba(224,38,28,.6)}
.act h3{font-family:var(--cond);font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:9px}
.act p{color:var(--mut);font-size:.9rem;line-height:1.6}

.quoteband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,rgba(122,15,8,.16),transparent 62%)}
.pull.big p{font-size:clamp(1.3rem,3vw,2.15rem);line-height:1.26}

/* el temario */
.chaps{list-style:none;border-top:1px solid var(--line)}
.chap{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:baseline;
  padding:17px 8px;border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .32s var(--ease),background .32s var(--ease)}
.chap:hover{padding-left:20px;background:rgba(255,255,255,.022)}
.chap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--red),var(--cy));transform:scaleY(0);
  transform-origin:top;transition:transform .34s var(--ease)}
.chap:hover::before{transform:none}
.cn{font-family:var(--cond);font-size:1.5rem;color:var(--red);opacity:.55;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  transition:opacity .3s var(--ease)}
.chap:hover .cn{opacity:1}
.ct b{display:block;font-family:var(--cond);font-size:1.16rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700;margin-bottom:3px}
.ct i{font-style:normal;color:var(--mut);font-size:.88rem;line-height:1.55}

.specgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px}
.spec{background:var(--ink);padding:14px 16px}
.spec span{display:block;color:var(--dim);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:5px}
.spec b{font-weight:500;font-size:.88rem}

/* el cierre */
.closer{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(70px,11vh,140px) 0}
.closbg{position:absolute;inset:-40%;z-index:-1;
  background:conic-gradient(from 0deg at 50% 50%, rgba(122,15,8,.5), rgba(224,38,28,.28),
    rgba(53,214,230,.14), rgba(122,15,8,.5));
  filter:blur(60px);animation:closspin 46s linear infinite;opacity:.7}
@keyframes closspin{to{transform:rotate(360deg)}}
.closer::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 50% 50%, transparent, var(--ink) 78%)}
.closer h2{font-family:var(--cond);font-size:clamp(2rem,5.6vw,4.2rem);line-height:1;
  letter-spacing:-.01em;text-transform:uppercase;text-shadow:0 8px 50px rgba(0,0,0,.7)}
.closer p{color:var(--mut);font-size:1.02rem;margin:18px auto 0;max-width:56ch}
.closer .dos-cta{justify-content:center}

@media (prefers-reduced-motion: reduce){
  .dosbg,.closbg{animation:none}
  .tilt{transform:none}}

/* --- portada: el expediente, pero con el libro como producto ---------- */
.home-dos{padding-top:clamp(56px,8vh,104px)}
.home-dos .stamp{font-size:2.1rem;padding:8px 16px;font-weight:700}
.home-dos .dos-cta{margin-top:26px}
.home-dos .cta{margin-top:14px}

/* cifras de lo que hay adentro */
.fact{background:var(--ink2);padding:30px 26px 28px;position:relative;overflow:hidden;
  transition:background .34s var(--ease)}
.fact::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--red),var(--cy));transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease)}
.fact:hover{background:var(--ink)}
.fact:hover::after{transform:none}
.factn{font-family:var(--cond);font-size:3.4rem;line-height:.9;color:var(--red);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:10px;
  text-shadow:0 0 30px rgba(224,38,28,.4)}
.fact h3{font-family:var(--cond);font-size:1.22rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:9px}
.fact p{color:var(--mut);font-size:.9rem;line-height:1.6}

/* créditos: por qué hacerle caso */
.credband{border-top:1px solid var(--line);
  background:linear-gradient(100deg,rgba(122,15,8,.12),transparent 58%)}
.crdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.crd{background:var(--ink);padding:24px 22px;display:flex;flex-direction:column;gap:7px;
  transition:background .3s var(--ease)}
.crd:hover{background:var(--ink2)}
.crd b{font-family:var(--cond);font-size:1.28rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700}
.crd span{color:var(--mut);font-size:.83rem;line-height:1.5}
.crd i{font-style:italic}