html {
  scroll-behavior: smooth;
}

body {
  font-family: "Times New Roman", serif;
  margin: 0;
  background:#eef3f8;
  color: #222;
}

.card,
.card-internacional{
position:relative;
overflow:hidden;
}

.card::before,
.card-internacional::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.35),
transparent
);
transition:left 0.8s ease;
}

.card:hover::before,
.card-internacional:hover::before{
left:100%;
}


.contador{
display:inline-block;
transition:transform 0.2s ease;
}

/* TOPBAR (CABECERA NUEVA) */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:white;
border-bottom:1px solid #e5e5e5;
position:sticky;
top:0;
z-index:1000;
}

/* LOGO */

.logo a{
font-size:22px;
font-weight:bold;
color:#1f3c5a;
text-decoration:none;
}


/* MENÚ */

section h2::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:60px;
height:3px;
background:linear-gradient(90deg,#5fa8d3,#1f3c5a);
border-radius:3px;
transition:width 0.4s ease;
}

section:hover h2::after{
width:100%;
}

/* MENÚ */

.menu a{
margin-left:25px;
text-decoration:none;
font-weight:bold;
color:#1f3c5a;
font-size:15px;
}

.menu a:hover{
text-decoration:underline;
}

/* EXTRA */

@media (max-width:800px){

.topbar{
flex-direction:column;
gap:10px;
}

.menu a{
margin:0 10px;
}

}


/* CABECERA */

header {
  background: white;
  padding: 60px 20px 40px 20px;
  text-align: center;
  border-bottom: 3px solid #1f3c5a;
}

header h1 {
  font-size: 42px;
  margin: 0;
  color: #1f3c5a;
}

header p {
  font-size: 18px;
  margin-top: 10px;
}

/* HERO VISUAL */

.hero-full{
height:60vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}

/* FONDO ANIMADO */

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:linear-gradient(270deg, #5fa8d3, #1f3c5a, #5fa8d3);
background-size:400% 400%;
animation:
  movimientoFondo 12s ease infinite,
  zoomHero 18s ease-in-out infinite;
z-index:0;
}

/* ANIMACIÓN SUAVE */

@keyframes movimientoFondo{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

@keyframes zoomHero{
0%,100%{transform:scale(1);}
50%{transform:scale(1.06);}
}

/* TEXTO CENTRAL */

.hero-center{
position:relative;
z-index:1;
text-align:center;
color:white;
max-width:700px;
padding:20px;
}

.hero-center h1{
font-size:46px;
margin-bottom:15px;
}

.hero-center p{
font-size:20px;
opacity:0.95;
}


/* NAVEGACIÓN */

nav {
  text-align: center;
  padding: 18px;
  border-bottom: 1px solid #e5e5e5;
  background: #fafafa;
}

nav a {
  margin: 0 18px;
  text-decoration: none;
  font-weight: bold;
  color: #1f3c5a;
}

nav a:hover {
  text-decoration: underline;
}

/* SECCIONES */

section {
  max-width: 900px;
  margin: 70px auto;
  padding: 20 30px;
}

section:not(.hero-full):not(.cifras):not(.contacto){
background:#f7f9fc;
border-radius:14px;
padding:40px 30px;
box-shadow:0 8px 22px rgba(0,0,0,0.04);
}

section h2{
font-size:30px;
margin-bottom:20px;
color:#1f3c5a;
position:relative;
padding-bottom:12px;
display:inline-block;
}

/* CIFRAS */

.cifras{
background:linear-gradient(270deg, #5fa8d3, #1f3c5a, #5fa8d3);
background-size:400% 400%;
animation:movimientoFondo 12s ease infinite;
color:white;
padding:70px 30px;
margin:80px auto;
border-radius:12px;
box-shadow:0 12px 30px rgba(0,0,0,0.12);
}



.cifras-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:30px;
max-width:900px;
margin:auto;
text-align:center;
}

.cifra h3{
font-size:36px;
margin:0;
}

.cifra p{
margin-top:8px;
font-size:15px;
opacity:0.9;
}

/* SERVICIOS */


.grid-servicios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.card {
  border-left: 4px solid #1f3c5a;
  padding: 28px;
  background: #f8f9fb;
  font-size: 16px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}

/* efecto al pasar el ratón */

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* título dentro de las tarjetas */

.card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #1f3c5a;
  font-size: 18px;
}

/* texto dentro de las tarjetas */

.card p {
  margin: 0;
  line-height: 1.5;
  color: #333;
}


/* ENFOQUE INTERNACIONAL */

.grid-internacional{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:35px;
}

.card-internacional{
background:#f8f9fb;
padding:25px;
border-radius:6px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
text-align:center;
transition:all 0.25s ease;
}

.card-internacional:hover{
transform:translateY(-4px);
box-shadow:0 10px 22px rgba(0,0,0,0.08);
}

.card-internacional img{
width:42px;
margin-bottom:10px;
transition:transform 0.35s ease;
}

.card-internacional:hover img{
transform:scale(1.18);
}

.card-internacional h3{
margin:10px 0 8px 0;
color:#1f3c5a;
}

.card-internacional p{
font-size:15px;
line-height:1.5;
margin:0;
}

.link-camara{
color:#1f3c5a;
font-weight:bold;
text-decoration:none;
}

.link-camara:hover{
text-decoration:underline;
}


/* CONTACTO */

.contacto p {
  font-size: 17px;
  margin: 6px 0;
}

/* FOOTER */

footer {
  margin-top: 80px;
  padding: 25px;
  text-align: center;
  background: #1f3c5a;
  color: white;
}

/* ANIMACIÓN */

.fade {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.8s ease;
}

.fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* MÓVIL */

@media (max-width: 700px) {

header h1 {
  font-size: 32px;
}

section {
  margin: 50px auto;
}

}


.topbar{
transition:all 0.35s ease;
}

.topbar.scrolled{
padding:10px 40px;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(8px);
box-shadow:0 8px 24px rgba(0,0,0,0.12);
}