:root{
  --azul-900:#071a3a;
  --azul-800:#0b2a63;
  --azul-700:#114aa8;
  --azul-600:#1e63d6;
  --azul-500:#2f7cf6;
  --azul-200:#cfe4ff;
  --blanco:#ffffff;
  --gris:#f5f8ff;
  --texto:#0c1630;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--texto);
  background: var(--gris);
}

/* Topbar */
.navbar-fixed nav{
  background: rgba(0, 0, 0, .20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
nav .brand-logo{display:flex;align-items:center;gap:10px}
.brand-logo img{height:65px;width:auto;display:block}
nav ul a{font-weight:600}

/* Hero con imagen de fondo */
.hero{
  position:relative;
  min-height: 88vh;
  display:flex;
  align-items:center;
  padding: 80px 0 30px;
  color: var(--blanco);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(110deg, rgba(7,26,58,.92), rgba(17,74,168,.45)),
    url("https://images.unsplash.com/photo-1581093458791-9d15482778b3?auto=format&fit=crop&w=1920&q=80") center/cover no-repeat;
  transform: scale(1.03);
}
.hero::after{
  content:"";
  position:absolute; inset:-60px -60px auto auto;
  width:520px;height:520px;
  background: radial-gradient(circle at 30% 30%, rgba(47,124,246,.35), rgba(255,255,255,0) 60%);
  filter: blur(1px);
}
.hero .container{position:relative; z-index:2}
.hero h1{
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing:.2px;
  margin: 0 0 10px;
}
.hero p{
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  opacity:.95;
  max-width: 740px;
}

.hero .hero-badges{
  display:flex; flex-wrap:wrap; gap:10px;
  margin: 18px 0 26px;
}
.badge-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-weight:700;
}
.badge-chip i{font-size:20px}

/* Secciones */
.section-pad{padding: 70px 0}
.section-title{
  font-weight: 900;
  color: var(--azul-900);
  margin: 0 0 12px;
}
.section-sub{
  margin: 0 0 28px;
  color: rgba(12,22,48,.75);
  max-width: 820px;
}

/* Cards */
.soft-card{
  border-radius: 18px;
  border: 1px solid rgba(17,74,168,.12);
  box-shadow: 0 16px 30px rgba(7,26,58,.10);
  overflow:hidden;
}
.soft-card .card-content{padding: 22px}
.icon-pill{
  width: 44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(47,124,246,.18), rgba(17,74,168,.10));
  border: 1px solid rgba(17,74,168,.16);
  margin-bottom: 10px;
}
.icon-pill i{color: var(--azul-700)}

/* Banner con fondo */
.banner{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  color: white;
  padding: 36px 28px;
}
.banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(7,26,58,.92), rgba(47,124,246,.30)),
    url("https://images.unsplash.com/photo-1611270636403-131d1d35e2c3?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
}
.banner > *{position:relative; z-index:2}
.banner h3{margin:0 0 8px;font-weight:900}
.banner p{margin:0;opacity:.95}

/* Galería */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.gimg{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  min-height: 170px;
  border: 1px solid rgba(17,74,168,.12);
  box-shadow: 0 14px 28px rgba(7,26,58,.10);
}
.gimg img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transform: scale(1.02);
}
.gimg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,26,58,0), rgba(7,26,58,.35));
  opacity:.9;
}
.gimg span{
  position:absolute; left:14px; bottom:12px;
  color:#fff; font-weight:900;
  z-index:2;
  text-shadow: 0 10px 18px rgba(0,0,0,.35);
  font-size: 1.05rem;
}

.g1{grid-column: span 6; min-height: 260px}
.g2{grid-column: span 3}
.g3{grid-column: span 3}
.g4{grid-column: span 4}
.g5{grid-column: span 4}
.g6{grid-column: span 4}

@media (max-width: 992px){
  .g1,.g2,.g3,.g4,.g5,.g6{grid-column: span 12}
}

/* Formularios */
.input-field input:focus + label,
.input-field textarea:focus + label{
  color: var(--azul-600) !important;
}
.input-field input:focus,
.input-field textarea:focus{
  border-bottom: 1px solid var(--azul-600) !important;
  box-shadow: 0 1px 0 0 var(--azul-600) !important;
}

/* Botones */
.btn-blue{
  background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
  border-radius: 14px;
  font-weight: 900;
  letter-spacing:.2px;
  text-transform:none;
}
.btn-outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 14px;
  font-weight: 900;
  text-transform:none;
}
.btn-outline:hover{background: rgba(255,255,255,.08)}

/* Footer */
.page-footer{
  background: linear-gradient(135deg, var(--azul-900), #06152f);
}
.footer-mini{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 14px 0;
  opacity:.95;
}

/* Header interior */
.inner-hero{
  position:relative;
  padding: 90px 0 36px;
  color:#fff;
  overflow:hidden;
}
.inner-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(7,26,58,.92), rgba(17,74,168,.40)),
    url("https://images.unsplash.com/photo-1621905252507-b35492cc74b4?auto=format&fit=crop&w=1920&q=80") center/cover no-repeat;
}
.inner-hero .container{position:relative; z-index:2}
.inner-hero h2{margin:0;font-weight:900}
.breadcrumbs{
  margin-top:10px;
  opacity:.92;
}
.breadcrumbs a{color:#fff; text-decoration:underline}
