:root{
  --brand:#0B5AA2;
  --brand-2:#174E78;
  --accent:#F9B233;
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --soft:#f3f4f6;
  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --container:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:100%;max-width:var(--container);margin:auto;padding:0 20px}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--brand);color:#fff;font-weight:600;letter-spacing:.2px;box-shadow:var(--shadow);border:none;cursor:pointer}
.btn.alt{background:var(--accent);color:#111}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:14px}
.small{font-size:14px;color:var(--muted)}

.topbar{background:#0a3e6b;color:#cfe7ff;font-size:14px}
.topbar .container{display:flex;gap:16px;justify-content:center;padding:8px 20px;flex-wrap:wrap}

header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef2f7;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand h1{font-size:20px;margin:0;color:var(--brand);letter-spacing:.5px}
.links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.links a{font-weight:600;color:var(--brand-2)}

.hero{background:linear-gradient(180deg,#e9f3ff 0%,#ffffff 100%);padding:64px 0 40px;border-bottom:1px solid #eef2f7}
.wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.hero h2{font-size:36px;line-height:1.15;margin:10px 0;color:#0a3e6b}
.hero p{font-size:18px;color:#374151;margin:0 0 22px}
.hero .card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid #eef2f7}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

section{padding:64px 0}
.section-title{font-size:30px;margin:0 0 10px;color:#0a3e6b}
.section-lead{color:var(--muted);margin:0 0 26px}

.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:1fr}
.cols-4{grid-template-columns:1fr}
@media(min-width:720px){.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.cols-4{grid-template-columns:repeat(4,1fr)}}

.card{background:#fff;border:1px solid #eef2f7;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.card h3{margin:6px 0 8px;font-size:18px;color:#0b5aa2}
.card p{margin:0;color:#4b5563;font-size:15px}
.tag{font-size:12px;background:var(--soft);padding:6px 10px;border-radius:999px;color:#334155;display:inline-block;margin-bottom:8px}
.soft{background:#fafbfc;border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7}

.split{display:grid;gap:26px}
@media(min-width:920px){.split{grid-template-columns:1.1fr .9fr}}
.card.alt{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);border-color:#e5f0fb}

.mini h4{margin:16px 0 6px;font-size:16px;color:#0b5aa2}
.mini p{margin:0;color:#4b5563}
.checks{padding-left:18px;margin:10px 0 0}
.checks li{margin:8px 0}

.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-weight:600;color:#334155}
.form input,.form textarea{
  width:100%;border:1px solid #dbe3ec;background:#fff;padding:12px 14px;border-radius:12px;font:inherit
}
.form input:focus,.form textarea:focus{outline:3px solid rgba(11,90,162,.12);border-color:#b8d1ea}

.span2{grid-column:span 1}
@media(min-width:720px){.span2{grid-column:span 2}}

.footer{background:#0a3e6b;color:#cfe7ff;margin-top:10px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;flex-wrap:wrap}
.foot a{color:#cfe7ff;text-decoration:underline}


/* ====== Ajustes suaves generales ====== */
.container{width:100%;max-width:var(--container);margin:auto;padding:0 20px}
@media (max-width: 480px){
  .container{padding:0 16px}
}

/* Botones: mejor ajuste en filas y en móvil */
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width: 720px){
  .cta-row .btn{flex:1 1 140px}
}

/* ====== Header / Navbar responsive sin JS ====== */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.nav-toggle{display:none}

/* Icono hamburguesa oculto en desktop */
.hamburger{display:none}

/* En móvil mostramos hamburguesa y colapsamos links */
@media (max-width: 820px){
  .nav{gap:10px}
  .brand h1{font-size:18px}

  .hamburger{
    display:inline-flex;
    width:40px;height:40px;
    align-items:center;justify-content:center;
    flex-direction:column;gap:5px;
    border:1px solid #eef2f7;border-radius:10px;
    cursor:pointer;
  }
  .hamburger span{
    display:block;width:22px;height:2px;background:var(--brand-2);
  }

  /* Por defecto, ocultamos links en móvil */
  .links{
    display:none;
    width:100%;
    flex-direction:column;
    gap:12px;
    padding:12px 0 4px;
    border-top:1px solid #eef2f7;
  }
  /* Al activar el checkbox mostramos el menú */
  .nav-toggle:checked ~ .links{display:flex}
}

/* ====== Topbar: buen wrap y touch-friendly ====== */
.topbar .container{display:flex;gap:12px;justify-content:center;padding:8px 20px;flex-wrap:wrap}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:14px}
@media (max-width: 420px){
  .pill{font-size:13px;padding:6px 10px}
}

/* ====== Hero: una columna en móvil y títulos más legibles ====== */
.wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
@media (max-width: 980px){
  .wrap{grid-template-columns:1fr}
}
.hero h2{font-size:36px;line-height:1.15;margin:10px 0;color:#0a3e6b}
@media (max-width: 480px){
  .hero h2{font-size:28px;line-height:1.2}
  .hero p{font-size:16px}
}
.hero .card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid #eef2f7}

/* ====== Secciones y títulos ====== */
section{padding:64px 0}
@media (max-width: 640px){
  section{padding:48px 0}
}
.section-title{font-size:30px;margin:0 0 10px;color:#0a3e6b}
@media (max-width: 480px){
  .section-title{font-size:24px}
}

/* ====== Grids: ya tenías base 1 columna; aseguramos respiros ====== */
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:1fr}
.cols-4{grid-template-columns:1fr}
@media (min-width:720px){.cols-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.cols-4{grid-template-columns:repeat(4,1fr)}}

/* Split (quiénes somos + ventajas) */
.split{display:grid;gap:26px}
@media(min-width:920px){.split{grid-template-columns:1.1fr .9fr}}

/* Mini items: un poquito más de aire bajo el h4 (como me pediste antes) */
.mini h4{margin:16px 0 8px;font-size:16px;color:#0b5aa2}

/* ====== Formulario: inputs cómodos y focus claro ====== */
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-weight:600;color:#334155}
.form input,.form textarea{
  width:100%;border:1px solid #dbe3ec;background:#fff;padding:12px 14px;border-radius:12px;font:inherit
}
.form input:focus,.form textarea:focus{outline:3px solid rgba(11,90,162,.12);border-color:#b8d1ea}
@media (max-width: 480px){
  .form button.btn{width:100%}
}

/* ====== Tarjetas y tipografías ====== */
.card{background:#fff;border:1px solid #eef2f7;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.card h3{margin:6px 0 8px;font-size:18px;color:#0b5aa2}
.card p{margin:0;color:#4b5563;font-size:15px}
@media (max-width: 480px){
  .card{padding:18px}
  .card h3{font-size:17px}
  .card p{font-size:15px}
}

/* ====== Footer ====== */
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;flex-wrap:wrap}
@media (max-width: 520px){
  .foot{justify-content:center;text-align:center}
}

/* ====== Logos ====== */
.logo {
  height: 40px;
  width: auto;
}

.logo-footer {
  height: 50px;
  width: auto;
  margin-right: 10px;
}
@media (max-width: 600px) {
  .logo { height: 48px; }
  .logo-footer { height: 42px; margin-bottom: 8px; }
}



/* ====== SLIDER ====== */
.slider {
  position: relative;
  width: 100%;
  padding: 0px 0;
  height: 70vh;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 200%;
  height: 100%;
  animation: slideAnimation 12s infinite;
}

.slide {
  position: relative;
  width: 50%;
  height: 100%;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(65%);
}

/* Texto sobre las imágenes */
.slide-text {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  color: #fff;
  max-width: 480px;
}

.slide-text h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
}

.slide-text p {
  font-size: 18px;
  margin: 0 0 22px;
  color: #e6e6e6;
}

.slide-text .dot {
  color: #F15A24;
}

.slide-text .btn {
  background: #0B5AA2;
  color: #fff;
  border: none;
  box-shadow: var(--shadow);
  text-decoration: none;
}

/* Animación */
@keyframes slideAnimation {
  0% { transform: translateX(0); }
  45% { transform: translateX(0); }
  50% { transform: translateX(-50%); }
  95% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .slider { height: 55vh; padding: 0px 0; }
  .slide-text h2 { font-size: 26px; }
  .slide-text p { font-size: 16px; }
  .slide-text { left: 5%; max-width: 90%; }
}

@media (max-width: 480px) {
  .slider { height: 45vh; padding: 0px 0; }
  .slide-text h2 { font-size: 22px; }
  .slide-text p { font-size: 15px; }
}