:root{
  --bg:#0b0b0d;
  --panel:#121216;
  --muted:#cfcfd6;
  --accent:#f02d2d; /* red accent like reference */
  --brand:#f5b800;  /* gold */
  --card:#16161b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#fff;font-family:Inter,Segoe UI,Roboto,Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding-inline:clamp(16px,4vw,28px)}
.header{position:sticky;top:0;z-index:999;background:linear-gradient(180deg,#111 0%,#0e0e10 100%);backdrop-filter:saturate(130%) blur(6px);border-bottom:1px solid #1f1f25}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.5px}
.brand img{width:40px;height:40px}
.hero{position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:60px 0}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 10px;color:#fff}
.hero p{color:var(--muted);margin:0 0 24px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:12px 20px;border-radius:10px;border:1px solid #2a2a31;background:#1a1a22}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.btn.secondary{background:#1a1a22;color:#fff}
.hero-art{min-height:220px;background:radial-gradient(60% 80% at 30% 30%,rgba(240,45,45,.25),transparent 60%),radial-gradient(50% 70% at 70% 60%,rgba(245,184,0,.18),transparent 60%),url('assets/defiance-logo.png') center/contain no-repeat;border:1px solid #23232a;border-radius:16px}
.section{padding:40px 0}
.section h2{font-size:28px;margin:0 0 6px}
.section .sub{color:var(--muted);margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid #22222a;border-radius:14px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card .thumb{height:160px;background:#0f0f12 url('assets/defiance-logo.png') center/contain no-repeat;filter:grayscale(20%)}
.card .body{padding:14px}
.badge{display:inline-block;background:var(--accent);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;margin-bottom:8px}
.card h3{margin:6px 0 4px}
.role{color:var(--muted);font-size:14px}
.cta-wrap{display:flex;justify-content:center;padding:36px 0}
.cta-big{display:inline-block;padding:16px 28px;border-radius:12px;background:#5865F2;color:#fff;font-weight:800;font-size:18px;box-shadow:0 8px 24px rgba(88,101,242,.35)}
footer{padding:32px 0;border-top:1px solid #1f1f25;color:#9a9aa3;text-align:center}

/* responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:16px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:36px}
}

/* --- Mission & Vision cards --- */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mv-card{background:var(--card);border:1px solid #22222a;border-radius:14px;padding:20px}
.mv-card h3{margin-top:0;color:#f5b800}

/* --- Previews --- */
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.preview-card{background:var(--card);border:1px solid #22222a;border-radius:14px;overflow:hidden}
.preview-card .media{aspect-ratio:16/9;background:#0f0f12;display:flex;align-items:center;justify-content:center}
.preview-card img, .preview-card video{width:100%;height:100%;object-fit:contain;display:block}
.preview-card .body{padding:12px;color:var(--muted);font-size:14px}
.preview-cta{display:flex;justify-content:center;margin-top:18px}

/* responsive additions */
@media (max-width: 980px){
  .mv-grid{grid-template-columns:1fr}
  .preview-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .preview-grid{grid-template-columns:1fr}
}

/* Tooltip for leader names */
.leader-tooltip{position:relative;display:inline-block;cursor:pointer}
.leader-tooltip .tooltip-text{
  visibility:hidden;opacity:0;transition:opacity .3s;
  width:220px;background:#1c1c22;color:#fff;text-align:left;
  border-radius:6px;padding:10px;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-110px;
  border:1px solid #333;font-size:13px;line-height:1.4;
}
.leader-tooltip:hover .tooltip-text{visibility:visible;opacity:1}

/* --- Hover profile card for leaders --- */
.name-wrap{position:relative;display:inline-block}
.profile-card{
  position:absolute; left:0; top:110%; z-index:20;
  width:260px; background:var(--panel); color:#fff;
  border:1px solid #2a2a31; border-radius:12px; padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  display:none;
}
.name-wrap:hover .profile-card{display:block}
.profile-card h4{margin:0 0 6px; font-size:16px; color:#f5b800}
.profile-card .meta{font-size:12px; color:var(--muted); margin-bottom:6px}
.profile-card .tag{display:inline-block;background:#23232a;border:1px solid #34343c;border-radius:999px;padding:3px 8px;font-size:11px;margin-right:6px;margin-top:4px}
@media (max-width: 980px){
  .profile-card{left:auto; right:0}
}

/* --- Post modal (Instagram-like) --- */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  display:none; align-items:center; justify-content:center; z-index:99; padding:20px;
}
.modal.open{display:flex}
.post{
  background:#0f0f12; border:1px solid #2a2a31; border-radius:14px;
  width:min(950px, 100%); max-height:90vh; display:grid; grid-template-columns:1.2fr 1fr; overflow:hidden;
}
.post .media{background:#000; display:flex; align-items:center; justify-content:center}
.post .media img{width:100%; height:100%; object-fit:contain}
.post .side{padding:16px; display:flex; flex-direction:column}
.post .side h3{margin:0 0 6px}
.post .meta{color:#9a9aa3; font-size:12px; margin-bottom:10px}
.post .desc{color:#cfcfd6; font-size:14px; line-height:1.5; white-space:pre-wrap}
.post .actions{margin-top:auto; display:flex; gap:10px}
.post .btn{padding:10px 14px; border-radius:10px; border:1px solid #2a2a31; background:#16161b}
.modal .close{position:absolute; top:16px; right:16px; background:#16161b; border:1px solid #2a2a31; color:#fff; border-radius:10px; padding:8px 10px; cursor:pointer}
@media (max-width: 900px){
  .post{grid-template-columns:1fr; max-height:92vh}
  .post .media{max-height:52vh}
}

/* --- Carousel nav for modal --- */
.modal .nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.5); border:none; color:#fff;
  font-size:32px; padding:8px 12px; cursor:pointer; z-index:100;
  border-radius:10px;
}
.modal .nav.prev { left:10px; }
.modal .nav.next { right:10px; }

/* modal media fix */

.post .media{
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:80vh;
}
.post .media img,
.post .media video{
  width:100%;
  height:100%;
  max-height:80vh;
  object-fit:contain;
  display:block;
}

/* colores botones*/
.btn.discord {
  background-color: #5865F2;
  color: #fff;
}
.btn.discord:hover {
  background-color: #4752c4;
}

.btn.facebook {
  background-color: #1877F2;
  color: #fff;
}
.btn.facebook:hover {
  background-color: #145dbf;
}

.btn.discord {
  background-color: #5865F2;  /* Azul Discord */
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color .15s ease;
}

.btn.discord:hover {
  background-color: #4752C4; /* tono más oscuro al pasar el mouse */
}

/* ——— Footer socials (solo Discord y Facebook) ——— */
.site-footer{background:#0f1014;border-top:1px solid #1d1f26;margin-top:48px}
.site-footer .inner{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;padding:28px 0}
.socials{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.social-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;font-weight:600;
  text-decoration:none;color:#fff;border:1px solid transparent;
  transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease;
}
.social-btn svg{width:18px;height:18px;flex:0 0 18px}
.social-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.social-btn.discord{background:#5865F2;border-color:#4753c4}
.social-btn.facebook{background:#1877F2;border-color:#155fcc}
.footer-copy{color:#aab0c0;font-size:.95rem;text-align:center;opacity:.9}


/* Menú superior responsive */
.menu {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap; /* permite que baje a otra línea */
}

@media (max-width: 640px) {
  .menu {
    flex-direction: column; /* en pantallas chicas apila los botones */
    width: 100%;
    margin-top: .5rem;
  }

  .menu a {
    width: 100%; /* que cada botón ocupe todo el ancho */
    text-align: center;
  }
}

/* Mejora de lectura en pantallas pequeñas */
@media (max-width:480px){
  .hero-inner{padding:36px 0}
}



/* ====== Cabecera a dos niveles ====== */
.header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#0b0b0d 0%, rgba(11,11,13,.92) 100%);backdrop-filter:blur(8px);border-bottom:1px solid #1f1f25}
.topbar{display:flex;align-items:center;justify-content:space-between;padding-block:.5rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.3px}
.brand img{width:36px;height:36px;border-radius:50%}

/* ====== Tabbar con desplazamiento ====== */
.tabbar{margin-top:.25rem}
.tabs{
  display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-thumb{background:#2a2a31;border-radius:999px}
.tab{
  scroll-snap-align:start; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:12px; border:1px solid #2a2a31;
  background:#141419; color:#fff; text-decoration:none; white-space:nowrap;
}
.tab:hover{background:#1a1a20}
@media (min-width: 900px){
  .tabs{justify-content:flex-start}
}

/* ====== Contenido con buen respiradero lateral ====== */
.container{max-width:1100px;margin:0 auto;padding-inline:clamp(18px,4.5vw,32px)}
.section{padding: clamp(22px, 3.2vw, 48px) 0}

/* Altura total aproximada del header (topbar + tabbar) */
:root { --header-h: 110px; }  /* ajusta a 88–110px si tu header cambia */

/* Que las anclas no queden debajo del header fijo */
#historia,
#mv,
#lideres,
#previews { scroll-margin-top: var(--header-h); }


/* Mejorar legibilidad en móvil */
@media (max-width: 640px) {
  .container {
    padding-inline: clamp(22px, 6vw, 28px); /* más aire en los lados */
  }

  .section p,
  .section .sub {
    text-align: justify;   /* alinear el texto */
    hyphens: auto;         /* cortar palabras si es necesario */
  }
}