/* ═══════════════════════════════════════════════════════
   TuSocioEnChina — Header Plugin CSS
   Extraído y adaptado del diseño aprobado de la home
═══════════════════════════════════════════════════════ */

/* Variables de marca (con prefijo tse- para no chocar con el tema) */
:root {
  --tse-red: #C8102E;
  --tse-red-hover: #a50d25;
  --tse-ink: #0D0D12;
  --tse-muted: #6B6B80;
  --tse-soft: #A0A0B0;
  --tse-border: #E0E0E6;
}

/* Reset de tap highlight — cubre nav, menú móvil y CUALQUIER
   elemento dentro (incluye pseudo-elementos y estados :active/:focus) */
.tse-nav, .tse-nav *, .tse-nav *::before, .tse-nav *::after,
.tse-mobile-menu, .tse-mobile-menu *, .tse-mobile-menu *::before, .tse-mobile-menu *::after {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}
.tse-nav-hamburger,
.tse-nav-hamburger *,
.tse-mobile-menu a,
.tse-mobile-menu a:link,
.tse-mobile-menu a:visited,
.tse-mobile-menu a:hover,
.tse-mobile-menu a:active,
.tse-mobile-menu a:focus {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Barra de navegación fija ── */
.tse-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 clamp(20px, 4vw, 72px);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tse-border);
  gap: 16px;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* Empuja el contenido de la página bajo la barra fija.
   El tema/Elementor puede necesitar este valor en su propio
   padding-top del primer contenedor; lo dejamos también aquí
   como red de seguridad para temas que no lo gestionen. */
body.tse-has-header {
  padding-top: 62px;
}

/* ── Logo ── */
.tse-nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  outline: none;
}
.tse-nav-logo-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  margin-right: 10px;
}
.tse-nav-logo-text {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: 29px;
  letter-spacing: 2px;
  color: var(--tse-ink);
  line-height: 1;
  white-space: nowrap;
}
.tse-nav-logo-accent { color: var(--tse-red); }
.tse-nav-logo-tld    { color: var(--tse-soft); font-size: 20px; }

/* ── Enlaces centrales ── */
.tse-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  flex: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.tse-nav-links li { display: flex; align-items: center; line-height: 1; }
.tse-nav-links a {
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--tse-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color .15s;
  white-space: nowrap;
}
.tse-nav-links a:hover { color: var(--tse-ink); }

/* ── Lado derecho: selector de idioma (lo rellena el plugin de traducción) + CTA + hamburguesa ── */
.tse-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Placeholder del selector de idioma — el plugin de traducción
   inserta aquí sus botones de bandera vía hook JS/PHP. Se reserva
   min-width/min-height desde el principio (antes de que el JS del
   plugin de traducción inserte nada) para que el resto de la barra
   (los enlaces centrados) no salte de sitio cuando el globo aparece
   una fracción de segundo después de cargar la página. */
.tse-lang-slot {
  display: flex;
  align-items: center;
  min-width: 40px;
  min-height: 38px;
}



/* ── Hamburguesa con animación a X ── */
.tse-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  outline: none;
}
.tse-nav-hamburger,
.tse-nav-hamburger:focus,
.tse-nav-hamburger:active,
.tse-nav-hamburger:hover {
  outline: none;
  background: transparent !important;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.tse-nav-hamburger span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--tse-ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .2s ease;
  transform-origin: center;
}
.tse-nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tse-nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.tse-nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Menú móvil desplegable ── */
.tse-mobile-menu {
  position: fixed;
  top: 62px;
  left: 0; right: 0;
  z-index: 9998;
  background: #fff;
  border-bottom: 1px solid #E8E8EC;
  padding: 8px 0 12px;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  display: none;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
}
.tse-mobile-menu.open { display: flex; }
.tse-mobile-menu a {
  display: block;
  color: var(--tse-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-bottom: 1px solid #F2F2F5;
  outline: none;
  background: transparent;
}
.tse-mobile-menu a:last-of-type { border-bottom: none; }
.tse-mobile-menu a:active,
.tse-mobile-menu a:focus,
.tse-mobile-menu a:hover {
  color: var(--tse-red);
  background: transparent !important;
}
.tse-mobile-menu .tse-mobile-cta {
  margin: 12px 24px 4px;
  background: var(--tse-red);
  color: #fff;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-bottom: none;
}
/* Slot de idiomas dentro del menú móvil (rellenado por el plugin de traducción) */
.tse-mobile-lang-slot {
  display: flex;
  gap: 8px;
  padding: 12px 24px 4px;
  flex-wrap: wrap;
}

/* ── Responsive ──
   Con la arquitectura 1.6.1 el escritorio solo mantiene cinco entradas
   principales más idioma y CTA. A 1180px pasamos a hamburguesa para
   conservar aire, legibilidad y evitar cualquier solapamiento. */
@media (max-width: 1180px) {
  .tse-nav-links     { display: none !important; }
  .tse-nav-hamburger { display: flex !important; }
  .tse-nav { padding: 0 clamp(14px, 3vw, 24px); }
  .tse-nav-logo-img  { width: 45px; height: 45px; }
  .tse-nav-logo-text { font-size: 25px; }
  body.tse-has-header { padding-top: 62px; }
}
@media (max-width: 600px) {
  .tse-nav-logo-img  { width: 39px; height: 39px; margin-right: 9px; }
  .tse-nav-logo-text { font-size: 22px; }
}
@media (max-width: 400px) {
  .tse-nav-logo-img  { width: 34px; height: 34px; }
  .tse-nav-logo-text { font-size: 19px; }
}

/* ── Desplegable "Guías" en escritorio ──
   Todos los colores van en hexadecimal directo (no var()) y con
   !important en fondo/contorno: así ningún estado del navegador
   (focus, active, tema de la web) puede pintar un fondo oscuro encima
   ni dejar el texto invisible. */
.tse-nav-dropdown {
  position: relative;
}
.tse-nav-dropdown-toggle,
.tse-nav-dropdown-toggle:hover,
.tse-nav-dropdown-toggle:focus,
.tse-nav-dropdown-toggle:focus-visible,
.tse-nav-dropdown-toggle:active,
.tse-nav-dropdown-toggle[aria-expanded="true"] {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent !important;
  /* Color fijo en TODOS los estados — nunca cambia (ni al pulsar, ni al
     abrir el panel, ni en ninguna pantalla). */
  color: #6B6B80 !important;
}
.tse-nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  padding: 0;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tse-caret {
  font-size: 10px;
  transition: transform .2s ease;
  display: inline-block;
}
.tse-nav-dropdown-toggle[aria-expanded="true"] .tse-caret {
  transform: rotate(180deg);
}
.tse-nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  max-width: 280px;
  max-height: 380px;
  overflow-y: auto;
  background-color: #ffffff !important;
  border: 1px solid #E0E0E6;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(13,13,18,.16);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10000;
}
.tse-nav-dropdown-panel.tse-abierto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tse-nav-dropdown-panel a,
.tse-nav-dropdown-panel a:visited {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  background-color: #ffffff !important;
  color: #6B6B80 !important;
  text-decoration: none !important;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color .15s;
}
.tse-nav-dropdown-panel a:hover,
.tse-nav-dropdown-panel a:focus {
  background-color: #ffffff !important;
  color: #C8102E !important;
}

/* ── Acordeón "Guías" en el menú móvil ── */
.tse-mobile-dropdown {
  border-bottom: 1px solid #F2F2F5;
}
.tse-mobile-dropdown-toggle,
.tse-mobile-dropdown-toggle:hover,
.tse-mobile-dropdown-toggle:focus,
.tse-mobile-dropdown-toggle:focus-visible,
.tse-mobile-dropdown-toggle:active,
.tse-mobile-dropdown-toggle[aria-expanded="true"] {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent !important;
  /* Color fijo en TODOS los estados — nunca cambia. */
  color: #0D0D12 !important;
}
.tse-mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tse-mobile-dropdown-toggle .tse-chevron {
  font-size: 12px;
  color: #A0A0B0;
  transition: transform .2s ease;
}
.tse-mobile-dropdown-toggle[aria-expanded="true"] .tse-chevron {
  transform: rotate(180deg);
}
.tse-mobile-dropdown-panel {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff !important;
  transition: max-height .25s ease;
}
.tse-mobile-dropdown-panel.tse-abierto {
  max-height: 60vh;
  overflow-y: auto;
}
.tse-mobile-dropdown-panel a,
.tse-mobile-dropdown-panel a:visited {
  display: block;
  padding: 12px 24px 12px 36px;
  background-color: #ffffff !important;
  color: #0D0D12 !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid #F2F2F5;
}
.tse-mobile-dropdown-panel a:last-child {
  border-bottom: none;
}
.tse-mobile-dropdown-panel a:active,
.tse-mobile-dropdown-panel a:hover,
.tse-mobile-dropdown-panel a:focus {
  color: #C8102E !important;
  background-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   v1.6.2 · Servicios simplificados + Herramientas
═══════════════════════════════════════════════════════ */
.tse-nav-links { gap: 24px; }

.tse-nav-tarifas,
.tse-nav-tarifas:visited {
  color: var(--tse-red) !important;
}
.tse-nav-tarifas:hover,
.tse-nav-tarifas:focus {
  color: var(--tse-red-hover) !important;
}

.tse-nav-cta,
.tse-nav-cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--tse-red);
  border: 1px solid var(--tse-red);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .45px;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tse-nav-cta:hover,
.tse-nav-cta:focus {
  background: var(--tse-red-hover);
  border-color: var(--tse-red-hover);
  color: #fff !important;
  transform: translateY(-1px);
}

/* Servicios: desplegable compacto. Solo se muestran secciones independientes + acceso a todos. */
.tse-nav-dropdown-panel--services {
  left: 0;
  right: auto;
  min-width: 350px;
  max-width: 390px;
  grid-template-columns: 1fr;
  gap: 3px;
  max-height: none;
  overflow: visible;
  transform: translateY(-6px);
}
.tse-nav-dropdown-panel--services.tse-abierto {
  display: grid;
  transform: translateY(0);
}
.tse-nav-dropdown-panel--services:not(.tse-abierto) {
  display: grid;
}
.tse-nav-dropdown-panel--services .tse-service-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
}
.tse-service-menu-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(200,16,46,.055);
  font-size: 14px;
}

.tse-nav-dropdown-panel--services .tse-service-menu-item--all {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid #ececf1;
  color: var(--tse-red) !important;
  font-weight: 700;
}
.tse-nav-dropdown-panel--services .tse-service-menu-item--all .tse-service-menu-icon {
  background: rgba(200,16,46,.09);
  color: var(--tse-red);
  font-size: 16px;
}

/* Guías: todas las ciudades visibles en columnas, sin una lista kilométrica. */
.tse-nav-dropdown-panel--guides {
  left: auto;
  right: 0;
  min-width: 540px;
  max-width: 650px;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 2px 4px;
  max-height: min(430px, calc(100vh - 92px));
  overflow-y: auto;
  transform: translateY(-6px);
}
.tse-nav-dropdown-panel--guides.tse-abierto {
  display: grid;
  transform: translateY(0);
}
.tse-nav-dropdown-panel--guides:not(.tse-abierto) {
  display: grid;
}
.tse-nav-dropdown-panel--guides a { min-width: 0; }

/* El menú nuevo cabe con holgura en más portátiles: hamburguesa solo cuando
   realmente empieza a comprimirse. */
@media (max-width: 1180px) {
  .tse-nav-links { display: none !important; }
  .tse-nav-cta { display: none !important; }
  .tse-nav-hamburger { display: flex !important; }
  .tse-nav { padding: 0 clamp(14px, 3vw, 24px); }
  .tse-nav-logo-img { width: 45px; height: 45px; }
  .tse-nav-logo-text { font-size: 25px; }
  body.tse-has-header { padding-top: 62px; }
}

/* En móvil, Servicios también es un acordeón, con iconos reconocibles. */
.tse-mobile-dropdown--services .tse-mobile-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tse-mobile-service-icon {
  width: 24px;
  flex: 0 0 24px;
  text-align: center;
  font-size: 14px;
}

.tse-mobile-dropdown--services .tse-mobile-dropdown-panel a.tse-mobile-service-all {
  margin-top: 4px;
  border-top: 1px solid #ececf1;
  color: var(--tse-red) !important;
  font-weight: 700;
}
.tse-mobile-tarifas,
.tse-mobile-tarifas:visited {
  color: var(--tse-red) !important;
}


/* ── Herramientas: desplegable compacto, justo después de Guías ── */
.tse-nav-dropdown-panel--tools {
  left: auto;
  right: 0;
  min-width: 300px;
  max-width: 360px;
  max-height: none;
  overflow: visible;
  transform: translateY(-6px);
}
.tse-nav-dropdown-panel--tools.tse-abierto {
  transform: translateY(0);
}
.tse-nav-dropdown-panel--tools .tse-tool-menu-item--all {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid #ececf1;
  color: var(--tse-red) !important;
  font-weight: 700;
}
.tse-mobile-dropdown--tools .tse-mobile-dropdown-panel a.tse-mobile-tool-all {
  margin-top: 4px;
  border-top: 1px solid #ececf1;
  color: var(--tse-red) !important;
  font-weight: 700;
}