:root{
  --ccb-red:#E50019;
  --ccb-red-dark:#8B0010;
  --ccb-gray:#2E2E2E;
  --ccb-light:#F6F6F7;
  --ink:#111114;
  --muted:#6B7280;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
html,body{padding:0;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--ink);background:var(--white)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid #eee;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:28px}
.badge{font-size:12px;color:var(--white);background:var(--ccb-red);padding:4px 10px;border-radius:999px;margin-left:6px}

.button{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ccb-red);
  color:#fff;border:none;border-radius:10px;padding:14px 18px;font-weight:700;
  box-shadow:0 8px 20px rgba(229,0,25,.25);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(229,0,25,.3);background:#c10016}

.hero{
  position:relative;overflow:hidden;
  background:url('https://nat.boost.net.co/images/Hero.png') center/cover no-repeat;color:#fff;
}
.hero .overlay{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));position:absolute;inset:0}
.hero-content{position:relative;padding:90px 0 64px}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);display:inline-block;padding:6px 10px;border-radius:999px;margin-bottom:10px}
.hero h1{font-size:28px;line-height:1.08;margin:6px 0 10px;font-weight:900}
.hero p{font-size:15px;opacity:.92;margin:0 0 18px;max-width:640px}

.grid{display:grid;gap:16px}
.card{
  background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;
  box-shadow:0 4px 12px rgba(16,24,40,.04);
}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:#374151;font-size:14px;line-height:1.6}

.section{padding:42px 0}
.section h2{font-size:22px;margin:0 0 14px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:1px solid #e5e7eb;border-radius:999px;padding:8px 12px;font-size:13px;background:#fff}

.logos{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logos img{height:28px;filter:grayscale(0%);opacity:.95}

.footer{background:var(--ccb-light);border-top:1px solid #eee;padding:22px 0;font-size:13px;color:#4b5563}
.footer a{color:var(--ccb-red);font-weight:600}

@media(min-width:768px){
  .hero-content{padding:120px 0 100px}
  .hero h1{font-size:46px}
  .hero p{font-size:17px}
  .grid{grid-template-columns:repeat(12,1fr)}
  .card.span-4{grid-column:span 12}
  .card.span-6{grid-column:span 12}
  .card.span-8{grid-column:span 12}
}
@media(min-width:1024px){
  .card.span-4{grid-column:span 4}
  .card.span-6{grid-column:span 6}
  .card.span-8{grid-column:span 8}
}

/* --- Tecnologías (cards flip 3x3) --- */
.tech-section { background: var(--ccb-light); }
.tech-intro { margin-bottom: 18px; color:#4b5563; }

.tech-grid{
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px){
  .tech-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px){
  .tech-grid{ grid-template-columns: repeat(3,1fr); }
}

/* Flip base */
.flip-card{
  background: transparent;
  border: 0;
  padding: 0;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.flip-inner{
  position: relative;
  width: 100%;
  min-height: 180px;
  border-radius: 16px;
  border: 1px solid #ececec;
  box-shadow: 0 4px 12px rgba(16,24,40,.05);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  background: #fff;
}
.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card.is-flipped .flip-inner{
  transform: rotateY(180deg);
}

.flip-face{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; border-radius: 16px;
  backface-visibility: hidden;
}

.flip-front{
  color: var(--ccb-red);
}
.flip-front h3{
  color: var(--ink);
  font-size: 16px; text-align:center; margin:10px 0 0;
}

.flip-back{
  transform: rotateY(180deg);
  background: #fff;
  color:#4b5563; text-align:center; padding: 22px;
  line-height:1.55;
}

.tech-ico{
  width: 52px; height: 52px;
  color: var(--ccb-red);
}

/* --- Liderazgo / Encabezado institucional --- */
.liderazgo .lead-logos{
  display:flex; gap:28px; align-items:center; justify-content:center;
  text-align:center; margin-bottom:10px; flex-wrap:wrap;
}
.liderazgo .lead-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.liderazgo .lead-label{
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:#6B7280; font-weight:700;
}
.liderazgo .lead-item img{ height:48px; max-width:240px; object-fit:contain; }
@media (min-width:768px){
  .liderazgo .lead-item img{ height:56px; }
  .liderazgo .lead-label{ font-size:15px; }
}

/* --- Split 50/50 vertical --- */
.nat-split{
  /* altura pensada para que el 50/50 sea perceptible; ajusta si lo quieres más alto */
  min-height: 60vh;
  display:grid;
  grid-template-rows: 1fr 1fr; /* 50% / 50% */
  gap: 16px;
}

/* Mitad superior: logo centrado */
.nat-split__logo{
  display:flex; align-items:center; justify-content:center;
  padding: 8px 0;
}
.nat-split__logo img{
  height: 88px; max-width: 520px; width:auto; object-fit:contain;
}
@media (min-width:768px){
  .nat-split__logo img{ height: 110px; }
}
@media (min-width:1200px){
  .nat-split__logo img{ height: 130px; }
}

/* Mitad inferior: 3 conceptos */
.nat-split__info{
  display:grid; gap:16px;
  grid-template-columns: 1fr;          /* móvil */
  align-content: start;
}
@media (min-width:768px){
  .nat-split__info{ grid-template-columns: repeat(2,1fr); } /* tablet */
}
@media (min-width:1024px){
  .nat-split__info{ grid-template-columns: repeat(3,1fr); } /* desktop 3 columnas */
}

/* Tarjetas */
.nat-split__info .card{
  background:#fff; border:1px solid #eee; border-radius:16px;
  padding:18px; box-shadow:0 4px 12px rgba(16,24,40,.04);
}
.nat-split__info .card h3{
  margin:0 0 8px; font-size:18px;
}
.nat-split__info .card p{
  margin:0; color:#374151; font-size:14px; line-height:1.6;
}