/* ================= TIPOGRAFÍAS ================= */

@font-face {
    font-family: 'Helvetica-Now';
    src: url('fonts/HelveticaNowDisplay/HELVETICANOWDISPLAY.TTF') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Helvetica-Now-Bold';
    src: url('fonts/HelveticaNowDisplay/HELVETICANOWTEXTEXTRABOLD.TTF') format('truetype');
    font-weight: 800;
}

@font-face {
    font-family: 'Helvetica-Now-Light';
    src: url('fonts/HelveticaNowDisplay/HELVETICANOWTEXTLIGHT.TTF') format('truetype');
    font-weight: 300;
}

.text { font-family: 'Helvetica-Now'; }
.text-bold { font-family: 'Helvetica-Now-Bold'; }
.text-light { font-family: 'Helvetica-Now-Light'; }

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

:root {
    --verde-fuerte:#073e1e;
    --verde-claro:#e1f80d;
    --blanco:#fffcf3;

    --title-left-size:120px;
    --title-right-size:280px;

    --bold:'Helvetica-Now-Bold';
    --light:'Helvetica-Now-Light';
    --regular:'Helvetica-Now';
}

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

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

html,body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}



.menu {
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 0;
    width: 100px;
    height: 100px;
    z-index: 999;
}

/* El SVG completo */
.hamburger {
    width: 80%;
    cursor: pointer;
    transition: 0.3s;
}

/* Todas las líneas: que roten respecto a su centro */
.hamburger rect {
    transition: transform 0.4s ease, opacity 0.3s ease, x 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}

/* 🟡 HOVER SOLO CUANDO NO ESTÁ ACTIVO */
.hamburger:not(.active):hover #line1 {
    transform: translateX(100px);
}
.hamburger:not(.active):hover #line2 {
    transform: translateX(-100px);
}
.hamburger:not(.active):hover #line3 {
    transform: translateX(100px);
}

/* 🔴 ESTADO ACTIVO: convertir en X */

/* Centramos y rotamos la línea 1 */
.active #line1 {
    /* De su posición original (y ~352 centro) a centro (~540): +188px aprox */
    transform: translateX(-60px) translateY(190px) rotate(45deg);
    fill: var(--verde-fuerte);
}

/* La del medio desaparece */
.active #line2 {
    opacity: 0;
}

/* Centramos y rotamos la línea 3 */
.active #line3 {
    /* De su posición original (y ~727 centro) a centro (~540): -187px aprox */
    transform: translateY(-188px) rotate(-45deg);
    fill: var(--verde-fuerte);
}


.menu-list
{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top:0;
    left: 0;
    background-color: var(--verde-claro);
    z-index: 11;
    transform: translateX(-100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boton-menu {
    cursor: pointer;
    font-size: 100px;
    color: var(--verde-fuerte);
    font-family: 'Helvetica-Now-Bold';
    
    display: inline-block;  /* necesario para que scale funcione correctamente */
    transform-origin: center;
    
    animation: ungrowText 0.2s forwards ease-out; /* estado inicial */
    line-height: 1;
}

/* Cuando el usuario pasa el mouse */
.boton-menu:hover {
    animation: growText 0.2s forwards ease-out;
}

/*Sistema de Scroll*/

main
{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.section
{
    position: absolute;
    height: 100vh;
}
.home
{
    width: 200vw;
    z-index: 1;
}

.mentoria
{
    width: 100vw;
    height: 100vh;
}

.contenedor_home
{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contenedor_mentoria
{
    width: 100%;
    height: 100%;
    position: relative;
}


.texto-home
{
    position: absolute;
    top: 140px;
    left: 50px;
    display: flex;
    flex-direction: column;
    line-height: .8;
    font-family: var(--regular);
    font-size: 170px;
    color: var(--blanco);
    text-transform: uppercase;
    z-index: 2;
    opacity: 0;
    transform: translateX("-100%");
    animation: fadeInToRight 1s forwards;
}
.icon-scroll
{
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 11;
}
.texto-joss
{
    position: absolute;
    top: 160px;
    left: 750px;
    display: flex;
    flex-direction: column;
    line-height: .8;
    font-family: var(--bold);
    font-size: 250px;
    color: var(--verde-fuerte);
    text-transform: uppercase;
    z-index: 2;
}
.lava-top
{
    width: 900px;
    height: 900px;
    position: absolute;
    top: -200px;
    left: 600px;
    z-index: 1;
}
.img-joss
{
    height: 90%;
    object-fit: contain;
    position: absolute;
    left: 390px;
    bottom: 0px;
    z-index: 2;
}

.text-servicios {
    position: absolute;
    left: 1600px;
    opacity: 0;        /* invisible al inicio */
    transform: translateY(-50px); /* un poco arriba */
    transition: transform 0.2s linear, opacity 0.2s linear;
}
.text-servicios a
{
    text-decoration: none;
    font-family: var(--bold);
    font-size: 190px;
    color: var(--blanco);
}
.servicio-1 { top: 100px; }
.servicio-2 { top: 260px; }
.servicio-3 { top: 430px; }


.lava
{
    position: absolute;
    bottom: -300px;
    left: -100px;
    width: 800px;
    height: 800px;
    z-index: 3;
}
/*Backgrounds*/

.bg-verde-fuerte
{
    background-color: var(--verde-fuerte);
}
.bg-verde-claro
{
    background-color: var(--verde-claro);
}
.bg-blanco
{
    background-color: var(--blanco);
}

.texto_mentoria
{
    font-size: 100px;
    font-family: var(--bold);
    position: absolute;
    color: var(--verde-fuerte);
    transform: translateX(-200%);
}

.texto_mentoria_1
{
    left: 50px;
    top: 90px;
}

.texto_mentoria_2
{
    left: 50px;
    top: 165px;
}

.texto_mentoria_3
{
    left: 50px;
    top: 240px;
}
.texto_mentoria_4
{
    left: 50px;
    top: 315px;
}

.img-mentoria
{
    width: 140px;
    object-fit: contain;
    position: absolute;
    opacity: 0;
    transform: translateY(-150px);
    transition: opacity .4s ease, transform .6s cubic-bezier(.15,.5,.15,1);
}
.img-mentoria.caer {
    opacity: 1;
    transform: translateY(0);
}
.boton-cta
{
    cursor: pointer;
    width: 350px;
    height: auto;
    background-color: var(--verde-fuerte);
    border: 1px solid var(--blanco);
    color: var(--blanco);
    z-index: 999;
    font-family: var(--bold);  
    font-size: 20px;
    padding: 10px 25px;
    border-radius: 10px;
}
.img-mentoria-1
{
    top: 50px;
    right: 550px;
}

.img-mentoria-2
{
    top: 130px;
    right: 350px;
}
.img-mentoria-3
{
    top: 530px;
    right: 570px;
}

.img-mentoria-4
{
    bottom: 140px;
    right: 350px;
}
.img-mentoria-5
{
    top: 450px;
    right: 30px;
}
.img-mentoria-6
{
    bottom: 30px;
    right: 50px;
}
.img-mentoria-7
{
    bottom: 430px;
    right: 50px;
}
.img-mentoria-8
{
    bottom: 50px;
    left: 550px;
}
.img-mentoria-9
{
    bottom: 290px;
    right: 250px;
}
.img-mentoria-10
{
    bottom: 200px;
    left: 300px;
}

.contenedor-botones-menu
{
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    z-index: 999;
    height: 45px;
}
@keyframes openMenu {
    0%
    {
        transform: translateX(-100%);
    }
    100%
    {
        transform: translateX(0%);
    }
}

@keyframes closeMenu {
    0%
    {
        transform: translateX(0%);
    }
    100%
    {
        transform: translateX(-100%);
    }
}

@keyframes growText {
    0%
    {
        transform: scale(1);
    }
    100%
    {
        transform: scale(1.3);
    }
}
@keyframes ungrowText {
    0%
    {
        transform: scale(1.3);
    }
    100%
    {
        transform: scale(1);
    }
}

@keyframes fadeInToRight {
    0%
    {
        opacity: 0;
        transform: translateX("-100%");
    }    
    100%
    {
        opacity: 1;
        transform: translateX("0%");
    }
}