body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*cursor: url(../img/logo_cursor.png), auto;*/
}

html{
    scroll-behavior: smooth;
}

h1,h3,h2,h4,p,span{
    cursor: default;
}

.contenti {
    position: relative;
    z-index: 1;
    color: white;
}

/*flecha de banner*/
.arrow-down {
    position: absolute;
    bottom: 20px; /* Ajusta la distancia desde el borde inferior del banner */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* Asegúrate de que esté por encima del banner */
    animation: bounce 1.5s infinite; /* Agrega un efecto animado opcional */
}

.arrow-down img {
    width: 50px; /* Tamaño de la flecha, ajusta según tu diseño */
    opacity: 0.8; /* Transparencia ligera para integrarla mejor */
}

@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -10px); /* Ajusta el movimiento */
    }
}

/**/

/*estilo y efecto de titulo que hay abajo del banner en inicio*/
.contenido {
    font-family: 'MiTipografia9', sans-serif;
    font-size: 80px;
    line-height: 1;
    color: white;
    padding-top: 200px;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 50vh; /* Ajusta la altura según tus necesidades */
    opacity: 0; /* Inicialmente oculto */
    transform: translateY(20px) scale(0.8); /* Inicialmente trasladado hacia abajo y reducido */
    transition: opacity 1s ease, transform 1s ease; /* Transición suave */
    text-align: center;
}

.contenido.visible {
    opacity: 1;
    transform: translateY(0) scale(1); /* Muestra con zoom */
}
/**/

/*cartillas*/
.tarjetas {
    width: 80%;
    padding-top: 300px;
    margin: auto;
    box-sizing: border-box;
}

.tarjetas-contenido {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.titulo-tarjetas {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align icon to the bottom */
    flex-wrap: nowrap; /* Prevent wrapping */
}

/*css para efecto hacia arriba */
.titulo-tarjetas {
    opacity: 0;
    transform: translateY(20px); /* Initial position for the animation */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Animation properties */
}

.titulo-tarjetas.visible {
    opacity: 1; /* Make visible */
    transform: translateY(0); /* Move to original position */
}/**/

.container {
    width: 100%;
    height: 4400px;
    margin: 0 auto;
    display: flex; /* Agrega flexbox para alinear el contenido */
    flex-direction: column; /* Alinea los elementos verticalmente */
    justify-content: center; /* Centra verticalmente el contenido */
    align-items: center; /* Centra horizontalmente el contenido */
}

.container-marcadores {
    display: flex;
    gap: 10px; /* Espacio entre los marcadores */
}

.container-marcadores a{
    text-decoration: none;
    color:rgb(255, 134, 41);
}

.container-marcadores a:hover{
    border:2px solid rgb(255, 50, 50);
    color:rgb(255, 50, 50);
    transition: 1s ease-out;
}

/*estilos para el contenido de las carjetas*/
.marker {
    font-family: 'MiTipografia5';
    font-size: 14px;
    border-radius: 20px !important;
    border:2px solid rgb(255, 134, 41);
    padding: 10px;
    border-radius: 5px;
    margin: 5px;
    margin-bottom: 30px;
    text-align: center;
    justify-content: center;
}

.card {
    width: 1150px;
    display: flex;
    align-items: center;
    background-color: white;
    margin: 25px 0;
    border-radius: 50px;
    margin-block-end: 80px;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card.show {
    opacity: 1;
    transform: translateY(0);
}

.card.hide {
    opacity: 0;
    transform: translateY(100px);
}

.card .content {
    padding: 40px;
    color: black;
    flex: 1;
}

.styled-text {
    font-family: 'MiTipografia5';
    background: linear-gradient(to right, #f8ad16, #ff5a01, #ff3d36);
    font-size: clamp(2.5rem, 7.1vw, 7.5rem);
    background-clip: text;
    color: transparent;
    position: relative;
    display: inline-block;
    margin: 0;
}

.small-text {
    font-size: 0.5em;
    color: black;
    position: absolute;
    bottom: 5px;
    right: 0;
    transform: translateY(20%);
}

.card .content h6 {
    font-family: 'MiTipografia9';
    margin: 0 0 50px;
    font-size: 25px;
}

.card .content p {
    text-align: justify;
    font-family: 'MiTipografia5';
    font-size: 1.25rem;
    margin: 0 0 50px;
}

.card .content a {
    text-decoration: none;
}

.boton {
    position: relative;
    padding: 10px 20px;
    background-color: white;
    color: black;
    border: 2px solid black;
    border-radius: 25px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    font-family: 'MiTipografia5';
    font-size: 1.25rem;
}

.texto {
    margin-right: 40px;
}

.boton .flecha {
    width: 20px;
    height: 20px;
    background-image: url("../img/lif.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -25px;
    transition: margin-left 0.3s ease-in-out;
}

.boton:hover .flecha {
    margin-left: 0;
}

.card .image {
    flex: 0 0 auto;
    height: 500px;
    max-width: calc(40% - 20px);
    margin-left: 20px;
    overflow: hidden; /* Oculta el excedente de la imagen */
}

.card .image img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Hace que la imagen ocupe todo el alto del contenedor */
    object-fit: cover; /* Ajusta la imagen para que cubra todo el contenedor, recortando lo que sobra */
    border-radius: 0 48px 48px 0;
}

/**/

.titulo-mentalidad{
    padding-bottom: 100px;
}


/******************************************MEDIA QUERIE PARA 480px*******************************/
@media (max-width: 480px) {
    header{
        width: 97% !important;
    }
    .t-media{
        font-size: 20px !important;
    }
    .arrow-down img {
        width: 50px; /* Tamaño de la flecha, ajusta según tu diseño */
    }
    .tarjetas {
        width: 80%; /* Ajustar el ancho al 100% del contenedor */
        padding-top: 150px; /* Reducir el padding superior para ajustarse mejor a pantallas pequeñas */
    }

    .tarjetas-contenido {
        flex-direction: column; /* Cambiar la dirección del flex a columna para que los elementos se apilen verticalmente */
        align-items: center; /* Centrar los elementos */
    }

    .titulo-tarjetas {
        justify-content: center; /* Centrar los títulos */
        align-items: center; /* Centrar los títulos */
        flex-wrap: wrap; /* Permitir que los elementos se envuelvan */
        text-align: center; /* Centrar el texto */
    }

    .text{
        width: 80%;
    }

    .titulo-tarjetas.visible {
        opacity: 1; /* Hacer visible */
        transform: translateY(0); /* Mover a la posición original */
    }
    .container {
        height: 3800px; /* Ajusta la altura automáticamente */
    }

    .container-marcadores {
        margin-top: -30px;
        flex-direction: column; /* Cambia la dirección del flexbox a columna */
        align-items: center; /* Centra los marcadores horizontalmente */
    }

    p{
        height: 35px;
        font-size: 12px !important;
        padding-top: 20px;
        padding-block-end: 25px;
    }

    .marker {
        width: 220px; /* Ajusta el ancho del marcador al 100% del contenedor */
        margin-bottom: 0px;
        box-sizing: border-box; /* Asegura que el padding y border estén incluidos en el ancho y alto */
    }

    .card {
        width: 100%; /* Ajusta el ancho de la tarjeta al 100% del contenedor */
        flex-direction: column; /* Cambia la dirección del flexbox a columna */
        padding: 10px; /* Reduce el padding para móviles */
        height: 500px;
        margin-bottom: 50px; /* Ajusta el margen inferior */
        
    }

    .card .content {
        padding: 0px;
        width: 85%;
        max-width: 100%; /* Establece el ancho máximo al 100% para contenido */
    }

    .card .image {
        max-width: 0%; /* Establece el ancho máximo de la imagen al 100% */
        margin-left: 0; /* Elimina el margen izquierdo de la imagen */
    }

    .card .image img {
        visibility: hidden;
        display: grid;
        margin: auto;
        height: auto; /* Ajusta la altura de la imagen automáticamente */
        border-radius: 5px; /* Ajusta el radio de borde de la imagen */
    }
    
    .p-media{
        height: 150px;
    }

    .boton {
        display: block;
        text-align: center;
        font-size: 12px; /* Ajusta el tamaño de fuente del botón */
        padding: 8px 16px; /* Ajusta el padding del botón */
    }

    .contenido {
        font-size: 30px; /* Ajusta el tamaño de fuente para móviles */
        padding-top: 100px; /* Ajusta el padding superior */
        height: 40vh; /* Ajusta la altura según tus necesidades */
    }

    .styled-text, .small-text {
        display: block;
        position: static;
        text-align: center;
        font-size: 25px; /* Ajustar el tamaño del texto según sea necesario */
        background: none;
        color: black;
        background: linear-gradient(to right, #f8ad16, #ff5a01, #ff3d36);
        background-clip: text;
        color: transparent;
    }

    .styled-text {
        padding-top: 20px;
    }

    .mostrador {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra las cartillas horizontalmente */
    }
    
    .cartilla {
        width: 100%; /* Asegura que las cartillas ocupen el 100% del ancho disponible */
        margin-bottom: 20px; /* Añade espacio entre las cartillas */
    }

    .c-media{
        width: 350px !important;
    }

    .overlay-cartilla .mensaje{
        font-size: 12px !important;
    }
    
    .circle {
        display: none; /* Oculta los divs del cursor animado */
    }

    .mountain-8{
        height: 50% !important;
        top: 60% !important;
    }
    .mountain-7{
        width: 70% !important;
        height: 40% !important;
    }
    .mountain-4{
        height: 20% !important;
    }
    .mountain-3{
        display: none;
    }
}


/******************************************MEDIA QUERIE PARA 480px*******************************/
@media (min-width: 481px) and (max-width: 600px) {
    .tarjetas {
        width: 90%;
        padding-top: 150px;
        margin: auto;
    }

    .card {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrar los ítems horizontalmente */
        justify-content: center; /* Centrar los ítems verticalmente */
        padding: 10px;
        box-sizing: border-box;
    }

    .card .content, .card .image {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        text-align: center; /* Centrar el contenido de texto */
    }

    .card .content p {
        font-size: 14px;
        margin: 20px 0 20px;
    }

    .card .content a {
        font-size: 14px;
    }

    .card .image img {
        width: 100%;
        height: auto;
        padding-top: 0px;
    }

    .card .image {
        display: none;
    }

    .container-marcadores {
        display: flex;
        flex-wrap: wrap; /* Permite que los marcadores se vayan abajo cuando exceden el ancho */
        justify-content: center; /* Centra los marcadores en el contenedor */
    }

    .container {
        padding-top: 800px;
        height: 2100px;
    }

    .container-marcadores .marker {
        flex: 1 1 auto;
        min-width: 45%; /* Asegura que los marcadores ocupen al menos el 45% del ancho */
        box-sizing: border-box;
        margin: 5px 0; /* Espaciado vertical entre los marcadores */
        text-align: center; /* Centra el contenido de los marcadores */
    }

    .contenido {
        font-size: 40px;
        text-align: center; /* Centra el contenido de texto */
    }

    .titulo {
        font-size: 60px;
        text-align: center; /* Centra el contenido de texto */
    }

    .icono {
        width: 50px !important;
        display: block;
        margin: 0 auto; /* Centra el icono */
    }

    /*contenido mentalidad*/
    .contenido-mentalidad {
        padding-top: 1000px !important;
        text-align: center; /* Centra el contenido de texto */
    }

    .parrafo-derecha {
        font-size: 14px !important;
        text-align: center; /* Centra el contenido de texto */
    }

    .texto-izquierda h3 {
        font-size: 30px !important;
        text-align: center; /* Centra el contenido de texto */
    }
}