/* Extraído literalmente del sitio estático: los mismos bytes, sin reescribir ni reordenar. Los cortes caen en límite de regla. Común a las 20 páginas. */ html{background:#000;} /* ============ TOKENS (carried over from the original staging site) ============ */ :root{ --primary:hsla(238,0%,0%,1); --secondary:hsla(0,0%,100%,1); --secondary-20:hsla(0,0%,100%,.2); --tertiary:hsla(347,100%,39%,1); --tertiary-80:hsla(347,100%,39%,.8); --line:rgba(255,255,255,.13); --card:#0d0d0d; --text-3xl:clamp(2.9rem,calc(3.2vw + 1.85rem),6.4rem); --text-2xl:clamp(2.55rem,calc(2.1vw + 1.9rem),4.8rem); --text-xl:clamp(2.25rem,calc(1.25vw + 1.85rem),3.6rem); --text-l:clamp(2rem,calc(.65vw + 1.8rem),2.7rem); --text-m:clamp(1.6rem,calc(.19vw + 1.54rem),1.8rem); --text-s:clamp(1.42rem,calc(-.07vw + 1.44rem),1.35rem); --space-m:clamp(1.6rem,calc(1.11vw + 1.24rem),2.8rem); --space-l:clamp(2rem,calc(1.81vw + 1.42rem),3.96rem); --space-xl:clamp(2.5rem,calc(2.87vw + 1.58rem),5.6rem); --radius-s:4px; --radius-m:4px; --maxw:1400px; } *{margin:0;padding:0;box-sizing:border-box;} html{font-size:62.5%;scroll-behavior:smooth;} button,input,select,textarea{font-family:inherit;} /* overflow-x en convierte a body en el contenedor de scroll (overflow-y pasa a auto) y en móvil rompe el scroll de página y scrollIntoView. El recorte horizontal va en . */ html{overflow-x:hidden;} body{background:#000;color:var(--secondary);font-family:'Roboto Mono',ui-monospace,monospace;font-size:var(--text-m);line-height:1.55;} img{max-width:100%;display:block;} a{color:inherit;} section{scroll-margin-top:9rem;} h1,h2,h3{font-family:Rubik,sans-serif;font-weight:600;line-height:1.05;} p{font-family:"Roboto Mono",ui-monospace,monospace;} .inner{width:var(--maxw);max-width:100%;margin-inline:auto;padding-inline:var(--space-m);} .kicker{font-family:'Roboto Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.24em;font-size:var(--text-s);font-weight:600;color:var(--tertiary);margin-bottom:1rem;} .sec-title{font-size:var(--text-3xl);margin-bottom:.6rem;} .sec-sub{font-size:var(--text-m);color:rgba(255,255,255,.6);max-width:52ch;} .sec-head{margin-bottom:var(--space-l);} .btn{display:inline-flex;align-items:center;gap:.7rem;font-family:'Roboto Mono',ui-monospace,monospace;font-weight:600;font-size:var(--text-s);color:#fff;text-decoration:none;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:4px;padding:1.15rem 2rem;cursor:pointer;transition:background .25s,border-color .25s;} .btn:hover{background:var(--tertiary);border-color:var(--tertiary);} .btn--solid{background:var(--tertiary);border-color:var(--tertiary);} .btn--solid:hover{opacity:.88;} .pad{padding-block:var(--space-xl);} .sec-cta{margin-top:var(--space-l);} /* ============ HEADER ============ */ header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);} .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.4rem;} .brand{display:flex;align-items:center;gap:1.4rem;text-decoration:none;flex-shrink:0;} .brand img{--lh:46px;--lx:0px;--ly:0px;--lrot:0deg; height:var(--lh);width:auto; transform:translate(var(--lx),var(--ly)) rotate(var(--lrot));transform-origin:center;} /* ---- editor del logo (?logo) ---- */ body.logoedit .brand img{cursor:grab;outline:1px dashed rgba(199,0,43,.6);outline-offset:6px;} body.logoedit .brand{pointer-events:auto;} body.logoedit .brand img.dragging{cursor:grabbing;} .burger{width:2.8rem;height:4.4rem;display:none;flex-direction:column;justify-content:center;gap:.5rem;padding:0;background:transparent;border:0;cursor:pointer;flex-shrink:0;} .burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .3s,opacity .2s;} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.7rem) rotate(45deg);} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.7rem) rotate(-45deg);} /* drawer */ .menu{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .3s;} .menu.is-open{opacity:1;} .menu__inner{width:var(--maxw);max-width:100%;margin-inline:auto;padding:3rem var(--space-m) 4rem;height:100%;display:flex;flex-direction:column;gap:clamp(2.4rem,4vh,5rem);overflow-y:auto;} .menu__top{display:flex;align-items:center;justify-content:space-between;gap:2rem;} .menu__logo{height:40px;width:auto;} .menu__x{position:relative;width:3.4rem;height:3.4rem;background:transparent;border:0;padding:0;cursor:pointer;flex-shrink:0;} .menu__x span{position:absolute;left:50%;top:50%;width:2.8rem;height:2px;background:#fff;border-radius:2px;} .menu__x span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);} .menu__x span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);} .menu__nav{display:flex;flex-direction:column;gap:clamp(.6rem,1.4vh,1.6rem);margin-top:auto;} .menu__nav a{display:flex;align-items:baseline;gap:1.8rem;font-family:Rubik,sans-serif;font-weight:600;font-size:clamp(2.6rem,5vw,5rem);line-height:1.1;color:#fff;text-decoration:none;transition:color .2s;} .menu__nav a:hover{color:var(--tertiary);} .menu__idx{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.2rem;font-weight:400;letter-spacing:.14em;color:var(--tertiary);flex-shrink:0;} .menu__foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;font-size:1.35rem;color:rgba(255,255,255,.5);border-top:1px solid var(--line);padding-top:2rem;} .menu__foot a{color:rgba(255,255,255,.5);text-decoration:none;} .menu__foot a:hover{color:#fff;} body.menu-open{overflow:hidden;} .nav ul{display:flex;list-style:none;gap:clamp(1.2rem,2vw,3rem);} .nav a.navlink{font-family:'Roboto Mono',ui-monospace,monospace;font-weight:600;font-size:var(--text-s);text-decoration:none;color:rgba(255,255,255,.85);transition:color .2s;} .nav a.navlink:hover{color:var(--tertiary);} .nav .btn{padding:.9rem 1.7rem;} .nav__right{display:flex;align-items:center;gap:1.2rem;} /* pedido (cart) pill */ .pedido{display:inline-flex;align-items:center;gap:1rem;font-family:'Roboto Mono',ui-monospace,monospace;font-weight:600;font-size:var(--text-s);color:#fff;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:4px;padding:.9rem 1.7rem;text-decoration:none;transition:background .25s,border-color .25s;} .pedido:hover{background:var(--tertiary);border-color:var(--tertiary);} .pedido__count{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;padding:.2rem .5rem;background:var(--tertiary);border-radius:3px;font-size:1.2rem;letter-spacing:.06em;transition:transform .18s;} .pedido__count.bump{transform:scale(1.28);} /* ============ HERO ============ */ .hero{position:relative;overflow:hidden;} .hero .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-l);align-items:center;min-height:min(82vh,800px);padding-block:var(--space-l);} .hero h1{font-size:var(--text-2xl);margin-bottom:var(--space-m);} .hero p{font-size:var(--text-m);color:rgba(255,255,255,.82);max-width:56ch;margin-bottom:1.4em;} .hero .cta-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.6rem;} /* ============ HERO · FULL BLEED ============ */ .fbhero{position:relative;min-height:72vh;display:flex;align-items:center;overflow:hidden;} .fbhero .inner{display:block;grid-template-columns:none;min-height:0;padding-block:0;position:relative;z-index:1;} .fbhero__bg{position:absolute;inset:1.2rem 1.2rem 0;z-index:0;border-radius:12px;overflow:hidden;} .fbhero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:brightness(1.15);} .fbhero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.1) 72%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 30%,transparent 72%,rgba(0,0,0,.45) 100%);} .fbhero__body{max-width:640px;} .fbhero h1{font-size:var(--text-2xl);margin-bottom:var(--space-m);} .fbhero p{font-size:var(--text-m);color:rgba(255,255,255,.9);max-width:52ch;margin-bottom:2rem;} /* vertical film columns */ .reel-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,1.4vw,2rem);height:min(72vh,680px);overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);} .reel{display:flex;flex-direction:column;gap:clamp(1.2rem,1.4vw,2rem);animation:reel-up 46s linear infinite;} .reel--down{animation:reel-down 52s linear infinite;} @keyframes reel-up{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes reel-down{from{transform:translateY(-50%)}to{transform:translateY(0)}} /* film frame */ .film{position:relative;background:#0a0a0a;border:1px solid rgba(255,255,255,.14);padding:1rem 2.2rem;border-radius:4px;flex-shrink:0;} .film::before,.film::after{content:"";position:absolute;top:6px;bottom:6px;width:8px; background:repeating-linear-gradient(180deg,rgba(255,255,255,.75) 0 7px,transparent 7px 18px);border-radius:2px;} .film::before{left:6px;} .film::after{right:6px;} .film img{width:100%;height:auto;border-radius:2px;filter:contrast(1.03);} /* hero reels: plain photos, no film chrome */ .reel .film{background:none;border:0;padding:0;border-radius:4px;overflow:hidden;} .reel .film::before,.reel .film::after{display:none;} /* ============ MISSION ============ */ .mission .inner{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px);gap:var(--space-l);align-items:center;} .mflash{--x:24px;--y:-101px;--rot:0.3deg;--s:1.539; width:100%;max-width:290px;height:auto;justify-self:center; transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(var(--s)); transform-origin:center;filter:drop-shadow(0 14px 34px rgba(0,0,0,.6));} .mflash--r{--x:-16px;--y:94px;--rot:0.7deg;--s:1.610;} /* ---- editor tipo Photoshop (?stars) ---- */ body.starsedit .mflash{cursor:grab;outline:1px dashed rgba(199,0,43,.55);outline-offset:8px;} body.starsedit .mflash.dragging{cursor:grabbing;} .sh{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #C7002B;box-shadow:0 2px 8px rgba(0,0,0,.6);z-index:70;cursor:pointer;} .sh--rot{cursor:alias;} .sh--scale{cursor:nwse-resize;} #sp{position:fixed;right:16px;bottom:16px;z-index:99999;width:300px;background:rgba(8,8,8,.96);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:16px;font-family:'Roboto Mono',ui-monospace,monospace;color:#fff;font-size:11px;box-shadow:0 20px 50px rgba(0,0,0,.6);} #sp h3{font-family:Rubik,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#C7002B;margin:0 0 10px;} #sp .hint{color:rgba(255,255,255,.5);line-height:1.5;margin-bottom:10px;} #sp pre{background:#111;border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:8px;font-size:10.5px;margin:0 0 8px;color:rgba(255,255,255,.85);white-space:pre-wrap;} #sp .b{display:flex;gap:6px;} #sp .b button{flex:1;font-family:inherit;font-size:10.5px;text-transform:uppercase;color:#fff;background:#111;border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:8px;cursor:pointer;} #sp .b .red{background:#C7002B;border-color:#C7002B;} .mission__body{text-align:center;max-width:60ch;margin-inline:auto;} .mission__body p{font-size:clamp(1.9rem,1.7vw + 1.2rem,2.9rem);line-height:1.35;font-weight:400;margin-bottom:1.1em;} .mission__body p:last-child{margin-bottom:0;} .hl{color:var(--tertiary);} .polaroid{background:#f4f2ee;padding:.8rem .8rem 2.6rem;border-radius:3px;box-shadow:0 12px 34px rgba(0,0,0,.5);transform:rotate(-5deg);} .polaroid--r{transform:rotate(4.5deg);} .polaroid img{border-radius:2px;filter:saturate(1.05);} /* ============ TIENDA ============ */ /* ===================== banner de cookies ===================== */ /* Barra inferior, no un modal: un modal que tapa el sitio hasta que decides se parece a un muro de cookies, que la AEPD no admite. */ .ck{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--card); border-top:1px solid var(--line);transform:translateY(100%);transition:transform .3s ease;} .ck.is-open{transform:translateY(0);} .ck__in{max-width:var(--maxw);margin-inline:auto;padding:var(--space-m) var(--space-m); display:flex;gap:var(--space-m);align-items:center;justify-content:space-between;flex-wrap:wrap;} .ck__txt{flex:1 1 34rem;min-width:0;} .ck__h{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.2rem;letter-spacing:.12em; text-transform:uppercase;color:var(--tertiary);margin:0 0 .6rem;} .ck__in p{font-size:var(--text-s);line-height:1.55;color:rgba(255,255,255,.72);margin:0;max-width:78ch;} .ck__in a{color:var(--secondary);text-decoration:underline;text-underline-offset:2px;} .ck__btns{display:flex;gap:1rem;flex:0 0 auto;} /* Idénticos a propósito. Ver src/scripts/cookies.js. */ .ck__b{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.3rem;letter-spacing:.04em; min-width:13rem;padding:1.1rem 1.8rem;border:1px solid var(--secondary-20); border-radius:var(--radius-s);background:transparent;color:var(--secondary);cursor:pointer; transition:background .2s ease,border-color .2s ease;} .ck__b:hover{background:rgba(255,255,255,.08);border-color:var(--secondary);} @media(max-width:700px){ .ck__in{flex-direction:column;align-items:stretch;gap:1.6rem;} .ck__btns{width:100%;} .ck__b{flex:1 1 0;min-width:0;} } /* ===================== capa de grano ===================== */ /* ⚑ Esto vivía SÓLO en shop.css y home.css, y grano.js corre en todas las páginas. Una página que no cargara esas hojas dejaba #page-grain en position:static, es decir, dentro del flujo: entonces su altura sumaba al scrollHeight que el propio script lee para dimensionarla, y crecía sin parar (la política de privacidad llegó a 317.000 px y reventó la captura). La regla es de todo el sitio y su sitio es éste. */ #page-grain{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;background:#000;} #page-grain canvas{display:block;width:100%;height:100%;} body > header, body > main, body > footer{position:relative;z-index:1;} /* ===================== [hidden] de verdad oculto ===================== */ /* La regla del navegador para [hidden] es display:none con especificidad de elemento, así que CUALQUIER clase con display propio la gana y el atributo deja de hacer nada — en silencio, que es lo peor. Ya había pasado tres veces en este repo, y cada una se parcheó por separado y en pequeño: `.signup [hidden]`, `.sc__form [hidden]`, `.tdform [hidden]`. La cuarta fue .optin__form (display:flex): el boletín decía «hecho» y dejaba el formulario a la vista, como si no se hubiera enviado. Se arregla una vez y para todo lo que venga. Es seguro porque en este sitio todo lo que se revela lo hace poniendo hidden=false, nunca pisando display. */ [hidden]{display:none !important;} /* Instagram del pie: el enlace pasa de texto a símbolo, así que necesita alinearse como un icono y no como una línea de texto. En global.css porque el pie sale en las 20 páginas y sus estilos viven repartidos entre shop.css y home.css — meterlo en una de las dos lo dejaría roto en la otra. */ .foot__ig{display:inline-flex;align-items:center;line-height:1;} .foot__ig svg{display:block;}