/* ==========================================================================
   FINBA 2026 · Sistema visual compartido (rediseño)
   Lo usan: index.html, programacion.html, companias.html y las páginas de
   cada compañía. Menú y footer los dibuja finba-ui.js.
   ========================================================================== */
:root{
  --noche:#0b1f3f; --azul:#12305e; --naranja:#ee7c1c; --amarillo:#f6c200;
  --celeste:#6fb3e0; --crema:#f4f1e6; --gris:#4a5874; --cuerpo:#2b3a55;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden}
body{font-family:'Titillium Web',sans-serif;color:var(--azul);background:var(--crema);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{text-decoration:none;color:inherit}
::selection{background:var(--naranja);color:#fff}
.bebas{font-family:'Bebas Neue',sans-serif;font-weight:400}

/* ── Sección estándar ── */
.fx-sec{max-width:1300px;margin:0 auto;padding:88px var(--pad)}
.fx-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 24px;margin-bottom:36px}
.fx-kicker{font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);margin-bottom:10px}
.fx-h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(56px,6vw,84px);line-height:.9;margin:0}
.fx-more{font-weight:700;font-size:17px;letter-spacing:.03em;color:var(--naranja);white-space:nowrap}
.fx-more:hover{color:var(--azul)}
.fx-stripe{height:10px;background:linear-gradient(90deg,#ee7c1c 0 40%,#f6c200 40% 60%,#6fb3e0 60% 80%,#fff 80%)}

/* ── Botones ── */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:.03em;padding:16px 28px;border-radius:50px;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;font-family:inherit;line-height:1.1;text-align:center}
.fx-btn:hover{transform:translateY(-1px)}
.fx-btn.naranja{background:var(--naranja);color:#fff}
.fx-btn.naranja:hover{background:var(--amarillo);color:var(--azul)}
.fx-btn.azul{background:var(--azul);color:#fff}
.fx-btn.azul:hover{background:var(--noche);color:var(--amarillo)}
.fx-btn.linea{background:transparent;color:#fff;border-color:#fff}
.fx-btn.linea:hover,.fx-btn.linea:active{background:rgba(255,255,255,.16);border-color:var(--amarillo);color:#fff}
.fx-btn.blanco{background:#fff;color:var(--azul);border-color:rgba(18,48,94,.15)}
.fx-btn.blanco:hover{background:var(--azul);color:#fff}

/* ── Banderas ── */
.fx-flagrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fx-flag{display:inline-block;width:30px;height:20px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.25);flex:none;vertical-align:middle}
.fx-flag svg{display:block;width:100%;height:100%}
.fx-flag.sm{width:21px;height:14px;border-radius:2px}

/* ── MENÚ ── */
.fx-nav{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px max(var(--pad),calc((100% - 1300px)/2 + var(--pad)));color:#fff}
.fx-brand{display:flex;align-items:center;gap:14px;flex:none}
.fx-brand img{height:56px;width:auto;display:block}
.fx-brand img.logo{height:64px}
.fx-brand img.logo,.fx-white{filter:brightness(0) invert(1)}
.fx-brand img.sello{height:52px}
.fx-links{display:flex;align-items:center;gap:26px}
.fx-link{font-weight:700;font-size:17px;letter-spacing:.02em;color:#fff;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit}
.fx-link:hover{color:var(--amarillo)}
.fx-link.on{color:var(--amarillo);border-bottom-color:var(--amarillo)}
.fx-drop{position:relative}
.fx-drop-menu{display:none;position:absolute;top:100%;left:-18px;padding-top:12px;min-width:270px}
.fx-drop:hover .fx-drop-menu,.fx-drop:focus-within .fx-drop-menu{display:block}
.fx-drop-card{background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(11,31,63,.3);padding:8px;display:flex;flex-direction:column}
.fx-drop-card a{color:var(--azul);font-weight:700;font-size:16px;padding:11px 14px;border-radius:9px}
.fx-drop-card a:hover{background:var(--crema);color:var(--naranja)}
.fx-right{display:flex;align-items:center;gap:18px;flex:none}
.fx-lang{font-size:15px;font-weight:700;letter-spacing:.06em;cursor:pointer;user-select:none;white-space:nowrap}
.fx-cta{background:var(--naranja);color:#fff;font-weight:700;font-size:16px;letter-spacing:.03em;padding:12px 22px;border-radius:40px;white-space:nowrap;transition:background .15s,color .15s}
.fx-cta:hover{background:var(--amarillo);color:var(--azul)}
.fx-burger{display:none;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.14);border:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.fx-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

.fx-mm{position:fixed;inset:0;z-index:1000;background:var(--noche);color:#fff;display:none;flex-direction:column;padding:22px 24px 40px;overflow-y:auto}
.fx-mm.open{display:flex}
.fx-mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.fx-mm-top img{height:52px}
.fx-mm-close{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:22px;cursor:pointer}
.fx-mm a.big{font-family:'Bebas Neue',sans-serif;font-size:46px;line-height:1.05;padding:4px 0;color:#fff}
.fx-mm a.big.on{color:var(--amarillo)}
.fx-mm .lbl{font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--celeste);margin:22px 0 6px}
.fx-mm a.sub{font-weight:700;font-size:19px;padding:8px 0;color:#fff}
.fx-mm .fx-lang{margin-top:26px;font-size:17px}
.fx-mm .fx-cta{margin-top:24px;text-align:center;font-size:18px;padding:16px}

@media (max-width:1180px){
  .fx-links,.fx-right .fx-cta,.fx-right .fx-lang{display:none}
  .fx-burger{display:flex}
}
@media (max-width:759px){
  .fx-nav{padding:16px 18px}
  .fx-brand img{height:48px}
  .fx-brand img.logo{height:54px}
  .fx-brand img.sello{height:44px}
  .fx-sec{padding:52px 18px}
  .fx-head{margin-bottom:24px}
  .fx-h2{font-size:54px}
}

/* ── Franja de logos + footer ── */
.fx-logos{background:#fff;padding:36px var(--pad);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:48px}
.fx-logos img{width:auto;display:block}
.fx-foot{background:var(--noche);color:#fff}
.fx-foot-in{max-width:1300px;margin:0 auto;padding:48px var(--pad) 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.fx-foot p{margin:0;font-size:16px;line-height:1.55;color:#c9d6ea}
.fx-foot h4{margin:0 0 12px;font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--amarillo)}
.fx-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16px;color:#c9d6ea}
.fx-foot ul a:hover{color:var(--amarillo)}
.fx-social{display:flex;flex-wrap:wrap;gap:8px}
.fx-social a{border:2px solid rgba(255,255,255,.3);border-radius:30px;padding:7px 14px;font-weight:700;font-size:15px;color:#fff}
.fx-social a:hover{border-color:var(--amarillo);color:var(--amarillo)}
.fx-foot-bot{max-width:1300px;margin:0 auto;padding:18px var(--pad) 28px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:#8fa3c2}
