/* TAMANO-FIJO · Antonio 04/11/2026 · SEAT 140px · CUPRA 122px · no se cambia */
/* UNICO-SITIO · tropiauto/diseno/aprobado.css
   Aqui se escribe la norma. No se copia a mano a otro fichero.
   La visita publica la guarda en el sello y en norma-cabecera.css.
   Si esta hoja pierde una marca, vuelve sola el sello anterior. */
/* CANDADO-CABECERA · lo implantado no lo pisa una hoja anterior */
/* NORMA PERMANENTE · 04/11/2026 · Antonio
   Esta hoja se carga LA ÚLTIMA. No se borra y no se adelanta.
   El porqué está en tropiauto/NORMA_CABECERA.md y en tropi-sec/NORMA_DISENO.md sección 8.
   1. Un summary en flex, inline-flex o grid pinta un > en la esquina del iPhone.
   2. Una caja de 28px o un max-height recorta el logo y el tamaño nuevo no se ve.
   3. Una cabecera de 60, 66 o 72px de alto recorta lo que sobresale. */

summary,
header#top.top summary,
.top-menu > summary,
.ta-live-toggle,
.ta-live-more summary,
.foot-col summary,
.faq summary,
.wa-menu summary,
.oc-vcard summary {
  display: list-item !important;
  list-style: none !important;
}
summary::-webkit-details-marker,
summary::marker {
  display: none !important;
  content: "" !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  color: transparent !important;
}
header#top.top .menu-chev { display: none !important; }

header#top.top,
.top {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
header#top.top .brand-stack,
header#top.top .brand-logos,
header#top.top .brand-logo,
.top .brand-stack,
.top .brand-stack .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,
.top .brand-stack .brand-logo img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
}
header#top.top img.logo-seat { height: 140px !important; }
header#top.top img.logo-cupra { height: 122px !important; }

/* CANDADO por encima de cualquier !important viejo. Una hoja anterior no puede encoger el logo ni sacar el >. */
body header.top#top .top-right .top-icons .brand-stack .brand-logo,
body header#top.top .brand-stack .brand-logo,
.top > .brand-stack .brand-logo {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body header.top#top img.logo-cabeza,
body header#top.top img.logo-seat,
body header#top.top img.logo-cupra,
.top > .brand-stack .brand-logo img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}
body header#top.top img.logo-seat { height: 140px !important; }
body header#top.top img.logo-cupra { height: 122px !important; }
body header#top.top summary,
body header.top#top summary {
  display: list-item !important;
  list-style: none !important;
}

/* VIDEO-HASTA-ARRIBA · 04/11/2026. La cabecera flota. El vídeo nace en el borde del navegador. */
html, body {
  margin: 0 !important;
  background: #0b0b0c !important;
}
body header#top.top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  z-index: 40 !important;
}
body header#top.top.scrolled {
  position: fixed !important;
  top: 0 !important;
}
html body section.hero {
  margin: 0 !important;
  top: 0 !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  height: 100svh !important;
  height: 100dvh !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;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* FORMA DEL MENU Y LOGOS GRANDES · 04/11/2026. El summary sigue en list-item para que el iPhone no pinte el >. */
body header#top.top .brand-logos {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}
body header#top.top .brand-logo,
body header#top.top img.logo-seat,
body header#top.top img.logo-cupra {
  flex-shrink: 0 !important;
  min-width: max-content !important;
}
body header#top.top .top-menu > summary {
  display: list-item !important;
  list-style: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(12,12,14,.42) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
body header#top.top .menu-label {
  display: inline !important;
  color: #fff !important;
}
body header#top.top .menu-chev {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 8px !important;
  border: 0 !important;
  border-right: 1.6px solid #fff !important;
  border-bottom: 1.6px solid #fff !important;
  background: none !important;
  transform: rotate(45deg) translateY(-2px) !important;
  vertical-align: middle !important;
}
body header#top.top .top-menu[open] .menu-chev {
  transform: rotate(-135deg) translateY(-1px) !important;
}
body header#top.top .top-menu .nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 268px !important;
  padding: 14px !important;
  background: #0d0d10 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 20px !important;
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.9) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  overflow: hidden !important;
}
body header#top.top .top-menu .menu-video {
  display: block !important;
}

/* SIN-FONDO · 04/11/2026. La marca activa flota. Ni el logo ni WhatsApp llevan recuadro. */
@keyframes brandPulse {
  0%, 100% { box-shadow: none; border-color: transparent; }
  50% { box-shadow: none; border-color: transparent; }
}
@keyframes ta-marca-flota {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-5px); opacity: .62; }
}
body header#top.top a.brand-logo,
body header#top.top a.brand-logo.is-active,
body header.top#top .brand-stack .brand-logo {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body header#top.top a.brand-logo.is-active {
  animation: ta-marca-flota 2.6s ease-in-out infinite !important;
}
body header#top.top img.logo-seat,
body header#top.top img.logo-cupra {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body header.top#top .top-right button.btn-wa-head,
body header.top#top .top-right button.btn-wa-head:hover,
body header.top#top .top-right button.btn-wa-head:focus {
  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;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body header#top.top .wa-icon {
  width: 32px !important;
  height: 32px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  fill: #25d366 !important;
}
@media (prefers-reduced-motion: reduce) {
  body header#top.top a.brand-logo.is-active { animation: none !important; }
}

/* FILA-LOGOS · 04/11/2026. SEAT, CUPRA y WhatsApp a la misma altura, en linea, sin fondo.
   El tamano fijo de SEAT se mantiene: height: 140px. CUPRA y WhatsApp se igualan a esa altura. */
body header#top.top .top-right {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
}
body header#top.top .top-icons {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}
body header#top.top .brand-logos {
  display: inline-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;
  flex: 0 0 auto !important;
}
body header#top.top .wa-icon {
  width: 140px !important;
  height: 140px !important;
}
body header#top.top .btn-wa-head span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !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;
}

/* WA-FLOTANTE · boton fijo. No usa .wa-icon: ese mide 140px y es solo de la cabecera. */
.wa-flotante {
  position: fixed !important;
  right: 16px !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 90 !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #25d366 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
}
.wa-flotante svg {
  width: 34px !important;
  height: 34px !important;
  fill: #fff !important;
  background: none !important;
  border: 0 !important;
}
.wa-flotante span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* WA-CABECERA-FUERA · 04/11/2026. Antonio: el WhatsApp de la cabecera no se muestra. Queda el flotante. */
body header#top.top .btn-wa-head,
body header#top.top button.btn-wa-head {
  display: none !important;
}

/* HERO-MAS-ARRIBA · 04/11/2026. El bloque del centro sube. Menos hueco bajo la cabecera. Sigue centrado. */
html body section.hero {
  align-content: center !important;
  justify-items: center !important;
  padding-bottom: 26vh !important;
}
html body section.hero > .hero-body {
  transform: translateY(-7vh) !important;
}

/* BOTONES-MAS-ABAJO · 04/11/2026. Ofertas y ocasion bajan un poco. El resto del centro no se mueve. */
html body section.hero .hero-cta {
  margin-top: 72px !important;
}

/* MARCA-ILUMINADA · 04/11/2026. La marca en la que estas se ilumina. Sin cuadrado. */
body header#top.top .top-icons .brand-stack a.brand-logo,
body header#top.top .top-icons .brand-stack a.brand-logo.is-active {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  animation: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
@keyframes ta-luz-seat {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); opacity: 1; }
  50% { filter: none; opacity: .78; }
}
@keyframes ta-luz-cupra {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); opacity: 1; }
  50% { filter: none; opacity: .78; }
}
body header#top.top .top-icons a.brand-logo.is-active[data-brand-logo="seat"] img {
  animation: ta-luz-seat 2.4s ease-in-out infinite !important;
}
body header#top.top .top-icons a.brand-logo.is-active[data-brand-logo="cupra"] img {
  animation: ta-luz-cupra 2.4s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  body header#top.top .top-icons a.brand-logo.is-active img { animation: none !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-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;
}

/* 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;
}
/* CONGELADO-20261104 */
/* REJILLA-VIDEO · la rejilla gris vive en marca.css y manda sobre esta hoja. */