/* hero-fijo.css — última palabra. Antonio, 04/11/2026.
   Enlazada la última. Hoja válida: si falta una llave, el iPhone tira el arreglo. */
html body section.hero {
  display: grid !important;
  position: relative !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  top: 0 !important;
  margin: 0 !important;
  min-height: 100dvh !important;
  height: 100lvh !important;
  padding-top: 0px !important;
  padding-bottom: 18vh !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;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100lvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  z-index: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: .78 !important;
  filter: saturate(.86) contrast(1.04) !important;
}
html body section.hero .hero-veil {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(8,9,11,.08) 0%, rgba(8,9,11,.34) 72%, rgba(8,9,11,.55) 100%),
    linear-gradient(180deg, rgba(8,9,11,.1) 0%, rgba(8,9,11,.18) 36%, rgba(8,9,11,.46) 100%) !important;
}
html body section.hero > .hero-body {
  align-self: center !important;
  justify-self: center !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
html body section.hero .eye {
  font-size: 14px !important;
  letter-spacing: .16em !important;
  margin-bottom: 36px !important;
}
html body section.hero .hero-h1 {
  font-size: clamp(3.15rem, 10.2vw, 7.4rem) !important;
  margin-bottom: 26px !important;
}
html body section.hero .brand-h1-logo {
  max-width: clamp(156px, 34vw, 230px) !important;
  max-height: none !important;
  width: clamp(156px, 34vw, 230px) !important;
  height: auto !important;
}
html body section.hero .hero-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem) !important;
}
html body section.hero .hero-cta {
  margin-top: 36px !important;
  gap: 8px 28px !important;
}
html body section.hero .hero-cta .btn {
  font-size: 16px !important;
  min-height: 50px !important;
  padding: 0 22px !important;
}
header#top.top,
header#top.top .top-menu > summary,
header#top.top .ta-live-toggle,
header#top.top .ta-live-widget,
header#top.top .ta-live-online,
header#top.top .btn-wa-head,
header#top.top .btn-line,
header#top.top a.brand-logo {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
header#top.top a.brand-logo,
header#top.top .ta-live-online,
header#top.top .btn-wa-head,
header#top.top .top-menu > summary {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}
header#top.top .top-menu > summary,
header#top.top .ta-live-toggle,
header#top.top .ta-live-online,
header#top.top .btn-wa-head,
header#top.top .menu-label {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.55) !important;
}
header#top.top a.brand-logo[data-brand-logo="seat"] span.lg {
  display: block !important;
  width: 108px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url("/tropiauto/seat-logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
}
header#top.top a.brand-logo[data-brand-logo="cupra"] span.lg {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url("/tropiauto/cupra-logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
}
header#top.top .btn-wa-head .wa-icon {
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
header#top.top .top-menu .nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
header#top.top .top-menu .menu-video {
  display: none !important;
}

/* 04/11/2026 raiz. El > del iPhone es el marcador de details: se escapa arriba y rompe la cabecera. */
header#top.top summary,
header#top.top summary::marker,
header#top.top summary::-webkit-details-marker {
  list-style: none !important;
}
header#top.top summary::-webkit-details-marker,
header#top.top summary::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  color: transparent !important;
}
header#top.top a.brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
header#top.top a.brand-logo .lg { display: none !important; }
header#top.top img.logo-cabeza {
  display: block !important;
  height: 30px !important;
  width: auto !important;
  max-width: 96px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

/* El marcador nativo de details, con summary en flex, se pinta en la
   esquina superior del iPhone y descoloca la cabecera. Summary no es flex. */
header#top.top details > summary,
header#top.top .ta-live-toggle,
header#top.top .top-menu > summary {
  display: inline-block !important;
  list-style: none !important;
}
header#top.top img.logo-cabeza {
  height: 36px !important;
  max-width: 120px !important;
}

/* Logos de cabecera: grandes y en el color de cada marca. Sin filtro que los deje negros. */
header#top.top .logo-cabeza {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
header#top.top .logo-seat {
  width: 78px !important;
  height: 88px !important;
  background-color: #E30613 !important;
  -webkit-mask-image: url("/tropiauto/seat-logo.svg") !important;
  mask-image: url("/tropiauto/seat-logo.svg") !important;
}
header#top.top .logo-cupra {
  width: 78px !important;
  height: 52px !important;
  background-color: #c8873a !important;
  -webkit-mask-image: url("/tropiauto/cupra-logo.svg") !important;
  mask-image: url("/tropiauto/cupra-logo.svg") !important;
}

/* Al bajar, el video se va con la portada. La cabecera y el menu dejan de ser transparentes. */
header#top.top.scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #0b0b0c !important;
  background-color: #0b0b0c !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
header#top.top.scrolled .menu-label,
header#top.top.scrolled .ta-live-online,
header#top.top.scrolled .ta-live-toggle,
header#top.top.scrolled summary,
header#top.top.scrolled .btn-wa-head,
header#top.top.scrolled .btn-wa-head span {
  color: #fff !important;
  opacity: 1 !important;
}
header#top.top .top-menu .nav {
  background: #111114 !important;
  background-color: #111114 !important;
  opacity: 1 !important;
}
header#top.top .top-menu .nav a {
  color: #f5f3ee !important;
  opacity: 1 !important;
}

/* 04/11 sin circulos: SEAT sin caja, WhatsApp sin aro, Horario sin pastilla. */
header#top.top a.brand-logo,
header#top.top .btn-wa-head,
header#top.top .btn-line,
header#top.top .ta-live-online,
header#top.top .ta-live-toggle {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}
header#top.top .ta-live-online .ta-live-dot {
  box-shadow: none !important;
}

/* Logos reales, grandes y en color de marca. WhatsApp vuelve a su icono, sin aro. */
header#top.top img.logo-seat {
  display: block !important;
  height: 142px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(7482%) hue-rotate(350deg) brightness(94%) contrast(118%) !important;
}
header#top.top img.logo-cupra {
  display: block !important;
  height: 88px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: brightness(0) saturate(100%) invert(67%) sepia(41%) saturate(1044%) hue-rotate(353deg) brightness(91%) contrast(89%) !important;
}
header#top.top .btn-wa-head .wa-icon {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  fill: #25D366 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
header#top.top .btn-wa-head span { display: none !important; }

/* Color dentro del SVG: el iPhone ignora el filter sobre un SVG. */
header#top.top img.logo-seat,
header#top.top img.logo-cupra {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-fit: contain !important;
}
header#top.top img.logo-seat { height: 142px !important; }
header#top.top img.logo-cupra { height: 124px !important; }
header#top.top,
header#top.top .top-icons,
header#top.top .brand-stack,
header#top.top .brand-logos,
header#top.top a.brand-logo {
  overflow: visible !important;
  height: auto !important;
}

/* Los logos grandes no pueden montarse. */
header#top.top .brand-logos,
header#top.top .brand-stack {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
header#top.top a.brand-logo {
  margin: 0 !important;
  flex: 0 0 auto !important;
}
header#top.top img.logo-seat { margin-right: 0 !important; }

header#top.top a.brand-logo[data-brand-logo="cupra"] {
  margin-left: 0 !important;
}
header#top.top .brand-logos { gap: 8px !important; }
header#top.top img.logo-seat,
header#top.top img.logo-cupra { overflow: hidden !important; }

header#top.top .brand-logos {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
header#top.top a.brand-logo,
header#top.top a.brand-logo.is-active,
header#top.top a.brand-logo.brand-logo-active {
  width: auto !important;
  height: auto !important;
  transform: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
header#top.top img.logo-seat,
header#top.top img.logo-cupra {
  max-width: none !important;
  max-height: none !important;
}
header#top.top img.logo-seat { height: 142px !important; }
header#top.top img.logo-cupra { height: 124px !important; }

header#top.top .brand-logos {
  gap: 8px !important;
}
header#top.top a.brand-logo[data-brand-logo="cupra"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

header#top.top {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* El > del iPhone sale si el summary es flex. Aqui no lo es, y el marcador no se pinta. */
header#top.top summary,
header#top.top .top-menu > summary,
header#top.top .ta-live-toggle {
  display: inline-block !important;
  list-style: none !important;
}
header#top.top summary::-webkit-details-marker,
header#top.top summary::marker {
  display: none !important;
  content: "" !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  color: transparent !important;
}
header#top.top .menu-label,
header#top.top .menu-chev,
header#top.top .ta-live-status-row {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Ningun summary de la web puede ser flex: en iPhone el > se pinta arriba, tambien en SEAT y CUPRA. */
summary {
  list-style: none !important;
}
summary::-webkit-details-marker,
summary::marker {
  display: none !important;
  content: none !important;
  font-size: 0 !important;
  color: transparent !important;
}
.foot-col summary,
.faq summary,
.oc-vcard summary,
.wa-menu summary,
.ta-live-more summary,
header#top.top summary {
  display: block !important;
}
header#top.top .ta-live-toggle,
header#top.top .top-menu > summary {
  display: inline-block !important;
}
header#top.top img.logo-seat { height: 180px !important; }
header#top.top img.logo-cupra { height: 158px !important; }

/* Raiz: la caja de 28px y el summary en flex. El iPhone solo esconde el > si el summary es list-item. */
.top .brand-stack,
header#top.top .brand-stack,
header#top.top .brand-logos,
header#top.top .brand-logo {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}
header#top.top img.logo-seat,
header#top.top img.logo-cupra {
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
}
header#top.top img.logo-seat { height: 124px !important; }
header#top.top img.logo-cupra { height: 108px !important; }
summary,
header#top.top summary,
header#top.top .top-menu > summary,
header#top.top .ta-live-toggle,
.ta-live-more summary,
.foot-col summary,
.faq summary {
  display: list-item !important;
  list-style: none !important;
}
summary::-webkit-details-marker,
summary::marker {
  display: none !important;
  content: "" !important;
  font-size: 0 !important;
  color: transparent !important;
}
header#top.top .menu-chev { display: none !important; }

/* FILA-LOGOS-SIEMPRE · 04/11/2026. Norma permanente.
   SEAT, CUPRA y WhatsApp miden 140px, van en la misma fila y no llevan fondo ni circulo.
   La cabecera puede partirse en dos lineas para que el menu y el horario tambien se vean. */
body header#top.top {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
}
body header#top.top .top-right {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
}
body header#top.top .top-icons,
body header#top.top .brand-logos {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
body header#top.top img.logo-seat,
body header#top.top img.logo-cupra,
body header#top.top .wa-icon {
  height: 140px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body header#top.top .wa-icon {
  width: 140px !important;
  height: 140px !important;
  fill: #25d366 !important;
}
body header#top.top button.btn-wa-head,
body header#top.top button.btn-wa-head:hover {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 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;
}

/* 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;
}

/* 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 */

/* 05/11/2026 · Zona Familias /descargas — tarjetas de descarga */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:960px;margin:0 auto}
.dl-card{background:#fff;border-radius:16px;padding:1.2rem;box-shadow:0 2px 18px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.9rem}
.dl-card img{width:100%;height:auto;border:1px solid #eee;border-radius:10px}
.dl-card h3{margin:0;font-size:1.15rem}
.dl-btn{display:inline-block;text-align:center;background:var(--seat-blue-primary);color:#fff;border-radius:999px;padding:.8rem 1.4rem;text-decoration:none;font-weight:700}
.dl-btn:hover,.dl-btn:focus-visible{background:#001f4d;outline:2px solid #666;outline-offset:2px}
.dl-note{text-align:center;color:#555;margin-top:2rem}
@media (prefers-reduced-motion:no-preference){.dl-card{transition:transform .2s ease}.dl-card:hover{transform:translateY(-3px)}}

/* 05/11/2026 · Legibilidad tipografica del hero: halo suave en el texto (el velo
   se queda clarito por decision 04/11 VIDEO-CLARO; el halo lo compensa sin tapar el video) */
.hero-h1, .hero-sub { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.35); }

/* 05/11/2026 · Tarjeta del juego en /descargas */
.dl-game{background:var(--cupra-bg-dark);color:var(--cupra-text)}
.dl-game h3{color:var(--cupra-text)}
.dl-game p{color:#cfd4d9;margin:0;font-size:.95rem}
.dl-play{display:inline-block;text-align:center;background:var(--cupra-copper);color:#fff;border-radius:999px;padding:.8rem 1.4rem;text-decoration:none;font-weight:700}
.dl-play:hover,.dl-play:focus-visible{background:#9a5c28;outline:2px solid #d29a63;outline-offset:2px}