:root{
  --azul:#00B7FF;--negro:#0B0E12;--grafito:#2A2F36;--blanco:#F2F4F8;--muted:#9AA3B0;--line:#232932;
  --gut:clamp(16px,4vw,56px);--sec:clamp(72px,11vw,160px);--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--negro);color:var(--blanco);font-family:"Saira",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:20;padding:10px 16px;background:var(--azul);color:var(--negro);font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gut),1240px);margin-inline:auto}

/* tipografía de marca: Saira itálica a 15° */
h1,h2,.statement{font-style:italic;font-weight:800;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
h2{font-size:clamp(32px,5vw,68px)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--azul);margin-bottom:20px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 30px;background:var(--grafito);color:var(--blanco);
  text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:background .2s,color .2s,transform .2s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--blanco);color:var(--negro);transform:translateY(-2px)}
.btn-azul{background:var(--azul);color:var(--negro)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* cabecera */
.top{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gut)}
.top-logo img{width:clamp(130px,14vw,168px)}
.top nav{display:flex;gap:clamp(14px,2.4vw,32px)}
.top nav a{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:10px 0}
.top nav a:hover{color:var(--azul)}

/* hero: no ocupa toda la pantalla, deja asomar la siguiente sección */
.hero{position:relative;overflow:hidden;min-height:min(76svh,760px);display:flex;align-items:flex-end;background:url(bg/01.webp) center/cover}
.bg{position:absolute;inset:0;overflow:hidden;background:var(--negro)}
.grid{position:absolute;left:50%;top:50%;width:calc(120vw + 400px);height:calc(120vw + 400px);display:flex;justify-content:center;gap:12px;transform:translate(-50%,-50%) rotate(15deg)}
.col{flex:0 0 clamp(130px,16vw,320px)}
.track{will-change:transform}
.col img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:12px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.bg::before{content:"";position:absolute;inset:0;z-index:1;background:var(--azul);mix-blend-mode:color;opacity:.2}
.bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(95deg,rgba(11,14,18,.95) 0%,rgba(11,14,18,.84) 50%,rgba(11,14,18,.4) 100%),linear-gradient(0deg,var(--negro),transparent 35%)}
.hero-in{position:relative;z-index:3;width:min(100% - 2*var(--gut),1240px);margin-inline:auto;padding:120px 0 64px}
h1{font-size:clamp(30px,8.4vw,112px);line-height:.98}
h1 em{font-style:inherit;color:var(--azul)}
.mask{display:block;overflow:hidden;padding:.04em .12em .04em 0}
.mask>span{display:block}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-top:32px}
.hero-foot p{max-width:44ch;font-size:clamp(16px,1.6vw,20px);font-weight:300;color:#C6CCD6}
.stripes{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;gap:6px;height:6px}
.stripes i{background:var(--azul);transform:skewX(-15deg)}
.stripes i:nth-child(1){flex:0 0 12px}.stripes i:nth-child(2){flex:0 0 18px}.stripes i:nth-child(3){flex:0 0 44px}.stripes i:nth-child(4){flex:1;transform-origin:left}

/* nosotros */
.about{padding-block:var(--sec)}
.statement{font-size:clamp(32px,6vw,84px);max-width:17ch}
.statement .w{display:inline-block}
.rubros{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(48px,7vw,96px)}
.num{display:block;font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--azul);margin-bottom:12px}
.rubros h3{font-size:22px;font-weight:600;line-height:1.25;margin-bottom:10px}
.rubros p,.shop-text>p,.social-in>p{color:var(--muted);font-weight:300;font-size:17px}
.mat-title{margin-top:clamp(64px,9vw,120px);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.mats{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.mats li{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;align-items:baseline;gap:16px;padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
.mats strong{font-style:italic;font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(32px,5vw,68px);line-height:1;transition:color .2s}
.mats span{color:var(--muted);font-size:17px;font-weight:300}
.mats li:hover{padding-left:16px}
.mats li:hover strong{color:var(--azul)}

/* sorteo: foto del soporte fundida con el fondo y halos de azul de marca */
.raffle{position:relative;overflow:hidden;background:#000;clip-path:polygon(0 clamp(16px,3vw,44px),100% 0,100% calc(100% - clamp(16px,3vw,44px)),0 100%)}
.raffle-glow{position:absolute;inset:0;background:
  radial-gradient(48% 75% at 62% 62%,rgba(0,183,255,.42),transparent 70%),
  radial-gradient(38% 60% at 2% 0%,rgba(0,183,255,.24),transparent 72%),
  linear-gradient(105deg,var(--negro) 0%,rgba(11,14,18,.55) 42%,rgba(0,60,92,.55) 100%)}
.raffle::after{content:"";position:absolute;left:0;right:0;bottom:clamp(16px,3vw,44px);height:3px;background:linear-gradient(90deg,transparent,var(--azul) 45%,transparent);transform:rotate(-1deg)}
.raffle-in{position:relative;z-index:1;display:grid;grid-template-columns:5fr 7fr;align-items:center;gap:clamp(24px,4vw,56px);padding-block:clamp(72px,8vw,112px)}
.raffle h2{margin-bottom:16px}
.raffle h2 em{font-style:inherit;background:linear-gradient(95deg,var(--azul),#8BE0FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.raffle-text>p:not(.eyebrow){max-width:46ch;font-size:18px;font-weight:300;color:#C6CCD6}
.raffle-text .btn{margin-top:28px}
.raffle-photo img{width:100%;-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 66%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 22%,#000 66%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 78%,transparent);mask-composite:intersect}

/* tienda */
.shop{padding-block:var(--sec)}
.shop-in{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,88px);align-items:center}
.shop-text h2{margin-bottom:18px}
.shop-text .btn{margin-top:28px}
.shop-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center}
.shop-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}

/* calculadora: el monograma se imprime capa a capa con el scroll */
.calc{background:#11151A;padding-block:var(--sec)}
.calc-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px);align-items:center}
.piece{position:relative;width:100%;aspect-ratio:372/204}
.piece img{width:100%}
.ghost{position:absolute;inset:0;opacity:.1;filter:grayscale(1)}
.built{position:absolute;inset:0;
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px);mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px)}
.nozzle{position:absolute;left:-4%;right:-4%;bottom:0;height:2px;background:var(--blanco);box-shadow:0 0 16px var(--azul);opacity:0}
.layer{margin-top:24px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.layer b{color:var(--blanco);font-weight:600}
.calc h2{margin-bottom:24px}
.steps{list-style:none;margin-bottom:32px}
.steps li{display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:17px}
.steps b{color:var(--azul)}

/* redes */
.social{padding-bottom:var(--sec);overflow:hidden}
.ticker{white-space:nowrap;padding-block:clamp(48px,7vw,96px) clamp(32px,4vw,56px);font-style:italic;font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(56px,11vw,168px);line-height:1;color:transparent;-webkit-text-stroke:1px #4A5260}
.ticker span{display:inline-block}
.social-in h2{margin-bottom:14px}
.social-in>p{max-width:52ch;margin-bottom:28px}

@media (max-width:860px){
  .rubros,.shop-in,.calc-in,.raffle-in{grid-template-columns:1fr}
  .printer{order:2}
}
@media (max-width:560px){
  .top nav a[href="#nosotros"]{display:none}
  .hero-in{padding:104px 0 48px}
  .mats li{grid-template-columns:1fr;gap:6px}
  .actions .btn,.raffle .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}