<style>


  @font-face {
  font-family: 'league_sparta';
  src: url('/woff/league-sparta/leaguespartan-bold-webfont.woff2') format('woff2'), url('/woff/league-sparta/leaguespartan-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'josefin_regular';
  src: url('/woff/josefin-sans/josefinsans-regular-webfont.woff2') format('woff2'), url('/woff/josefin-sans/josefinsans-regular-webfont.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
/* ===== HEADER AUTÓNOMO & LIMPIO (sustituye ambos <style>) ===== */

/* 1) Ajustes globales del header (toca SOLO estas variables) */
.fx-header{
  /* Tipografía base y “candado” móvil */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Apariencia del bloque header */
  background: linear-gradient(#f06, #d6507d);
  padding: 6px 10px 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  position: sticky; top: 0; z-index: 50;

  /* ===== VARIABLES VISUALES ===== */
  --pill-font-size: .65rem;    /* tamaño texto de chips/enlaces (ajusta aquí) */
  --pill-radius: 14px;         /* redondeo de chips/enlaces */
  --pill-py: .18em;            /* padding vertical de chip/enlace */
  --pill-px: .70em;            /* padding horizontal de chip/enlace */
  --pill-gap: .50rem;          /* separación entre chips */
  --pill-weight: 600;          /* grosor del texto en chips */
  --logo-size: 1.85rem;        /* tamaño logo (desktop base) */
}

/* 2) Layouts internos */
.fx-topbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.fx-tabs{ display:flex; gap:6px; }

/* 3) Logo */
.fx-logo{
  line-height: 1;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: var(--logo-size);
  color:#fff; text-decoration:none;
   line-height: 1;
  flex: 0 0 auto;
}

@media (min-width: 992px) { .fx-header{ --logo-size: 1.9rem; } }

/* 4) Enlaces/botones del header (chips, tabs, nav) */
.fx-header a:not(.fx-logo),
.fx-header .btn,
.fx-header .chip,
.fx-header nav a{
  font: inherit;
  font-size: var(--pill-font-size);
  font-weight: var(--pill-weight);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pill-py) var(--pill-px);
  border-radius: var(--pill-radius);
  min-height: 30px;
  text-decoration: none;
  gap: .35em;
  white-space: nowrap; /* no partir los chips por palabras */
}

/* 5) Variantes de color que ya usabas (sin tocar tamaños) */
.fx-tab{ background:rgba(0,0,0,.25); color:#fff; border:0; }
.fx-tab.is-active{ background:#0e7490; }
.fx-citylink{ color:#fff; background:rgba(0,0,0,.25); }
.fx-citylink.fx-more{ background:#0e7490; }
.fx-foro,.fx-home{ color:#fff; text-decoration:none; font-weight:600; }

/* 6) Buscador */
.fx-search{ display:flex; gap:6px; margin-top:8px; }
.fx-search-inp{
  flex:1; padding:8px 10px; border-radius:10px;
  border:1px solid #2a2f3a; background:#0b0e14; color:#e5e7eb;
  font: inherit; /* hereda familia/tamaño del header */
  font-size: .9rem;
line-height: 1.2;
}
.fx-search-btn{
  padding:8px 12px; border-radius:10px; border:1px solid #2a2f3a;
  background:#0e7490; color:#fff; font: inherit;
  font-size: .9rem;
line-height: 1.2;
}

/* 7) Tira/listado de ciudades (una sola fila, con scroll si no caben) */
/* En móvil la puedes ocultar si prefieres panel; en desktop se muestra */
.fx-cities-inline{
  display:flex;                /* móvil: oculta (usa panel) */
  gap:10px;
  flex-wrap: nowrap;           /* NO saltar de línea */
  overflow-x: auto;            /* scroll horizontal si no caben */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  scrollbar-width: none;       /* Firefox: oculta barra */
}
.fx-cities-inline::-webkit-scrollbar{ display:none; }
.fx-cities-inline > *{ flex:0 0 auto; } /* cada chip ocupa su ancho */
@media(min-width:992px){ .fx-cities-inline{ display:flex; } } /* desktop: visible */

/* 8) Panel móvil de ciudades (tu lógica actual) */
.fx-cities-panel[hidden]{ display:none; }
.fx-cities-panel{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:grid; place-items:center;
}
.fx-panel-inner{
  width:min(720px,92vw); max-height:80vh; background:#0b0f14; color:#e5e7eb;
  border-radius:14px; overflow:hidden; border:1px solid #1f2430;
}
.fx-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#11131a; }
.fx-city-filter{ width:100%; padding:10px 12px; border:none; background:#0b0e14; color:#e5e7eb; }
.fx-city-grid{
  display:grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap:8px; padding:10px; overflow:auto; max-height:55vh;
}
@media(min-width:520px){ .fx-city-grid{ grid-template-columns: repeat(3,1fr);} }
.fx-cityitem{
  display:block; padding:10px 12px; background:#111827; border:1px solid #2a2f3a;
  border-radius:10px; color:#e5e7eb; text-decoration:none;
}
.fx-cityitem:hover{ border-color:#3b4250; }

/* 9) Móvil: mismo tamaño que desktop (sin “clamp” que altere) */
@media (max-width: 768px){ 
 .fx-header a:not(.fx-logo),
.fx-header .btn,
.fx-header .chip,
.fx-header nav a{
    font-size: var(--pill-font-size);
    border-radius: calc(var(--pill-radius) - 2px);
    min-height: 30px;
  }
}

/* Panel (desplegable) — enlaces de ciudad en formato “lista”, NO pill */
.fx-header .fx-cityitem{
  display:block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;          /* que el nombre de ciudad pueda partir en varias líneas */
  padding: 10px 12px;
  border-radius: 10px;          /* más cuadradito que las pills */
  background:#111827;
  border:1px solid #2a2f3a;
  color:#e5e7eb;
  text-decoration:none;
}
.fx-header .fx-cityitem:hover{ border-color:#3b4250; }



</style>


<style>
.fx-logo {
  font-family: 'josefin_regular', sans-serif;
  font-size: 2rem;    /* móvil */
  line-height: 1.1;   /* que no se coma altura extra */
}

@media (min-width: 992px){
  .fx-logo { font-size: 2.6rem; }  /* escritorio */
}

.fx-logo {
  font-size: 2.4rem;   /* Ajusta tamaño global del logo */
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
}

.fx-logo-fre {
  color: #e5e7eb; /* gris claro */
  font-family: 'josefin_regular', sans-serif;
}

.fx-logo-six {
  color: #0e7490; /* rosa/fucsia */
  font-family: 'league_sparta', sans-serif;
}

.fx-logo-six:hover {
  color: #38bdf8; /* un turquesa más claro al pasar el ratón */
}
/* Fuerza el tamaño del logo incluso si otro CSS lo pisa */
.fx-logo {
  font-family: 'league_sparta', sans-serif; /* o josefin_regular si quieres */
  font-size: var(--logo-size) !important;
  line-height: 1 !important;
}

./* contenedor: botón filtros + formulario */
.fx-search{ display:flex; gap:8px; align-items:center; }

/* botón de filtros, independiente del form */
.fx-filter-btn{
  font: inherit;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #2a2f3a;
  background: #0e7490;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.fx-filter-btn:hover{ background:#0c5f73; }

/* el form ocupa el resto del ancho */
.fx-search-form{ flex:1; display:flex; gap:6px; align-items:center; }

/* Botón de filtros: misma caja que la lupa */
.fx-filter-btn{
  font: inherit;
  font-size: .9rem;       /* igual que el buscador */
  line-height: 1.2;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #2a2f3a;
  background: #0e7490;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 38px;
}

/* Icono embudo (SVG) */
.fx-filter-btn .fx-icon{
  width: 18px;            /* si lo quieres “igual que la lupa”: 18–20px */
  height: 18px;
  display: block;
  fill: currentColor;     /* hereda #fff del botón */
}
/* misma caja para ambos botones */
.fx-search-btn,
.fx-filter-btn{
  box-sizing: border-box;
  padding: 10px 14px;
  min-height: 38px;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* normaliza el SVG del filtro */
.fx-filter-btn .fx-icon{ width: 18px; height: 18px; display:block; fill: currentColor; }

/* por si el input “engaña” la alineación visual */
.fx-search-inp{ box-sizing:border-box; }

/* dos tonos usando opacidades del color actual */
.fx-filter-btn .fx-icon .tone-1{ opacity: .95; }
.fx-filter-btn .fx-icon .tone-2{ opacity: .35; }

/* Marco del panel tipo "ventana" */
.fx-panel-inner{
  background:#0b0f14;                 /* negro actual */
  border:1px solid #d6507d;           /* rosa-fucsia del sitio */
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
  overflow:hidden;                     /* que la cabecera se vea al ras */
}

/* Barra de cabecera estilo Windows con nuestro rosa */
.fx-panel-head{
  background: linear-gradient(90deg, #f06, #d6507d);
  color:#fff;
  padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Título de la cabecera */
.fx-panel-head strong{
  font-weight:700;
  font-size:1rem;
  letter-spacing:.2px;
}

/* Botón cerrar (X) afinado para esa barra */
.fx-close-filters,
#fxCloseCities{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  width:28px; height:28px;
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.fx-close-filters:hover,
#fxCloseCities:hover{
  background:rgba(255,255,255,.28);
}
/* enlaces de ciudad en el panel */
.fx-city-grid a,
.fx-cityitem,
.fx-citylink{
  display:block;
  color:#e5e7eb;            /* blanco suave */
  text-decoration:none;     /* sin subrayado */
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #2a2f3a;
  background:#111827;
}

/* hover (desktop) */
.fx-city-grid a:hover{
  border-color:#d6507d;     /* rosa-fucsia del sitio */
  color:#fff;
}

/* accesible en teclado */
.fx-city-grid a:focus-visible{
  outline:2px solid #f06;
  outline-offset:2px;
}


/* Chip España solo con bandera (emoji) */
.fx-citylink.espana-flag{
  /* caja del chip (igual altura que el resto, ancho fijo) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;               /* ajusta si quieres más estrecho/ancho */
  height: 32px;              /* mismo alto que tus chips */
  padding: 0;                
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  background: #111827;

  /* tamaño del emoji (forzamos para que gane a reglas genéricas) */
  font-size: 2rem !important; 
  line-height: 1;
}

/* hover coherente con el resto */
.fx-citylink.espana-flag:hover{
  border-color:#d6507d;
}
.fx-filter-gender {
  margin: 10px 0 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fx-filter-label {
  color: #e5e7eb;
  font-weight: 600;
  margin-right: 8px;
  font-size: .75rem;    /* igual que 'Filtrar ciudades…' */
  opacity: .95;

}

.fx-gender-btn {
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #2a2f3a;
  background: #111827;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all .2s ease;
}

.fx-gender-btn:hover {
  border-color: #d6507d;
  color: #fff;
}

.fx-gender-btn.active {
  background: #d6507d;
  border-color: #d6507d;
  color: #fff;
}
/* coloca esto al final de tu <style> del panel */
.fx-filter-gender{
  padding: 8px 10px 0;   /* separa de los bordes */
  margin-bottom: 8px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

.fx-gender-btn{
  padding:5px 10px; border-radius:10px;
  border:1px solid #2a2f3a; background:#111827; color:#e5e7eb;
  cursor:pointer; font-size:.85rem; line-height:1.2;
}
.fx-gender-btn:hover{ border-color:#d6507d; color:#fff; }

/* más especificidad para ganar a cualquier regla anterior */
.fx-cities-panel .fx-gender-btn.active{
  background:#d6507d; border-color:#d6507d; color:#fff;
}

/* Cortafuegos total del header en móvil: tamaño y scroll de chips */
@media (max-width: 768px){
  #fxh{
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  #fxh .fx-logo{
    font-size: 2.6rem !important;   /* pon aquí el tamaño que quieres ver en móvil */
    line-height: 1.1 !important;
  }
  #fxh a,
  #fxh .btn,
  #fxh .chip,
  #fxh nav a{
    font-size: 12px !important;     /* ajusta si las pastillas deben ir mayores/menores */
    line-height: 1.2 !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  /* tira de ciudades: siempre una fila con scroll */
  #fxh .fx-cies, 
  #fxh .fx-cities-inline{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    gap:.5rem !important;
  }
  #fxh .fx-cities-inline > *{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  /* inputs del header a 16px para evitar rarezas en iOS */
  #fxh input[type="search"],
  #fxh .fx-search-inp{ font-size:16px !important; }
}
/* Normaliza espacios de la página */
html, body { margin: 0; padding: 0; }

/* Evita que el primer bloque empuje hacia abajo */
body > :first-child { margin-top: 0 !important; }

/* Tus wrappers clásicos: sin margen arriba */
#contenedor, #cuerpo, #contenido { margin-top: 0 !important; }

/* El header no añade hueco extra por defecto */
.fx-header { margin-top: 0; }
</style>

