html {
    scroll-behavior: smooth;
  }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'PPEditorial';
    src: url('/font/Titles/PPEditorialNew-Regular.otf') format('opentype');
    font-weight: 400;
  }
  
@font-face {
    font-family: 'PPEditorial';
    src: url('/font/Titles/PPEditorialNew-Ultralight.otf') format('opentype');
    font-weight: 200;
  }

@font-face {
    font-family: 'LibreFranklin';
    src: url('/font/Monse/LibreFranklin-Light.ttf') format('opentype');
    font-weight: 200;
  }

@font-face {
    font-family: 'LibreFranklin';
    src: url('/font/Monse/LibreFranklin-Regular.ttf') format('opentype');
    font-weight: 500;
  }

@font-face {
    font-family: 'LibreFranklin';
    src: url('/font/Monse/LibreFranklin-SemiBold.ttf') format('opentype');
    font-weight: 600;
  }

@font-face {
    font-family: 'Merry';
    src: url('/font/Monse/Merriweather_48pt-Regular.ttf') format('opentype');
    font-weight: 500;
  }


@font-face {
    font-family: 'Merry';
    src: url('/font/Monse/Merriweather_48pt-Bold.ttf') format('opentype');
    font-weight: 800;
  }



:root{
    /* VARIABLES TIPOGRAFIA */

    --fontFamily-Body: 'Inter', sans-serif;
    --fontFamily-Title: 'PPEditorial', serif;

    --fontWeight-Light:200;
    --fontWeight-Regular:400;
    --fontWeight-Bold:700;

   
    --lineHeight-Heading: 110%;
    --lineHeight-Body:145%;


     /* VARIABLES COLOR */

    --clr-primary-500:#0C3AC3;
    
    --clr-neutral-100:#FFFCF2;
    --clr-neutral-500:#F7F4E6;
    --clr-neutral-700:#333333;
    --clr-neutral-900:#0A0A0A;


     /* VARIABLES SOMBRAS */

     --soft-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.10);
     --hard-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);



}

body{
    font-family: var(--fontFamily-Body);
    font-weight: var(--fontWeight-Regular);
    color: var(--clr-primary-500);
    position: relative;
    overflow-x: hidden;
    background-color: var(--clr-neutral-100);
    
       
}

a{
    text-decoration: none;
    display: inline-block;
    color: var(--clr-primary-500);

}



img{
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}


.link{
    padding-bottom: 4px;
    transition: all 1200ms ease;
  
}

.onhoverLink:hover{
    text-decoration: underline;
    text-underline-offset: 4.5px;
    text-decoration-thickness: .08em;


}

.link:hover{
    text-decoration: underline;
    text-underline-offset: 4.5px;
    text-decoration-thickness: .08em;


}

.underline{
    text-decoration: underline;
    text-underline-offset: 4.5px;
    text-decoration-thickness: .08em;

}

.weight{
    font-weight: var(--fontWeight-Bold);
}

ul{
    list-style: none;
}

h1{
    font-size: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
    font-family: var(--fontFamily-Title);
    text-align: center;
    font-weight: 400;
}

h2{
    font-size: clamp(2.25rem, 1.9022rem + 1.7391vw, 3.25rem);
    font-family: var(--fontFamily-Title);
    text-align: center;
    font-weight: 400;
    line-height: 1.2;
    max-width: 24ch;
    text-wrap: pretty;
}

h3{
    font-size: clamp(1.75rem, 1.5761rem + 0.8696vw, 2rem);
    font-family: var(--fontFamily-Title);
    text-align: center;
    font-weight: 400;
    line-height: 1.3;
    max-width: 28ch;
    text-wrap: pretty;
}

p{
    line-height: 1.45;
    text-wrap: pretty;
}

.wrapper{
    margin-inline: auto;
    width: min(920px, calc(100% - 2rem));
}

header{
    min-height: 90dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    
}


nav{
    width: fit-content;
    display: flex;
    justify-content: center;
    padding-block: .4rem;
    opacity: 0;
}


nav ul{
    display: flex;
    gap:  clamp(1.5rem, 1.1087rem + 1.9565vw, 2.625rem);
}

nav ul li a{
    padding: 1rem;
}

.heroSection{
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    align-items: center;
    transform: translateY(40px);
    margin: auto 0;

    & h1{
        opacity: 0;
    }

    & p{
        opacity: 0;
    }
}

.heroDescription{
    max-width: 40ch;
    font-size: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
    line-height: 145%;
    text-align: center;
}


.enlaceTrabajos{
  margin-top: auto; /* 👈 empuja el link al fondo */
  padding-bottom: 1rem; /* aire visual */

  & a{
    opacity: 0;
  }

}


.galeriaTrabajos{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(430px, 100%), 1fr));
    gap: 4.2rem 3.4rem;
    margin-bottom: 6rem;
}

.trabajos{
    padding-block-start: 1.3rem;
}

.trabajosDescription{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
    margin-block-end:5rem;

    & p{
        max-width: 52ch;
    }
}

.extraTitle{
    display: flex;
    gap: 8px;
    align-items: center;
}

.cardTrabajo:nth-last-child(3){
    grid-column: span 2;
}



.cardTrabajo{
    background-color: var(--clr-neutral-500);
    padding: 0.75rem;
    border-radius: 1.25rem;
    height: fit-content;
    box-shadow: -5px 5px 3px rgba(0, 0, 0, 0.03), -3px 3px 3px rgba(0, 0, 0, 0.1), -1px 1px 2px rgba(0, 0, 0, 0.17), 0px 0px 1px rgba(0, 0, 0, 0.19);
    transition: all 0.3s ease;
    cursor: none;

}

.cardTrabajo:hover{
    box-shadow: -96px 127px 64px rgba(0, 0, 0, 0.01), -54px 71px 54px rgba(0, 0, 0, 0.05), -24px 32px 40px rgba(0, 0, 0, 0.08), -6px 8px 22px rgba(0, 0, 0, 0.1);
}

.cursor {
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 999px;
    padding: 0.375rem 0.75rem;
    transition: all 200ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + 15px), -50%);
    border-radius: 1.75rem;
    background: rgba(149, 146, 132, 0.30);
    backdrop-filter: blur(20px);
    font-size: 1.125rem;
    font-family: var(--fontFamily-Body);
    font-weight: 200;
    color: #FFF;
    transition: all ease-out 220ms;
    z-index: 10;
  }




  .hover {
   opacity: 1;
   display: inline-flex;
   clip-path: inset(0 0 0 0);
  }


footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 8rem;
}

.footerEnlaces ul{
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.footerContent p{
    font-size: clamp(1.75rem, 1.3587rem + 1.9565vw, 2.875rem);
}

.textoDecorado{
    font-family: var(--fontFamily-Title);
    font-weight: 200;
}

.cardTrabajo--Img{
    border-radius: 10px;
    overflow: hidden;


}

.cardTrabajo--Description{
    padding-block: 1rem;
    padding-inline: 4px;
}

.caption{
    font-size: 0.875rem;
    font-weight: 700;
}

.mainPerfil{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
    margin-block-start: 6rem;
}


.me{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6rem;
    width: 100%;
}



.mePhoto{
    max-width: 310px;
    position: relative;
    overflow: hidden;
}

.mePhoto img{
    overflow: hidden;
    border-radius: 999px 999px 0 0;
}

.mePhoto svg{
    position: absolute;
    right: 10px;
    top: 15px;
}

.meDescripcion{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transform: translateY(30px);
    font-size: 1.125rem;
}

.meDescripcion p{
    max-width: 46ch;
    
}


.habilidades ul{
    margin-block-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}



.principios{
    background-color: var(--clr-neutral-500);
    border-radius: 0.875rem;
    padding: 5rem 5rem 8rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 10rem;
}


.contenedorPrincipios{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-block-start: 4rem;
    gap: 4rem;
    
}

.itemPrincipio{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    text-wrap: pretty;

    & p{
        max-width: 28ch;
    }
}


.mainContacto{
    min-height: 90dvh;
    gap: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 2rem;
    font-size: 1.75rem;
    /* transform: translateY(-40px); */
}

.mail{
    font-size: clamp(1.5rem, 0.6739rem + 4.1304vw, 3.875rem);
    font-family: var(--fontFamily-Title);
    font-weight: 400;
    line-height: 1.3;
}


.contactoLinkedin{
    display: inline-flex;
    align-items: center;
}


.contactoMail{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.iconCopy{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

  /* Estilo para el custom alert */
  .customAlert {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(0%) translateY(100%); /* Inicialmente fuera de la vista */
    padding: 0.625rem 1.5rem;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    background: #0C3AC3;
    border-radius: 1.75rem;
    color: #FFF;
    font-size: 1.125rem;
    font-weight: 300;
    transition: transform 0.5s ease-in-out; /* Animación para la aparición y desaparición */
    z-index: 9999; /* Asegura que esté sobre otros elementos */
  }




.sectionContainer{

    display: flex;
    flex-direction: column;
    gap: 16rem;


}

.wrapperProyectoSmall{
    margin-inline: auto;
    width: min(1024px, calc(100% - 4rem));
}

.wrapperProyectoLarge{
    margin-inline: auto;
    width: min(1280px, calc(100% - 2rem));
}

.headerProyecto{
    display: flex;
    flex-direction: column;
    padding-top: 5.5rem;
    gap: 4rem;
    opacity: 0;
    margin-block-start: 2rem;
}

.proyectTitle{
    align-self: center;
    max-width: 38rem;
}

.proyectContent{
    display: flex;
    gap: 12rem;
}

.project-meta li{
    display: flex;
}



.pProyect{
    line-height: 1.50;
    text-wrap: pretty;
    font-size: 1.125rem;
    max-width: 46ch;
   
}

.pProyectRoma{
    line-height: 1.50;
    text-wrap: pretty;
    font-size: 1.125rem;
    max-width: 42ch;
   
}

.details{
    flex-grow: 1;
    display: flex;
}

.project-meta{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;


    & li{
        display: flex;
        justify-content: space-between;
        padding-block: .8rem;
        border-bottom: 1px solid #AFC3FF;

   
    }

    & li:first-child{
        padding-top: 0;
    }
}

.imagenProyecto{

    & img{
        aspect-ratio: 16/9;
        border-radius: 38px;
        object-fit: cover;
    }
}

.imgSolucion img{
    border-radius: 38px;
    object-fit: cover;
}

.miniSection{
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.miniSectionXL{
    display: flex;
    flex-direction: column;
    gap: 6rem;
}


.headerText{
    display: flex;
    justify-content: space-between;

    & p{
        max-width: 42ch;
    }
}

.ilustracion{
    display: flex;
    justify-content: flex-end;
}

.ilustracion img{
    max-width: 320px;
    margin-right: 12rem;
}

.centerh3{
    align-self: center;
}



.headerTextCenter{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    & p{
        max-width: 52ch;
        text-align: center;
    }
}

.ventajas{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(430px, 100%), 1fr));
    gap: 1.75rem;
}

.ventajaCard{
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 1.5rem;
    background-color: #FFFCF2;
    padding: 2.625rem;
    box-shadow: 0 0.29px 0.87px 0 rgba(0, 0, 0, 0.12), 0 1.643px 3.48px 0 rgba(0, 0, 0, 0.05);

    & h4{

        font-size: 1.125rem;

    }

    & p{
        font-size: 1rem;
    }
}




.Listmax-width{

     flex: 0 0 auto;

    & li{
          padding-block: 1.5rem;
    }

    & span{
            font-size: 1.2rem;
            
    
        }

    }



.styles{
    padding: 4rem;
    border-radius: 38px;
    background: linear-gradient(180deg, #FAF8F4 0%, rgba(255, 255, 255, 0.00) 14.96%, rgba(250, 248, 244, 0.00) 72.37%);
    display: flex;
    flex-direction: column;
    gap: 8rem;
}


.tipografia{
    display: flex;
}


.fontVentajas{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.fontVentajas li{
    display: flex;
    align-items: center;
    font-size: 2rem;
    color: #2C6590;
    font-weight: 300;
    gap: .5rem;
    padding: 1rem;

    & img{
        max-width: 42px;
    }
}


.uiElementos{
    display: flex;
     gap: 1.5rem;
}


.uiIzquierda{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.uiCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-xl{
    gap: 3rem;
}


.pantallas{
    display: flex;
    flex-direction: column;
    gap: 5rem;
}



.impacto{
   
    padding-block: 0 8rem;
}

.impactoFondo{
     background: linear-gradient(180deg, #FAF6EA 0%, #FFFCF2 104.49%);
     padding-block-start: 8rem;

}

p.maxLenght{
    max-width: 36ch;
}

.dashboard{
    margin-block-end: 12rem;
}

.impactos{
    margin-block-start: 2.5rem;
    border: 1px solid #AFC3FF;
    padding-inline: 1.5rem;
    border-radius: 12px;
}

.navProyectos{
    margin-block-start: 6rem;
    display: flex;
    gap: 4rem;


    & a{
        flex-grow: 1;
        font-size: 1.5rem;
        font-weight:500;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        justify-content: center;
        padding: 1.5rem;
        border-radius: 999px;
        border: 2px solid transparent;
        transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        
    }


    & a:hover {
                border-color: var(--clr-primary-500);
                font-weight:700;
        }
}


.Iconarrow{
    max-width: 2rem;
}

.contextOtto-text{

    & h3{
         text-align: left;
         margin-bottom: .6rem;
    }
   
}

.contextOtto{
    display: flex;
    justify-content: space-between;

    & img{
        max-width: 480px;
    }
}

.flex-endImg{
    align-self: flex-end;
}

.usuariosOtto{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-block-start: 2rem;
}


.opinionOtto{
    background-color: #EEF3F6;
    padding: 2rem;
    border-radius: 1.25rem;
    position: relative;


    & p{
        color: #111214;
        font-size: 1.125rem;
        font-weight: 400;
    
    }
}

.opinionOtto:last-child {
    background-color: transparent;
}

.chatbox{
    max-width: 22px;
    position: absolute;
  
}

.chatbox01{
    top: -23px;
    right: 30px;
}

.chatbox02{
    bottom: -23px;
    right: 30px;
    transform: rotate(180deg) scaleX(-1);
}


.chatbox03{
    bottom: -23px;
    right: 30px;
    transform: rotate(180deg);
}

p.ottoparrafo{
    max-width: 42ch;
}

.journeyGrid{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.descritionJorney{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.perfil{
    grid-column: span 2;

    & p{
        max-width: 54ch;
    }
}

.boxJourney{
    padding: 2rem;
    background-color: #F1F5F8;
    color: #111214;
    font-size: 14px;
    border-radius: 20px;
}

.subheading{
    font-size: 13px;
    font-weight: var(--fontWeight-Bold);
}

.ottoCaption{
    font-size: 1rem;
    color:#111214;
    padding: 3px 15px;
    border-radius: 999px;
    border: 1px solid #111214;
    width: fit-content;
}

.ottoEncuestas{
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.ottoJourney{
    display: flex;
    flex-direction: column;
    gap:4rem;
    margin-block-start: 2rem;
    
}

.headerJourney{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;

    & p{
        color:#111214;
        font-size: 1rem;
        max-width: 48ch;
    }
}

.ottoHeuristic{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-block-start: 4rem;
}

.analisisImg{
    display: flex;
    flex-direction: column;
    align-items: center;

    & img{
        max-width: 600px;
    }
}


.pilares{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}

.cardPilar{
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: center;
    text-align: center;
    color: #23262E;
    border-radius: 2.6rem;
    background: linear-gradient(0deg, #EBEBEB 2.68%, rgba(255, 255, 255, 0.80) 99.93%);
    padding: 4rem 2em;
   
    & p{
        font-size: 1rem;
    }

    & p:first-child{
        font-weight: 600;
    }
}

.iconcardPilar{
    max-width: 6rem;
}

.contentcardPilar{
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.productoOtto{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:4rem
}

.moodOtto{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.moodOttoSpan{
    grid-column: span 2;
    
}

.modosContexto{
    
    display: flex;
    align-items: center;
    justify-content: center;


    & img{
        max-width: 52rem;
    }

}

.monseSolucion{
    border-radius: 42px;
    background: linear-gradient(180deg, #FAF8F4 0%, rgba(250, 248, 244, 0.00) 43.74%);
    padding: 5rem;
    align-items: center;
    
}

.descriptionDS{

    & p{
    font-family: 'LibreFranklin', 'Arial Narrow', Arial, sans-serif;
    color: #7D7D7D;
    font-size: 2.75rem;
    font-weight: 200;
    text-wrap: pretty;
    line-height: 1.3;
    }

    & strong{
    font-weight: 900;
    }

    & span{
        font-weight: 600;
    }
}

.principiosMonse{
    margin-block-start: 4rem;
}

.headerTextPrincipios{
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.number{
    font-family: 'Merry', Times, serif;
    color: #DADADA;
    font-size: clamp(3.5rem, 8vw, 9rem);
    font-weight: 900;
}

.principiosContainer{
    display: flex;
    gap: 1.3rem;
    margin-block-start: 1.5rem;



    & p{
        font-family: 'LibreFranklin', 'Arial Narrow', Arial, sans-serif;
        color: #FCFCFC;
        font-size: 1rem;
    }


    & .cardPrincipioTitle{
        font-size: 2rem;
        color: #FCFCFC;
        font-weight: 600;
    }
}

.Cardprincipio{
    border-radius: 12px;
    background: linear-gradient(291deg, #888 21.07%, #BEBEBE 97.12%);
    padding: 3rem 2rem;
    flex: 1;
}

.headerTextFoundations{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;


    
}

.descriptionDS{
    max-width: 54ch;
}

.foundationsMonse{
    font-family: 'LibreFranklin', 'Arial Narrow', Arial, sans-serif;
    color: #111111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rem;
    margin-block-start: 8rem;
}


.captionMonseContainer{
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-inline-start: 8rem;
}

.captionMonseContainerTipo{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.captionMonse{
    border: 1px solid black;
    border-radius: 999px;
    padding: 8px 24px;
    width: fit-content;
    height: fit-content;
    color: #111111;
}

.captionDescription{
    color: #111111;
    max-width: 36ch;
    text-wrap: pretty;
}

.coloresImgMonse{
    transform: translateY(-100px) translateX(80px);

}

.imagenMuestraColores{

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

    & img{
        max-width: 980px;
    }
    
}


.tipografiaMonse{
    margin-block-start: 6rem;
    width: min(1024px, calc(100% - 2rem));
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.escalaTipo{
    margin-block-start: 3rem;
}

.pesosTipo{
    display: flex;
    justify-content: space-between;
    margin-block-start: 3rem;
}

.imgMuestraPesos{
    max-width: 365px;
    margin-block-start: 5rem;
}

.espaciadoMonse{
    display: flex;
    gap: 7.5rem;
    margin-block-start: 4rem;
}

.contentEspaciado{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.iconografiaMonse{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    margin-block-start: 3rem;
}

.imgIconografia{
    max-width: 640px;
}

.libreriaMonse{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:4rem;
    margin-block-start: 8rem;
}

.imgesComponentes{
    max-width: 560px;
    transform: translateY(-4rem);
}

.CompsMonse{
    display: flex;
    gap: 7.5rem;
    margin-block-start: 6rem;
}

.documentacion{
    
    margin-block-start: 5rem;
}


.documentacionHeader{
    display: flex;
    align-items: flex-end;
    gap: 6rem;
}

.documentacionHeader{


    & .headerTextFoundations{
         display: flex;
         align-items: flex-start;
    }

    & .descriptionDS{
        text-align: left;
    }


    & .captionDescription{
    color: #111111;
    max-width: 42ch;
    text-wrap: pretty;
}


}

.documentacionImg{
    display: flex;
    gap: 8rem;
    margin-block-start: 6rem;

    & img{
        max-width: 500px;
    }
}


.webMonse{
    margin-block-start: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.webMonse01{
    margin-block-start: 4rem;
}

.webMonse02{
    max-width: 420px;
    margin-block-start: 8rem;
}

.finalMonse{   
        padding: 12rem 8rem 4rem 8rem;
        background: linear-gradient(180deg, #FAF8F4 0%, rgba(250, 248, 244, 0.00) 43.74%);
        margin-block-start: -8rem;
}

.imagenfinalMonse{
        margin-block-end: 18rem;
}

.imagenProyectoEspecial{

    & img{
        
        object-fit: cover;
    }
}


.headerTextSpecial{
    display: flex;
    justify-content: space-between;

    & p{
        max-width: 48ch;
    }
}


.imgSolucionAcade{
    display: flex;
    gap: 5rem;
  
}



.descansoAcade{
    background-color: #FCA5AE;
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.imgDescanso{
    margin-inline: auto;
    width: min(1024px, calc(100% - 2rem));
}

.otrasImgAcade{
    display: flex;
    flex-direction: column;
    gap: 4.6rem;
}


.headerTextCenter{


    & p.feelingparrafo{
        max-width: 58ch;
        text-align: center;
        margin-block-end: 4rem;
    }
}


.tipografiaFeeling{
    display: flex;
    gap: 5rem;
    align-items: center;
}

.paletaCromatica{
    margin-block-start: 6rem;
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.ejemploFeeling{
    display: flex;
    gap: 5rem;
    margin-block-start: 8rem;
}

.imgFeeling{
    max-width: 480px;
}

.ejemplofeeling{
    margin-block-start: 8rem;
}

.descansoFeeling{
    background: linear-gradient(135deg, #D2D6E0 5.89%, #F4F7FB 44.85%, #D6D8DC 99.53%);
    padding-top: 14rem;
}

.imgdescansoFeeling{

    margin-inline: auto;
    width: min(1080px, calc(100% - 2rem));

}




  

@media screen and (max-width: 62.5rem) {
    .galeriaTrabajos{
     
        grid-template-columns: 1fr;
       
     
    }

    .cardTrabajo:nth-last-child(3){
        grid-column: span 1;
    }

    
    footer{
        flex-direction: column;
        align-items: start;
        gap: 2.8rem;
        
    }

    .footerEnlaces ul{
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
    }


    .me{
        
        grid-template-columns: 1fr;
        justify-items: center
      
     
    }

    .contenedorPrincipios{
        display: grid;
        grid-template-columns: 1fr;
        margin-block-start: 4rem;
        gap: 4rem;
        
    }

    .mainPerfil h2{
        text-align: left;
        text-wrap: pretty;
     
    }

    .mainPerfil{
        
        gap: .5rem;
        margin-block-start: 6rem;
    }

    .mainContacto{
       
        gap: 2.4rem;
        font-size: 1.1rem;
      
    }
    
    .contactoMail{
        gap: .5rem;
    }

    .iconCopy{
        width: 24px;
    }

    .contactoLinkedin svg{
       height: 19px;
       width: 20px;
    }
    
    .principios{
        padding: 5rem 2rem 8rem 2rem;
    }


    .proyectContent{
    flex-direction: column;
    gap: 3rem;
    }

    .pProyectRoma{
    line-height: 1.50;
    text-wrap: pretty;
    font-size: 1.125rem;
    max-width: 62ch;
    }

    .proyectTitle{
    align-self: flex-start;
    max-width: 38rem;
    
    & h2{text-align: left;}
    }

    .headerProyecto{
    padding-top: 5.5rem;
    gap: 4rem;
    }

    .headerText{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;

    & p{
        max-width: 62ch;
    }

    & h3{
   
    text-align: left;

    }
    }

    
    .sectionContainer{

    display: flex;
    flex-direction: column;
    gap: 9rem;


    }

    .ilustracion{
    display: flex;
    justify-content: center;
    }

    .ilustracion img {
    max-width: 320px;
    margin-right: 0rem;
    }

    .ventajaCard{
    padding: 1.625rem;
   }

   

    .Listmax-width{

     flex: 0 0 auto;

    & li{
          padding-block: 1.5rem;
    }

    & span{
            font-size: 1rem;
            
    
        }

    }

    .styles{
    padding: 0rem;
    border-radius: 0px;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 6rem;
    }

    
    .tipografia{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .dashboard{
    margin-block-end: 4rem;
    }

    .impacto{
   
    padding-block: 4rem 2rem;
    }

    .navProyectos{
    margin-block-start: 6rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;

        
    & a{
        flex-grow: 1;
        font-size: 1rem;
        font-weight:500;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        justify-content: center;
        padding: 1rem;
        border-radius: 999px;
        border: 2px solid transparent;
        transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        border-color: var(--clr-primary-500);
        
    }




    }


    .centerh3{
    align-self: center;
    max-width: 18ch;
    }

    .imagenProyecto{

    & img{
        aspect-ratio: 16/13;
        border-radius:22px;
        object-fit: cover;
    }
    }


    .consecuenciaRoma{
        display: none;
    }

    .imgSolucion img {
    border-radius: 12px;

    }

    .uiElementos{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    }

    .headerTextSpecial{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;

    & h3{
        text-align: left;
    }

    }

    .imgSolucionAcade{
    display: flex;
    flex-direction: column;
    gap: 5rem;
    }

    .contextOtto {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
    }

    .monseSolucion {
    border-radius: 22px;
    background: none;
    padding: 0rem;
    align-items: center;

    }

    .principiosMonse {
    margin-block-start: 1rem;
    }

    .headerTextPrincipios {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
    }

    .descriptionDS {
    & p {
        font-family: 'LibreFranklin', 'Arial Narrow', Arial, sans-serif;
        color: #7D7D7D;
        font-size: 1.75rem;
        font-weight: 200;
        text-wrap: pretty;
        line-height: 1.3;
    }
    }


    .principiosContainer {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    margin-block-start: 2.5rem;
    }

    .Cardprincipio {
   
    padding: 1.5rem;
  
    }


    .foundationsMonse {
    font-family: 'LibreFranklin', 'Arial Narrow', Arial, sans-serif;
    color: #111111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    margin-block-start: 3rem;
    }

    .coloresImgMonse{
        display: none;
    }

    .captionMonseContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
    margin-inline-start: 0rem;
    }


    .coloresMonse{
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .tipografiaMonse {
    gap: 4rem;
    }

    .pesosTipo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-block-start: 3rem;
    }

    .espaciadoMonse {
    display: flex;
    flex-direction: column-reverse;
    gap: 2.5rem;
    margin-block-start: 4rem;
    }

    .CompsMonse {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-block-start: 6rem;
    }

    .documentacionHeader {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: flex-start;
    
    }

    .documentacionImg {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-block-start: 6rem;
    }

    .imagenfinalMonse {
        display: none;
    }

    .finalMonse {
    padding: 0rem 2rem 2rem 2rem;
    background: none;
    margin-block-start: -8rem;
    }

    .wrapperProyectoLarge {
    margin-inline: auto;
    width: min(1280px, calc(100% - 4rem));
    }

    .usuariosOtto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-block-start: 2rem;
    }

    .journeyGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    }

    .descritionJorney {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    }

    .perfil {
    grid-column: span 1;
    }

    .pilares {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    }

    .productoOtto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8rem;
    }

    .moodOtto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    }

    .moodOttoSpan {
    grid-column: span 1;
    }

    .tipografiaFeeling{
        flex-direction: column;
    }

    .ejemploFeeling{
        flex-direction: column;
    }

    .ejemplofeeling {
    margin-block-start: 2rem;
    }

}



.containerHotspot {
    position: relative; /* 💡 Necesario para ubicar puntos adentro */
    
}

.hotspot{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #4267D2;
    border-radius: 50%;
    cursor: pointer;

}

/* 💡 Recomendación: Un efecto de pulso para que se note que es interactivo */
.hotspot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse 2s infinite;
}

.tooltip {
    position: absolute;
    bottom: 150%; /* Lo posiciona arriba del punto */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(56, 52, 46, 0.8);
    color: white;
    padding:12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

/* ✅ Acción al hacer hover */
.hotspot:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0; }
}