/* main.css — partials.site-header + partials.mobile-menu + styles.pc + styles.mobile */

/* === partials.site-header.css === */
:root{
  --sport:'Russo One',sans-serif;
  --ui:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --primary:#d10000;
  --primary-soft: rgba(209,0,0,.08);
  --line: rgba(15,23,42,.10);
  --sat: env(safe-area-inset-top,0px);
  --header-h:72px;
}

.container{
  width:min(1200px,100%);
  padding-inline:clamp(16px,4vw,28px);
  margin-inline:auto;
}

#siteHeader{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.05);
  padding-top: var(--sat);
  font-family:var(--ui);
}

#siteHeader .nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:var(--header-h);
  gap:16px;
}

#siteHeader .brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
}

#siteHeader .brand a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#0f172a;
}

#siteHeader .brand img{
  height: 52px;
  width:auto;
  display:block;
}

#siteHeader .brand span{
  font-family:'Tangerine',cursive;
  font-size:27.2px;
  line-height:1;
  color:var(--primary);
  letter-spacing:.2px;
  transform:translateY(2px);
  white-space:nowrap;
}

#siteHeader nav.menu{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

#siteHeader .menu-products-host{
  position:relative;
}

#siteHeader nav.menu a,
#siteHeader .pc-products-trigger{
  text-decoration:none;
  color:#0f172a;
  font-weight:800;
  letter-spacing:.0em;
  padding:10px 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  font-size:.86rem;
}

#siteHeader .pc-products-trigger{
  border:0;
  background:transparent;
  cursor:pointer;
}

#siteHeader nav.menu a[aria-current="page"]{
  background:var(--primary-soft);
  color:var(--primary);
}

#siteHeader nav.menu a:hover,
#siteHeader .pc-products-trigger:hover,
#siteHeader .menu-products-host.is-open .pc-products-trigger{
  background:rgba(15,23,42,.06);
}

#siteHeader nav.menu a[aria-current="page"]:hover{
  background:rgba(209,0,0,.12);
}

#siteHeader nav.menu a i{ opacity:.9; }

#siteHeader .pc-products-caret{
  font-size:.82em;
  transition:transform .18s ease;
}

#siteHeader .menu-products-host.is-open .pc-products-caret{
  transform:rotate(180deg);
}

#siteHeader .pc-products-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:320px;
  padding:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
  box-shadow:0 22px 46px rgba(15,23,42,.12);
  backdrop-filter:blur(14px);
  transform-origin:top left;
  animation:pcProductsMenuIn .18s cubic-bezier(.22, 1, .36, 1);
}

#siteHeader .pc-products-panel[hidden]{
  display:none !important;
}

#siteHeader .pc-products-title{
  padding:2px 8px 10px;
  color:rgba(15,23,42,.46);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#siteHeader .pc-products-groups{
  display:grid;
  gap:8px;
}

#siteHeader .pc-products-category{
  display:grid;
  gap:8px;
}

#siteHeader .pc-products-category + .pc-products-category{
  margin-top:4px;
}

#siteHeader .pc-products-category-title{
  padding:2px 8px 0;
  color:rgba(15,23,42,.52);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#siteHeader .pc-products-group{
  display:grid;
  gap:0;
  padding:4px;
  border:1px solid rgba(15,23,42,.05);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  transition:border-color .16s ease, background .16s ease, box-shadow .18s ease;
}

#siteHeader .pc-series-toggle{
  width:100%;
  border:0;
  background:transparent;
  color:#0f172a;
  cursor:pointer;
  padding:10px 12px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--ui);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}

#siteHeader .pc-series-toggle:hover,
#siteHeader .pc-products-group.is-open .pc-series-toggle{
  background:rgba(15,23,42,.05);
  color:#0f172a;
}

#siteHeader .pc-products-group.is-open{
  background:#fff;
  border-color:rgba(15,23,42,.09);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}

#siteHeader .pc-products-group.is-open .pc-series-toggle{
  box-shadow:inset 0 -1px 0 rgba(15,23,42,.06);
}

#siteHeader .pc-series-toggle span{
  line-height:1.2;
}

#siteHeader .pc-series-toggle i{
  opacity:.45;
}

#siteHeader .pc-products-group.is-open .pc-series-toggle i{
  opacity:.7;
}

#siteHeader .pc-series-list{
  display:grid;
  gap:4px;
  padding:6px 6px 4px;
}

#siteHeader .pc-series-list[hidden]{
  display:none !important;
}

#siteHeader .pc-series-list a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  font-size:.8rem;
  font-weight:700;
  color:rgba(15,23,42,.78);
  transition:background .16s ease, color .16s ease, transform .16s ease;
}

#siteHeader .pc-series-list a:hover{
  background:rgba(15,23,42,.045);
  color:#0f172a;
  transform:translateX(2px);
}

@keyframes pcProductsMenuIn{
  from{
    opacity:0;
    transform:translateY(8px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

#siteHeader .burger{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#siteHeader .burger:hover{ background:rgba(15,23,42,.04); }

#siteHeader .nav-icon{
  width:18px;
  text-align:center;
}

@media (max-width:980px){
  #siteHeader nav.menu{ display:none; }
  #siteHeader .burger{ display:grid; }
  #siteHeader .brand{ min-width:auto; }
}


/* === partials.mobile-menu.css === */
/* ============================================
   MENÚ MÓVIL - Reconstruido desde cero
   ============================================ */

:root {
  --mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mm-dur: 400ms;
}

/* Backdrop */
.mm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mm-dur) var(--mm-ease);
}

.mm-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Panel principal */
.mm-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 9999;
  
  width: min(560px, 92vw);
  max-height: min(860px, 92vh);
  
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  
  display: flex;
  flex-direction:column;
  overflow: hidden;
  
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease);
}

.mm-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Header */
.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.mm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.mm-brand-text {
  display: flex;
  flex-direction: column;
}

.mm-brand-name {
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #0b0c0f;
}

.mm-brand-tag {
  font-size: 0.78rem;
  color: rgba(17, 24, 39, 0.62);
}

.mm-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #0b0c0f;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 160ms ease;
}

.mm-close:hover {
  background: rgba(225, 6, 0, 0.08);
  color: #e10600;
}

/* Content */
.mm-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.mm-links-group {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  overflow: hidden;
}

/* Links normales */
.mm-link {
  appearance: none;
  width: 100%;
  text-align: left;
  border: none;
  background: #fff;
  padding: 16px 18px;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: #0b0c0f;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 160ms ease;
  position: relative;
}

.mm-link + .mm-link,
.mm-link + .mm-sub {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mm-link:hover {
  background: rgba(0, 0, 0, 0.02);
}

.mm-link:active {
  background: rgba(225, 6, 0, 0.06);
}

.mm-chevron {
  font-size: 0.9rem;
  color: rgba(17, 24, 39, 0.35);
  transition: transform var(--mm-dur) var(--mm-ease),
              color 160ms ease;
}

.mm-link--toggle[aria-expanded="true"] {
  color: #e10600;
}

.mm-link--toggle[aria-expanded="true"] .mm-chevron {
  transform: rotate(180deg) scale(1.1);
  color: #e10600;
}

/* Submenú PRODUCTOS */
.mm-sub {
  max-height: 0;
  overflow: hidden;
  background: #f4f5f7;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 500ms var(--mm-ease),
              opacity 400ms var(--mm-ease),
              transform 450ms var(--mm-ease);
}

.mm-sub.active {
  max-height: 800px;
  opacity: 1;
  transform: translateY(0);
}

.mm-sub-title {
  padding: 14px 18px 8px 26px;
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.4);
  opacity: 0;
}

.mm-sub.active .mm-sub-title {
  animation: mmBounceIn 450ms var(--mm-ease) forwards;
  animation-delay: 20ms;
}

.mm-sub-category + .mm-sub-category {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 6px;
  padding-top: 6px;
}

.mm-sub-category-title {
  padding: 12px 18px 6px 26px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.38);
}

/* Sub-links (SERIE N, GT, IX) */
.mm-sub-link {
  appearance: none;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 14px 18px 14px 26px;
  font-weight: 800;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  color: #0b0c0f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  position: relative;
}

.mm-sub-link + .mm-sub-link {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.mm-sub-link:hover {
  background: rgba(0, 0, 0, 0.02);
}

.mm-sub-link.active {
  color: #e10600;
  background: rgba(225, 6, 0, 0.03);
}

.mm-sub-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: #e10600;
  border-radius: 999px;
}

.mm-chevron-sm {
  font-size: 0.85rem;
  color: rgba(17, 24, 39, 0.35);
  transition: transform var(--mm-dur) var(--mm-ease),
              color 160ms ease;
}

.mm-sub-link.active .mm-chevron-sm {
  transform: rotate(180deg) scale(1.1);
  color: #e10600;
}

/* Sub2 (modelos individuales) */
.mm-sub2 {
  max-height: 0;
  overflow: hidden;
  padding: 0 10px;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 400ms var(--mm-ease),
              opacity 350ms var(--mm-ease),
              transform 380ms var(--mm-ease),
              padding 300ms var(--mm-ease);
}

.mm-sub2.active {
  max-height: 500px;
  padding: 8px 10px 12px;
  opacity: 1;
  transform: translateY(0);
}

.mm-sub2-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  margin-top: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: #0b0c0f;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.mm-sub2-link:hover {
  background: rgba(0, 0, 0, 0.02);
}

.mm-sub2-link:active {
  background: rgba(225, 6, 0, 0.06);
  transform: scale(0.99);
}

.mm-sub2-link::before {
  content: "";
  width: 3px;
  height: 18px;
  background: rgba(225, 6, 0, 0.6);
  border-radius: 999px;
  flex-shrink: 0;
}

/* Footer */
.mm-foot {
  padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.mm-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.mm-icons a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: #0b0c0f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  text-decoration: none;
  transition: all 180ms ease;
}

.mm-icons a:hover {
  background: rgba(225, 6, 0, 0.1);
  color: #e10600;
  transform: scale(1.05);
}

/* Animaciones de entrada escalonadas */
.mm-sub.active .mm-sub-link {
  animation: mmFadeInUp 400ms var(--mm-ease) forwards;
  opacity: 0;
}

.mm-sub.active .mm-sub-link:nth-child(1) { animation-delay: 50ms; }
.mm-sub.active .mm-sub-link:nth-child(2) { animation-delay: 100ms; }
.mm-sub.active .mm-sub-link:nth-child(3) { animation-delay: 150ms; }
.mm-sub.active .mm-sub-link:nth-child(4) { animation-delay: 200ms; }
.mm-sub.active .mm-sub-link:nth-child(5) { animation-delay: 250ms; }

.mm-sub2.active .mm-sub2-link {
  animation: mmFadeInUp 360ms var(--mm-ease) forwards;
  opacity: 0;
}

.mm-sub2.active .mm-sub2-link:nth-child(1) { animation-delay: 40ms; }
.mm-sub2.active .mm-sub2-link:nth-child(2) { animation-delay: 80ms; }
.mm-sub2.active .mm-sub2-link:nth-child(3) { animation-delay: 120ms; }
.mm-sub2.active .mm-sub2-link:nth-child(4) { animation-delay: 160ms; }
.mm-sub2.active .mm-sub2-link:nth-child(5) { animation-delay: 200ms; }
.mm-sub2.active .mm-sub2-link:nth-child(6) { animation-delay: 240ms; }

@keyframes mmFadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mmBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Mobile */
@media (max-height: 700px) {
  .mm-panel {
    max-height: 95vh;
  }
  
  .mm-head {
    padding: 16px 16px 12px;
  }
  
  .mm-brand img {
    width: 40px;
    height: 40px;
  }
}


/* === styles.pc.css === */
/* =========================================================
   SCOOTSHOP.CO — CSS PC/BASE (styles.pc.css)
   ✅ Sin bloques @media (max-width: ...)
   ✅ NO incluye estilos del menú móvil (#mmBackdrop/#mobileMenu/.mm-*)
   ========================================================= */

/* =========================
   1) VARIABLES
   ========================= */
:root{
  --sport:'Russo One',sans-serif;
  --ui:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans";

  --ink:#111315;
  --muted:#676b73;
  --line:#E6E9EF;
  --line-soft:rgba(17,19,21,.06);
  --surface:#ffffff;
  --surface-soft:#f6f8fb;
  --primary:#b91e1e;
  --primary-soft:rgba(185,30,30,.08);

  --sat: env(safe-area-inset-top, 0px);
  --header-h: 88px;
  --vh: 1vh;
}

/* =========================
   2) RESET / BASE
   ========================= */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html, body, button, input, select, textarea{ color-scheme: light !important; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--ui);
  background:#ffffff;
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  padding-top: calc(var(--header-h) + var(--sat));
}

img, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.container{
  width:min(1200px,100%);
  padding-inline:clamp(16px,4vw,28px);
  margin-inline:auto;
}

/* Accesibilidad */
.skip-link{
  position:absolute;
  top:-40px;
  left:16px;
  padding:8px 12px;
  border-radius:8px;
  background:#111;
  color:#fff;
  z-index:200;
  transition:top .2s ease;
}
.skip-link:focus{ top:8px; }

.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;
}

/* =========================
   3) HEADER / NAV
   ========================= */
header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.05);
  padding-top: var(--sat);
}

.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:var(--header-h);
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand a{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  height:52px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(15,23,42,.15));
}
.brand span{
  font-family:'Tangerine',cursive;
  font-size:1.7rem;
  color:var(--primary);
  white-space:nowrap;
  line-height:1;
  display:block;
}

nav.menu{
  justify-self:end;
  display:flex;
  gap:10px;
  font-weight:800;
  text-transform:uppercase;
  font-size:.86rem;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  min-width:0;
}
nav.menu a,
nav.menu button{
  padding:7px 11px;
  border-radius:999px;
  background:transparent;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s ease, color .15s ease, transform .12s ease;
  white-space:nowrap;
}
nav.menu a .nav-icon{ font-size:.95em; }
nav.menu a:hover{
  background:var(--primary-soft);
  transform:translateY(-1px);
}
nav.menu a[aria-current="page"]{
  background:var(--primary-soft);
  color:var(--primary);
}

.burger{
  display:none;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:20px;
  color:#111;
  justify-self:end;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  transition:transform .12s ease, box-shadow .16s ease, background .15s ease;
}
.burger:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}
.burger:active{
  transform:translateY(0);
  box-shadow:0 8px 16px rgba(15,23,42,.06);
}

/* =========================
   4) HERO
   ========================= */
.hero{
  position:relative;
  min-height:calc(var(--vh) * 100);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  background: url('img/NEGRO.png') center/cover no-repeat;
}
.hero .hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.45));
  z-index:1;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  width:min(1200px,100%);
  padding-inline:clamp(16px,4vw,28px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  color:#f9fafb;
}
.hero-title{
  font-family:var(--sport);
  font-size:clamp(40px,7vw,80px);
  letter-spacing:.10em;
  text-transform:uppercase;
  text-shadow:0 18px 48px rgba(0,0,0,.65);
}
.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:12px 22px;
  border-radius:999px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.9rem;
  cursor:pointer;
  background:#fff;
  color:#111;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  transition:transform .14s ease, filter .14s ease, box-shadow .16s ease;
}
.hero-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.hero-btn:active{
  transform:translateY(0);
  box-shadow:0 16px 36px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce){
  .hero video.hero-bg{ display:none !important; }
  .hero{ background: url('img/NEGRO.png') center/cover no-repeat; }
  .card.reveal-ready{
    opacity:1;
    transform:none;
    transition:box-shadow .18s ease, border-color .16s ease;
    transition-delay:0ms;
  }
}

/* =========================
   5) SERIES / FEATURES
   ========================= */
.series{
  padding:30px 0 14px;
  text-align:center;
}
.series h2{
  font-family:var(--sport);
  font-size:clamp(28px,5vw,42px);
  margin-bottom:8px;
  color:var(--primary);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.series p{
  color:var(--muted);
  max-width:58ch;
  margin:0 auto;
  font-size:.98rem;
  line-height:1.62;
}
.series h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(17,19,21,.92), rgba(17,19,21,.18));
  opacity:.8;
}

.features{ padding:26px 0 10px; }

.feature-grid{
  list-style:none;
  display:grid;
  gap:16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.feature-card{
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,.96) 100%);
  border:1px solid rgba(17,24,39,.08);
  border-radius:20px;
  padding:17px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:14px;
  row-gap:8px;
  align-items:center;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(15,23,42,.08);
  border-color:rgba(17,24,39,.14);
}
.feature-card h3{
  font-size:1.02rem;
  line-height:1.22;
  letter-spacing:.01em;
}
.feature-card p{
  grid-column:1/-1;
  color:rgba(17,24,39,.72);
  font-size:.93rem;
  line-height:1.56;
}
.f-icon{
  width:46px;
  height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(17,24,39,.08);
  background:rgba(255,255,255,.96);
  box-shadow:0 4px 12px rgba(15,23,42,.05);
}
.f-icon i{ font-size:20px; color:var(--primary); }

/* =========================
   6) PRODUCTS (cards existentes)
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr));
  gap:22px;
  margin-top:14px;
  isolation:isolate;
}

@media (max-width:1180px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .card{ flex-direction:column; }

  .card-media{
    width:100%;
    max-width:none;
    flex:0 0 auto;
    min-height:clamp(180px, 40vw, 220px);
    margin:0;
  }
}

.card{
  --card-media-size:170px;
  --card-media-radius:18px;
  --card-media-padding:12px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(17,19,21,.06);
  border-radius:26px;
  display:flex;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(15,23,42,.05);
  transition:transform .16s ease, box-shadow .18s ease, border-color .16s ease;
  position:relative;
  outline:none;
}
.card.reveal-ready{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.22, 1, .36, 1),
    box-shadow .18s ease,
    border-color .16s ease;
  transition-delay:var(--reveal-delay, 0ms);
}
.card.reveal-ready.reveal-visible{
  opacity:1;
  transform:translateY(0);
}
.card:focus-visible{
  z-index:2;
  box-shadow:0 0 0 3px rgba(17,17,17,.22), 0 18px 44px rgba(15,23,42,.10);
}
.card:focus-within{
  z-index:2;
}
.card:hover{
  z-index:2;
  transform:translateY(-2px);
  box-shadow:0 24px 56px rgba(15,23,42,.08);
  border-color:rgba(17,19,21,.1);
}

.card-media{
  position:relative;
  width:var(--card-media-size);
  flex:0 0 var(--card-media-size);
  margin:12px;
  border-radius:var(--card-media-radius);
  overflow:hidden;
  background:linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  aspect-ratio:1 / 1;
  min-height:var(--card-media-size);
}

/* Carousel */
.carousel{
  position:relative;
  overflow:hidden;
  height:100%;
  width:100%;
  touch-action: pan-y pinch-zoom;
  user-select:none;
}
.carousel-track{
  display:flex;
  transition:transform .3s ease;
  height:100%;
  cursor:grab;
  will-change: transform;
  user-select:none;
}
.carousel-track.dragging{
  cursor:grabbing;
  transition:none !important;
}
.carousel img{
  width:100%;
  height:100%;
  flex:0 0 100%;
  object-fit:contain;
  object-position:center;
  padding:var(--card-media-padding);
  box-sizing:border-box;
  background:#fff;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}

.carousel-dots{
  position:absolute;
  bottom:3px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  background:rgba(255, 255, 255, 0);
  border:1px solid rgba(17, 19, 21, 0);
  padding:2px 6px;
  border-radius:999px;
}
.carousel-dots .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:0;
  background:#cbd5e1;
  opacity:.9;
  cursor:pointer;
}
.carousel-dots .dot.active{ background:#111; }

.chip-name{ display:none; }

.card-body{ padding:16px 8px 8px 0; }

.card-brand{
  font-size:.68rem;
  letter-spacing:.14em;
  color:#7d8592;
  text-transform:uppercase;
  font-weight:900;
}

.title{
  margin-top:6px;
  font-size:1.08rem;
  line-height:1.36;
  font-weight:900;
  overflow-wrap:anywhere;
}

.card-bottom{
  margin-top:0;
  padding:0 14px 14px 0;
  border-top:0;
  background:transparent;
  min-width:0;
}

.price-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  min-width:0;
  flex-wrap:wrap;
  padding:11px 12px;
  border:1px solid rgba(17,19,21,.05);
  border-radius:16px;
  background:rgba(17,19,21,.03);
}
.price-values{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}
.price-side-meta{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.price-now{
  font-size:1.16rem;
  font-weight:900;
}
.price-was{
  color:#9aa0a6;
  text-decoration:line-through;
  font-weight:700;
  font-size:.9rem;
}
.card .dgt-badge{
  margin-left:auto;
  width:42px;
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
  align-self:center;
}
.panel .dgt-badge{
  margin-left:auto;
  width:57px;
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
  align-self:center;
}

.btn-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.btn-row a{
  flex:1 1 140px;
  min-width:0;
}

.btn-primary,
.btn-paypal{
  display:block;
  text-align:center;
  font-weight:900;
  border-radius:999px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid transparent;
  font-size:.84rem;
  transition:background .16s, color .16s, transform .12s, border-color .16s;
  width:100%;
  white-space:nowrap;
  letter-spacing:.08em;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:rgba(255,255,255,.88);
  color:#111;
  border-color:rgba(17,19,21,.08);
}
.btn-primary::before{
  content:"";
  width:14px;
  height:14px;
  display:inline-block;
  background:url("/img/eye-svgrepo-com.svg") center / contain no-repeat;
}
.btn-primary:hover{
  background:#fff;
  border-color:rgba(17,19,21,.12);
  transform:translateY(0);
}

.btn-paypal{
  background:#111315;
  color:#fff;
  border-color:#111315;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-transform:uppercase;
}
.btn-paypal:hover{
  background:#1d2026;
  border-color:#1d2026;
  transform:translateY(0);
}
.btn-paypal:active{ transform:translateY(0); }
.btn-paypal .paypal-logo{ display:none !important; }
.btn-paypal .buy-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:900;
}
.btn-paypal .buy-text::before{
  content:"";
  width:14px;
  height:14px;
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:url("/img/shop-bag-svgrepo-com.svg") center / contain no-repeat;
  mask:url("/img/shop-bag-svgrepo-com.svg") center / contain no-repeat;
}

@media (min-width: 769px){
  .card{
    display:grid;
    grid-template-columns: minmax(172px, 190px) minmax(0, 1fr) minmax(184px, 212px);
    grid-template-areas: "media body bottom";
    align-items:stretch;
  }

  .card-media{
    grid-area:media;
    width:clamp(154px, 18vw, 176px);
    max-width:calc(100% - 24px);
    min-width:0;
    min-height:clamp(154px, 18vw, 176px);
    aspect-ratio:1 / 1;
    margin:12px auto;
    justify-self:center;
    align-self:center;
  }

  .card-body{
    grid-area:body;
    min-width:0;
    padding:18px 12px 18px 6px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
  }

  .card-bottom{
    grid-area:bottom;
    margin-top:0;
    padding:18px 18px 18px 8px;
    border-top:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
  }

  .price-row{
    margin-bottom:0;
    min-height:42px;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
  }

  .btn-row{
    flex-direction:column;
    gap:8px;
    justify-content:center;
  }

  .btn-row a{
    width:100%;
    flex:0 0 auto;
  }
}

/* =========================
   7) FAQ + LEGAL (acordeón unificado, sin tocar tu diseño)
   ========================= */

/* Títulos */
#faq h2,
#legal h2{
  margin:20px 0;
  font-family:var(--sport);
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* Mantengo tu intención: FAQ no lo fuerzas al centro, Legal sí (tu diseño actual) */
#legal h2{ text-align:center; }

/* Acordeón (FAQ y Legal idénticos) */
#faq details,
#legal details{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  margin-bottom:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.03);
}

#faq summary,
#legal summary{
  cursor:pointer;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
}
#faq summary::-webkit-details-marker,
#legal summary::-webkit-details-marker{ display:none; }

#faq summary::after,
#legal summary::after{
  content:"+";
  font-weight:700;
  color:#9ca3af;
}
#faq details[open] summary::after,
#legal details[open] summary::after{ content:"–"; }

/* (opcional, descomentable) separación entre párrafos dentro del acordeón
#faq details p + p,
#legal details p + p{ margin-top:6px; }
*/

/* FAQ: rediseño visual sin tocar posicionamiento */
#faq h2{
  margin-bottom:8px;
}

#faq .faq-intro{
  margin:0 0 16px;
  max-width:62ch;
  color:#6b7280;
  font-weight:700;
  line-height:1.55;
}

#faq .faq-list{
  counter-reset:faq-item;
  display:grid;
  gap:8px;
}

#faq details{
  padding:0;
  margin-bottom:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(15,23,42,.025);
  transition:border-color .16s ease, box-shadow .18s ease, transform .14s ease;
}

#faq details:hover{
  transform:translateY(-1px);
  border-color:#d8dee8;
  box-shadow:0 14px 28px rgba(15,23,42,.05);
}

#faq summary{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 28px;
  align-items:center;
  min-height:58px;
  padding:0 18px 0 16px;
  gap:12px;
  font-size:.98rem;
}

#faq summary::before{
  counter-increment:faq-item;
  content:counter(faq-item, decimal-leading-zero);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  background:#f3f4f6;
  color:#111827;
  font-size:.72rem;
  font-weight:1000;
  letter-spacing:.08em;
}

#faq summary::after{
  content:"+";
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f8fafc;
  color:#6b7280;
  font-weight:700;
  font-size:1rem;
  transition:transform .16s ease, background .16s ease, color .16s ease;
  justify-self:end;
}

#faq details[open] summary::after{
  content:"–";
  background:#111827;
  color:#fff;
}

#faq details p{
  margin:0;
  padding:0 18px 16px 60px;
  color:#6b7280;
  font-weight:700;
  line-height:1.6;
}

#faq .faq-cta{
  margin:14px 0 0;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff, #fafafb);
  color:#4b5563;
  font-weight:700;
  line-height:1.55;
}

#faq .faq-cta strong{
  color:#111827;
}

#faq .faq-cta a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(17,24,39,.18);
}

#faq .faq-cta a:hover{
  border-bottom-color:rgba(17,24,39,.42);
}

/* =========================
   8) MAPA
   ========================= */
#ubicacion h2{
  margin:20px 0 10px;
  font-family:var(--sport);
  text-align:left;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.map-embed{
  width:100%;
  height:300px;
  border-radius:14px;
  border:0;
  box-shadow:0 16px 40px rgba(15,23,42,.16);
}
.map-embed.is-pending{
  background:linear-gradient(135deg, rgba(241,245,249,.9), rgba(226,232,240,.7));
  background-size:200% 100%;
  animation:skeleton 1.5s ease infinite;
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-embed.is-pending::after{
  content:'\f3c5';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:2rem;
  color:rgba(100,116,139,.3);
}
@keyframes skeleton{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* =========================
   9) LEGAL (layout, sin romper tu diseño)
   ========================= */
.legal{ padding:36px 0; }

/* Tu h2 ya está cubierto arriba, pero dejo esto por compatibilidad sin duplicar estilos visuales */
.legal h2{
  text-align:center;
  font-family:var(--sport);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.legal .columns{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  max-width:1000px;
  margin:16px auto 0;
}

.legal .columns > details{
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.04);
  transition:border-color .16s ease, box-shadow .18s ease, transform .14s ease;
}

.legal .columns > details:hover{
  transform:translateY(-1px);
  border-color:#d7dde8;
  box-shadow:0 16px 36px rgba(15,23,42,.08);
}

.legal .columns > details summary{
  font-size:.98rem;
  letter-spacing:.01em;
}

.legal .columns > details[open] summary{
  margin-bottom:8px;
}

.legal .columns > details p,
.legal .columns > details li{
  color:#1f2937;
  line-height:1.62;
}

.legal .columns > details p{
  font-size:.94rem;
}

.legal .columns > details p + p{
  margin-top:8px;
}

.legal .columns > details ul{
  margin:8px 0 8px 18px;
  padding:0;
}

.legal .columns > details li + li{
  margin-top:6px;
}

.legal .columns > details a{
  text-decoration:none;
  border-bottom:1px solid rgba(17,19,21,.2);
}

.legal .columns > details a:hover{
  border-bottom-color:rgba(185,30,30,.45);
}

.legal .columns > details.tc-large{
  grid-column:1 / -1;
  padding:12px 16px;
  border-color:#d9dfea;
  box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.legal .columns > details.tc-large > summary{
  font-size:1.06rem;
}

.legal .columns > details.tc-large > p > strong{
  font-size:.98rem;
  color:#0f172a;
}

.legal-update{
  text-align:center;
  margin-top:14px;
  color:var(--muted);
  font-size:.88rem;
}

/* =========================
   10) PAGOS / FOOTER
   ========================= */
.pagos{
  padding:36px 0;
  text-align:center;
}
.pagos h2{
  font-family:var(--sport);
  margin-bottom:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pagos-logos{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items:center;
  align-items:center;
  gap:18px 28px;
  margin-top:8px;
}
.pagos-logos img{
  max-width:100%;
  height:34px;
  display:block;
  filter:grayscale(.2);
  opacity:.9;
  transition:filter .14s, transform .12s, opacity .14s;
}
.pagos-logos img:hover{
  filter:grayscale(0);
  transform:translateY(-1px);
  opacity:1;
}

footer{
  text-align:center;
  padding:18px;
  color:var(--muted);
  font-size:.85rem;
}

/* =========================
   11) SERIES GRID (GT) — 2 columnas + tarjetas accesibles
   ========================= */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}

.p-card{
  --p-card-radius:16px;
  --p-media-min-height:220px;
  --p-media-padding:16px;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 34px rgba(15,23,42,.04);
  transition:transform .16s ease, box-shadow .18s ease, border-color .16s ease;
}
.p-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 48px rgba(15,23,42,.10);
  border-color:#d0d7e2;
}

.p-link{
  display:grid;
  grid-template-rows:auto 1fr;
  text-decoration:none;
  color:inherit;
  height:100%;
}
.p-link:focus-visible{
  outline:3px solid rgba(17,17,17,.45);
  outline-offset:4px;
  border-radius:var(--p-card-radius);
}

.p-media{
  background:#fff;
  border-bottom:1px solid var(--line);
  aspect-ratio:4 / 3;
  min-height:var(--p-media-min-height);
  display:grid;
  place-items:center;
  padding:var(--p-media-padding);
  box-sizing:border-box;
}
.p-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.p-body{
  padding:14px 14px 16px;
  display:grid;
  gap:8px;
}

.p-title{
  margin:0;
  font-size:1.05rem;
  line-height:1.2;
  font-weight:900;
}

.p-price{
  margin:0;
  opacity:.75;
  font-weight:800;
}

.p-stock{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  border-radius:999px;
  padding:4px 10px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.p-stock--in{
  color:#14532d;
  background:#dcfce7;
  border:1px solid #bbf7d0;
}
.p-stock--pre{
  color:#9a3412;
  background:#ffedd5;
  border:1px solid #fed7aa;
}
.p-stock--out{
  color:#991b1b;
  background:#fee2e2;
  border:1px solid #fecaca;
}

.p-card--out .p-media img{
  filter:grayscale(.22);
  opacity:.92;
}

.p-specs{
  margin:0;
  padding-left:18px;
  opacity:.85;
}
.p-specs li{ margin:2px 0; }

.empty{ opacity:.7; }


/* === styles.mobile.css === */
/* =========================================================
   SCOOTSHOP.CO — CSS MOBILE OVERRIDES (styles.mobile.css)
   Solo overrides responsive extraídos del CSS original
   ========================================================= */

/* Ajuste header en móvil */
@media (max-width:768px){
  :root{ --header-h: 72px; }
}

/* En móvil ocultas nav desktop y muestras burger */
@media (max-width:980px){
  nav.menu{ display:none; }
  .burger{ display:grid; }
}

/* Features: 4 -> 2 columnas en tablets/móvil */
@media (max-width:1024px){
  .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Features: legibilidad en móvil */
@media (max-width:768px){
  .feature-grid{
    gap:10px;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .feature-card{
    padding:12px;
    grid-template-columns:36px 1fr;
    column-gap:10px;
    row-gap:4px;
    align-items:start;
  }
  .feature-card h3{
    font-size:.95rem;
    line-height:1.22;
  }
  .feature-card p{
    font-size:.84rem;
    line-height:1.42;
  }
  .f-icon{
    width:34px;
    height:34px;
  }
  .f-icon i{ font-size:15px; }
}

@media (max-width:560px){
  .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Mobile product layout tweaks */
@media (max-width:768px){
  .card-media{
    width:100%;
    max-width:none;
    flex:0 0 auto;
    min-height:clamp(180px, 40vw, 220px);
    margin:0;
  }

  .card-media .carousel{ position:absolute; inset:0; }
  .card-media .carousel-track{ align-items:center; }
}

@media (max-width:640px){
  .series{
    padding:40px 0 22px;
    text-align:center;
  }
  .series h2{
    font-size:clamp(28px,5vw,42px);
    margin-bottom:8px;
    letter-spacing:.08em;
  }
  .series p{
    max-width:820px;
    margin:0 auto;
    font-size:1.02rem;
    line-height:1.55;
  }
  .series h2::after{
    width:70px;
    height:4px;
    margin:9px auto 0;
    background:linear-gradient(90deg, var(--primary), #f97316);
    opacity:.9;
  }
  .grid{ grid-template-columns:repeat(2,1fr); gap:12px; }

  /* ── Card: la imagen es protagonista ── */
  .card{
    --card-media-padding:10px;
    position:relative;
    background:#fff;
    border:0;
    border-radius:14px;
    box-shadow:0 px 4px rgba(0,0,0,.06);
    overflow:hidden;
  }
  .card:hover{
    transform:none;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
  }

  /* Imagen cuadrada pero no lo parece gracias al padding interno */
  .card-media{
    margin:0;
    aspect-ratio:1/1;
    border:0;
    border-radius:0;
    background:#fafbfc;
    position:relative;
  }
  .card-media .carousel{ position:absolute; inset:0; }
  .card-media .carousel-track{ align-items:center; }
  .card-media::after{ display:none; }
  .p-card{ --p-media-min-height:150px; --p-media-padding:10px; }

  /* Nombre del producto */
  .chip-name{
    display:block;
    margin:0;
    padding:10px 10px 1px;
    background:transparent;
    border-radius:0;
    color:#111;
    font-weight:900;
    font-size:.84rem;
    text-align:left;
    letter-spacing:.01em;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Marca sutil encima */
  .card-body{ display:block !important; padding:0 10px; }
  .card-brand{
    font-size:.58rem;
    letter-spacing:.1em;
    color:#a1a1aa;
    text-transform:uppercase;
    font-weight:800;
    margin-top:1px;
  }
  .title{ display:none; }

  /* Precio compacto */
  .card-bottom{
    margin-top:0;
    padding:4px 10px 10px;
    border-top:0;
    background:transparent;
  }
  .price-row{
    display:flex;
    align-items:baseline;
    gap:5px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    min-height:0;
  }
  .price-values{ align-items:baseline; gap:5px; }
  .price-now{ font-size:.96rem; font-weight:900; color:#111; }
  .price-was{ font-size:.76rem; font-weight:700; opacity:.5; }
  .price-side-meta{ gap:4px; }
  .card .dgt-tooltip{
    position:absolute;
    bottom:8px;
    right:8px;
    margin:0;
  }
  .card .dgt-tooltip-toggle{
    padding:0;
    background:none;
    border:0;
  }
  .card .dgt-badge{
    width:40px;
    opacity:1;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));
  }
  .panel .dgt-badge{ width:57px; }

  .carousel-dots{ display:none !important; }
}

/* Oculta botones en móvil (como lo tenías) */
@media (max-width:768px){
  .btn-row{ display:none !important; }
}

@media (max-width:768px){
  #faq .faq-intro{
    margin-bottom:12px;
    font-size:.92rem;
    line-height:1.52;
  }

  #faq .faq-list{
    gap:7px;
  }

  #faq summary{
    grid-template-columns:28px minmax(0, 1fr) 24px;
    min-height:54px;
    padding:0 14px 0 12px;
    font-size:.93rem;
    line-height:1.35;
    gap:10px;
  }

  #faq summary::before{
    width:28px;
    height:28px;
    font-size:.68rem;
  }

  #faq summary::after{
    width:24px;
    height:24px;
  }

  #faq details p{
    padding:0 14px 14px 50px;
    font-size:.91rem;
    line-height:1.55;
  }

  #faq .faq-cta{
    margin-top:12px;
    padding:11px 12px;
    font-size:.92rem;
  }
}

/* Legal columnas: 2 -> 1 */
@media (max-width:900px){
  .legal .columns{ grid-template-columns:1fr; }
  .legal .columns{ gap:10px; }
  .legal .columns > details{ padding:10px 12px; border-radius:14px; }
  .legal .columns > details summary{ font-size:.95rem; }
  .legal .columns > details p,
  .legal .columns > details li{ font-size:.92rem; line-height:1.58; }
  .legal .columns > details.tc-large{ grid-column:auto; padding:11px 13px; }
  .legal .columns > details.tc-large > summary{ font-size:1rem; }
  .legal-footer-row{ flex-direction:column; align-items:stretch; }
  .legal-download-link--inline{ width:100%; }
}

/* Grid de series (2 columnas escritorio, 1 columna móvil) */
@media (max-width:820px){
  .product-grid{ grid-template-columns:1fr; }
}