:root{
  /* Paleta de colores */
  --navy:#0a1640;          
  --navy-light:#101f50;    
  --blue:#2f7bd9;   
  --navy-demo-sidebar:#101f50;   
  --blue-hover: #0056b3;    
  --blue-light:#e9eef7;    
  --gray:#6e7b91;
  --text:#1c1f26;
  --white:#ffffff;
    /* Tipografía */
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Reset básico */
*{ box-sizing:border-box; margin:0; padding:0; }

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--text);
  background:var(--blue-light);
  line-height: 1.6;
}

h1, h2, h3, h4, .demo-title, .brand, .hero-title, .section-head {
    font-family: var(--font-serif);
    color: var(--navy);
}

/*  NAV SUPERIOR */
.nav{
  background:var(--blue-light);    
  border-bottom:1px solid rgba(0,0,0,.05);
  height:76px;                  
  display:flex;
  align-items:center;
}
.nav-inner{
  max-width:1800px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  width:100%;
}

.brand{
  font-family:var(--font-serif);
  font-size:32px;
  font-weight:600;
  color:#0f1c50;
  letter-spacing:.5px;
}

.lang-form{
  display:flex;
  align-items:center;
  gap:8px;
}
.lang-form label{
  font-size:12px;
  color:#4c5872;
}
.lang-form select{
  border:1px solid #cfd5e3;
  border-radius:8px;
  padding:6px 8px;
  background:#fff;
  color:var(--navy);
  font-family: var(--font-sans)
}

/* === HERO === */
.hero{
  padding:60px 16px 32px;
  text-align:center;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-light) 80%);
  color:var(--white);
}
.hero-title{
  font-family: var(--font-serif);
  font-size:58px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--white);
  margin-bottom:26px;
}
.hero-search{
  max-width:680px;
  margin:0 auto 22px;
  display:flex;
  gap:10px;
  border-bottom:2px solid rgba(255,255,255,.4);
}
.hero-search input{
  flex:1;
  border:none;
  background:transparent;
  outline:none;
  padding:10px 6px;
  font-size:18px;
  color:var(--white);
}
.hero-search input::placeholder{
  color:rgba(255,255,255,.9);   
}
.hero-search button{
  border:none;
  background:transparent;
  font-size:18px;
  padding:6px 8px;
  color:var(--white);
  cursor:pointer;
}
.hero-tabs{
  max-width:1100px;
  margin:20px auto 0;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.tab-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pill{
  display:inline-block;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  background:transparent;
  color:var(--white);
  text-decoration:none;
  font-weight:600;
  transition:all .25s ease;
}
.pill.active{
  background:var(--white);
  color:var(--navy);
  border-color:var(--white);
  box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.vsep{
  width:1px;
  height:28px;
  background:rgba(255,255,255,.4);
  display:inline-block;
  margin:0 8px;
  border-radius:1px;
}

/* === CONTENEDOR PRINCIPAL === */
.container{
  max-width:1500px;
  margin:0 auto;
  padding:40px 16px;
}

/* === CONTADOR === */
.section-head{
  display:flex;
  justify-content:flex-end;
  margin:6px 0 20px;
}
.count{
  color:var(--gray);
  font-size:14px;
}

/* === GRID 3 COLUMNAS === */
.grid-3{
  display:grid;
  gap:30px;
  grid-template-columns:repeat(auto-fit,minmax(450px, 1fr));
  align-items: stretch;
} 

.segment{
  white-space: nowrap;
  margin-left: 10px;
}

/* === TARJETAS === */
.card{
  min-height: 280px;
  background:var(--white);
  border:1px solid #dce2f0;
  border-radius:14px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:0 6px 18px rgba(15,28,80,0.08);
  height: 100%;
}
.card-top{
  display:flex;
  justify-content:space-between;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  gap: 10px;
}
.card-top h3{
  font-size:22px;
  font-weight:650;
  color:var(--navy);
  margin-right: 18px;
  white-space: normal;
}
.sub, .sum {
    white-space: normal;
}

.segment{
  background:var(--blue-light);
  border:1px solid #d0d8ea;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  color:var(--navy);
  font-weight:600;
}
.sub{
  color:#2c354b;
}
.sum{
  color:#48526b;
  font-size:15px;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.tag{
  background:var(--blue-light);
  border:1px solid #cfd8ea;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  color:var(--navy);
  font-weight:500;
}

/* === BOTONES AZULES === */
.btn{
  margin-top:12px;
  display:inline-block;
  text-align:center;
  background:linear-gradient(90deg,#2f7bd9,#0a1640);
  color:var(--white);
  padding:12px 14px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(15,28,80,.25);
  transition:all .25s ease;
}
.btn:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}


.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang-form { display: flex; align-items: center; gap: 6px; }



/* --- Navbar: ocultar título y mostrar logo --- */
.nav .brand{ display:none; }
.nav .logo-wrap{ display:flex; align-items:center; gap:100px; }
.nav .logo-wrap img{ height:52x; }

/* --- Botón logout azul (igual que los CTA) --- */
.btn.logout{
  background:linear-gradient(90deg,#2f7bd9,#0a1640);
  color:#fff; padding:10px 14px; border-radius:12px; font-weight:600;
  box-shadow:0 6px 16px rgba(15,28,80,.20); transition:all .25s ease;
}
.btn.logout:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* --- Tabs centradas --- */
.hero-tabs{ justify-content:center; }
.hero-tabs .tab-left{ margin:0 auto; }
.pill{ letter-spacing:.2px; }

/* --- Icono/medallón en cards --- */
.card-icon{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,#2f7bd9,#0a1640); color:#fff;
  box-shadow:0 6px 14px rgba(15,28,80,.18);
}
.card-top{ align-items:center; }

/* --- CTA secundaria (Docs) estilo ghost --- */
.btn.ghost{ background:var(--blue-light); color:var(--navy); border:1px solid #cfd8ea; }

/* --- Hover cards más marcado (login vibes) --- */
.card:hover{ box-shadow:0 12px 28px rgba(15,28,80,0.16); transform:translateY(-2px); transition: transform .2s ease, box-shadow .3s ease; }

/* --- Hero refinado (título más elegante, sin gritar) --- */
.hero{ border-radius:0 0 18px 18px; }
.hero-title{ font-size:54px; text-transform:none; letter-spacing:.2px; }

.theme-login {
  color: #eaf0ff;
  background:
    radial-gradient(1000px 700px at 10% -10%, #1d2a66 0%, rgba(29,42,102,0) 60%),
    radial-gradient(1000px 700px at 90% 0%,  #0d1a4a 0%, rgba(13,26,74,0) 60%),
    linear-gradient(160deg, #0a0e1a, #132149 45%, #08112e);
}
.theme-login .nav{
  background: rgba(255,255,255,0.06);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  height: 64px;
}
.theme-login .logo-wrap .logo-white{ display:block; height:52px }
.theme-login .brand{ display:none }
.theme-login .lang-form label{ color:#b6c2e2 }
.theme-login .lang-form select{
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color:#eaf0ff;
}
.theme-login .btn.logout{ background:linear-gradient(135deg,#4f46e5,#22d3ee); color:#fff; border:none; box-shadow:0 10px 24px rgba(34,211,238,.30) }
.theme-login .btn.logout:hover{ transform:translateY(-1px); filter:brightness(1.06) }