@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
.nunito-200{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 200;font-style: normal;}
.nunito-300{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 300;font-style: normal;}
.nunito-400{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}
.nunito-500{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal;}
.nunito-600{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 600;font-style: normal;}
.nunito-700{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 700;font-style: normal;}
.nunito-800{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 800;font-style: normal;}
.nunito-900{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 900;font-style: normal;}
.nunito-1000{font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 1000;font-style: normal;}

.col-white{color: #FFF;}
.col-blue{color: #00BBFE;}

body {overflow-x: hidden;font-family: "Nunito", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}
.w-33{width: 33%!important;}


.hero-section {background: #000;}
.hero-section h1{font-size: 24px;}
.steps-section{background: #000;}
.steps-section h2{font-size: 40px;}
.steps-section .step-number{font-size: 40px; line-height: 1;}
.steps-card{background: #003967; border-radius: 24px;}
.steps-card .step-txt{font-size: 24px;}
.whatsapp-num{font-size: 40px; text-decoration: none; line-height: 48px;}
.border-end-custom {border-right: 1px solid rgba(255,255,255,0.2);}
.brands-grid{display: flex; position: relative; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;}
.brands-grid .brand-img{position: relative; float: left; display: block;  object-fit: contain; object-position: center; padding: 0 7px;}
.title-brands{font-size: 14px;}
.owl-init .item img{display: flex; width: 100%; height: 42px; object-fit: contain; object-position: center; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;}
.btn-petcop{color: #003967; border-color: #003967; font-size: 16px}

.bg-lavender{background-color: #C2B4FA; border-radius: 24px;}
.text-dark-blue{color: #003967;}
.btn-dark-blue{background-color: #003967;border: none; transition: transform 0.2s;}
.btn-dark-blue:hover{transform: scale(1.05); background-color: #001a33;}
.section-title-puntos{color: #002D57;font-size: 2.2rem;}
.step-icon{width: 45px;height: 45px;object-fit: contain;}
.puntos-icon-top{width: 60px;}
.sello-puntos-badge{display: block; margin: auto; width: 120px;}
.tyc-text{font-size: 0.75rem;line-height: 1.2;}
.video-container{border: 8px solid white;border-radius: 2rem;}
.steps-list-puntos span{color: #002D57;font-size: 1.1rem;}





/* Estilo personalizado para el éxito de carga */
.toast-success-custom {
    background-color: #008145 !important; /* Verde Gabrica */
    color: white !important;
    border: none;
    border-radius: 8px;
    min-width: 300px;
}

.toast-success-custom .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Hace la X blanca */
}

.toast-success-custom .bi-check-circle {
    font-size: 1.2rem;
}

/* Posicionamiento del Toast */
.toast-container {
    z-index: 2000 !important; /* Por encima de cualquier modal */
}

.toast-success-custom {
    background-color: #008145 !important;
    color: white !important;
    border-radius: 12px;
    border: none;
}

/* Ajuste para que el segundo modal se vea sobre el primero */
#confirmCancelModal {
    background: rgba(0, 0, 0, 0.5);
}








.alert-info-custom {
    background-color: #f0f7ff;
    border: 1px solid #cce3ff;
    color: #0056b3;
}

.border-dashed {
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease;
}

.dropzone-area:hover, .dropzone-area.dragover {
    border-color: #002D57;
    background-color: #f8f9fa;
}

.file-item {
    background: #f8f9fa;
    border: 1px solid #eee;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cursor-pointer { cursor: pointer; }

/* Estilo para simular el diseño de la imagen del archivo cargado */
.file-icon-box {
    background: #e9ecef;
    padding: 8px;
    border-radius: 8px;
    margin-right: 12px;
}



.dragover-active {
    background-color: #f0f8ff !important;
    border: 2px dashed #002D57 !important;
    transform: scale(1.02);
}
#dropzone {
    transition: all 0.3s ease;
    cursor: pointer;
}
#dropzone.bg-light {
    transform: scale(1.02);
    border-style: solid !important;
}


.file-item { transition: all 0.2s ease; }


.route-card{
    display:inline-block;
    padding:20px 25px;
    background:white;
    border-radius:18px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
    max-width:100%;
    animation:fadeUp .8s ease;
}




/*********************** RESPONSIVE **************************/

@media (max-width: 768px) {
   .steps-section .step-number,.whatsapp-num,.section-title-puntos,.steps-section h2,.display-6{font-size: 20px;}
   .steps-card .step-txt{font-size: 18px;}
   .brands-grid .brand-img{padding: 0 20px;}
   .img-fan{width: 60%!important;}
   .btn-petcop,.btn-gab{font-size: 14px;width: 100%;}
   .puntos-icon-top{width: 50px;}    
   .sello-puntos-badge{width: 94px;}
   .steps-list-puntos ul li{margin-bottom: 0.6rem !important;}
   .buttoners .col-auto{width: 100%;}
   .coljuegos img:first-child{width: 100%!important;}
   .fs-5{font-size: 18px!important}
   .hero-section h1{font-size: 15px;}
}

@media only screen and (min-width: 768px) and (max-width: 1367px){
    .steps-section .step-number,.whatsapp-num,.section-title-puntos,.steps-section h2,.display-6{font-size: 24px;}
    .steps-card .step-txt{font-size: 18px;}
    .brands-grid .brand-img{padding: 0 20px;}
    .img-fan{width: 60%!important;}
    .btn-petcop,.btn-gab{font-size: 14px;}
    .puntos-icon-top{width: 50px;}    
    .sello-puntos-badge{width: 94px;}
    .steps-list-puntos ul li{margin-bottom: 0.6rem !important;}
}