/* =============================================================
   PORTAFOLIO — Enrique Antonio Cepeda
   -------------------------------------------------------------
   ÍNDICE
     1.  Variables          → colores, tipografía, medidas
     2.  Grano              → #grainCanvas (ajustes en js/main.js)
     3.  Cristal y glow     → .glass .tex .fade-x .glow .bloom
     4.  Wiggle             → .wig .wig-b .wig-c
     5.  Foto del hero      → .photo-stack .photo-mirror .photo-halo
     6.  Cabecera y nav
     7.  Hero
     8.  Marquee y proof
     9.  Trabajo            → .work-grid
     10. Capacidades        → .caps
     11. Cine               → .cine
     12. Servicios          → .svc-rail
     13. Reel               → .reel-main .rv
     14. Color antes/después→ .cw
     15. 360                → .pano
     16. Plugins            → .plug-grid
     17. Clientes           → .socials
     18. Equipo             → .gear .slots
     19. Guía de assets     → .assets-tbl
     20. Pie
     21. Responsive

   PARA AJUSTAR RÁPIDO
     · Color de acento .......... --halation
     · Fuerza del grano ......... --grain-opacity  (y js/main.js)
     · Ancho máximo ............. --maxw
   ============================================================= */

:root{
    --bg:#0F0D10;
    --surface:#1A1614;
    --surface2:#211B17;
    --line:#2E2721;
    --text:#F2EAE0;
    --muted:#9C9086;
    --halation:#DD4B24;
    --grain:#6B7A78;
    --maxw:1240px;
  }
  html{scroll-behavior:smooth;}
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:var(--bg);color:var(--text);
    font-family:'Inter',sans-serif;line-height:1.55;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px);}
  .mono{font-family:'JetBrains Mono',monospace;}

  /* ---- film grain ---- */
  /* grano vivo: canvas con ruido nuevo en cada cuadro (como Dehancer),
     situado DEBAJO de las piezas para no ensuciarlas */
  /* GRANO — ajusta estos dos valores para subirlo o bajarlo */
  :root{ --grain-opacity:.10; }
  #grainCanvas{
    position:fixed;inset:0;width:1000vw;height:1000vh;pointer-events:none;
    /* screen: el grano LEVANTA las sombras, que es lo que hace el haluro real.
       overlay no se veía porque sobre negro casi no rinde. */
    mix-blend-mode:screen;
    opacity:var(--grain-opacity);
    z-index:4;
  }
  .vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);}


  /* ---- apple-style glass, glow & texture ---- */
  .glass{
    background:linear-gradient(150deg, rgba(242,234,224,.055), rgba(242,234,224,.015) 42%, rgba(242,234,224,.04));
    backdrop-filter:blur(22px) saturate(1.35);
    -webkit-backdrop-filter:blur(22px) saturate(1.35);
    border:1px solid rgba(242,234,224,.09);
    box-shadow:0 1px 0 rgba(242,234,224,.12) inset, 0 24px 60px -30px rgba(0,0,0,.9);
    position:relative;
  }
  /* specular top edge — the Apple hairline */
  .glass::before{
    content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(242,234,224,.55),transparent);
  }
  /* per-surface grain so nothing reads as flat vector */
  .tex::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.26;mix-blend-mode:overlay;border-radius:inherit;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  }
  /* gradient fade-out at edges — Apple's signature dissolve */
  .fade-x{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  }
  .fade-b{
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
    mask-image:linear-gradient(180deg,#000 62%,transparent);
  }
  .glow{filter:drop-shadow(0 0 18px rgba(221,75,36,.45));}
  .bloom{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);opacity:.5;z-index:0;}

  /* ---- foto: desvanecido en bordes + reflejo gaussiano tipo iOS ---- */
  .photo-stack{position:relative;z-index:8;}
  .hero-photo img{
    /* los bordes se disuelven en vez de cortar en seco */
    -webkit-mask-image:radial-gradient(120% 110% at 50% 42%, #000 55%, rgba(0,0,0,.55) 78%, transparent 100%);
    mask-image:radial-gradient(120% 110% at 50% 42%, #000 55%, rgba(0,0,0,.55) 78%, transparent 100%);
  }
  /* reflejo: copia volteada, desenfocada y desvanecida — el truco de Apple */
  .photo-mirror{
    position:absolute;left:0;right:0;top:100%;height:58%;
    overflow:hidden;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 72%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 72%);
  }
  .photo-mirror img{
    width:100%;height:auto;transform:scaleY(-1);
    filter:blur(14px) saturate(1.25) brightness(.72);
    opacity:.55;
  }
  /* halo de color detrás, muestreado de la foto */
  .photo-halo{
    position:absolute;inset:-12% -14%;z-index:-1;pointer-events:none;
    background:radial-gradient(60% 50% at 50% 45%, rgba(221,75,36,.42), transparent 70%),
               radial-gradient(50% 40% at 70% 70%, rgba(60,106,101,.34), transparent 70%);
    filter:blur(52px);opacity:.85;
  }

  /* media limpia: por encima de la capa de grano */
  .work,.svc,.cm,.rv,.reel-main,.cw,.pano,.slot,.hero-photo{position:relative;z-index:8;}


  /* ---- wiggle: órbita orgánica tipo expresión wiggle() de AE ---- */
  @keyframes wig1{
    0%{transform:translate3d(0,0,0) rotate(0deg)}
    14%{transform:translate3d(3px,-7px,0) rotate(.35deg)}
    29%{transform:translate3d(-4px,-3px,0) rotate(-.25deg)}
    43%{transform:translate3d(2px,5px,0) rotate(.2deg)}
    57%{transform:translate3d(5px,-2px,0) rotate(-.3deg)}
    71%{transform:translate3d(-2px,6px,0) rotate(.15deg)}
    86%{transform:translate3d(-5px,-4px,0) rotate(-.2deg)}
    100%{transform:translate3d(0,0,0) rotate(0deg)}
  }
  @keyframes wig2{
    0%{transform:translate3d(0,0,0) rotate(0deg)}
    17%{transform:translate3d(-5px,4px,0) rotate(-.3deg)}
    33%{transform:translate3d(3px,7px,0) rotate(.25deg)}
    50%{transform:translate3d(6px,-3px,0) rotate(-.15deg)}
    67%{transform:translate3d(-3px,-6px,0) rotate(.3deg)}
    83%{transform:translate3d(2px,3px,0) rotate(-.2deg)}
    100%{transform:translate3d(0,0,0) rotate(0deg)}
  }
  @keyframes wig3{
    0%{transform:translate3d(0,0,0)}
    20%{transform:translate3d(4px,5px,0)}
    40%{transform:translate3d(-6px,2px,0)}
    60%{transform:translate3d(2px,-6px,0)}
    80%{transform:translate3d(5px,3px,0)}
    100%{transform:translate3d(0,0,0)}
  }
  .wig{animation:wig1 11s ease-in-out infinite;}
  .wig-b{animation:wig2 13.5s ease-in-out infinite;}
  .wig-c{animation:wig3 9.5s ease-in-out infinite;}
  .wig:hover,.wig-b:hover,.wig-c:hover{animation-play-state:paused;}

  /* ---- cine / autoridad ---- */
  .cine{position:relative;border-radius:16px;overflow:hidden;padding:clamp(24px,3.4vw,42px);
    background:linear-gradient(150deg,rgba(221,75,36,.13),rgba(242,234,224,.03) 45%,rgba(60,106,101,.10));
    border:1px solid rgba(242,234,224,.12);
    backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:0 1px 0 rgba(242,234,224,.16) inset, 0 40px 90px -50px rgba(221,75,36,.6);}
  .cine-badge{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:11px;
    color:var(--halation);border:1px solid rgba(221,75,36,.5);background:rgba(221,75,36,.1);
    padding:8px 15px;border-radius:100px;margin-bottom:20px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:0 0 30px -8px rgba(221,75,36,.7);}
  .cine h2{margin-bottom:14px;max-width:17ch;}
  .cine-lede{font-size:15.5px;color:var(--muted);max-width:60ch;margin-bottom:30px;}
  .cine-media{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:16px;align-items:start;}
  .cm{position:relative;border-radius:13px;overflow:hidden;background:#000;
    border:1px solid rgba(242,234,224,.12);
    box-shadow:0 24px 60px -34px rgba(0,0,0,.95);transition:border-color .3s,box-shadow .3s;}
  .cm:hover{border-color:rgba(221,75,36,.6);box-shadow:0 28px 66px -28px rgba(221,75,36,.5);}
  .cm video{width:100%;display:block;object-fit:cover;}
  .cm.v video{aspect-ratio:9/16;}
  .cm.hz video{aspect-ratio:16/9;}
  .cm figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px 13px;
    background:linear-gradient(180deg,rgba(15,13,16,0),rgba(15,13,16,.9));
    font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);}

  /* ---- plugins ---- */
  .plug-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .plug{position:relative;border-radius:13px;padding:20px 19px;
    background:linear-gradient(155deg,rgba(242,234,224,.055),rgba(242,234,224,.012));
    border:1px solid rgba(242,234,224,.09);
    backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 1px 0 rgba(242,234,224,.11) inset;
    transition:transform .2s ease-out,border-color .3s;will-change:transform;}
  .plug:hover{border-color:rgba(221,75,36,.5);}
  .plug .pn{font-family:'Fraunces',serif;font-size:17px;margin-bottom:5px;}
  .plug .pw{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--grain);margin-bottom:10px;}
  .plug .pd{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
  .plug .ps{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--halation);
    border-top:1px solid rgba(242,234,224,.12);padding-top:11px;
    text-shadow:0 0 16px rgba(221,75,36,.5);}

  /* ---- value pitch rows ---- */
  .pitch{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px;}
  .pz{position:relative;border-radius:13px;padding:22px 20px;
    background:linear-gradient(155deg,rgba(242,234,224,.05),rgba(242,234,224,.01));
    border:1px solid rgba(242,234,224,.09);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 1px 0 rgba(242,234,224,.1) inset;}
  .pz .q{font-family:'Fraunces',serif;font-size:17.5px;line-height:1.32;margin-bottom:10px;}
  .pz .a{font-size:13px;color:var(--muted);}
  .pz .k{color:var(--halation);}

  @media(max-width:1000px){
    .cine-media{grid-template-columns:1fr 1fr;}
    .cm.hz{grid-column:span 2;}
    .plug-grid{grid-template-columns:repeat(2,1fr);}
    .pitch{grid-template-columns:1fr;}
  }
  @media(max-width:720px){
    .cine-media{grid-template-columns:1fr;}
    .cm.hz{grid-column:span 1;}
    .plug-grid{grid-template-columns:1fr;}
  }

  /* ---- custom cursor ---- */
  .cursor{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid var(--halation);border-radius:50%;
    pointer-events:none;z-index:70;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s,opacity .2s;
    mix-blend-mode:difference;}
  .cursor.big{width:64px;height:64px;background:rgba(221,75,36,.16);}
  .cursor.hidden{opacity:0;}
  @media (pointer:coarse){.cursor{display:none;}}

  /* ---- header ---- */
  header{position:sticky;top:0;z-index:40;background:rgba(15,13,16,.55);
    backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
    border-bottom:1px solid rgba(242,234,224,.08);}
  nav.wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px;}
  .brand{font-family:'Fraunces',serif;font-weight:600;font-size:16px;line-height:1.15;white-space:nowrap;}
  .brand span{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:1px;}
  .navlinks{display:flex;gap:24px;font-size:13.5px;color:var(--muted);}
  .navlinks a{position:relative;padding:3px 0;}
  .navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--halation);transition:width .28s cubic-bezier(.2,.7,.3,1);}
  .navlinks a:hover{color:var(--text);}
  .navlinks a:hover::after{width:100%;}
  .btn{display:inline-block;border:1px solid rgba(221,75,36,.55);color:var(--halation);padding:10px 18px;border-radius:8px;
    background:rgba(221,75,36,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:0 1px 0 rgba(242,234,224,.1) inset, 0 0 26px -8px rgba(221,75,36,.5);
    font-family:'JetBrains Mono',monospace;font-size:12.5px;transition:background .25s,color .25s,transform .15s;will-change:transform;}
  .btn:hover{background:var(--halation);color:#0F0D10;box-shadow:0 0 34px -4px rgba(221,75,36,.8);}
  .btn-ghost{border-color:var(--line);color:var(--muted);}
  .btn-ghost:hover{background:transparent;border-color:var(--text);color:var(--text);}
  .btn-row{display:flex;gap:12px;flex-wrap:wrap;}
  .navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:7px 11px;border-radius:2px;font-size:13px;}

  /* ---- hero ---- */
  .hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;}
  #lensCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
  .hero .wrap{position:relative;z-index:2;padding-top:clamp(64px,9vw,104px);padding-bottom:clamp(44px,6vw,64px);}
  .hero-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:clamp(24px,4vw,48px);align-items:end;}
  .status{display:inline-flex;gap:9px;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11.5px;
    color:var(--grain);border:1px solid rgba(242,234,224,.12);padding:7px 14px;border-radius:100px;margin-bottom:24px;
    background:rgba(242,234,224,.04);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 1px 0 rgba(242,234,224,.14) inset;}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--grain);box-shadow:0 0 9px var(--grain);animation:pulse 2.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(32px,5.6vw,58px);line-height:1.05;letter-spacing:-.015em;max-width:14ch;}
  h1 .em{color:var(--halation);}
  .lede{margin-top:22px;font-size:clamp(15px,1.5vw,17px);color:var(--muted);max-width:56ch;}
  .hero-cta{margin-top:30px;}
  .hero-photo{border-radius:16px;overflow:hidden;border:1px solid rgba(242,234,224,.1);aspect-ratio:20/16;
    transition:transform .18s ease-out;will-change:transform;box-shadow:0 30px 70px -30px rgba(221,75,36,.35);}
  .hero-photo img{width:100%;height:100%;object-fit:cover;}

  /* ---- marquee ---- */
  .marquee{position:relative;border-bottom:1px solid var(--line);overflow:hidden;padding:15px 0;
    background:linear-gradient(180deg,rgba(242,234,224,.04),rgba(242,234,224,.012));
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
  .marquee-track{display:flex;gap:48px;white-space:nowrap;animation:slide 34s linear infinite;
    font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);}
  .marquee-track span{display:inline-flex;gap:48px;}
  .marquee em{color:var(--halation);font-style:normal;}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---- proof strip ---- */
  .proof{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);}
  .proof-item{position:relative;padding:clamp(20px,3vw,30px) clamp(14px,2vw,24px);border-right:1px solid var(--line);}
  .proof-item:last-child{border-right:none;}
  .proof-item .n{font-family:'JetBrains Mono',monospace;font-size:clamp(22px,3vw,30px);color:var(--halation);line-height:1;}
  .proof-item .c{font-size:12px;color:var(--muted);margin-top:8px;}

  /* ---- sections ---- */
  section{padding:clamp(52px,7vw,84px) 0;border-bottom:1px solid var(--line);}
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--grain);margin-bottom:14px;}
  h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(23px,3vw,31px);letter-spacing:-.01em;max-width:20ch;margin-bottom:10px;}
  .sub{font-size:14px;color:var(--muted);max-width:62ch;margin-bottom:38px;}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}

  /* ---- work grid (protagonist) ---- */
  .work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
  .work{position:relative;border:1px solid rgba(242,234,224,.09);border-radius:10px;overflow:hidden;background:var(--surface);
    display:flex;flex-direction:column;justify-content:flex-end;padding:20px;min-height:230px;
    transition:transform .2s ease-out,border-color .3s;will-change:transform;}
  .work:hover{border-color:var(--halation);}
  .work.lg{grid-column:span 4;min-height:340px;}
  .work.md{grid-column:span 2;}
  .work.sm{grid-column:span 2;}
  .work-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .4s;}
  .work:hover .work-bg{opacity:.9;}
  .work:hover .work-bg{transform:scale(1.06);}
  .work-body{position:relative;z-index:3;padding:16px;margin:-4px;border-radius:8px;
    background:linear-gradient(180deg,rgba(15,13,16,0),rgba(15,13,16,.72) 45%,rgba(15,13,16,.9));
    }
  .work .tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--halation);margin-bottom:8px;}
  .work h3{font-family:'Fraunces',serif;font-size:clamp(17px,2vw,22px);margin-bottom:6px;}
  .work p{font-size:12.5px;color:var(--muted);max-width:42ch;}
  .work .metric{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text);
    border-top:1px solid rgba(242,234,224,.16);padding-top:10px;display:inline-block;}
  .work .go{position:absolute;top:16px;right:16px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:11px;
    color:var(--muted);opacity:0;transform:translateY(-4px);transition:.3s;}
  .work:hover .go{opacity:1;transform:none;color:var(--halation);}

  /* ---- capability cards ---- */
  .caps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);perspective:1000px;}
  .cap{position:relative;background:linear-gradient(160deg,rgba(242,234,224,.045),rgba(242,234,224,.01));
    padding:22px 18px;transition:transform .18s ease-out,background .3s;will-change:transform;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
  .cap:hover{background:linear-gradient(160deg,rgba(221,75,36,.10),rgba(242,234,224,.02));}
  .cap:hover .icon{filter:drop-shadow(0 0 12px rgba(221,75,36,.65));}
  .cap .icon{transition:filter .3s;}
  .cap .icon{width:26px;height:26px;color:var(--halation);margin-bottom:14px;}
  .cap .tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--halation);margin-bottom:8px;}
  .cap h3{font-family:'Fraunces',serif;font-size:16px;margin-bottom:7px;}
  .cap p{font-size:12.5px;color:var(--muted);}

  /* ---- process ---- */
  .process{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .pstep{position:relative;background:linear-gradient(160deg,rgba(242,234,224,.035),rgba(242,234,224,.008));
    padding:20px 15px;transition:background .3s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .pstep:hover{background:linear-gradient(160deg,rgba(221,75,36,.10),rgba(242,234,224,.02));}
  .pstep:hover .picon{filter:drop-shadow(0 0 10px rgba(221,75,36,.6));}
  .pstep .picon{transition:filter .3s,color .3s;}
  .pstep .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--halation);margin-bottom:12px;}
  .pstep .picon{width:22px;height:22px;color:var(--muted);margin-bottom:10px;}
  .pstep:hover .picon{color:var(--halation);}
  .pstep h4{font-family:'Fraunces',serif;font-size:14.5px;margin-bottom:6px;}
  .pstep p{font-size:11.5px;color:var(--muted);}

  /* ---- before/after ---- */
  .cw{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(242,234,224,.1);user-select:none;box-shadow:0 30px 70px -40px rgba(0,0,0,.9);}
  .cw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .cw-before{clip-path:inset(0 50% 0 0);}
  .cw-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--halation);transform:translateX(-1px);pointer-events:none;}
  .cw-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;
    background:var(--halation);border-radius:50%;box-shadow:0 0 30px rgba(221,75,36,.85), 0 0 60px rgba(221,75,36,.4);}
  .cw-handle::before{content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
    color:#0F0D10;font-size:11px;font-family:'JetBrains Mono',monospace;}
  .cw-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;}

  /* ---- 360 pano ---- */
  .pano{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid rgba(242,234,224,.1);cursor:grab;background:var(--surface);}
  .pano.dragging{cursor:grabbing;}
  .pano-track{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none;}
    .pano-hud{position:absolute;top:14px;left:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text);
    background:rgba(15,13,16,.5);padding:7px 12px;border-radius:100px;pointer-events:none;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,234,224,.14);}

  /* ---- client social panels ---- */
  .socials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .sp{position:relative;border:1px solid rgba(242,234,224,.09);border-radius:12px;overflow:hidden;
    background:linear-gradient(150deg,rgba(242,234,224,.055),rgba(242,234,224,.012));
    backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
    box-shadow:0 1px 0 rgba(242,234,224,.1) inset, 0 20px 50px -28px rgba(0,0,0,.9);
    transition:border-color .3s,transform .2s ease-out;will-change:transform;}
  .sp:hover{border-color:var(--halation);}
  .sp-head{display:flex;gap:14px;align-items:center;padding:18px;}
  .sp-av{width:52px;height:52px;border-radius:50%;flex:0 0 52px;background:linear-gradient(135deg,#6B4226,#DD4B24);box-shadow:0 0 22px rgba(221,75,36,.45);
    display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:19px;color:#0F0D10;}
  .sp-id .h{font-weight:600;font-size:14px;}
  .sp-id .n{font-size:12px;color:var(--muted);margin-top:1px;}
  .sp-stats{display:flex;border-top:1px solid var(--line);}
  .sp-stat{flex:1;padding:12px 10px;text-align:center;border-right:1px solid var(--line);}
  .sp-stat:last-child{border-right:none;}
  .sp-stat .v{font-family:'JetBrains Mono',monospace;font-size:13.5px;color:var(--text);}
  .sp-stat .l{font-size:10.5px;color:var(--muted);margin-top:2px;}
  .sp-foot{padding:12px 18px;border-top:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
    display:flex;justify-content:space-between;align-items:center;}
  .sp:hover .sp-foot{color:var(--halation);}

  /* ---- gear wordmarks ---- */
  .gear{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .gcell{position:relative;background:linear-gradient(160deg,rgba(242,234,224,.03),rgba(242,234,224,.006));
    padding:24px 14px;text-align:center;transition:background .3s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .gcell:hover{background:linear-gradient(160deg,rgba(221,75,36,.09),rgba(242,234,224,.015));}
  .gcell:hover .wm{text-shadow:0 0 18px rgba(221,75,36,.55);}
  .gcell .wm{transition:color .3s,text-shadow .3s;}
  .gcell .wm{font-family:'Fraunces',serif;font-size:15px;letter-spacing:.02em;color:var(--text);}
  .gcell:hover .wm{color:var(--halation);}
  .gcell .md{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-top:5px;}


  /* ---- reel videos ---- */
  .reel-main{position:relative;border:1px solid rgba(242,234,224,.1);border-radius:14px;overflow:hidden;background:#000;
    margin-bottom:16px;box-shadow:0 30px 80px -40px rgba(221,75,36,.55);}
  .reel-main video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
  .reel-badge{position:absolute;top:14px;left:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
    color:var(--halation);background:rgba(15,13,16,.55);padding:7px 12px;border-radius:100px;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(242,234,224,.12);}
  .reel-vert{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .rv{position:relative;border:1px solid rgba(242,234,224,.1);border-radius:12px;overflow:hidden;background:#000;
    transition:border-color .3s,transform .18s ease-out;will-change:transform;}
  .rv:hover{border-color:var(--halation);}
  .rv video{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;}
  .rv figcaption{position:absolute;left:0;right:0;bottom:0;padding:9px 11px;background:rgba(15,13,16,.85);
    font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);}

  /* ---- asset guide table ---- */
  .assets-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
  .assets-tbl th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);
    font-weight:400;padding:10px 12px;border-bottom:1px solid var(--line);}
  .assets-tbl td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top;}
  .assets-tbl td.f{font-family:'JetBrains Mono',monospace;color:var(--halation);white-space:nowrap;}
  .assets-tbl td.d{font-family:'JetBrains Mono',monospace;color:var(--text);white-space:nowrap;}
  .assets-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px;}


  /* ---- servicios: carruseles rotando ---- */
  .svc-rail{position:relative;overflow:hidden;padding:6px 0;}
  .svc-track{display:flex;gap:16px;width:max-content;animation:railL 46s linear infinite;}
  .svc-track.rev{animation:railR 52s linear infinite;}
  .svc-rail:hover .svc-track{animation-play-state:paused;}
  @keyframes railL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes railR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .svc{position:relative;flex:0 0 210px;border-radius:14px;overflow:hidden;
    border:1px solid rgba(242,234,224,.1);background:#000;
    box-shadow:0 1px 0 rgba(242,234,224,.1) inset, 0 22px 55px -32px rgba(0,0,0,.95);
    transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;}
  .svc:hover{transform:translateY(-6px) scale(1.03);border-color:rgba(221,75,36,.55);
    box-shadow:0 26px 60px -26px rgba(221,75,36,.55);}
  .svc video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;opacity:.82;transition:opacity .35s;}
  .svc:hover video{opacity:1;}
  .svc-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 13px;
    background:linear-gradient(180deg,rgba(15,13,16,0),rgba(15,13,16,.82) 55%,rgba(15,13,16,.95));
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .svc-cap .t{font-family:'Fraunces',serif;font-size:15.5px;color:var(--text);}
  .svc-cap .d{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35;}
  .svc-badge{position:absolute;top:11px;left:11px;font-family:'JetBrains Mono',monospace;font-size:9px;
    color:var(--halation);background:rgba(15,13,16,.5);border:1px solid rgba(242,234,224,.14);
    padding:5px 9px;border-radius:100px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}

  /* ---- media slots ---- */
  .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .slot{position:relative;aspect-ratio:3/4;border:1px solid rgba(242,234,224,.09);border-radius:12px;background:var(--surface);
    overflow:hidden;transition:border-color .3s,transform .18s ease-out;will-change:transform;margin:0;}
  .slot:hover{border-color:var(--halation);}
  .slot img{width:100%;height:100%;object-fit:cover;}
  .slot figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:rgba(15,13,16,.82);
    font-size:9.5px;color:var(--muted);text-align:center;}

  /* ---- pending flag ---- */
  .flag{margin-top:34px;padding:20px 22px;border:1px solid #8C4A3A;border-radius:3px;
    display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
  .flag .mono{font-size:11px;color:#C77A63;}
  .flag p{font-size:13.5px;color:var(--muted);max-width:60ch;margin-top:4px;}

  /* ---- footer ---- */
  footer{padding:clamp(52px,7vw,80px) 0 44px;}
  footer h3{font-family:'Fraunces',serif;font-size:clamp(22px,3vw,29px);max-width:22ch;margin-bottom:26px;}
  .foot-meta{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
  .foot-meta a:hover{color:var(--halation);}

  /* ---- responsive ---- */
  @media(max-width:1000px){
    .work-grid{grid-template-columns:repeat(4,1fr);}
    .work.lg{grid-column:span 4;}
    .work.md,.work.sm{grid-column:span 2;}
    .caps{grid-template-columns:repeat(3,1fr);}
    .process{grid-template-columns:repeat(3,1fr);}
    .gear{grid-template-columns:repeat(3,1fr);}
    .socials{grid-template-columns:repeat(2,1fr);}
    .slots{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:720px){
    .navlinks{display:none;}
    .navtoggle{display:block;}
    .navlinks.open{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--bg);
      flex-direction:column;gap:0;border-bottom:1px solid var(--line);}
    .navlinks.open a{padding:15px clamp(20px,4vw,40px);border-top:1px solid var(--line);}
    .hero-grid{grid-template-columns:1fr;}
    .hero-photo{max-width:210px;}
    .proof{grid-template-columns:repeat(2,1fr);}
    .proof-item:nth-child(2){border-right:none;}
    .proof-item:nth-child(1),.proof-item:nth-child(2){border-bottom:1px solid var(--line);}
    .work-grid{grid-template-columns:1fr;}
    .work.lg,.work.md,.work.sm{grid-column:span 1;}
    .caps{grid-template-columns:repeat(2,1fr);}
    .process{grid-template-columns:repeat(2,1fr);}
    .gear{grid-template-columns:repeat(2,1fr);}
    .socials{grid-template-columns:1fr;}
    .slots{grid-template-columns:repeat(2,1fr);}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;}
    .reveal{opacity:1;transform:none;}
  }
  :focus-visible{outline:2px solid var(--halation);outline-offset:3px;}


/* =============================================================
   AÑADIDO v5 — video en hover, modal de caso, fotos de perfil,
   legibilidad de títulos
   ============================================================= */

/* ---- video que aparece al pasar el mouse sobre cualquier imagen ---- */
.work-vid,.slot-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;z-index:1;
}
.work:hover .work-vid,.slot:hover .slot-vid{opacity:1;}
.work:hover .work-bg,.slot:hover img{opacity:0;}
.work-bg,.slot img{transition:opacity .45s ease;}

/* las tarjetas ahora son <button>: quitar estilos por defecto */
.work{
  appearance:none;-webkit-appearance:none;
  font-family:inherit;text-align:left;cursor:pointer;
  color:inherit;width:100%;
}

/* ---- LEGIBILIDAD: el título se perdía sobre el fondo ---- */
.work-body{
  background:linear-gradient(180deg,
    rgba(15,13,16,0) 0%,
    rgba(15,13,16,.55) 28%,
    rgba(15,13,16,.88) 62%,
    rgba(15,13,16,.97) 100%) !important;
  /* sin backdrop-filter: desenfocaba el video que va detrás */
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.work h3{
  /* doble sombra: una cercana para el filo, otra amplia para separar del fondo */
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 4px 18px rgba(0,0,0,.8);
}
.work .tag{text-shadow:0 1px 3px rgba(0,0,0,.9);}
.work p{color:#D6CCC0;text-shadow:0 1px 3px rgba(0,0,0,.9);}
.work .metric{text-shadow:0 1px 3px rgba(0,0,0,.9);}

/* ---- foto de perfil real en tarjetas de cliente ---- */
.sp-av{overflow:hidden;padding:0;}
.sp-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* ---- MODAL de caso ---- */
.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:24px;}
.modal.open{display:flex;}
.modal-bg{position:absolute;inset:0;background:rgba(8,7,9,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.modal-box{
  position:relative;z-index:2;width:100%;max-width:1000px;max-height:88vh;overflow:auto;
  display:grid;grid-template-columns:1.5fr 1fr;gap:0;border-radius:16px;
  background:linear-gradient(150deg,rgba(242,234,224,.07),rgba(242,234,224,.02));
  border:1px solid rgba(242,234,224,.13);
  backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);
  box-shadow:0 1px 0 rgba(242,234,224,.16) inset, 0 50px 110px -50px rgba(0,0,0,.95);
  animation:modalIn .34s cubic-bezier(.2,.7,.3,1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.modal-media{background:#000;border-radius:16px 0 0 16px;overflow:hidden;}
.modal-media video{width:100%;height:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
.modal-info{padding:30px 28px;}
.modal-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--halation);margin-bottom:10px;}
.modal-info h3{font-family:'Fraunces',serif;font-size:26px;margin-bottom:12px;line-height:1.15;}
.modal-info p{font-size:14px;color:var(--muted);margin-bottom:18px;}
.modal-metric{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text);
  border-top:1px solid rgba(242,234,224,.16);padding-top:14px;margin-bottom:22px;}
.modal-x{position:absolute;top:14px;right:16px;z-index:3;
  background:rgba(15,13,16,.6);border:1px solid rgba(242,234,224,.16);color:var(--text);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:13px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.modal-x:hover{border-color:var(--halation);color:var(--halation);}
body.modal-abierto{overflow:hidden;}

@media(max-width:820px){
  .modal-box{grid-template-columns:1fr;max-height:92vh;}
  .modal-media{border-radius:16px 16px 0 0;}
  .modal-media video{aspect-ratio:16/9;height:auto;}
  .modal-info{padding:22px 20px;}
}


/* =============================================================
   AÑADIDO v6
     · Carrusel sin huecos (se rellena por JS según el ancho)
     · Selector de proceso con video
     · Nodos de color estilo DaVinci
     · El Edén: caso insignia
     · Drone
     · Logros y vistas
     · Logos oficiales de marca
     · Credenciales
   ============================================================= */

/* ---- carrusel: el ancho lo calcula el JS, aquí solo la animación ---- */
.svc-track{animation-duration:var(--rail-dur,46s);}

/* ---- selector con video (proceso, drone, El Edén) ---- */
.sel{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start;}
.sel-list{display:flex;flex-direction:column;gap:8px;}
.sel-btn{
  appearance:none;border:1px solid rgba(242,234,224,.09);border-radius:11px;
  background:linear-gradient(155deg,rgba(242,234,224,.045),rgba(242,234,224,.01));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:14px 16px;text-align:left;cursor:pointer;color:inherit;font-family:inherit;
  display:flex;gap:13px;align-items:flex-start;transition:border-color .25s,background .25s;
}
.sel-btn:hover{border-color:rgba(242,234,224,.24);}
.sel-btn.on{border-color:rgba(221,75,36,.65);background:linear-gradient(155deg,rgba(221,75,36,.14),rgba(242,234,224,.02));
  box-shadow:0 0 30px -12px rgba(221,75,36,.7);}
.sel-btn .num{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--halation);padding-top:3px;min-width:18px;}
.sel-btn .tt{font-family:'Fraunces',serif;font-size:15px;}
.sel-btn .dd{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4;}
.sel-stage{position:relative;z-index:8;border-radius:14px;overflow:hidden;background:#000;
  border:1px solid rgba(242,234,224,.11);box-shadow:0 30px 70px -40px rgba(0,0,0,.95);}
.sel-stage video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
.sel-stage.vert video{aspect-ratio:9/16;max-height:70vh;margin:0 auto;width:auto;}
.sel-hud{position:absolute;top:13px;left:13px;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--text);background:rgba(15,13,16,.55);padding:6px 11px;border-radius:100px;
  border:1px solid rgba(242,234,224,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none;}
.sel-auto{position:absolute;bottom:13px;right:13px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  color:var(--muted);background:rgba(15,13,16,.5);padding:5px 10px;border-radius:100px;
  border:1px solid rgba(242,234,224,.1);pointer-events:none;}

/* ---- nodos de color estilo DaVinci ---- */
.nodos{display:flex;gap:0;align-items:center;justify-content:center;margin-bottom:18px;flex-wrap:wrap;}
.nodo{
  appearance:none;cursor:pointer;font-family:'JetBrains Mono',monospace;
  width:118px;padding:13px 10px;border-radius:7px;
  border:1px solid rgba(242,234,224,.16);
  background:linear-gradient(165deg,rgba(242,234,224,.07),rgba(242,234,224,.015));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--muted);font-size:10.5px;text-align:center;transition:.25s;
}
.nodo .nn{display:block;font-size:9px;opacity:.7;margin-bottom:5px;}
.nodo .nl{display:block;color:var(--text);font-size:11px;}
.nodo:hover{border-color:rgba(242,234,224,.34);}
.nodo.on{border-color:var(--halation);color:var(--halation);
  background:linear-gradient(165deg,rgba(221,75,36,.2),rgba(221,75,36,.04));
  box-shadow:0 0 34px -10px rgba(221,75,36,.8);}
.nodo.on .nl{color:var(--halation);}
.cable{width:34px;height:1px;background:rgba(242,234,224,.28);position:relative;}
.cable::after{content:"";position:absolute;right:-1px;top:-2.5px;width:0;height:0;
  border-left:5px solid rgba(242,234,224,.45);border-top:3px solid transparent;border-bottom:3px solid transparent;}
.nodo-stage{position:relative;z-index:8;border-radius:14px;overflow:hidden;border:1px solid rgba(242,234,224,.11);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);}
.nodo-stage img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}

/* ---- caso insignia El Edén ---- */
.insignia{position:relative;border-radius:16px;padding:clamp(24px,3.2vw,40px);
  background:linear-gradient(150deg,rgba(221,75,36,.14),rgba(242,234,224,.03) 48%,rgba(107,66,38,.12));
  border:1px solid rgba(242,234,224,.13);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 1px 0 rgba(242,234,224,.16) inset, 0 44px 100px -54px rgba(221,75,36,.6);}
.fooh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:26px;}
.fooh{position:relative;z-index:8;border-radius:12px;overflow:hidden;background:#000;
  border:1px solid rgba(242,234,224,.12);transition:border-color .3s,transform .2s ease-out;}
.fooh:hover{border-color:rgba(221,75,36,.6);transform:translateY(-4px);}
.fooh video{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;}
.fooh figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(180deg,rgba(15,13,16,0),rgba(15,13,16,.92));
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);}

/* ---- prensa ---- */
.prensa{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:26px;}
.pr{position:relative;z-index:8;border-radius:11px;overflow:hidden;border:1px solid rgba(242,234,224,.12);
  transition:transform .2s ease-out,border-color .3s;}
.pr:hover{transform:translateY(-4px);border-color:rgba(221,75,36,.5);}
.pr img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;}

/* ---- logros / vistas ---- */
.logros{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
.lg{position:relative;border-radius:12px;padding:20px 18px;
  background:linear-gradient(155deg,rgba(242,234,224,.05),rgba(242,234,224,.01));
  border:1px solid rgba(242,234,224,.09);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(242,234,224,.1) inset;transition:transform .2s ease-out,border-color .3s;}
.lg:hover{border-color:rgba(221,75,36,.5);}
.lg .v{font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--halation);line-height:1;
  text-shadow:0 0 22px rgba(221,75,36,.5);}
.lg .t{font-family:'Fraunces',serif;font-size:14.5px;margin-top:9px;}
.lg .p{font-size:11.5px;color:var(--muted);margin-top:5px;}

/* ---- logos oficiales de marca ---- */
.marcas{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.mc{background:linear-gradient(160deg,rgba(242,234,224,.03),rgba(242,234,224,.006));
  padding:22px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:112px;transition:background .3s;}
.mc:hover{background:linear-gradient(160deg,rgba(221,75,36,.08),rgba(242,234,224,.015));}
.mc img{max-width:100%;max-height:42px;width:auto;object-fit:contain;
  opacity:.72;filter:grayscale(1) brightness(1.5);transition:.3s;}
.mc:hover img{opacity:1;filter:grayscale(0) brightness(1);}
.mc .md{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);text-align:center;}

/* ---- credenciales ---- */
.creds{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.cred{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--muted);border:1px solid rgba(242,234,224,.11);border-radius:100px;padding:8px 14px;
  background:rgba(242,234,224,.035);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.cred b{color:var(--text);font-weight:500;}
.cred::before{content:"◈";color:var(--halation);font-size:9px;}

@media(max-width:1000px){
  .sel{grid-template-columns:1fr;}
  .fooh-grid{grid-template-columns:repeat(2,1fr);}
  .logros{grid-template-columns:repeat(2,1fr);}
  .marcas{grid-template-columns:repeat(3,1fr);}
  .prensa{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .nodos{flex-direction:column;gap:6px;}
  .cable{width:1px;height:22px;}
  .cable::after{right:-2.5px;top:auto;bottom:-1px;border-left:3px solid transparent;
    border-right:3px solid transparent;border-top:5px solid rgba(242,234,224,.45);border-bottom:none;}
  .nodo{width:100%;}
  .fooh-grid{grid-template-columns:1fr;}
  .logros{grid-template-columns:1fr;}
  .marcas{grid-template-columns:repeat(2,1fr);}
}


/* =============================================================
   AÑADIDO v7 — hover en todo, video de fondo del hero, credenciales
   ============================================================= */

/* ---- video de fondo del hero (opcional) ---- */
#heroBg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:0;               /* el JS lo sube a .3 solo si carga */
  transition:opacity 1.1s ease;
  will-change:transform;
  /* se desvanece hacia los bordes para que se funda con el fondo */
  -webkit-mask-image:radial-gradient(120% 100% at 50% 45%, #000 45%, rgba(0,0,0,.5) 72%, transparent 100%);
  mask-image:radial-gradient(120% 100% at 50% 45%, #000 45%, rgba(0,0,0,.5) 72%, transparent 100%);
  filter:saturate(.7) contrast(1.05);
}
#heroBg.listo{opacity:.30;}
/* el canvas del diafragma va encima del video */
#lensCanvas{z-index:1;}
.hero .wrap{z-index:3;}

/* ---- los selectores responden al mouse, sin necesidad de clic ---- */
.sel-btn{position:relative;}
.sel-btn::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--halation);border-radius:2px;transition:width .3s ease;
}
.sel-btn:hover::after{width:100%;}
.nodo{position:relative;}

/* ---- indicador de "pasa el mouse" en zonas interactivas ---- */
.sel-stage::after,.nodo-stage::after{
  content:"PASA EL MOUSE";position:absolute;bottom:12px;left:13px;
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);
  background:rgba(15,13,16,.5);padding:5px 10px;border-radius:100px;
  border:1px solid rgba(242,234,224,.1);pointer-events:none;
  opacity:1;transition:opacity .3s;
}
.sel-stage:hover::after,.nodo-stage:hover::after{opacity:0;}
.nodo-stage{position:relative;}

/* ---- logos de marca: ahora son enlaces ---- */
.mc{text-decoration:none;color:inherit;position:relative;}
.mc::after{
  content:"↗";position:absolute;top:9px;right:11px;
  font-size:10px;color:var(--halation);opacity:0;transition:opacity .3s;
}
.mc:hover::after{opacity:1;}
.mc:hover img{transform:scale(1.06);}
.mc img{transition:opacity .3s,filter .3s,transform .3s;}

/* ---- panel de credenciales ---- */
.creds-panel{
  position:relative;border-radius:14px;padding:26px 24px;margin-bottom:20px;
  display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center;
  background:linear-gradient(150deg,rgba(242,234,224,.05),rgba(242,234,224,.012));
  border:1px solid rgba(242,234,224,.09);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(242,234,224,.1) inset;
}
.creds-h{font-family:'Fraunces',serif;font-size:19px;line-height:1.25;margin-bottom:10px;max-width:26ch;}
.creds-p{font-size:13px;color:var(--muted);max-width:58ch;}
.creds-list{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.creds-list .cred{width:100%;}

@media(max-width:1000px){
  .creds-panel{grid-template-columns:1fr;gap:18px;}
}


/* =============================================================
   AÑADIDO v8 — el panel se retrae al reproducirse el video
   ============================================================= */

/* Curvas distintas por elemento para que no salgan todos a la vez:
     · salida  → cubic-bezier(.7,0,.84,0)      arranca lento, se va rápido
     · entrada → cubic-bezier(.16,1,.3,1)      llega frenando, con peso  */

.work-body{
  transition:
    background .5s cubic-bezier(.16,1,.3,1),
    padding .5s cubic-bezier(.16,1,.3,1) !important;
}
/* al reproducirse, el degradado se reduce a una base delgada */
.work.reproduciendo .work-body{
  background:linear-gradient(180deg,
    rgba(15,13,16,0) 0%,
    rgba(15,13,16,.18) 55%,
    rgba(15,13,16,.82) 100%) !important;
  padding-top:6px !important;
}

/* la descripción y la métrica se van: son lo que tapa el video */
.work p, .work .metric{
  transition:opacity .34s cubic-bezier(.7,0,.84,0),
             max-height .44s cubic-bezier(.7,0,.84,0),
             margin .44s cubic-bezier(.7,0,.84,0),
             transform .4s cubic-bezier(.7,0,.84,0);
  max-height:120px;overflow:hidden;
}
.work.reproduciendo p{
  opacity:0;max-height:0;margin:0;transform:translateY(10px);
  transition-delay:0s;
}
.work.reproduciendo .metric{
  opacity:0;max-height:0;margin:0;padding-top:0;border-top-color:transparent;
  transform:translateY(10px);
  transition-delay:.05s;      /* escalonado: primero el texto, luego la cifra */
}

/* queda lo esencial: etiqueta y título, más compactos */
.work h3{
  transition:font-size .5s cubic-bezier(.16,1,.3,1),
             transform .5s cubic-bezier(.16,1,.3,1),
             margin .5s cubic-bezier(.16,1,.3,1);
}
.work.reproduciendo h3{
  font-size:15px;margin-bottom:0;transform:translateY(2px);
}
.work.lg.reproduciendo h3{font-size:18px;}
.work .tag{
  transition:opacity .4s cubic-bezier(.16,1,.3,1),letter-spacing .5s cubic-bezier(.16,1,.3,1);
}
.work.reproduciendo .tag{opacity:.75;letter-spacing:.06em;}

/* el CTA entra desde arriba con freno */
.work .go{
  transition:opacity .42s cubic-bezier(.16,1,.3,1),
             transform .42s cubic-bezier(.16,1,.3,1);
}
.work.reproduciendo .go{opacity:1;transform:translateY(0);}