/* ================== */
/*  Variables & Base  */
/* ================== */

:root{
  --blue: #066AA5;
  --accent: #0a6fb2;
  --bg: #f2f7fb;
  --text: #1f2937;
  --muted: #5b6776;

  --container-std: 1200px;
  --container-wide: 1500px;

  /* Burger defaults */
  --burger-w: 44px;
  --burger-h: 32px;
  --burger-bar: 3px;
  --burger-gap: 6px;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

.container{ max-width: var(--container-std); margin: auto; padding: 0; }
.container--wide{ max-width: var(--container-wide); margin: auto; padding: 0; }

.container{
  max-width: var(--container-std);
  margin: auto;
  padding: 0;
}
.container--wide{
  max-width: var(--container-wide);
  margin: auto;
  padding: 0;
}

/* =============== */
/*     TOPBAR      */
/* =============== */

.topbar{ background: var(--blue); color: #fff; font-weight: 700; }
.topbar .topbar-row{
  display: flex; align-items: center; justify-content: flex-end; height: 50px;
}
.topbar a{ color: #fff; text-decoration: underline; }
.topbar .top-left{ display: none; margin-right: auto; }
.topbar .top-right{ margin-left: auto; }

/* =============== */
/*     HEADER      */
/* =============== */

.header-main{
  background: var(--bg);
  border-bottom: 1px solid #e5eef6;
  position: relative;       /* referencia para dropdown */
  padding-bottom: 8px;      /* zona tampón para cruzar al dropdown */
}

.header-row{
  display: grid;
  grid-template-columns: auto 1fr auto; /* izq | centro | der */
  align-items: center;
  gap: 48px;
  padding: 2px 0;
}

.brand{ display: flex; gap: 16px; align-items: center; justify-self: start; }
.brand img{ height: 120px; width: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.brand h1{ margin: 0; font-size: 16px; line-height: 1.15; color: var(--accent); font-weight: 700; }

.nav{ justify-self: center; }
.nav ul{ display: flex; gap: 48px; margin: 0; padding: 0; list-style: none; }
.nav a{ color: var(--text); text-decoration: none; font-weight: 500; }
.nav a:hover{ color: var(--accent); }
.has-sub > a::after{ content: "▾"; margin-left: 6px; font-size: .9em; color: var(--text); }

/* CTA derecha */
.btn-outline{
  border: 2px solid var(--accent); color: var(--accent); background: #fff;
  padding: 10px 18px; border-radius: 4px; font-weight: 700; text-decoration: none;
  justify-self: end;
}
.btn-outline:hover{ background: var(--accent); color: #fff; }

/* =============== */
/*    DROPDOWN     */
/* =============== */

/* Panel azul (oculto por defecto; visible con .dropdown-open en el header) */
.dropdown-wide{
  position: absolute; left: 0; right: 0; top: calc(100% - 8px);
  background: var(--blue); color: #fff;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; /* delay al ocultar */
  z-index: 1000;
}

.dropdown-wide .submenu-container{
  max-width: var(--container-wide);
  margin: auto; padding: 24px 40px;
  display: flex; gap: 48px; justify-content: space-between; flex-wrap: wrap;
}

.dropdown-wide a{ color: #fff; opacity: .95; text-decoration: none; font-weight: 600; }
.dropdown-wide a:hover{ opacity: 1; text-decoration: underline; }

/* Mostrar cuando el header tiene la clase .dropdown-open */
.header-main.dropdown-open .dropdown-wide{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition-delay: 0s, 0s, 0s !important;
}

/* Extiende el área hover del <li> para puentear el borde inferior */
.nav li.has-sub{ position: relative; }
.nav li.has-sub::after{
  content: ""; position: absolute; left: -10px; right: -10px; bottom: -12px; height: 12px;
}

/* =============== */
/*   HAMBURGUESA   */
/* =============== */

.burger{
  display: none; background: none; border: 0; cursor: pointer;
  width: var(--burger-w); height: var(--burger-h); padding: 0; justify-self: end;
  margin-right: 15px;
}
.burger span{
  display: block; height: var(--burger-bar); border-radius: 2px; background: var(--text);
  margin: var(--burger-gap) 0; transition: transform .18s ease, opacity .18s ease;
}
.burger.active span:nth-child(1){
  transform: translateY(calc(var(--burger-bar) + var(--burger-gap))) rotate(45deg);
}
.burger.active span:nth-child(2){ opacity: 0; }
.burger.active span:nth-child(3){
  transform: translateY(calc(-1 * (var(--burger-bar) + var(--burger-gap)))) rotate(-45deg);
}

/* =============== */
/*   MOBILE NAV    */
/* =============== */

.mobile-nav{
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
  z-index: 2000;
}
.mobile-nav .panel{
  position: absolute; right: 0; top: 0; height: 100%; width: min(85vw, 360px);
  background: #fff; display: flex; flex-direction: column;
  box-shadow: -12px 0 24px rgba(0,0,0,.15);
  transform: translateX(100%); transition: transform .22s ease;
}
.mobile-nav.open{ opacity: 1; visibility: visible; }
.mobile-nav.open .panel{ transform: none; }

.mobile-nav header{ padding: 12px 20px; border-bottom: 1px solid #e5eef6; background: var(--bg); font-weight: 700; }
.mobile-nav nav{ padding: 8px 20px 20px; }
.mobile-nav ul{ list-style: none; margin: 0; padding: 0; }
.mobile-nav a, .mobile-nav button{
  display: block; width: 100%; text-align: left; padding: 12px 0;
  background: none; border: 0; font: inherit; color: var(--text); text-decoration: none;
}
.mobile-nav a:hover{ color: var(--accent); }
.m-has-sub .m-submenu{ display: none; padding-left: 12px; }
.m-has-sub.open .m-submenu{ display: block; }
.m-sub-toggle::after{ content: "▾"; float: right; }

/* =============== */
/*     FOOTER      */
/* =============== */


.footer-top{ background: var(--bg); border-top: 1px solid #e5eef6; }

.footer-grid{
  display: grid; grid-template-columns: 1.2fr 2fr;
  gap: 56px; padding: 48px 0 60px; align-items: start;
}

.footer-brand{ display: flex; gap: 18px; align-items: flex-start; }
.footer-brand img{ height: 110px; width: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.contact p{ margin: 0 0 12px 0; }

.social{ display: flex; gap: 16px; margin-top: 18px; }
.social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #0b0b0b; color: #fff; text-decoration: none;
}
.social svg{ width: 22px; height: 22px; fill: #fff; }

.footer-links-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px 56px;
}
.footer-col h4{ margin: 0 0 12px 0; font-size: 16px; }
.footer-links{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-links a{ color: var(--text); text-decoration: none; }
.footer-links a:hover{ color: var(--accent); text-decoration: underline; }

.footer-bottom{ background: var(--blue); color: #fff; font-size: 14px; }
.footer-bottom .container--wide{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; text-align: center;
}
.footer-bottom a{ color: #fff; text-decoration: underline; }

/* =============== */
/*   RESPONSIVE    */
/* =============== */

@media (max-width: 980px){
  /* Topbar: Torneos izq / Login der */
  .topbar .topbar-row{ justify-content: space-between; }
  .topbar .top-left{ display: inline; }

  /* Header mobile */
  .header-row{ grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; }
  .nav{ display: none; }
  .btn-outline{ display: none; }
  .burger{ display: block; }
  .brand img{ height: 56px; }

  /* Extra alto arriba */
  .header-row{
    padding-top: max(env(safe-area-inset-top), clamp(36px, 8vw, 56px));
    padding-bottom: 12px;
  }
  /* Aire lateral coherente */
  .container,
  .container--wide,
  .topbar .container--wide,
  .footer-top .container--wide,
  .footer-bottom .container--wide{
    padding-left: max(env(safe-area-inset-left), clamp(18px, 5vw, 28px));
    padding-right: max(env(safe-area-inset-right), clamp(18px, 5vw, 28px));
  }
  .brand h1{ margin-bottom: 10px; }

  /* Footer mobile: contacto arriba + 3 columnas de links */
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; padding: 24px 0 28px; }
  .footer-brand img{ height: 90px; }

  .footer-links-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    column-gap: 24px; row-gap: 12px;
  }
}

/* Mantener 3 columnas incluso muy angosto; pasar a 1 sola en XS */
@media (max-width: 340px){
  .footer-links-grid{ grid-template-columns: 1fr; }
}

/* Helper: bloquear scroll cuando el drawer está abierto */
body.no-scroll{ overflow: hidden; }

@media (max-width: 1500px) and (min-width: 981px){
  .container,
  .container--wide,
  .topbar .container--wide,
  .footer-top .container--wide,
  .footer-bottom .container--wide{
    padding-left: clamp(24px, 4vw, 48px);
    padding-right: clamp(24px, 4vw, 48px);
  }

  .dropdown-wide .submenu-container{
    padding-left: clamp(24px, 4vw, 48px);
    padding-right: clamp(24px, 4vw, 48px);
  }
}

/* 981px–1100px: padding SOLO en header/topbar/dropdown */
@media (max-width:1100px) and (min-width:981px){

  /* 👉 SOLO header y topbar con aire lateral */
  .topbar .container--wide,
  .header-main .container--wide{
    padding-left: clamp(24px, 4vw, 48px);
    padding-right: clamp(24px, 4vw, 48px);
  }

  /* 👉 El dropdown azul respeta el mismo aire */
  .dropdown-wide .submenu-container{
    padding-left: clamp(24px, 4vw, 48px);
    padding-right: clamp(24px, 4vw, 48px);
  }

  /* ❌ Quitar padding del resto (cuerpo y, si querés, footer) */
  main.container--wide,
  main .container--wide{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* (opcional) si NO querés aire en el footer en este rango, descomenta:
  .footer-top .container--wide,
  .footer-bottom .container--wide{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  */

  /* Ajustes compactos del header en este rango */
  .header-row{ gap: 28px; padding: 22px 0; }
  .brand img{ height: 64px; }
  .brand h1{ font-size:16px; line-height:1.15; margin:0; }
  .nav ul{ gap: 28px; }
  .nav a{ font-size:16px; white-space:nowrap; }
  .btn-outline{ padding:8px 14px; font-size:15px; }
}

/* ===== Full-width del cuerpo en resoluciones grandes ===== */
@media (min-width: 1101px){
  /* main a sangre: sin padding ni márgenes */
  main.container--wide,
  main .container,
  main .container--wide{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 1100px){
  main,
  main.container,
  main.container--wide,
  main .container,
  main .container--wide{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* dejamos el padding-left/right como esté definido en tus breakpoints */
  }
}