:root {
	--brand: #1e3a8a;
	--brand-2: #0ea5e9;
	--bg: #f7f8fb;
	--text: #0f172a;
	--muted: #475569;
	--card: #ffffff;
	--line: #e2e8f0;
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
	background: var(--bg);
	color: var(--text)
}

.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px
}

.header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--line)
}

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0
}

.brand {
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	color: inherit
}


.brand-title {
	margin: 0;
	font-weight: 800
}

.brand .logo{
  width: 40px;
  height: 40px;
  object-fit: contain;   /* mantiene proporción del PNG/SVG */
  display: block;
  border-radius: 8px;    /* ⇦ esquinas redondeadas */
  /* opcional: un borde y sombra muy sutiles */
  /* border: 1px solid rgba(0,0,0,.06);
     box-shadow: 0 2px 8px rgba(0,0,0,.05); */
}

.brand .logo.circle{
  border-radius: 50%;
}

.badge {
	font-size: 11px;
	letter-spacing: .12em;
	color: #64748b;
	text-transform: uppercase
}

.menu a {
	margin-left: 18px;
	text-decoration: none;
	color: #334155
}

.menu a:hover {
	color: var(--brand)
}

/* Botón de selector de idioma MUY CLARO */
.lang{
  margin-left: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #eef5ff;      /* mucho más claro */
  color: #1e3a8a;           /* azul marca para el texto */
  border: 1px solid #cfe0ff;
  text-decoration: none;
}
.lang:hover{
  background: #f6f9ff;      /* aún más claro al hover */
  border-color: #bdd3ff;
  color: #15306b;
}

.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #0b1220, #152a56);
	color: #fff
}

.hero-inner {
	padding: 80px 0
}

.hero h1 {
	font-size: 40px;
	line-height: 1.15;
	margin: 0 0 12px
}

.hero p {
	opacity: .95;
	max-width: 720px
}

.cta {
	display: inline-block;
	margin-top: 22px;
	padding: 12px 18px;
	border-radius: 14px;
	background: #fff;
	color: #0b1220;
	text-decoration: none;
	font-weight: 600
}

.secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
	margin-left: 10px
}

.section {
	padding: 60px 0
}

.h2 {
	font-size: 30px;
	margin: 0 0 12px
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 18px;
	box-shadow: 0 6px 24px rgba(2, 6, 23, .06)
}

.list {
	padding-left: 18px
}

.footer {
	background: #0b1220;
	color: #cbd5e1;
	margin-top: 40px
}

.footer a {
	color: #e2e8f0;
	text-decoration: none
}

.footer a:hover {
	color: #fff
}

.note {
	font-size: 14px;
	color: var(--muted)
}

img.res {
	width: 100%;
	height: auto;
	border-radius: 16px;
	border: 1px solid var(--line)
}

@media(max-width:900px) {
	.grid {
		grid-template-columns: 1fr
	}

	.hero h1 {
		font-size: 32px
	}
}