/*==================================================
RUN4HEALTH 2026
RESPONSIVE
==================================================*/

@media (max-width:767px){

    .container{

        width:100%;
        max-width:360px;

        padding-left:15px;
        padding-right:15px;

    }

    section{

        overflow:hidden;

    }
	
	/*==================================================
HEADER MOBILE
==================================================*/

.top-bar{

    display:none;

}

.navbar{

    padding:12px 0;

}

.navbar .container{

    display:flex;

    align-items:center;

    justify-content:center;

}

.logo{

    width:160px;

}

.logo img{

    width:100%;

    height:auto;

}

.menu{

    display:none;

}

.menu-toggle{

    display:none;

}
	
/*==================================================
HERO MOBILE
==================================================*/

.hero{

    background:#143787;

}

.hero-banner{

    position:relative;

    background:#143787;

    overflow:hidden;

}

.hero-container{

    width:100%;
    max-width:360px;

    margin:0 auto;

    position:relative;

}

.hero-desktop{

    display:none;

}

.hero-banner-mobile{

    display:block;

    width:100%;

    height:auto;

}

.hero-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

}

.hero-logo{

    position:absolute;

    width:120px;
    height:auto;

    left:50%;
    top:18px;

    transform:translateX(-50%);

}

.hero-slogan{

    position:absolute;

    width:230px;
    height:auto;

    left:50%;
    top:82px;

    transform:translateX(-50%);

}

.hero-info{

    background:#FFFFFF;

    padding:0 20px 35px;

}

.hero-info .hero-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.hero-mascot{

    display:flex !important;

    justify-content:center;

    align-items:flex-start;

    width:100%;

    height:auto;

    margin-top:-72px;

    margin-bottom:8px;

    position:relative;

    left:0 !important;

    z-index:20;

    overflow:visible;

}

.hero-mascot img{

    display:block;

    width:190px;

    aspect-ratio:auto;

    height:auto !important;

    max-height:none !important;

    object-fit:contain;

    flex:none;

}

.hero-content{

    width:100%;

    margin:0;

    padding-top:10px;

}

.hero-content h2{

    font-size:24px;

    line-height:30px;

    margin-bottom:10px;

}

.hero-content p{

    width:100%;

    font-size:15px;

    line-height:24px;

    margin-bottom:20px;

}

.hero-content .btn-inscribete{

    width:230px;

    margin:0 auto;

}
	
/*==================================================
EVENTO MOBILE
==================================================*/

.evento{

    padding:30px 0;

}

.evento .container{

    padding:0;

}

.evento-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:28px;

}

.evento-item{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.evento-item img{

    width:58px;

    height:auto;

    margin-bottom:10px;

}

.evento-item h3{

    margin:0 0 8px;

    font-size:18px;

    font-weight:700;

    line-height:1.2;

    color:#0B2F7F;

}

.evento-item span{

    display:block;

    margin-bottom:4px;

    font-size:16px;

    font-weight:600;

    color:#333333;

}

.evento-item p{

    margin:0;

    font-size:15px;

    line-height:1.35;

    color:#444444;

}

.evento-categorias{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:10px;

}

.evento-categorias span{

    width:58px;

    height:32px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

    color:#FFFFFF;

}

.evento-categorias .k2{

    background:#2D63C3;

}

.evento-categorias .k5{

    background:#49C7E5;

}

.evento-categorias .k10{

    background:#FDB913;

}
	
	/*==================================================
PRECIOS MOBILE
==================================================*/

.precios{

    padding:45px 0;

}

.precios-logo{

    width:140px;

    margin:0 auto 15px;

}

.precios-titulo{

    font-size:24px;

    gap:8px;

    margin-bottom:25px;

}

.precios-titulo i{

    font-size:28px;

}

.precio-card{

    width:100%;

    max-width:330px;

    min-height:auto;

    padding:22px 20px 24px;

    border-radius:24px;

}

.precio-badge{

    right:15px;

    top:-10px;

    font-size:10px;

    padding:5px 12px;

}

.precio-top{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.precio-info{

    margin-bottom:18px;
	width:100%;

}

.precio-info h3{

    font-size:22px;

}

.precio-info span{

    font-size:14px;

}

.precio-valor{


    display:block;

    margin-top:18px;

    text-align:center;

    font-size:72px;	

}

.precio-valor small{

    font-size:28px;

}

.precio-card hr{

    margin:16px 0;

}

.precio-regular{

    font-size:17px;

}

.precio-incluye{

    text-align:center;

    font-size:14px;

}

.precio-lista li{

    font-size:14px;

    margin-bottom:10px;

}

.btn-precio{

    height:48px;

    font-size:16px;

    margin-top:20px;

}
	
	/*==================================================
RETIRO MOBILE
==================================================*/

.retiro{

    padding:45px 0;

}

.retiro-title{

    font-size:38px;

    line-height:1.1;

    margin-bottom:25px;

}

.retiro-content{

    width:100%;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:20px;

}

.retiro-mascota{

    width:160px;

}

.retiro-mascota img{

    width:160px;

    height:auto;

}

.retiro-info{

    width:100%;

}

.retiro-info h3{

    font-size:28px;

    margin-bottom:12px;

}

.retiro-info p{

    font-size:15px;

    line-height:26px;

}


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

.galeria{

    padding:50px 0;

}

.galeria-titulo{

    font-size:34px;

    line-height:1.15;

    margin-bottom:25px;

}

.galeria-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.galeria-item{

    border-radius:18px;

}

.galeria-item img{

    width:100%;

    height:auto;

    border-radius:18px;

}


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

.footer{

    text-align:center;

}

.footer img{

    width:100%;

    height:auto;

}
	

/*==================================================
PASO 1 BANNER MOBILE
==================================================*/

.form-banner picture{

    display:block;

}

.form-banner picture img{

    width:100%;

    height:auto;

    display:block;

}

.form-banner{

    position:relative;

}

.form-banner-text{

    position:absolute;

    top:28px;

    left:50%;

    transform:translateX(-50%);

    width:220px;

    text-align:center;

    z-index:50;

}

.form-banner-text h1{

    margin:0;

    font-size:34px;

    line-height:1.05;

    font-weight:800;

    color:#FFF;

}

.form-banner-text p{

    margin:14px 0 0;

    font-size:15px;

    line-height:18px;

    color:#FFF;

}

/*==================================================
PASO 1 - PASOS MOBILE
==================================================*/

.form-pasos{

    padding:30px 0 25px;

}

.form-pasos .container{

    max-width:360px;

}

.form-pasos h2{

    margin:0 0 20px;

    text-align:center;

    font-size:28px;

    font-weight:800;

    line-height:1.1;

    color:#143787;

}

.pasos-grid{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.paso{

    width:100%;

    min-height:78px;

    border-radius:10px;

    padding:14px 18px;

    display:flex;

    align-items:center;

    position:relative;

}

.paso-activo{

    background:#0B3D82;

    color:#FFFFFF;

}

.paso:not(.paso-activo){

    background:#4BC2DB;

    color:#143787;

}

.numero{

    font-size:28px;

    font-weight:800;

    line-height:1;

    width:34px;

    margin-right:10px;

    opacity:.35;

    flex-shrink:0;

}

.paso img{

    width:42px;

    height:auto;

    margin-right:8px;

    flex-shrink:0;

}

.paso span{

    display:block;

    font-size:13px;

    line-height:1.2;

    font-weight:700;
	
	padding-top:2px;

}

.nota{

    margin:10px auto 0;

    text-align:center;

    font-size:12px;

    line-height:1.35;

    color:#555;

    max-width:320px;

}

/*==================================================
PASO 1 - FORMULARIO MOBILE
==================================================*/

.form-box{

    padding:25px 0 40px;

}

.form-box .container{

    max-width:360px;

}

.box-gris{

    padding:18px 15px 28px;

    border-radius:18px;

}

.titulo-paso{

    width:170px;

    height:44px;

    margin:0 auto 20px;

    border-radius:22px;

    font-size:18px;

    line-height:44px;

    text-align:center;

}

.terminos{

    max-height:240px;

    font-size:13px;

    line-height:1.45;

}

.acepta{

    margin:18px 0 25px;

    font-size:13px;

}

.datos-personales h3,
.facturacion h3{

    font-size:24px;

    margin-bottom:18px;

}

.form-box .row{

    --bs-gutter-x:0;

    --bs-gutter-y:14px;

}

.form-box .col-md-3,
.form-box .col-md-4,
.form-box .col-md-6,
.form-box .col-md-12{

    width:100%;

    max-width:100%;

    flex:0 0 100%;

}

.form-box label{

    font-size:13px;

    margin-bottom:6px;

}

.form-control,
.form-select{

    height:46px;

    font-size:15px;

}

.correo-notificacion{

    margin:20px 0;

}

.facturacion-opciones{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:18px;

}

.boton-formulario{

    margin-top:28px;

    text-align:center;

}

.btn-continuar{

    width:100%;

    max-width:300px;

    height:50px;

    font-size:16px;

    border-radius:25px;

    margin:0 auto;

}	
	
/*==================================================
PASO 2 MOBILE
==================================================*/
	
/*==================================================
PASO 2 - CABECERA / CATEGORÍAS
==================================================*/

.step2-titulo{

    font-size:34px;

    line-height:1.08;

    margin:5px 0 12px;

}

.step2-subtitulo{

    width:100%;

    margin:0 auto 30px;

    font-size:15px;

    line-height:24px;

}

.step2-superior{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:28px;

}

.step2-left,
.step2-right{

    width:100%;

}

.step2-left{

    order:1;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.step2-right{

    order:2;

    justify-content:center;

}

.step2-left h3{

    font-size:28px;

    margin-bottom:22px;

    text-align:center;

}

.categoria-item{

    width:220px;

    margin:0 auto 18px;

}

.categoria-precio{

    font-size:20px;

}

.categoria-pill{

    width:56px;

    height:32px;

    font-size:17px;

}

.tabla-tallas{

    width:320px;

    margin:0 auto;

}

.tabla-tallas img{

    width:100%;

}

.step2-talla{

    width:100%;

    margin-top:28px;

    text-align:center;

}

.step2-talla h3{

    font-size:28px;

    margin-bottom:16px;

}

.step2-talla .form-select{

    width:280px;

    margin:0 auto;

}

.step2-descripcion{

    width:100%;

    margin:30px auto 40px;

    font-size:15px;

    line-height:24px;

    text-align:center;

}
	
/*==================================================
PASO 2 - MOBILE
TABLA / TALLA / DESCRIPCIÓN
==================================================*/

.step2-superior{

    display:flex;

    flex-direction:column;

}

.step2-left{

    order:1;

}

.step2-right{

    order:2;

    width:100%;

    display:flex;

    justify-content:center;

    margin:18px 0 10px;

}

.step2-right img{

    width:320px;

    max-width:100%;

    border-radius:22px;

}

.step2-talla{

    order:3;

    width:100%;

    text-align:center;

    margin-top:20px;

}

.step2-talla h3{

    font-size:30px;

    margin-bottom:16px;

}

.step2-talla .form-select{

    width:290px;

    height:56px;

    margin:0 auto;

    font-size:22px;

    border-radius:30px;

}

.step2-descripcion{

    order:4;

    width:90%;

    margin:28px auto 40px;

    text-align:center;

    font-size:16px;

    line-height:1.35;

}
	
/* Reordenar solo en móvil */

.step2-superior{

    display:flex;
    flex-direction:column;

}

.step2-right{

    order:2;

}

.step2-left{

    display:flex;
    flex-direction:column;

}

.step2-left .step2-talla{

    order:99;

    margin-top:25px;

}

.step2-left .step2-descripcion{

    order:100;

    margin-top:25px;

}

.step2-left > *:not(.step2-talla):not(.step2-descripcion){

    order:1;

}
	

/*==================================================
CUPÓN MOBILE
==================================================*/

.step2-cupon{

    width:100%;

    margin:35px auto;

}

.cupon-card{

    width:100%;

    padding:25px 20px;

    border-radius:24px;

    box-sizing:border-box;

}

.cupon-header h2{

    font-size:28px;

    line-height:1.1;

    text-align:center;

    margin-bottom:12px;

}

.cupon-header p{

    font-size:15px;

    line-height:22px;

    text-align:center;

    margin-bottom:22px;

}

.cupon-body{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.cupon-body .form-control{

    width:100%;

    height:52px;

    border-radius:28px;

    font-size:16px;

    box-sizing:border-box;

}

.cupon-body button{

    width:100%;

    height:52px;

    border-radius:28px;

}

.mensaje-cupon{

    margin-top:15px;

    text-align:center;

    font-size:14px;

}
	
	
/*==================================================
VALORES INSCRIPCIÓN - MOBILE
==================================================*/

.step2-valores{

    width:100%;

    margin:45px 0;

}

.step2-valores h2{

    font-size:30px;

    line-height:1.1;

    text-align:center;

    margin-bottom:22px;

}

.valores-grid{

    display:flex;

    justify-content:center;

}

.precio-card-horizontal{

    display:block;
	
	width:320px;

    max-width:100%;

    margin:0 auto;

    position:relative;

    border-radius:24px;

    overflow:hidden;

    text-align:center;

}

/*------------------------------------
ANULAR ESTILOS DESKTOP
------------------------------------*/

.precio-left,
.precio-right{

    float:none !important;

    width:100% !important;

}

/*------------------------------------
TEXTO
------------------------------------*/

.precio-left{

    width:100%;

    padding:28px 22px 0 22px;

}

.precio-left h3{

    margin:0 0 8px;

    font-size:26px;

    line-height:1.05;

}

.precio-left span{

    display:block;

    margin-top:8px;

    font-size:15px;

    line-height:1.3;

}

/*------------------------------------
PRECIO
------------------------------------*/

.precio-right{

    width:100%;

    text-align:right;

    padding:15px 22px 20px 22px;

    font-size:60px;

}

.precio-right small{

    font-size:30px;

    vertical-align:super;

}

/*------------------------------------
FOOTER
------------------------------------*/

.precio-footer{

    clear:both;

    padding:16px 18px;

    text-align:center;

    font-size:16px;

    font-weight:700;

    line-height:1.25;

}

/*------------------------------------
BADGE
------------------------------------*/

.precio-badge{

    position:absolute;

    top:6px;

    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    font-size:11px;

    padding:4px 14px;

    border-radius:20px;

}
	

/*==================================================
BANCOS - MOBILE
==================================================*/

.step2-pagos{

    width:100%;

    margin:45px 0;

}

.step2-pagos h2{

    font-size:30px;

    line-height:1.1;

    text-align:center;

    margin-bottom:24px;

}

.pagos-grid{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:22px;

}

.banco-card{

    width:320px;

    max-width:100%;

    border-radius:24px;

    overflow:hidden;

}

.banco-header{

    height:72px;

}

.banco-header img{

    max-width:170px;

    max-height:38px;

}

.banco-body{

    padding:20px;

    text-align:center;

}

.banco-body h3{

    font-size:18px;

    margin-bottom:6px;

}

.tipo-cuenta{

    font-size:14px;

    margin-bottom:12px;

}

.numero-cuenta{

    font-size:24px;

    margin-bottom:14px;

}

.banco-body p{

    font-size:14px;

    line-height:22px;

    margin-bottom:12px;

}

.banco-body small{

    display:block;

    width:100%;

    font-size:12px;

    line-height:18px;

    white-space:normal;

    overflow-wrap:break-word;

    word-break:normal;

}
	
/*==================================================
PAYPAL - MOBILE
==================================================*/

.step2-paypal{

    width:100%;

    margin:45px 0;

}

.paypal-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:26px;

    padding:0;

    background:transparent;

    box-shadow:none;

}

.paypal-info{

    width:100%;

    text-align:center;

    margin:0;

}

.paypal-info h2{

    font-size:24px;

    line-height:1.2;

    margin-bottom:16px;

}

.paypal-info p{

    width:100%;

    max-width:300px;

    margin:0 auto;

    font-size:14px;

    line-height:1.45;

}

.paypal-pago{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.paypal-logo{

    width:170px;

    margin:0 0 20px;

}

.paypal-pago .form-select{

    width:320px;

    max-width:100%;

    height:54px;

    border-radius:28px;

    font-size:18px;

    margin-bottom:18px;

}

#btnContinuarPago{

    background:none;

    border:none;

    padding:0;

}

#btnContinuarPago img{

    width:120px;

    display:block;

}
	
	
/*==================================================
INFORMACIÓN IMPORTANTE - MOBILE
==================================================*/

.step2-informacion{

    width:100%;

    margin:45px 0 25px;

}

.info-card{

    width:100%;

    padding:0;

    background:transparent;

    border-radius:0;

    box-shadow:none;

}

.info-linea{

    text-align:center;

    font-size:15px;

    line-height:1.6;

    margin:0 auto 30px;

    max-width:320px;

}

.info-linea strong{

    display:block;

    margin-top:6px;

    font-size:22px;

    font-weight:800;

    color:#17377F;

    word-break:break-word;

}

.info-bloque{

    margin-bottom:35px;

}

.info-bloque h3{

    text-align:center;

    font-size:24px;

    font-weight:800;

    color:#17377F;

    margin-bottom:18px;

}

.info-bloque ul{

    list-style:none;

    padding:0;

    margin:0;

}

.info-bloque li{

    position:relative;

    padding-left:18px;

    margin-bottom:14px;

    font-size:14px;

    line-height:1.6;

}

.info-bloque li::before{

    content:"–";

    position:absolute;

    left:0;

    top:0;

    color:#17377F;

    font-weight:700;

}

.info-bloque strong{

    color:#17377F;

    font-weight:700;

    word-break:break-word;

}

.info-bloque.gris{

    opacity:1;

}

.info-bloque.gris h3{

    color:#6B789D;

}

.info-bloque.gris li{

    color:#6B789D;

}

.info-bloque.gris li::before{

    color:#6B789D;

}

.info-bloque.gris strong{

    color:#17377F;

    font-weight:700;

}
	
	
	
	.selector-ciudad{

    padding:45px 0 60px;

}

.selector-header{

    margin-bottom:35px;

}

.selector-header h1{

    font-size:34px;

}

.selector-header p{

    font-size:17px;

    padding:0 15px;

}

.ciudades-grid{

    grid-template-columns:1fr;

    gap:30px;

}

.ciudad-card img{

    height:220px;

}

.ciudad-body{

    padding:25px;

}

.ciudad-body h2{

    font-size:30px;

}

.lugar{

    font-size:18px;

}

.ciudad-body p{

    font-size:16px;

}

.btn-ciudad{

    display:block;

    width:100%;

    padding:15px;

}


/*=========================================
TÉRMINOS - MOBILE
=========================================*/

.terminos-card{

    padding:5px 0px 5px;

}

.terminos-scroll{

    width:100%;

    height:180px;          /* antes 290px */

    padding:16px;

    font-size:14px;

    line-height:1.7;

    overflow-y:auto;

    overflow-x:hidden;

    box-sizing:border-box;

}	
	
}