/* ============================================================
   i18n.css — Franja de banderas y aviso de idioma
   ------------------------------------------------------------
   Usa las variables de css/styles.css para integrarse con el
   diseno existente. No modifica ningun otro componente: el
   unico ajuste externo es el hueco que la franja necesita en
   lo alto de la pagina (ver "Hueco para la franja").
   ============================================================ */

:root {
  /* Altura de la franja. Todo lo demas se calcula a partir de aqui. */
  --lang-bar-h: 34px;
}

/* ------------------------------------------------------------
   Hueco para la franja
   ------------------------------------------------------------
   La barra de navegacion es 'position: fixed; top: 0', y el hero
   lleva un padding-top que la compensa. Al anadir la franja de
   banderas encima hay que desplazar las dos cosas:
     - el contenido baja con el padding del body;
     - la barra de navegacion baja hasta debajo de la franja.
   Asi no hay que tocar el padding de cada hero por separado.
   ------------------------------------------------------------ */

body {
  padding-top: var(--lang-bar-h);
}

.navbar {
  top: var(--lang-bar-h);
}

/* Que los enlaces de ancla (#servicios, #contacto...) no queden
   tapados por la franja mas la barra de navegacion. */
html {
  scroll-padding-top: calc(var(--lang-bar-h) + 72px);
}

/* ------------------------------------------------------------
   La franja
   ------------------------------------------------------------ */

.lang-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;          /* por encima de la barra de navegacion */
  width: 100%;
  height: var(--lang-bar-h);
  display: flex;
  align-items: center;
  background: var(--bg-dark, #fff);
  border-bottom: 1px solid var(--glass-border, rgba(0, 0, 0, .08));
  font-family: var(--font-family, 'Outfit', sans-serif);
}

.lang-bar-list {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  list-style: none;

  /* Movil: una sola fila que se arrastra con el dedo. En escritorio
     las 15 banderas caben de sobra y esto no llega a activarse. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  overscroll-behavior-x: contain;     /* que no arrastre la pagina entera */
}

.lang-bar-list::-webkit-scrollbar {
  display: none;                      /* Chrome, Safari */
}

.lang-bar-list li {
  flex: 0 0 auto;                     /* nunca se encogen */
  margin: 0;
}

.lang-bar-list a {
  display: block;
  padding: 4px 5px;
  border-radius: 4px;
  line-height: 0;                     /* sin hueco fantasma bajo la imagen */
  text-decoration: none;
  transition: background var(--transition-fast, .2s), transform var(--transition-fast, .2s);
}

.lang-bar-list a:hover {
  background: var(--bg-light, #f1f5f9);
  transform: translateY(-1px);
}

.lang-bar-list a:focus-visible {
  outline: 2px solid var(--primary, #f37021);
  outline-offset: -1px;
}

.lang-bar .lang-flag {
  display: block;
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  /* Las banderas claras (Suiza, Austria) necesitan un borde para
     no perderse contra el fondo blanco de la franja. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  opacity: .72;
  transition: opacity var(--transition-fast, .2s);
}

.lang-bar-list a:hover .lang-flag {
  opacity: 1;
}

/* --- Idioma actual ---
   Se marcan TODAS las banderas que llevan al idioma que se esta
   viendo: si estas en /de/, Alemania, Austria y Suiza son las tres
   "tu idioma", y decir lo contrario seria enganoso. */
.lang-bar-list a.is-active {
  background: rgba(243, 112, 33, .1);
  cursor: default;
}

.lang-bar-list a.is-active .lang-flag {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--primary, #f37021);
}

.lang-bar-list a.is-active:hover {
  transform: none;
}

/* --- Pista de que la fila continua ---
   Solo en movil, y solo si las banderas no caben: un degradado en el
   borde derecho avisa de que se puede arrastrar. Es decorativo, asi
   que no captura los toques. --- */
@media (max-width: 900px) {
  .lang-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: calc(var(--lang-bar-h) - 1px);
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg-dark, #fff) 80%);
  }
}

/* --- Movil --- */
@media (max-width: 900px) {
  .lang-bar-list {
    justify-content: flex-start;
    padding: 0 10px;
  }
  /* Un poco mas de zona tactil sin que la franja crezca. */
  .lang-bar-list a {
    padding: 6px 4px;
  }
}

@media (max-width: 480px) {
  .lang-bar .lang-flag {
    width: 22px;
    height: 16px;
  }
}

@media print {
  .lang-bar { display: none; }
  body { padding-top: 0; }
}

/* ============================================================
   Aviso "esta pagina existe en tu idioma"
   Solo sugiere; nunca redirige automaticamente (ver i18n.js).
   ============================================================ */

.lang-suggest {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 24px));
  padding: 12px 14px 12px 18px;
  transform: translateX(-50%);
  background: var(--bg-dark, #fff);
  border: 1px solid var(--glass-border, rgba(0, 0, 0, .08));
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 12px 24px rgba(0, 0, 0, .12));
  font-family: var(--font-family, 'Outfit', sans-serif);
  font-size: .9rem;
  color: var(--text-main, #1d1d1b);
  animation: lang-suggest-in .35s cubic-bezier(.4, 0, .2, 1);
}

@keyframes lang-suggest-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lang-suggest { animation: none; }
}

.lang-suggest-flag {
  flex: 0 0 auto;
  width: 24px;
  height: 18px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.lang-suggest-text { flex: 1 1 auto; }

.lang-suggest-go {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary, #f37021);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast, .2s);
}

.lang-suggest-go:hover { background: var(--primary-hover, #d85d18); }

.lang-suggest-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #575756);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.lang-suggest-close:hover { background: var(--bg-light, #f1f5f9); }

@media (max-width: 520px) {
  .lang-suggest {
    flex-wrap: wrap;
    bottom: 12px;
    padding: 12px 14px;
    font-size: .84rem;
  }
  .lang-suggest-text { flex: 1 1 100%; }
}