/* ============================================================
   MobilHub — hoja de estilos única
   Paleta, tipografía y componentes del catálogo
   ============================================================ */

:root{
  /* Color */
  --ink:      #0B0B0D;
  --ink-2:    #16161A;
  --ink-3:    #212127;
  --paper:    #FFFFFF;
  --haze:     #F1F1F3;
  --line:     #E3E3E7;
  --line-dk:  #2C2C33;
  --slate:    #6C6C76;
  --slate-lt: #9A9AA4;
  --orange:   #FF9000;
  --orange-dp:#E37A00;
  --orange-sf:#FFF4E4;
  --wa:       #25D366;

  /* Tipografía */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --data:    'Martian Mono', ui-monospace, monospace;

  /* Medidas */
  --nav-h: 56px;
  --maxw: 1240px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* .panel y .scrim declaran display/position en su clase, lo que anula el
   atributo hidden del navegador. Esta regla se lo devuelve. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--nav-h);
  background:rgba(11,11,13,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav__inner{
  height:100%;
  display:flex; align-items:center; gap:16px;
}

.nav__logo{ display:flex; align-items:center; flex:0 0 auto; }
.nav__logo img{ height:26px; width:auto; }

.nav__links{
  display:flex; align-items:center; gap:4px;
  margin-left:auto;
}

.nav__link{
  font-size:.8125rem; font-weight:500; letter-spacing:.01em;
  color:rgba(255,255,255,.72);
  padding:7px 11px; border-radius:999px;
  transition:color .18s, background .18s;
  white-space:nowrap;
}
.nav__link:hover{ color:#fff; background:rgba(255,255,255,.08); }

.nav__wa{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--orange); color:#111;
  font-family:var(--display); font-weight:700; font-size:.8125rem;
  padding:8px 15px; border-radius:999px;
  transition:transform .18s var(--ease), background .18s;
  white-space:nowrap;
}
.nav__wa:hover{ background:#FFA525; transform:translateY(-1px); }
.nav__wa i{ font-size:.95rem; }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  background:var(--ink);
  color:#fff;
  padding:calc(var(--nav-h) + 68px) 0 76px;
  position:relative;
  overflow:hidden;
}

/* trama sutil de puntos: peso cero, sin imágenes */
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 72%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute; left:50%; top:-180px;
  width:760px; height:420px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(255,144,0,.22), transparent 68%);
  filter:blur(30px);
  pointer-events:none;
}

.hero__inner{ position:relative; z-index:1; max-width:880px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--data); font-size:.625rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
  border:1px solid rgba(255,144,0,.34);
  background:rgba(255,144,0,.07);
  padding:6px 13px; border-radius:999px;
  margin:0 0 26px;
}
.eyebrow .pulse{
  width:6px; height:6px; border-radius:50%; background:var(--orange);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.28} }

.hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.35rem, 7.4vw, 4.25rem);
  line-height:.97;
  letter-spacing:-.035em;
  margin:0 0 22px;
}
.hero h1 em{ font-style:normal; color:var(--orange); }

.hero__sub{
  font-size:clamp(1rem, 2.4vw, 1.1875rem);
  color:rgba(255,255,255,.66);
  max-width:50ch;
  margin:0 0 34px;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:11px; margin-bottom:52px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:.9375rem;
  padding:14px 25px; border-radius:999px;
  transition:transform .18s var(--ease), background .18s, border-color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--orange{ background:var(--orange); color:#111; }
.btn--orange:hover{ background:#FFA525; }
.btn--ghost{ border:1px solid rgba(255,255,255,.26); color:#fff; }
.btn--ghost:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.btn--wa{ background:var(--wa); color:#052e16; }
.btn--wa:hover{ background:#2FE474; }

/* fila de datos en vivo, calculada del inventario */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.14);
}
.stat{ padding:20px 0 0; }
.stat + .stat{ padding-left:22px; border-left:1px solid rgba(255,255,255,.14); }
.stat__n{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.375rem, 4.2vw, 1.875rem);
  letter-spacing:-.02em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat__l{
  font-family:var(--data); font-size:.5625rem; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--slate-lt); margin-top:7px;
}

/* ============================================================
   BARRA DE FILTROS (sticky)
   ============================================================ */

.filters{
  position:sticky; top:var(--nav-h); z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}

.filters__row{
  display:flex; align-items:center; gap:8px;
  padding:12px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.filters__row::-webkit-scrollbar{ display:none; }

.filters__row + .filters__row{
  border-top:1px solid var(--line);
  padding-top:11px;
}

.chip{
  flex:0 0 auto;
  font-family:var(--display); font-weight:600; font-size:.8125rem;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--line);
  color:var(--slate);
  background:var(--paper);
  transition:background .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
.chip__n{
  font-family:var(--data); font-size:.5625rem; font-weight:400;
  opacity:.55; margin-left:6px;
}

.seg{
  flex:0 0 auto; display:inline-flex;
  background:var(--haze); border-radius:999px; padding:3px;
}
.seg button{
  font-family:var(--display); font-weight:600; font-size:.75rem;
  padding:6px 14px; border-radius:999px; color:var(--slate);
  transition:background .18s, color .18s;
  white-space:nowrap;
}
.seg button[aria-pressed="true"]{ background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }

.search{
  flex:1 1 190px; min-width:150px;
  display:flex; align-items:center; gap:9px;
  background:var(--haze); border:1px solid transparent;
  border-radius:999px; padding:0 14px;
  transition:border-color .18s, background .18s;
}
.search:focus-within{ background:var(--paper); border-color:var(--ink); }
.search i{ color:var(--slate-lt); font-size:.8125rem; }
.search input{
  flex:1; border:0; background:none; outline:none;
  font-family:var(--body); font-size:.875rem; color:var(--ink);
  padding:9px 0; min-width:0;
}
.search input::placeholder{ color:var(--slate-lt); }
.search__clear{ color:var(--slate-lt); font-size:.8125rem; padding:4px; display:none; }
.search__clear.on{ display:block; }

.sort{
  flex:0 0 auto;
  font-family:var(--display); font-weight:600; font-size:.75rem;
  color:var(--slate); background:var(--haze);
  border:1px solid transparent; border-radius:999px;
  padding:8px 13px; cursor:pointer;
}
.sort:hover{ border-color:var(--ink); color:var(--ink); }

/* ============================================================
   CATÁLOGO
   ============================================================ */

.catalog{ padding:34px 0 84px; }

.catalog__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:22px; flex-wrap:wrap;
}
.catalog__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.375rem,3.6vw,1.875rem);
  letter-spacing:-.025em; margin:0;
}
.catalog__count{
  font-family:var(--data); font-size:.625rem; font-weight:400;
  letter-spacing:.11em; text-transform:uppercase; color:var(--slate);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:16px;
}

.card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
  text-align:left;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  /* estado inicial de la animación de entrada */
  opacity:0; transform:translateY(14px);
}
.card.in{ opacity:1; transform:none; }
.card:hover{
  border-color:transparent;
  box-shadow:0 12px 34px rgba(11,11,13,.13);
  transform:translateY(-4px);
}

.card__tags{
  position:absolute; top:14px; left:14px; right:14px; z-index:2;
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  pointer-events:none;
}

.tag{
  font-family:var(--data); font-size:.5rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px;
}
.tag--nuevo{ background:var(--ink); color:#fff; }
.tag--usado{ background:var(--haze); color:var(--slate); }
.tag--off{ background:var(--orange-sf); color:var(--orange-dp); }

.card__media{
  aspect-ratio:1/1;
  display:grid; place-items:center;
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  padding:14px 8px 6px;
  overflow:hidden;
}
.card__media img{
  width:100%; height:100%; object-fit:contain;
  transition:transform .45s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.06); }

/* --- ELEMENTO FIRMA: medidor de batería real --- */
.bat{
  display:flex; align-items:center; gap:8px;
  margin:0 0 9px;
}
.bat__shell{
  position:relative;
  flex:1; height:7px;
  background:var(--haze);
  border-radius:999px;
  overflow:hidden;
}
.bat__fill{
  position:absolute; inset:0 auto 0 0;
  background:var(--orange);
  border-radius:999px;
  width:0;
  transition:width .8s var(--ease);
}
.card.in .bat__fill{ width:var(--pct,0%); }
.bat__n{
  font-family:var(--data); font-size:.5625rem; font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.bat__lbl{
  font-family:var(--data); font-size:.5rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate-lt);
  flex:0 0 auto;
}

.card__name{
  font-family:var(--display); font-weight:700; font-size:1rem;
  letter-spacing:-.018em; line-height:1.22;
  margin:0 0 8px;
}

.specs{
  display:flex; flex-wrap:wrap; gap:5px;
  margin:0 0 12px;
}
.spec{
  font-family:var(--data); font-size:.5rem; font-weight:400;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--slate);
  background:var(--haze);
  padding:4px 7px; border-radius:5px;
  white-space:nowrap;
}

.card__price{
  margin-top:auto;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.price{
  font-family:var(--display); font-weight:700;
  font-size:1.1875rem; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.price--old{
  font-family:var(--body); font-weight:400; font-size:.8125rem;
  color:var(--slate-lt); text-decoration:line-through;
}

.card__btn{
  margin-top:13px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%;
  font-family:var(--display); font-weight:700; font-size:.8125rem;
  background:var(--ink); color:#fff;
  padding:11px; border-radius:999px;
  transition:background .18s;
}
.card__btn:hover{ background:var(--orange); color:#111; }

/* vacío */
.empty{
  grid-column:1/-1;
  text-align:center; padding:70px 20px;
}
.empty h3{
  font-family:var(--display); font-weight:700; font-size:1.25rem;
  letter-spacing:-.02em; margin:0 0 8px;
}
.empty p{ color:var(--slate); margin:0 0 20px; }

/* ============================================================
   PANEL DE DETALLE
   ============================================================ */

.scrim{
  position:fixed; inset:0; z-index:80;
  background:rgba(11,11,13,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.scrim.on{ opacity:1; visibility:visible; }

.panel{
  position:fixed; z-index:90;
  top:0; right:0; bottom:0;
  width:min(460px, 100%);
  background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .38s var(--ease);
  box-shadow:-14px 0 44px rgba(11,11,13,.16);
}
.panel.on{ transform:none; }

.panel__bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
}
.panel__eyebrow{
  font-family:var(--data); font-size:.5625rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
}
.panel__x{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--haze); color:var(--ink); font-size:.875rem;
  transition:background .18s;
}
.panel__x:hover{ background:var(--line); }

.panel__body{ flex:1; overflow-y:auto; padding:22px 20px 26px; }

.panel__media{
  background:var(--haze); border-radius:var(--r-lg);
  aspect-ratio:1/1; max-height:42vh;
  display:grid; place-items:center;
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  padding:26px; margin-bottom:22px;
  overflow:hidden;
}
.panel__media img{ width:100%; height:100%; object-fit:contain; }

.panel h2{
  font-family:var(--display); font-weight:800;
  font-size:1.625rem; letter-spacing:-.03em; line-height:1.1;
  margin:0 0 12px;
}

.panel__price{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  margin-bottom:18px;
}
.panel__price .price{ font-size:1.75rem; }

.panel__desc{
  color:var(--slate); font-size:.9375rem;
  margin:0 0 22px;
}

.sheet{
  border-top:1px solid var(--line);
  margin-bottom:22px;
}
.sheet__row{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:.875rem;
}
.sheet__k{
  font-family:var(--data); font-size:.5625rem; font-weight:400;
  letter-spacing:.11em; text-transform:uppercase; color:var(--slate);
  padding-top:3px;
}
.sheet__v{ font-weight:500; text-align:right; }

.swatches{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.swatch{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line);
  position:relative;
  transition:transform .18s var(--ease);
}
.swatch:hover{ transform:scale(1.1); }
.swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }

.panel__foot{
  flex:0 0 auto;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--paper);
}
.panel__foot .btn{ width:100%; }

/* ============================================================
   FRANJA DE CONFIANZA
   ============================================================ */

.trust{ background:var(--haze); padding:64px 0; }
.trust__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:34px;
}
.trust__item i{
  font-size:1.125rem; color:var(--orange);
  margin-bottom:14px; display:block;
}
.trust__item h3{
  font-family:var(--display); font-weight:700; font-size:1.0625rem;
  letter-spacing:-.02em; margin:0 0 7px;
}
.trust__item p{ color:var(--slate); font-size:.9375rem; margin:0; }

/* ============================================================
   FOOTER
   ============================================================ */

.foot{ background:var(--ink); color:#fff; padding:60px 0 26px; }
.foot__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1.2fr;
  gap:44px; margin-bottom:44px;
}
.foot__logo{ height:28px; width:auto; margin-bottom:16px; }
.foot__about{ color:rgba(255,255,255,.6); font-size:.9375rem; max-width:36ch; margin:0 0 20px; }

.foot h4{
  font-family:var(--data); font-size:.5625rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-lt); margin:0 0 16px;
}
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:10px; }
.foot a{ color:rgba(255,255,255,.72); font-size:.9375rem; transition:color .18s; }
.foot a:hover{ color:var(--orange); }

.foot__contact li{
  display:flex; gap:11px; align-items:flex-start;
  color:rgba(255,255,255,.72); font-size:.9375rem;
}
.foot__contact i{ color:var(--orange); font-size:.8125rem; padding-top:5px; flex:0 0 14px; }

.socials{ display:flex; gap:9px; }
.socials a{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff;
  transition:background .18s, transform .18s var(--ease);
}
.socials a:hover{ background:var(--orange); color:#111; transform:translateY(-2px); }

.foot__bottom{
  border-top:1px solid var(--line-dk);
  padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8125rem; color:var(--slate-lt);
}

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================ */

.wa-fab{
  position:fixed; z-index:70;
  right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wa); color:#fff; font-size:1.5rem;
  box-shadow:0 8px 24px rgba(37,211,102,.38);
  transition:transform .22s var(--ease);
}
.wa-fab:hover{ transform:scale(1.08); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px){
  .foot__grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .foot__brand{ grid-column:1/-1; }
}

@media (max-width:760px){
  .nav__links{ display:none; }
  .hero{ padding:calc(var(--nav-h) + 44px) 0 54px; }
  .stats{ grid-template-columns:repeat(3,1fr); }
  .stat{ padding-top:16px; }
  .stat + .stat{ padding-left:12px; }
  .stat__n{ font-size:1.0625rem; letter-spacing:-.03em; }
  .stat__l{ font-size:.5rem; letter-spacing:.09em; margin-top:5px; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:11px; }
  .card{ padding:11px; border-radius:var(--r-md); }
  .card__tags{ top:11px; left:11px; right:11px; }
  .card__name{ font-size:.875rem; }
  .price{ font-size:1rem; }
  .card__btn{ font-size:.75rem; padding:10px; }
  .specs{ gap:4px; }

  /* el panel se vuelve hoja inferior */
  .panel{
    top:auto; left:0; right:0; bottom:0;
    width:100%; height:92vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    transform:translateY(100%);
  }
  .panel.on{ transform:none; }
  .panel__media{ aspect-ratio:4/3; max-height:30vh; padding:16px; margin-bottom:18px; }
  .panel h2{ font-size:1.375rem; }
  .trust{ padding:44px 0; }
  .foot__grid{ grid-template-columns:1fr; }
}

@media (max-width:420px){
  .grid{ grid-template-columns:1fr; }
}

/* ============================================================
   ACCESIBILIDAD: movimiento reducido
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .card{ opacity:1; transform:none; }
  .card.in .bat__fill{ width:var(--pct,0%); }
}

/* ============================================================
   IMPRESIÓN — lista de precios en papel
   ============================================================ */

@media print{
  .nav,.hero,.filters,.trust,.foot,.wa-fab,.panel,.scrim,.card__btn{ display:none !important; }
  .card{ opacity:1; transform:none; border:1px solid #ccc; break-inside:avoid; }
  .grid{ grid-template-columns:repeat(3,1fr); }
}