/*==================================================
RUN4HEALTH 2026
TIMING ECUADOR
==================================================*/


/*==================================================
VARIABLES
==================================================*/

:root{

    --primary:#2054A5;
    --secondary:#153A82;
    --accent:#45C2D6;
    --warning:#EEB91E;

    --white:#FFFFFF;
    --black:#2F2F2F;
    --gray:#666666;
    --light:#F7F8FC;

}


/*==================================================
RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins', sans-serif;
    font-size:16px;
    line-height:1.6;
    color:var(--black);
    background:#FFFFFF;
    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;
    height:auto;

}

a{

    text-decoration:none;
    transition:.30s;

}

ul{

    list-style:none;
    margin:0;
    padding:0;

}


/*==================================================
CONTAINER
==================================================*/

.container{

    width:1280px;
    max-width:1280px;
    margin:0 auto;
    padding:0;

}


/*==================================================
TIPOGRAFIA
==================================================*/

h1{

    font-size:58px;
    font-weight:800;
    color:var(--secondary);

}

h2{

    font-size:42px;
    font-weight:800;
    color:var(--secondary);

}

h3{

    font-size:35px;
    font-weight:700;

}

p{

    font-size:16px;
    line-height:28px;

}

/*==================================================
BOTONES
==================================================*/

.btn-inscribete{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:238px;
    height:48px;

    background:var(--accent);

    color:#FFFFFF;

    border-radius:24px;

    font-size:16px;
    font-weight:700;

    transition:.30s;

}

.btn-inscribete:hover{

    background:var(--primary);
    color:#FFFFFF;

}


/*==================================================
TOPBAR
==================================================*/

.topbar{

    background:#2054A5;
    color:#FFFFFF;
    font-size:14px;
    padding:10px 0;

}

.topbar a{

    color:#FFFFFF;

}


/*==================================================
NAVBAR
==================================================*/

.navbar{

    background:#FFFFFF;
    padding:18px 0;
    box-shadow:0 2px 18px rgba(0,0,0,.06);

}

.navbar-brand img{

    height:62px;

}

.navbar-nav{

    gap:26px;

}

.nav-link{

    color:#333333;
    font-size:15px;
    font-weight:600;

}

.nav-link:hover{

    color:var(--primary);

}

.dropdown-menu{

    border:none;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.dropdown-item{

    padding:10px 18px;
    font-size:14px;

}

.dropdown-item:hover{

    background:#F7F8FC;
    color:var(--primary);

}

/*==================================================
UTILIDADES
==================================================*/

.text-center{

    text-align:center;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-50{

    margin-bottom:50px;

}

.pt-40{

    padding-top:40px;

}

.pb-40{

    padding-bottom:40px;

}

.py-80{

    padding-top:80px;
    padding-bottom:80px;

}


/*==================================================
HERO
==================================================*/

.hero{

    width:100%;
    overflow:hidden;
    background:#143787;

}

/*==================================================
CONTENEDOR
==================================================*/

.hero-container{

    width:1280px;
    margin:0 auto;
    position:relative;
    padding:0;

}

/*==================================================
BANNER
==================================================*/

.hero-banner{

    width:100%;
    /*background:#143787;*/

}



.hero-banner-bg{

    width:1280px;
    height:460px;
    display:block;

}

.hero-banner-mobile{

    display:none;

}

/*==================================================
LOGO RUN4HEALTH
==================================================*/

.hero-logo{
    position:absolute;
    width:251px;
    height:85px;

    left:154px;
    top:35px;

    z-index:20;
}

.hero-slogan{
    position:absolute;
    width:490px;
    height:187px;

    left:182px;
    top:155px;

    z-index:20;
}

/*==================================================
BLOQUE BLANCO
==================================================*/

.hero-info{

    background:#FFFFFF;

}

.hero-info .hero-container{

    display:flex;
    align-items:flex-start;
    position:relative;
    min-height:190px;

}

/*==================================================
MASCOTA
==================================================*/

.hero-mascot{

    width:332px;
    height:346px;
	left: 228px;

    margin-top:-115px;	

    position:relative;

    z-index:30;

    flex-shrink:0;

}

.hero-mascot img{

    width:332px;
    height:346px;
    display:block;

}

/*==================================================
TEXTO
==================================================*/

.hero-content{

    width:490px;

    margin-left:234px;

    padding-top:43px;

}

.hero-content h2{

    font-size:28px;

    font-weight:800;

    color:#153A82;

    line-height:34px;

    margin:0 0 12px;

}

.hero-content p{

    width:481px;

    font-size:16px;

    line-height:28px;

    color:#2F2F2F;

    margin:0;

}

/*==================================================
BOTON
==================================================*/

.hero-content .btn-inscribete{

    display:flex;

    justify-content:center;

    align-items:center;

    width:238px;

    height:48px;

    margin-top:32px;

    background:#45C2D6;

    color:#FFFFFF;

    border-radius:24px;

    font-size:16px;

    font-weight:700;

}

.hero-content .btn-inscribete:hover{

    background:#2054A5;

    color:#FFFFFF;

}

/*==================================================
EVENTO
==================================================*/

.evento{

    padding:70px 0;

    background:#F5F6F8 url("../img/bg-evento.png") center center no-repeat;

    background-size:cover;

}

.evento-box{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:45px;

}

.evento-item{

    flex:1;

    text-align:center;

}

.evento-item img{

    width:64px;

    margin:0 auto 20px;

}

.evento-item h3{

    margin-bottom:12px;

    font-size:22px;

    font-weight:700;

    color:#153A82;

}

.evento-item span{

    display:block;

    margin-bottom:6px;

    font-size:16px;

    font-weight:700;

    color:#333333;

}

.evento-item p{

    font-size:15px;

    line-height:25px;

    color:#666666;

}


/*==================================================
DISTANCIAS
==================================================*/

.evento-categorias{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:18px;

}

.evento-categorias span{

    display:flex;

    justify-content:center;

    align-items:center;

    width:78px;

    height:49px;

    border-radius:38px;

    color:#FFFFFF;

    font-size:35px;

    font-weight:700;

}

.k2{

    background:#2054A5;

}

.k5{

    background:#45C2D6;

}

.k10{

    background:#EEB91E;

}

/*==================================================
PRECIOS
==================================================*/

.precios{

    padding:90px 0 110px;
    background:#FFFFFF;

}

/*==================================================
CABECERA
==================================================*/

.precios-header{

    text-align:center;
    margin-bottom:40px;

}

.precios-logo{

    width:180px;
    margin:0 auto 18px;

}

.precios-titulo{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    font-size:28px;
    font-weight:700;
    font-style:italic;

    color:#153A82;

    margin:0;

}

.precios-titulo i{

    color:#2054A5;
    font-size:34px;

}

/*==================================================
CARD
==================================================*/

.precio-card{

    width:562px;
    min-height:513px;

    margin:0 auto;

    background:#45C2D6;

    border-radius:32px;

    position:relative;

    padding:26px 28px 24px;

    color:#FFFFFF;

}

/*==================================================
BADGE
==================================================*/

.precio-badge{

    position:absolute;

    right:18px;
    top:-12px;

    background:#2054A5;

    color:#FFFFFF;

    font-size:11px;
    font-weight:600;

    padding:5px 14px;

    border-radius:20px;

}

/*==================================================
PARTE SUPERIOR
==================================================*/

.precio-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

}

.precio-info h3{

    margin:0;

    font-size:24px;

    font-weight:700;

    font-style:italic;

    color:#FFFFFF;

}

.precio-info span{

    display:block;

    margin-top:4px;

    font-size:16px;

    font-style:italic;

    color:#DDF9FF;

}

.precio-valor{

    font-size:66px;

    font-weight:800;

    line-height:1;

    color:#FFFFFF;

}

.precio-valor small{

    font-size:34px;

    vertical-align:top;

}

/*==================================================
LINEAS
==================================================*/

.precio-card hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.45);

    margin:18px 0;

}

/*==================================================
PRECIO REGULAR
==================================================*/

.precio-regular{

    text-align:center;

    font-size:19px;

    font-style:italic;

    font-weight:700;

}

.precio-regular strong{

    font-weight:800;

}

/*==================================================
LISTA
==================================================*/

.precio-incluye{

    font-size:15px;

    margin-bottom:16px;

}

.precio-lista{

    margin:0;
    padding:0;

}

.precio-lista li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    font-size:15px;

    list-style:none;

}

.precio-lista i{

    font-size:14px;

    color:#FFFFFF;

}

/*==================================================
BOTON
==================================================*/

.btn-precio{

    width:100%;

    height:52px;

    margin-top:26px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#153A82;

    color:#FFFFFF;

    border-radius:26px;

    font-size:18px;

    font-weight:700;

}

.btn-precio:hover{

    background:#0E2C69;

    color:#FFFFFF;

}

/*==================================================
RETIRO DE KITS
==================================================*/

.retiro{

    background:#153A82;
     padding:35px 0 20px;
    overflow:hidden;

}

/*==================================================
CONTENEDOR
==================================================*/

.retiro-wrapper{

    width:100%;
    position:relative;

}

/*==================================================
TITULO
==================================================*/

.retiro-title{

    text-align:center;

    color:#FFFFFF;

    font-size:72px;

    font-weight:800;

    font-style:italic;

    line-height:1;

    margin-bottom:20px;

}

/*==================================================
CONTENIDO
==================================================*/

.retiro-content{

    width:760px;

    margin:0 auto;

    display:flex;

    align-items:center;

    gap:25px;

}

/*==================================================
MASCOTA
==================================================*/

.retiro-mascota{

    width:249px;

    flex-shrink:0;

}

.retiro-mascota img{

    width:249px;

    height:260px;

    display:block;

}

/*==================================================
INFORMACION
==================================================*/

.retiro-info{

    flex:1;

}

.retiro-info h3{

    margin:0 0 10px;

    color:#45C2D6;

    font-size:36px;

    font-weight:700;

    font-style:italic;

}

.retiro-info p{

    margin:0 0 14px;

    color:#FFFFFF;

    font-size:16px;

    font-weight:500;

    line-height:30px;

}


/*==================================================
GALERIA
==================================================*/

.galeria{

    padding:90px 0;

    background:#FFFFFF;

}

.galeria-titulo{

    text-align:center;

    font-size:58px;

    font-weight:800;

    font-style:italic;

    color:#153A82;

    margin-bottom:55px;

}

.galeria-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.galeria-item{

    overflow:hidden;

    border-radius:24px;

}

.galeria-item img{

    width:100%;

    height:308px;

    object-fit:cover;

    display:block;

    border-radius:24px;

    transition:.35s;

}

.galeria-item:hover img{

    transform:scale(1.03);

}


/*==================================================
FOOTER
==================================================*/

.footer{

    background:#FFFFFF;

}

.footer img{

    width:100%;

    display:block;

}

/*==================================================
EFECTOS
==================================================*/

.hero-logo,
.hero-slogan,
.evento-item,
.precio-card,
.galeria-item{

    transition:.30s ease;

}

.hero-logo:hover{

    transform:scale(1.02);

}

.hero-slogan:hover{

    transform:scale(1.02);

}

.evento-item:hover{

    transform:translateY(-5px);

}

.precio-card:hover{

    transform:translateY(-8px);

}

.galeria-item:hover img{

    transform:scale(1.05);

}


/*==================================================
FORMULARIOS
==================================================*/

.form-control,
.form-select{

    height:52px;

    border:1px solid #D8DDE6;

    border-radius:12px;

    padding:0 18px;

    font-size:15px;

    color:#444;

    box-shadow:none;

    transition:.30s;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--accent);

    box-shadow:none;

}

textarea.form-control{

    height:140px;

    padding:15px 18px;

    resize:none;

}

label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:var(--secondary);

}


/*==================================================
BOTONES GENERALES
==================================================*/

.btn-primary-custom{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:0 30px;

    height:46px;

    border-radius:30px;

    background:var(--primary);

    color:#FFFFFF;

    font-weight:700;

    transition:.30s;

}

.btn-primary-custom:hover{

    background:var(--secondary);

    color:#FFFFFF;

}

.btn-secondary-custom{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:0 30px;

    height:46px;

    border-radius:30px;

    background:var(--accent);

    color:#FFFFFF;

    font-weight:700;

    transition:.30s;

}

.btn-secondary-custom:hover{

    background:var(--primary);

    color:#FFFFFF;

}


/*==================================================
CARDS
==================================================*/

.card{

    border:none;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.card-body{

    padding:30px;

}


/*==================================================
TABLAS
==================================================*/

.table{

    margin-bottom:0;

}

.table thead{

    background:var(--secondary);

    color:#FFFFFF;

}

.table thead th{

    border:none;

    padding:15px;

}

.table td{

    vertical-align:middle;

}


/*==================================================
BADGES
==================================================*/

.badge{

    display:inline-block;

    padding:8px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

}

.badge-primary{

    background:var(--primary);

    color:#FFFFFF;

}

.badge-accent{

    background:var(--accent);

    color:#FFFFFF;

}

.badge-warning{

    background:var(--warning);

    color:#FFFFFF;

}


/*==================================================
SOMBRAS
==================================================*/

.shadow-sm{

    box-shadow:0 5px 15px rgba(0,0,0,.08)!important;

}

.shadow{

    box-shadow:0 10px 25px rgba(0,0,0,.12)!important;

}

.shadow-lg{

    box-shadow:0 20px 45px rgba(0,0,0,.18)!important;

}


/*==================================================
UTILIDADES
==================================================*/

.rounded-10{

    border-radius:10px;

}

.rounded-15{

    border-radius:15px;

}

.rounded-20{

    border-radius:20px;

}

.w-100{

    width:100%;

}

.text-primary-custom{

    color:var(--primary);

}

.text-secondary-custom{

    color:var(--secondary);

}

.text-accent{

    color:var(--accent);

}

.bg-primary-custom{

    background:var(--primary);

}

.bg-secondary-custom{

    background:var(--secondary);

}

.bg-accent{

    background:var(--accent);

}

.bg-light-custom{

    background:var(--light);

}

.fw-600{

    font-weight:600;

}

.fw-700{

    font-weight:700;

}

.fw-800{

    font-weight:800;

}


/*==================================================
TRANSICIONES
==================================================*/

a,
button,
img{

    transition:.30s ease;

}


/*==================================================
SELECTOR CIUDAD
==================================================*/

.selector-ciudad{

    padding:70px 0 90px;

    background:#F5F5F5;

}

.selector-header{

    text-align:center;

    margin-bottom:55px;

}

.selector-header h1{

    color:#17377F;

    font-size:52px;

    font-weight:800;

    margin-bottom:15px;

}

.selector-header p{

    color:#5E5E5E;

    font-size:22px;

}

.ciudades-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.ciudad-card{

    background:#FFF;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.30s;

}

.ciudad-card:hover{

    transform:translateY(-8px);

}

.ciudad-card img{

    width:100%;

    height:280px;

    object-fit:cover;

}

.ciudad-body{

    padding:35px;

    text-align:center;

}

.ciudad-body h2{

    color:#17377F;

    font-size:38px;

    font-weight:800;

    margin-bottom:10px;

}

.lugar{

    color:#53C9E9;

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

}

.ciudad-body p{

    font-size:18px;

    color:#555;

    margin-bottom:15px;

}

.btn-ciudad{

    display:inline-block;

    margin-top:10px;

    background:#17377F;

    color:#FFF;

    text-decoration:none;

    padding:15px 45px;

    border-radius:40px;

    font-size:18px;

    font-weight:700;

    transition:.30s;

}

.btn-ciudad:hover{

    background:#53C9E9;

    color:#FFF;

}


/*==================================================
TÉRMINOS Y CONDICIONES
==================================================*/

.step1-terminos{

    margin:40px 0;

}

.terminos-card{

    position:relative;

    /*background:#F3F3F3;*/

    border-radius:22px;

    padding:5px 35px 35px;

}

.paso-label{

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    background:#49C8E8;

    color:#FFF;

    font-size:22px;

    font-weight:700;

    padding:10px 34px;

    border-radius:30px;

    font-style:italic;

}

.terminos-scroll{

    background:#FFF;

    border:2px solid #D9D9D9;

    border-radius:12px;

    padding:20px;

    height:290px;

    overflow-y:auto;

    color:#404040;

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}

/* Scroll */

.terminos-scroll::-webkit-scrollbar{

    width:8px;

}

.terminos-scroll::-webkit-scrollbar-track{

    background:#EFEFEF;

    border-radius:20px;

}

.terminos-scroll::-webkit-scrollbar-thumb{

    background:#B8B8B8;

    border-radius:20px;

}

.terminos-scroll::-webkit-scrollbar-thumb:hover{

    background:#9B9B9B;

}

/*==================================================
FIN
==================================================*/