/* ─────────────────────────────────────────────────────────────────────
   cabecera-2026.css · Tropiauto Motril
   Rediseño de la cabecera (01/11/2026, encargo de Antonio):
     · la marca seleccionada se ve grande y resaltada, y se entiende que
       se puede cambiar a la otra
     · el horario pasa a una píldora simple: Abierto / Cerrado, con color
     · fuera el logotipo de texto de la izquierda y las "rayas" del menú;
       en su lugar, un botón elegante de cristal con chevrón
   Es ADITIVO: no sustituye sitio.css, solo afina la cabecera.
   ───────────────────────────────────────────────────────────────────── */

/* ── Cabecera: reparto limpio ─────────────────────────────────────── */
.top {
  gap: 14px;
  /* la compensación debe igualar la altura real (sitio.css fija min-height 88/96) */
  margin-bottom: -88px;
}
@media (max-width: 900px) { .top { margin-bottom: -96px; } }
.top > .brand-stack,
.top .ta-live-widget,
.top .top-menu,
.top .btn-wa-head { flex: 0 0 auto; min-width: 0; }
.top .ta-live-toggle { white-space: nowrap; }

/* ── Selector de marca ────────────────────────────────────────────── */
.top > .brand-stack {
  display: inline-flex !important;   /* sitio.css lo ocultaba en escritorio */
  margin: 0;
  order: 0;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.top > .brand-stack .brand-logos {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
}

.top > .brand-stack .brand-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px !important;
  height: 60px !important;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  transition: transform .28s var(--ease), opacity .28s var(--ease),
              box-shadow .28s var(--ease), border-color .28s var(--ease),
              background .28s var(--ease);
  will-change: transform;
}

.top > .brand-stack .brand-logo img {
  width: auto;
  max-width: 72px !important;
  max-height: 42px !important;
  object-fit: contain;
  filter: none;               /* el logo se ve en su color real y nítido */
  opacity: .9;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}

/* la marca que NO está seleccionada: apagada, pero invita a pulsarla */
.top > .brand-stack .brand-logo:not(.is-active) {
  opacity: .8;
  background: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .22);
  filter: saturate(.7);
}
.top > .brand-stack .brand-logo:not(.is-active):hover,
.top > .brand-stack .brand-logo:not(.is-active):focus-visible {
  opacity: 1;
  filter: none;
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-2px);
}

/* la marca seleccionada: más grande, con halo de cobre */
.top > .brand-stack .brand-logo.is-active {
  background: #fff;
  border-color: rgba(196, 138, 90, .85);
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(196, 138, 90, .55),
              0 0 0 7px rgba(196, 138, 90, .16),
              0 18px 38px -14px rgba(0, 0, 0, .75);
  z-index: 2;
}
.top > .brand-stack .brand-logo.is-active img {
  max-width: 76px;
  max-height: 46px;
  opacity: 1;
}

/* pista de que se puede cambiar: solo escritorio, discreta */
.top > .brand-stack .brand-switch-hint {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, .55);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.top > .brand-stack:hover .brand-switch-hint { color: var(--copper-2); }

/* ── Horario: una píldora, no un panel ────────────────────────────── */
.top .ta-live-widget { margin: 0; width: auto !important; max-width: max-content; flex: 0 0 auto !important; }

.top .ta-live-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(20, 20, 22, .42);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--paper);
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .2s var(--ease);
  list-style: none;
}
.top .ta-live-toggle::-webkit-details-marker { display: none; }
.top .ta-live-toggle:hover {
  border-color: rgba(196, 138, 90, .65);
  background: rgba(28, 28, 30, .6);
  transform: translateY(-1px);
}

/* el puntito de estado: verde abierto, rojo cerrado */
.top .ta-live-status-row { display: inline-flex; align-items: center; gap: 8px; }

.top .ta-live-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.top .ta-live-summary::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 3px rgba(196, 138, 90, .22);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.top [data-state="open"] .ta-live-summary::before {
  background: #2fd07f;
  box-shadow: 0 0 0 3px rgba(47, 208, 127, .22), 0 0 12px rgba(47, 208, 127, .55);
  animation: ta-pulse 2.4s var(--ease) infinite;
}
.top [data-state="closed"] .ta-live-summary::before {
  background: #ff5a5f;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, .2);
  animation: none;
}
@keyframes ta-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(47, 208, 127, .22), 0 0 12px rgba(47, 208, 127, .5); }
  50%      { box-shadow: 0 0 0 5px rgba(47, 208, 127, .12), 0 0 18px rgba(47, 208, 127, .75); }
}

/* fuera reloj, fecha y flecha: solo el estado */
.top .ta-live-clock,
.top .ta-live-calendar,
.top .ta-live-chevron { display: none !important; }

/* ── Botón de menú: cristal + chevrón (sin rayas) ─────────────────── */
.top .top-menu { order: 3; }

.top .top-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(20, 20, 22, .42);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--paper);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .2s var(--ease), color .25s var(--ease);
}
.top .top-menu > summary::-webkit-details-marker { display: none; }
.top .top-menu > summary:hover {
  border-color: rgba(196, 138, 90, .7);
  background: rgba(196, 138, 90, .16);
  transform: translateY(-1px);
}
.top .top-menu[open] > summary {
  border-color: var(--copper);
  background: rgba(196, 138, 90, .2);
}

/* el icono viejo de rayas desaparece */
.top .top-menu-icon { display: none !important; }
.top .top-menu > summary::after,
.top .top-menu > summary::before { content: none !important; display: none !important; }

.top .menu-chev {
  width: 11px;
  height: 11px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s var(--ease);
}
.top .top-menu[open] .menu-chev { transform: rotate(-135deg) translate(-2px, -1px); }

/* panel del menú: hoja elegante bajo la cabecera */
.top .top-menu .nav {
  animation: ta-sheet .32s var(--ease) both;
}
@keyframes ta-sheet {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.top .top-menu .nav a {
  position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.top .top-menu .nav a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.top .top-menu .nav a:hover::after,
.top .top-menu .nav a:focus-visible::after { transform: scaleX(1); }

/* ── Móvil: prioridades claras ────────────────────────────────────── */
@media (max-width: 900px) {
  .top { gap: 8px; }
  .top > .brand-stack .brand-switch-hint { display: none; }
  .top > .brand-stack .brand-logo { width: 58px !important; height: 42px !important; border-radius: 10px; }
  .top > .brand-stack .brand-logo img { max-width: 42px !important; max-height: 27px !important; }
  .top > .brand-stack .brand-logo.is-active img { max-width: 46px !important; max-height: 29px !important; }
  .top > .brand-stack .brand-logos { gap: 7px; }
  .top .ta-live-toggle { padding: 8px 12px 8px 10px; }
  .top .ta-live-summary { font-size: .78rem; }
  .top .top-menu > summary { padding: 9px 13px; font-size: .76rem; }
  .top .top-menu > summary .menu-label { display: none; }
  .top .ta-official-since { display: none; }
}

@media (max-width: 560px) {
  .top > .brand-stack .brand-logo { width: 52px !important; height: 38px !important; }
  .top > .brand-stack .brand-logo img { max-width: 40px !important; max-height: 25px !important; }
  .top > .brand-stack .brand-logo.is-active img { max-width: 46px !important; max-height: 28px !important; }
  .top .ta-live-summary { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .top .brand-logo,
  .top .ta-live-toggle,
  .top .top-menu > summary,
  .top .menu-chev,
  .top .top-menu .nav { transition: none !important; animation: none !important; }
  .top [data-state="open"] .ta-live-summary::before { animation: none; }
}


/* ── Estado corto (Abierto / Cerrado) ─────────────────────────────── */
.top [data-ta-summary] { display: none !important; }
.top .ta-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.top .ta-estado::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 3px rgba(196, 138, 90, .22);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.top [data-state="open"] .ta-estado::before {
  background: #2fd07f;
  box-shadow: 0 0 0 3px rgba(47, 208, 127, .22), 0 0 12px rgba(47, 208, 127, .55);
  animation: ta-pulse 2.4s var(--ease) infinite;
}
.top [data-state="closed"] .ta-estado::before {
  background: #ff5a5f;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, .2);
}
.top .ta-live-toggle { position: relative; }
.top .ta-live-status-row { gap: 0; }

/* en móvil: una sola línea, sin partirse */
@media (max-width: 900px) {
  header.top.top {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px;
    height: auto; margin-bottom: -96px !important;
  }
  .top .top-menu > summary .menu-label { display: inline !important; }
  .top .top-menu > summary { padding: 8px 11px; font-size: .72rem; letter-spacing: .04em; }
  .top .ta-estado { font-size: .76rem; }
  .top .ta-live-toggle { padding: 8px 12px 8px 10px; }
  .top .brand-logo.is-active { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(196,138,90,.5), 0 0 0 6px rgba(196,138,90,.14), 0 12px 26px -14px rgba(0,0,0,.7); }
}
@media (max-width: 430px) {
  .top { gap: 6px; padding: 0 10px; }
  .top .ta-live-toggle { padding: 7px 10px; gap: 6px; }
  .top .ta-estado { font-size: .72rem; }
}


/* ── Limpieza final de la píldora (01/11/2026) ─────────────────────
   · fuera el "+" que añadía el CSS antiguo al desplegable
   · que el texto nunca se recorte                                        */
.top .ta-live-toggle::after,
.top .ta-live-toggle::before { content: none !important; display: none !important; }
.top .ta-live-toggle { overflow: visible !important; }
.top .ta-live-status-row { overflow: visible !important; flex: 0 0 auto; }
.top .ta-estado { flex: 0 0 auto; overflow: visible; }
.top .ta-live-widget { max-width: none !important; }


/* ── Panel del menú: opaco y limpio (01/11/2026) ──────────────────── */
.top .top-menu .nav {
  background: #0d0d10 !important;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* las miniaturas de marca del menú sobran: el selector ya está en la cabecera */
.top .nav-brand-logos { display: none !important; }


/* ── 01/11/2026 · Logos grandes del hero: más grandes y más arriba ─── */
.hero .brand-switch {
  gap: clamp(20px, 3.4vw, 40px);
  margin: -8px 0 20px !important;
}
.hero .brand-switch .brand-select,
.hero .brand-switch .bs {
  padding: 0 !important;
}
.hero .brand-switch .brand-select img {
  max-width: clamp(132px, 15vw, 196px) !important;
  max-height: clamp(72px, 8.4vw, 108px) !important;
  opacity: .5;
}
.hero .brand-switch .brand-select.brand-select-on img,
.hero .brand-switch .brand-select.brand-select-active img,
.hero .brand-switch .brand-select.bs-on img,
.hero .brand-switch .brand-select[aria-pressed="true"] img {
  opacity: 1;
  transform: scale(1.06);
}
@media (max-width: 900px) {
  .hero .brand-switch { margin: -4px 0 16px !important; gap: 22px; }
  .hero .brand-switch .brand-select img { max-width: 132px !important; max-height: 74px !important; }
}
@media (max-width: 520px) {
  .hero .brand-switch { gap: 16px; }
  .hero .brand-switch .brand-select img { max-width: 116px !important; max-height: 64px !important; }
}

/* la cabecera ya no lleva logos: reparto limpio a los extremos */
.top { justify-content: space-between !important; }


/* ── Logos del hero, versión final: blancos limpios, más grandes y más arriba ── */
.hero .brand-switch { margin: -26px 0 22px !important; }

/* sin halos de color: blanco puro y sombra suave (elegante y profesional) */
body.hero-seat .hero .brand-switch .brand-select img,
body.hero-cupra .hero .brand-switch .brand-select img,
body.hero-seat .hero .brand-switch .brand-select.brand-select-on img,
body.hero-seat .hero .brand-switch .brand-select.brand-select-active img,
body.hero-seat .hero .brand-switch .brand-select.bs-on img,
body.hero-cupra .hero .brand-switch .brand-select.brand-select-on img,
body.hero-cupra .hero .brand-switch .brand-select.brand-select-active img,
body.hero-cupra .hero .brand-switch .brand-select.bs-on img,
.hero .brand-switch .brand-select[aria-pressed="true"] img {
  filter: brightness(0) invert(1) drop-shadow(0 3px 14px rgba(0, 0, 0, .55)) !important;
}
.hero .brand-switch .brand-select[aria-pressed="true"] img { opacity: 1 !important; }
.hero .brand-switch .brand-select[aria-pressed="false"] img { opacity: .55; }
.hero .brand-switch .brand-select[aria-pressed="false"]:hover img { opacity: .85; }

@media (min-width: 901px) {
  .hero .brand-switch .brand-select img {
    max-width: 214px !important;
    max-height: 130px !important;
  }
}
@media (max-width: 900px) {
  .hero .brand-switch { margin: -14px 0 18px !important; }
  .hero .brand-switch .brand-select img {
    max-width: 150px !important;
    max-height: 84px !important;
  }
}
@media (max-width: 520px) {
  .hero .brand-switch .brand-select img {
    max-width: 128px !important;
    max-height: 72px !important;
  }
}


/* ── 01/11/2026 · El titular enseña el LOGO de la marca, no la palabra ──
   El logo se pulsa para cambiar de marca; al lado, enlace a la otra marca. */
.hero-h1 .l1-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  margin-bottom: .12em;
}
.brand-h1-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), filter .25s var(--ease);
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .55));
}
.brand-h1-btn:hover,
.brand-h1-btn:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 255, 255, .18));
  outline: none;
}
.brand-h1-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: clamp(170px, 19vw, 280px);
  max-height: clamp(104px, 11.5vw, 176px);
  filter: brightness(0) invert(1);
}
.brand-enter {
  font: 600 clamp(.66rem, .8vw, .78rem)/1 Outfit, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 243, 238, .62);
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  white-space: nowrap;
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.brand-enter::after { content: ' →'; }
.brand-enter:hover,
.brand-enter:focus-visible {
  color: #fff;
  border-color: rgba(196, 138, 90, .85);
  background: rgba(196, 138, 90, .16);
  transform: translateY(-1px);
  outline: none;
}
@media (max-width: 900px) {
  .brand-h1-logo { max-width: clamp(150px, 38vw, 215px); max-height: clamp(88px, 22vw, 124px); }
  .hero-h1 .l1-brand { gap: 12px; }
  .brand-enter { font-size: .62rem; padding: 8px 12px; }
}
@media (max-width: 430px) {
  .brand-h1-logo { max-width: 150px; max-height: 88px; }
  .brand-enter { font-size: .58rem; padding: 7px 10px; letter-spacing: .14em; }
}


/* el botón "Cambiar a ..." es un <button>: hay que quitarle el aspecto nativo */
button.brand-enter {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}


/* ── 01/11/2026 · Cinta de marcas (marquee) sin estilos ─────────────
   Estaba sin CSS: salía banda blanca con el texto repetido y en negro.
   Ahora es una cinta oscura, elegante, con puntos de cobre y bucle suave. */
.ta-marquee {
  overflow: hidden;
  background: #0b0b0c;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ta-mq-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ta-mq-scroll 34s linear infinite;
}
.ta-mq-track span {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font: 600 .74rem/1 Outfit, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(245, 243, 238, .7);
}
.ta-mq-track span::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--copper);
  opacity: .85;
  flex: 0 0 auto;
}
.ta-marquee:hover .ta-mq-track { animation-play-state: paused; }
@keyframes ta-mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .ta-marquee { padding: 13px 0; }
  .ta-mq-track span { font-size: .68rem; gap: 20px; padding-right: 20px; letter-spacing: .18em; }
}
@media (prefers-reduced-motion: reduce) {
  .ta-mq-track { animation: none; }
}