/* Importación de tipografía global */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  --azul-oscuro: #012A4A;
  --azul-claro: #01497C;
  --acento: #61A5C2;
  --bg-light: #f7f9fb;
  --card-bg: #ffffff;
}

/* reset / tipografía */
*{box-sizing:border-box}

body{
  font-family: 'Manrope', sans-serif; /* ← TIPOGRAFÍA GLOBAL */
  margin:0;
  color:#222;
  scroll-behavior: smooth;
  background: var(--bg-light);
}

/* ===========================
   NAVBAR MODERNA - BOTONES CÁPSULA
   =========================== */

/* fondo del navbar */
nav.custom-navbar {
  background-color: #093968 !important;
  padding: 0.6rem 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* marca */
nav.custom-navbar .navbar-brand {
  color: #ffffff !important;
  font-size: 1.45rem;
  letter-spacing: 0.6px;
}

/* Estilo a los enlaces que tienen la clase nav-btn */
nav.custom-navbar .nav-link.nav-btn {
  background-color: #093968 !important;
  color: #ffffff !important;
  padding: 0.45rem 1.05rem !important;
  border-radius: 28px !important;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: background-color .22s ease, transform .18s ease, box-shadow .22s ease;
  margin-left: 6px;
}

/* hover y estado activo */
nav.custom-navbar .nav-link.nav-btn:hover,
nav.custom-navbar .nav-link.nav-btn:focus,
nav.custom-navbar .nav-link.nav-btn.active {
  background-color: #4b98b2 !important;
  color: #ffffff !important;
  border-color: #4b98b2 !important;
  box-shadow: 0 10px 26px rgba(75,152,178,0.18) !important;
  transform: translateY(-3px);
}

/* Mobile toggler */
nav.custom-navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.15);
}
nav.custom-navbar .navbar-toggler .navbar-toggler-icon {
  filter: invert(1);
}

/* Espaciado entre items */
nav.custom-navbar .navbar-nav {
  align-items: center;
  gap: 0.5rem;
}

/* quitar padding por defecto */
nav.custom-navbar .navbar-nav .nav-link {
  padding: 0 !important;
}

@media (max-width: 575px) {
  nav.custom-navbar .nav-link.nav-btn {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.9rem;
  }
}

/* ===========================
   HERO
   =========================== */
.hero{
  min-height: 80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(rgba(1,42,74,0.6), rgba(1,42,74,0.6)),
    url('../imagenes/fondo3.jpg') center 10%/cover no-repeat;
  padding-top: 4.5rem;
}
.hero .display-4{ letter-spacing: .6px; }
.accent{ color: var(--acento); 
}

.subtitulo-hero {
  font-family: 'Dancing Script', cursive !important;
  font-size: 6rem !important;
  font-style: italic !important;
  font-weight: 600;
  margin-top: 10px;
  color: #ffffff; 
}


/* Secciones */
.section-light{ background: #fff; }
section{ padding: 4.5rem 0; }

/* Titulares */
.section-title{
  color: var(--azul-oscuro);
  font-weight:800;
}
.section-desc{ color: #030303; font-size:1.05rem; }

/* Tarjetas de servicios */
.servicio-card{
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,249,252,0.9));
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 18px rgba(2, 48, 78, 0.06);
}
.servicio-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(2,48,78,0.12);
}

/* Info cards */
.info-card{
  background: linear-gradient(180deg, #fff, #f8fbfd);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(2,48,78,0.06);
}

/* feature boxes */
.feature-box{
  background: linear-gradient(90deg, rgba(1,73,124,0.06), rgba(97,165,194,0.04));
  border-radius: 10px;
  text-align:center;
  padding: 1.5rem;
  min-height: 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 20px rgba(2,48,78,0.04);
}

/* FOOTER */
footer{ margin-top: 2rem; }

/* Animaciones */
.fade-item, .info-card, .servicio-card, .feature-box, .card.p-4{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  
}
.in-view{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Responsive */
@media (max-width: 768px){
  .hero{ padding-top: 5.5rem; min-height: 60vh;}
  .display-4{ font-size: 1.8rem; }
  .section-desc{ font-size: 0.98rem;}
}

/* Redes sociales */
.social-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin: 0 10px;
  transition: transform 0.3s;
}
.social-icon-img:hover {
  transform: scale(1.2);
}

/* Logo del navbar */
.logo-nav {
  height: 45px;
  width: auto;
}

/* ===========================
   GROSOR TIPOGRÁFICO
   =========================== */

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4 { font-weight: 500; }
h5 { font-weight: 500; }
h6 { font-weight: 500; }

p {
  font-weight: 500;
}

/* ================================
   SECCIÓN NUESTRAS ESTRATEGIAS
================================ */

.estrategias-section {
    padding: 60px 20px;
}

.titulo-estrategia {
    font-size: 34px;
    font-weight: 800;
    color: #1b3c5d;
}

.resaltado {
    color: #4b98b2;
}

.subtitulo-estrategia {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

.estrategia-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    border-left: 5px solid #1b7ac9;
    height: 100%;
}

.estrategia-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #005fa3;
    margin-bottom: 12px;
}

.estrategia-card p {
    color: #444;
    font-size: 15px;
    margin-bottom: 10px;
}

.estrategia-card ul {
    margin: 0;
    padding-left: 20px;
}

.estrategia-card li {
    margin-bottom: 6px;
    font-size: 14.5px;
}

/* Hover efecto */
.estrategia-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.15);
}

.section-desc {
  color: #000 !important;
}

/* CONTENEDOR */
.somos-section {
  padding: 80px 0;
}

/* ===========================
   SECCIÓN SOMOS MODERNA
=========================== */

.somos-section {
  padding: 70px 0;
}

.somos-card {
  background: #ffffff;
  padding: 45px;
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
  border-left: 6px solid var(--azul-claro);
  border-right: 6px solid var(--acento); /* degradado visual */
  max-width: 900px;
  margin: auto;
  transition: .35s ease;
  opacity: 0;
  transform: translateY(20px);
}

/* Cuando entra en pantalla (usa tus clases existentes in-view) */
.somos-card.in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.somos-titulo {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 25px;
  color: var(--azul-oscuro);
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
}

/* Línea moderna debajo del título */
.somos-titulo::after {
  content: "";
  width: 70px;
  height: 4px;
  background: var(--acento);
  display: block;
  margin-top: 8px;
  border-radius: 3px;
}

.somos-texto {
  text-align: justify;
  font-size: 17px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 18px;
}

/* Hover sutil */
.somos-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.10);
}

/* ============================
   TITULOS MISION / VISION / VALORES
============================ */
.mv-card h4 {
    font-weight: 800 !important;
    font-size: 2rem !important;
    color: var(#1b3c5d);
    letter-spacing: .5px;
   
}

/* ============================
   TITULOS DE LAS TARJETAS DE ESTRATEGIAS
============================ */
.estrategia-card h4 {
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    color: #01497C;
    letter-spacing: .4px;
}