/* ============================================================
   MODELO — Página de detalle de vehículo
   modelo.css — Hero inmersivo, secciones scrollytelling,
   visor 360°, versiones (tabs + comparador), descargas,
   accesorios, sticky bar
   ============================================================ */

/* ── HERO ── */
.mdl-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-dark);
}

.mdl-hero__media,
.mdl-hero__media video,
.mdl-hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mdl-hero__fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mdl-hero__video { display: none; }
  .mdl-hero__fallback { display: block; }}

.mdl-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,.24) 58%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.38) 0%, transparent 46%);
}

.mdl-hero__content {
  position: relative;
  z-index: var(--z-above);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding: 0 var(--space-4) var(--space-10);
  color: var(--text-inverse);
}

.mdl-hero__name {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
  text-wrap: balance;
}

.mdl-hero__year {
  font-weight: var(--font-weight-regular);
  color: rgba(255,255,255,.72);
}

.mdl-hero__tagline {
  margin-top: var(--space-1);
  font-size: var(--text-lg);
  color: rgba(255,255,255,.88);
}

.mdl-hero__price {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: rgba(255,255,255,.82);
}

.mdl-hero__price strong {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-inverse);
}

.mdl-hero__price-note { color: rgba(255,255,255,.6); }

.mdl-hero__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* Entrada escalonada del hero: nombre → tagline → precio → CTAs */
@keyframes mdlHeroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mdl-hero__name,
.mdl-hero__tagline,
.mdl-hero__price,
.mdl-hero__actions {
  animation: mdlHeroRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mdl-hero__name    { animation-delay: 0.15s; }
.mdl-hero__tagline { animation-delay: 0.29s; }
.mdl-hero__price   { animation-delay: 0.43s; }
.mdl-hero__actions { animation-delay: 0.57s; }

@media (prefers-reduced-motion: reduce) {
  .mdl-hero__name,
  .mdl-hero__tagline,
  .mdl-hero__price,
  .mdl-hero__actions {
    animation: none;
  }}

/* Primary sobre fondo oscuro dentro del detalle → hover blanco */
.mdl-hero .btn--primary::before,
.mdl-cta .btn--primary::before,
.mdl-gal--dark .btn--primary::before {
  background: #FFFFFF;
}@media (hover: hover){

.mdl-hero .btn--primary:hover,
.mdl-cta .btn--primary:hover,
.mdl-gal--dark .btn--primary:hover {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #000000;
  box-shadow: none;
}}

.mdl-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  z-index: var(--z-above);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-inverse);
  cursor: pointer;
  animation: mdl-bounce 2.2s var(--ease-default) infinite;
  transition: background var(--duration-base) var(--ease-default);
}@media (hover: hover){

.mdl-hero__scroll:hover { background: rgba(255,255,255,.14); }}

@keyframes mdl-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .mdl-hero__scroll { animation: none; }}

/* ── ANCHOR NAV ── */
.mdl-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(10,10,10,.9);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--border-inverse);
}

.mdl-nav__inner {
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding: 0 var(--space-4);
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mdl-nav__inner::-webkit-scrollbar { display: none; }

.mdl-nav__link {
  flex-shrink: 0;
  padding: var(--space-2) 0;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,.64);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default);
}@media (hover: hover){

.mdl-nav__link:hover { color: var(--text-inverse); }}

.mdl-nav__link.is-active {
  color: var(--text-inverse);
  border-bottom-color: var(--color-red);
}

/* Header se oculta cuando la nav de secciones está anclada */
#site-header { transition: transform var(--duration-base) var(--ease-default); }

body.mdl-nav-stuck #site-header {
  transform: translateY(-100%);
  pointer-events: none;
}

/* ── ENCABEZADOS DE SECCIÓN ── */
.mdl-feature,
.mdl-360,
.mdl-versions,
.mdl-acc {
  padding-block: var(--space-12);
  /* Sube el anclaje para que el header quede bajo la nav y se alcance a
     ver el disclaimer del fondo (mismo criterio que las galerías). */
  scroll-margin-top: -12px;
}

.mdl-feature__head { max-width: 60ch; margin-bottom: var(--space-6); }

.mdl-feature__title {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.mdl-feature__intro {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ════════════════════════════════════════════
   GAL — galería cinemática con autoplay
   ════════════════════════════════════════════ */
.mdl-gal {
  position: relative;
  padding-block: 100px;
  scroll-margin-top: -16px; /* compensa el padding para que el anclaje quede igual */
}

.mdl-gal .mdl-feature__head { margin-bottom: var(--space-3); }

.mdl-gal--dark {
  background: var(--surface-dark-1);
  color: var(--text-inverse);
}

.mdl-gal--dark .mdl-feature__title { color: var(--text-inverse); }
.mdl-gal--dark .mdl-feature__intro { color: rgba(255,255,255,.72); }

/* Viewport full-bleed alineado al container; cards con peek lateral */
.mdl-gal__viewport {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  --gal-inset: max(var(--space-4), calc((100vw - 1200px) / 2));
  scroll-padding-left: var(--gal-inset);
}

.mdl-gal__viewport::-webkit-scrollbar { display: none; }

.mdl-gal__viewport:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
}

.mdl-gal__track {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0 var(--gal-inset);
  width: max-content;
}

.mdl-gal__card {
  flex: 0 0 auto;
  width: min(760px, 72vw);
  scroll-snap-align: start;
}

.mdl-gal__card figure { margin: 0; }

.mdl-gal__imgwrap {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-3);
}

.mdl-gal--dark .mdl-gal__imgwrap { background: var(--surface-dark-3); }

.mdl-gal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}@media (hover: hover){

.mdl-gal__card:hover .mdl-gal__img { transform: scale(1.04); }}

.mdl-gal__caption {
  margin-top: var(--space-2);
  padding-inline: var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  max-width: 62ch;
}

.mdl-gal--dark .mdl-gal__caption { color: rgba(255,255,255,.88); }

/* Flechas de navegación — homologadas con el carrusel de modelos del home */
.mdl-gal__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Desktop: arriba a la derecha, a la altura del subtítulo */
@media (min-width: 1025px) {
  .mdl-gal__nav {
    position: absolute;
    top: 104px;
    left: 0;
    right: 0;
    margin-top: 0;
    pointer-events: none;
  }
  .mdl-gal__nav .mdl-gal__arrow { pointer-events: auto; }
}

.mdl-gal__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  color: var(--text-primary);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}@media (hover: hover){

.mdl-gal__arrow:hover:not(:disabled) {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}}

.mdl-gal__arrow:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ════════════════════════════════════════════
   360° + COLORES — fondo gris tenue, estilo showroom
   ════════════════════════════════════════════ */
.mdl-360 {
  background: var(--surface-2);
  padding-block: 100px;
  scroll-margin-top: -16px;
}

.mdl-360 .mdl-feature__head { margin-bottom: var(--space-3); }

.mdl-360__viewer { max-width: 900px; margin-inline: auto; }

.mdl-360__stage {
  position: relative;
  aspect-ratio: 16 / 8;
  max-height: 460px;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 2% 5%;
  overflow: hidden;
  cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(255,255,255,0.38)'/%3E%3Cstop offset='0.55' stop-color='rgba(255,255,255,0.06)'/%3E%3Cstop offset='1' stop-color='rgba(255,255,255,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='rgba(237,0,0,0.88)' stroke='rgba(255,255,255,0.45)' stroke-width='1.5'/%3E%3Cellipse cx='32' cy='19' rx='24' ry='13' fill='url(%23g)'/%3E%3Ctext x='32' y='37' font-family='Arial, sans-serif' font-size='13' font-weight='bold' fill='white' text-anchor='middle'%3E360%C2%B0%3C/text%3E%3Cpath d='M12.5 26 L6.5 32 l6 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M51.5 26 L57.5 32 l-6 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 32 32, grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.mdl-360__stage.is-dragging {
  cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(255,255,255,0.38)'/%3E%3Cstop offset='0.55' stop-color='rgba(255,255,255,0.06)'/%3E%3Cstop offset='1' stop-color='rgba(255,255,255,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='rgba(200,0,0,0.96)' stroke='rgba(255,255,255,0.55)' stroke-width='1.5'/%3E%3Cellipse cx='32' cy='19' rx='24' ry='13' fill='url(%23g)'/%3E%3Ctext x='32' y='37' font-family='Arial, sans-serif' font-size='13' font-weight='bold' fill='white' text-anchor='middle'%3E360%C2%B0%3C/text%3E%3Cpath d='M12.5 26 L6.5 32 l6 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M51.5 26 L57.5 32 l-6 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 32 32, grabbing;
}

.mdl-360__frame {
  width: 100%;
  height: 100%;
  max-width: 700px;
  object-fit: contain;
  pointer-events: none;
}

/* Hint de arrastre: referencia visual bajo el auto (flechas + 360°),
   se desvanece tras la primera interacción */
.mdl-360__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: var(--space-3) auto 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(10,10,10,.06);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-default), transform 0.4s var(--ease-out);
}

.mdl-360__hint svg:first-child { animation: mdl360Nudge 1.8s ease-in-out infinite; }
.mdl-360__hint svg:last-child { animation: mdl360Nudge 1.8s ease-in-out infinite reverse; }

.mdl-360__hint.is-hidden {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes mdl360Nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}

/* En escritorio el cursor ya es el ícono 360°: no hace falta el hint.
   Los swatches suben a ocupar ese lugar (bajo el auto) y el nombre debajo. */
@media (min-width: 1025px) {
  .mdl-360__hint { display: none; }
}

.mdl-360__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.mdl-360__color-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  letter-spacing: 0;
}

.mdl-360__swatches {
  display: flex;
  gap: var(--space-2);
}

.mdl-360__swatch {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(10,10,10,.18);
  background: var(--swatch);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-default);
}@media (hover: hover){

.mdl-360__swatch:hover { transform: scale(1.18); }}

.mdl-360__swatch.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0a0a0a;
}

/* Tooltip con el nombre del color */
.mdl-360__swatch::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(3px);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(10,10,10,.86);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-out);
  z-index: 2;
}@media (hover: hover){

.mdl-360__swatch:hover::after,
.mdl-360__swatch:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}}

/* ════════════════════════════════════════════
   VERSIONES — módulo con tabs
   ════════════════════════════════════════════ */
.mdl-versions {
  background: var(--surface-2);
  padding-block: 72px;
  /* +16 para que el título quede bajo la nav de secciones (padding-top 72) */
  scroll-margin-top: 16px;
}

.mdl-versions .mdl-feature__head { margin-bottom: var(--space-3); }

.mdl-versions__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.mdl-versions__head .mdl-feature__head { margin-bottom: var(--space-5); }

.mdl-versions__compare-btn { flex-shrink: 0; }

/* Botón comparar exclusivo de mobile (debajo del panel); oculto en desktop */
.mdl-versions__compare-btn--m { display: none; }

/* ── Selector de versiones: thumbnails (desktop) / stepper (mobile) ── */
.mdl-vselect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.mdl-vselect__arrow {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.12);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.mdl-vselect.has-overflow .mdl-vselect__arrow { display: flex; }@media (hover: hover){
.mdl-vselect__arrow:hover:not(:disabled) { background: var(--color-red); border-color: var(--color-red); color: #fff; }}
.mdl-vselect__arrow:disabled { opacity: 0.28; cursor: default; }

.mdl-vselect__viewport {
  /* Ancho de exactamente 4 thumbnails; el grupo queda centrado (por el
     justify-content del contenedor) y con ≤4 se encoge a su contenido */
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(4 * 190px + 3 * var(--space-4));
  overflow: hidden;
}

.mdl-vselect__track {
  display: flex;
  gap: var(--space-4);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mdl-vthumb {
  /* Ancho fijo: se ven 4 centrados; el resto se pagina con las flechas */
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--duration-base) var(--ease-default);
}
.mdl-vthumb__img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  filter: saturate(0.6) opacity(0.6);
  transition: filter var(--duration-base) var(--ease-default);
}
.mdl-vthumb__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}@media (hover: hover){
.mdl-vthumb:hover { color: var(--text-secondary); }}@media (hover: hover){
.mdl-vthumb:hover .mdl-vthumb__img { filter: none; }}
.mdl-vthumb.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--color-red);
}
.mdl-vthumb.is-active .mdl-vthumb__img { filter: none; }

/* Stepper (mobile): nombre + precio; oculto en desktop */
.mdl-vselect__current { display: none; }

/* Panel de la versión activa */
.mdl-vpanel {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-soft);
}

.mdl-vpanel.is-swap { animation: mdlPanelIn 480ms cubic-bezier(0.16, 1, 0.3, 1) both; }

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

.mdl-vpanel__media { text-align: center; }

.mdl-vpanel__img {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

.mdl-vpanel__name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}

.mdl-vpanel__price {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mdl-vpanel__price strong {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.mdl-vpanel__engine {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.mdl-vpanel__specs-label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mdl-vpanel__specs {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
}

.mdl-vpanel__specs li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.mdl-vpanel__specs li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

.mdl-vpanel__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 4px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-accent);
  cursor: pointer;
}@media (hover: hover){

.mdl-vpanel__all:hover { text-decoration: underline; }}

.mdl-vpanel__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* ── DISCLAIMER ── */
.mdl-disclaimer {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  max-width: 90ch;
}

.mdl-disclaimer--full {
  max-width: none;
  width: 100%;
}

.mdl-disclaimer a { color: var(--text-secondary); }

/* ════════════════════════════════════════════
   DESCARGAS — ficha técnica + catálogo
   ════════════════════════════════════════════ */
.mdl-docs {
  padding-block: var(--space-10);
  background: var(--surface-dark-1);
  color: var(--text-inverse);
}

.mdl-docs__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
}

.mdl-docs__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
}

.mdl-docs__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.68);
  max-width: 38ch;
}

.mdl-docs__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
  color: var(--text-inverse);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-out);
}@media (hover: hover){

.mdl-docs__card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.36);
  transform: translateY(-3px);
}}

.mdl-docs__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(237,0,0,.16);
  color: #ff5252;
}

.mdl-docs__card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mdl-docs__card-title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.mdl-docs__card-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.6);
}

.mdl-docs__download {
  margin-left: auto;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--text-inverse);
  transition: background var(--duration-base) var(--ease-default);
}@media (hover: hover){

.mdl-docs__card:hover .mdl-docs__download {
  background: var(--color-red);
  border-color: var(--color-red);
}}

/* ════════════════════════════════════════════
   MODALES — specs y comparador
   ════════════════════════════════════════════ */
.pr-modal--center,
.pr-modal--full {
  display: grid;
  place-items: center;
}

.pr-modal--center .pr-modal__panel,
.pr-modal--full .pr-modal__panel {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mdl-specs-panel {
  width: min(760px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
}

.mdl-specs-carousel { position: relative; }

.mdl-specs-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mdl-specs-viewport::-webkit-scrollbar { display: none; }

.mdl-specs-track { display: flex; }

@media (min-width: 1025px) {
  .mdl-specs-list {
    columns: 2;
    column-gap: var(--space-6);
  }
  .mdl-specs-list li { break-inside: avoid; }}

.mdl-compare-panel {
  width: min(1080px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
}

.mdl-specs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

.mdl-specs-list li {
  position: relative;
  padding: 10px 0 10px 24px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  border-bottom: 1px solid var(--border-subtle);
}

.mdl-specs-list li:last-child { border-bottom: none; }

.mdl-specs-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

/* Comparador */
.mdl-compare-body { overflow: auto; }

.mdl-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.mdl-compare-table th,
.mdl-compare-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.mdl-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-1);
  border-bottom: 2px solid var(--border-default);
  /* Sombra para separarlo/contrastar cuando queda anclado */
  box-shadow: 0 10px 16px -12px rgba(0,0,0,.22);
}

.mdl-compare-table .mdl-compare-vname {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
}

.mdl-compare-table .mdl-compare-vprice {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

.mdl-compare-table .mdl-compare-vimg {
  width: 96px;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  display: block;
  margin-bottom: var(--space-1);
}

.mdl-compare-table tbody th {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  width: 34%;
  text-transform: none;   /* características en minúsculas (sentence case) */
}

.mdl-compare-check { color: var(--color-red); font-weight: var(--font-weight-bold); }
.mdl-compare-dash  { color: var(--text-muted); }

.mdl-compare-table tfoot td { border-bottom: none; padding-top: var(--space-3); }

/* ════════════════════════════════════════════
   COMPARADOR — página /comparador
   ════════════════════════════════════════════ */
.cmp-hero {
  padding: calc(var(--header-height-desktop, 72px) + 48px) 0 40px;
  background: var(--surface-dark-1);
  color: var(--text-inverse);
}

.cmp-hero__title {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}

.cmp-hero__subtitle {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: rgba(255,255,255,.72);
  max-width: 60ch;
}

.cmp {
  padding-block: var(--space-8) 100px;
  /* Recorta el sobrante horizontal de las "alas" de la barra sin romper el
     sticky (clip no crea contenedor de scroll como hidden). */
  overflow-x: clip;
}

.cmp-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Card SIN borde: Eliminar arriba, imagen (link), nombre (link), precio,
   selects y 2 CTAs. Flota sobre la página (como el estado vacío). */
.cmp-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Eliminar arriba, visible y ubicable */
.cmp-slot__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 2px 2px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.cmp-slot__remove span { text-decoration: underline; text-underline-offset: 3px; }@media (hover: hover){
.cmp-slot__remove:hover { color: var(--color-red); }}
.cmp-slot__remove svg { display: block; }
/* Placeholder invisible para que las cards vacías alineen su riel superior */
.cmp-slot__remove--ghost { visibility: hidden; pointer-events: none; }

/* Imagen del auto: contenida, centrada, SIN recorte. Contenedor más alto para
   que la foto del modelo (limitada por su alto) crezca y homologue con la
   silueta default (limitada por su ancho, se mantiene igual). */
.cmp-slot__preview {
  display: grid;
  place-items: center;
  height: 175px;
}
.cmp-slot__preview img {
  width: 100%;
  height: 175px;         /* altura explícita: evita el crecimiento circular del grid */
  object-fit: contain;
}
.cmp-slot__preview--link { transition: transform var(--transition-base); }@media (hover: hover){
.cmp-slot__preview--link:hover { transform: translateY(-2px) scale(1.01); }}

/* Nombre (link al detalle) + precio, alineados a la izquierda y en 2 líneas:
   "Modelo Versión" arriba y el precio abajo. */
.cmp-slot__meta {
  text-align: left;
  min-height: 3.4em;
}
.cmp-slot__name {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}@media (hover: hover){
.cmp-slot__name:hover { color: var(--color-red); }}
.cmp-slot__model {
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}
.cmp-slot__price {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.cmp-slot__price strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.cmp-slot__placeholder {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-top: var(--space-1);
}

.cmp-slot__selects {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* CTAs 50/50, redondeados (píldora base de .btn) */
.cmp-slot__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: 2px;
}
.cmp-slot__cta {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  padding-inline: var(--space-2);
}
/* Conócelo se oculta: la imagen y el nombre ya llevan al detalle. Cotizar
   queda en su columna del 50% (el grid sigue 1fr 1fr en escritorio). */
.cmp-slot__cta--know { display: none; }

.cmp-table-wrap { position: relative; }

.cmp-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Encabezado como BARRA delgada (estilo VW): modelo + año arriba, versión
   abajo (bold), con dividers entre columnas y un gris claro que contrasta
   sutilmente con la página blanca. Baja y con textos chicos. */
.cmp .mdl-compare-table thead th {
  position: sticky;
  top: var(--header-height-desktop, 72px);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
  padding-block: var(--space-2);
}
/* La barra abarca TODO el ancho: dos "alas" grises rellenan los gutters a los
   lados de la primera y última celda (sticky con ellas). Método robusto que sí
   funciona sobre celdas de tabla. */
.cmp .mdl-compare-table thead th:first-child::before,
.cmp .mdl-compare-table thead th:last-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-default);
  pointer-events: none;
}
.cmp .mdl-compare-table thead th:first-child::before { right: 100%; }
.cmp .mdl-compare-table thead th:last-child::after { left: 100%; }
.cmp .mdl-compare-vhead { border-left: 1px solid var(--border-subtle); }
.cmp .mdl-compare-vmodel {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
  text-transform: none;
  line-height: var(--leading-snug);
}
.cmp .mdl-compare-vname {
  display: block;
  margin-top: 1px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  text-transform: none;
  line-height: var(--leading-snug);
}

/* La tabla siempre cabe (nunca scroll horizontal): ancho fijo + wrap */
.cmp .mdl-compare-table { table-layout: fixed; }
.cmp .mdl-compare-table th,
.cmp .mdl-compare-table td { overflow-wrap: break-word; }
/* ── Controles: switch "Solo diferencias" ── */
.cmp-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}
.cmp-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}
.cmp-switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmp-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-default);
  transition: background var(--transition-fast);
  flex: none;
}
.cmp-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--transition-fast);
}
.cmp-switch__input:checked + .cmp-switch__track { background: var(--color-red); }
.cmp-switch__input:checked + .cmp-switch__track::after { transform: translateX(18px); }
.cmp-switch__input:focus-visible + .cmp-switch__track { outline: 2px solid var(--color-red); outline-offset: 2px; }
.cmp-switch__label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--text-primary); }

/* ── Categorías (acordeón): un <tbody> por categoría ── */
.cmp-cat__head th {
  padding: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-default);
}
.cmp-cat__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
}
.cmp-cat__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}
.cmp-cat__chev {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  transition: transform var(--transition-base);
}
.cmp-cat.is-open .cmp-cat__chev { transform: rotate(180deg); }

/* Colapso: por defecto las filas de una categoría cerrada se ocultan */
.cmp-cat:not(.is-open) .cmp-row { display: none; }

/* Modo "solo diferencias": oculta filas iguales y categorías sin diferencias,
   y fuerza mostrar las diferencias aunque la categoría esté colapsada */
.cmp--diff-only .cmp-row.is-same { display: none; }
.cmp--diff-only .cmp-cat .cmp-row:not(.is-same) { display: table-row; }
.cmp--diff-only .cmp-cat--all-same { display: none; }
/* En modo diferencias las filas se muestran aunque la categoría esté cerrada:
   el chevron refleja ese estado (abierto) para no confundir. */
.cmp--diff-only .cmp-cat:not(.cmp-cat--all-same) .cmp-cat__chev { transform: rotate(180deg); }

.cmp-diff-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Alinea el título de categoría con las etiquetas de característica al mismo
   borde izquierdo (sin sangría en la primera columna), como en la referencia. */
.cmp .cmp-compare tbody th { padding-left: 0; }

@media (max-width: 767px) {
  .cmp-slots { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .cmp { padding-block: var(--space-6) 56px; }
  .cmp .mdl-compare-table thead th { top: var(--header-height-mobile, 60px); padding-block: var(--space-2); }
  /* Imagen más baja para que el bloque no quede tan alto en mobile */
  .cmp-slot { gap: var(--space-2); }
  .cmp-slot__preview,
  .cmp-slot__preview img,
  .cmp-slot__silhouette { height: 88px; }
  .cmp-slot__meta { min-height: 2.6em; }
  .cmp-slot__name { font-size: var(--text-sm); }
  .cmp-slot__price { font-size: var(--text-xs); }
  .cmp-slot__placeholder { font-size: var(--text-xs); }
  .cmp-slot__select { font-size: var(--text-sm); padding-inline: var(--space-2); }
  /* Barra 50/50: columna de etiquetas angosta, versiones iguales y amplias */
  .cmp .mdl-compare-table th,
  .cmp .mdl-compare-table td { padding: var(--space-2); font-size: var(--text-xs); }
  .cmp .mdl-compare-table thead th { padding-inline: var(--space-2); }
  .cmp .mdl-compare-vmodel { font-size: 10px; white-space: nowrap; }
  .cmp .mdl-compare-vname { font-size: var(--text-xs); white-space: nowrap; }

  /* ── Reflow mobile (tipo VW): etiqueta ARRIBA a lo ancho y valores 50/50
     debajo. Toda la tabla pasa a bloque para que las filas ocupen el ancho;
     el sticky se ancla en el THEAD (no en el th) para que la barra se pegue
     bajo el header a lo largo de toda la tabla. ── */
  .cmp .cmp-compare { display: block; }
  .cmp .cmp-compare thead,
  .cmp .cmp-compare tbody { display: block; width: 100%; }

  /* Barra de versiones sticky: se ancla el thead completo (bloque alto = tabla) */
  .cmp .cmp-compare thead {
    position: sticky;
    top: var(--header-height-mobile, 60px);
    z-index: 2;
  }
  .cmp .cmp-compare thead th { position: static; }
  .cmp .cmp-compare thead tr { display: flex; }
  .cmp .cmp-compare thead th:first-child { flex: 0 0 0; width: 0; padding: 0; }
  .cmp .cmp-compare thead .mdl-compare-vhead { flex: 1 1 0; border-left: none; }
  .cmp .cmp-compare thead .mdl-compare-vhead + .mdl-compare-vhead {
    border-left: 1px solid var(--border-subtle);
  }

  /* Encabezado de categoría a todo lo ancho (una sola columna) */
  .cmp .cmp-compare .cmp-cat__head { display: flex; }
  .cmp .cmp-compare .cmp-cat__head th { display: block; flex: 1 1 100%; }

  /* Fila de característica: etiqueta full-width arriba, valores 50/50 abajo */
  .cmp .cmp-compare .cmp-row {
    display: flex;
    flex-wrap: wrap;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
  }
  .cmp .cmp-compare .cmp-row th,
  .cmp .cmp-compare .cmp-row td { border: none; padding: 0; }
  .cmp .cmp-compare .cmp-row th {
    flex: 1 1 100%;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  /* base 40%: junto a la etiqueta (100%) suman >100% → los valores bajan de
     línea y ahí crecen para repartirse 50/50 */
  .cmp .cmp-compare .cmp-row td { flex: 1 1 40%; min-width: 0; }
  .cmp .cmp-compare .cmp-row td + td {
    padding-left: var(--space-3);
    border-left: 1px solid var(--border-subtle);
  }
  /* Colapso y modo diferencias con la especificidad correcta (el display:flex
     de la fila es más específico que las reglas base de ocultar) */
  .cmp .cmp-compare .cmp-cat:not(.is-open) .cmp-row { display: none; }
  .cmp .cmp-compare.cmp--diff-only .cmp-cat--all-same { display: none; }
  .cmp .cmp-compare.cmp--diff-only .cmp-row.is-same { display: none; }
  .cmp .cmp-compare.cmp--diff-only .cmp-cat .cmp-row:not(.is-same) { display: flex; }

  /* Un solo CTA (Cotizar): la imagen y el nombre ya llevan al detalle.
     Menos alto y más directo en pantallas chicas. */
  .cmp-slot__ctas { grid-template-columns: 1fr; }
  .cmp-slot__cta--know { display: none; }
  .cmp-slot__cta { font-size: var(--text-sm); }
  /* Textos pegados a la izquierda, alineados con los selects. El modelo en su
     propia línea (cards angostas) para que quede uniforme entre versiones. */
  .cmp-slot__meta { text-align: left; min-height: 0; }
  .cmp-slot__model { display: block; }
  .cmp-cat__toggle { padding-block: var(--space-3); }
  .cmp-cat__title { font-size: var(--text-sm); }}

/* ── ACCESORIOS ── */
.mdl-acc {
  position: relative;
}

.mdl-acc__viewport {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Alinea el arranque de las cards con el texto del .container (max 1440)
     y deja que asome la siguiente card. */
  --acc-inset: max(var(--space-5), calc((100vw - var(--container-2xl)) / 2 + var(--space-5)));
  scroll-padding-left: var(--acc-inset);
  scroll-behavior: smooth;
}

@media (min-width: 1280px) {
  .mdl-acc__viewport {
    --acc-inset: max(var(--space-8), calc((100vw - var(--container-2xl)) / 2 + var(--space-8)));
  }}

.mdl-acc__viewport::-webkit-scrollbar { display: none; }

.mdl-acc__track {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  /* right padding pequeño para que siempre asome la siguiente card */
  padding: 8px var(--space-6) 16px var(--acc-inset);
  width: max-content;
}

.mdl-acc__card {
  flex: 0 0 auto;
  width: min(320px, 72vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
  transition: box-shadow var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default);
}@media (hover: hover){

.mdl-acc__card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-3px);
}}

.mdl-acc__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-2);
}

.mdl-acc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3);
}

.mdl-acc__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  min-height: 2.6em;
}

.mdl-acc__price {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-red);
}

.mdl-acc__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}

.mdl-acc__actions .btn,
.mdl-acc__actions .mdl-acc__more {
  text-align: center;
  justify-content: center;
}

.mdl-acc__more {
  background: none;
  border: none;
  padding: 6px 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color var(--duration-fast);
}@media (hover: hover){

.mdl-acc__more:hover {
  color: var(--color-red);
}}

/* Arrows: same mechanism as la galería (.container .mdl-gal__nav);
   solo ajustamos el top al padding propio de .mdl-acc (96px) */
@media (min-width: 1025px) {
  .mdl-acc__arrows { top: 100px; }
}

.mdl-acc__card[data-acc-detail] .mdl-acc__img {
  cursor: pointer;
}

.mdl-disclaimer--inline {
  white-space: nowrap;
}

.mdl-disclaimer--inline a {
  font-weight: var(--font-weight-bold);
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Accesorio detail modal ── */
.mdl-acc-detail-panel {
  width: min(820px, 92vw);
}

.mdl-acc-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.mdl-acc-detail__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-2);
}

.mdl-acc-detail__name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}

.mdl-acc-detail__info .mdl-acc-detail__price {
  margin-top: var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-red);
  line-height: 1.2;
}

.mdl-acc-detail__label {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.mdl-acc-detail__info {
  max-height: 60vh;
  overflow-y: auto;
}

.mdl-acc-detail__items {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.mdl-acc-detail__items li {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.mdl-acc-detail__items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

.mdl-cta__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.mdl-cta__title {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-inverse);
}

.mdl-cta__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-md);
  color: rgba(255,255,255,.72);
}

.mdl-cta__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── STICKY BAR — píldora flotante glass, homologada con el home ── */
.mdl-sticky {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: var(--z-sticky);
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  max-width: calc(100vw - 24px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(24px);
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}

.mdl-sticky.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* La píldora flota sobre el final del scroll; damos aire para no tapar
   el texto legal del footer. */
.footer { padding-bottom: 120px; }

.mdl-sticky__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px 10px 8px var(--space-4);
}

.mdl-sticky__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mdl-sticky__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: 1.2;
}

.mdl-sticky__price {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.6);
}

.mdl-sticky__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════
   MOBILE + TABLET (iPad usa el layout mobile)
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .mdl-feature,
  .mdl-360,
  .mdl-versions,
  .mdl-acc {
    padding-block: 40px;
  }

  /* Homologa el tamaño de títulos/subtítulos con los del home en mobile */
  .mdl-feature__title { font-size: 28px; }
  .mdl-feature__intro { font-size: 16px; }

  .mdl-gal { padding-block: 56px; scroll-margin-top: 40px; }
  .mdl-360 { padding-block: 56px; scroll-margin-top: 40px; }
  /* Mismo anclaje que las demás secciones para que el top-bar no tape el título */
  .mdl-versions { scroll-margin-top: 40px; }
  .mdl-acc { scroll-margin-top: 40px; }

  .mdl-feature__head { margin-bottom: 32px; }

  /* Hero mobile homologado con el home: media arriba, texto abajo */
  .mdl-hero {
    display: block;
    min-height: 0;
    background: var(--bg-darker, #0a0a0a);
  }

  .mdl-hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .mdl-hero__overlay {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 15%, transparent 35%),
      linear-gradient(to top, var(--bg-darker, #0a0a0a) 0%, transparent 15%);
  }

  .mdl-hero__content { padding: 24px 16px 40px; }

  .mdl-hero__actions { gap: 16px; }
  .mdl-hero__actions .btn { flex: 1 1 100%; }

  .mdl-hero__scroll { display: none; }

  .mdl-nav__inner { padding: 0 16px; gap: var(--space-3); }

  /* Galería mobile: cards 85vw con peek */
  .mdl-gal__card { width: 85vw; }

  .mdl-gal__imgwrap {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  .mdl-gal__caption { font-size: var(--text-sm); }

  .mdl-gal__nav { margin-top: var(--space-3); }
  .mdl-gal__arrow { width: 36px; height: 36px; }

  /* 2 columnas en mobile (specificity para ganarle a la regla base que
     va después en el archivo) + valor un poco más chico para que quepa */
  .mdl-stats[data-mdl-stats] {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
    padding: 20px 16px;
  }
  .mdl-stats[data-mdl-stats] .mdl-stats__value { font-size: var(--text-xl); }

  /* 360 */
  .mdl-360__stage { aspect-ratio: 4 / 3; padding: 4%; }
  .mdl-360__swatch { width: 26px; height: 26px; }

  /* Versiones: header compacto (el comparar ahora vive en el panel) */
  .mdl-versions__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .mdl-versions__head .mdl-feature__head { margin-bottom: var(--space-4); }

  /* Selector: sin thumbnails; nombre + precio con flechas a los lados */
  .mdl-vselect { gap: var(--space-2); border-bottom: none; margin-bottom: var(--space-4); }
  .mdl-vselect__viewport { display: none; }
  .mdl-vselect__arrow { display: flex; }
  .mdl-vselect__current {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }
  .mdl-vselect__cur-name {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
  }
  .mdl-vselect__cur-price {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .mdl-vpanel {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: 20px 16px;
  }

  .mdl-vpanel__actions { gap: 16px; }
  .mdl-vpanel__actions .btn { flex: 1 1 100%; }

  /* Descargas */
  .mdl-docs__grid { grid-template-columns: 1fr; gap: var(--space-3); }

  /* Accesorios */
  .mdl-acc__viewport { --acc-inset: var(--space-3); }
  .mdl-acc__card { flex: 0 0 min(85vw, 340px); }
  .mdl-acc-detail__grid { grid-template-columns: 1fr; }
  /* Controles del carrusel abajo, como el resto de galerías */
  .mdl-acc__arrows { margin-top: var(--space-3); }
  /* Disclaimer: que envuelva y respete el margen del container */
  .mdl-disclaimer--inline { white-space: normal; }

  /* Modales centrados (características, kit) → bottom sheet como los demás */
  .pr-modal--center { display: flex; align-items: flex-end; }
  .pr-modal--center .pr-modal__panel {
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 100%;
  }
  .mdl-specs-panel,
  .mdl-acc-detail-panel {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
  }

  /* En mobile NO es píldora: barra completa al ancho, cuadrada, mismo
     fondo glass oscuro, 2 CTAs 50/50 */
  .mdl-sticky {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.35);
    transform: translateY(100%);
  }
  .mdl-sticky.is-visible { transform: translateY(0); }
  .mdl-sticky__inner { padding: 10px 16px; gap: 10px; }
  .mdl-sticky__info { display: none; }
  .mdl-sticky__actions { width: 100%; gap: 10px; }
  .mdl-sticky__actions .btn { flex: 1 1 50%; }

  /* Comparador ocupa toda la pantalla en mobile */
  .mdl-compare-panel {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .mdl-compare-table .mdl-compare-vimg { width: 100px; }
}

/* ── STATS (performance) ── */
.mdl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.mdl-stats__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.mdl-stats__value {
  margin: var(--space-1) 0 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.mdl-stats__unit {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Specs pager ── */
.mdl-specs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.mdl-specs-nav__arrow {
  width: 40px;
  height: 40px;
  display: none;
}

.mdl-specs-nav__count {
  display: none;
  min-width: 48px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Escritorio: flechas + contador; se ocultan los dots */
@media (min-width: 1025px) {
  .mdl-specs-nav__arrow { display: inline-flex; }
  .mdl-specs-nav__count { display: block; }
  .mdl-specs-nav .mdl-specs-pager { display: none; }
}

.mdl-specs-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.mdl-specs-pager__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--border-subtle);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-base) var(--ease-default);
}

.mdl-specs-pager__dot.is-active {
  background: var(--color-red);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mdl-gal__img,
  .mdl-sticky,
  .mdl-acc__card,
  .mdl-360__swatch,
  .mdl-docs__card {
    transition: none;
  }
  .mdl-vpanel.is-swap,
  .mdl-360__hint svg {
    animation: none;
  }
  .mdl-gal__viewport {
    scroll-behavior: auto;
  }
}