/*
 Theme Name: Ongravity
 Theme URI: https://ongravity.es
 Author: Nico (KZNO Studio)
 Author URI: https://kznostudio.com
 Description: Tema personalizado para Ongravity — Freestyle Indoor Center.
 Version: 1.0.6
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: ongravity
 Tags: custom-menu, responsive-layout, custom-logo
*/

/* =======================
   FUENTES / TOKENS
   ======================= */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');          /* cuerpo */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800;900&display=swap'); /* navegación */

:root{
  --og-red:#c9281b;
  --og-white:#EFEDEC;
  --og-bg:#111;
}

/* =======================
   BASE
   ======================= */
html,body{height:100%}
html.no-scroll{ overflow:hidden; }
*{ box-sizing:border-box }
body{
  margin:0;
  background:#111;
  color:#fff;
  font-family:'Oswald', sans-serif;
  line-height:1.45;
}

/* =======================
   HEADER / BARRA
   ======================= */
.og-header{ position:relative; z-index:1000; }
.og-bar{
  position:sticky; top:0; z-index:9999;
  background:rgba(24,18,16,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #2a2a2a;

  display:flex; align-items:center; gap:16px;
  padding:10px 14px;
  min-height:64px;

  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.og-logo{ display:inline-flex; align-items:center; margin-right:auto; }
.og-logo-img{
  display:block; height:38px; width:auto;
  filter: drop-shadow(0 2px 8px #0003);
  transition: transform .18s;
}
.og-logo-img:hover{ transform:scale(1.06); }

/* Burger (visible en móvil) */
.og-burger{
  display:none;
  appearance:none; border:1px solid #333; background:#141414; color:#fff;
  padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:800;
}

/* =======================
   NAVEGACIÓN PRINCIPAL
   ======================= */
#og-mainnav{
  margin-left:auto;
  padding-right:196px; /* hueco reservado para el CTA (desktop) */
}
.og-bar .og-nav{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:22px;
  flex-wrap:nowrap; white-space:nowrap; /* evita saltos a otra línea */
}
.og-bar .og-nav > li{
  position:relative;
  display:flex; align-items:center;
  line-height:1; /* endurece una sola línea */
}
.og-bar .og-nav > li > a{
  display:flex; align-items:center; gap:8px;
  color:#e9e9e9; text-decoration:none;
  text-transform:uppercase; letter-spacing:.06em; font-weight:800;
  padding:12px 10px; border-radius:10px; line-height:1;
  transition: color .18s ease, background .18s ease;
}
.og-bar .og-nav > li > a:hover,
.og-bar .og-nav > li > a:focus-visible{
  color:var(--og-red); background:rgba(201,40,27,.08); outline:none;
}

/* =======================
   ELIMINAR INDICADORES QUE CREAN 2ª LÍNEA
   (triangulitos/flechas que mete el tema/Elementor)
   ======================= */
.og-bar .og-nav > li.menu-item-has-children > a::after,
.og-bar .og-nav > li.menu-item-has-children > a::before,
.og-bar .og-nav > li > a .sub-arrow,
.og-bar .og-nav > li > a .dropdown-toggle,
.og-bar .og-nav > li > a .nav-dropdown-toggle,
.og-bar .og-nav > li > .sub-arrow,
header .elementor-nav-menu .elementor-item:after,
header .elementor-nav-menu .elementor-item:before{
  display:none !important;
  content:"" !important;
}

/* (Si quieres un caret inline propio, añade un <span class="arrow">▼</span> en el HTML)
.og-bar .og-nav > li.has-dd > a .arrow{ margin-left:6px; display:inline-block; transform:translateY(1px); transition:transform .18s; }
.og-bar .og-nav > li.has-dd.open > a .arrow{ transform:rotate(180deg); }
*/

/* =======================
   DROPDOWNS GENÉRICOS
   ======================= */
.og-nav .has-dd{ position:relative; }
.og-nav .has-dd > .dd{
  position:absolute; left:0; top:calc(100% + 10px);
  background:#141414; border:1px solid #2a2a2a; border-radius:14px;
  padding:14px; min-width:280px;
  box-shadow:0 20px 40px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s; pointer-events:none;
}
@media (hover:hover){
  .og-nav .has-dd:hover > .dd{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
}
.og-nav .has-dd.open > .dd{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }

/* Academias en cards */
.dd.cards{ display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:14px; }
.card-dd{ display:block; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:12px; padding:10px; color:#fff; text-decoration:none; }
.card-dd .thumb{ aspect-ratio:16/9; overflow:hidden; border-radius:10px; margin-bottom:8px; }
.card-dd img{ width:100%; height:100%; object-fit:cover; }
.card-dd .muted{ display:block; opacity:.75; font-weight:600; letter-spacing:.02em; }

/* Cumpleaños & Eventos en grid 2 columnas */
.dd.meg{ display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:16px; }
.dd.meg h4{ margin:.25rem 0 .5rem; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; }
.dd.meg .og-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; text-decoration:none; color:#fff; }
.dd.meg .og-item:hover{ background:rgba(201,40,27,.12); }

/* Centros como lista */
.dd.og-list{ display:grid; gap:10px; min-width:320px; }
.dd.og-list a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:#fff; background:#0f0f0f; border:1px solid #2a2a2a; }
.dd.og-list a:hover{ background:rgba(201,40,27,.12); }

/* =======================
   OTROS SERVICIOS (MEGA)
   ======================= */
.og-nav > li.og-right > .dd.brands-list{ right:0; left:auto; }
.og-nav .has-dd > .dd.brands-list{
  position:absolute;
  top:calc(100% + 12px); left:0;
  z-index:1050;
  background:#0e0e0e;
  border:1px solid #2a2a2a;
  border-radius:18px;
  padding:18px;
  width:min(92vw, 960px);
  box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s, transform .18s, visibility .18s;
  pointer-events:none;
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:16px;
}
@media (hover:hover){
  .og-nav .has-dd:hover > .dd.brands-list{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
}
.og-nav .has-dd.open > .dd.brands-list{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }

.dd.brands-list .brand-group{
  grid-column:1 / -1;
  background:#0f0f0f;
  border:1px solid #2a2a2a;
  border-radius:16px;
  padding:14px;
}
.dd.brands-list .brand-head{
  all:unset;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; width:100%;
  padding:6px 4px;
}
.dd.brands-list .brand-head .bh-left{ display:flex; align-items:center; gap:10px; }
.dd.brands-list .brand-head img{ width:28px; height:28px; object-fit:contain; }
.dd.brands-list .brand-head strong{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:900; letter-spacing:.04em; font-size: clamp(1rem, 2vw, 1.35rem);
}
.dd.brands-list .brand-head .bh-arrow{ opacity:.8; }

.dd.brands-list .brand-sub{ padding-top:10px; }
.dd.brands-list .brand-pills{
  display:grid; gap:12px;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}
.dd.brands-list .pill{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; font-weight:900; letter-spacing:.06em;
  padding:14px 18px; border-radius:14px;
  background:#0c0c0c; border:1px solid #2a2a2a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  text-transform:uppercase;
}
.dd.brands-list .pill:hover{ background:rgba(201,40,27,.12); }
.dd.brands-list .pill--accent{ background:rgba(201,40,27,.14); border-color:#3a1a17; }

.dd.brands-list .brand-card{
  display:flex; align-items:center; gap:14px;
  padding:18px;
  background:#101010;
  border:1px solid #2a2a2a;
  border-radius:16px;
  color:#fff; text-decoration:none;
  min-height:86px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.dd.brands-list .brand-card img{ width:44px; height:44px; object-fit:contain; }
.dd.brands-list .brand-card strong{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(.95rem, 1.7vw, 1.25rem); letter-spacing:.06em; font-weight:900; text-transform:uppercase;
}
.dd.brands-list .brand-card:hover{ background:#141414; }

/* Mantiene hover al bajar del item al panel */
.og-nav .has-dd > .dd.brands-list::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:12px;
}

/* Accesibilidad */
.dd.brands-list a:focus-visible{ outline:2px solid var(--og-red); outline-offset:2px; }

/* =======================
   CTA "RESERVA" (como la 2ª captura)
   ======================= */
.og-cta{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex; align-items:center;
  background:#171717;
  border:1px solid #2a2a2a;
  border-radius:18px;
  padding:6px;
  z-index:1201;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.og-cta .og-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px;
  padding:0 22px;
  border:2px solid var(--og-red); background:var(--og-red); color:#fff !important;
  border-radius:999px;
  font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  line-height:1;
  box-shadow:0 2px 18px rgba(201,40,27,.35);
  transition: background .25s ease, transform .18s ease, box-shadow .25s ease;
  animation: og-pulse 1.3s infinite;
}
.og-cta .og-btn:hover{ background:#a61f15; box-shadow:0 4px 24px rgba(201,40,27,.55); transform:scale(1.05) rotate(-2deg); }
@keyframes og-pulse{ 0%{ box-shadow:0 0 0 0 rgba(201,40,27,.40); } 70%{ box-shadow:0 0 0 16px rgba(201,40,27,0); } 100%{ box-shadow:0 0 0 0 rgba(201,40,27,.40); } }

/* Ajuste de espaciados del menú para no empujar al CTA */
.og-bar .og-nav{ gap:20px; }
.og-bar .og-nav > li > a{ padding:12px 10px; }

/* “Encogimiento” en viewports medios para asegurar una sola línea */
@media (max-width:1300px){
  .og-bar .og-nav{ gap:18px; }
  .og-bar .og-nav > li > a{ padding:10px 8px; }
  #og-mainnav{ padding-right:178px; }
}

/* =======================
   MAYÚSCULAS (fallback)
   ======================= */
header nav.menu a,
header .menu-list a,
header .og-menu a,
header .og-menu .sub-menu a,
header .elementor-nav-menu a,
header .elementor-nav-menu .sub-menu a,
header .og-nav > li > a,
header .og-nav .dd a{
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 800 !important;
}

/* =======================
   MÓVIL
   ======================= */
@media (max-width:900px){
  .og-burger{ display:inline-block; }

  /* Panel off-canvas (tu JS añade .open a .og-header) */
  #og-mainnav{
    display:none; position:fixed; inset:64px 0 0 0;
    background:#0f0f0f; overflow:auto; padding:16px; z-index:1200;
    padding-right:0;
  }
  .og-header.open #og-mainnav{ display:block; }

  .og-bar .og-nav{ display:grid; gap:8px; white-space:normal; }

  /* Dropdowns dentro del panel */
  .og-nav .has-dd > .dd{
    position:static; opacity:1; visibility:visible; transform:none; pointer-events:auto;
    border:0; box-shadow:none; padding:8px 0 0; display:none;
  }
  .og-nav .has-dd.open > .dd{ display:block; }

  /* Mega “Otros servicios” en una columna */
  .og-nav .has-dd > .dd.brands-list{
    position:static; width:auto; opacity:1; visibility:visible; transform:none; pointer-events:auto;
    border:0; border-radius:12px; box-shadow:none; padding:10px 0 0;
    grid-template-columns:1fr; gap:12px;
  }
  .dd.brands-list .brand-pills{ grid-template-columns: repeat(2, minmax(120px,1fr)); }
  .dd.brands-list .brand-card{ padding:14px; min-height:72px; }

  /* CTA vuelve al flujo y ocupa todo el ancho del panel */
  .og-cta{ position:static; transform:none; margin-top:6px; border-radius:14px; padding:6px; }
  .og-cta .og-btn{ height:42px; width:100%; }
}

/* =======================
   FOOTER
   ======================= */
.site-footer{ text-align:center; padding:32px 0; color:#fff; background:#151515; border-top:1px solid #2a2a2a; }
.footer-inner{ width:min(1200px,92vw); margin:0 auto; }