.f-18{
	font-size: 18px !important;
}

.default-font {
	font-family: 'Montserrat-Bold' !important;
}

.default-regular-font {
	font-family: 'Montserrat-Regular' !important;
}

.myriad-font {
	font-family: 'Myriad-Pro-Regular' !important;
}

.bg-black {
    background-color: #000 !important;
    color: white !important; 
}

.bg-red {
    background-color: rgb(255, 88, 93) !important;
    color: white !important; 
}

.bg-orange {
	background-color: rgb(232, 119, 34) !important;
}

.bg-blue {
	background-color: rgb(48, 127, 226) !important;
}

.bg-light-blue {
	background-color: rgb(91, 194, 231) !important;
}

.bg-aqua-green {
	background-color: rgb(0, 164, 153) !important;
}

.bg-green {
	background-color: rgb(67, 176, 42) !important;
}

.bg-lemon-green {
	background-color: rgb(196, 214, 0) !important;
}

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

.color-black {
	color: black !important;
}

.color-orange {
	color: rgb(232, 119, 34) !important;
}

.color-red {
	color: rgb(255, 88, 93) !important;
}

.color-blue {
	color: rgb(48, 127, 226) !important;
}

.color-light-blue {
	color: rgb(91, 194, 231) !important;
}

.color-aqua-green {
	color: rgb(0, 164, 153) !important;
}

.color-green {
	color: rgb(67, 176, 42) !important;
}

.color-lemon-green {
	color: rgb(196, 214, 0) !important;
}

.img-desafio {
    width: 100%;
    max-width: 350px;  /* ajustable */
    position: relative;
    transform: translateY(65px); /* aquí ajustas cuánto baja la imagen */
    z-index: 1;
}

.img-crea-cuenta {
    width: 100%;
    position: relative;
    transform: translateY(65px); /* aquí ajustas cuánto baja la imagen */
    z-index: 1;
}

.badge,
button {
    z-index: 5; /* asegura que se vean sobre la imagen */
}

.circulo {
    width: 20px;
    height: 20px;
    background-color: #78ff00; /* o el color que quieras */
    border-radius: 50%;
    position: absolute;
}

.rodillo {
    width: 60px;
    height: 20px;
    background-color: #78ff00; /* o el color que quieras */
    border-radius: 999px;
    position: absolute;
}

.ge-circulo {
    width: 20px;
    height: 20px;
    background-color: #78ff00; /* o el color que quieras */
    border-radius: 50%;
    position: absolute;
}

.ge-rodillo {
    width: 60px;
    height: 20px;
    background-color: #78ff00; /* o el color que quieras */
    border-radius: 999px;
    position: absolute;
}

.ge-rectangulo {
    width: 180px;
    height: 22px;
    background-color: #78ff00;
    border-radius: 999px;      /* Redondeo perfecto */
    position: absolute;
}

.l-rodillo {
    width: 120px;
    height: 20px;
    background-color: #78ff00; /* o el color que quieras */
    border-radius: 999px;
    position: absolute;
}

.big-rodillo {
    width: 100px;
    height: 20px;
    background-color: #78ff00; /* o el color que quieras */
    border-radius: 999px;
    position: absolute;
}

.rectangulo {
    width: 180px;
    height: 22px;
    background-color: #78ff00;
    border-radius: 999px;      /* Redondeo perfecto */
    position: absolute;
}

.rectangulo_grueso {
    width: 250px;
    height: 28px;
    background-color: #78ff00;
    border-radius: 999px;      /* Redondeo perfecto */
    position: absolute;
}

.cuadrado {
    width: 27px;
    height: 19px;
    background-color: #78ff00;
    border-radius: 999px;      /* Redondeo perfecto */
    position: absolute;
}


.btn-desafio {
    background: linear-gradient(90deg, #ff00ff 0%, #ff4ff8 100%);
    color: #fff !important;
    font-weight: 700;
    padding: 14px 38px 14px 32px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;       /* 🔥 Para que nunca salte de línea */
    min-width: 320px;          /* Ajusta para que el texto entre cómodo */
   	z-index: 5;
}

.btn-desafio:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(255, 0, 255, 0.6);
    text-decoration: none;
}

.btn-desafio svg {
    transition: transform 0.2s ease;
}

.btn-desafio:hover svg {
    transform: translateX(4px);
}

.btn-crea-cuenta {
    background: linear-gradient(90deg, #3caf32 0%, #59ee4c 100%);
    color: #fff !important;
    font-weight: 700;
    padding: 14px 38px 14px 32px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(75, 218, 60, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;       /* 🔥 Para que nunca salte de línea */
    min-width: 320px;          /* Ajusta para que el texto entre cómodo */
   	z-index: 5;
}

.btn-crea-cuenta:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(75, 218, 60, 0.4);
    text-decoration: none;
}

.btn-crea-cuenta svg {
    transition: transform 0.2s ease;
}

.btn-crea-cuenta:hover svg {
    transform: translateX(4px);
}

/* Círculos concéntricos */
.figura-circulos {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: relative;
    border: 4px solid #ff00ff;
}

.figura-circulos::before,
.figura-circulos::after {
    content: "";
    position: absolute;
    border: 4px solid #ff00ff;
    border-radius: 50%;
}

.figura-circulos::before {
    inset: 15px;
}

.figura-circulos::after {
    inset: 35px;
}

/* Rectángulos */
.figura-rect {
    width: 40px;
    height: 120px;
}

.bg-lime { background-color: #c9d700; }
.bg-green { background-color: #3caf32; }

/* Semicírculos */
.figura-semicircle {
    width: 80px;
    height: 120px;
    border-radius: 100px 0 0 100px;
}

.figura-semicircle-right {
    width: 80px;
    height: 120px;
    border-radius: 0 100px 100px 0;
}

.bg-lightblue { background-color: #57c2f8; }
.bg-blue { background-color: #1d74db; }

/* Flecha */
.flecha {
    width: 120px;
    height: 120px;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 40% 40%, 40% 100%, 0 100%);
    background-color: #e74c3c;
}

.btn-publica-desafio {
    /*background: linear-gradient(90deg, #d60303 0%, #ff0000 100%);*/
    color: #fff !important;
    font-weight: 700;
    padding: 10px 10px 10px 10px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    text-transform: uppercase;
    /*box-shadow: 0 4px 15px rgba(255, 68, 68, 0.6);*/
    /*transition: transform 0.15s ease, box-shadow 0.15s ease;*/
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;       /* 🔥 Para que nunca salte de línea */
   	z-index: 5;
}

.btn-menu-desafio {
    background: linear-gradient(90deg, #d60303 0%, #ff0000 100%);
    color: #fff !important;
    font-weight: 700;
    padding: 10px 10px 10px 10px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;       /* 🔥 Para que nunca salte de línea */
   	z-index: 5;
}

.btn-menu-desafio:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.6);
    text-decoration: none;
}

.btn-menu-desafio svg {
    transition: transform 0.2s ease;
}

.btn-menu-desafio:hover svg {
    transform: translateX(4px);
}

.bg-duoc-green {
	background: rgb(194, 213, 0) !important; 
}

.toggle-eye {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    color: #000;
}

.img-grid {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 6px;
}

.small-img {
    max-width: 120px;  /* controla el tamaño de la imagen */
    margin: 0 auto;     /* centra la imagen dentro de la columna */
    display: block;
}

.img-fija {
    width: 230px;   /* el mismo ancho que tenía small-img */
    height: auto;
}

.btn-ver-desafios {
    background: rgb(237, 86, 82);
    color: #fff !important;
    font-weight: 700;
    padding: 8px 38px 8px 32px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;       /* 🔥 Para que nunca salte de línea */
    min-width: 120px;          /* Ajusta para que el texto entre cómodo */
}

.btn-descargar {
    background: rgb(194, 213, 0);
    color: black !important;
    font-weight: 700;
    padding: 8px 38px 8px 32px;
    font-size: 18px;
    border: none;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;       /* 🔥 Para que nunca salte de línea */
    min-width: 120px;          /* Ajusta para que el texto entre cómodo */
}

.img-wrapper {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: visible;   /* ✔ permite que salga en desktop */
}

/* ----------- DESKTOP ----------- */
.big-img {
    position: absolute !important;
    width: 430px !important;
    top: -160px !important;
    left: -26% !important;
    max-width: 2000px;
    
}


/* ----------- MOBILE FIX ----------- */
@media (max-width: 768px) {
    .img-wrapper {
        height: auto;          /* deja que se adapte */
        overflow: hidden;      /* evita que salga */
    }

    .big-img {
        position: relative !important;    /* ✔ elimina "flotar sobre cosas" */
        width: 280px !important;           /* ✔ que se adapte al móvil */
       	max-width: 300px !important;
        top: -2px !important;
        left: 100% !important;
        transform: none !important;
    }
    
    .ge-rodillo {
    	display:none;
    }
    
    .ge-rectangulo {
    	display:none;
    }
    
    .ge-circulo {
    	display:none;
    }
}

/* CONTENEDOR PRINCIPAL */
.hero-section {
    position: relative;
    width: 100%;
    height: 520px;
    background: #000;
    overflow: hidden;
}

/* TEXTO IZQUIERDO */
.hero-content {
    position: absolute;
    left: 70px;
    z-index: 10;
}

.hero-content h1 {
    font-size: 60px;
    line-height: 1.1;
    font-weight: 800;
    color: white;
}

.hero-content span {
    display: block;
}

/* IMAGEN DE PERSONAS */
.hero-people {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    z-index: 5;
}

/* HIGHLIGHT AMARILLO */
.highlight-yellow {
    background: #ffee00;
    padding: 6px 20px;
    border-radius: 25px;
    color: #000;
}

/* DASHES */
.dash-white,
.dash-red {
    display: inline-block;
    width: 45px;
    height: 12px;
    border-radius: 50px;
    margin-left: 10px;
}

.dash-white {
    background: white;
}

.dash-red {
    background: #ed5652;
    margin-right: 10px;
}

/* INDICADORES CIRCULARES */
.hero-dots {
    position: absolute;
    bottom: 40px;
    right: 80px;
    display: flex;
    gap: 15px;
}

.hero-dots span {
    width: 18px;
    height: 18px;
    border: 3px solid white;
    border-radius: 50%;
    display: inline-block;
}

/* Altura del slide */
.hero-section {
    position: relative;
    width: 100%;
    height: 460px; /* aumenta si la imagen es grande */
    background: #000;
    overflow: visible !important;
}

/* La imagen debe "salir" del contenedor */
.hero-people {
    position: absolute;
    bottom: -60px;  /* empuja la imagen hacia afuera */
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    z-index: 50; /* por encima del slide */
    pointer-events: none;
}