:root{
  --azul-marino:#0b1f3b;
  --azul-acento:#1f4f8f;
  --gris-suave:#f2f3f5;
  --blanco:#fff;
  --texto:#1b1f23;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Montserrat",sans-serif;
  background:var(--gris-suave);
  color:var(--texto);
}

/* HEADER DIFERENTE AL INDEX */
.sub-header{
  background: linear-gradient(135deg, #0b1f3b, #041023);
  color: white;
  padding: 1.5rem 7vw 3rem 7vw;
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
}

.nav-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.logo{
  display:flex;
  align-items:center;
  gap:0.8rem;
}
.logo-img{height:55px}
.logo-text{
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.9;
}

.nav-links{
  display:flex;
  gap:1.5rem;
  font-size:.95rem;
}
.nav-links a{
  color:white;
  opacity:.8;
  text-decoration:none;
  position:relative;
}
.nav-links a.active{
  opacity:1;
  font-weight:700;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-.3rem;
  width:0; height:2px;
  background:#39a0ff;
  transition:width .2s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-links a:hover{opacity:1;}

.sub-hero{
  margin-top:2.2rem;
  max-width:700px;
}
.sub-hero h1{
  font-size:2.3rem;
  margin:0 0 .4rem 0;
}
.sub-hero p{
  margin:0;
  opacity:.85;
}

/* GRID ESPECIALIDADES */
.section{padding:4rem 7vw;}
.esp-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem;
}

.esp-card{
  position:relative;
  height:260px;
  border-radius:18px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  box-shadow:0 12px 30px rgba(15,23,42,.12);
  border:1px solid rgba(148,163,184,.35);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}

.esp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(15,23,42,.2);
}

/* Overlay de explicación */
.esp-overlay{
  position:absolute;
  inset:0;
  background:rgba(5,10,20,.7);
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.2rem;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease;
}

.esp-card:hover .esp-overlay{
  opacity:1;
  transform:translateY(0);
}

.esp-overlay h3{
  margin:0 0 .3rem 0;
  font-size:1.15rem;
}
.esp-overlay p{
  margin:0;
  font-size:.95rem;
  opacity:.9;
}

/* FOOTER */
.sub-footer{
  background:#020617;
  color:#9ca3af;
  text-align:center;
  padding:2rem 7vw;
  font-size:.85rem;
}
.footer-logo{
  height:40px;
  margin:0 auto 1rem auto;
  opacity:.8;
}

/* RESPONSIVE */
@media (max-width: 992px){
  .esp-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 720px){
  .nav-bar{flex-direction:column; align-items:flex-start;}
  .nav-links{flex-wrap:wrap;}
  .esp-grid{grid-template-columns:1fr;}
}