@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{background:#f4f7fb;color:#333;}

hr {margin-top: 5px; margin-bottom: 5px; border-top-width: 1px; border-right-width: 0; border-bottom-width: 0;  border-left-width: 0; border-top-style: solid; border-top-color: #eee;}
header{background:#002b63; color:white; padding:15px 40px;
position:fixed;
width:100%;
top:0;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
}


.hero{margin-top:80px; background:linear-gradient(135deg,#003b8e,#0066cc); color:white; padding:100px 20px; text-align:center; animation:fadeIn 1.2s ease-in-out;}
.hero h1{font-size:42px;margin-bottom:15px;}
.hero p{font-size:18px;margin-bottom:25px;}
.title{font-size: 36px; margin-bottom: 20px; color: #3c4296;}
.btn{display:inline-block; padding:14px 30px; background:#00c853; color:white; border-radius:30px; text-decoration:none; font-weight:600; transition:.3s;}
.btn:hover{background:#009624;transform:scale(1.05);}

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

.section-title{text-align:center; margin-bottom:40px; font-size:30px; color:#002b63;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px;}
.card{background:white; padding:30px; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,0.08); transition:.3s;}
.card:hover{transform:translateY(-8px);}
.cta{background:linear-gradient(135deg,#0066cc,#00c853); color:white; text-align:center; padding:80px 20px; border-radius:20px; margin-top:50px;}
footer{background:#3c4296; color:white; text-align:center; padding:20px;}
.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
padding:15px 18px;
border-radius:50%;
font-size:20px;
text-decoration:none;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
.banner-fondo {
  background-image: url('https://images.unsplash.com/photo-1609220136736-443140cffec6?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: Arial, sans-serif;
}

.banner-fondo .overlay {
  background: rgba(0, 0, 0, 0.55);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-fondo .contenido-banner {
  color: #fff;
  text-align: center;
  max-width: 700px;
  padding: 20px;
  animation: fadeIn 1.5s ease-in-out;
}

.banner-fondo h1 {
  font-size: 42px;
  margin-bottom: 20px;
}

.banner-fondo p {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
}

.banner-fondo .btn-afiliar {
  display: inline-block;
  padding: 14px 30px;
  background: #f4b400;
  color: #000;
  font-weight: bold;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.banner-fondo .btn-afiliar:hover {
  background: #fff;
  transform: scale(1.05);
}

/* Animación */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .banner-fondo h1 {
    font-size: 28px;
  }

  .banner-fondo p {
    font-size: 16px;
  }
}

.noticias-section {padding: 80px 40px; background: linear-gradient(135deg, #f9fafc, #eef2ff);}
.noticias-container {max-width: 1200px; margin: auto; text-align: center;}
.noticias-title { font-size: 36px; margin-bottom: 50px; color: #333;}
.noticias-cards {display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;}
.noticia-card {background: #fff; border-radius: 20px; overflow: hidden; width: 320px; transition: all 0.4s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.08); display: flex; flex-direction: column;}
.noticia-img {overflow: hidden;}
.noticia-img img {width: 100%; height: 200px; object-fit: cover; transition: transform 0.6s ease;}
.noticia-card:hover img {transform: scale(1.1);}
.noticia-card:hover {transform: translateY(-12px); box-shadow: 0 15px 35px rgba(79,70,229,0.2);}
.noticia-content {padding: 25px; text-align: left;}
.noticia-fecha {font-size: 13px; color: #6b7280; display: block; margin-bottom: 10px;}
.noticia-content h3 {font-size: 20px; margin-bottom: 15px; color: #4f46e5;}
.noticia-content p {font-size: 15px; line-height: 1.6; color: #555; margin-bottom: 20px;}
.noticia-btn {text-decoration: none; padding: 8px 18px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-radius: 25px; font-size: 14px; transition: all 0.3s ease;}
.noticia-btn:hover {transform: scale(1.05); box-shadow: 0 6px 15px rgba(124,58,237,0.4);}
/* Responsive */
@media (max-width: 768px) {
.noticias-title {font-size: 28px;}
.noticia-card {width: 100%; max-width: 350px;}}

A.navwhite, A.navwhite:VISITED, A.navwhite:ACTIVE, A.navwhite:FOCUS, A.navwhite:LINK{
  font-size:14px; color:#ff; text-decoration: none; list-style-image: none; list-style-type: none;}

/* CSS STYLES PARA ADAPTAR IMAGENES*/
.imgicon  { font-size: 48px; color: #0d6efd;}
.imgdrop { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); max-width: 100%;}
.imgdropcenter {max-width: 100%; vertical-align: middle; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); max-width: 100%;}
.imglogo{width:200px; height:122px;} /* CSS coloca la imagen con este tamaño*/
.imgbgray {filter: grayscale(1); max-width: 100%} /* CONVIERTE LA IMGEN DE COLOR A GRIS */
.imgresp {max-width: 100%; }/* CSS acomoda la imagen con tamaño de acuerdo al DIV o CLASS */
.imgbor {max-width: 100%; border-radius: 20px; padding: 5px;}
 /* CSS acomoda la imagen y redondea el borde con tamaño de acuerdo al DIV o CLASS */
img.txtcenter{ max-width: 100%; vertical-align: middle;} /* CSS centra la imagen con el texto */
/* END CSS STYLES PARA ADAPTAR IMAGENES*/


.quienes-somos {padding: 80px 40px; background: #f4f6f9; font-family: Arial, sans-serif;}
.qs-container {display: flex; align-items: center; justify-content: center; gap: 50px; max-width: 1200px; margin: auto; flex-wrap: wrap;}
.qs-imagen img {width: 500px; max-width: 100%; border-radius: 15px; transition: transform 0.4s ease;}
.qs-imagen img:hover {transform: scale(1.05);}
.qs-contenido {max-width: 550px;}
.qs-contenido h2 {font-size: 36px; margin-bottom: 20px; color: #3c4296;}
.qs-contenido p {font-size: 16px; line-height: 1.7; margin-bottom: 15px; color: #444;}
.qs-btn {display: inline-block; margin-top: 15px; padding: 12px 25px; background: #3c4296; color: #fff; text-decoration: none; border-radius: 30px; transition: all 0.3s ease;}
.qs-btn:hover {transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2);}
/* Responsive */
@media (max-width: 768px) {
.qs-container {flex-direction: column; text-align: center;}
.qs-contenido h2 {font-size: 28px;}}

.menu-container {display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; background: #fff; position: relative;}
.logo {color: #333; font-weight: bold; font-size: 20px;}
.nav {display: flex; align-items: center; gap: 30px;}
.menu {list-style: none; display: flex; gap: 25px; margin: 0; padding: 0;}
.menu li {position: relative;}
.menu a {color: #343434; text-decoration: none; font-weight: 500; transition: color 0.3s ease;}
.menu a:hover {color: #3c4296;}
/* Submenu */
.submenu {position: absolute; top: 40px; left: 0; background: #fff; list-style: none; padding: 10px 0; border-radius: 8px; min-width: 180px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.15);}
.submenu li {padding: 8px 20px;}
.submenu a {color: #343434;}
.has-submenu:hover .submenu {opacity: 1; visibility: visible; transform: translateY(0);}
/* Botón CTA */
.btn-white {padding: 10px 20px; background: #fff; color: #3c4296; border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.btn-white:hover {transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 18px rgba(0,0,0,0.3);}
.btn-afiliar {padding: 10px 20px; background: #3c4296; color: #fff; border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.btn-afiliar:hover {transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 18px rgba(0,0,0,0.3);}
/* Responsive */
.menu-toggle {display: none; background: none; border: none; font-size: 26px; color: #3d434a;}
@media (max-width: 768px) {
.nav {position: absolute; top: 70px; right: 0;  background: #0b3d91;  flex-direction: column; width: 250px; padding: 20px; display: none;}
.nav.active {display: flex;}
.menu {flex-direction: column; gap: 15px;}
.submenu {position: static; background: #fff; box-shadow: none;}
.submenu a {color: #333;}
.has-submenu:hover .submenu {transform: none;}
.menu-toggle {display: block;}}

/* ========================================================================================================================================================================================================================= */
/* FORMULARIO DE INSCRIPCION EN LINEA */
/* ========================================================================================================================================================================================================================= */
.formcont { padding: 40px; background: #f4f6f9; display: flex; justify-content: center; align-items: center;}
.frmcontainer {width: 100%; max-width: 1000px; background: #ffffff; padding: 40px; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); animation: fadeIn 0.8s ease-in-out;}
.frmheader {text-align: center; margin-bottom: 35px;}
.frmheader p {margin-top: 8px; color: #777; font-size: 14px;}
.frmvisual{display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;}
.frmgroup {position: relative; display: flex; flex-direction: column;}
.full-width {grid-column: span 3;}
.frmvisual input,
.frmvisual select,
.frmvisual textarea {width: 100%; padding: 14px 12px; border: 1px solid #dcdcdc; background: #f0f0f0; color: #333; font-size: 15px; border-radius: 8px; outline: none; transition: all 0.3s ease;}
.frmvisualtextarea {resize: none;}
.frmvisual label {position: absolute; top: 14px; left: 12px; color: #777; font-size: 14px; pointer-events: none; transition: 0.3s ease; background: #ffffff; padding: 0 5px;}
.frmvisual input:focus,
.frmvisual select:focus,
.frmvisual textarea:focus {border-color: #7b2ff7; background: #ffffff; box-shadow: 0 0 0 3px rgba(123,47,247,0.1);}
.frmvisual input:focus + label,
.frmvisual input:valid + label,
.frmvisual textarea:focus + label,
.frmvisual textarea:valid + label,
.frmvisual select:focus + label,
.frmvisual select:valid + label {top: -9px; font-size: 12px; color: #0a3159;}
.frmvisual button {padding: 15px; border: none; border-radius: 30px; background: #0a3159; color: #fff; font-size: 16px; cursor: pointer; transition: 0.3s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.08);}
.frmvisual button:hover {transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,0.15);}
/* Responsive */
@media (max-width: 900px) {
.frmvisual {grid-template-columns: repeat(2, 1fr);}
.full-width {grid-column: span 2; }}
@media (max-width: 600px) {
..frmvisual{grid-template-columns: 1fr;}
.full-width {grid-column: span 1;}}
@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}

/* ========================================================================================================================================================================================================================= */
/* END FORMULARIO DE INSCRIPCION EN LINEA */
/* ========================================================================================================================================================================================================================= */



.footer-fondo {background: #3c4296; color: #fff;}
.footer-container {display: flex; justify-content: space-between; gap: 40px; padding: 60px 40px; max-width: 1200px; margin: auto; flex-wrap: wrap;}
.footer-col {flex: 1; min-width: 200px;}
.footer-col h3, .footer-col h4 {margin-bottom: 20px;}
.footer-col p {margin-bottom: 10px; line-height: 1.6;}
.footer-col ul {list-style: none; padding: 0;}
.footer-col ul li {margin-bottom: 10px;}
.footer-col ul li a {color: #fff; text-decoration: none; transition: all 0.3s ease;}
.footer-col ul li a:hover {padding-left: 8px; color: #D0FAE5;}
.footer-col i {margin-right: 8px; color: #D0FAE5;}
.social-icons {margin-top: 15px;}
.social-icons a {display: inline-block; margin-right: 10px; width: 38px; height: 38px; line-height: 38px; text-align: center; background: rgba(255,255,255,0.15); border-radius: 50%; color: #fff; transition: all 0.3s ease;}
.social-icons a:hover {background: #90A1B9; color: #000; transform: translateY(-4px);}
.footer-bottom {text-align: center; padding: 15px; background: rgba(0,0,0,0.2); font-size: 14px;}
/* Responsive */
@media (max-width: 768px) {
.footer-container {flex-direction: column; text-align: center;}
.social-icons a {margin: 8px;}}


.btn-contacto {
  padding: 12px 25px;
  border-radius: 30px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s ease;
}

.btn-contacto:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(124,58,237,0.4);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-overlay:target {
  display: flex;
  animation: fadeIn 0.4s ease;
}

.modal-content {
  background: #fff;
  width: 90%;
  max-width: 900px;
  border-radius: 20px;
  padding: 30px;
  position: relative;
  animation: slideUp 0.4s ease;
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  text-decoration: none;
  color: #333;
}

.modal-container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.modal-info,
.modal-form {
  flex: 1;
  min-width: 250px;
}

.modal-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-form input,
.modal-form textarea {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.modal-form button {
  padding: 10px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  cursor: pointer;
}

.form-message {
  font-size: 14px;
}

/* Animaciones */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideUp {
  from {transform: translateY(40px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}

@media (max-width: 768px) {
  .modal-container {
    flex-direction: column;
  }
}
.cardtrans{color:#333; border-radius:8px; padding: 15px; height:auto; margin-top: 5px; margin-bottom: 10px;}
/* CSS Styles para columnas responsivas */
#center{width: 60%; margin: 0 auto;}
#webcont{width: 1200px; margin: 0 auto;}
@media (max-width: 840px){#webcont{width: 100%;}}
.cl15 {float: left; width: 10%; padding: 5px;}
.cl20 {float: left; width: 20%; padding: 5px;}
.cl25 {float: left; width: 25%; padding: 5px;}
.cl30 {float: left; width: 30%; padding: 5px;}
.cl33 {float: left; width: 33.33%; padding: 5px;}
.cl40 {float: left; width: 40%; padding: 5px;}
.cl45 {float: left; width: 45%; padding: 5px;}
.cl50 {float: left; width: 50%; padding: 5px;}
.cl60 {float: left; width: 60%; padding: 5px;}
.cl70 {float: left; width: 70%; padding: 5px;}
.cl75 {float: left; width: 75%; padding: 5px;}
.cl80 {float: left; width: 80%; padding: 5px;}
.cl100 {float: left; width: 100%; padding: 5px;}
.cont:after {content: ""; display: table; clear: both;}
@media screen and (max-width:600px) {.cl15, .cl20, .cl25, .cl30, .cl33, .cl40, .cl45, .cl50, .cl60, .cl70, .cl80, .cl75, .cl100 {width: 100%;}}
/* END CSS STYLES ANCHO FIJO WEB Y COLUMNAS RESPONSIVAS VARIOS TAMAÑOS */
/* END CSS Styles para columnas responsivas */