/* ============================================================
   ESPACIO HARLEY-DAVIDSON BARCELONA — main.css v3
   Sistema de diseño completo: variables, reset, componentes
   Secciones alternadas: blanco / gris claro / oscuro / naranja
   ============================================================ */

/* ── Variables ── */
:root {
  /* Colores */
  --naranja:       #E8500A;
  --naranja-dark:  #c44008;
  --naranja-light: #f06030;
  --negro:         #111111;
  --negro-medio:   #1a1a1a;
  --negro-suave:   #222222;
  --blanco:        #ffffff;
  --gris-claro:    #f4f4f4;
  --gris-medio:    #e8e8e8;
  --texto-oscuro:  #1a1a1a;
  --texto-medio:   #444444;
  --texto-claro:   #888888;
  --borde:         #e0e0e0;
  --borde-oscuro:  rgba(255,255,255,0.1);

  /* Tipografía */
  --font-head: 'Oswald', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;
  --fs-5xl: 3.5rem;

  /* Espaciado */
  --sec-pad:    5rem;
  --sec-pad-sm: 2.5rem;

  /* Bordes */
  --radius:    8px;
  --radius-sm: 4px;
  --radius-lg: 12px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow:    0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.18);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--texto-oscuro); background: var(--blanco); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
address { font-style: normal; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Secciones ── */
.sec-light  { background: var(--blanco); }
.sec-gray   { background: var(--gris-claro); }
.sec-dark   { background: var(--negro); color: var(--blanco); }
/* --naranja de fondo con texto blanco encima solo da 3.76:1 (falla
   WCAG AA, exige 4.5:1) — se usa --naranja-dark en su lugar. */
.sec-orange { background: var(--naranja-dark); color: var(--blanco); }
.sec-pad    { padding: var(--sec-pad) 0; }
.sec-pad-sm { padding: var(--sec-pad-sm) 0; }

/* ── Cabeceras de sección ── */
.sec-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* --naranja (#E8500A) da solo 3.4:1 sobre fondos claros — no llega
     al 4.5:1 que exige WCAG AA. --naranja-dark sí lo cumple. */
  color: var(--naranja-dark);
  margin-bottom: 0.5rem;
}

.sec-title {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: inherit;
}

.sec-dark .sec-title { color: var(--blanco); }
.sec-light .sec-title,
.sec-gray .sec-title  { color: var(--negro); }

.sec-subtitle {
  font-size: var(--fs-lg);
  color: var(--texto-medio);
  line-height: 1.7;
}

.sec-dark .sec-subtitle { color: rgba(255,255,255,0.7); }

.sec-divider {
  width: 48px;
  height: 3px;
  background: var(--naranja);
  margin-top: 1rem;
}

.sec-head--center { text-align: center; }
.sec-head--center .sec-divider { margin: 1rem auto 0; }

.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ── Botones ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  /* --naranja de fondo con texto blanco da 3.76:1 — no llega al
     4.5:1 de WCAG AA. --naranja-dark sí lo cumple (5.1:1). */
  background: var(--naranja-dark);
  color: var(--blanco);
  border-color: var(--naranja-dark);
}
.btn-primary:hover { background: #a83607; border-color: #a83607; transform: translateY(-1px); }

.btn-outline-dark {
  background: transparent;
  color: var(--blanco);
  border-color: var(--blanco);
}
.btn-outline-dark:hover { background: var(--blanco); color: var(--negro); }

.btn-outline-light {
  background: transparent;
  color: var(--negro);
  border-color: var(--negro);
}
.btn-outline-light:hover { background: var(--negro); color: var(--blanco); }

.sec-dark .btn-outline-light {
  color: var(--blanco);
  border-color: rgba(255,255,255,0.4);
}
.sec-dark .btn-outline-light:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

.btn-lg { padding: 0.9rem 2.25rem; font-size: 0.9rem; }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.75rem; }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
}
/* --naranja y el verde original solo dan 3.76:1 y 2.87:1 con blanco —
   por debajo del 4.5:1 de WCAG AA. Se oscurecen ambos fondos. */
.badge-orange { background: var(--naranja-dark); color: var(--blanco); }
.badge-dark   { background: var(--negro); color: var(--blanco); }
.badge-green  { background: #1e8449; color: var(--blanco); }

/* ── Formularios ── */
.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--texto-oscuro);
  margin-bottom: 0.4rem;
}

.form-required {
  color: var(--naranja);
  font-weight: 700;
  margin-left: 0.15rem;
}

/* Etiqueta completa en negrita cuando el campo es obligatorio */
.form-label:has(.form-required) {
  font-weight: 700;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--fs-md);
  font-family: var(--font-body);
  color: var(--texto-oscuro);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-control:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(232,80,10,0.12);
}

.form-control.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.12);
}

.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 18px; padding-right: 2.5rem; }

.form-error {
  display: none;
  font-size: var(--fs-xs);
  color: #e74c3c;
  margin-top: 0.3rem;
}
.form-error.visible { display: block; }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--naranja);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.form-check label { font-size: var(--fs-sm); color: var(--texto-medio); line-height: 1.5; }
.form-check a { color: var(--naranja); }

/* Mensaje de éxito del formulario */
.form-success {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  background: rgba(39,174,96,0.05);
  border: 1px solid rgba(39,174,96,0.2);
  border-radius: var(--radius);
}
.form-success.visible { display: block; }
.form-success__icon { font-size: 3rem; color: #27ae60; margin-bottom: 1rem; }
.form-success__title { font-family: var(--font-head); font-size: var(--fs-2xl); color: var(--negro); margin-bottom: 0.75rem; }
.form-success__text { color: var(--texto-medio); }

/* Backoffice: form-control en fondo oscuro */
.admin-body .form-control {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: #e0e0e0;
}
.admin-body .form-control:focus {
  border-color: var(--naranja);
  background: rgba(255,255,255,0.08);
}
.admin-body .form-label { color: #ccc; }

/* ── TOPBAR ── */
.topbar {
  background: var(--negro);
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  gap: 1rem;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.topbar__item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.72rem;
  transition: color 0.2s;
}
.topbar__item:hover { color: var(--naranja); }
.topbar__item svg { width: 13px; height: 13px; flex-shrink: 0; }

.topbar__right { display: flex; align-items: center; gap: 1rem; }

.topbar__social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.topbar__social a {
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.topbar__social a:hover { color: var(--naranja); }
.topbar__social svg { width: 15px; height: 15px; display: block; }

/* ── HEADER ── */
.header {
  background: var(--negro);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: box-shadow 0.3s;
}

.header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 72px;
}

.header__logo img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(232,80,10,0.4);
  transition: border-color 0.2s;
}
.header__logo:hover img { border-color: var(--naranja); }

.header__brand {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header__brand-name {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blanco);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}
.header__brand-name span { color: var(--naranja); }

.header__brand-sub {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header__phones { display: flex; flex-direction: column; align-items: flex-end; }
.header__phone-label { font-size: 0.65rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; }
.header__phone-num { font-family: var(--font-head); font-size: 1rem; color: var(--blanco); font-weight: 600; letter-spacing: 0.05em; transition: color 0.2s; }
.header__phone-num:hover { color: var(--naranja); }

/* ── NAVEGACIÓN ── */
.nav {
  background: var(--negro-suave);
  border-bottom: 2px solid var(--naranja);
  position: sticky;
  top: 72px;
  z-index: 499;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__menu {
  display: flex;
  align-items: center;
}

.nav__link {
  display: block;
  padding: 0.875rem 1rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s, background 0.2s;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--naranja);
  transition: left 0.2s, right 0.2s;
}

.nav__link:hover,
.nav__link.active {
  color: var(--blanco);
}

.nav__link:hover::after,
.nav__link.active::after {
  left: 0; right: 0;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blanco);
  transition: all 0.3s;
  transform-origin: center;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 498;
}
.nav-overlay.open { display: block; }

/* ── HERO SLIDER ── */
.hero {
  position: relative;
  height: clamp(480px, 75vh, 800px);
  overflow: hidden;
  background: var(--negro);
}

.hero__slides { position: relative; width: 100%; height: 100%; }

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__slide.active { opacity: 1; }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.hero .container {
  height: 100%;
  display: flex;
  align-items: center;
}

.hero__badge {
  display: inline-block;
  background: var(--naranja-dark);
  color: var(--blanco);
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.hero__title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--blanco);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

.hero__title span { color: var(--naranja); }

.hero__text {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.8);
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 500px;
}

/* Aviso destacado dentro de un slide del hero (p. ej. cierre por
   vacaciones) — necesita más peso visual que el texto normal del
   slide, que aquí queda relegado a subtítulo tras el aviso. */
.hero__notice {
  display: block;
  background: rgba(0,0,0,0.35);
  border-left: 4px solid var(--naranja);
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.85rem;
  font-weight: 700;
  font-size: 1.08em;
  color: var(--blanco);
  line-height: 1.5;
}

.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__prev,
.hero__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--blanco);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.hero__prev { left: 1.25rem; }
.hero__next { right: 1.25rem; }
.hero__prev:hover, .hero__next:hover { background: var(--naranja); border-color: var(--naranja); }
.hero__prev svg, .hero__next svg { width: 20px; height: 20px; }

.hero__controls {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.hero__dot {
  /* Área táctil real de 24×24px (mínimo recomendado) — el punto
     visible sigue siendo pequeño, va dentro como ::before. Lighthouse
     marcaba esto como "área táctil insuficiente" (8×8px). */
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.2s;
}
.hero__dot.active::before { background: var(--naranja); width: 24px; border-radius: 4px; }

/* ── HERO: VARIANTES DE LAYOUT ── */

/* pricing: lista de precios en pastillas */
.hero__prices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.hero__price-pill {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  backdrop-filter: blur(4px);
}
.hero__price-label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero__price-value {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--blanco);
}

/* columns: nombres de modelo en fila, texto centrado */
.hero__slide--columns .hero__content { max-width: 720px; text-align: center; align-items: center; }
.hero__slide--columns .hero__actions { justify-content: center; }
.hero__columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: 0.85rem 0;
}
.hero__column-item {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 1.25rem;
  position: relative;
}
.hero__column-item + .hero__column-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: rgba(255,255,255,0.3);
}

/* event: fecha destacada */
.hero__event-date {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--naranja);
  border: 1px solid var(--naranja);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.75rem;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .hero__prices { gap: 0.5rem; }
  .hero__price-pill { padding: 0.4rem 0.75rem; }
  .hero__columns { flex-direction: column; gap: 0.5rem; border: none; padding: 0; }
  .hero__column-item { padding: 0; }
  .hero__column-item + .hero__column-item::before { display: none; }
  .hero__slide--columns .hero__content { text-align: left; align-items: flex-start; }
  .hero__slide--columns .hero__actions { justify-content: flex-start; }
}

/* ── BIENVENIDA ── */
.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.welcome-img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.welcome-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.welcome-stat__num {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--naranja);
  line-height: 1;
}

.welcome-stat__label {
  font-size: var(--fs-xs);
  color: var(--texto-claro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* ── GRID DE MOTOS (4 tiles) ── */
.motos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.moto-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: block;
}

.moto-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.moto-tile:hover img { transform: scale(1.06); }

.moto-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 60%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  transition: background 0.3s;
}

.moto-tile:hover .moto-tile__overlay {
  background: linear-gradient(to top, rgba(232,80,10,0.85) 0%, rgba(0,0,0,0.2) 60%);
}

.moto-tile__label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-head);
}

.moto-tile__title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* ── PILARES ── */
.pilares-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.pilar-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  background: var(--blanco);
  transition: all 0.3s;
}

.pilar-card:hover {
  border-color: var(--naranja);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.pilar-card__icon {
  width: 64px;
  height: 64px;
  background: rgba(232,80,10,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--naranja);
  transition: all 0.3s;
}
.pilar-card__icon svg { width: 28px; height: 28px; }
.pilar-card:hover .pilar-card__icon { background: var(--naranja); color: var(--blanco); }

.pilar-card__title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--negro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.pilar-card__text {
  font-size: var(--fs-sm);
  color: var(--texto-medio);
  line-height: 1.7;
}

/* ── MODELOS GRID ── */
.modelos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.modelo-card {
  background: var(--negro-medio);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
}

.modelo-card:hover {
  border-color: var(--naranja);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(232,80,10,0.2);
}

.modelo-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.modelo-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.modelo-card:hover .modelo-card__img { transform: scale(1.05); }
.modelo-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; }

.modelo-card__body { padding: 1.25rem; }
.modelo-card__familia { font-size: var(--fs-xs); color: var(--naranja); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.modelo-card__title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; color: var(--blanco); margin-bottom: 0.5rem; }
.modelo-card__specs { font-size: var(--fs-xs); color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 1rem; }
.modelo-card__actions { display: flex; gap: 0.5rem; }

/* ── OCASIÓN GRID ── */
.ocasion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ocasion-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
}

.ocasion-card:hover {
  border-color: var(--naranja);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.ocasion-card__img-wrap, .ocasion-card__img-link { position: relative; overflow: hidden; aspect-ratio: 16/9; display: block; }
.ocasion-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ocasion-card:hover .ocasion-card__img { transform: scale(1.04); }
.ocasion-card__badges { position: absolute; top: 0.75rem; left: 0.75rem; }

/* Nombre siempre visible sobre la imagen (galería de customizaciones) */
.ocasion-card__name-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem 1rem 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  color: var(--blanco);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Overlay "VER PROYECTO" al hacer hover */
.ocasion-card__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.3s;
}
.ocasion-card:hover .ocasion-card__overlay { opacity: 1; }
.ocasion-card__overlay-text {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blanco);
  border: 1px solid var(--blanco);
  padding: 0.6rem 1.25rem;
}

.ocasion-card__body { padding: 1.25rem; }
.ocasion-card__year { font-size: var(--fs-xs); color: var(--naranja); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.ocasion-card__title, .ocasion-card__model { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; color: var(--negro); margin-bottom: 0.75rem; }
.ocasion-card__title a, .ocasion-card__model a { color: inherit; }
.ocasion-card__title a:hover, .ocasion-card__model a:hover { color: var(--naranja); }

.ocasion-card__specs { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ocasion-card__spec { display: flex; align-items: center; gap: 0.3rem; font-size: var(--fs-xs); color: var(--texto-claro); }
.ocasion-card__spec svg { width: 13px; height: 13px; flex-shrink: 0; }

.ocasion-card__extras { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.ocasion-card__extra { font-size: 0.65rem; background: rgba(232,80,10,0.08); color: var(--naranja-dark); padding: 0.2rem 0.5rem; border-radius: 2px; font-weight: 500; }

.ocasion-card__price-row { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; }
.ocasion-card__price { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--naranja); }
.ocasion-card__price-old { font-size: var(--fs-sm); color: var(--texto-claro); text-decoration: line-through; }

/* ── FILTROS DE OCASIÓN ── */
.ocasion-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.ocasion-filters__search {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.ocasion-filters__search svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--texto-claro);
  pointer-events: none;
}

.ocasion-filters__search .form-control {
  padding-left: 2.5rem;
}

/* ── CTA BANNER ── */
.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-banner__title {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cta-banner__sub {
  font-size: var(--fs-sm);
  /* 0.8 de opacidad sobre el fondo naranja se quedaba en ~3.8:1 —
     con 0.95 y el fondo ya oscurecido llega al 4.5:1 de WCAG AA. */
  color: rgba(255,255,255,0.95);
  margin-top: 0.35rem;
}

.cta-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── TALLER SPLIT ── */
.taller-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.taller-split__img {
  overflow: hidden;
}

.taller-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 480px;
}

.taller-split__content {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.taller-split__content .btn {
  align-self: flex-start;
}

.taller-list { list-style: none; }

.taller-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.taller-list__item::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--naranja);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.45rem;
}

/* ── INSTAGRAM GRID ── */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.instagram-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  display: block;
}

.instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.instagram-item:hover img { transform: scale(1.08); }

.instagram-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(232,80,10,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.instagram-item:hover .instagram-item__overlay { opacity: 1; }
.instagram-item__overlay svg { width: 32px; height: 32px; color: var(--blanco); }

/* ── BLOG GRID ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
}

.blog-card:hover {
  border-color: var(--naranja);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.blog-card__img-link { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; }
.blog-card__img-wrap { overflow: hidden; aspect-ratio: 16/9; }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-card:hover .blog-card__img { transform: scale(1.04); }

.blog-card__img-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  padding: 1.5rem 1rem 0.75rem;
  pointer-events: none;
}
.blog-card__img-overlay .blog-card__title {
  color: var(--blanco);
  margin-bottom: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.blog-card__img-link:hover .blog-card__img-overlay .blog-card__title { color: var(--naranja); }

.blog-card__body { padding: 1.25rem; }
.blog-card__date { font-size: var(--fs-xs); color: var(--naranja); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.blog-card__title { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--negro); line-height: 1.35; margin-bottom: 0.75rem; }
.blog-card__title a:hover { color: var(--naranja); }
.blog-card__excerpt { font-size: var(--fs-sm); color: var(--texto-medio); line-height: 1.65; margin-bottom: 1rem; }

/* ── PAGE HERO (páginas internas) ── */
.page-hero {
  position: relative;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  padding: 7rem 0 4rem;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

/* Heroes con párrafo (page-hero__text) llevan más contenido que el diseño
   de altura fija heredado de pages.css: forzamos altura automática para
   que el bloque de texto no se desborde por encima del header. */
.page-hero:has(.page-hero__text) {
  height: auto;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%);
}

.page-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
}

.breadcrumb a { color: rgba(255,255,255,0.6); }
.breadcrumb a:hover { color: var(--naranja); }
.breadcrumb__sep { color: rgba(255,255,255,0.3); }

/* Breadcrumb fuera del hero oscuro (fondo blanco de la página).
   Doble clase para ganar en especificidad a las reglas .breadcrumb de pages.css,
   que además añade un separador "›" duplicado (::after) y pinta los span en naranja. */
.breadcrumb.breadcrumb--onlight,
.breadcrumb.breadcrumb--onlight a,
.breadcrumb.breadcrumb--onlight span { color: var(--texto-medio); }
.breadcrumb.breadcrumb--onlight a:hover { color: var(--naranja); }
.breadcrumb.breadcrumb--onlight a::after { content: none; }
.breadcrumb.breadcrumb--onlight .breadcrumb__sep { color: var(--texto-claro); }

.page-hero__label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--naranja);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.page-hero__title {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--blanco);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.page-hero__title span { color: var(--naranja); }

.page-hero__text {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  line-height: 1.65;
}

/* ── CONTACTO ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; }

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  background: rgba(232,80,10,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--naranja);
  flex-shrink: 0;
}
.contact-info__icon svg { width: 20px; height: 20px; }

.contact-info__label { font-size: var(--fs-xs); color: var(--texto-claro); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.contact-info__value { font-size: var(--fs-md); color: var(--texto-oscuro); line-height: 1.6; }
.contact-info__value a { color: var(--naranja); }
.contact-info__value a:hover { text-decoration: underline; }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  height: 280px;
  border: 1px solid var(--borde);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ── FICHA DE MOTO ── */
.ficha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.ficha-gallery__main {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gris-claro);
  aspect-ratio: 4/3;
}

.ficha-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: var(--blanco);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 5;
}
.gallery-nav:hover { background: var(--naranja); }
.gallery-nav svg { width: 18px; height: 18px; }
.gallery-prev { left: 0.75rem; }
.gallery-next { right: 0.75rem; }

.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.gallery-thumb {
  width: 72px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  padding: 0;
  background: none;
}

.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active { border-color: var(--naranja); }

.ficha-familia { font-size: var(--fs-xs); color: var(--naranja); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 0.25rem; }
.ficha-titulo { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: var(--negro); text-transform: uppercase; line-height: 1.1; margin-bottom: 0.35rem; }
.ficha-anio { font-size: var(--fs-sm); color: var(--texto-claro); margin-bottom: 1.25rem; }

.ficha-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.25rem;
}

.ficha-spec__label { font-size: var(--fs-xs); color: var(--texto-claro); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.ficha-spec__val { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; color: var(--negro); }

.ficha-precio-block { margin-bottom: 1.25rem; }
.ficha-precio { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--naranja); line-height: 1; }
.ficha-precio-old { font-size: var(--fs-md); color: var(--texto-claro); text-decoration: line-through; margin-left: 0.5rem; }
.ficha-financiacion { font-size: var(--fs-sm); color: var(--texto-medio); margin-top: 0.35rem; }

.ficha-extras { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.ficha-extra { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; background: rgba(232,80,10,0.08); color: var(--naranja); padding: 0.3rem 0.65rem; border-radius: 2px; font-weight: 500; }

.ficha-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }

.ficha-section-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--negro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--naranja);
  display: inline-block;
}

.ficha-descripcion__text p { color: var(--texto-medio); line-height: 1.85; margin-bottom: 1rem; }

.ficha-video-wrap { margin-top: 2rem; }
.ficha-video { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius); overflow: hidden; }
.ficha-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── FOOTER ── */
.footer {
  background: var(--negro);
  color: rgba(255,255,255,0.65);
  padding-top: 4rem;
}

.footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 2px solid rgba(232,80,10,0.3);
}

.footer__tagline {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
}

.footer__address {
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
}
.footer__address a { color: rgba(255,255,255,0.5); }
.footer__address a:hover { color: var(--naranja); }

.footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.footer__social a { color: rgba(255,255,255,0.4); transition: color 0.2s; }
.footer__social a:hover { color: var(--naranja); }
.footer__social svg { width: 18px; height: 18px; display: block; }

.footer__col-title {
  display: block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--blanco);
  margin-bottom: 1rem;
}

.footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__link { font-size: var(--fs-sm); color: rgba(255,255,255,0.5); transition: color 0.2s; }
.footer__link:hover { color: var(--naranja); }

.footer__schedule-item { font-size: var(--fs-sm); color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 0.75rem; }
.footer__schedule-item strong { color: rgba(255,255,255,0.75); }

.footer__map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--naranja);
  border: 1px solid rgba(232,80,10,0.4);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  margin-top: 0.5rem;
}
.footer__map-btn:hover { background: var(--naranja); color: var(--blanco); border-color: var(--naranja); }

.footer__newsletter-text { font-size: var(--fs-sm); color: rgba(255,255,255,0.5); margin-bottom: 0.75rem; line-height: 1.6; }

.footer__form { display: flex; flex-direction: column; gap: 0.5rem; }

.footer__input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--blanco);
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  transition: border-color 0.2s;
  outline: none;
}
.footer__input::placeholder { color: rgba(255,255,255,0.3); }
.footer__input:focus { border-color: var(--naranja); }

.footer__submit {
  background: var(--naranja-dark);
  color: var(--blanco);
  border: none;
  padding: 0.7rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
}
.footer__submit:hover { background: #a83607; }

.footer__privacy-note { font-size: var(--fs-xs); color: rgba(255,255,255,0.3); margin-top: 0.5rem; }
/* El link solo se distinguía del texto normal por una opacidad
   ligeramente distinta (0.3 vs 0.4) — insuficiente para verlo como
   enlace sin depender del color. Se añade subrayado. */
.footer__privacy-note a { color: rgba(255,255,255,0.5); text-decoration: underline; }
.footer__privacy-note a:hover { color: var(--naranja); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}

/* 0.3/0.35 de opacidad sobre el footer casi negro se quedaban en
   2.65:1 y 3.19:1 — con 0.5 llegan al 4.5:1 de WCAG AA. */
.footer__copyright { font-size: var(--fs-xs); color: rgba(255,255,255,0.5); }

.footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__legal a { font-size: var(--fs-xs); color: rgba(255,255,255,0.5); transition: color 0.2s; text-decoration: underline; }
.footer__legal a:hover { color: var(--naranja); }

/* ── COOKIE BANNER ── */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 600px;
  background: var(--negro);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s, opacity 0.4s;
}

.cookie-banner.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }

.cookie-banner__text { font-size: var(--fs-sm); color: rgba(255,255,255,0.65); line-height: 1.5; flex: 1; }
.cookie-banner__text a { color: var(--naranja); }

.cookie-banner__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  background: var(--naranja);
  color: var(--blanco);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 12px rgba(232,80,10,0.4);
}

.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--naranja-dark); }
.back-to-top svg { width: 20px; height: 20px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .motos-grid { grid-template-columns: repeat(3, 1fr); }
  .pilares-grid { grid-template-columns: repeat(2, 1fr); }
  .modelos-grid { grid-template-columns: repeat(2, 1fr); }
  .ocasion-grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .welcome-grid { grid-template-columns: 1fr; gap: 2rem; }
  .welcome-img img { height: 300px; }
  .welcome-stats { grid-template-columns: repeat(4, 1fr); }
  .taller-split { grid-template-columns: 1fr; }
  .taller-split__img img { min-height: 300px; }
  .taller-split__content { padding: 3rem 2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ficha-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --sec-pad: 3.5rem; }

  .topbar { display: none; }

  /* En móvil el logo + "Espacio Harley-Davidson" + Pide Cita no caben
     en una sola línea de 72px — el subtítulo sobra (ya lo dice el
     resto de la página) y la altura pasa a mínima en vez de fija para
     que el nombre pueda partirse en 2 líneas sin desbordar el header. */
  .header__inner { height: auto; min-height: 72px; }
  .header__brand-sub { display: none; }

  /* Las flechas prev/next del hero están ancladas al centro vertical
     de todo el slide; en móvil el contenido apilado (badge+título+
     texto+botones) es tan alto que el centro cae encima del párrafo
     y las flechas tapan el texto. Se ocultan aquí — el swipe táctil
     y los puntos de abajo ya permiten navegar el slider sin ellas. */
  .hero__prev, .hero__next { display: none; }

  .header__phones { display: none; }
  .header__inner { gap: 0.75rem; }

  .nav__menu {
    position: fixed;
    top: 0; right: 0;
    width: 280px;
    height: 100vh;
    background: var(--negro);
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 0 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 600;
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,0.08);
  }

  .nav__menu.open { transform: translateX(0); }
  .nav__toggle { display: flex; }
  .nav__link { width: 100%; padding: 0.875rem 1.5rem; }
  .nav__link::after { display: none; }

  .motos-grid { grid-template-columns: repeat(2, 1fr); }
  .pilares-grid { grid-template-columns: 1fr 1fr; }
  .modelos-grid { grid-template-columns: 1fr; }
  .ocasion-grid { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr; gap: 2rem; }
  .welcome-stats { grid-template-columns: repeat(2, 1fr); }
  .cta-banner { flex-direction: column; align-items: flex-start; }
  .sec-head--split { flex-direction: column; align-items: flex-start; }
  .ficha-specs { grid-template-columns: repeat(2, 1fr); }
  .ficha-actions { flex-direction: column; }
  .ficha-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .motos-grid { grid-template-columns: 1fr; }
  .pilares-grid { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: 1.75rem; }
  .hero__text { font-size: var(--fs-md); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  /* En pantallas estrechas un botón con texto largo (p. ej. "COMPRAR
     ENTRADAS: MOTORLAND ARAGÓN 28-30 AGOSTO") no cabe en una línea:
     con nowrap desborda el viewport y fuerza scroll horizontal. */
  .btn { white-space: normal; text-align: center; }
  .welcome-stats { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .cookie-banner { flex-direction: column; left: 1rem; right: 1rem; bottom: 1rem; }
}


/* ═══════════════════════════════════════════════════════════
   SELECTOR DE IDIOMA — DESPLEGABLE EN TOPBAR
   ═══════════════════════════════════════════════════════════ */
.lang-dropdown {
  position: relative;
  margin-left: 0.75rem;
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 0.75rem;
}
.lang-dropdown__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;
}
.lang-dropdown__btn:hover,
.lang-dropdown.is-open .lang-dropdown__btn {
  color: #e8590c;
}
.lang-dropdown__arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.7;
}
.lang-dropdown.is-open .lang-dropdown__arrow {
  transform: rotate(180deg);
}
.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-top: 2px solid #e8590c;
  min-width: 130px;
  padding: 6px 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 600;
}
.lang-dropdown:hover .lang-dropdown__menu,
.lang-dropdown.is-open .lang-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-dropdown__item {
  display: block;
  padding: 7px 14px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ccc;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.lang-dropdown__item:hover {
  background: #252525;
  color: #e8590c;
}
.lang-dropdown__item--active {
  color: #e8590c;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   MENÚ CHAPTER — CORRECCIÓN ALTURA NAV
   ═══════════════════════════════════════════════════════════ */
.nav__item--dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
.nav__item--dropdown > .nav__link--dropdown {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════
   MENÚ CHAPTER — DROPDOWN COMPLETO
   ═══════════════════════════════════════════════════════════ */

/* El li padre debe ser position:relative para anclar el dropdown */
.nav__item--dropdown {
  position: relative !important;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}

/* El enlace padre con flecha */
.nav__link--dropdown {
  display: flex !important;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.nav__dropdown-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav__item--dropdown:hover .nav__dropdown-arrow,
.nav__item--dropdown.is-open .nav__dropdown-arrow {
  transform: rotate(180deg);
}

/* El menú desplegable: fondo blanco, borde naranja arriba */
.nav__dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 900 !important;
  background: #ffffff !important;
  border-top: 3px solid #e8590c !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-left: 1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
  min-width: 220px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  border-radius: 0 0 4px 4px !important;
  /* Oculto por defecto */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

/* Mostrar al hacer hover sobre el li padre */
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Los enlaces dentro del dropdown */
.nav__dropdown-link {
  display: block !important;
  padding: 10px 18px !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s, color 0.15s, padding-left 0.15s !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.nav__dropdown-link:last-child {
  border-bottom: none !important;
}

.nav__dropdown-link:hover {
  background: #fff5f0 !important;
  color: #e8590c !important;
  padding-left: 24px !important;
}

/* Asegurar que el nav no corta el overflow del dropdown */
.nav__menu {
  overflow: visible !important;
}

.nav__inner {
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   DROPDOWN CON LANDING PROPIA (p. ej. Servicios) — flecha separada
   ═══════════════════════════════════════════════════════════
   A diferencia de Chapter (que no tiene página propia y por tanto
   todo el control solo abre/cierra), estos dropdowns SÍ tienen una
   landing a la que ir. Un mismo toque no puede decidir con certeza
   entre "navegar" y "desplegar", así que se separan en dos controles
   independientes: el texto es un <a> normal que siempre navega, y la
   flecha es un <button> aparte que siempre abre/cierra el submenú. */
.nav__item--dropdown-split {
  align-items: center;
  justify-content: flex-start;
}
.nav__item--dropdown-split > .nav__link {
  flex: 0 0 auto;
  width: auto;
  /* Este link ya no es el último elemento del control (le sigue el
     botón de la flecha), así que su padding derecho normal quedaría
     ANTES del icono en vez de después — se quita aquí y el espacio
     hasta la flecha lo pone solo el padding-left del botón. */
  padding-right: 0;
}
.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  /* El icono va pegado al texto (mismo margen de 4px que en Chapter);
     el resto de los 44px de ancho queda como área táctil extra a la
     derecha, sin desplazar el icono visualmente hacia el centro. */
  justify-content: flex-start;
  padding-left: 4px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
  /* Mismo color que .nav__link — al vivir en su propio <button> (no
     dentro del <a>) ya no lo hereda solo, y sin esto el icono
     (stroke="currentColor") queda invisible sobre el fondo oscuro. */
  color: rgba(255,255,255,0.65);
}
.nav__dropdown-toggle:hover,
.nav__item--dropdown-split.is-open .nav__dropdown-toggle {
  color: var(--blanco);
}

/* En escritorio el ratón no necesita el área táctil de 44px (pensada
   para el dedo en el menú móvil) — a ese ancho el hueco vacío tras la
   flecha separaba "Servicios" del resto del menú. Se reduce solo aquí. */
@media (min-width: 769px) {
  .nav__dropdown-toggle {
    width: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX — zoom de imagen en fichas (motos, customizaciones)
   ═══════════════════════════════════════════════════════════ */
#mainImg, #galMainImg { cursor: zoom-in; }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--blanco);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close:hover { background: rgba(255,255,255,0.2); }

/* ═══════════════════════════════════════════════════════════
   PIEZAS — galería de categorías de recambios
   ═══════════════════════════════════════════════════════════ */
.piezas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.pieza-card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.pieza-card:hover {
  border-color: var(--naranja);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.pieza-card__media {
  aspect-ratio: 4/3;
  background: var(--gris-claro);
  overflow: hidden;
}

.pieza-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pieza-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--naranja);
}

.pieza-card__media--placeholder svg { width: 34px; height: 34px; opacity: 0.35; }

.pieza-card__body {
  padding: 1rem 1.1rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pieza-card__title {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--negro);
  line-height: 1.3;
  margin-bottom: 0.4rem;
  height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pieza-card__cta {
  font-size: var(--fs-xs);
  color: var(--naranja);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-top: auto;
}

@media (max-width: 1024px) {
  .piezas-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .piezas-grid { grid-template-columns: repeat(2, 1fr); }
}

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