body{
    font-family: 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth;
}

.form-big  p{font-size: 14px;}


.titulo {
  font-size: 21px;
  font-weight: 800;
  color: #0693f5;
  position: relative;
  display: inline-block;
	    margin-bottom: 28px;
}

.titulo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 280px;
  height: 10px;
  border-top: 4px solid #0693f5; /* 👈 CAMBIO CLAVE */
  border-radius: 50%;
}

.check{width: 50%;
    float: left;
    font-size: 13px;
    padding: 2px 0;}

/* TOP BAR */
.topbar{
       background: #1a9cfd;
    font-size: 14px;
    padding: 8px 0;
	    color: #fff;
}

.topbar a{
    color:#0d6efd;
    text-decoration:none;
    font-weight:500;
}

/* NAVBAR */
.navbar{
    background:white;
    padding:15px 0;
}

.navbar-brand{
    font-weight:600;
    font-size:22px;
}

/* MENU LINKS */
.navbar-nav .nav-link{
    color:#333;
    margin:0 10px;
    font-weight:500;
}

.navbar-nav .nav-link:hover{
    color:#0d6efd;
}

/* BOTON DERECHO */
.btn-custom{
    background:#0f4c5c;
    color:white;
    padding:10px 20px;
    border-radius:25px;
    font-weight:500;
}

.btn-custom:hover{
    background:#0c3a45;
}

/* RESPONSIVE */
@media(max-width:991px){
    .topbar{
        text-align:center;
    }
}
	
	/* ===== SLIDER BASE ===== */
.slider-bg{
    height:600px;
    background-size:cover;
    background-position:center;
    position:relative;
    animation:zoomBg 6s ease-in-out infinite alternate;
}

/* OVERLAY */
.overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
}

/* TEXTO */
.slider-content{
    position:absolute;
    top:50%;
    left:10%;
    transform:translateY(-50%);
    color:white;
    max-width:500px;
}

.slider-content h1{
    font-size:3rem;
    font-weight:700;
}

.slider-content p{
    margin:15px 0;
}

/* ===== ANIMACIONES ===== */
.title-anim{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp 1s ease forwards;
}

.text-anim{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp 1.5s ease forwards;
}

.btn-modern{
    opacity:0;
    animation:fadeUp 2s ease forwards;
}

/* KEYFRAMES */
@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===== BOTON MODERNO ===== */
.btn-modern{
    background: linear-gradient(45deg, #0f4c5c, #00c9a7);
    border:none;
    padding:10px 25px;
    border-radius:30px;
    color:white;
    font-weight:600;
    transition:0.3s;
}

.btn-modern:hover{
    transform:scale(1.1);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* ===== TRANSICION SLIDE ===== */
.carousel-item{
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/* ===== ZOOM SUAVE ===== */
@keyframes zoomBg{
    from{transform:scale(1);}
    to{transform:scale(1.1);}
}
	
	/* SECCION */
.info-section{
      background: #f8f9fa;
    padding: 41px 0 80px;
}

/* FORMULARIO GRANDE FLOTANTE */
.form-big{
    position:absolute;
    right:10%;
    top:-380px; /* 🔥 esto hace que sobresalga */
    width:420px;
    background:white;
    padding:25px;
    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,0.2);
    z-index:10;
}

/* INPUTS MODERNOS */
.form-big input,
.form-big select,
.form-big textarea{
    border-radius:8px;
    padding:10px;
}



.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 13px!important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* CAMPOS MÁS COMPACTOS */
.form-control{
    padding:8px 12px;
    font-size:14px;
    margin-bottom:5px;
}

/* FONDO PLOMO */
.form-control,
select.form-control,
textarea.form-control{
    background:#f1f3f5;
    border:1px solid #ddd;
    border-radius:8px;
}

/* AL HACER CLICK */
.form-control:focus{
    background:#fff;
    border-color:#0f4c5c;
    box-shadow:none;
}

/* CHECKBOX MÁS ORDENADO */
.form-check{
    margin-bottom:5px;
}


/* RESPONSIVE */
@media(max-width:991px){
    .form-big{
        position:relative;
        top:0;
        right:0;
        width:100%;
        margin-top:30px;
    }
}
	

.slide-track:hover{
    animation-play-state: paused;
}

/* CONTENEDOR */
.slider-cursos{
    overflow:hidden;
    position:relative;
}

/* TRACK ANIMADO */
.slide-track{
    display:flex;
    gap:20px;
    animation:scrollCursos 25s linear infinite;
}

/* TARJETAS GRANDES */
.curso-card{
    min-width:250px;
    height:200px;
    position:relative;
    border-radius:15px;
    overflow:hidden;
    transition:0.4s;
}

/* IMAGEN */
.curso-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* OVERLAY */
.curso-card .overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
}

/* TEXTO */
.curso-card span{
    position:absolute;
    bottom:15px;
    left:15px;
    color:white;
    font-size:18px;
    font-weight:600;
}

/* HOVER PRO */
.curso-card:hover{
    transform:scale(1.1);
    z-index:2;
}

/* ANIMACION INFINITA */
@keyframes scrollCursos{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}
/* responsive */
@media(max-width:768px){
    .col-md-2{
        flex:0 0 50%;
        max-width:50%;
        margin-bottom:10px;
    }
}	
	
/* FOOTER */
.footer{
      background: #1a9cfd;
    color: white;
    padding: 60px 0 20px;
}

/* TITULOS */
.footer h5,
.footer h6{
    font-weight:600;
    margin-bottom:15px;
}

/* TEXTO */
.footer p{
    font-size:14px;
color: #ffffff;}

/* LINKS */
.footer a{
color: #ffffff;    text-decoration:none;
    font-size:14px;
    transition:0.3s;
}

.footer a:hover{
color: #ffffff;}

/* REDES */
.footer .social a{
    display:inline-block;
    margin-right:10px;
    font-size:20px;
    transition:0.3s;
}

.footer .social a:hover{
    transform:scale(1.2);
    color: #ffffff;
}
	
	.logo{width: 201px;}