@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/dm-sans-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/ibm-plex-mono-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2')}
/* Hypnos Industries — versión estática de la web 2025 (reconstruida oct 2026) */
:root{
  --negro:#000;--blanco:#fff;--azul:#2848FF;--rosa:#F2295B;--gris:#E8E8E8;
  --sans:"DM Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(16px,4vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blanco);color:var(--negro);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.alt{font-weight:300}
.blink2,.blink3{animation:blink 1s infinite}
@keyframes blink{0%{opacity:1}25%{opacity:0}50%{opacity:0}75%{opacity:1}100%{opacity:1}}

/* Ruido */
.Noise{position:fixed;inset:-20vw;z-index:2;background:url(img/noise-1.png) 0 0/50vw;opacity:.7;pointer-events:none}
@media(min-width:1024px){.Noise{animation:noise 2s steps(2) infinite}}
@keyframes noise{0%{transform:translate3d(0,9rem,0)}10%{transform:translate3d(-1rem,-4rem,0)}20%{transform:translate3d(-8rem,2rem,0)}30%{transform:translate3d(9rem,-9rem,0)}40%{transform:translate3d(-2rem,7rem,0)}50%{transform:translate3d(-9rem,-4rem,0)}60%{transform:translate3d(2rem,6rem,0)}70%{transform:translate3d(-7rem,1rem,0)}80%{transform:translate3d(7rem,-3rem,0)}90%{transform:translate3d(-1rem,8rem,0)}100%{transform:translate3d(0,9rem,0)}}

/* Cabecera */
.hidding{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);color:#fff}
.hidding .logo img{height:44px;width:auto}
.menu{display:flex;gap:clamp(14px,3vw,40px);font-family:var(--mono);font-size:16px;text-transform:lowercase}
.menu a:hover span{animation:blink .5s infinite}
.burger{display:none;background:none;border:0;color:#fff;font:600 16px var(--mono);cursor:pointer}
@media(max-width:767px){
  .hidding{background:#000}
  .burger{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#000;padding:20px var(--pad) 28px;font-size:20px}
  .menu.open{display:flex}
}

/* Hero */
.fondo{position:relative;min-height:100vh;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;animation:fondo 1s forwards 3s}
@keyframes fondo{to{background:var(--azul)}}
@media(max-width:1200px){.fondo{animation-delay:0s}}
.hero-marca{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,80px);width:100%;padding:100px var(--pad) 120px}
.logoanim{flex:0 0 auto;display:flex;animation:invert 0s forwards 3s}
@keyframes invert{to{filter:invert(1)}}
.logoanim svg{height:min(52vh,34vw);width:auto}
.logoanim path{fill:none;stroke:#000!important;stroke-width:8px!important;stroke-dasharray:12000;stroke-dashoffset:12000;animation:dibujar 2s forwards ease-out}
.logoanim #CENTRO path{animation-delay:1s}.logoanim #ARRIBA path{animation-delay:2s}
@keyframes dibujar{to{stroke-dashoffset:0}}
.letras{flex:0 1 auto;display:flex;pointer-events:none}
.letras svg{width:min(46vw,900px);height:auto}
.letras path{stroke:transparent;stroke-width:3px;fill:transparent;stroke-dasharray:12000;stroke-dashoffset:12000;
  animation:linea 3s forwards ease-out 3s,stroke .5s forwards ease-in 3s,relleno 1s forwards ease-in 5.5s}
@keyframes linea{to{stroke-dashoffset:0}}@keyframes stroke{to{stroke:#fff}}@keyframes relleno{to{fill:#fff}}
@media(max-width:900px){
  .hero-marca{flex-direction:column;gap:6vh}
  .logoanim svg{height:auto;width:min(60vw,340px)}
  .letras svg{width:min(84vw,560px)}
}
@media(max-width:1200px){
  .letras path{animation-delay:0s,0s,2.5s}
}
.scroll{position:absolute;bottom:28px;right:var(--pad);z-index:4;color:#fff;font:500 14px var(--mono);display:flex;gap:10px;align-items:center;opacity:0;animation:aparece .6s forwards 3.5s}
.scroll img{width:18px;filter:invert(1);transform:rotate(180deg);animation:diag .5s infinite alternate}
@keyframes diag{to{transform:translate(-6px,6px) rotate(180deg)}}
@keyframes aparece{to{opacity:1}}
.eje{position:absolute;background:#fff;opacity:0;z-index:2;animation:aparece .8s forwards 3s}
.eje.v{width:1px;top:0;bottom:0;left:var(--pad)}
.eje.h{height:1px;left:0;right:0;bottom:80px}

/* Cinta */
.banner{overflow:hidden;background:#fff;border-block:1px solid #000;padding:14px 0}
.desliza{display:flex;width:max-content;animation:mueve 40s linear infinite;font:600 clamp(22px,3vw,40px)/1.1 var(--mono);white-space:nowrap}
.desliza span{padding-right:1.2em}
.desliza .alt{color:var(--azul)}
@keyframes mueve{to{transform:translateX(-50%)}}

/* Vídeo */
.tuki{position:relative;min-height:60vh;overflow:hidden;background:#000}
.tuki video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pantalla{position:relative;height:60vh;display:flex;justify-content:space-around;align-items:center;pointer-events:none}
.palabra-container{position:relative;text-align:center}
.palabra{color:#fff;font:400 3rem var(--sans);position:relative;z-index:2;letter-spacing:-.01em}
.circulo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:5px solid #fff;border-radius:50%;z-index:1}
@media(max-width:767px){.pantalla{height:80vh;flex-direction:column}}

/* Somos */
.somos{background:#fff;padding:clamp(60px,10vw,140px) var(--pad);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;scroll-margin-top:80px}
.somos p{font:300 clamp(22px,2.6vw,38px)/1.35 var(--mono);max-width:1100px}
.somos p .alt{font-weight:600}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;padding:12px 22px;border-radius:999px;font:500 16px var(--sans);background:transparent;color:inherit;cursor:pointer;transition:.25s}
.btn img{width:14px}
.btn:hover{background:#000;color:#fff}.btn:hover img{filter:invert(1)}
.dark .btn:hover{background:#fff;color:#000}.dark .btn:hover img{filter:none}
@media(max-width:767px){.somos{grid-template-columns:1fr}}

/* Bloques de títulos */
.bloque{scroll-margin-top:80px}
.bloque-head{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #000}
.bloque-head h2{background:#fff;min-height:300px;padding:var(--pad);font:700 clamp(32px,3.4vw,52px)/1.05 var(--sans);display:flex;align-items:flex-end}
.bloque-head .flecha{display:flex;align-items:center;justify-content:center;border-left:1px solid #000;transition:.3s}
.bloque-head .flecha img{width:clamp(60px,10vw,160px)}
.bloque-head .flecha:hover{filter:invert(1);background:#fff}
.cols{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #000}
.cols.tres{grid-template-columns:repeat(3,1fr)}
.col{padding:var(--pad) clamp(16px,2vw,32px);border-right:1px solid #000;display:flex;flex-direction:column;gap:18px;background:#fff;position:relative}
.col:last-child{border-right:0}
.col h3{font:700 clamp(26px,2.4vw,40px)/1.05 var(--sans)}
.col p{font:300 15px/1.6 var(--mono)}
.col .btn{align-self:flex-start;margin-top:auto}
@media(max-width:1024px){.cols{grid-template-columns:1fr 1fr}.cols.tres{grid-template-columns:1fr}}
@media(max-width:767px){.bloque-head{grid-template-columns:1fr}.bloque-head .flecha{border-left:0;border-top:1px solid #000;padding:30px}.bloque-head h2{min-height:200px}.cols{grid-template-columns:1fr}.col{border-right:0;border-bottom:1px solid #000}}

/* Galería */
.galeria{columns:4 260px;column-gap:0;background:#000}
.galeria img{width:100%;break-inside:avoid;filter:grayscale(1);transition:filter .4s}
.galeria img:hover{filter:none}

/* Marcas */
.marcas{background:#000;overflow:hidden;padding:40px 0}
.marcas .pista{display:flex;width:max-content;gap:90px;align-items:center;animation:mueve 30s linear infinite}
.marcas img{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.85}

/* Pie */
footer{background:#000;color:#fff;padding:clamp(50px,7vw,100px) var(--pad) 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;scroll-margin-top:60px}
footer h2{font:700 clamp(26px,2.4vw,40px)/1.1 var(--sans)}
footer .mail{font:700 clamp(18px,1.8vw,24px) var(--mono)}
footer .legal{display:flex;gap:24px;font:400 14px var(--mono);margin:18px 0}
footer .marca{grid-column:1/-1;margin-top:30px}
footer .marca img{width:100%}
footer .firma{font:600 14px var(--sans);opacity:.7;grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:767px){footer{grid-template-columns:1fr}}

/* Panel contacto */
.panel{position:fixed;inset:0;z-index:100;display:none}
.panel.open{display:block}
.panel .velo{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.panel .caja-form{position:absolute;top:0;right:0;bottom:0;width:min(520px,100vw);background:#000;color:#fff;padding:40px var(--pad);overflow:auto}
.panel h3{font:700 36px/1.05 var(--sans);margin-bottom:28px}
.panel .cerrar{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font:400 28px var(--mono);cursor:pointer}
.panel form{display:flex;flex-direction:column;gap:14px}
.panel input,.panel textarea,.panel select{background:transparent;border:0;border-bottom:1px solid #fff;color:#fff;font:400 16px var(--mono);padding:10px 0;outline:none}
.panel option{color:#000}
.panel textarea{min-height:110px;resize:vertical}
.panel .nota{font:400 12px var(--mono);opacity:.6}

/* Reproductor */
.audio-pill{position:fixed;bottom:20px;left:20px;width:120px;height:40px;background:#000;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;z-index:60;transition:transform .2s;border:1px solid #333}
.audio-pill:hover{transform:scale(1.05)}
.audio-pill canvas{width:100%;height:30%}

/* Páginas interiores */
.interior{background:#fff;padding:140px var(--pad) 80px;min-height:70vh}
.interior h1{font:700 clamp(40px,6vw,90px)/1 var(--sans);margin-bottom:40px}
.interior .texto{max-width:860px;font:300 16px/1.75 var(--mono)}
.interior .texto h2{font:700 24px var(--sans);margin:36px 0 12px}
.interior .texto p{margin-bottom:14px}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filtros button{border:1px solid #000;background:#fff;padding:8px 18px;border-radius:999px;font:500 15px var(--mono);cursor:pointer}
.filtros button.on{background:#000;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid #000;border-left:1px solid #000}
.ficha{border-right:1px solid #000;border-bottom:1px solid #000;padding:20px;display:flex;flex-direction:column;gap:14px;background:#fff;transition:.25s}
.ficha .foto{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--gris)}
.ficha .foto img{max-height:90%;object-fit:contain}
.ficha h3{font:700 20px/1.15 var(--sans)}
.ficha small{font:500 13px var(--mono);color:var(--azul)}
.ficha:hover{background:#000;color:#fff}
.producto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.producto .foto{background:var(--gris);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.producto .foto img{max-height:90%;object-fit:contain}
.producto h1{font-size:clamp(34px,4.5vw,64px)}
.producto p{font:300 17px/1.7 var(--mono);margin-bottom:28px}
.volver{font:500 15px var(--mono);display:inline-block;margin-bottom:30px}
@media(max-width:767px){.producto{grid-template-columns:1fr}}
.interior + footer{border-top:1px solid #000}
/* Ajustes páginas interiores */
.int .hidding{background:#000}
.int .Noise{opacity:.35}
.ficha .foto,.producto .foto{background:#fff;border:1px solid var(--gris)}
.ficha:hover .foto{border-color:#000}