/*-------------------------------------
   COLORES PRINCIPALES DEL SITIO WEB
--------------------------------------*/
/* $color-primario:#69B657;
$color-secundario:#000000; 
$color-neutro:#696969;
$color-texto:BLACK;
$color-claro: white; */

/*-------------------------------------------------------------
-- 1. estilos del slider
--------------------------------------------------------------*/

.swiper-slide {
    height: 34rem;
    text-align: center;
    color: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.swiper-slide::before {
    content: "";
    position: absolute;
    background-color: black;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .2;
}

/* color de la barra de progreso */
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: #69B657;
    /* background-color: #000000; */
}

.swiper-button-prev,
.swiper-button-next {
    background-image: none;
    background-color: rgba(0, 0, 0, 0.29);
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
    transition: all .5s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.46);
    color: #69B657;
    border: none;
}

.swiper-button-prev::before,
.swiper-button-next::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f060";
    font-weight: 900;
    border: none;
}

.swiper-button-next::before {
    transform: rotate(180deg);
}

/* Para eliminar las flechas por default de SWIPER */
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-prev:after,
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
   content: "" !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
   font-family: '' !important;
   font-size: var(--swiper-navigation-size);
 }

/*----------------------------------------------------------
2. Seccion de bievenidos
-----------------------------------------------------------*/

#bienvenidos h3 span {
    font-weight: bold;
}

.contenedor-video a{
    background-color: rgba(255, 255, 255, 0.79);
    width: 7rem;
    height: 7rem;
    display: block;
    border-radius: 50%;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #69B657;
    text-decoration: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .5s ease;
    background-clip: padding-box;
    border: 0 solid transparent; 
}

.contenedor-video a:hover{
    background-color:  #69B657;
    color: #000000;
    border: 10px solid rgba(255, 255, 255, 0.79);
}

.contenedor-video img{
    transition: all .5s ease;
    opacity: .6;
}

.contenedor-video:hover img{
    transform: scale(1.1);
    opacity: .9;
}

.vbox-title {
    color: white !important;
}

/*----------------------------------------------------------
3. Seccion de te ayudamos
-----------------------------------------------------------*/
#te-ayudamos{
    position: relative;
    transform: skew(0deg, 6deg);
}

#te-ayudamos .container{
    transform: skew(0deg, -6deg);
}

#te-ayudamos::before{
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.46);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/*----------------------------------------------------------
4. Seccion de nuestros numeros
-----------------------------------------------------------*/
.text-blck-50{
    color: rgba(0,0,0,.5)!important;
}

.text-White-50 {
    color:  rgba(255, 255, 255, 0.5)!important;
}

.linea-numeros{
    background-color: #69B657;
    width: 5rem;
    height: .4rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .5s ease;
}

#NuestrosNumeros .col-6:hover i{
    color: #69B657 !important;
    cursor: pointer;
}

#NuestrosNumeros .col-6:hover .linea-numeros{
    background-color: #000000 !important;
    bottom: 1rem;
    transform: translateX(-50%) rotate(180deg);
}

/*----------------------------------------------------------
5. Seccion de nuestros app
-----------------------------------------------------------*/
#nuestraApp::before{
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.46);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/*----------------------------------------------------------
6. Seccion de contactanos
-----------------------------------------------------------*/
#contacto .triangulo{
   background-color: #000000;
   position: absolute;
   width: 2.5rem;
   height: 2.5rem;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%) translateY(50%) rotate(45deg);
}

#contacto  .form-control {
    border: 2px solid #69B657;
}

body.dark #contacto  .form-control {
    background: #000;
    color: #fff !important;
}

#contacto  .form-control:focus {
    box-shadow: 0 0 0 0.2rem #000000 !important;
}

#contacto .input-group-text{
    background-color: #000000;
    color: black;
    border-bottom: 2px solid #69B657;
    border-top: 2px solid #69B657;
    border-left: 2px solid #69B657;
}

#contacto .col-form-label {
    color: #000 !important;
}

body.dark #contacto .col-form-label {
    color: #fff !important;
}

#contacto h4 {
    color: #000 !important;
}

body.dark #contacto h4 {
    color: #fff !important;
}

.estiloManoFecha{
    margin-bottom: 0;
    cursor: pointer;
}

.estiloManoHora{
    margin-bottom: 0;
    cursor: pointer;
}

/*Personalizando el selector de fecha*/
.picker__box {
    border: 4px solid #000000 !important;
}

.picker--focused .picker__day--selected, 
.picker__day--selected, 
.picker__day--selected:hover {
    background: #69B657 !important;
    color: #fff;
}

.picker__nav--prev:before {
    border-right: .75em solid #69B657 !important;
}

.picker__nav--next:before {
    border-left: .75em solid #69B657 !important;
}

.picker__select--year {
    width: 22.5%;
    padding: 0 .8rem;
    border-radius: .5rem;
    border-color: #000000 !important;
}

.picker__select--month {
    width: 35%;
    padding: 0 .8rem;
    border-radius: .5rem;
    border-color: #000000 !important;
}

.picker--focused .picker__list-item--highlighted, 
.picker__list-item--highlighted:hover, 
.picker__list-item:hover {
    cursor: pointer;
    color: #fff;
    background: #69B657 !important;
}

.picker__list{
  padding: .5rem 0;  
}

.picker--time .picker__button--clear:focus, .picker--time .picker__button--clear:hover {
    cursor: pointer;
    color: #000;
    background: #000000 !important;
    border-color: #000000 !important;
    outline: 0px;
}

.picker--time .picker__button--clear {
   background-color: #69B657 !important; 
   border-radius: .5rem;
   color: rgb(255, 255, 255);
}

.picker__button--clear:before {
    top: -.25em;
    width: .66em;
    border-top: 3px solid #fff;
}

/*----------------------------------------------------------
7. graficos
-----------------------------------------------------------*/

.ct-label {
    fill: black !important;
    color: black !important;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
}

/*----------------------------------------------------------
8. card
-----------------------------------------------------------*/
.zoom-img {
    transition: transform .4s ease;
}

.card:hover .zoom-img {
    transform: scale(1.05);
}

/* Sombra y elevación */
.card-hover {
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Sombreado al sombreado*/
.card-hover::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
}

.card-hover:hover::after {
    background: rgba(0,0,0,0.1);
}

.card-footer {
    position: relative;
    height: 8px;
    padding: 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 100%;
    background-color: #007bff;
    transition: width 0.4s ease, left 0.4s ease;
}

.card-hover:hover .card-footer {
    background-color: #f8f9fa; /* más claro */
    box-shadow: inset 0 0 15px rgba(0,123,255,0.5);
}


.card-hover:hover .footer-bar {
    width: 100%;
    left: 0;
}


/*----------------------------------------------------------
9. Modal
-----------------------------------------------------------*/

/* Header destacado */
.modal-header {
    background: linear-gradient(90deg, #6c757d, #495057);
    color: white;
    border-bottom: 3px solid #343a40;
}

/* Card-like body */
.modal-body h6 {
    font-weight: 600;
    margin-bottom: 5px;
}

.modal-body p {
    margin-bottom: 10px;
    color: #555;
}

/* Sombra para el modal */
.modal-content {
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    border-radius: 0.5rem;
}

/* Hover efecto opcional para filas */
.modal-body .col-md-6:hover {
    background-color: rgba(0,123,255,0.05);
    border-radius: 0.25rem;
    transition: background-color 0.3s ease;
}

/* Carousel imágenes suaves */
.carousel-inner img {
    max-height: 400px;
    object-fit: cover;
}

.carousel-item img {
    height: 420px;
    object-fit: contain;
    background-color: #f8f9fa;
}

/* Indicadores visibles */
.carousel-indicators li {
    background-color: #007bff !important;
}

.carousel-indicators .active {
    background-color: #0056b3 !important;
}

/* Texto del caption (fechas) visible */
.carousel-caption {
    color: #000 !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}


/* Indicadores (puntos) del carousel */
.carousel-indicators li {
    background-color: #007bff !important; /* azul visible */
}

.carousel-indicators .active {
    background-color: #0056b3 !important; /* azul más oscuro */
}

/* Flecha izquierda azul */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0L1 4l4.25 4 .75-.75L2.5 4l3.5-3.25-.75-.75z'/%3E%3C/svg%3E");
}

/* Flecha derecha azul */
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0L7 4l-4.25 4-.75-.75L5.5 4 2 0.75l.75-.75z'/%3E%3C/svg%3E");
}

/* Iconos de compatibilidad */
.footer-icon {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.footer-icon:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}

/* Header estilo moderno */
.modal-header {
    background: linear-gradient(90deg, #6c757d, #495057);
    color: white;
    border-bottom: 3px solid #343a40;
}

/* Tab lista limpia */
.tab-content ul {
    list-style: disc;
    padding-left: 20px;
}

.modal-body ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.modal-body ul li {
    padding-left: 1.4rem;
    position: relative;
    margin-bottom: 6px;
}

/* Tabs estilizados */
.nav-tabs .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 600;
    transition: all .3s ease;
}

.nav-tabs .nav-link:hover {
    color: #007bff;
}

.nav-tabs .nav-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Transición suave del contenido */
.tab-pane {
    animation: fadeIn 0.4s ease;
}

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

/* Iconos de compatibilidad */
.compat-icon {
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.85); /* Fondo suave */
    backdrop-filter: blur(4px); /* Efecto glass */
    border: 1px solid rgba(255, 255, 255, 0.4);

    transition: 
        transform 0.3s ease,
        filter 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
    cursor: pointer;
}

/* Hover con efecto premium */
.compat-icon:hover {
    transform: scale(1.18);
    filter: brightness(1.20);
    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 4px 16px rgba(0, 123, 255, 0.35),   /* Glow azul */
        0 0 8px rgba(255, 255, 255, 0.8);     /* Luz suave */
}




/*----------------------------------------------------------
1.0 Media querys
-----------------------------------------------------------*/

@media(min-width:768px) {
    #te-ayudamos{
        transform: skew(0deg, 3deg);
    }
    
    #te-ayudamos .container{
        transform: skew(0deg, -3deg);
    }
}

@media(min-width:990px) {
    .swiper-slide {
        height: 37.5rem; /* 600 / 16 */
    }
}

@media(min-width:1200px) {
    html {
        font-size: 16px;
    }
    .swiper-slide {
        height: 44rem; /* 600 / 16 */
    }
}