/* =============================================================
   SEMAGE GROUP — styles.css
   Brutalist industrial / motorsport. Negro + rojo + blanco.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:          #0a0a0a;
  --bg-1:        #111111;
  --bg-2:        #161616;
  --bg-3:        #1e1e1e;
  --bg-gray:     #1c1c1e;
  --bg-gray-2:   #232326;
  --ink:         #f5f5f3;
  --ink-mute:    #9d9c98;
  --ink-dim:     #6a6965;
  --accent:      #e2231a;
  --accent-2:    #ff4433;
  --accent-dark: #8f150f;
  --line:        rgba(245, 245, 243, 0.14);
  --line-strong: rgba(245, 245, 243, 0.30);
  --line-accent: rgba(226, 35, 26, 0.55);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Rajdhani", "Arial Narrow", sans-serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Header angosto y fijo; el logo es el doble de alto y sobresale a
     propósito por debajo de la barra (queda completo y visible, nunca
     recortado). --nav-h es la única fuente de verdad para la altura real
     del header, usada también por el offset sticky del filtro — nunca se
     desincronizan. */
  --nav-h: clamp(50px, 5.5vw, 62px);
  --logo-h: clamp(80px, 11vw, 104px);
  --container: 1360px;
  --gutter: clamp(1.1rem, 3vw, 2.4rem);

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-card: 0 20px 40px -20px rgba(0,0,0,.5);
}

/* =============================================================
   1b. Splash / pantalla de carga
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem;
  transition: opacity .6s var(--ease-out), visibility .6s;
  /* Seguro: se oculta solo aunque JS falle */
  animation: splashSafety .01s 3.4s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; visibility: hidden; }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; visibility: hidden; } }
.splash-mark {
  width: clamp(84px, 13vw, 148px);
  height: auto;
  animation: glowPulse 1.7s ease-in-out infinite;
}
.splash-bar {
  width: 150px; height: 2px;
  background: var(--line-strong);
  position: relative; overflow: hidden;
}
.splash-bar::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--accent);
  animation: splashLoad 1s ease-in-out infinite;
}
@keyframes splashLoad {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}
.splash-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  font-weight: 600;
}
h1, h2 { text-transform: uppercase; line-height: 1.02; }
::selection { background: var(--accent); color: var(--bg); }

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

.icon {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 1vw, .82rem);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-mute);
}
.section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--line);
}
.section-gray { background: var(--bg-gray); }
.section-gray .grid-lines > * { background: var(--bg-gray-2); }
.section-light { background: #fff; border-top-color: rgba(10,10,10,.12); }
.section-light .section-title { color: var(--bg); }
.section-light .section-intro { color: rgba(10,10,10,.62); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: .85rem;
  letter-spacing: .1em;
}
.section-title {
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  margin-top: .3rem;
}
.section-title em {
  font-style: normal;
  color: var(--accent);
}
/* Titulo "Catálogo" de marca-vehiculo.php — reemplaza el titulo "Vehículos
   {marca}" (pedido explicito), en rojo, con el isotipo de la marca a la
   izquierda del mismo alto que el texto. */
.catalog-title { color: var(--accent); display: flex; align-items: center; gap: .3em; }
.catalog-title-logo { height: .8em; width: auto; display: block; }
.section-intro {
  max-width: 46ch;
  color: var(--ink-mute);
  font-size: 1rem;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.7em;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  transition: background .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(226,35,26,.65);
}
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
[data-fav-toggle].is-favorited {
  border-color: var(--accent);
  color: var(--accent);
}
[data-fav-toggle].is-favorited .icon { fill: var(--accent); }
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(226,35,26,.8);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(245,245,243,.35);
}
.btn-block { width: 100%; }
.btn .icon { width: 1.05em; height: 1.05em; }

.badge {
  display: inline-block;
  padding: .3em .8em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

/* =============================================================
   4. Grid dinámico (sin tablero cuadriculado — esquinas achaflanadas)
   ============================================================= */
.grid-lines {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}
.grid-lines > * {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.grid-lines > *:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.services-grid { grid-template-columns: 1fr; }
@media (min-width: 720px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }


/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: stretch;
  background: rgba(10, 10, 10, 0.92);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--line-accent); }
.nav-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
/* flex-shrink:0 — sin esto, agregar mas enlaces/botones al header con el
   tiempo (Comunidad, favoritos...) termina achicando el logo en vez de
   apretar el resto, porque un flex-item se encoge por defecto. */
.nav-brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.nav-logo { height: var(--logo-h); width: auto; filter: drop-shadow(0 0 10px rgba(226,35,26,.45)); }
.nav-links {
  display: none;
  align-items: center; align-self: stretch; gap: clamp(.65rem, 1vw, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(.78rem, .82vw, .9rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* 1340px, no 1100px: con "Comunidad", "Eventos" y el corazón de favoritos
   sumados al header, 1100px ya no alcanza — el menú de categorías + los
   botones de la derecha se desbordaban fuera del header en ese rango (ver
   .nav-toggle más abajo, que usa el mismo punto de quiebre para no dejar
   una franja de ancho sin forma de abrir el menú). Si se agrega otro
   enlace al header, volver a medir con el mismo metodo (ver el historial
   de este archivo) antes de asumir que sigue cabiendo. */
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-links a {
  position: relative;
  padding-block: .3rem;
  color: var(--ink-mute);
  white-space: nowrap;
  transition: color .2s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--accent);
  transition: right .3s var(--ease-out);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }

/* ---- Categorías del header con submenú de marcas ----
   .nav-dropdown se estira (align-self:stretch) para ocupar el alto
   completo del header en vez de solo el alto de su enlace — así
   "top:100%" del panel arranca justo debajo del borde inferior del nav,
   no a la mitad del header, y no tapa el header ni la animación del
   subrayado en :hover. */
.nav-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: .35em; }
.nav-dropdown-panel {
  position: absolute; top: 100%; left: 0;
  transform: translateY(10px);
  min-width: 190px;
  margin-top: 0;
  padding: .5rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
  z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-panel a {
  padding: .55em .8em;
  border-radius: 6px;
  font-size: .86rem;
  color: var(--ink-mute);
}
.nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { background: var(--bg-gray); color: var(--accent); }

.nav-actions { display: flex; align-items: center; gap: .5rem; }
.nav-actions .btn {
  padding: .48em .85em;
  font-size: .6rem;
  letter-spacing: .02em;
  gap: .4em;
}
.nav-actions .btn .icon { width: .95em; height: .95em; }
.nav-actions .btn-ghost,
.nav-actions .btn-primary { display: none; }
@media (min-width: 960px) {
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary { display: inline-flex; }
}

.nav-cart-link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  flex-shrink: 0;
}
.nav-cart-link:hover { border-color: var(--accent); color: var(--accent); }
.nav-cart-link .icon { width: 1.2em; height: 1.2em; }
.nav-cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px;
  text-align: center;
}
.nav-cart-count[data-cart-count="0"] { display: none; }

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
@media (min-width: 768px) { .nav-toggle { display: none; } }
.nav-toggle .icon { width: 1.3em; height: 1.3em; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 480;
  background: var(--bg);
  padding: 2rem var(--gutter);
  display: flex; flex-direction: column; gap: 1.6rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  overflow-y: auto;
}
.mobile-menu.is-open {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
@media (min-width: 768px) { .mobile-menu { display: none; } }
.mobile-menu a:not(.btn) {
  display: flex; align-items: center; gap: .8em;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: .8rem;
}
.mobile-menu a:not(.btn) .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }
.mobile-menu .menu-category-icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--category-icon) center / 20px 20px no-repeat;
  mask: var(--category-icon) center / 20px 20px no-repeat;
}
.menu-category-icon--vehiculos { --category-icon: url('assets/icons/vehiculos.png'); }
.menu-category-icon--gomas { --category-icon: url('assets/icons/gomas.png'); }
.menu-category-icon--mantenimiento { --category-icon: url('assets/icons/mantenimiento.png'); }
.mobile-menu .btn { margin-top: .4rem; }
.mobile-menu .btn .icon { width: 1.1em; height: 1.1em; }

/* ---- "Vehículos" en el menú móvil despliega las marcas en vez de ir
   directo al catálogo — mismo submenú que el .nav-dropdown de escritorio,
   pero a base de clic (no hover) porque en móvil no hay hover real. El
   botón imita el estilo del resto de los enlaces del menú para que no se
   note que es un elemento distinto. ---- */
.mobile-menu-toggle {
  display: flex; align-items: center; gap: .8em; width: 100%;
  background: none; border: none; padding: 0; margin: 0;
  font-family: var(--font-display); font-size: 1.4rem; text-transform: uppercase;
  color: var(--ink); text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--line); padding-bottom: .8rem;
}
.mobile-menu-chevron { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: var(--ink-mute); transition: transform .25s var(--ease-out); }
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-chevron { transform: rotate(180deg); }
.mobile-submenu {
  display: flex; flex-direction: column;
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease-out);
}
.mobile-submenu.is-open { max-height: none; }
.mobile-submenu a {
  display: block;
  font-family: var(--font-body); font-size: .95rem; text-transform: none;
  color: var(--ink-mute);
  padding: .85em .2em .85em 2.6rem;
  border-bottom: 1px solid var(--line);
}
.mobile-submenu a:last-child { border-bottom: none; }
.mobile-submenu a:hover, .mobile-submenu a:focus-visible { color: var(--accent); }

/* =============================================================
   5b. Marca de agua decorativa (favicon)
   ============================================================= */
.brand-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: .07;
}
.hero-watermark {
  right: clamp(-6%, -2vw, 2%);
  bottom: -8%;
  width: clamp(240px, 34vw, 520px);
}
.footer-watermark {
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 28vw, 440px);
  opacity: .05;
}

/* =============================================================
   6. Hero
   ============================================================= */
.hero {
  /* Geometria compartida: el logo, el boton y las fotos se calculan con las MISMAS
     variables, asi la linea donde los UTVs se montan sobre el logo se mantiene en
     cualquier tamano de pantalla. */
  --hero-logo-w: min(92vw, max(58vw, 300px), 100svh, 1040px);
  --hero-logo-h: calc(var(--hero-logo-w) * .2264);   /* alto/ancho de logo-hero.png: 249/1100 */
  --hero-pad-b: clamp(2.5rem, 8vw, 5rem);
  --hero-btn-h: 3rem;
  --hero-gap: .75rem;                                 /* aire entre logo y boton */
  --hero-zone: calc(var(--hero-pad-b) + var(--hero-btn-h) + var(--hero-gap));
  --hero-overlap: .4;                                 /* fraccion del logo que cubren las llantas del UTV */
  --lift: 0px;                                        /* sube la foto de un slide respecto al logo (ver .hs-utv2) */
  /* Oscurecimiento sobre la foto (el recorte del UTV usa el mismo, para que no se vea mas claro). */
  --hero-shade:
    linear-gradient(180deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,.12) 30%, rgba(10,10,10,.8) 80%, #0a0a0a 100%),
    linear-gradient(90deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 46%, rgba(10,10,10,.22) 100%);
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  overflow: hidden;
}
/* Laptop y escritorio: logo y boton un poco mas abajo. --hero-drop = cuanto bajan. */
@media (min-width: 701px) {
  .hero {
    --hero-pad-b: clamp(2rem, 5.5vw, 3.5rem);
    --hero-drop: calc(clamp(2.5rem, 8vw, 5rem) - clamp(2rem, 5.5vw, 3.5rem));
  }
}
.hero-bg {
  position: absolute; inset: var(--nav-h) 0 0 0; z-index: 0;
  overflow: hidden;
}
.hero-bg img, .hero-bg video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 4%;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--hero-shade);
}
.hero-inner {
  z-index: 1;
  width: 100%;
  padding-block: var(--hero-pad-b);
}
.hero-title {
  /* Linea de altura cero justo encima del boton: de ella cuelga el logo. */
  margin: 0;
  height: 0;
  position: relative;
}
.hero-logo {
  display: block;
  position: absolute;
  /* Anclado al borde superior del h1, que queda justo encima del boton "Ver
     catalogo": el logo siempre se asienta pegado al boton, sin importar el
     alto de la pantalla. */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--hero-logo-w);
  height: auto;
  filter: drop-shadow(0 14px 60px rgba(0,0,0,.65));
  animation: heroLogoIn 1.1s var(--ease-out) both .15s;
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translate(-50%, 6%) scale(.92); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }
.hero-sub {
  margin-top: 1.3rem;
  max-width: 46ch;
  color: var(--ink-mute);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}
.hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: var(--hero-gap);
}
.hero-actions .btn { min-height: var(--hero-btn-h); }

/* =============================================================
   6b. Marquee de marcas
   ============================================================= */
.brand-marquee {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(10,10,10,.1);
  background: #fff;
  padding-block: clamp(.6rem, 1.4vw, .95rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brand-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2.4rem, 5vw, 4rem);
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }
.brand-marquee-item {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: clamp(124px, 14vw, 182px);
  height: clamp(50px, 5.5vw, 70px);
}
/* KTM conserva su tamaño original: su logo es más cuadrado y con el aumento se vería desproporcionado. */
.brand-marquee-item[href$="marca=ktm"] { width: clamp(96px, 11vw, 140px); height: clamp(38px, 4.2vw, 54px); }
.brand-marquee-item img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .25s var(--ease-out), filter .25s var(--ease-out);
}
.brand-marquee-item:hover img { opacity: 1; filter: none; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; }
}

/* =============================================================
   8. Servicios / Taller
   ============================================================= */
.service-card {
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
  overflow: hidden;
}
.service-num {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: .8rem;
}
.service-card h3 {
  font-size: 1.3rem;
  margin-top: .2rem;
}
.service-card p {
  color: var(--ink-mute);
  font-size: .93rem;
  flex-grow: 1;
}
.service-photo {
  position: absolute; inset: 0;
  opacity: 0;
}
.service-card.has-photo {
  min-height: 320px;
  justify-content: flex-end;
}
.service-card.has-photo .service-photo {
  opacity: 1;
}
.service-card.has-photo .service-photo img,
.service-card.has-photo .service-photo video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) contrast(1.15);
}
.service-card.has-photo .service-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.95) 90%);
}
.service-card.has-photo > *:not(.service-photo) { position: relative; z-index: 1; }

/* ---- Quiénes Somos: Misión / Visión / Valores ---- */
.mvv-grid { grid-template-columns: 1fr; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 720px) { .mvv-grid { grid-template-columns: repeat(2, 1fr); } }
.mvv-card { padding: clamp(1.6rem, 3vw, 2.2rem); }
.mvv-kicker {
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.mvv-card p:last-child { color: var(--ink-mute); line-height: 1.6; }

.values-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .values-grid { grid-template-columns: repeat(6, 1fr); } }
.value-item {
  padding: clamp(1.2rem, 2.4vw, 1.6rem) 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center;
}
.value-item .icon { width: 28px; height: 28px; color: var(--accent); }
.value-item p {
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

/* =============================================================
   8b. Tarjetas de producto (catálogo real)
   ============================================================= */
.unit-grid { grid-template-columns: repeat(2, 1fr); }
/* Vehículos (categoria-utv.php, home showcase, marca-vehiculo.php): una
   tarjeta por fila en el teléfono — a diferencia de accesorios/repuestos/
   etc., cada tarjeta de vehículo lleva precio y mucho más que decidir, y a
   2 por fila quedaba demasiado apretada para eso. */
@media (max-width: 719px) { .unit-grid.unit-grid-4col { grid-template-columns: 1fr; } }
@media (min-width: 720px) { .unit-grid { grid-template-columns: repeat(3, 1fr); } }
/* Vehículos: 3 por fila tambien en escritorio/laptop (pedido explicito) —
   antes subia a una 4ta columna desde 1300px, igual que las demas
   categorias se quedan en 3 sin importar el ancho. */
.unit-card {
  container-type: inline-size;
  container-name: unit-card;
  display: flex; flex-direction: column;
  cursor: pointer;
  background: #fff;
  border-color: rgba(10, 10, 10, .08) !important;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* Every size below is a @container query on the CARD's own rendered width,
   not the viewport — a 4-column desktop grid can make cards just as narrow
   as a 2-column mobile one, so viewport-width breakpoints alone got this
   backwards (bigger screen would wrongly mean bigger text even when each
   card actually got smaller). A container query can't reliably restyle the
   container element itself (confirmed empirically — a custom property
   redeclared on `.unit-card` inside its own `@container` rule didn't take),
   so every rule below targets a *descendant* of `.unit-card` directly. */
@media (hover: hover) and (pointer: fine) {
  .unit-card:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35);
    transform: translateY(-4px);
  }
}
.unit-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f4f2;
}
.unit-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out), filter .4s var(--ease-out);
  filter: saturate(1.05) contrast(1.03);
}
.unit-card:hover .unit-photo img { transform: scale(1.08); }
/* Mini carrusel en la tarjeta: scroll-snap nativo = deslizar con el dedo. */
.unit-slides {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.unit-slides::-webkit-scrollbar { display: none; }
.unit-slides img { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.unit-card:hover .unit-slides img { transform: none; }
.unit-slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; border: none; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(10,10,10,.55); color: #fff;
  opacity: 0; transition: opacity .2s;
}
.unit-slide-nav .icon { width: 16px; height: 16px; }
.unit-slide-prev { left: 6px; } .unit-slide-next { right: 6px; }
@media (hover: hover) { .unit-photo:hover .unit-slide-nav { opacity: 1; } }
.unit-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.unit-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: background .2s, transform .2s; }
.unit-dots span.is-active { background: #fff; transform: scale(1.25); }
.product-gallery-main { touch-action: auto; }
.unit-photo::after {
  content: "";
  position: absolute; inset: 0;
  /* Rediseño 2026-10-01 (tarjetas mas compactas): antes esta sombra ocupaba
     el 40% inferior de la foto para que el numero/corazon resaltaran contra
     fotos claras — con la foto de fondo mas plano de ahora y los badges mas
     chicos/discretos, una sombra tan fuerte quedaba pesada; se deja solo un
     filo sutil arriba, detras del corazon. */
  background: linear-gradient(180deg, rgba(10,10,10,.28) 0%, transparent 22%);
  pointer-events: none;
}
.unit-num {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
  font-family: var(--font-mono);
  font-size: .6rem;
  color: rgba(245,245,243,.85);
  background: rgba(10,10,10,.5);
  border-radius: 999px;
  padding: .22em .55em;
}
.unit-fav {
  position: absolute; top: .4rem; left: .4rem; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem;
  border: none; border-radius: 50%;
  background: rgba(10,10,10,.4);
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-out);
}
.unit-fav .icon { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.unit-fav:hover { background: rgba(10,10,10,.65); transform: scale(1.08); }
.unit-fav.is-favorited { background: #fff; color: var(--accent); }
.unit-fav.is-favorited .icon { fill: var(--accent); stroke: var(--accent); }
/* Rediseño 2026-10-01: tarjetas mucho mas compactas (pedido explicito,
   inspirado en un catalogo de referencia) — letra e interlineado chicos,
   poco padding, nombre recortado a 2 lineas para que una foto+nombre+precio
   nunca empuje la tarjeta a una altura impredecible. */
.unit-info { flex: 1 1 auto; padding: .55rem .6rem .35rem; display: flex; flex-direction: column; gap: .15rem; }
.unit-info h3 {
  font-size: .72rem;
  line-height: 1.25;
  color: #16110f;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.unit-brand {
  color: #8a8480;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unit-price {
  color: #6b6560;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .68rem;
}
/* Cuando no hay precio real, esta misma linea muestra el id del producto a
   falta de un SKU propio en la base de datos — ver render_card.php. */
.unit-price-code { letter-spacing: .02em; }
@container unit-card (min-width: 220px) {
  .unit-info { padding-inline: .75rem; gap: .2rem; }
  .unit-info h3 { font-size: .8rem; }
  .unit-brand { font-size: .62rem; }
  .unit-price { font-size: .74rem; }
}
@container unit-card (min-width: 300px) {
  .unit-info { padding-inline: .9rem; padding-top: .7rem; padding-bottom: .45rem; gap: .25rem; }
  .unit-info h3 { font-size: .88rem; }
  .unit-brand { font-size: .66rem; }
  .unit-price { font-size: .8rem; }
}
@container unit-card (min-width: 360px) { .unit-info h3 { font-size: .94rem; } }
.unit-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5em .6rem;
  border-top: 1px solid rgba(10, 10, 10, .08);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #16110f;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
@container unit-card (min-width: 220px) { .unit-cta { padding-inline: .75rem; } }
@container unit-card (min-width: 300px) { .unit-cta { padding: .6em .9rem; font-size: .66rem; } }
.unit-cta .icon {
  width: .9rem; height: .9rem;
  transform: rotate(0deg);
  transition: transform .3s var(--ease-out);
}
.unit-card:hover .unit-cta {
  background: var(--accent);
  color: #fff;
}
.unit-card:hover .unit-cta .icon { transform: rotate(45deg); }
.unit-add-cart {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  width: calc(100% - 1.2rem);
  margin: .3rem .6rem .45rem;
  padding: .45em .7em;
  border: 1px solid rgba(10, 10, 10, .16);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #16110f;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
/* Boton compacto: ajustado a su contenido, centrado, una sola linea. */
.unit-add-cart { width: fit-content; max-width: calc(100% - 1.2rem); margin: .3rem auto .55rem; padding: .38em .8em; font-size: .58rem; white-space: nowrap; }
.unit-add-cart .icon { width: .85rem; height: .85rem; }
.unit-add-cart:hover { border-color: var(--accent); color: var(--accent); }
.unit-add-cart.is-added { border-color: #1e9c48; color: #1e9c48; }
/* Productos no vehiculo (accesorios, repuestos, gomas, aros, mantenimiento):
   tarjeta compacta y cuadrada — sin boton "Ver ficha completa" (toda la
   tarjeta ya es el enlace), y la foto se muestra COMPLETA (contain) sobre
   fondo claro en vez de recortada (cover). */
.unit-card-part .unit-photo { background: #fff; padding: .5rem; }
.unit-card-part .unit-photo img { object-fit: contain; filter: none; }
.unit-card-part:hover .unit-photo img { transform: scale(1.04); }
.unit-card-part .unit-photo::after { display: none; }
.unit-card-part .unit-info { padding-top: .4rem; padding-bottom: .5rem; gap: .1rem; }
.unit-card-part .unit-brand { flex-grow: 0; }
.unit-card-part .unit-add-cart { margin-top: 0; }
@media (min-width: 1100px) { .unit-grid:not(.unit-grid-4col) { grid-template-columns: repeat(4, 1fr); } }
/* Home "Nuestro catalogo": las tarjetas son blancas sobre una seccion clara y
   se perdian en el fondo — borde rojo de marca + sombra para separarlas. */
#catalogo .unit-card {
  border: 2px solid var(--accent) !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(226, 35, 26, .55);
}
.ig-cta { margin-top: 2.2rem; }

/* =============================================================
   10. Hub de categorías (catalogo.html)
   ============================================================= */
/* Cabecera del catalogo: una foto grande con el titulo apoyado sobre el suelo oscuro de la
   propia foto (abajo), que se funde con el fondo de la pagina y deja paso a las tarjetas. */
.catalog-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--nav-h);
  min-height: clamp(360px, 62svh, 700px);
  display: flex; align-items: flex-end;
}
.catalog-hero-bg { position: absolute; inset: 0; z-index: -1; }
.catalog-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; display: block; }
.catalog-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,0) 30%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.82) 16%, rgba(10,10,10,0) 58%);
}
.catalog-hero-inner {
  position: relative; width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding-bottom: clamp(1.25rem, 3.4vw, 2.6rem);
}
.catalog-hero-title {
  position: relative;
  margin: 0;
  font-size: clamp(3.4rem, min(11.5vw, 20svh), 9.5rem);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0,0,0,.55);
  animation: catalogHeroIn .9s var(--ease-out) both .1s;
}
@keyframes catalogHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Flecha para bajar a las categorias (sin texto). */
.catalog-hero-cue {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: clamp(44px, 5vw, 60px); height: clamp(44px, 5vw, 60px);
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%;
  color: #fff; background: rgba(10,10,10,.35);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.catalog-hero-cue .icon { width: 42%; height: 42%; transform: rotate(90deg); }
.catalog-hero-cue:hover, .catalog-hero-cue:focus-visible { border-color: var(--accent); background: var(--accent); transform: translateY(3px); }
.catalog-hub { padding-top: clamp(1.25rem, 3vw, 2.25rem); scroll-margin-top: var(--nav-h); }
/* Telefono: el alto sigue al ancho (108vw) para que los dos UTVs, que ocupan ~61% de la foto,
   entren completos en la pantalla en vez de quedar cortados a los lados. */
@media (max-width: 700px) {
  .catalog-hero { min-height: max(330px, 108vw); }
  .catalog-hero-bg img { object-position: 50% 78%; }
}

.cat-tile-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .cat-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cat-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .cat-tile-grid { grid-template-columns: repeat(4, 1fr); } }

.cat-tile {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.8rem 1.6rem;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.cat-tile h3 { font-size: 1.2rem; }
.cat-tile p {
  color: var(--ink-mute);
  font-size: .84rem;
  flex-grow: 1;
}
.cat-tile-arrow {
  display: inline-flex; width: 1.3rem; height: 1.3rem;
  color: var(--ink-dim);
  transform: rotate(0deg);
  transition: transform .25s var(--ease-out), color .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 16px 32px -14px rgba(226,35,26,.5);
    transform: translateY(-3px);
  }
  .cat-tile:hover .cat-tile-arrow { transform: rotate(45deg); color: var(--accent); }
}
.cat-tile:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 16px 32px -14px rgba(226,35,26,.5);
}

.cat-tile.has-photo { min-height: 240px; justify-content: flex-end; color: #fff; }
.cat-tile-photo { position: absolute; inset: 0; z-index: 0; }
.cat-tile-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: grayscale(.3) contrast(1.1) brightness(.8);
}
.cat-tile-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.4) 0%, rgba(10,10,10,.5) 35%, rgba(10,10,10,.96) 100%);
}
.cat-tile.has-photo > *:not(.cat-tile-photo) { position: relative; z-index: 1; }
.cat-tile.has-photo h3 { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.cat-tile.has-photo p { color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* ---- Tarjetas de categoria (bento): la principal ocupa mas ancho, foto a color, texto abajo ----
   Las 7 tarjetas llenan filas completas en cada ancho: 4 col (principal x2), 3 col (principal
   a todo el ancho), 2 col (principal a todo el ancho), 1 col. */
.cat-tile-grid { gap: clamp(.8rem, 1.6vw, 1.2rem); }
.cat-tile-grid .cat-tile {
  min-height: clamp(210px, 22vw, 290px);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background: var(--bg-1);
  justify-content: flex-end; gap: .35rem;
  isolation: isolate;
}
.cat-tile-grid .cat-tile.has-photo { min-height: clamp(210px, 22vw, 290px); }
.cat-tile-grid .cat-tile-photo img {
  filter: none; transform: scale(1.001);
  transition: transform .7s var(--ease-out);
}
/* Degradado solo donde va el texto: la foto se ve a color en la parte de arriba. */
.cat-tile-grid .cat-tile-photo::after {
  background:
    linear-gradient(0deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.7) 30%, rgba(10,10,10,0) 68%),
    linear-gradient(180deg, rgba(10,10,10,.3) 0%, rgba(10,10,10,0) 30%);
}
.cat-tile-grid .cat-tile h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.02; letter-spacing: .015em; text-transform: uppercase;
}
.cat-tile-grid .cat-tile p {
  flex-grow: 0; margin: 0;
  font-size: .9rem; line-height: 1.3;
  color: rgba(255,255,255,.78);
}
/* Flecha en circulo arriba a la derecha: se llena de rojo al pasar el mouse. */
.cat-tile-grid .cat-tile.has-photo > .cat-tile-arrow {
  position: absolute; top: clamp(.9rem, 1.6vw, 1.25rem); right: clamp(.9rem, 1.6vw, 1.25rem);
  width: 2.5rem; height: 2.5rem; padding: .7rem; box-sizing: border-box;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 50%;
  color: #fff; background: rgba(10,10,10,.35);
  transform: none;
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
/* Barra roja que se abre desde el centro, igual que en las tarjetas de marcas. */
.cat-tile-grid .cat-tile::after {
  content: ""; position: absolute; left: 1.2rem; right: 1.2rem; bottom: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px 999px 0 0;
  transform: scaleX(0); transform-origin: center;
  transition: transform .45s var(--ease-bounce);
}
@media (hover: hover) and (pointer: fine) {
  .cat-tile-grid .cat-tile:hover { transform: translateY(-4px); }
  .cat-tile-grid .cat-tile:hover .cat-tile-photo img { transform: scale(1.07); }
  .cat-tile-grid .cat-tile:hover > .cat-tile-arrow { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(45deg); }
  .cat-tile-grid .cat-tile:hover::after { transform: scaleX(1); }
}
.cat-tile-grid .cat-tile:focus-visible::after { transform: scaleX(1); }
.cat-tile-grid .cat-tile:focus-visible > .cat-tile-arrow { background: var(--accent); border-color: var(--accent); }
/* Tarjeta principal: titulo mas grande y ocupa mas ancho. */
.cat-tile-grid .cat-tile--lead h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.cat-tile-grid .cat-tile--lead p { font-size: 1rem; }
@media (min-width: 560px)  { .cat-tile-grid .cat-tile--lead { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .cat-tile-grid .cat-tile--lead { grid-column: span 2; } }

/* =============================================================
   10a. Directorio de marcas (home) — nombre + logo + acento Semage
   ============================================================= */
.brand-directory-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (min-width: 560px)  { .brand-directory-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px)  { .brand-directory-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .brand-directory-grid { grid-template-columns: repeat(6, 1fr); } }

.brand-directory-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, .08);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(10,10,10,.04);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
/* Franja de acento Semage, cerrada por defecto, se "abre" al pasar el mouse
   o al enfocar — el mismo gesto de subrayado que .nav-links ya usa. */
.brand-directory-card::after {
  content: "";
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px 999px 0 0;
  transform: scaleX(.32);
  transform-origin: center;
  transition: transform .4s var(--ease-bounce);
}
/* Brillo blanco que atraviesa la tarjeta al pasar el mouse — una barra
   diagonal que arranca fuera del recuadro (por eso no se ve nada en reposo)
   y lo cruza de lado a lado; overflow:hidden en la tarjeta recorta el resto. */
.brand-directory-shine {
  position: absolute; top: -20%; left: -35%; width: 26%; height: 140%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-100%) rotate(8deg);
  transition: transform .75s var(--ease-out);
  pointer-events: none;
}
/* Iluminación puntual al hacer clic — initBrandDirectoryGlow() en main.js
   fija --gx/--gy en el punto exacto del clic antes de disparar la animación. */
.brand-directory-glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(226,35,26,.4), rgba(226,35,26,0) 62%);
  opacity: 0;
}
.brand-directory-card.is-glowing .brand-directory-glow { animation: brandDirectoryGlow .65s var(--ease-out); }
@keyframes brandDirectoryGlow {
  0% { opacity: .9; transform: scale(.25); }
  100% { opacity: 0; transform: scale(1.7); }
}
.brand-directory-logo {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.brand-directory-logo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transition: transform .35s var(--ease-out);
}
.brand-directory-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  color: #16110f;
}
@media (hover: hover) and (pointer: fine) {
  .brand-directory-card:hover {
    border-color: var(--accent);
    box-shadow: 0 20px 36px -16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(226,35,26,.06);
    transform: translateY(-6px);
  }
  .brand-directory-card:hover::after { transform: scaleX(1); }
  .brand-directory-card:hover .brand-directory-shine { transform: translateX(420%) rotate(8deg); }
  .brand-directory-card:hover .brand-directory-logo img { transform: scale(1.08); }
}
.brand-directory-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 20px 36px -16px rgba(0, 0, 0, .45);
  outline: none;
}
.brand-directory-card:focus-visible::after { transform: scaleX(1); }
.brand-directory-card:active { transform: translateY(-2px) scale(.98); }

/* =============================================================
   10b. Página de categoría — banner + estado vacío
   ============================================================= */
.cat-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
}
.cat-hero-bg { position: relative; z-index: 0; }
.cat-hero-bg img {
  display: block;
  width: 100%; height: auto;
  min-height: 42vh;
  object-fit: contain;
  background: var(--bg-1);
}
.cat-hero-bg::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 55%, var(--bg) 100%);
}
.cat-hero.no-image { background: var(--bg-1); min-height: 0; }
.cat-hero-inner {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  padding-block: 2.5rem;
  width: 100%;
}
.cat-hero.no-image .cat-hero-inner { position: relative; padding-top: calc(var(--nav-h) + .6rem); padding-bottom: 1rem; }
.cat-hero.no-image .breadcrumb { margin-bottom: .3rem; }
.cat-hero-title-red { color: var(--accent); }
/* Título blanco SOBRE la difuminación negra al pie del banner. */
/* Compacto: banner bajo (máx. 34% de la pantalla) y sin huecos hacia el contenido. */
.cat-hero--fade .cat-hero-bg img { min-height: 0; height: auto; aspect-ratio: 1920 / 758; object-fit: cover; object-position: center top; }
@media (max-width: 700px) { .cat-hero--fade .cat-hero-bg img { aspect-ratio: 3 / 2; object-position: 52% top; } }
.cat-hero--fade .cat-hero-inner { padding-block: .6rem .5rem; }
.cat-hero--fade .cat-hero-title { font-size: clamp(1.9rem, 5.5vw, 3.2rem); line-height: 1; }
.cat-hero--fade + .product-section { padding-top: .6rem; padding-bottom: 2rem; }
.cat-hero--fade + .product-section .shop-layout { gap: .6rem 1.6rem; }
.cat-hero--fade + .product-section .shop-brand-filter { margin-bottom: .2rem; }
.cat-hero--fade + .product-section .shop-brand-filter-label { margin-bottom: .4rem; }
.cat-hero--fade + .product-section .catalog-toolbar { margin-bottom: .8rem; padding-bottom: .6rem; }
.cat-hero--fade .cat-hero-inner { z-index: 3; padding-block: 1.2rem; }
.cat-hero--fade .cat-hero-bg::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.9) 14%, rgba(10,10,10,.45) 32%, rgba(10,10,10,0) 58%); }
.cat-hero--fade .cat-hero-title { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin-bottom: .8rem;
}
.breadcrumb a { color: var(--ink-mute); transition: color .2s; }
.breadcrumb a:hover { color: var(--accent-2); }
.cat-hero-title { font-size: clamp(2.6rem, 7.5vw, 4.8rem); }

/* ---- Página de marca de vehículo (marca-vehiculo.php) ----
   Cada foto curada tiene su propia relación de aspecto, y dejarlas a su
   alto natural (un intento anterior) daba una altura distinta en cada
   página — pedido explícito del dueño: las 7 deben compartir exactamente
   el mismo alto/encuadre, usando como referencia la franja de Segway
   (2170:725) que quedó "perfecta". Con object-fit:cover + un
   object-position elegido a mano por foto (ver BRAND_BANNERS en
   brand_profiles.php) el vehículo se mantiene como protagonista pese al
   recorte — el object-position de cada `<img>` va inline porque depende
   de la composición de esa foto en particular, no es un valor genérico
   de CSS. */
.brand-hero { margin-top: var(--nav-h); }
.brand-hero .cat-hero-bg {
  aspect-ratio: 2170 / 725;
  height: auto;
}
.brand-hero .cat-hero-bg img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: var(--pos, center);
  display: block;
}
.brand-hero.no-image { min-height: 16vh; }
@media (max-width: 640px) {
  /* 2170:725 (~3:1) en un viewport angosto da una franja demasiado
     delgada (~125px) — una relacion mas alta muestra mas de cada foto
     alrededor del mismo object-position (menos recorte, no un encuadre
     distinto), y sigue siendo la MISMA en las 7 marcas. */
  .brand-hero .cat-hero-bg { aspect-ratio: 16 / 9; }
  .brand-hero .cat-hero-bg img { object-position: var(--pos-m, var(--pos, center)); }
}

/* Identidad de marca: logos amplios con proporciones originales.
   El max-width del logo NO debe llevar un "100%" dentro de un min() — un
   porcentaje ahi es indeterminado durante el calculo de ancho preferido de
   un flex item (flex-basis:auto), y Chromium termina resolviendolo a casi
   todo el ancho disponible de la fila en vez de al tamaño real de la
   imagen. El contenedor (.brand-summary-logo-box) queda invisible pero
   "ocupa" ese espacio para el resto del calculo de layout. Un max-width
   fijo en rem/vw (sin porcentaje) evita el bug. */
.brand-summary-brandrow { display: flex; align-items: center; gap: clamp(.75rem, 1.2vw, 1.25rem); margin-bottom: clamp(.6rem, 1.2vw, 1rem); }
.brand-summary-logo-box { display: block; min-width: 0; }
.brand-summary-logo { width: auto; height: auto; max-width: clamp(16rem, 30vw, 26rem); max-height: clamp(6rem, 10vw, 9rem); object-fit: contain; display: block; }
.brand-summary-name {
  display: block; font-family: var(--font-display); text-transform: uppercase; line-height: 1;
  font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--ink);
}
/* Logo + parrafo sintetizado de marca, debajo del banner (ya no
   superpuesto sobre la foto — pedido explicito: nada debe tapar el
   vehiculo). Padding recortado (pedido explicito: no dejar espacio vacio
   de mas entre el banner, el logo y el parrafo). */
.brand-summary-section {
  background: var(--bg);
  padding-block: clamp(.9rem, 1.8vw, 1.3rem);
  border-bottom: 1px solid var(--line);
}
/* .product-section ya trae su propio padding-top grande (pensado para
   seguir directo a un banner sin texto) — aqui duplicaria el espaciado
   que ya da .brand-summary-section, dejando un hueco vacio de mas de
   6rem entre el parrafo y "Catálogo". */
.brand-summary-section + .product-section { padding-top: clamp(1rem, 2vw, 1.5rem); }
.brand-hero-summary {
  font-size: clamp(1.05rem, 1.4vw, 1.45rem); line-height: 1.65; color: var(--ink-mute);
  width: 100%; max-width: none; margin: 0;
  text-align: justify;
  hyphens: auto;
}

.empty-state {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  max-width: 44ch;
  margin-inline: auto;
}
.empty-state-icon {
  width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto;
  background: var(--bg-1);
  border-radius: 50%;
  color: var(--ink-dim);
}
.empty-state-icon .icon { width: 1.8rem; height: 1.8rem; }
.empty-state h2 { font-size: 1.6rem; margin-top: 1.2rem; }
.empty-state p { color: var(--ink-mute); margin-top: .8rem; }
.empty-state .btn { margin-top: 1.6rem; }

/* =============================================================
   10b. Ficha de producto (producto.html)
   ============================================================= */
.product-page-section { padding-top: clamp(4.6rem, 8vw, 6.5rem); }
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  margin-top: 1rem;
}
@media (min-width: 900px) { .product-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.product-gallery-main {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-1);
  aspect-ratio: 4 / 3;
}
.product-gallery-main { background: #fff; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery-main[data-zoomable] img { cursor: zoom-in; }
/* Móvil compacto: foto más baja (nunca más del 36% de la altura de pantalla) y
   bloques más juntos, para ver foto + título + precio sin desplazarse. */
@media (max-width: 899px) {
  .product-page-section { padding-top: 4.2rem; padding-bottom: 2rem; }
  .product-detail { gap: .9rem; margin-top: .5rem; }
  .product-gallery-main { aspect-ratio: 16 / 10; max-height: 36svh; }
  .product-title-top, .product-info h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.05; }
  .product-info h1 { margin-top: .2rem; }
  .product-price { margin-top: .2rem; font-size: 1.5rem; }
  .product-desc { margin-top: .6rem; font-size: .95rem; }
  .product-specs { margin-top: 1rem; }
  .product-specs > div { padding-block: .55rem; }
  .product-info .kicker { margin: 0; }
}

/* ---- Navegación de galería (varias fotos por producto) ---- */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease-out);
}
.gallery-nav:hover { background: rgba(10, 10, 10, .78); }
.gallery-nav-prev { left: .8rem; }
.gallery-nav-next { right: .8rem; }
.gallery-counter {
  position: absolute; bottom: .8rem; right: .9rem; z-index: 2;
  font-family: var(--font-mono);
  font-size: .74rem;
  padding: .3em .7em;
  border-radius: 999px;
  background: rgba(10, 10, 10, .55);
  color: #fff;
}
.product-gallery-thumbs {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: .8rem;
}
.product-gallery-thumb {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .2s var(--ease-out);
}
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-thumb:hover { border-color: var(--ink-dim); }
.product-gallery-thumb.is-active { border-color: var(--accent); }

/* ---- Navegación dentro del lightbox ---- */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease-out);
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .18); }
.lightbox-nav-prev { left: 1.2rem; }
.lightbox-nav-next { right: 1.2rem; }

/* ---- Lightbox de foto de producto (con zoom) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 6, 6, .94);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  cursor: zoom-in;
  transform: translate(0px, 0px) scale(1);
  transition: transform .3s var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-img.is-zoomed { cursor: grab; }
.lightbox-img.is-dragging { cursor: grabbing; transition: none; }
.lightbox-close {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease-out);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .18); }
.lightbox-hint {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-img { transition: none; }
}
.product-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .4em .9em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.product-info { display: flex; flex-direction: column; }
.product-title-top { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 .2rem; }
.product-info h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-top: .5rem; }
.product-price {
  margin-top: .6rem;
  color: var(--accent-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.product-desc { margin-top: 1.1rem; color: var(--ink-mute); font-size: 1.05rem; max-width: 52ch; }
.product-specs {
  margin-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.product-specs > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--line);
}
.product-specs > div[hidden] { display: none; }
.product-specs dt {
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
.product-specs dd { font-weight: 600; text-align: right; }
.product-size-picker { margin-top: 1.6rem; max-width: 260px; }
.product-size-picker label {
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-dim);
  margin-bottom: .5rem;
}
.product-size-picker select {
  appearance: none;
  width: 100%;
  padding: .75em 2.2em .75em 1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a8a8a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') right .8em center / 1em no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .2s var(--ease-out);
}
.product-size-picker select:hover, .product-size-picker select:focus-visible { border-color: var(--accent); }

.product-actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 2rem;
}

/* =============================================================
   10b. Cuenta (login / registro / pedidos)
   ============================================================= */
.auth-section { display: flex; justify-content: center; }
.auth-container { max-width: 480px; }
.auth-card {
  background: rgba(10,10,10,.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.4rem);
}
.auth-card h1 { margin-top: .3rem; }
.auth-form { margin-top: 1.6rem; display: grid; gap: 1rem; }
.auth-form label span {
  display: block;
  margin-bottom: .4rem;
  font-size: .8rem;
  color: var(--ink-mute);
}
.auth-form input {
  width: 100%;
  padding: .75em 1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .92rem;
  transition: border-color .2s var(--ease-out);
}
.auth-form input:focus-visible { border-color: var(--accent); outline: none; }
.auth-form .btn { margin-top: .4rem; justify-self: start; }
.auth-error {
  margin-top: 1rem;
  padding: .8em 1em;
  border-radius: var(--radius-sm);
  background: rgba(226,35,26,.12);
  border: 1px solid var(--accent-dark);
  color: var(--ink);
  font-size: .88rem;
}
.auth-note {
  margin-top: 1rem;
  padding: .8em 1em;
  border-radius: var(--radius-sm);
  background: rgba(34,180,90,.12);
  border: 1px solid #1e7a45;
  color: var(--ink);
  font-size: .88rem;
}
.auth-alt { margin-top: 1.4rem; font-size: .88rem; color: var(--ink-mute); }
.auth-alt a, .auth-alt .logout-link { color: var(--accent-2); }
.auth-alt a:hover, .auth-alt .logout-link:hover { color: var(--accent); }
.auth-orders-table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
.auth-orders-table th, .auth-orders-table td {
  text-align: left;
  padding: .7em .8em;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.auth-orders-table th { color: var(--ink-mute); font-weight: 600; }
.order-status {
  display: inline-block;
  padding: .2em .7em;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
}
.order-status.status-pending { color: #e2b21a; border-color: #e2b21a; }
.order-status.status-confirmed { color: #3ba4e2; border-color: #3ba4e2; }
.order-status.status-completed { color: #22b45a; border-color: #22b45a; }
.order-status.status-cancelled { color: var(--ink-dim); border-color: var(--line-strong); }

/* =============================================================
   10c. Comunidad (feed tipo Instagram)
   ============================================================= */
.feed-container { max-width: 900px; }
.feed-container-single { max-width: 640px; }
.feed-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem;
  flex-wrap: wrap;
}
.feed-grid {
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.4rem;
}
.feed-grid-single { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
.feed-load-more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.feed-card {
  background: rgba(10,10,10,.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feed-card-head { display: flex; align-items: center; gap: .7em; padding: .9em 1em; }
.feed-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-2) center/cover no-repeat;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; color: var(--ink-mute);
  text-transform: uppercase;
}
.feed-card-head-info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.feed-card-head-info strong { font-size: .9rem; }
.feed-card-head-info time { font-size: .74rem; color: var(--ink-dim); }
.feed-media { position: relative; aspect-ratio: 1 / 1; background: var(--bg-2); }
.feed-media-el { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.feed-card-body { padding: .9em 1em 1.1em; }
.feed-caption { font-size: .88rem; color: var(--ink-mute); margin-bottom: .8em; }
.feed-actions { display: flex; align-items: center; gap: 1.2em; }
.feed-like, .feed-comment-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: .85rem; font-weight: 600;
  color: var(--ink-mute); background: none; border: none; cursor: pointer;
}
.feed-like .icon, .feed-comment-link .icon { width: 1.15em; height: 1.15em; }
.feed-like.is-liked { color: var(--accent); }
.feed-like.is-liked .icon { fill: var(--accent); }
.feed-comment-link:hover, .feed-like:hover { color: var(--ink); }

.feed-comments { margin-top: 2rem; }
.feed-comments h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.feed-comment-form { display: flex; gap: .7em; margin-bottom: 1.4rem; }
.feed-comment-form textarea {
  flex: 1; resize: none; height: 2.6em; padding: .6em .9em;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--bg-1); color: var(--ink); font-family: var(--font-body); font-size: .9rem;
}
.feed-comment-form textarea:focus-visible { border-color: var(--accent); outline: none; }
.feed-comment-list { display: flex; flex-direction: column; gap: 1rem; }
.feed-comment {
  position: relative;
  padding: .8em 1em;
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  border: 1px solid var(--line);
  font-size: .88rem;
}
.feed-comment strong { display: block; font-size: .84rem; margin-bottom: .2em; }
.feed-comment-body { color: var(--ink-mute); }
.feed-comment time { display: block; margin-top: .4em; font-size: .72rem; color: var(--ink-dim); }
.feed-comment-delete {
  position: absolute; top: .6em; right: .7em;
  background: none; border: none; color: var(--ink-dim); font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}
.feed-comment-delete:hover { color: var(--accent); }
.feed-avatar-lg { width: 88px; height: 88px; font-size: 1.8rem; }
.feed-profile-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.feed-profile-grid .feed-card { border-radius: var(--radius-sm); }
.feed-profile-grid .feed-card-head, .feed-profile-grid .feed-card-body { display: none; }
.feed-profile-grid .feed-media { aspect-ratio: 1 / 1; }
.feed-post-status {
  display: inline-block; margin-top: .3em; padding: .15em .6em; border-radius: 999px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  background: rgba(226,35,26,.15); border: 1px solid var(--accent-dark); color: var(--accent-2);
}

/* ---- Calendario de eventos ---- */
.event-container { max-width: 1100px; }
.event-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; margin-top: 1.6rem; align-items: start; }
@media (max-width: 800px) { .event-layout { grid-template-columns: 1fr; } }

.event-calendar {
  background: rgba(10,10,10,.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem;
}
.event-calendar-dow, .event-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.event-calendar-dow span { text-align: center; font-size: .68rem; color: var(--ink-dim); text-transform: uppercase; padding-bottom: .5rem; }
.event-calendar-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: .8rem; color: var(--ink-mute);
  position: relative;
}
.event-calendar-cell.is-empty { visibility: hidden; }
.event-calendar-cell.is-today { background: var(--bg-2); color: var(--ink); font-weight: 700; }
.event-calendar-cell.has-event { color: var(--ink); font-weight: 600; }
.event-calendar-cell.has-event::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

.event-list { display: flex; flex-direction: column; gap: 1.2rem; }
.event-list-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.event-card {
  display: flex; gap: 1.1rem;
  background: rgba(10,10,10,.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem;
}
.event-list-home .event-card { flex-direction: column; }
.event-card-photo { flex-shrink: 0; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; order: -1; }
.event-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.event-card-date {
  flex-shrink: 0; width: 58px; height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--bg-1); border: 1px solid var(--line-strong);
}
.event-card-day { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--ink); }
.event-card-month { font-size: .62rem; text-transform: uppercase; color: var(--ink-mute); }
.event-card-body { flex: 1; min-width: 0; }
.event-card-body h3 { font-size: 1.05rem; margin-bottom: .3em; }
.event-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; font-size: .8rem; color: var(--ink-mute); margin-bottom: .6em; }
.event-card-meta .icon { width: 1em; height: 1em; }
.event-card-desc { font-size: .86rem; color: var(--ink-mute); margin-bottom: .9em; }
.event-card-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.event-rsvp { padding: .5em 1.1em; font-size: .76rem; }
.event-rsvp .icon { width: 1em; height: 1em; }
.event-rsvp.is-going { border-color: var(--accent); color: var(--accent); background: rgba(226,35,26,.08); }
.event-card-count { font-size: .78rem; color: var(--ink-dim); }

/* ---- Carrito (rediseño 2026-09-14, referencia: fila de carrito de Amazon) ---- */
.cart-page { padding-block: clamp(2.4rem, 5vw, 4rem); }
.cart-title { margin-top: .4rem; }
.cart-empty-state {
  margin-top: 1.6rem;
  padding: 2.4rem 1.6rem;
  text-align: center;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cart-empty-state p { color: var(--ink-mute); margin-bottom: 1.2rem; }

.cart-page { padding-block: calc(var(--nav-h) + 1rem) clamp(1.4rem, 4vw, 3rem); }
.cart-title { font-size: clamp(1.9rem, 6vw, 3rem); }
.cart-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.1rem; }
/* Cada articulo es su propia tarjeta rectangular compacta: foto completa
   (contain) a la izquierda, datos arriba y cantidad/eliminar abajo. */
.cart-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas: "photo info" "photo actions";
  column-gap: .85rem; row-gap: .45rem;
  align-items: center;
  padding: .7rem .8rem;
  background: #fff;
  border: 1px solid rgba(10,10,10,.08);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.55);
}
.cart-item-photo-link { grid-area: photo; display: block; align-self: stretch; }
.cart-item-photo {
  width: 84px; height: 100%; min-height: 84px; max-height: 110px;
  border-radius: 8px; object-fit: contain;
  background: #fff; border: 1px solid rgba(10,10,10,.06);
  display: block;
}
.cart-item-info { grid-area: info; min-width: 0; }
.cart-item-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: #16110f;
  line-height: 1.25;
  transition: color .2s var(--ease-out);
}
.cart-item-name:hover { color: var(--accent); }
.cart-item-brand {
  margin-top: .15rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #8a8480;
}
.cart-item-size { margin-top: .1rem; font-size: .76rem; color: #55504c; }
.cart-item-stock {
  display: flex; align-items: center; gap: .3em;
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 600;
  color: #1e9c48;
}
.cart-item-stock .icon { width: .8rem; height: .8rem; }
.cart-item-actions { grid-area: actions; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cart-qty-stepper {
  display: flex; align-items: center;
  border: 1px solid rgba(10,10,10,.16);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-qty-stepper button {
  display: flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem;
  background: transparent;
  border: none;
  color: #16110f;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.cart-qty-stepper button:hover { background: #f2f1ef; color: var(--accent); }
.cart-qty-stepper input {
  width: 2.2rem;
  border: none;
  border-left: 1px solid rgba(10,10,10,.16);
  border-right: 1px solid rgba(10,10,10,.16);
  background: transparent;
  color: #16110f;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  padding: .35em 0;
  -moz-appearance: textfield;
}
.cart-qty-stepper input::-webkit-inner-spin-button,
.cart-qty-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item-delete {
  display: flex; align-items: center; gap: .35em;
  padding: .4em .85em;
  border-radius: 999px;
  border: 1px solid rgba(10,10,10,.16);
  background: transparent;
  color: #16110f;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.cart-item-delete .icon { width: .75rem; height: .75rem; }
.cart-item-delete:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 720px) {
  .cart-item { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "photo info actions"; padding: .8rem 1rem; column-gap: 1.1rem; }
  .cart-item-photo { width: 96px; min-height: 96px; }
  .cart-item-name { font-size: 1.05rem; }
  .cart-item-actions { flex-direction: column; align-items: flex-end; gap: .5rem; }
}

.cart-checkout-bar {
  display: block; text-align: center;
  margin-top: 1rem;
  padding: .95em 1.5em;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 12px 28px -10px rgba(226,35,26,.55);
  transition: background .2s var(--ease-out);
}
.cart-checkout-bar:hover { background: var(--accent-2); }
.cart-checkout-note { margin-top: 1rem; text-align: center; font-size: .84rem; color: var(--ink-mute); }

/* ---- Admin shell: fixed sidebar + topbar, replaces the public nav on
   every admin/* page (hidden below via body.admin-body). ---- */
body.admin-body .nav,
body.admin-body .mobile-menu,
body.admin-body .splash { display: none !important; }
body.admin-body { background: var(--bg); }
body.admin-body main#main { margin-left: var(--admin-sidebar-w, 240px); padding-top: var(--admin-topbar-h, 64px); min-height: 100vh; }

.admin-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--admin-sidebar-w, 240px);
  display: flex; flex-direction: column;
  background: var(--bg-1); border-right: 1px solid var(--line);
  padding: 1.2rem 1rem; z-index: 500; overflow-y: auto;
}
.admin-sidebar-brand { display: block; padding: .4rem .6rem 1.4rem; }
.admin-sidebar-brand img { width: 100%; max-width: 190px; height: auto; display: block; }
.admin-sidebar-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.admin-sidebar-group {
  margin: 1rem .6rem .3rem; font-family: var(--font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim);
}
.admin-sidebar-nav > p:first-child { margin-top: 0; }
.admin-sidebar-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6em .7em; border-radius: var(--radius-sm);
  color: var(--ink-mute); font-size: .88rem; font-weight: 500;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.admin-sidebar-nav a .icon { width: 18px; height: 18px; flex-shrink: 0; }
.admin-sidebar-nav a:hover { background: var(--bg-2); color: var(--ink); }
.admin-sidebar-nav a.is-active { background: var(--accent); color: #fff; }
.admin-sidebar-exit {
  display: flex; align-items: center; gap: .6rem; padding: .7em;
  margin-top: 1rem; border-top: 1px solid var(--line);
  color: var(--ink-dim); font-size: .8rem;
}
.admin-sidebar-exit .icon { width: 15px; height: 15px; }
.admin-sidebar-exit:hover { color: var(--accent-2); }

.admin-topbar {
  position: fixed; top: 0; right: 0; left: var(--admin-sidebar-w, 240px); height: var(--admin-topbar-h, 64px);
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 1.6rem; background: rgba(10,10,10,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); z-index: 490;
}
.admin-topbar-greeting { font-weight: 600; white-space: nowrap; margin: 0; }
.admin-topbar-search {
  flex: 1; max-width: 360px; display: flex; align-items: center; gap: .6rem;
  padding: .5em .9em; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-1);
}
.admin-topbar-search .icon { width: 16px; height: 16px; color: var(--ink-dim); flex-shrink: 0; }
.admin-topbar-search input {
  flex: 1; background: none; border: none; color: var(--ink); font-family: var(--font-body); font-size: .86rem;
}
.admin-topbar-search input:focus-visible { outline: none; }
.admin-topbar-bell { position: relative; margin-left: auto; color: var(--ink-mute); }
.admin-topbar-bell:hover { color: var(--ink); }
.admin-topbar-bell .icon { width: 20px; height: 20px; }
.admin-topbar-badge {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border-radius: 999px; font-size: .62rem; font-weight: 700;
}
@media (max-width: 860px) {
  :root { --admin-sidebar-w: 64px; }
  .admin-sidebar { padding: 1.2rem .5rem; align-items: center; }
  .admin-sidebar-brand { padding: .4rem 0 1.2rem; }
  .admin-sidebar-group, .admin-sidebar-nav a span, .admin-sidebar-exit span { display: none; }
  .admin-sidebar-nav a, .admin-sidebar-exit { justify-content: center; padding: .7em; }
  .admin-topbar-search, .admin-topbar-greeting { display: none; }
}
/* El shell de admin es una app densa, no una landing — el .section/.admin-panel
   heredados estaban pensados para secciones de marketing (padding enorme,
   tarjeta traslucida con backdrop-filter sobre una imagen de fondo) y aqui
   sobre fondo solido el blur apilado con el del topbar fijo genera una
   costura horizontal visible detras del texto del <h1>. */
body.admin-body .section { padding-block: 1.6rem 3rem; border-top: none; }
body.admin-body .admin-panel { background: none; backdrop-filter: none; border: none; border-radius: 0; padding: 0; }
.admin-panel {
  background: rgba(10,10,10,.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.admin-form { display: grid; gap: 1rem; max-width: 640px; }
.admin-form label span {
  display: block;
  margin-bottom: .4rem;
  font-size: .8rem;
  color: var(--ink-mute);
}
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="tel"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
  width: 100%;
  padding: .7em 1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .9rem;
}
.admin-form input:focus-visible, .admin-form select:focus-visible, .admin-form textarea:focus-visible { border-color: var(--accent); outline: none; }
.admin-fitment-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .4rem .8rem; margin-top: .5rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.admin-fitment-group label { display: flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--ink-mute); }
.admin-filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem;
  margin: 1.4rem 0; padding: 1rem 1.1rem;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.admin-filter-bar label { display: flex; flex-direction: column; gap: .35rem; min-width: 150px; }
.admin-filter-bar label span { font-size: .76rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .02em; }
.admin-filter-bar select {
  padding: .55em .7em;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-gray);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .86rem;
}
.admin-filter-bar select:focus-visible { border-color: var(--accent); outline: none; }
.admin-filter-clear { align-self: center; color: var(--accent-2); font-size: .82rem; white-space: nowrap; }
.admin-filter-clear:hover { color: var(--accent); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: .6em .7em; border-bottom: 1px solid var(--line); font-size: .86rem; vertical-align: middle; }
.admin-table th { color: var(--ink-mute); font-weight: 600; }
.admin-table img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.admin-thumb-wrap { display: flex; align-items: center; gap: .6rem; }
.admin-actions-row { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pagination-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; }

.admin-cat-group { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 1rem; overflow: hidden; }
.admin-cat-group summary {
  display: flex; align-items: center; gap: .7rem; padding: .9em 1.1em;
  background: var(--bg-1); cursor: pointer; list-style: none; user-select: none;
}
.admin-cat-group summary::-webkit-details-marker { display: none; }
.admin-cat-group summary::before {
  content: ''; width: 8px; height: 8px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
  transform: rotate(-45deg); transition: transform .2s var(--ease-out); flex-shrink: 0;
}
.admin-cat-group[open] summary::before { transform: rotate(45deg); }
.admin-cat-group-title { font-weight: 600; }
.admin-cat-group-count {
  padding: .12em .75em; border-radius: 999px; background: var(--bg-2); color: var(--ink);
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; line-height: 1.4;
}
.admin-cat-group .admin-table-wrap { padding: 0 1.1em 1.1em; }
.admin-detail-row td { background: var(--bg-2); padding: 1rem 1.2rem; }
.admin-detail-grid { display: grid; grid-template-columns: 90px 1fr; gap: 1rem 1.4rem; align-items: start; }
.admin-detail-photo { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); grid-row: 1 / 3; }
.admin-detail-field { margin: 0 0 .4em; font-size: .84rem; }
.admin-detail-field span { display: inline-block; min-width: 120px; color: var(--ink-mute); }
.admin-detail-desc { grid-column: 2; font-size: .84rem; color: var(--ink-mute); line-height: 1.6; }
.badge-inactive { color: var(--ink-dim); border: 1px solid var(--line-strong); border-radius: 999px; padding: .1em .6em; font-size: .72rem; text-transform: uppercase; }
.badge-verified { display: inline-block; margin-left: .4em; color: #22b45a; font-weight: 700; }
.badge-unverified {
  display: inline-block; margin-left: .4em; padding: .1em .5em; border-radius: 999px;
  font-size: .68rem; text-transform: uppercase; color: #e2b21a; border: 1px solid #e2b21a;
}

.admin-crm-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-top: 1.6rem; }
@media (max-width: 900px) { .admin-crm-grid { grid-template-columns: 1fr; } }
.admin-crm-col h2 { font-size: 1rem; margin: 1.4rem 0 .7rem; }
.admin-crm-col h2:first-child { margin-top: 0; }
.admin-crm-list { display: flex; flex-direction: column; gap: .5rem; }
.admin-crm-list li { display: flex; align-items: center; gap: .7rem; font-size: .86rem; }
.admin-crm-list img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.admin-crm-notes { display: flex; flex-direction: column; gap: .8rem; }
.admin-crm-notes li { padding: .7em .9em; border-radius: var(--radius-sm); background: var(--bg-1); border: 1px solid var(--line); }
.admin-crm-notes li p { font-size: .86rem; margin-bottom: .4em; }
.admin-crm-notes li span { font-size: .74rem; color: var(--ink-dim); }

.admin-mod-list { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.4rem; }
.admin-mod-item { display: flex; gap: 1.2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.admin-mod-item:last-child { border-bottom: none; }
.admin-mod-media { width: 160px; flex-shrink: 0; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); }
.admin-mod-media img, .admin-mod-media video { width: 100%; height: 100%; object-fit: cover; }
.admin-mod-info { flex: 1; min-width: 0; }
.admin-mod-comments { display: flex; flex-direction: column; gap: .4rem; }
.admin-mod-comments li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-size: .82rem; color: var(--ink-mute); padding: .3em 0; }
.admin-mod-comments form { flex-shrink: 0; }

/* ---- Dashboard admin ---- */
.dash-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem; margin: 1.6rem 0 2rem;
}
.dash-metric {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.1rem;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
a.dash-metric:hover { border-color: var(--accent); transform: translateY(-3px); }
.dash-metric-warn { border-color: rgba(226,35,26,.4); }
.dash-metric-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1; }
.dash-metric-label { font-size: .78rem; color: var(--ink-mute); }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.4rem; }
.dash-card { padding: 1.2rem 1.3rem; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dash-card h2 { font-size: 1rem; margin-bottom: 1rem; }
.dash-bars { display: flex; flex-direction: column; gap: .65rem; }
.dash-bar-row {
  display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: .7rem;
  font-size: .82rem; color: var(--ink-mute);
}
.dash-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { height: 8px; border-radius: 999px; background: var(--bg-gray); overflow: hidden; }
.dash-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0;
  animation: dashBarGrow .8s var(--ease-out) forwards;
  animation-delay: .05s;
}
@keyframes dashBarGrow { to { width: var(--pct, 0%); } }
.dash-bar-count { text-align: right; font-weight: 700; color: var(--ink); }
a.dash-bar-row:hover { color: var(--ink); }

/* ---- Dashboard widgets (stat tiles, heatmap, line chart) ---- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.stat-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.3rem; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.stat-tile-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--ink); line-height: 1; }
.stat-tile-label { font-size: .8rem; color: var(--ink-mute); margin-top: .3rem; }
.stat-tile-viz { flex-shrink: 0; }
.spark-svg { display: block; width: 96px; height: 32px; }
.spark-bars { display: flex; align-items: flex-end; gap: 3px; width: 96px; height: 32px; }
.spark-bars span { flex: 1; display: block; height: var(--h, 10%); min-height: 3px; border-radius: 2px 2px 0 0; background: var(--accent-2); }
.donut { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--color, var(--accent-2)) calc(var(--pct, 0) * 1%), var(--bg-2) 0); flex-shrink: 0; }
.donut-hole { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-1); display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; color: var(--ink); }

.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.dash-card-head h2 { margin: 0; }
.range-tabs { display: flex; gap: .3rem; }
.range-tabs a {
  padding: .3em .8em; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: .74rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .02em;
}
.range-tabs a.is-active { border-color: var(--accent); color: var(--accent); }
.dash-card-wide { grid-column: 1 / -1; }

.rank-list { display: flex; flex-direction: column; gap: .7rem; }
.rank-row { display: grid; grid-template-columns: 20px 1fr 34px; align-items: center; gap: .7rem; font-size: .84rem; }
.rank-pos { color: var(--ink-dim); font-family: var(--font-mono); font-size: .76rem; }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-mute); }
.rank-track { height: 8px; border-radius: 999px; background: var(--bg-gray); overflow: hidden; grid-column: 2 / 3; grid-row: 2; margin-top: -.2rem; }
.rank-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.rank-count { text-align: right; font-weight: 700; color: var(--ink); }
.rank-row { grid-template-rows: auto auto; }

.heatmap-wrap { overflow-x: auto; }
.heatmap-grid { display: grid; gap: 3px; min-width: 480px; }
.heatmap-cats { display: grid; gap: 3px; }
.heatmap-row { display: grid; grid-template-columns: 110px repeat(7, 1fr); gap: 3px; align-items: center; }
.heatmap-row-label { font-size: .78rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .5rem; }
.heatmap-dow { display: grid; grid-template-columns: 110px repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.heatmap-dow span { text-align: center; font-size: .68rem; color: var(--ink-dim); text-transform: uppercase; }
.heatmap-cell { aspect-ratio: 1.6/1; border-radius: 4px; background: var(--bg-2); }
.heatmap-legend { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .72rem; color: var(--ink-dim); }
.heatmap-legend-swatches { display: flex; gap: 2px; }
.heatmap-legend-swatches span { width: 14px; height: 14px; border-radius: 3px; }

.linechart-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.linechart-legend { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--ink-mute); }
.linechart-legend span { display: inline-flex; align-items: center; gap: .4em; }
.linechart-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.linechart-svg { display: block; width: 100%; height: 180px; }
a.dash-bar-row:hover .dash-bar-label { color: var(--accent-2); }

/* =============================================================
   11. Instagram
   ============================================================= */
.ig-profile {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
  padding: 1.3rem clamp(1.2rem, 3vw, 1.8rem);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ig-avatar-ring {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, #4f5bd5, #962fbf, #d62976, #fa7e1e, #feda75, #4f5bd5);
}
.ig-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid var(--bg-1);
  object-fit: contain;
  background: var(--bg);
  padding: .5rem;
}
.ig-profile-info { flex: 1 1 auto; min-width: 10rem; }
.ig-profile-info .kicker { margin-bottom: .3rem; }
.ig-handle {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  transition: color .2s var(--ease-out);
}
.ig-handle:hover { color: var(--accent); }
.ig-stat {
  margin-top: .3rem;
  font-size: .92rem;
  color: var(--ink-mute);
}
.ig-stat strong { color: var(--ink); font-weight: 700; }
.ig-follow-btn { flex-shrink: 0; }

.ig-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
.ig-post {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.ig-post:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.ig-post img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
  transition: transform .5s var(--ease-out), filter .4s var(--ease-out);
}
.ig-post:hover img { transform: scale(1.06); filter: grayscale(0); }
.ig-post-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem;
  background: linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.1) 55%);
}
.ig-post-cap {
  font-size: .84rem;
  color: #fff;
  line-height: 1.35;
}
.ig-post-meta {
  margin-top: .5rem;
  display: flex; align-items: center; gap: .4rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--accent-2);
}
.ig-post-meta .icon { width: .95rem; height: .95rem; }
.ig-note {
  margin-top: 2.2rem;
  text-align: center;
  color: var(--ink-dim);
  font-size: .82rem;
}
@media (max-width: 480px) {
  .ig-profile { justify-content: center; text-align: center; }
  .ig-profile-info { flex-basis: 100%; }
  .ig-follow-btn { flex-basis: 100%; justify-content: center; }
}

/* =============================================================
   12. Contacto / CTA
   ============================================================= */
.contact-layout {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1fr; } }

.contact-map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  transition: box-shadow .3s var(--ease-out);
}
.contact-map:hover { box-shadow: var(--shadow-card); }
.contact-map iframe {
  width: 100%; height: 100%; border: 0;
  filter: invert(90%) hue-rotate(180deg) contrast(.88) brightness(.95) saturate(1.1);
}
.contact-map-tag {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  pointer-events: none;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em .95em;
  border-radius: 999px;
  background: rgba(10,10,10,.8);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.6);
}
.contact-map-tag::before {
  content: "";
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,35,26,.25);
}

.contact-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(.6rem, 1.5vw, 1rem);
  height: 100%;
  display: flex; flex-direction: column;
}
.contact-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem .6rem;
  border-radius: var(--radius-sm);
  transition: background .25s var(--ease-out);
}
.contact-item + .contact-item { margin-top: .1rem; }
.contact-item:hover { background: var(--bg-gray); }
.contact-item-icon {
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(226, 35, 26, .12);
  color: var(--accent);
}
.contact-item-icon .icon { width: 1.25rem; height: 1.25rem; }
.contact-item h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink-mute);
}
.contact-item p, .contact-item a { margin-top: .3rem; font-size: 1rem; }
.contact-item a:hover { color: var(--accent-2); }
@media (max-width: 640px) {
  .contact-item { gap: .75rem; padding: .7rem .4rem; }
  .contact-item-icon { width: 2.2rem; height: 2.2rem; }
  .contact-item-icon .icon { width: 1.05rem; height: 1.05rem; }
  .contact-item h4 { font-size: .72rem; }
  .contact-item p, .contact-item a { margin-top: .2rem; font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
}

.contact-cta {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: var(--bg);
  padding: clamp(2rem, 4.5vw, 3rem);
  border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.6rem;
  box-shadow: 0 24px 50px -20px rgba(226,35,26,.5);
}
.contact-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}
.contact-cta-text { position: relative; z-index: 1; }
.contact-cta-text h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.contact-cta-text p { color: rgba(10,10,10,.78); margin-top: .5rem; max-width: 44ch; }
.contact-cta .btn-ghost { position: relative; z-index: 1; border-color: var(--bg); color: var(--bg); flex-shrink: 0; }
.contact-cta .btn-ghost:hover { background: var(--bg); color: var(--accent); }

/* =============================================================
   13. Footer
   ============================================================= */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-accent);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.6rem;
}
.footer .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid; gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1280px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand img { height: clamp(56px, 7vw, 88px); width: auto; margin-bottom: 1rem; filter: drop-shadow(0 0 10px rgba(226,35,26,.4)); }
.footer-brand p { color: var(--ink-mute); max-width: 32ch; font-size: .9rem; }
.footer-social { display: flex; gap: .8rem; margin-top: 1.3rem; }
.footer-social a {
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { color: var(--ink-mute); font-size: .92rem; transition: color .2s; }
.footer-col a:hover { color: var(--accent-2); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.footer-bottom a { color: var(--ink-dim); }
.footer-bottom a:hover { color: var(--accent-2); }

/* =============================================================
   14. Página catálogo — filtros y cards de producto
   ============================================================= */
.catalog-header {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.catalog-header h1 { font-size: clamp(2.7rem, 7.2vw, 5rem); }
.catalog-header p { margin-top: 1rem; color: var(--ink-mute); max-width: 56ch; }

.product-section { padding-block: clamp(2.5rem, 6vw, 4rem); }
/* Categorias no vehiculo: sin aire de sobra entre titulo, filtros y tarjetas. */
.cat-hero.no-image + .product-section { padding-top: 1rem; }
.cat-hero.no-image + .product-section .shop-layout { gap: .8rem 1.6rem; }
.cat-hero.no-image + .product-section .shop-brand-filter { margin-bottom: .4rem; }
.cat-hero.no-image + .product-section .shop-brand-filter-label { margin-bottom: .5rem; }
.cat-hero.no-image + .product-section .catalog-toolbar { margin-bottom: 1rem; padding-bottom: .8rem; }

/* ---- Banner de categoría: vitrina de marcas (categoria-aros.html hero) ---- */
.aros-banner {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem;
  padding: clamp(4.5rem, 9vw, 6rem) clamp(1.2rem, 4vw, 2.5rem) clamp(8rem, 14vw, 10rem);
  background: radial-gradient(130% 150% at 50% 0%, #26262a 0%, #131315 48%, var(--bg) 100%);
}
.aros-banner::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(180deg, rgba(226, 35, 26, 0) 0%, rgba(226, 35, 26, .35) 55%, rgba(226, 35, 26, .75) 100%);
  pointer-events: none;
}
.aros-banner-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 6px;
  background: var(--accent);
}
.aros-banner-grid {
  position: relative;
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.6rem);
  justify-items: center;
}
.aros-banner-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; }
.aros-banner-circle {
  display: block;
  width: 100%; max-width: 92px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6);
  transition: transform .2s var(--ease-out);
}
.aros-banner-item:hover .aros-banner-circle { transform: translateY(-3px); }
.cat-hero-bg.aros-banner .aros-banner-circle img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.aros-banner-item-brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.aros-banner-item-model {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(.72rem, 1vw, .82rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.cat-hero-bg.aros-banner img.aros-banner-logo {
  position: relative;
  width: min(60vw, 260px); min-height: 0; height: auto;
  object-fit: contain;
  background: transparent;
  display: block;
}
@media (max-width: 560px) {
  .aros-banner-grid { grid-template-columns: repeat(3, 1fr); }
  .aros-banner-circle { max-width: 72px; }
}

/* ---- Toolbar de filtros / orden (hub y páginas de categoría) ---- */
.catalog-toolbar, .hub-toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.catalog-count {
  color: var(--ink-mute);
  font-size: .92rem;
}
.catalog-count strong { color: var(--ink); font-weight: 600; }

.filter-chips { display: flex; flex-wrap: wrap; gap: .9rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.filter-chip:hover { border-color: var(--accent); color: var(--ink); }
.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.filter-chip .count { opacity: .7; font-size: .85em; }

.catalog-sort {
  display: inline-flex; align-items: center; gap: .6em;
}
.catalog-sort label {
  font-size: .82rem;
  color: var(--ink-mute);
}
.catalog-sort select {
  appearance: none;
  padding: .55em 2.2em .55em 1em;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a8a8a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') right .8em center / 1em no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .86rem;
  cursor: pointer;
  transition: border-color .2s var(--ease-out);
}
.catalog-sort select:hover, .catalog-sort select:focus-visible { border-color: var(--accent); }

.catalog-toolbar-right { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.shop-filter-toggle {
  display: none;
  align-items: center; gap: .5em;
  padding: .65em 1.3em;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s var(--ease-out);
}
.shop-filter-toggle:hover { background: var(--accent-2); }
.shop-filter-toggle .icon { width: 1rem; height: 1rem; }
@media (max-width: 899px) {
  .shop-filter-toggle { display: inline-flex; }
  .shop-sidebar { display: none; }
  .shop-sidebar.is-open { display: block; }
}

.unit-card.is-hidden, .cat-tile.is-hidden { display: none; }

/* ---- Filtro por marca (tarjetas con logo) ---- */
/* .shop-brand-* = misma UI visual, usada en páginas con shop-sidebar (ver categoria-goma.html);
   clases distintas a propósito para que initCatalogFilters() (selector global .brand-chip) no las gestione
   y así no compita con initShopFilters(), que es quien realmente filtra ahí. */
.brand-filter, .shop-brand-filter { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.shop-layout > .shop-brand-filter { grid-column: 1 / -1; }
.brand-filter-label, .shop-brand-filter-label {
  font-size: .82rem;
  color: var(--ink-mute);
  margin-bottom: .8rem;
}
.brand-chips, .shop-brand-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  grid-auto-rows: 4.4rem; /* todas las tarjetas de marca, mismo tamaño */
}
@media (min-width: 620px) { .brand-chips, .shop-brand-chips { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px) { .brand-chips, .shop-brand-chips { grid-template-columns: repeat(7, 1fr); } }

.brand-chip, .shop-brand-chip {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-width: 0; box-sizing: border-box; overflow: hidden;
  padding: .6rem; text-align: center;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.brand-chip img, .shop-brand-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-chip:hover, .shop-brand-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.brand-chip.is-active, .shop-brand-chip.is-active { border-color: var(--accent); box-shadow: 0 8px 20px -8px rgba(226,35,26,.5); }

.brand-chip.brand-chip-all, .shop-brand-chip.shop-brand-chip-all {
  background: var(--bg-1);
  border-color: var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
}
.brand-chip.brand-chip-all:hover, .shop-brand-chip.shop-brand-chip-all:hover { color: var(--ink); }
.brand-chip.brand-chip-all.is-active, .shop-brand-chip.shop-brand-chip-all.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.brand-chip.brand-chip-text, .shop-brand-chip.shop-brand-chip-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.8rem, 3.4vw, 1.05rem);
  line-height: 1.1;
  letter-spacing: .02em;
  padding: .3rem .4rem;
  color: #111;
}

.empty-filter-state {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  color: var(--ink-mute);
}
.empty-filter-state p { margin-bottom: 1.2rem; }

/* ---- Tienda con sidebar de filtros (accesorios / piezas / gomas) ---- */
.shop-layout {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: start;
}
@media (min-width: 900px) { .shop-layout { grid-template-columns: 250px 1fr; } }

.shop-sidebar {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
@media (min-width: 900px) {
  .shop-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 1.2rem);
    will-change: transform;
    max-height: calc(100vh - var(--nav-h) - 2.4rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}
.shop-sidebar::-webkit-scrollbar { width: 6px; }
.shop-sidebar::-webkit-scrollbar-track { background: transparent; margin-block: .4rem; }
.shop-sidebar::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  transition: background .2s var(--ease-out);
}
.shop-sidebar:hover::-webkit-scrollbar-thumb { background: var(--ink-dim); }
.shop-sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.shop-filter-group + .shop-filter-group {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.shop-filter-title {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}
.shop-checkbox {
  display: flex; align-items: center; gap: .7rem;
  padding-block: .38rem;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ink-mute);
  transition: color .2s var(--ease-out);
}
.shop-checkbox:hover { color: var(--ink); }
.shop-checkbox input {
  appearance: none; -webkit-appearance: none;
  width: 1.05rem; height: 1.05rem;
  flex-shrink: 0;
  display: inline-flex;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.shop-checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.shop-checkbox input:checked::after {
  content: "";
  position: absolute; left: 50%; top: 47%;
  width: 4px; height: 8px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.shop-checkbox .count { margin-left: auto; color: var(--ink-dim); font-size: .78rem; font-family: var(--font-mono); }
.shop-checkbox.is-disabled { opacity: .4; pointer-events: none; }
.shop-clear {
  margin-top: 1.4rem;
  font-size: .82rem;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none; border: 0; padding: 0;
  display: none;
}
.shop-clear.is-visible { display: inline-block; }

/* ---- Selector "Elige tu UTV" ---- */
.utv-picker {
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.utv-picker-row {
  display: flex; flex-direction: column;
  gap: .6rem;
}
.utv-picker-row select {
  appearance: none;
  width: 100%;
  padding: .65em 2.2em .65em 1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a8a8a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') right .8em center / 1em no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .2s var(--ease-out);
}
.utv-picker-row select:disabled { opacity: .45; cursor: not-allowed; }
.utv-picker-row select:hover:not(:disabled), .utv-picker-row select:focus-visible { border-color: var(--accent); }
.utv-picker-active {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--ink-mute);
  line-height: 1.5;
}
.utv-picker-active strong { color: var(--ink); }
.utv-picker-active button {
  background: none; border: 0; padding: 0;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: inherit;
}

.shop-main { min-width: 0; }

.cat-tile-count {
  position: absolute; top: 1rem; right: 1rem;
  padding: .3em .75em;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.cat-tile-count.has-stock { background: rgba(226, 35, 26, .14); color: var(--accent); }
.cat-tile-count.no-stock { background: var(--bg-gray); color: var(--ink-dim); }

/* =============================================================
   16. Reveal on scroll
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* =============================================================
   17. Micro-glow (funcional, no se apaga con reduced-motion)
   ============================================================= */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(226,35,26,.35)); }
  50%      { filter: drop-shadow(0 0 16px rgba(226,35,26,.65)); }
}
.glow-pulse { animation: glowPulse 3.6s ease-in-out infinite; }


/* Logout is a CSRF-protected form action, styled as an account link. */
.logout-link { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }

/* Ficha de producto en móvil: compacta. Va AL FINAL para ganarle a las reglas base. */
@media (max-width: 899px) {
  .product-page-section { padding-top: 4rem; padding-bottom: 1.5rem; }
  .product-page-section .product-title-top, .product-page-section .product-info h1 { font-size: clamp(1.25rem, 5.6vw, 1.7rem); line-height: 1.08; margin: 0 0 .5rem; letter-spacing: .01em; }
  .product-page-section .product-detail { gap: .6rem; margin-top: 0; }
  .product-page-section .product-gallery-main { aspect-ratio: 16 / 10; max-height: 34svh; }
  .product-page-section .product-info { gap: 0; }
  .product-page-section .product-info .kicker { margin: .2rem 0 0; font-size: .68rem; }
  .product-page-section .product-price { margin: .1rem 0 0; font-size: 1.45rem; line-height: 1.1; }
  .product-page-section .product-desc { margin-top: .45rem; font-size: .9rem; line-height: 1.4; }
  .product-page-section .product-specs { margin-top: .7rem; }
  .product-page-section .product-specs > div { padding-block: .45rem; }
  .product-page-section .product-actions { margin-top: .8rem; }
}

/* Cabecera de vehículo: marca como kicker, modelo grande, precio en bloque aparte. */
.vehicle-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; margin: 0 0 1.6rem; padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.vehicle-brand {
  margin: 0 0 .5rem;
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  color: var(--accent-2); font-size: .85rem; letter-spacing: .22em;
}
.vehicle-model {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: #fff; font-size: clamp(1.9rem, 5.2vw, 3.6rem); line-height: 1; letter-spacing: .01em;
}
.vehicle-price {
  margin: 0; display: flex; flex-direction: column; gap: .3rem; padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
}
.vehicle-price small { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.vehicle-price > span { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1; }
.vehicle-price b { color: var(--accent-2); font-size: .55em; letter-spacing: .08em; margin-right: .2em; vertical-align: .18em; }
/* Foto de vehículo: llena el marco (sin bordes ni franjas). Las fotos suelen ser
   verticales, asi que el marco es casi cuadrado (1:1 en escritorio, 4:5 en movil)
   y la foto se recorta un poco por arriba/abajo en vez de dejar barras. */
.product-gallery-main.is-vehicle, .product-page-section .product-gallery-main.is-vehicle { background: #0d0d0d; aspect-ratio: 1 / 1; width: 100%; }
.product-gallery-main.is-vehicle img { object-fit: cover; object-position: center 60%; }
@media (max-width: 899px) {
  .product-page-section .product-gallery-main.is-vehicle { aspect-ratio: 4 / 5; max-height: 62svh; }
}
.vehicle-head > * { min-width: 0; }
@media (min-width: 900px) {
  /* Ficha de vehículo en una sola pantalla (escritorio): foto a toda la altura
     disponible a la izquierda; título, precio, datos y botones a la derecha. */
  .product-page-section:has(.is-vehicle-detail) { padding-top: 5.6rem; padding-bottom: 1rem; }
  .product-detail.is-vehicle-detail {
    grid-template-columns: minmax(0, .66fr) minmax(0, 1fr);
    grid-template-areas: "gallery head" "gallery info";
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 0; margin-top: 0; align-items: start;
  }
  .is-vehicle-detail .product-gallery { grid-area: gallery; }
  .is-vehicle-detail .vehicle-head { grid-area: head; margin: 0 0 .9rem; padding-bottom: 1rem; }
  .is-vehicle-detail .product-info { grid-area: info; }
  .is-vehicle-detail .vehicle-model { font-size: clamp(1.8rem, 3.2vw, 3rem); }
  .is-vehicle-detail .vehicle-price > span { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
  .is-vehicle-detail .product-gallery-main.is-vehicle { aspect-ratio: auto; height: calc(100svh - 7.2rem); min-height: 380px; max-height: 820px; }
  .is-vehicle-detail .product-gallery:has(.product-gallery-thumbs:not([hidden])) .product-gallery-main.is-vehicle { height: calc(100svh - 11.4rem); }
  .is-vehicle-detail .product-gallery-thumbs { margin-top: .6rem; flex-wrap: nowrap; overflow-x: auto; }
  .is-vehicle-detail .product-desc { margin-top: 0; font-size: 1rem; line-height: 1.5; }
  .is-vehicle-detail .product-specs { margin-top: .8rem; }
  .is-vehicle-detail .product-specs > div { padding-block: .6rem; }
  .is-vehicle-detail .product-actions { margin-top: 1rem; gap: .7rem; }
  .is-vehicle-detail .product-actions .btn { padding: .75em 1.2em; white-space: nowrap; }
}

@media (max-width: 899px) { .product-page-section .vehicle-head { margin-bottom: .9rem; padding-bottom: .8rem; } }

/* Laptops (1100–1339px): el menú de categorías se muestra completo, compactado:
   letra y espacios más chicos y sin el botón "Catálogo" (ya está en el menú). */
@media (min-width: 1100px) and (max-width: 1339px) {
  .nav-inner { gap: .8rem; }
  .nav-links { gap: .7rem; font-size: .8rem; letter-spacing: .02em; white-space: nowrap; }
  .nav-actions .btn-primary { display: none; }
  .nav-actions .btn { padding: .42em .7em; }
}

/* Solo los teléfonos (<768px) usan la hamburguesa; de ahí hacia arriba SIEMPRE
   el menú de escritorio. Entre 768 y 1099px no cabe en una sola fila, así que
   el header pasa a dos filas: logo + acciones arriba, categorías debajo. */
@media (min-width: 768px) and (max-width: 1099px) {
  :root { --nav-h: 96px; }
  .nav-inner { flex-wrap: wrap; align-content: center; gap: 0 .8rem; }
  .nav-brand { order: 1; height: 50px; }
  .nav-actions { order: 2; height: 50px; }
  .nav-actions .btn-primary { display: none; }
  .nav-links { order: 3; flex: 0 0 100%; align-self: auto; justify-content: center; gap: clamp(.55rem, 1.5vw, 1.1rem); height: 40px; font-size: .85rem; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* Movil: nada de la ficha puede ser mas ancho que la pantalla. */
.product-detail > *, .product-info, .product-gallery, .product-specs > div { min-width: 0; }
.product-specs dd { min-width: 0; overflow-wrap: anywhere; }
.product-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 899px) {
  .product-actions { flex-direction: column; align-items: stretch; gap: .7rem; }
  .product-actions .btn { width: 100%; justify-content: center; }
}

/* Marca como logo (el mismo de las paginas de marca); el modelo va arriba en rojo. */
.vehicle-logo { display: block; width: auto; height: auto; max-width: min(100%, 22rem); max-height: clamp(2rem, 4.4vw, 3.4rem); object-fit: contain; object-position: left center; }
.vehicle-brand { font-size: clamp(.8rem, 1.1vw, 1rem); margin-bottom: .7rem; }
.vehicle-brand { margin: .7rem 0 0; }
/* Segway y Yamaha traen un margen transparente a la izquierda: se compensa para que el logo quede pegado al borde, alineado con el modelo. */
.vehicle-titles, .vehicle-head { text-align: left; }

/* Precio de vehículo: sencillo, alineado a la izquierda bajo el modelo. */
.vehicle-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
.vehicle-price { margin: 1rem 0 0; padding-left: 0; border-left: 0; flex-direction: row; align-items: baseline; gap: .5rem; }
.vehicle-price small { display: none; }
.vehicle-price > span { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 600; letter-spacing: .01em; color: #fff; }
.vehicle-price b { font-size: .55em; font-weight: 700; letter-spacing: .12em; color: var(--ink-mute); margin-right: .35em; vertical-align: .25em; }

/* Precio de vehículo: barra bajo la foto, ancho completo de la imagen. */
.vehicle-price {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .8rem 0 0; padding: .85rem 1.2rem;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.vehicle-price small { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.vehicle-price > span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1; color: #fff; letter-spacing: .01em; }
.vehicle-price b { font-size: .55em; font-weight: 700; letter-spacing: .1em; color: var(--accent-2); margin-right: .3em; vertical-align: .22em; }
@media (min-width: 900px) {
  .is-vehicle-detail .product-gallery.has-price .product-gallery-main.is-vehicle { height: calc(100svh - 12.6rem); }
  .is-vehicle-detail .product-gallery.has-price:has(.product-gallery-thumbs:not([hidden])) .product-gallery-main.is-vehicle { height: calc(100svh - 16.8rem); }
}

/* Precio de vehículo (final): bajo el modelo, a la izquierda, "US$" rojo + cifra grande. */
.vehicle-price { display: flex; align-items: baseline; justify-content: flex-start; gap: .5rem; margin: .8rem 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
.vehicle-price b { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--accent-2); margin: 0; vertical-align: baseline; }
.vehicle-price > span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1; color: #fff; letter-spacing: .01em; }
@media (min-width: 900px) {
  .is-vehicle-detail .product-gallery .product-gallery-main.is-vehicle { height: calc(100svh - 7.2rem); }
  .is-vehicle-detail .product-gallery:has(.product-gallery-thumbs:not([hidden])) .product-gallery-main.is-vehicle { height: calc(100svh - 11.4rem); }
}

/* Móvil: párrafo de marca más pequeño para que no ocupe media pantalla. */
@media (max-width: 640px) {
  .brand-hero-summary { font-size: .85rem; line-height: 1.5; text-align: left; hyphens: manual; }
  .brand-summary-logo { max-width: 11rem; max-height: 3.4rem; }
  .brand-summary-brandrow { margin-bottom: .5rem; }
}
.cat-hero--fade { margin-top: var(--nav-h); }

/* Texto descriptivo de marca: siempre justificado (también en móvil). */
.brand-hero-summary { text-align: justify; text-justify: inter-word; }
@media (max-width: 640px) { .brand-hero-summary { text-align: justify; hyphens: auto; } }

/* Banner de Accesorios en móvil: el vehículo ocupa casi todo el ancho de la foto, así que se
   encuadra con una proporción más ancha (7:4) y el recorte cae sobre la rueda trasera: se ven
   la barra de luces, la parte delantera y los faros. */
@media (max-width: 700px) { .cat-hero--fade .cat-hero-bg img { aspect-ratio: 7 / 4; object-position: 62% top; } }

/* ---- Panel admin en móvil ----
   La barra lateral de 64px le quitaba ancho a todo el contenido y las rejillas tenían un
   mínimo fijo (340px / 240px) mayor que el espacio sobrante, así que todo se cortaba.
   Ahora las rejillas se ajustan al ancho disponible y, en teléfono, el menú pasa a una barra
   fija abajo (iconos en fila) para que el contenido use todo el ancho. */
.dash-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.stat-tiles { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.dash-grid > *, .stat-tiles > *, .admin-panel, .dash-card { min-width: 0; }
.dash-card { overflow: hidden; }
@media (max-width: 640px) {
  :root { --admin-sidebar-w: 0px; --admin-topbar-h: 52px; }
  body.admin-body main#main { margin-left: 0; padding-bottom: 4.6rem; }
  .admin-topbar { left: 0; padding: 0 1rem; }
  .admin-topbar-search, .admin-topbar-greeting { display: none; }
  .admin-sidebar {
    inset: auto 0 0 0; width: 100%; height: auto; flex-direction: row; align-items: center;
    padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom)); gap: 0;
    border-right: 0; border-top: 1px solid var(--line); overflow: visible;
  }
  .admin-sidebar-brand, .admin-sidebar-exit, .admin-sidebar-group { display: none; }
  .admin-sidebar-nav { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  .admin-sidebar-nav a { flex: 1; min-width: 0; flex-direction: column; gap: .15rem; padding: .45rem .1rem; font-size: .6rem; text-align: center; }
  .admin-sidebar-nav a span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  body.admin-body .section { padding-block: 1rem 2rem; }
  body.admin-body .container { padding-inline: .9rem; }
  body.admin-body h1 { font-size: 1.7rem; }
  .stat-tile { padding: 1rem; }
  .stat-tile-num { font-size: 1.8rem; }
  .spark-svg, .spark-bars { width: 72px; }
  .dash-card { padding: 1rem; }
  .dash-bar-row { grid-template-columns: 90px 1fr 30px; gap: .5rem; }
  .dash-card-head { gap: .6rem; }
  .range-tabs { flex-wrap: wrap; }
  .admin-actions-row { gap: .6rem; }
  .admin-filter-bar label { min-width: 0; flex: 1 1 140px; }
  .admin-table th, .admin-table td { padding: .5em .45em; font-size: .8rem; }
  .admin-detail-grid { grid-template-columns: 1fr; }
  .admin-detail-desc { grid-column: 1; }
  .admin-detail-photo { grid-row: auto; }
  .admin-detail-field span { min-width: 0; display: block; }
  .admin-mod-item { flex-direction: column; }
  .admin-mod-media { width: 100%; max-width: 260px; }
}
@media (max-width: 640px) {
  .admin-sidebar-nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .admin-sidebar-nav::-webkit-scrollbar { display: none; }
  .admin-sidebar-nav a { flex: 1 0 58px; }
}

/* Listado de productos en móvil: cada fila pasa a ser una tarjeta (foto + nombre + marca/tipo,
   y los botones en una fila debajo) en vez de una tabla de 5 columnas apretadas. */
@media (max-width: 640px) {
  .admin-cat-group .admin-table-wrap { padding: 0 .7rem .7rem; overflow-x: visible; }
  .admin-table--cards, .admin-table--cards tbody { display: block; width: 100%; }
  .admin-table--cards thead { display: none; }
  .admin-table--cards tr:not(.admin-detail-row) {
    display: grid; grid-template-columns: 56px auto 1fr; grid-template-areas: "ph nm nm" "ph br tp" "ac ac ac";
    column-gap: .8rem; row-gap: .25rem; align-items: center;
    padding: .8rem 0; border-bottom: 1px solid var(--line);
  }
  .admin-table--cards tr:not(.admin-detail-row) > td { display: block; padding: 0; border: 0; min-width: 0; }
  .admin-table--cards tr:not(.admin-detail-row) > td:nth-child(1) { grid-area: ph; align-self: start; }
  .admin-table--cards tr:not(.admin-detail-row) > td:nth-child(1) img { width: 56px; height: 56px; }
  .admin-table--cards tr:not(.admin-detail-row) > td:nth-child(2) { grid-area: nm; font-size: .92rem; font-weight: 600; line-height: 1.25; }
  .admin-table--cards tr:not(.admin-detail-row) > td:nth-child(3) { grid-area: br; font-size: .76rem; color: var(--ink-mute); }
  .admin-table--cards tr:not(.admin-detail-row) > td:nth-child(4) { grid-area: tp; font-size: .76rem; color: var(--ink-dim); text-transform: capitalize; }
  .admin-table--cards .admin-row-actions { grid-area: ac; display: flex !important; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; white-space: normal !important; }
  .admin-table--cards .admin-row-actions form { display: block !important; }
  .admin-table--cards .admin-row-actions .btn { padding: .45em .8em !important; font-size: .74rem !important; }
  .admin-table--cards tr.admin-detail-row:not([hidden]), .admin-table--cards tr.admin-detail-row:not([hidden]) td { display: block; width: 100%; }
}

/* Móvil: el saludo se muestra en la barra de arriba (antes quedaba un espacio vacío). */
@media (max-width: 640px) {
  .admin-topbar-greeting { display: block; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
}

/* Tarjetas de vehículo: logo de la marca en negro (mismo logo de la ficha) y el modelo en la línea pequeña. */
.unit-info h3.unit-name-logo { display: block; -webkit-line-clamp: unset; overflow: visible; line-height: 1; }
.unit-name-logo img { display: block; width: auto; height: auto; max-width: 70%; max-height: 1.55rem; object-fit: contain; object-position: left center; filter: brightness(0); }
.unit-name-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.unit-card:has(.unit-name-logo) .unit-brand { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: .25rem; }
/* Logos anchos y bajos (wordmarks): más pequeños en las tarjetas; el resto conserva su tamaño. */
.unit-card[data-marca="cfmoto"] .unit-name-logo img,
.unit-card[data-marca="can-am"] .unit-name-logo img,
.unit-card[data-marca="honda"] .unit-name-logo img,
.unit-card[data-marca="polaris"] .unit-name-logo img { max-height: 1.05rem; max-width: 52%; }

/* Tarjetas de vehículo: corazón de favoritos un poco más grande. */
.unit-card:not(.unit-card-part) .unit-fav { width: 2.15rem; height: 2.15rem; top: .5rem; left: .5rem; }
.unit-card:not(.unit-card-part) .unit-fav .icon { width: 1.1rem; height: 1.1rem; }

/* Vehículos: mismo banner que Accesorios (bajo el menú, proporción original, mismo tipo de título)
   pero con el título DEBAJO de la foto: los vehículos van en la parte baja de la imagen y el
   título encima los taparía. */
.cat-hero--below .cat-hero-inner { position: relative; padding-block: .3rem .6rem; }
.cat-hero--below .cat-hero-bg::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,.55) 14%, rgba(10,10,10,0) 38%); }
@media (max-width: 700px) { .cat-hero--below .cat-hero-bg img { aspect-ratio: 16 / 9; object-position: 60% top; } }

/* Tarjetas de vehículo: cuadradas y con la foto llenando toda la tarjeta (sin bordes). El encuadre
   se centra, que es donde queda el vehículo en las fotos del taller. */
.unit-card:not(.unit-card-part) .unit-photo { aspect-ratio: 1 / 1; }
.unit-card:not(.unit-card-part) .unit-photo img { object-fit: cover; object-position: center 52%; }

/* Carrusel de la ficha y del lightbox: la MISMA tira con scroll-snap que usan las tarjetas (.unit-slides). */
.product-slides, .lightbox-slides {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.product-slides::-webkit-scrollbar, .lightbox-slides::-webkit-scrollbar { display: none; }
.product-slides img { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.lightbox-slides { position: absolute; inset: 0; }
.lightbox-slides.is-zoomed { overflow-x: hidden; scroll-snap-type: none; touch-action: none; }
.lightbox-slide {
  flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
}

/* Ficha de producto (accesorios, repuestos, aros...; no vehículos): foto cuadrada y centrada en móvil. */
@media (max-width: 899px) {
  .product-page-section .product-gallery-main:not(.is-vehicle) { aspect-ratio: 1 / 1; max-height: none; width: 100%; margin-inline: auto; }
  .product-page-section .product-gallery-main:not(.is-vehicle) img { object-fit: contain; }
}

/* Inicio: "Nuestro catálogo" en una sola línea y sin tanto espacio vacío alrededor */
#catalogo .section-title { white-space: nowrap; font-size: clamp(1.9rem, 8.4vw, 4.8rem); margin-top: 0; }
@media (max-width: 640px) {
  #catalogo { padding-top: 1.6rem; }
  #catalogo .section-head { margin-bottom: 1rem; }
}

/* ---- Filtros en movil: boton flotante + hoja inferior; marcas en una fila deslizable ---- */
.shop-sidebar-head, .shop-sidebar-apply, .shop-sidebar-backdrop { display: none; }
@media (max-width: 899px) {
  .shop-brand-chips { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: .3rem; margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px); }
  .shop-brand-chips::-webkit-scrollbar { display: none; }
  .shop-brand-chip { flex: 0 0 6.2rem; height: 3.6rem; scroll-snap-align: start; }
  .shop-brand-chip.shop-brand-chip-all { flex-basis: 4.6rem; }

  .shop-filter-toggle {
    position: fixed; left: 14px; bottom: 18px; z-index: 60;
    padding: .85em 1.4em; font-size: .9rem;
    box-shadow: 0 10px 26px -6px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.12);
  }
  body.filters-open .shop-filter-toggle { display: none; }

  .shop-sidebar.is-open {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding: 0 1.2rem 5.2rem;
    box-shadow: 0 -20px 50px rgba(0,0,0,.6);
  }
  .shop-sidebar.is-open .shop-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2; background: var(--bg-1);
    padding: 1rem 0 .8rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase;
  }
  .shop-sidebar-close { background: none; border: 0; color: var(--ink); font-size: 2rem; line-height: 1; padding: 0 .3rem; cursor: pointer; }
  .shop-sidebar.is-open .shop-sidebar-apply {
    display: flex; justify-content: center;
    position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1rem; z-index: 3; width: auto;
  }
  body.filters-open .shop-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); }
  body.filters-open { overflow: hidden; }
}
@media (max-width: 899px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-layout > *, .shop-brand-filter, .shop-main { min-width: 0; }
}
@media (max-width: 899px) { .shop-brand-chips { scroll-padding-inline: var(--gutter, 16px); } }

/* ---- Hero: fondos intercambiables ---- */
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity .9s var(--ease-out); pointer-events: none; }
.hero-slide.is-active { opacity: 1; }
.hero-slide video { width: 100%; height: 100%; object-fit: cover; object-position: center 4%; display: block; }
.hero-fg { display: none; }

/* Fallback (navegadores sin container query units): foto a pantalla completa, sin la
   capa frontal, como antes. */
.hero-slide .hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 62% 0%; display: block; }

/* ---- Hero: los UTVs pasan POR ENCIMA del logo ----
   Capas (de atras hacia adelante): foto (.hero-bg) < logo y boton (.hero-inner) <
   recorte del UTV (.hero-fg). El recorte es la misma foto enmascarada con la silueta
   del vehiculo, y usa exactamente la misma geometria que la foto de fondo, asi
   coinciden pixel a pixel.
   Geometria (cq = tamano de la caja de la foto, que arranca bajo la barra):
     --W,--H  tamano de la foto: cubre la caja (cover), pero nunca mas ancha de lo que
              deja ver el UTV completo (--vw = ancho del UTV como fraccion de la foto).
     --L      desplazamiento horizontal: centra el UTV (--cx) sin salirse de la caja.
     --T      desplazamiento vertical: lleva la base de las llantas (--b) a una linea
              situada --ov dentro del logo, en cualquier pantalla. Si en
              pantallas angostas sobra espacio arriba o abajo, lo rellena el fondo
              desenfocado. */
@supports (width: 1cqw) {
  .hero-bg, .hero-fg { container-type: size; }
  .hero-fg {
    display: block;
    position: absolute; inset: var(--nav-h) 0 0 0; z-index: 2;
    overflow: hidden; pointer-events: none;
  }
  .hero-fgslides, .hero-fgslide { position: absolute; inset: 0; }
  .hero-fgslide { opacity: 0; transition: opacity .9s var(--ease-out); }
  .hero-fgslide.is-active { opacity: 1; }

  /* --ov = fraccion del alto del logo que cubren las llantas (0 = apenas lo tocan,
     negativo = el UTV queda por encima del logo, sin tocarlo). Escritorio: */
  .hs-z10  { --top: .13; --ov: -.05; --ar: 1.4991; --b: .542; --cx: .611; --vw: .431; --cut: url("assets/img/hero-z10-cut.webp"); }
  .hs-utv1 { --top: .355; --ov: -.2;  --ar: 1.4993; --b: .618; --cx: .607; --vw: .430; --cut: url("assets/img/hero-utv-1-cut.webp"); }
  .hs-utv2 { --top: .448; --ov: .3;   --ar: 1.4993; --b: .737; --cx: .520; --vw: .697; --cut: url("assets/img/hero-utv-2-cut.webp"); }
  .hs-xrs  { --top: .333; --ov: .3;   --ar: 1.7769; --b: .717; --cx: .636; --vw: .406; --cut: url("assets/img/hero-xrs-cut.webp"); }
  .hs-z10, .hs-utv1, .hs-utv2, .hs-xrs {
    /* Linea (dentro de la caja) donde debe quedar la base de las llantas. */
    --tgt: calc(100cqh - var(--hero-zone) - var(--hero-logo-h) * (1 - var(--ov)) - var(--lift));
    /* Alto minimo de foto para que, con la llanta en esa linea, no queden huecos arriba ni abajo. */
    --Hneed: max(calc(var(--tgt) / var(--b)), calc((100cqh - var(--tgt)) / (1 - var(--b))));
    --W: min(max(100cqw, calc(100cqh * var(--ar)), calc(var(--Hneed) * var(--ar))), calc(100cqw * .96 / var(--vw)));
    --H: calc(var(--W) / var(--ar));
    --L: clamp(calc(100cqw - var(--W)), calc(50cqw - var(--cx) * var(--W)), 0px);
    --T: calc(var(--tgt) - var(--b) * var(--H));
  }
  .hero-slide .hero-photo, .hero-fgslide .hero-photo {
    position: absolute; left: var(--L); top: var(--T);
    width: var(--W); height: var(--H); max-width: none;
    object-fit: fill; object-position: 0 0; display: block;
  }
  /* En pantallas angostas la foto se reduce para que el UTV quepa completo y queda un
     hueco arriba: se rellena con la misma foto desenfocada, y el borde superior de la
     foto nitida se funde con ese relleno. */
  .hs-z10  { --photo: url("assets/img/hero-z10-m.webp"); }
  .hs-utv1 { --photo: url("assets/img/hero-utv-1-m.webp"); }
  .hs-utv2 { --photo: url("assets/img/hero-utv-2-m.webp"); }
  .hs-xrs  { --photo: url("assets/img/hero-xrs-m.webp"); }
  .hero-slide.hs-z10::before, .hero-slide.hs-utv1::before, .hero-slide.hs-utv2::before, .hero-slide.hs-xrs::before {
    content: ""; position: absolute; inset: -6%;
    /* Solo la esquina superior izquierda ampliada (cielo y nubes, sin vehiculos). */
    background: var(--photo) 0% 0% / 260% auto no-repeat;
    filter: blur(26px) brightness(.85) saturate(1.1);
  }
  .hero-slide .hero-photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 min(12cqh, calc(var(--H) * .08)), #000 calc(100% - min(12cqh, calc(var(--H) * .08))), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 min(12cqh, calc(var(--H) * .08)), #000 calc(100% - min(12cqh, calc(var(--H) * .08))), transparent 100%);
  }
  .hero-fgslide.hs-z10, .hero-fgslide.hs-utv1, .hero-fgslide.hs-utv2, .hero-fgslide.hs-xrs {
    -webkit-mask-image: var(--cut);          mask-image: var(--cut);
    -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
    -webkit-mask-size: var(--W) var(--H);    mask-size: var(--W) var(--H);
    -webkit-mask-position: var(--L) var(--T); mask-position: var(--L) var(--T);
  }
  /* Mismo oscurecimiento que .hero-bg::after, para que el recorte no se vea mas claro. */
  .hero-fgslide.hs-z10::after, .hero-fgslide.hs-utv1::after, .hero-fgslide.hs-utv2::after, .hero-fgslide.hs-xrs::after {
    content: ""; position: absolute; inset: 0;
    background: var(--hero-shade);
  }

  /* Laptop y escritorio (> 700px). El telefono no se toca.
     - El logo y el boton bajan un poco (--hero-pad-b menor); las fotos 1 y 3 bajan con
       el logo, la foto 4 se queda donde estaba (--lift compensa la bajada).
     - La foto nunca baja tanto como para cortar el UTV: su punto mas alto (--top: el techo
       de la jaula; en la foto 1 se sacrifica la bandera, que sobresale por encima) queda
       siempre a 16px o mas del borde superior de la caja. */
  @media (min-width: 701px) {
    .hs-z10, .hs-utv1, .hs-utv2, .hs-xrs {
      --T: max(calc(var(--tgt) - var(--b) * var(--H)), calc(16px - var(--top) * var(--H)));
    }
    .hs-utv2 { --lift: var(--hero-drop); }
  }

  /* Telefono (<= 700px). La foto llena TODO el hero con la foto real, sin relleno borroso:
     el hero mide ~1.5x el ancho de la pantalla (la proporcion de las fotos), asi los UTVs
     entran casi completos sin reducir la foto. El degradado oscuro es mucho mas ligero y sin
     el oscurecimiento lateral, que en vertical solo ensuciaba los colores. */
  @media (max-width: 700px) {
    .hero {
      min-height: min(100svh, calc(var(--nav-h) + 150vw));
      --hero-pad-b: clamp(2.5rem, 14.5vw, 4rem);
      --hero-shade:
        linear-gradient(180deg, rgba(10,10,10,.2) 0%, rgba(10,10,10,0) 20%, rgba(10,10,10,.3) 62%, rgba(10,10,10,.82) 86%, #0a0a0a 100%);
    }
    .hs-z10, .hs-utv1, .hs-utv2, .hs-xrs {
      --W: max(100cqw, calc(100cqh * var(--ar)));
      --T: clamp(calc(100cqh - var(--H)), calc(var(--tgt) - var(--b) * var(--H)), 0px);
    }
    .hs-utv2 { --cx: .43; }   /* dos UTVs no caben: se muestra el negro completo y la punta del naranja */
    .hero-slide.hs-z10::before, .hero-slide.hs-utv1::before, .hero-slide.hs-utv2::before, .hero-slide.hs-xrs::before { display: none; }
    .hero-slide .hero-photo { -webkit-mask-image: none; mask-image: none; }
    .hero-slide .hero-photo, .hero-fgslide .hero-photo { filter: saturate(1.08) contrast(1.03); }
    /* Video un poco mas arriba: se amplia anclado abajo, asi el contenido sube sin dejar
       una franja vacia al fondo. */
    .hero-slide video { transform-origin: 50% 100%; transform: scale(1.12); }
  }
}
.hero-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: clamp(44px, 5vw, 64px); height: clamp(88px, 10vw, 128px);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: #fff; opacity: .22; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.hero-arrow svg { width: 40%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.hero-arrow-prev { left: clamp(.2rem, 1.6vw, 1.4rem); }
.hero-arrow-next { right: clamp(.2rem, 1.6vw, 1.4rem); }
.hero-arrow:hover, .hero-arrow:focus-visible { opacity: .85; }

.hero-arrow-prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-arrow-next:hover { transform: translateY(-50%) translateX(3px); }
.hero-arrow:focus-visible { outline: 1px solid rgba(255,255,255,.5); outline-offset: -6px; border-radius: 8px; }
@media (hover: none) { .hero-arrow { opacity: .3; } }

/* ---- Ficha de producto: selector de color ---- */
.product-color-picker { margin: 1rem 0 .4rem; }
.product-option-label { font-size: .85rem; color: var(--ink-mute); margin-bottom: .55rem; }
.product-option-label strong { color: var(--ink); font-weight: 600; }
.product-color-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.product-color-swatch {
  width: 40px; height: 40px; padding: 3px; border-radius: 50%;
  background: transparent; border: 2px solid var(--line-strong); cursor: pointer;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.product-color-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.product-color-swatch:hover { transform: scale(1.06); }
.product-color-swatch.is-active { border-color: var(--accent); }
.product-color-swatch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---- Etiqueta SOLD (unidades vendidas que se dejan en el catalogo) ---- */
.sold-badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 4;
  padding: .32em .85em .28em;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--accent);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1.5px rgba(255,255,255,.85) inset;
  pointer-events: none;
}
.sold-badge--lg { top: 1.1rem; left: 1.1rem; font-size: clamp(1.15rem, 2.4vw, 1.6rem); padding: .38em 1em .33em; border-radius: 8px; }
/* La foto de una unidad vendida se apaga un poco para que se note de un vistazo. */
.unit-card.is-sold .unit-photo img,
.product-gallery-main.is-sold img[data-product-image] { filter: grayscale(.8) brightness(.7); }

/* =============================================================
   Mi perfil: elegir tema (claro / oscuro)
   ============================================================= */
.theme-choice { display: flex; gap: 1rem; flex-wrap: wrap; }
.theme-option {
  flex: 1 1 150px; display: flex; flex-direction: column; gap: .7rem; align-items: stretch;
  padding: .8rem; border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  background: var(--bg-1); color: var(--ink); border: 2px solid var(--line-strong);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.theme-option:hover { transform: translateY(-2px); }
.theme-option.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226,35,26,.18); }
.theme-option-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.theme-option.is-active .theme-option-label::after { content: " ✓"; color: var(--accent); }
.theme-preview { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 14px 44px; gap: 6px; padding: 8px; border-radius: 8px; border: 1px solid rgba(128,128,128,.35); }
.theme-preview i { display: block; border-radius: 4px; }
.theme-preview i:first-child { grid-column: 1 / -1; }
.theme-preview--dark { background: #0a0a0a; }
.theme-preview--dark i { background: #1e1e1e; }
.theme-preview--dark i:first-child { background: #e2231a; }
.theme-preview--light { background: #f3f2ef; }
.theme-preview--light i { background: #ffffff; box-shadow: 0 0 0 1px rgba(20,16,12,.12); }
.theme-preview--light i:first-child { background: #0a0a0a; box-shadow: none; }
.auth-hint { display: block; margin-top: .3rem; color: var(--ink-mute); font-size: .78rem; }

/* =============================================================
   Tema CLARO (se activa con <html data-theme="light"> — preferencia de "Mi perfil")
   Las variables cambian el lienzo; la barra superior, el menu movil, el pie, el hero y los
   banners conservan la paleta oscura de la marca (el logo es blanco sobre fondo oscuro).
   ============================================================= */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f3f2ef;
  --bg-1:        #ffffff;
  --bg-2:        #ebeae6;
  --bg-3:        #dfded9;
  --bg-gray:     #e9e8e4;
  --bg-gray-2:   #dddcd7;
  --ink:         #15120f;
  --ink-mute:    #5a5651;
  --ink-dim:     #8b8782;
  --accent:      #d71f16;
  --accent-2:    #e2231a;
  --accent-dark: #9d1710;
  --line:        rgba(21, 18, 15, 0.14);
  --line-strong: rgba(21, 18, 15, 0.30);
  --line-accent: rgba(215, 31, 22, 0.55);
  --shadow-card: 0 18px 36px -22px rgba(20, 16, 12, .30);
}
/* Zonas que se quedan oscuras: se restituye la paleta oscura solo dentro de ellas */
:root[data-theme="light"] .nav,
:root[data-theme="light"] .mobile-menu,
:root[data-theme="light"] .footer,
:root[data-theme="light"] .splash,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .cat-hero,
:root[data-theme="light"] .has-photo,
:root[data-theme="light"] .contact-map-tag,
:root[data-theme="light"] .lightbox {
  --bg:          #0a0a0a;
  --bg-1:        #111111;
  --bg-2:        #161616;
  --bg-3:        #1e1e1e;
  --bg-gray:     #1c1c1e;
  --bg-gray-2:   #232326;
  --ink:         #f5f5f3;
  --ink-mute:    #9d9c98;
  --ink-dim:     #6a6965;
  --accent:      #e2231a;
  --accent-2:    #ff4433;
  --line:        rgba(245, 245, 243, 0.14);
  --line-strong: rgba(245, 245, 243, 0.30);
  --line-accent: rgba(226, 35, 26, 0.55);
  color: var(--ink);
}
:root[data-theme="light"] body { background: var(--bg); color: var(--ink); }

:root[data-theme="light"] .footer { background: #0a0a0a; }
:root[data-theme="light"] .section-light .section-title { color: #0a0a0a; }
:root[data-theme="light"] .contact-map iframe { filter: none; }
:root[data-theme="light"] .splash { background: #0a0a0a; }
:root[data-theme="light"] .event-card { background: #ffffff; box-shadow: 0 10px 24px -18px rgba(20,16,12,.35); }
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .feed-card,
:root[data-theme="light"] .event-calendar { background: #ffffff; box-shadow: 0 10px 24px -18px rgba(20,16,12,.35); backdrop-filter: none; }

/* ---- Inicio: sello "Desde 2008" sobre Misión, visión y valores ---- */
.since-banner {
  display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2.2rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.2rem, 3vw, 2.2rem);
  background: var(--bg-1); border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: var(--radius-sm);
}
.since-year { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; flex-shrink: 0; }
.since-year span { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .25rem; }
.since-year strong { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; color: var(--accent); letter-spacing: .01em; }
.since-text strong { display: block; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-bottom: .3rem; }
.since-text p { margin: 0; color: var(--ink-mute); line-height: 1.6; max-width: 62ch; }
@media (max-width: 560px) { .since-banner { flex-direction: column; align-items: flex-start; gap: .7rem; } }
/* Logos de marca en blanco (pensados para fondo oscuro): en el tema claro se vuelven negros */
:root[data-theme="light"] .brand-summary-logo,
:root[data-theme="light"] .catalog-title-logo,
:root[data-theme="light"] .vehicle-logo { filter: brightness(0); }
.contact-address { display: block; line-height: 1.55; }
.contact-address strong { color: var(--ink); }

/* =============================================================
   Mi perfil — panel de cuenta (barra lateral + tarjetas)
   ============================================================= */
.profile-section { padding-top: calc(var(--nav-h) + clamp(1.6rem, 4vw, 3rem)); }
.profile-wrap { max-width: 1120px; }
.profile-head h1 { margin-top: .3rem; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.profile-layout { display: grid; gap: 1.6rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); align-items: start; }
@media (min-width: 900px) { .profile-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 2rem; } }

.profile-side {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; display: flex; flex-direction: column; gap: 1.4rem;
}
@media (min-width: 900px) { .profile-side { position: sticky; top: calc(var(--nav-h) + 1.4rem); } }
.profile-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
.profile-avatar {
  width: 116px; height: 116px; border-radius: 50%; margin-bottom: .6rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2) center / cover no-repeat; color: var(--ink);
  font-family: var(--font-display); font-size: 3rem; font-weight: 700;
  box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--accent);
}
.profile-name { margin: 0; font-size: 1.45rem; line-height: 1.2; text-transform: uppercase; }
.profile-email { margin: 0; color: var(--ink-mute); font-size: .88rem; word-break: break-all; }
.profile-badges { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.profile-badge {
  display: inline-flex; align-items: center; gap: .4em; padding: .28em .8em; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--ink-mute); background: transparent; text-decoration: none;
}
.profile-badge.is-admin { border-color: var(--accent); color: var(--accent); }
.profile-badge.is-ok::before, .profile-badge.is-warn::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #22b45a; }
.profile-badge.is-warn::before { background: #e2b21a; }
.profile-badge.is-ok { border-color: rgba(34,180,90,.5); color: #22b45a; }
.profile-badge.is-warn { border-color: rgba(226,178,26,.6); color: #b88a00; }

.profile-nav { display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.profile-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .6em .8em; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.profile-nav a .icon { width: 1.15rem; height: 1.15rem; color: var(--accent); flex-shrink: 0; }
.profile-nav a:hover { background: var(--bg-2); color: var(--accent); }
.profile-links { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: .6rem; }
.profile-links a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7em .2em;
  color: var(--ink-mute); text-decoration: none; font-size: .92rem; border-bottom: 1px solid var(--line);
  transition: color .2s var(--ease-out);
}
.profile-links a:last-child { border-bottom: 0; }
.profile-links a .icon { width: .95rem; height: .95rem; opacity: .6; transition: transform .2s var(--ease-out), opacity .2s; }
.profile-links a:hover { color: var(--accent); }
.profile-links a:hover .icon { transform: translateX(4px); opacity: 1; }
.profile-logout { width: 100%; justify-content: center; }

.profile-main { display: grid; gap: 1.4rem; min-width: 0; }
.profile-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.3rem, 2.6vw, 1.9rem); scroll-margin-top: calc(var(--nav-h) + 1.2rem); }
.profile-card-head h2 { margin: 0; font-size: 1.4rem; text-transform: uppercase; }
.profile-card-head p { margin: .35rem 0 0; color: var(--ink-mute); font-size: .92rem; max-width: 60ch; }
.profile-form { margin-top: 1.2rem; }
.profile-grid-2 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .profile-grid-2 { grid-template-columns: 1fr 1fr; } }
.profile-pair { display: grid; gap: 1.4rem; }
@media (min-width: 1100px) { .profile-pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.profile-avatar-field input[type="file"]::file-selector-button {
  margin-right: .8rem; padding: .45em 1em; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-2); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer;
}
.profile-card .theme-choice { margin-top: 1.1rem; }
.profile-card .theme-option { flex: 1 1 200px; max-width: 260px; }
.profile-card .theme-preview { grid-template-rows: 18px 64px; }
.profile-card .auth-error, .profile-card .auth-note { margin-top: 1rem; }
@media (max-width: 899px) {
  .profile-side { padding: 1.2rem; gap: 1rem; }
  .profile-avatar { width: 88px; height: 88px; font-size: 2.3rem; }
  .profile-nav { flex-direction: row; overflow-x: auto; gap: .4rem; padding-top: .9rem; scrollbar-width: none; }
  .profile-nav::-webkit-scrollbar { display: none; }
  .profile-nav a { flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 999px; padding: .45em .9em; font-size: .85rem; white-space: nowrap; }
  .profile-links { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; padding-top: .9rem; }
  .profile-links a { border-bottom: 0; padding: .5em .2em; font-size: .85rem; }
  .profile-links a .icon { display: none; }
}
.profile-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .profile-layout { grid-template-columns: 310px minmax(0, 1fr); } }
.profile-side, .profile-main, .profile-card { min-width: 0; }

/* ---- Fotos multiples: flechas siempre visibles (sustituyen a los puntos) ---- */
.unit-dots { display: none; }
.unit-slide-nav {
  width: 34px; height: 34px; opacity: 1;
  background: rgba(10,10,10,.62); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.unit-slide-nav .icon { width: 18px; height: 18px; }
.unit-slide-nav:hover { background: rgba(10,10,10,.85); transform: translateY(-50%) scale(1.08); }
.unit-slide-prev { left: 8px; } .unit-slide-next { right: 8px; }
.gallery-nav {
  width: 46px; height: 46px; z-index: 4;
  background: rgba(10,10,10,.62); border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.gallery-nav .icon { width: 24px; height: 24px; }
.gallery-nav:hover { background: rgba(10,10,10,.88); }
@media (max-width: 640px) { .gallery-nav { width: 40px; height: 40px; } .gallery-nav-prev { left: .5rem; } .gallery-nav-next { right: .5rem; } }

/* =============================================================
   Eventos: tarjetas con foto, etiqueta de categoria, calendario con enlaces y pagina de inscripcion
   ============================================================= */
.event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.4rem; align-items: start; }
.event-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  background: var(--bg-1); backdrop-filter: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  scroll-margin-top: calc(var(--nav-h) + 1.2rem);
}
.event-list-home .event-card { flex-direction: column; }
.event-card-photo {
  display: block; position: relative; flex-shrink: 0; order: 0; width: 100%;
  aspect-ratio: 396 / 300; border-radius: 0; overflow: hidden; container-type: inline-size;
  background: var(--bg-2);
}
.event-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.event-card:hover .event-card-photo img { transform: scale(1.04); }
.event-card-photo-empty { position: absolute; inset: 0; background: linear-gradient(135deg, #1c1c1e, #3a0f0d); }
/* Sello de fecha con identidad de marca (negro + rojo Semage, tipografia Oswald). Es un disco que
   tapa el difuminado que las fotos de eventos ya traen en la esquina superior derecha. */
.event-card-date {
  position: absolute; z-index: 2; left: calc(81.8cqw - 14cqw); top: calc(18.4cqw - 14cqw); width: 28cqw; height: auto; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1;
  padding: 0; border-radius: 50%; color: #fff; text-align: center;
  background: radial-gradient(circle at 50% 38%, #1d1d1f 0%, #0a0a0a 72%);
  border: .9cqw solid var(--accent, #e2231a);
  box-shadow: 0 0 0 .6cqw #0a0a0a, 0 10px 26px rgba(0,0,0,.5), inset 0 0 0 .5cqw rgba(255,255,255,.08);
}
.event-card-month {
  font-family: var(--font-display); font-weight: 600; font-size: 5.6cqw; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase;
  color: var(--accent, #e2231a); text-shadow: 0 0 12px rgba(226,35,26,.45);
}
.event-card-day {
  font-family: var(--font-display); font-weight: 700; font-size: 12.4cqw; line-height: .95; color: #fff; margin-top: .6cqw;
}
.event-card-body { flex: 1; min-width: 0; padding: 1.15rem 1.3rem 1.4rem; }
.event-card-body h3 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.2; margin: 0 0 .55rem; letter-spacing: 0; }
.event-card-body h3 a { color: inherit; text-decoration: none; }
.event-card-body h3 a:hover { color: var(--accent); }
.event-card-when { display: flex; align-items: center; gap: .45em; font-size: .85rem; color: var(--ink-mute); margin: 0 0 .7rem; }
.event-card-when .icon, .event-card-loc .icon { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.event-card-desc { font-size: .95rem; line-height: 1.55; color: var(--ink-mute); margin: 0 0 .9rem; }
.event-card-loc { display: flex; align-items: flex-start; gap: .55em; font-weight: 700; font-size: .95rem; margin: 0 0 1.1rem; color: var(--ink); }
.event-card-loc .icon { margin-top: .2em; }
.event-card-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.event-register { padding: .65em 1.5em; }
.event-state { font-size: .82rem; font-weight: 700; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em; }
.event-state--full { color: var(--accent); }
.event-card-count { font-size: .8rem; color: var(--ink-dim); }

.event-pill {
  display: inline-block; padding: .22em .85em; margin-bottom: .75rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; border: 1px solid var(--line-strong); color: var(--ink-mute); background: transparent;
}
.event-pill--test-drive { color: #e2b21a; border-color: rgba(226,178,26,.6); background: rgba(226,178,26,.12); }
.event-pill--capacitacion { color: #3ba4e2; border-color: rgba(59,164,226,.6); background: rgba(59,164,226,.12); }
.event-pill--rally { color: #ff4433; border-color: rgba(226,35,26,.6); background: rgba(226,35,26,.12); }
.event-pill--taller-abierto { color: #22b45a; border-color: rgba(34,180,90,.6); background: rgba(34,180,90,.12); }
.event-pill--exhibicion { color: #b26ad6; border-color: rgba(150,47,191,.6); background: rgba(150,47,191,.12); }
.event-pill--comunidad { color: #fa7e1e; border-color: rgba(250,126,30,.6); background: rgba(250,126,30,.12); }
:root[data-theme="light"] .event-pill--test-drive { color: #7a5a00; background: #fff6d6; }
:root[data-theme="light"] .event-pill--capacitacion { color: #1d5a8c; background: #e6f2fb; }
:root[data-theme="light"] .event-pill--rally { color: #b3150c; background: #fdeceb; }
:root[data-theme="light"] .event-pill--taller-abierto { color: #167a3d; background: #e6f6ec; }
:root[data-theme="light"] .event-pill--exhibicion { color: #75229a; background: #f3e8f9; }
:root[data-theme="light"] .event-pill--comunidad { color: #a8520a; background: #fdf0e3; }

.event-calendar-title { margin: 0 0 .8rem; text-align: center; font-weight: 700; font-size: 1.05rem; text-transform: capitalize; }
.event-calendar-cell.has-event { text-decoration: none; flex-direction: column; gap: 3px; border: 1px solid var(--line-strong); }
.event-calendar-cell.has-event::after { display: none; }
.event-calendar-cell.has-event:hover { border-color: var(--accent); background: var(--bg-2); }
.event-calendar-dots { display: flex; gap: 3px; }
.event-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); }
.event-dot--test-drive { background: #e2b21a; } .event-dot--capacitacion { background: #3ba4e2; }
.event-dot--rally { background: #e2231a; } .event-dot--taller-abierto { background: #22b45a; }
.event-dot--exhibicion { background: #962fbf; } .event-dot--comunidad { background: #fa7e1e; }
.event-calendar-cell.is-today { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

.event-signup { display: grid; gap: 1.6rem; margin-top: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .event-signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; } }
.event-signup-info { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.event-signup-photo { aspect-ratio: 16 / 9; background: var(--bg-2); }
.event-signup-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-signup-body { padding: 1.4rem 1.5rem 1.6rem; }
.event-signup-body h1 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .7rem; line-height: 1.2; }
.event-signup-form .auth-error div + div { margin-top: .3rem; }
.event-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-form select, .auth-form textarea {
  width: 100%; padding: .75em 1em; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--bg-1); color: var(--ink); font-family: var(--font-body); font-size: .92rem;
}
.auth-form textarea { resize: vertical; }
.auth-form select:focus-visible, .auth-form textarea:focus-visible { border-color: var(--accent); outline: none; }
.event-signup-done { text-align: center; padding: 1rem .5rem; }
.event-signup-done h2 { margin: .8rem 0 .5rem; font-size: 1.6rem; }
.event-signup-done p { color: var(--ink-mute); max-width: 46ch; margin-inline: auto; }
.event-signup-done p[style] { justify-content: center; }
.event-signup-check { width: 64px; height: 64px; border-radius: 50%; background: #22b45a; color: #fff; display: inline-grid; place-items: center; }
.event-signup-check .icon { width: 30px; height: 30px; }
:root[data-theme="light"] .event-card { background: #ffffff; box-shadow: 0 10px 24px -18px rgba(20,16,12,.35); }
.event-signup-photo { position: relative; aspect-ratio: 396 / 300; container-type: inline-size; }

/* =============================================================
   Tarjetas del taller (enlaces) y pagina para agendar citas
   ============================================================= */
a.service-card { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.service-card-cta {
  display: inline-flex; align-items: center; gap: .5em; margin-top: .9rem;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; opacity: .85; transition: opacity .2s var(--ease-out), gap .2s var(--ease-out);
}
.service-card-cta .icon { width: 1em; height: 1em; }
a.service-card:hover .service-card-cta { opacity: 1; gap: .8em; }
a.service-card:hover h3 { color: var(--accent-2); }
a.service-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.booking-section { padding-top: calc(var(--nav-h) + clamp(1.4rem, 3vw, 2.4rem)); }
.booking-wrap { max-width: 1180px; }
.booking-layout { display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .booking-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 3.2rem; } }
.booking-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; font-weight: 600; color: var(--ink-dim); }
.booking-steps li.is-active { color: var(--ink); }
.booking-steps li.is-done { color: var(--ink-mute); }
.booking-step h1, .booking-done h1 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1.2rem; }
.booking-pick { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .booking-pick { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.booking-cal { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.booking-cal-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.booking-cal-title { margin: 0; font-weight: 700; font-size: 1.15rem; text-transform: capitalize; }
.booking-cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.booking-cal-nav:disabled { opacity: .3; cursor: default; }
.booking-cal-nav:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.booking-cal-nav .icon { width: 18px; height: 18px; }
.booking-cal-dow, .booking-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.booking-cal-dow span { text-align: center; padding: .7rem 0; font-size: .82rem; font-weight: 700; background: var(--bg-2); }
.booking-cal-grid { gap: 6px; padding: 8px; }
.booking-day {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent;
  font-size: .98rem; color: var(--ink-dim); background: transparent; font-family: inherit; padding: 0;
}
.booking-day.is-today { box-shadow: inset 0 -3px 0 var(--accent); }
.booking-day.is-available { color: var(--accent); font-weight: 700; border-color: var(--line-accent); background: rgba(226,35,26,.08); cursor: pointer; transition: background .15s var(--ease-out); }
.booking-day.is-available:hover { background: rgba(226,35,26,.2); }
.booking-day.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.booking-times-title { margin: 0 0 .8rem; font-weight: 600; }
.booking-times-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-height: 440px; overflow-y: auto; padding-right: 4px; }
.booking-slot {
  padding: .75em .5em; border-radius: 8px; border: 1px solid var(--line-accent); background: rgba(226,35,26,.08);
  color: var(--accent); font-weight: 700; font-size: .95rem; cursor: pointer; font-family: inherit;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.booking-slot:hover { background: var(--accent); color: #fff; }
.booking-times-empty { color: var(--ink-mute); font-size: .92rem; }
.booking-tz { margin-top: 1.2rem; color: var(--ink-mute); font-size: .88rem; }
.booking-chosen { display: flex; align-items: center; gap: .55em; flex-wrap: wrap; font-weight: 600; margin: -.4rem 0 1.2rem; }
.booking-chosen .icon { width: 1.1em; height: 1.1em; color: var(--accent); }
.booking-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.booking-form { margin-top: 1rem; max-width: 520px; }
.booking-done { max-width: 560px; }
.booking-done p { color: var(--ink-mute); }
.booking-summary { margin: 1.2rem 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-1); }
.booking-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.booking-summary > div:last-child { border-bottom: 0; }
.booking-summary dt { color: var(--ink-mute); font-size: .88rem; }
.booking-summary dd { margin: 0; font-weight: 600; text-align: right; }
.booking-aside h2 { font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 1.5rem; margin: 0 0 1.1rem; }
.booking-aside-kicker { margin: 1.5rem 0 .7rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.booking-aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.booking-aside-list li { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.5; }
.booking-aside-list .icon { width: 1.15rem; height: 1.15rem; margin-top: .25em; flex-shrink: 0; color: var(--ink-mute); }
.booking-aside-list a { color: inherit; text-decoration: none; } .booking-aside-list a:hover { color: var(--accent); }
.booking-aside-hours { margin: 0; color: var(--ink-mute); font-size: .92rem; line-height: 1.6; }
@media (min-width: 960px) { .booking-aside { position: sticky; top: calc(var(--nav-h) + 1.4rem); border-left: 1px solid var(--line); padding-left: 2rem; } }
.booking-aside-list li[hidden] { display: none; }

/* Comunidad: boton "Reportar" (discreto, junto a likes y comentarios) */
.feed-report {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35em;
  background: none; border: 0; padding: .3em .5em; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--ink-dim);
}
.feed-report .icon { width: 1em; height: 1em; }
.feed-report:hover { color: var(--accent); }
.feed-report:disabled { opacity: .6; cursor: default; }

/* Tema claro en el panel de administracion (antes se forzaba oscuro) */
:root[data-theme="light"] .admin-topbar { background: rgba(243,242,239,.88); }
:root[data-theme="light"] .admin-panel { background: #ffffff; }
:root[data-theme="light"] body.admin-body .admin-panel { background: none; }
:root[data-theme="light"] .admin-sidebar-brand { background: #0a0a0a; border-radius: var(--radius-sm); padding: 1rem .9rem; margin-bottom: 1rem; }

/* ---- Comunidad: pestanas + galeria de proyectos ---- */
.community-tabs { display: flex; gap: .4rem; margin: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--line); }
.community-tabs a { padding: .7em 1.1em; font-weight: 600; font-size: .92rem; color: var(--ink-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.community-tabs a:hover { color: var(--ink); }
.community-tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.2rem; }
.project-card { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
.project-card:hover, .project-card:focus-visible { transform: translateY(-4px); border-color: var(--line-accent); }
.project-card-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.project-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.project-card:hover .project-card-photo img { transform: scale(1.05); }
.project-card-body { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1.1rem 1.1rem; }
.project-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.project-card-sub { font-size: .86rem; color: var(--ink-mute); }
.project-card-count { display: inline-flex; align-items: center; gap: .4em; margin-top: .4rem; font-size: .78rem; color: var(--accent); font-weight: 600; }
.project-card-count .icon { width: 14px; height: 14px; }

.project-viewer { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; align-items: center; background: rgba(6,6,6,.96); color: #fff; padding: 3.5rem 3.5rem 0; }
.project-viewer.is-open { display: flex; }
.project-viewer-stage { flex: 1; min-height: 0; width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; }
.project-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.project-viewer-caption { margin: .7rem 0 .4rem; font-size: .9rem; text-align: center; color: rgba(255,255,255,.85); }
.project-viewer-caption span { color: rgba(255,255,255,.55); margin-left: .6em; }
.project-viewer-thumbs { display: flex; gap: .4rem; overflow-x: auto; width: 100%; padding: .4rem 0 .9rem; justify-content: safe center; }
.project-viewer-thumbs button { flex: 0 0 auto; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; opacity: .55; cursor: pointer; background: none; }
.project-viewer-thumbs button.is-active { border-color: var(--accent); opacity: 1; }
.project-viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-viewer-close, .project-viewer-nav { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; border: 0; }
.project-viewer-close { top: .9rem; right: .9rem; width: 42px; height: 42px; }
.project-viewer-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.project-viewer-prev { left: .8rem; } .project-viewer-next { right: .8rem; }
.project-viewer-close:hover, .project-viewer-nav:hover { background: rgba(255,255,255,.22); }
.project-viewer .icon { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .project-viewer { padding: 3.2rem .5rem 0; }
  .project-viewer-nav { width: 40px; height: 40px; top: 42%; background: rgba(10,10,10,.55); }
  .project-viewer-prev { left: .4rem; } .project-viewer-next { right: .4rem; }
}