/* ==========================================================================
   01) VARIABLES
   ========================================================================== */
:root{
  --red:#C70000;
  --red-2:#EC6033;
  --bg:#0f1216;
  --bg-2:#12151A;
  --text:#FFFFFF;
  --muted:#B8B8B8;
  --dark:#000000;
  --card:#1b1f26;
  --accent:#353A40;
  --radius:18px;
  --container:1160px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --header-h:72px; /* alto del header (para Contact) */
}


/* ==========================================================================
   02) RESET / BASE
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Helvetica Neue","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
  color:var(--text);
  background: radial-gradient(1000px 500px at -10% -20%, #1a0f10 0%, var(--bg) 45%) no-repeat, var(--bg);
  line-height:1.6;
}


/* ==========================================================================
   03) LAYOUT HELPERS
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.grid{display:grid; gap:26px}
.grid.cols-2{grid-template-columns: repeat(2, 1fr)}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.grid.cols-4{grid-template-columns: repeat(4, 1fr)}

@media (max-width:1000px){
  .grid.cols-3{grid-template-columns: repeat(2, 1fr)}
  .grid.cols-4{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width:640px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
}

.center{text-align:center}
.spacer{height:30px}
.hidden{display:none !important}


/* ==========================================================================
   04) TIPOGRAFÍA GLOBAL
   ========================================================================== */
h1,h2,h3{line-height:1.2; margin:0 0 12px}
h1{font-size:clamp(36px,5vw,56px); font-weight:800; letter-spacing:.3px}
h2{font-size:clamp(28px,3.6vw,40px); font-weight:800}
h3{font-size:clamp(20px,2.4vw,26px); font-weight:700}
p{color:#E6E6E6; opacity:.92}
.muted{color:var(--muted)}


/* ==========================================================================
   05) BOTONES
   ========================================================================== */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#fff; text-decoration:none; font-weight:600; box-shadow:var(--shadow);
}
.button:hover{transform:translateY(-1px) scale(1.01)}


/* ==========================================================================
   06) CARDS
   ========================================================================== */
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}


/* ==========================================================================
   07) HEADER + NAV
   ========================================================================== */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background: rgba(0,0,0,0.22);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .25s ease;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; height:72px;
}
.nav .left{display:flex; align-items:center; gap:20px}
.nav img.logo{height:32px}
.nav ul{display:flex; list-style:none; margin:0; padding:0; gap:22px}
.nav a{color:var(--text); text-decoration:none; font-weight:500; opacity:.85}
.nav a.active,.nav a:hover{opacity:1; color:#C70000}


/* ==========================================================================
   08) HERO (Home)
   ========================================================================== */
.hero{
  position:relative; padding:100px 0 60px; min-height:72vh; display:flex; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url("../assets/img/background_dgamers_photo_office_web.png") center 80%/cover no-repeat;
  transform:scaleX(-1); z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.25) 24%, rgba(0,0,0,0.35) 100%);
  z-index:1;
}
.hero > *{position:relative; z-index:2}


/* ==========================================================================
   09) SECCIONES GENÉRICAS
   ========================================================================== */
.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, rgba(199,0,0,.10), rgba(0,0,0,0))}


/* ==========================================================================
   10) ABOUT
   ========================================================================== */
.about{
  position:relative; color:#fff; background-color:#830a04;
  background-image:
    url("../assets/img/background_logo_dgamers_web.png"),
    url("../assets/img/background_logo_dgamers_web.png");
  background-repeat:no-repeat,no-repeat;
  background-position:-120px -140px, calc(100% + 140px) calc(100% + 160px);
  background-size:520px,520px;
  padding:120px 0 100px; overflow:hidden;
}
.about-container{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:46px;
}
.about-text h2{font-size:clamp(32px,4.2vw,44px); font-weight:800; margin:0 0 8px}
.about-text p{max-width:760px; margin:0 auto 12px; color:rgba(255,255,255,0.92); line-height:1.6}
.about .button{border-radius:10px; padding:10px 18px; border:1px solid rgba(255,255,255,0.35)}
.about-stats{display:flex; justify-content:center; flex-wrap:wrap; gap:46px 60px}
.stat h3{font-size:clamp(34px,4vw,56px); font-weight:800; margin:0 0 6px}
.stat p{margin:0; font-size:1rem; opacity:.9; line-height:1.35}
@media (max-width:768px){
  .about{padding:80px 0}
  .about-stats{gap:26px 30px}
}


/* ==========================================================================
   11) POWERED BY UNITY
   ========================================================================== */
.powered-by{padding:30px}
.powered-by__inner{display:flex; align-items:center; justify-content:center; gap:14px; color:rgba(255,255,255,.92); font-weight:600}
.powered-by__logo{height:36px; width:auto; display:inline-block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.powered-by__inner span {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: 1rem;
}


/* ==========================================================================
   12) TEAM
   ========================================================================== */
.team-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px; margin-top:30px;
}
@media (max-width:1100px){ .team-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){  .team-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){  .team-grid{grid-template-columns:1fr} }

.person{
  background:#830a04; padding:14px; border-radius:24px;
  text-align:center; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden; /* necesario para el zoom del retrato */
}
.person img{
  width:100%; display:block; border-radius:20px;
  will-change: transform, box-shadow;
  transition: transform .4s ease, box-shadow .3s ease;
}
.person:hover img{
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,.40);
}
.person h4{margin:10px 0 4px}
.person p{margin:0; font-size:.95rem; color:var(--muted)}


/* ==========================================================================
   13) GAMES
   ========================================================================== */
.game-card{border-radius:22px; padding:18px; min-height:120px; display:flex; align-items:flex-end; justify-content:space-between}
.game-card .platforms{display:flex; gap:10px}
.badge{padding:6px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; font-size:.85rem; opacity:.95}

/* Games con fondo + logo grande */
.game-card.card.is-bg{
  position:relative; background:var(--bg) center/cover no-repeat;
  overflow:hidden; border-radius:var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.game-card.card.is-bg::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);
  transition: background .25s ease; z-index:1;
}
.game-card.card.is-bg:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.35) }
.game-card.card.is-bg:hover::before{ background:rgba(0,0,0,.25) }

/* Logo ocupa todo el alto a la izquierda */
.game-card .game-logo{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  height:calc(100% - 32px); width:auto; z-index:2; object-fit:contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55)); pointer-events:none;
}

/* Meta (plataformas) a la derecha */
.game-card .game-meta{
  position:absolute; right:16px; bottom:16px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; z-index:2;
}
.game-card .platforms{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px}
.badge{
  padding:6px 10px; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; font-size:.85rem; opacity:.95; background:rgba(0,0,0,.35);
}
.game-card.card.is-bg:hover .badge{ background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.45) }

/* Fondos por juego */
.bg-lemuria { --bg: url("../assets/img/lemuria_legend_background.png"); }
.bg-holy    { --bg: url("../assets/img/holy_background.png"); }
.bg-lost    { --bg: url("../assets/img/lost_continent_background.png"); }
.bg-animalia{ --bg: url("../assets/img/animalia_background.png"); }


/* ==========================================================================
   14) LEGAL
   ========================================================================== */
.legal-wrap{margin-top:10px}

/* Tabs */
.legal-wrap .tabs{
  display:flex; gap:16px; align-items:flex-end;
  margin:0 auto; max-width:var(--container); padding:0 20px;
}
.legal-wrap .tab{
  appearance:none; cursor:pointer; color:#fff;
  background:#55110f; border:1px solid rgba(255,255,255,.08);
  border-radius:16px 16px 0 0; font-weight:600; padding:12px 18px; line-height:1;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.legal-wrap .tab:hover,.legal-wrap .tab:focus{background:#6d1714; outline:none}
.legal-wrap .tab.active{
  background:#830a04; border-color:rgba(255,255,255,.15);
  border-bottom:none; border-bottom-left-radius:0; border-bottom-right-radius:0;
  transform:translateY(1px); box-shadow:0 1px 6px rgba(0,0,0,.22); margin-left:-1px;
}

/* Bloque Legal */
.legal-wrap .legal-card{
  background:#830a04; color:#fff;
  border:1px solid rgba(255,255,255,.08); border-top:none;
  border-radius:0 0 26px 26px; padding:28px 26px; margin-top:0;
  box-shadow:var(--shadow);
}
.legal-wrap .legal-card h3{margin:0 0 14px; font-size:clamp(22px,2.6vw,30px); font-weight:800}
.legal-wrap .legal-card h4{margin:20px 0 6px; font-size:clamp(16px,2vw,20px); font-weight:700}
.legal-wrap .legal-card p,.legal-wrap .legal-card li{color:rgba(255,255,255,.95); line-height:1.7; margin:0 0 12px}
.legal-wrap .legal-card ul{margin:6px 0 16px 18px}


/* ==========================================================================
   15) CONTACT
   ========================================================================== */
/* Fondo (foto) y posición base */
.section:has([data-i18n="contact.title"]){
  position:relative; min-height:80vh;
  background:url("../assets/img/office_background_03.JPG") center/cover no-repeat;
}

/* Overlay más claro para ver la foto */
.contact-hero .ch-overlay{
  content:""; position:absolute; inset:0; z-index:0; background:rgba(0,0,0,0.15);
}

/* Tarjetas más sólidas */
.section:has([data-i18n="contact.title"]) .card,
.contact-hero .ch-panel{
  background:rgba(15,18,22,.95);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  box-shadow:var(--shadow);
}

/* Estructura interna */
.contact-hero{ position:relative; display:flex; min-height:calc(100vh - var(--header-h)); }
.contact-hero .container{ position:relative; z-index:1; margin-block:auto; padding-block:56px; }
.contact-hero .ch-panel__header{ background:#830a04; }
.contact-hero .ch-panel__header h2{ margin:0; color:#fff; font-weight:800 }
.contact-hero .ch-panel__body{ padding:18px; display:flex; flex-direction:column; gap:14px }
.contact-hero .form-control{
  background:#0f1216; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:10px;
}
.contact-hero .form-label{ color:#eaeaea }
.contact-hero .ch-grow{ flex:1; display:flex; flex-direction:column }
.contact-hero .ch-grow textarea{ flex:1; min-height:120px }

/* Mapa responsive */
.map-embed,
.contact-hero .ch-map{ position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.25); background:#0f1216 }
.map-embed iframe,
.contact-hero .ch-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px }

/* Mobile: apilar columnas si aplica */
@media (max-width:900px){
  .contact-hero .row{ display:flex; flex-wrap:wrap; gap:16px }
  .contact-hero .row > [class^="col-"], .contact-hero .row > [class*=" col-"]{ flex:0 0 100%; max-width:100% }
}

/* Sin línea antes del footer y espacios simétricos */
.section.contact-hero, .contact-hero.section{ padding:0 }
.footer{ margin-top:0; border-top:none }


/* ==========================================================================
   16) FOOTER
   ========================================================================== */
.footer{
  background:linear-gradient(135deg, rgba(199,0,0,.85), rgba(53,58,64,.95));
  padding:30px 0 22px; color:#fff; margin-top:80px;
}
.footer .meta{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
.footer small{opacity:.9}
.footer a{color:#fff; opacity:.95}
hr.sep{border:0; height:1px; background:rgba(255,255,255,.06); margin:26px 0}


/* ==========================================================================
   17) BACKGROUND “D” FLOTANDO (TEAM & LEGAL, sin tocar HTML)
   ========================================================================== */
.section:has(.team-grid),
.section:has([data-i18n="team.title"]),
.section:has(.legal-wrap),
.section:has([data-i18n="legal.title"]){
  position:relative; overflow:hidden; z-index:0;
}
.section:has(.team-grid)::before,
.section:has([data-i18n="team.title"])::before,
.section:has(.legal-wrap)::before,
.section:has([data-i18n="legal.title"])::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("../assets/img/background_logo_dgamers_web.png");
  background-repeat:repeat;
  background-size:260px;
  opacity:20%;               /* sutil */
  animation:dFloatBG 42s linear infinite;
  pointer-events:none;
}
.section:has(.team-grid) .container,
.section:has([data-i18n="team.title"]) .container,
.section:has(.legal-wrap) .container,
.section:has([data-i18n="legal.title"]) .container{
  position:relative; z-index:1;
}
@keyframes dFloatBG{
  0%{background-position:0 0}
  100%{background-position:900px 650px}
}
/* =========================================================
   HEADER SIEMPRE VISIBLE + MENÚ DESKTOP FORZADO
   ========================================================= */

/* 1) Header fijo en la parte superior */
:root { --header-h: 72px; } /* ajustá si tu header mide algo distinto */

.header{
  position: fixed;   /* <- en vez de sticky */
  top: 0; left: 0; right: 0;
  z-index: 9999;     /* siempre por encima de overlays */
}

/* 2) Compensación del contenido para que no quede debajo */
body{
  padding-top: var(--header-h);
}

/* 3) Asegura que overlays de secciones NO tapen el header */
.hero::before,
.hero::after,
.section::before,
.section::after,
.contact-hero .ch-overlay{
  z-index: 0;              /* capa de fondo */
}
.header{ z-index: 10000; } /* header por encima de todo */

/* 4) En ESCRITORIO, el menú NO colapsa.
      Estas clases cubren el caso Bootstrap y la mayoría de navs “collapsible”. */
@media (min-width: 992px){
  .navbar-collapse{
    display: flex !important;     /* mostrar siempre la barra */
    visibility: visible !important;
    height: auto !important;
  }
  .navbar-nav{ flex-direction: row !important; }
  .navbar-toggler{ display: none !important; } /* ocultar botón hamburguesa */
}

/* 5) Anti-“colapso por altura”: si algún CSS colapsa por alto, lo neutralizamos en escritorio */
@media (min-height: 600px){
  .navbar-collapse{
    display: flex !important;
    height: auto !important;
  }
}
/* 1) Desktop por defecto: ocultar el botón y mostrar el nav */
.header .menu-btn {
  display: none !important;
}

/* Asegurar el nav visible en desktop */
.header .nav nav,
.header #main-nav {
  display: block !important;
}
.header #main-nav {
  display: flex !important;
  gap: 22px;            /* tu separación habitual */
  flex-wrap: nowrap;
  align-items: center;
}

/* 2) Sólo en móvil: mostrar el botón y colapsar el nav hasta abrirlo */
@media (max-width: 900px) {
  .header .menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
  }

  /* El nav queda oculto hasta que lo abras con JS (clase .is-open) */
  .header .nav nav {
    display: none !important;
  }

  .header .nav.is-open nav {
    display: block !important;
  }

  .header .nav.is-open #main-nav {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0;
  }
}
/* =========================================================
   CONTACT (solo cuando <body class="page-contact">)
   Fondo a nivel body (sin bandas) + overlay fijo + contenido sin scroll extra
   ========================================================= */

/* Fondo FOTOGRAFÍA anclado al viewport para que NO aparezca nunca la banda */
body.page-contact {
  background:
    url("assets/img/office_background_03.JPG")
    center / cover no-repeat fixed #0f1216 !important;
}

/* Overlay suave por encima del fondo (fijo => cubre toda la ventana SIEMPRE) */
body.page-contact::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.22); /* más claro que antes */
  pointer-events: none;
  z-index: 0;
}

/* Asegura que TODO el contenido quede por encima del overlay fijo */
body.page-contact header,
body.page-contact main,
body.page-contact footer,
body.page-contact .section.contact-hero,
body.page-contact .section.contact-hero .container {
  position: relative;
  z-index: 1;
}

/* Quitamos fondo/extra de la sección para que no “corte” el body */
body.page-contact .section.contact-hero{
  background: none !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;   /* aire superior sin empujar el footer */
  min-height: calc(100vh - var(--header-height, 72px)) !important;
  overflow: hidden;                /* nada se “desborda” hacia el footer */
}

/* Paneles un poco más sólidos (menos transparencia) */
body.page-contact .section.contact-hero .ch-panel{
  background: rgba(15,18,22,.92) !important;
  border: 1px solid rgba(255,255,255,.06);
}

/* Evita que algún margen del footer genere “banda” */
body.page-contact footer,
body.page-contact .site-footer {
  margin-top: 0 !important;
}

/* Compactar un poco en desktop para NO generar scroll innecesario */
@media (min-width: 992px){
  body.page-contact .section.contact-hero .map-embed{ padding-top: 42% !important; }
  body.page-contact .section.contact-hero .ch-textarea{ min-height: 110px !important; }
}
/* ====== Variables y Fuente global ====== */
:root {
  --brand-bg: #121517;       /* Header fijo */
  --overlay-25: rgba(0,0,0,.25);
  --overlay-15: rgba(0,0,0,.15);
}

html, body {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ====== Header fijo, sin transparencia ====== */
header,
.site-header,
.navbar,
.topbar,
#site-header {
  position: sticky;      /* si lo querés 100% fijo, poné fixed */
  top: 0;
  z-index: 1000;
  background: var(--brand-bg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.15); /* sutil */
}

/* ====== Hamburguesa solo en mobile ====== */
@media (min-width: 992px) {
  .nav-toggle,
  .hamburger,
  .menu-toggle,
  .navbar-toggler {
    display: none !important;
    visibility: hidden !important;
  }
}
@media (max-width: 991.98px) {
  .nav-toggle,
  .hamburger,
  .menu-toggle,
  .navbar-toggler {
    display: inline-flex !important;
  }
}

/* ====== Contact: fondo más claro, sin línea negra, sin scroll extra ====== */

/* El section de Contact que ya usás */
.section.contact-hero {
  position: relative;
  background: url("../assets/img/office_background_03.JPG") center / cover no-repeat;
  padding: 32px 0;
  min-height: auto;            /* no forces 100vh para evitar scroll extra */
  background-attachment: scroll;  /* evita banding/lineas con algunos drivers */
}

/* Overlay más suave */
.section.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-15);   /* antes estaba demasiado oscuro */
  z-index: 0;
}

/* Asegura contenido por encima del overlay */
.section.contact-hero .container {
  position: relative;
  z-index: 1;
}

/* Quitar cualquier “separador” o línea residual arriba del footer */
.section.contact-hero + .footer,
.section.contact-hero + footer {
  border-top: none !important;
}

/* Si tu footer tiene margen negativo o línea: */
footer, .footer {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* Tarjetas del contact para que no aparezca barra por crecer demasiado */
.contact-hero .ch-panel {
  background: rgba(15,18,22,0.9);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Evitar que el contenido interno cause scroll vertical del panel */
.contact-hero .ch-panel__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Si usás contenedores del mapa: */
.contact-hero .ch-map,
.map-embed {
  position: relative;
  width: 100%;
  padding-top: 45%;       /* un poco menos alto que 16:9 para ganar aire */
  border-radius: 12px;
  overflow: hidden;
  background: #0f1216;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.map-embed iframe,
.contact-hero .ch-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/***** ============== FIX GLOBAL FUENTE ============== *****/
/* Fuente universal también para headings, labels y controles */
:root {
  --font-ui: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --brand-red: #830a04; 
}

html, body,
h1, h2, h3, h4, h5, h6,
p, small, strong, em, a,
label, legend, span,
input, select, textarea,
button, .button, .btn,
.nav a, .menu a {
  font-family: var(--font-ui) !important;
}

/***** ============== BARRAS ROJAS DE SECCIÓN/CARD ============== *****/
/* Para cualquier card/panel de secciones con barra roja */
.ch-panel {
  overflow: hidden;                /* asegura que la barra roja cubra de borde a borde */
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

.ch-panel__header,
.card .card-header,
.section-title-bar {
  background: var(--brand-red) !important;
  padding: 12px 16px;
  width: 100%;
  display: block;
}

.ch-panel__header h2,
.card .card-header h2,
.section-title-bar h2 {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.2;
  font-family: var(--font-ui) !important;  /* fuerza Poppins en el título */
}

/* El cuerpo de las tarjetas */
.ch-panel__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0; /* evita scroll interno raro */
}

/***** ============== FORM CONTACT: LABELS, INPUTS Y BOTÓN ============== *****/
.contact-hero label,
.contact-hero .form-label {
  font-weight: 600;          
  color: #eaeaea;
  font-family: var(--font-ui) !important;
}

.contact-hero input,
.contact-hero textarea,
.contact-hero select {
  font-family: var(--font-ui) !important;
}

button, .button, .btn {
  font-family: var(--font-ui) !important;
  font-weight: 600;
}


.button, .btn, .btn-dark {
  color: #fff;
}


h1, h2, h3 {
  font-weight: 800;
}