*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
  --bg:#1E0F09;--red:#6E312C;
  --terra:#BA7865;--terra2:#d4967f;--terra3:#e8b89e;--dark:#381809;
}
body{background:var(--bg);color:#fff;font-family:'Barlow Condensed',sans-serif;cursor:none}

/* ── CURSOR (solo desktop) ── */
@media(pointer:fine){
  #cur{position:fixed;z-index:9999;pointer-events:none;width:8px;height:8px;border-radius:50%;background:var(--terra3);transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .15s,height .15s}
  #cur-ring{position:fixed;z-index:9998;pointer-events:none;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(186,120,101,.55);transform:translate(-50%,-50%);transition:width .2s,height .2s}
  body.hov #cur{width:14px;height:14px}
  body.hov #cur-ring{width:50px;height:50px}
}
@media(pointer:coarse){#cur,#cur-ring{display:none}body{cursor:auto}}

/* ── NOISE ── */
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem clamp(1rem,5vw,4rem);
  background:linear-gradient(to bottom,rgba(30,15,9,.95),transparent);
  padding-top:max(1rem, env(safe-area-inset-top));
}
.nav-brand{
  font-family:'Anton',sans-serif;font-size:clamp(.85rem,2.5vw,1.05rem);
  letter-spacing:3px;
  background:linear-gradient(135deg,var(--terra),var(--terra3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;
}
.nav-sub{font-size:clamp(.45rem,.9vw,.53rem);letter-spacing:2.5px;text-transform:uppercase;color:rgba(186,120,101,.4);display:block;margin-top:2px}
.nav-links{display:flex;gap:clamp(1rem,2.5vw,2rem);list-style:none}
.nav-links a{font-size:clamp(.55rem,1.2vw,.63rem);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--terra2)}
@media(max-width:600px){.nav-links{display:none}}

/* ── HERO ── */
.s1{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  overflow:hidden;background:var(--bg);
}
.s1::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(30,15,9,.98) 0%,rgba(30,15,9,.8) 45%,transparent 100%);
}
.s1-inner{
  position:relative;z-index:2;
  padding:calc(80px + 1rem) clamp(1.2rem,6vw,6rem) 3rem;
  max-width:min(660px,95vw);
  width:100%;
}

/* Eyebrow */
.s1-eyebrow{
  font-size:clamp(.52rem,.9vw,.6rem);font-weight:700;letter-spacing:5px;
  text-transform:uppercase;color:var(--terra);
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:clamp(1.2rem,3vw,2rem);
  opacity:0;animation:fadeUp .6s .2s forwards;
}
.s1-eyebrow::before{content:'';width:22px;height:1px;background:var(--terra);flex-shrink:0}

/* Logo TPC */
.s1-logo{
  width:clamp(200px,55vw,480px);
  filter:drop-shadow(0 4px 20px rgba(186,120,101,.2));
  margin-bottom:clamp(1.2rem,3vw,1.8rem);
  opacity:0;animation:fadeUp .7s .35s forwards;
  display:block;
}

/* Marquee */
.mq-outer{
  overflow:hidden;
  border-top:1px solid rgba(186,120,101,.14);
  border-bottom:1px solid rgba(186,120,101,.14);
  padding:.45rem 0;
  margin:0 calc(-1 * clamp(1.2rem,6vw,6rem)) clamp(1.2rem,3vw,1.8rem);
  opacity:0;animation:fadeUp .6s .5s forwards;
}
.mq-track{display:flex;width:max-content;animation:mq 22s linear infinite}
.mq-track span{font-size:clamp(.48rem,.8vw,.54rem);font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(186,120,101,.32);padding:0 1.4rem;white-space:nowrap}
.mq-track span.hi{color:rgba(186,120,101,.55)}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Badges */
.s1-badges{
  display:flex;flex-wrap:wrap;gap:.35rem;
  margin-bottom:clamp(1.2rem,3vw,1.7rem);
  opacity:0;animation:fadeUp .6s .55s forwards;
}
.bdg{
  padding:.22rem .7rem;
  border:1px solid rgba(186,120,101,.2);border-radius:2px;
  font-size:clamp(.5rem,.8vw,.56rem);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:rgba(232,184,158,.55);
  background:rgba(186,120,101,.055);
  position:relative;overflow:hidden;
}
.bdg::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(232,184,158,.1) 50%,transparent 75%);animation:shim 4.5s ease-in-out infinite}
@keyframes shim{0%{transform:translateX(-120%)}55%{transform:translateX(120%)}100%{transform:translateX(120%)}}

/* WIP */
.s1-wip{
  display:flex;align-items:center;gap:.45rem;
  font-size:clamp(.5rem,.8vw,.57rem);font-weight:700;letter-spacing:4px;
  text-transform:uppercase;color:rgba(186,120,101,.3);
  opacity:0;animation:fadeUp .6s .65s forwards;
}
.wd{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--red);animation:blink 2.5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.18}50%{opacity:1}}
@keyframes fadeUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── OLAS ── */
.wave-top{position:relative;z-index:2;line-height:0;background:var(--bg)}
.wave-top svg{display:block;width:100%}
.wave-bot{position:relative;z-index:2;line-height:0;background:var(--red)}
.wave-bot svg{display:block;width:100%}

/* ── GAMES ── */
.s2{
  position:relative;background:var(--red);
  padding:clamp(3rem,6vw,5rem) clamp(1.2rem,6vw,6rem) clamp(3rem,6vw,4rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  overflow:hidden;
}
.s2::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 30%,rgba(186,120,101,.1) 0%,transparent 70%),
    repeating-linear-gradient(-45deg,transparent 0,transparent 28px,rgba(186,120,101,.025) 28px,rgba(186,120,101,.025) 29px);
}
.s2-ey{
  position:relative;z-index:1;
  font-size:clamp(.52rem,.9vw,.6rem);font-weight:700;letter-spacing:5px;
  text-transform:uppercase;color:rgba(232,184,158,.5);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
}
.s2-ey::before,.s2-ey::after{content:'';flex:0 0 30px;height:1px;background:rgba(186,120,101,.28)}
.s2-title{
  position:relative;z-index:1;
  font-family:'Anton',sans-serif;
  font-size:clamp(1.8rem,5vw,4.5rem);
  letter-spacing:4px;line-height:.95;
  color:rgba(232,184,158,.88);margin-bottom:1rem;
}
.s2-desc{
  position:relative;z-index:1;
  font-size:clamp(.6rem,1.2vw,.7rem);font-weight:400;letter-spacing:1.5px;
  text-transform:uppercase;line-height:1.9;
  color:rgba(232,184,158,.36);max-width:500px;margin-bottom:1.8rem;
}
.s2-desc strong{color:rgba(232,184,158,.6);font-weight:700}
.s2-btn{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.s2-btn:hover{transform:translateY(-8px) scale(1.02)}
.s2-btn:active{transform:scale(.98);transition:transform .1s}
.s2-btn img{
  width:min(400px,85vw);
  filter:drop-shadow(0 0 14px rgba(30,15,9,.7)) drop-shadow(0 8px 28px rgba(0,0,0,.5));
  transition:filter .3s;display:block;
}
.s2-btn:hover img{filter:drop-shadow(0 0 28px rgba(232,184,158,.28)) drop-shadow(0 12px 44px rgba(0,0,0,.65))}
.pill{
  display:inline-block;padding:.55rem 2.2rem;
  background:var(--terra3);border-radius:100px;
  font-size:clamp(.58rem,1.1vw,.68rem);font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--dark);
  box-shadow:0 4px 18px rgba(0,0,0,.3);
  position:relative;overflow:hidden;transition:background .2s;
}
.pill::after{content:'';position:absolute;inset:0;border-radius:100px;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.22) 50%,transparent 75%);animation:shim 3s ease-in-out infinite}
.s2-btn:hover .pill{background:#fff}

/* ── FOOTER ── */
footer{
  background:var(--bg);
  border-top:1px solid rgba(186,120,101,.07);
  padding:1.5rem clamp(1.2rem,5vw,5rem);
  padding-bottom:max(1.5rem, env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem;
}
.ft-brand{font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:3px;background:linear-gradient(135deg,var(--terra),var(--terra3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ft-copy{font-size:.5rem;letter-spacing:2px;text-transform:uppercase;color:rgba(186,120,101,.18)}

/* Reveal */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}

/* ── MOBILE ESPECÍFICO ── */
@media(max-width:480px){
  .s1::after{background:linear-gradient(180deg,rgba(30,15,9,.95) 0%,rgba(30,15,9,.7) 60%,rgba(30,15,9,.5) 100%)}
  .s1-inner{padding-top:calc(70px + 1rem)}
  footer{justify-content:center;text-align:center}
}

/* ── VIDEO SHOWCASE HERO ── */
.s1-video-wrap{
  position:absolute;
  right:0;top:0;bottom:0;
  width:62%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

/* El video ocupa todo el panel derecho */
.s1-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* mix-blend-mode: multiply elimina el fondo blanco/claro
     del video fundiéndolo con el fondo oscuro del hero */
  mix-blend-mode:multiply;
  opacity:.95;
  display:block;
}

/* Overlay de color: da el tinte terracota que une el video con la paleta */
.s1-video-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(
    135deg,
    rgba(30,15,9,.15) 0%,
    rgba(110,49,44,.08) 50%,
    transparent 100%
  );
  mix-blend-mode:color;
  pointer-events:none;
}

/* Fade izquierdo: funde el video con el contenido de texto */
.s1-video-wrap::before{
  content:'';
  position:absolute;
  top:0;left:0;bottom:0;
  width:45%;
  background:linear-gradient(to right, var(--bg) 0%, rgba(30,15,9,.6) 50%, transparent 100%);
  z-index:3;
  pointer-events:none;
}

/* Fade inferior: el video "nace" del piso */
.s1-video-wrap::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:22%;
  background:linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index:3;
  pointer-events:none;
}

/* Mobile: ocultar video (iOS lo maneja mal en background), usar imagen poster */
@media(max-width:768px){
  .s1-video-wrap{display:none}

  .s1{
    background-image:url("../assets/videos/product-showcase.jpg");
    background-size:cover;
    background-position:center;
  }

  /* Overlay más denso en mobile para que el texto sea siempre legible */
  .s1::after{
    background:linear-gradient(180deg,
      rgba(30,15,9,.97) 0%,rgba(30,15,9,.75) 55%,rgba(30,15,9,.55) 100%);
  }
}

/* ── ACCESIBILIDAD: movimiento reducido ── */
@media(prefers-reduced-motion:reduce){
  .s1-video{display:none !important}
  .s1{
    background-image:url("../assets/videos/product-showcase.jpg");
    background-size:cover;
    background-position:center;
  }
}