:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --orange:#fd6a1f;
  --orange-dim:#c9530f;
  --stone:#f1efe9;
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(10,10,10,.12);
  --grey:#8c8a86;
  --radius:2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1.05; letter-spacing:-0.01em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- SPLASH: solo el símbolo, viaja hasta el nav ---------- */
#splash{
  position:fixed; inset:0; z-index:999;
  background:var(--ink);
  pointer-events:none;
}
#splash .mark{
  position:absolute;
  width:84px;
  opacity:0;
  will-change:transform, opacity;
}
#splash.ready .mark{
  animation: markIn .55s cubic-bezier(.16,.9,.3,1) forwards, markFly .6s cubic-bezier(.7,0,.2,1) forwards;
  animation-delay: 0s, .75s;
}
#splash.hide{ animation: fadeBg .4s ease forwards; animation-delay:1.3s; }
@keyframes markIn{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(1.6) rotate(-10deg); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}
@keyframes fadeBg{
  0%{opacity:1; visibility:visible;}
  100%{opacity:0; visibility:hidden;}
}
@media (prefers-reduced-motion: reduce){
  #splash{display:none;}
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
  transition:background .25s ease;
}
header .logo-mini{height:26px; opacity:0; transition:opacity .3s ease;}
header .logo-mini.show{opacity:1;}
header nav{display:flex; gap:28px; font-size:14px; font-weight:500;}
header nav a{opacity:.85; transition:opacity .2s;}
header nav a:hover{opacity:1;}
header.on-dark{color:var(--paper);}
header.on-light{color:var(--ink);}

/* ---------- HERO ---------- */
#hero{
  position:relative;
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:140px 0 80px;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center 30%;
  opacity:0; transition:opacity 1.6s ease;
  animation: kenburns 16s ease-in-out infinite alternate;
}
.hero-slide.active{ opacity:1; z-index:1; }
@keyframes kenburns{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.09); }
}
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.72) 55%, rgba(10,10,10,.92) 100%);
}
#hero .wrap{ position:relative; z-index:3; }
@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation:none; }
}
#hero .tag{ color:var(--orange); font-weight:600; font-size:15px; margin-bottom:22px; }
#hero h1{ font-size:clamp(42px, 7vw, 88px); max-width:920px; }
#hero p.sub{ margin-top:26px; font-size:clamp(17px,2vw,20px); color:rgba(255,255,255,.72); max-width:520px; line-height:1.55; }
.cta-row{ margin-top:44px; display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  border-radius:var(--radius); transition:transform .18s ease, background .18s ease, color .18s ease;
  border:1.5px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{ background:var(--orange); color:var(--ink); }
.btn-primary:hover{ background:#ff7c3d; }
.btn-ghost-dark{ border-color:rgba(255,255,255,.35); color:var(--paper); }
.btn-ghost-dark:hover{ border-color:var(--paper); }
.btn-ghost-light{ border-color:rgba(10,10,10,.3); color:var(--ink); }
.btn-ghost-light:hover{ border-color:var(--ink); }

.trust-row{ margin-top:76px; display:flex; flex-wrap:wrap; border-top:1px solid var(--line); }
.trust-item{ flex:1 1 220px; padding:22px 26px 0 0; border-left:1px solid var(--line); padding-left:26px; }
.trust-item:first-child{border-left:none; padding-left:0;}
.trust-item h3{font-size:15px; font-weight:600; font-family:'Inter',sans-serif; color:var(--paper); margin-bottom:6px;}
.trust-item p{font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.5;}

.sec{ padding:110px 0; }
.sec-head{ max-width:640px; margin-bottom:56px; }
.sec-head h2{ font-size:clamp(30px,4vw,44px); }
.sec-head p{ margin-top:16px; font-size:16.5px; color:var(--grey); line-height:1.6; }

/* ---------- STOCK ---------- */
#stock{ background:var(--stone); }
.cat-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.cat-tab{
  background:transparent; border:1.4px solid rgba(10,10,10,.16); color:var(--ink);
  padding:10px 18px; border-radius:30px; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
  font-family:'Inter',sans-serif;
}
.cat-tab:hover{ border-color:var(--ink); }
.cat-tab.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.phone-card.hide-cat{ display:none; }
.phone-card.fade-cat{ animation:catFade .4s ease; }
@keyframes catFade{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.cond.accesorio{ background:var(--stone); border:1.3px solid var(--grey); color:var(--ink); }
.stock-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:28px;
}
.phone-card{
  background:var(--paper); display:flex; flex-direction:column; position:relative; cursor:pointer;
  border-radius:26px;
  box-shadow:0 1px 3px rgba(10,10,10,.06), 0 10px 24px rgba(10,10,10,.05);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.phone-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(10,10,10,.14), 0 4px 10px rgba(10,10,10,.08);
}
.phone-card .shot{
  aspect-ratio:4/3; overflow:hidden; background:#eae7e0; position:relative;
  border-radius:26px 26px 0 0;
}
.phone-card .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.phone-card:hover .shot img{ transform:scale(1.04); }
.phone-card .shot .zoom-hint{
  position:absolute; right:12px; bottom:12px;
  background:rgba(10,10,10,.7); backdrop-filter:blur(3px);
  color:#fff; font-size:11px; font-weight:600;
  padding:6px 12px; border-radius:20px; display:flex; align-items:center; gap:6px;
}
.phone-card .shot .spin-hint{ background:linear-gradient(100deg, var(--orange-dim), var(--orange)); }
.phone-card .body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.phone-card .cond{ display:inline-block; font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; margin-bottom:16px; width:fit-content; }
.cond.sellado{ background:var(--ink); color:var(--paper); }
.cond.usado{ background:transparent; border:1.3px solid var(--ink); color:var(--ink); }
.phone-card h3{ font-size:22px; margin-bottom:4px; }
.phone-card .storage{ font-size:13.5px; color:var(--grey); margin-bottom:20px; }
.phone-card .price{ margin-top:auto; font-size:13.5px; color:var(--grey); margin-bottom:2px; }
.phone-card .price strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:24px; color:var(--ink); font-weight:700; }
.phone-card .btn{ margin-top:18px; justify-content:center; background:var(--ink); color:var(--paper); font-size:13px; padding:12px 16px; border-radius:14px; }
.phone-card .btn:hover{ background:var(--orange); color:var(--ink); }

/* ---------- GALERÍA PRO (modal) ---------- */
#viewer{
  position:fixed; inset:0; z-index:200; background:rgba(8,8,8,.96);
  display:none; align-items:center; justify-content:center; padding:24px;
}
#viewer.open{ display:flex; }
.viewer-box{ width:100%; max-width:980px; }
.viewer-stage{
  position:relative; width:100%; aspect-ratio:4/3; background:#111;
  overflow:hidden; border-radius:2px; cursor:zoom-in; touch-action:pan-y;
}
.viewer-stage.zoomed{ cursor:zoom-out; }
.viewer-stage.spin-mode{ cursor:grab; }
.viewer-stage.spin-mode:active{ cursor:grabbing; }
.viewer-stage img{
  width:100%; height:100%; object-fit:cover;
  transform-origin:center center; transition:transform .25s ease;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.viewer-stage.zoomed img{ transform:scale(2.1); }
.spin-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  background:linear-gradient(100deg, var(--orange-dim), var(--orange));
  color:#0a0a0a; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:6px 12px; border-radius:20px; display:none;
}
.viewer-box.is-spin .spin-badge{ display:block; }
.viewer-hint-spin{ display:none; }
.viewer-box.is-spin .viewer-hint-static{ display:none; }
.viewer-box.is-spin .viewer-hint-spin{ display:block; }
.viewer-box.is-spin .viewer-nav, .viewer-box.is-spin .viewer-thumbs{ display:none; }
.viewer-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; z-index:2;
}
.viewer-nav:hover{ background:rgba(255,255,255,.22); }
.viewer-nav.prev{ left:14px; } .viewer-nav.next{ right:14px; }
.viewer-thumbs{ display:flex; gap:8px; margin-top:14px; overflow-x:auto; padding-bottom:4px; }
.viewer-thumbs img{
  width:64px; height:64px; object-fit:cover; border-radius:2px; opacity:.5;
  border:2px solid transparent; flex-shrink:0;
}
.viewer-thumbs img.active{ opacity:1; border-color:var(--orange); }
.viewer-meta{ color:#fff; display:flex; justify-content:space-between; align-items:flex-start; margin-top:18px; gap:20px; flex-wrap:wrap; }
.viewer-meta h3{ font-size:26px; color:#fff; }
.viewer-meta .storage{ color:rgba(255,255,255,.55); font-size:14px; margin-top:4px; }
.viewer-close{
  position:absolute; top:20px; right:24px; z-index:3;
  color:#fff; font-size:28px; opacity:.7; line-height:1;
}
.viewer-close:hover{ opacity:1; }
.viewer-hint{ color:rgba(255,255,255,.4); font-size:12.5px; margin-top:8px; }

/* ---------- CANJE ---------- */
#canje{ background:var(--ink); color:var(--paper); }
#canje .sec-head p{ color:rgba(255,255,255,.62); }
.canje-layout{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.canje-copy p{ font-size:17px; line-height:1.7; color:rgba(255,255,255,.72); max-width:440px; }
.canje-copy .btn{ margin-top:36px; }
.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step .num{ font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--orange); flex-shrink:0; width:28px; }
.step p{ font-size:15.5px; color:rgba(255,255,255,.82); line-height:1.55; }

/* ---------- SERVICIO TÉCNICO ---------- */
/* ---------- SERVICIO TÉCNICO — estética tech, sección oscura ---------- */
.sec-dark{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.sec-dark::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, #000 40%, transparent 100%);
}
.sec-dark .wrap{ position:relative; z-index:1; }
.sec-dark .sec-head p{ color:rgba(255,255,255,.6); }
.sec-eyebrow{
  display:inline-block; font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.06em; color:var(--orange); margin-bottom:14px;
}
.tec-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;
  margin-bottom:48px;
}
.tec-item{
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:28px 24px; position:relative;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.tec-item:hover{
  transform:translateY(-4px);
  border-color:rgba(253,106,31,.55);
  background:rgba(255,255,255,.055);
}
.tec-code{
  position:absolute; top:20px; right:22px;
  font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:600;
  color:rgba(255,255,255,.3); letter-spacing:.04em;
}
.tec-ic{
  display:flex; width:36px; height:36px; color:var(--orange); margin-bottom:20px;
}
.tec-ic svg{ width:100%; height:100%; }
.tec-item h3{ font-size:17px; margin-bottom:8px; color:var(--paper); }
.tec-item p{ font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.55; }
.tec-cta{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:20px; padding:40px 44px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.tec-cta p{ font-size:19px; font-family:'Space Grotesk',sans-serif; font-weight:600; max-width:440px; color:var(--paper); }

/* ---------- PHOTO BREAK ---------- */
#photo{ position:relative; height:78vh; min-height:520px; background-size:cover; background-position:center 25%; }
#photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,10,10,.72) 5%, rgba(10,10,10,0) 45%); }
#photo .cap{ position:absolute; left:28px; bottom:40px; z-index:2; color:var(--paper); max-width:420px; }
#photo .cap p{ font-size:19px; font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:1.4; }
#photo .wmark{ position:absolute; top:32px; right:32px; width:34px; opacity:.85; z-index:2; }

#final{ background:var(--ink); color:var(--paper); padding:130px 0; text-align:center; }
#final h2{ font-size:clamp(34px,5vw,58px); max-width:720px; margin:0 auto; }
#final .cta-row{ justify-content:center; margin-top:40px; }

footer{
  background:var(--ink); color:rgba(255,255,255,.5); padding:36px 0 40px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:13.5px;
}
footer img{ height:20px; opacity:.9; }
footer .admin-link{ opacity:.35; font-size:12px; }
footer .admin-link:hover{ opacity:.7; }

#fab{
  position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px; border-radius:50%;
  background:var(--orange); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28); transition:transform .2s ease;
}
#fab:hover{ transform:scale(1.07); }
#fab svg{ width:26px; height:26px; }

@media (max-width:840px){
  .canje-layout{ grid-template-columns:1fr; gap:44px; }
  header nav{ display:none; }
  .tec-cta{ flex-direction:column; align-items:flex-start; }
}

/* ---------- REVEAL: animación de entrada al hacer scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}