:root{
  /* Marca */
  --purple:#7a4fb6;
  --purple-dark:#4b2b7a;
  --hero-purple:#9750ac;
  --gold:#FAD563;

  /* Base clara (resto de página) */
  --page-bg:#F4F2F8;      /* RGB 244,242,248 */
  --section-bg:#FAFAFC;   /* RGB 250,250,252 */
  --card-bg:#FFFFFF;

  /* Texto (modo claro) */
  --text:#2B2B2F;         /* RGB 43,43,47 */
  --muted:#5F5F6B;        /* RGB 95,95,107 */

  /* Bordes (modo claro) */
  --border:#E6E6EF;
}

/* RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--page-bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* TOP BAR (blanca) */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:#ffffff;
  border-bottom:1px solid var(--border);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  width:100%;
}
/* Cabecera full-width sin afectar al resto */
.topbar .wrap{
  max-width:none;
  padding-left:12px;
  padding-right:12px;
}
.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-right:20px;
  flex:0 0 auto;
}

/* Logos juntos en la cabecera */
.brand{
  gap:10px;
}

.brand__stack{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand__badge{
  height:44px;       /* ajusta si quieres */
  width:auto;
  border-radius:10px;
  display:block;
}

.brand__logo{
  height:56px;
  border-radius:12px;
}
.topnav{
  display:flex;
  gap:18px;
  margin-left:auto;
}
.topnav a{
  padding:8px 14px;
  border-radius:20px;
  color:var(--purple);
  font-weight:800;
}
.topnav a:hover{
  background:rgba(122,79,182,.10);
  color:var(--purple-dark);
}

/* HERO (morado marca) */
.hero{
  padding:90px 0 70px;
  background:linear-gradient(180deg, var(--hero-purple), #7a3d90);
  color:#ffffff;
}
.hero .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero h1{
  color:#ffffff;
  font-size:64px;
  font-weight:900;
  letter-spacing:1px;
  text-align:center;
  margin:0 0 20px;
}
.hero p{
  color:rgba(255,255,255,.92);
  font-size:20px;
  text-align:center;
  margin:0 auto;
  max-width:800px;
}

/* SECTIONS (modo claro) */
section{
  padding:70px 0;
  background:transparent;
}
section h2{
  font-size:32px;
  margin-bottom:12px;
  color:var(--purple-dark);
}
section p{
  color:var(--muted);
  max-width:800px;
}

/* ENTIDADES (sección clara integrada) */
#entidades{
  background:var(--section-bg);
  padding:70px 0;
}

/* ROWS / TARJETAS (blancas, elegantes) */
.row{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  margin-bottom:18px;
  box-shadow:0 10px 24px rgba(12, 14, 24, .06);
}
.row h3{
  margin:0 0 8px;
  color:var(--purple);
}
.row p, .row li{
  color:var(--muted);
}
.row ul{
  margin:10px 0 0;
  padding-left:18px;
}
.row .tag{
  display:inline-block;
  margin-top:10px;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#FAD563;        /* dorado sólido */
  color:#4b3a00;             /* texto oscuro accesible */
  border:1px solid #e0be4d;  /* borde ligeramente más oscuro */
}

/* FOOTER FINAL (MORADO, como el hero) */
.site-footer{
  background:var(--hero-purple);
  padding:28px 0;
  color:#ffffff;
}
.site-footer .footer-bottom{
  margin:0;
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.85);
}

/* Navegación ancla: evita que el header tape los títulos */
section, footer{
  scroll-margin-top:90px;
}

/* RESPONSIVE */
@media(max-width:800px){
  .topnav{display:none}
  .hero h1{font-size:36px}
  .hero p{font-size:18px}
}

/* ENTIDAD CON LOGO A LA DERECHA */
.row--entity{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.row--entity .row__content{
  flex:1;
}

.row--entity .row__logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.row--entity .row__logo img{
  max-height:60px;
  width:auto;
  object-fit:contain;
}

/* Responsive */
@media(max-width:800px){
  .row--entity{
    flex-direction:column;
    align-items:flex-start;
  }

  .row--entity .row__logo{
    margin-top:12px;
  }
}