/* SIN-CUADRADO · 04/11/2026. Ultima hoja. La marca activa parpadea. Ningun recuadro. */
body header#top.top .top-icons a.brand-logo,
body header#top.top .top-icons a.brand-logo.is-active,
body header#top.top .top-icons a.brand-logo:hover,
body header#top.top .top-icons a.brand-logo:focus,
body header#top.top .top-icons img.logo-seat,
body header#top.top .top-icons img.logo-cupra {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
}
body header#top.top .top-icons a.brand-logo,
body header#top.top .top-icons a.brand-logo.is-active {
  animation: none !important;
}
body header#top.top .top-icons a.brand-logo::before,
body header#top.top .top-icons a.brand-logo::after,
body header#top.top .top-icons a.brand-logo.is-active::before,
body header#top.top .top-icons a.brand-logo.is-active::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
@keyframes ta-luz-seat {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
@keyframes ta-luz-cupra {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
body header#top.top .top-icons a.brand-logo.is-active[data-brand-logo="seat"] img {
  animation: ta-luz-seat 1.6s ease-in-out infinite !important;
  filter: none !important;
}
body header#top.top .top-icons a.brand-logo.is-active[data-brand-logo="cupra"] img {
  animation: ta-luz-cupra 1.6s ease-in-out infinite !important;
  filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body header#top.top .top-icons a.brand-logo.is-active img { animation: none !important; opacity: 1 !important; }
}

/* VIDEO-BORDE · 04/11/2026. El relleno de la seccion empujaba el video hacia abajo y se veia el fondo. */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: #0b0b0c !important;
}
html body section.hero {
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body section.hero .hero-media,
html body section.hero video.hero-video,
html body section.hero .hero-img,
html body section.hero .hero-veil {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}
body header#top.top,
body header#top.top.scrolled {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* VIDEO-BORDE-2. Mas especifico que hero-fijo. El video nace en el borde. */
html body.hero-seat section.hero,
html body.hero-cupra section.hero,
html body section.hero {
  padding-top: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  margin-top: 0px !important;
}
html body.hero-seat header#top.top,
html body.hero-cupra header#top.top,
html body header#top.top {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  margin-top: 0px !important;
  background: transparent !important;
  background-color: transparent !important;
}
html body section.hero video.hero-video,
html body section.hero .hero-media {
  top: 0px !important;
  margin-top: 0px !important;
  transform: none !important;
}

/* VIDEO-CLARO · 04/11/2026. Antonio: la mitad de arriba salia negra.
   Era el velo, no el video. El velo queda suave y el video se ve entero, desde el borde. */
html body.hero-seat section.hero .hero-veil,
html body.hero-cupra section.hero .hero-veil,
html body section.hero .hero-veil {
  background: linear-gradient(180deg, rgba(8,9,11,.18) 0%, rgba(8,9,11,.05) 46%, rgba(8,9,11,.22) 100%) !important;
}
html body section.hero video.hero-video,
html body section.hero .hero-img {
  opacity: 1 !important;
  filter: none !important;
  object-fit: cover !important;
  object-position: center 32% !important;
}

/* VIDEO-LLENO · 04/11/2026. El fondo negro #0b0b0c del hero se veia porque el video no lo cubria. */
html body.hero-seat section.hero,
html body.hero-cupra section.hero,
html body section.hero {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html body.hero-seat section.hero .hero-media,
html body.hero-cupra section.hero .hero-media,
html body section.hero .hero-media {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  height: 100% !important;
  min-height: 100dvh !important;
  z-index: 0 !important;
  background: transparent !important;
}
html body.hero-seat section.hero video.hero-video,
html body.hero-cupra section.hero video.hero-video,
html body section.hero video.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100dvh !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  background: transparent !important;
  z-index: 0 !important;
}
html body.hero-seat section.hero .hero-veil,
html body.hero-cupra section.hero .hero-veil,
html body section.hero .hero-veil {
  background: none !important;
  background-image: none !important;
}

/* VIDEO-PANTALLA · 04/11/2026. El video ocupa toda la pantalla. No se queda corto. */
html body section.hero {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: hidden !important;
  background: transparent !important;
}
html body section.hero .hero-media,
html body section.hero video.hero-video,
html body section.hero .hero-img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  z-index: 0 !important;
  transform: none !important;
}
html body header#top.top {
  position: absolute !important;
  top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* VIDEO-LIMPIO · 04/11/2026. Sin franjas negras. El video se recorta un poco para comerse el borde. */
html body section.hero {
  overflow: hidden !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
}
html body section.hero video.hero-video,
html body section.hero .hero-img {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.14) !important;
  transform-origin: center center !important;
}
html body section.hero .hero-veil {
  background: none !important;
  background-image: none !important;
}

/* CIERRE-PORTADA · 04/11/2026. Esta es la ultima palabra. Lo de antes no puede ganarle. */
html body.hero-seat section.hero,
html body.hero-cupra section.hero,
html body section.hero {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
}
html body.hero-seat section.hero .hero-media,
html body.hero-cupra section.hero .hero-media,
html body section.hero video.hero-video,
html body section.hero .hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  z-index: 0 !important;
  transform: scale(1.14) !important;
  transform-origin: center center !important;
  background: transparent !important;
}
html body section.hero .hero-veil {
  background: none !important;
  background-image: none !important;
}
html body section.hero > .hero-body {
  position: relative !important;
  z-index: 2 !important;
}
html body header#top.top {
  position: absolute !important;
  top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* HUECO-CERO · 04/11/2026. El video llega al borde de arriba. Sin franja negra. */
html body.hero-seat,
html body.hero-cupra,
html body.hero-seat main,
html body.hero-cupra main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}
html body.hero-seat header#top.top,
html body.hero-cupra header#top.top,
html body header#top.top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
html body.hero-seat section.hero,
html body.hero-cupra section.hero {
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: transparent !important;
}
html body.hero-seat section.hero video.hero-video,
html body.hero-cupra section.hero video.hero-video,
html body.hero-seat section.hero .hero-media,
html body.hero-cupra section.hero .hero-media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100lvh !important;
  min-height: 100lvh !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center 70% !important;
  transform: scale(1.28) !important;
  transform-origin: center top !important;
  opacity: 1 !important;
  z-index: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* SIN-MAYOR · 04/11/2026. En CUPRA el iPhone pintaba un > suelto a la izquierda.
   Era el marcador del menu. No vuelve. El logo activo no lleva cuadrado. */
html body.hero-cupra header#top.top details.top-menu > summary,
html body.hero-seat header#top.top details.top-menu > summary,
html body header#top.top details.top-menu > summary {
  display: list-item !important;
  list-style: none !important;
  list-style-type: none !important;
  list-style-position: inside !important;
}
html body header#top.top details.top-menu > summary::marker,
html body header#top.top details.top-menu > summary::-webkit-details-marker,
html body.hero-cupra header#top.top summary::marker,
html body.hero-cupra header#top.top summary::-webkit-details-marker {
  content: none !important;
  display: none !important;
  color: transparent !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
html body.hero-cupra header#top.top a.brand-logo,
html body.hero-cupra header#top.top a.brand-logo.is-active,
html body.hero-seat header#top.top a.brand-logo,
html body.hero-seat header#top.top a.brand-logo.is-active {
  border: 0 !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* SIN-MAYOR-2 · 04/11/2026. list-item era lo que pintaba el >. El menu va en flex y sin marcador. */
html body.hero-cupra header#top.top details.top-menu > summary,
html body.hero-seat header#top.top details.top-menu > summary,
html body header#top.top details.top-menu > summary {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  list-style-type: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html body header#top.top details.top-menu > summary::marker,
html body header#top.top details.top-menu > summary::-webkit-details-marker,
html body.hero-cupra header#top.top summary::marker,
html body.hero-cupra header#top.top summary::-webkit-details-marker,
html body.hero-seat header#top.top summary::marker,
html body.hero-seat header#top.top summary::-webkit-details-marker {
  content: "" !important;
  display: none !important;
  color: transparent !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* SIN-MAYOR-3 · 04/11/2026. El summary del menu no se pinta. El boton abre el menu. */
html body header#top.top details.top-menu > summary {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}
html body header#top.top button.menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(20,20,22,.42) !important;
  color: #fff !important;
  font: inherit !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
html body header#top.top button.menu-btn .menu-label { display: inline !important; }
html body header#top.top button.menu-btn .menu-chev {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 2px !important;
  border: 0 !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  transform: rotate(45deg) !important;
  background: transparent !important;
}
html body header#top.top details.top-menu[open] button.menu-btn .menu-chev {
  transform: rotate(-135deg) !important;
}
html body.hero-cupra header#top.top a.brand-logo,
html body.hero-cupra header#top.top a.brand-logo.is-active,
html body.hero-seat header#top.top a.brand-logo.is-active {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}

/* MENU-SIEMPRE · 04/11/2026. El menu es el summary y se ve siempre. No depende de un script. */
html body header#top.top details.top-menu > summary.menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(20,20,22,.42) !important;
  color: #fff !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  list-style: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html body header#top.top details.top-menu > summary.menu-btn::-webkit-details-marker,
html body header#top.top details.top-menu > summary.menu-btn::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
  color: transparent !important;
  width: 0 !important;
  height: 0 !important;
}
html body header#top.top summary.menu-btn .menu-label { display: inline !important; }
html body header#top.top summary.menu-btn .menu-chev {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  transform: rotate(45deg) !important;
  background: transparent !important;
}

/* SIN-MAYOR-4 · 04/11/2026. En CUPRA no sale el >. El boton esta fuera del details. */
html body header#top.top details.top-menu > summary,
html body.hero-cupra header#top.top details.top-menu > summary,
html body.hero-seat header#top.top details.top-menu > summary {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0,0,0,0) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body header#top.top details.top-menu > summary::marker,
html body header#top.top details.top-menu > summary::-webkit-details-marker,
html body.hero-cupra header#top.top summary::marker,
html body.hero-cupra header#top.top summary::-webkit-details-marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
  color: transparent !important;
}
html body header#top.top button.menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(20,20,22,.42) !important;
  color: #fff !important;
  font: inherit !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 50 !important;
}
html body header#top.top button.menu-btn .menu-label { display: inline !important; }
html body header#top.top button.menu-btn .menu-chev {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  transform: rotate(45deg) !important;
  background: transparent !important;
}

/* VIDEO-ARRIBA · 04/11/2026. Despues del menu. El video sigue naciendo en el borde de arriba. */
html body.hero-seat header#top.top,
html body.hero-cupra header#top.top,
html body header#top.top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
html body.hero-seat main,
html body.hero-cupra main,
html body.hero-seat section.hero,
html body.hero-cupra section.hero,
html body section.hero {
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body section.hero .hero-media,
html body section.hero video.hero-video,
html body section.hero .hero-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100lvh !important;
  min-height: 100lvh !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.12) !important;
  transform-origin: center top !important;
  opacity: 1 !important;
  z-index: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html body section.hero .hero-veil {
  background: none !important;
  background-image: none !important;
}

/* CONGELADO-20261104 · Antonio dijo que esta configuracion esta perfecta. No se cambia la cabecera, el menu ni el video. */

/* FILA-CENTRO · 04/11/2026. Menu en el centro. SEAT a un lado, CUPRA al otro. Horario dentro del menu. */
html body header#top.top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: transparent !important;
  background-color: transparent !important;
}
html body header#top.top .top-bar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 14px 0 !important;
  gap: 10px !important;
  background: transparent !important;
}
html body header#top.top .top-bar a.brand-logo[data-brand-logo="seat"] { justify-self: start !important; }
html body header#top.top .top-bar a.brand-logo[data-brand-logo="cupra"] { justify-self: end !important; }
html body header#top.top .top-bar button.menu-btn { justify-self: center !important; }
html body header#top.top .top-bar img.logo-seat,
html body header#top.top .top-bar img.logo-cupra {
  display: block !important;
  height: 78px !important;
  width: auto !important;
  max-width: 30vw !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body header#top.top .nav .ta-live-widget,
html body header#top.top .nav .ta-live-details,
html body header#top.top .nav .ta-live-toggle {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body header#top.top .nav .ta-live-toggle {
  display: flex !important;
  list-style: none !important;
}
html body header#top.top .nav .ta-live-toggle::marker,
html body header#top.top .nav .ta-live-toggle::-webkit-details-marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

/* TRIO-CENTRO · 04/11/2026. SEAT, menu y CUPRA juntos y centrados. Horario solo dentro del menu. */
html body header#top.top .top-bar {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px !important;
  margin: 0 auto !important;
  padding: 8px 12px 0 !important;
  background: transparent !important;
}
html body header#top.top .top-bar a.brand-logo,
html body header#top.top .top-bar button.menu-btn,
html body header#top.top .top-bar img.logo-seat,
html body header#top.top .top-bar img.logo-cupra {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  float: none !important;
  margin: 0 !important;
}
html body header#top.top .top-bar img.logo-seat,
html body header#top.top .top-bar img.logo-cupra {
  display: block !important;
  height: 46px !important;
  width: auto !important;
  max-width: 18vw !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body header#top.top details.top-menu:not([open]) > nav {
  display: none !important;
}
html body header#top.top details.top-menu[open] > nav {
  display: block !important;
}
html body header#top.top details.top-menu:not([open]) .ta-live-widget {
  display: none !important;
}
html body header#top.top .nav-horario .ta-live-widget,
html body header#top.top .nav-horario .ta-live-details,
html body header#top.top .nav-horario .ta-live-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  order: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  flex: none !important;
}
html body header#top.top details.top-menu[open] .nav-horario .ta-live-widget {
  display: block !important;
}

/* LOGOS-MENOS · 04/11/2026. Antonio: los logos del trio se ven muy grandes. */
html body header#top.top .top-bar img.logo-seat,
html body header#top.top .top-bar img.logo-cupra {
  height: 46px !important;
  max-width: 18vw !important;
}

/* LOGOS-AUN-MENOS · 04/11/2026. Antonio los quiere todavia mas pequenos. */
html body header#top.top .top-bar img.logo-seat,
html body header#top.top .top-bar img.logo-cupra {
  height: 46px !important;
  max-width: 18vw !important;
}

/* TEXTO-MAS-ABAJO · 04/11/2026. Concesionario oficial queda un poco mas separado de los logos. */
html body section.hero .hero-body .eye {
  margin-top: 42px !important;
}

/* VIDEO-MAS-OSCURO · 04/11/2026. El video pierde un poco de luz. Los logos ganan brillo. */
html body section.hero video.hero-video,
html body section.hero .hero-img {
  opacity: 0.82 !important;
  filter: brightness(0.72) saturate(0.92) !important;
}
html body section.hero .hero-veil {
  background: linear-gradient(180deg, rgba(8,9,11,.34) 0%, rgba(8,9,11,.16) 46%, rgba(8,9,11,.42) 100%) !important;
  background-image: linear-gradient(180deg, rgba(8,9,11,.34) 0%, rgba(8,9,11,.16) 46%, rgba(8,9,11,.42) 100%) !important;
}
html body header#top.top .top-bar img.logo-seat,
html body header#top.top .top-bar img.logo-cupra,
html body section.hero .brand-h1-logo {
  filter: brightness(1.45) contrast(1.15)) !important;
}

/* LOGOS-MAS-LUZ · 04/11/2026. Antonio quiere todavia mas brillo en los logos. */
html body header#top.top .top-bar img.logo-seat,
html body header#top.top .top-bar img.logo-cupra,
html body section.hero .brand-h1-logo {
  filter: brightness(2.05) contrast(1.22)) !important;
}

/* BOTONES-UN-POCO-MAS · 04/11/2026. Ofertas del mes y Coches de ocasion, un poco mas abajo. */
html body section.hero .hero-cta {
  margin-top: 54px !important;
}

/* BOTONES-MAS · 04/11/2026. Antonio: los dos botones, mas abajo. */
html body section.hero .hero-cta {
  margin-top: 110px !important;
}

/* MARCA-MAS-ABAJO · 04/11/2026. El logo grande y Tropiauto Motril bajan un poco. */
html body section.hero .hero-h1 {
  margin-top: 34px !important;
}
html body section.hero .hero-h1 .l2 {
  display: block !important;
  margin-top: 10px !important;
}

/* OFICIAL-SEPARADO · 04/11/2026. Concesionario oficial no queda pegado a los logos. */
html body section.hero .hero-body {
  padding-top: 28px !important;
}
html body section.hero .hero-body .eye {
  margin-top: 86px !important;
}

/* PATRON-PORTADA · 04/11/2026. Distancias aprobadas. No se mueven.
   Logos del trio: 46px, juntos y centrados.
   Concesionario oficial: margin-top 86px. Cuerpo: padding-top 28px.
   Logo grande y Tropiauto Motril: el titulo baja 34px.
   Botones de ofertas y ocasion: margin-top 110px.
*/
/* REJILLA-VIDEO · El video pierde intensidad y lleva una rejilla gris. */
html body section.hero video.hero-video,
html body section.hero .hero-img {
  opacity: 0.7 !important;
  filter: brightness(0.48) saturate(0.62) grayscale(0.28) !important;
}
html body section.hero .hero-veil {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-color: rgba(22, 24, 28, .28) !important;
  background-image:
    linear-gradient(rgba(210,214,220,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210,214,220,.16) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16,17,20,.42) 0%, rgba(16,17,20,.18) 48%, rgba(16,17,20,.48) 100%) !important;
  background-size: 22px 22px, 22px 22px, 100% 100% !important;
}

/* PARALLAX-FONDO · 04/11/2026. El video se mueve mas lento al bajar. No va fijo. La rejilla se queda. */
html body section.hero video.hero-video,
html body section.hero .hero-img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12) !important;
  transform-origin: center top !important;
  will-change: transform;
}

/* REJILLA-PARALLAX · 04/11/2026. La rejilla baja al mismo ritmo que el video. */
html body section.hero {
  overflow: hidden !important;
}
html body section.hero .hero-veil {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12) !important;
  transform-origin: center top !important;
  will-change: transform;
}

/* LETRAS-PARALLAX · 04/11/2026. El texto del hero se mueve al bajar, mas que el video. */
html body section.hero .hero-body {
  transform: translate3d(0, var(--parallax-letras, 0px), 0) !important;
  will-change: transform;
}

/* PATRON-RAIZ · norma comun en tropiauto/diseno/PATRON_PORTADA.md. No se cambian estas distancias. */

/* OJO-FIJO · 04/11/2026. Concesionario oficial no se mueve. El parallax es solo del titulo y los botones. */
html body section.hero .hero-body {
  transform: none !important;
}
html body section.hero .hero-body .eye {
  margin-top: 86px !important;
  transform: none !important;
  position: relative !important;
  top: auto !important;
}
html body section.hero .hero-h1,
html body section.hero .hero-sub,
html body section.hero .hero-cta {
  transform: translate3d(0, var(--parallax-letras, 0px), 0);
}

/* DISTANCIA-FIJA · 04/11/2026. El parallax de las letras movia Concesionario oficial. Se anula.
   El video y la rejilla siguen con parallax. Las distancias del patron no se tocan. */
html body section.hero .hero-body,
html body section.hero .hero-body .eye,
html body section.hero .hero-h1,
html body section.hero .hero-sub,
html body section.hero .hero-cta {
  transform: none !important;
  top: auto !important;
}
html body section.hero .hero-body {
  padding-top: 28px !important;
}
html body section.hero .hero-body .eye {
  margin-top: 86px !important;
  position: static !important;
}
html body section.hero .hero-h1 {
  margin-top: 34px !important;
}
html body section.hero .hero-cta {
  margin-top: 110px !important;
}

/* OJO-ANCLADO · 04/11/2026. Concesionario oficial se mide desde arriba, no desde el centro.
   Si el hero centra el bloque, el texto baja solo. Aqui queda fijo. */
html body section.hero {
  display: grid !important;
  align-content: start !important;
  align-items: start !important;
  justify-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body section.hero > .hero-body {
  align-self: start !important;
  justify-self: center !important;
  margin-top: 0 !important;
  padding-top: 28px !important;
  transform: none !important;
}
html body section.hero .hero-body .eye {
  margin-top: 86px !important;
  margin-bottom: 36px !important;
  transform: none !important;
  position: static !important;
  top: auto !important;
}

/* OJO-MAS-ARRIBA · 04/11/2026. Concesionario oficial, un poco mas arriba. */
html body section.hero > .hero-body {
  padding-top: 12px !important;
}
html body section.hero .hero-body .eye {
  margin-top: 58px !important;
}

/* OJO-PERFECTO · 04/11/2026. Antonio: esta distancia esta perfecta. Eye margin-top 58px. Cuerpo padding-top 12px. No se mueve. */

/* IGUAL-MARCA · 04/11/2026. SEAT y CUPRA usan las mismas distancias. No hay una hoja distinta. */
html body.hero-seat section.hero,
html body.hero-cupra section.hero {
  align-content: start !important;
  align-items: start !important;
  padding-top: 0 !important;
}
html body.hero-seat section.hero > .hero-body,
html body.hero-cupra section.hero > .hero-body {
  align-self: start !important;
  padding-top: 12px !important;
  transform: none !important;
}
html body.hero-seat section.hero .hero-body .eye,
html body.hero-cupra section.hero .hero-body .eye {
  margin-top: 58px !important;
  margin-bottom: 36px !important;
  transform: none !important;
}
html body.hero-seat section.hero .hero-h1,
html body.hero-cupra section.hero .hero-h1 {
  margin-top: 34px !important;
  transform: none !important;
}
html body.hero-seat section.hero .hero-cta,
html body.hero-cupra section.hero .hero-cta {
  margin-top: 110px !important;
  transform: none !important;
}

/* 05/11/2026 grok. Menú: los logos SEAT/CUPRA salían como cuadrado blanco
   (chip #fff + filter invert). Mandan los SVG de color, sin chip.
   El panel se puede recorrer: Contacto, zona privada y horario no quedan cortados.
   «¿Te ayudo?» se aparta mientras el menú está abierto para no taparlo. */
header#top.top .top-menu .nav a[href="/gama-seat"] img,
header#top.top .top-menu .nav a[href="/gama-cupra"] img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 34px !important;
  height: 22px !important;
  max-width: 40px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  filter: none !important;
  -webkit-filter: none !important;
}
header#top.top .top-menu .nav {
  max-height: min(72vh, 560px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
body.menu-abierto .asis-open {
  opacity: 0 !important;
  pointer-events: none !important;
}