/* =========================================================
   ESTILO "ECUMOTO" (como la referencia)
   Tipos: Montserrat + Oswald (se cargan en index.html)
   ========================================================= */

:root{
  /* Colores */
  --accent:#ff6a00;
  --text:#f4f4f4;
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.16);

  /* Fondo y panel */
  --panel:rgba(25,25,28,.18);   /* más transparente (como la imagen) */
  --panel2:rgba(25,25,28,.12);
  --shadow:0 24px 60px rgba(0,0,0,.35);

  --radius:18px;
  --maxw: 1040px;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
  background:#000;
}

/* =========================
   Fondo (humo visible)
   ========================= */
.bg{position:fixed; inset:0; z-index:-3; background:#000}
.bg__img{
  width:100%; height:100%;
  object-fit:cover;
  /* menos oscuro, más parecido al ejemplo */
  filter: grayscale(.05) contrast(1.03) saturate(.95) brightness(1.05);
  transform: scale(1.02);
}
.bg__overlay{
  position:absolute; inset:0;
  /* MUCHO menos sombra */
  background:
    radial-gradient(1200px 650px at 50% 20%, rgba(0,0,0,.06), rgba(0,0,0,.28)),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.28));
}
.bg__noise{
  position:absolute; inset:0;
  opacity:.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* =========================
   Topbar
   ========================= */
.topbar{
  max-width: calc(var(--maxw) + 180px);
  margin: 22px auto 0;
  padding: 0 18px;
  display:flex;
  align-items:center;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.brand__mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.12);
  font-weight:900;
  color:var(--accent);
}
.brand__name{
  font-family: Oswald, Montserrat, sans-serif;
  letter-spacing:.14em;
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
}
.brand__sub{
  margin-top:2px;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted2);
  text-transform:uppercase;
}

.nav{
  display:flex;
  gap:22px;
  flex:1;
  justify-content:center;
}
.nav__link{
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  padding:10px 6px;
  position:relative;
}
.nav__link:hover{color:var(--text)}
.nav__link.is-active{color:var(--accent)}
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:4px;
  height:2px;
  background: var(--accent);
  opacity:.9;
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.iconbtn{
  border:1px solid var(--line);
  background: rgba(0,0,0,.10);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.iconbtn:hover{border-color:rgba(255,255,255,.28)}

/* Botón menú móvil (como el cuadro blanco con líneas naranjas) */
.menuBtn{
  display:none;
  margin-left:6px;
  width:56px; height:56px;
  border-radius:0;               /* cuadrado como referencia */
  border:0;
  background:#fff;
  cursor:pointer;
  position:relative;
}
.menuBtn span{
  position:absolute; left:16px; right:16px; height:2px;
  background:var(--accent);
}
.menuBtn span:nth-child(1){top:18px}
.menuBtn span:nth-child(2){top:28px}
.menuBtn span:nth-child(3){top:38px}

/* =========================
   Drawer móvil
   ========================= */
.drawer{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  z-index:50;
}
.drawer.is-open{display:block}
.drawer__panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(360px, 86vw);
  background: rgba(10,10,12,.92);
  border-left:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  padding:18px;
}
.drawer__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.drawer__title{
  font-family: Oswald, Montserrat, sans-serif;
  letter-spacing:.18em;
  font-weight:700;
  text-transform:uppercase;
}
.drawer__close{
  border:1px solid var(--line);
  background: rgba(0,0,0,.2);
  color:#fff;
  border-radius:12px;
  width:44px; height:44px;
  cursor:pointer;
}
.drawer__link{
  display:block;
  padding:14px 8px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  letter-spacing:.16em;
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  border:1px solid transparent;
}
.drawer__link:hover{border-color:rgba(255,255,255,.16); background: rgba(0,0,0,.12)}

/* =========================
   Stage / Panel (hero)
   ========================= */
.stage{
  min-height:100vh;
  display:block;
  padding:0;
}


.panel{
  width:100%;
  height:100%;
  border-radius:0;
  background: transparent;   /* 👈 elimina el recuadro oscuro */
  box-shadow:none;
  position:relative;
  overflow:visible;
  backdrop-filter:none;
}

/* Numeración izquierda */
.steps{
  position:absolute;
  left:26px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:18px;
  font-family: Oswald, Montserrat, sans-serif;
  font-weight:700;
  letter-spacing:.18em;
  user-select:none;
  text-transform:uppercase;
}
.step{
  color: rgba(255,255,255,.42);
  cursor:pointer;
  padding:6px 0;
}
.step.is-active{color:var(--accent)}

/* Slider */
.slider{position:absolute; inset:0; padding:26px}

/* ✅ Imagen del producto (SIN recuadro / sin sombra exagerada) */
.slider__media{
  position:absolute;
  left: 90px;
  right: 260px;
  top: 70px;
  bottom: 70px;
  display:grid;
  place-items:center;
}
.slider__media{
  position:absolute;
  left:140px;      /* espacio para 001..004 */
  right:340px;     /* espacio para specs */
  top:90px;        /* espacio para header */
  bottom:90px;     /* espacio para footer + controles */
  display:flex;
  align-items:center;
  justify-content:center;
}

.slider__media img{
  width: min(720px, 60vw);    /* limita tamaño en desktop */
  height: auto;
  max-height: 60vh;           /* evita que se agrande demasiado */
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.28));
  transition: opacity .25s ease, transform .35s ease;
  transform: translateY(0);
}


  /* sombra suave como en referencia */
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.35));
  transition: opacity .25s ease, transform .35s ease;
  transform: translateY(2px);
}

/* Social abajo izquierda */
.social{
  position:absolute; left:22px; bottom:18px;
  display:flex; gap:10px;
}
.social a{
  width:32px;height:32px;
  display:grid; place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  background: rgba(0,0,0,.08);
}
.social a:hover{border-color:rgba(255,255,255,.26); color:#fff}

/* Specs derecha */
.specs{
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:18px;
  width: 220px;
}
.spec{display:flex; gap:12px; align-items:flex-start}
.dot{
  width:10px;height:10px; border-radius:999px;
  border:2px solid var(--accent);
  margin-top:6px;
}
.spec__value{
  font-weight:900;
  letter-spacing:.06em;
  font-size:18px;
}
.spec__label{
  font-size:11px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.52);
  text-transform:uppercase;
  margin-top:4px;
}

/* Botón GO (cuadrado esquina) */
.cta{
  position:absolute;
  right:0; bottom:0;
  width:118px; height:92px;
  background:var(--accent);
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.cta span{
  font-family: Oswald, Montserrat, sans-serif;
  color:#fff;
  font-weight:800;
  letter-spacing:.22em;
  font-size:18px;
}
.cta:hover{filter:brightness(1.06)}

/* Controles centro abajo */
.controls{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  display:flex;
  gap:10px;
}
.ctrl{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.10);
  color:#fff;
  cursor:pointer;
  font-size:18px;
}
.ctrl:hover{border-color:rgba(255,255,255,.26)}

/* Footer */
.foot{padding: 10px 18px 24px}
.foot__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  opacity:.75;
}
.foot__line{height:1px; flex:1; background: rgba(255,255,255,.14)}
.foot__text{
  font-family: Oswald, Montserrat, sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 960px){
  .nav{display:none}
  .menuBtn{display:inline-block}
}

@media (max-width: 880px){
  .panel{height: min(620px, 78vh)}
  .specs{display:none}
  .slider__media{
    left: 70px;
    right: 40px;
    top: 90px;
    bottom: 130px;
  }
  .steps{left:18px}
}

@media (max-width: 520px){
  .topbar{margin-top:14px}
  .brand{min-width:auto}
  .actions{display:none}
  .panel{border-radius:14px}
  .slider{padding:18px}

  .slider__media{
    left: 52px;
    right: 18px;
    top: 94px;
    bottom: 140px;
  }

  .cta{width:106px; height:84px}
  .controls{bottom:14px}
}