/* ======================================================
   HERO.CSS
   Sección principal del sitio
======================================================*/

    .hero{

        position:relative;

        width:100%;

        height:100vh;

        min-height:850px;

        display:flex;

        justify-content:center;

        align-items:center;

        overflow:hidden;

        background:
            linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.75)),
            url("../img/hero.jpg");

        background-size:cover;

        background-position:center;

        background-attachment:fixed;

    }


    /* Overlay violeta */

    .overlay{

        position:absolute;

        inset:0;

        background:radial-gradient(circle at center,
        rgba(123,53,204,.10),
        rgba(0,0,0,.55));

        z-index:1;

    }


    /* Luces teatrales */

    .hero::before{

        content:"";

        position:absolute;

        width:700px;

        height:700px;

        left:-250px;

        top:-220px;

        background:radial-gradient(circle,
        rgba(243, 179, 51, 0.555),
        transparent 70%);

        filter:blur(40px);

        animation:luzIzquierda 12s ease-in-out infinite;

        z-index:2;

    }

    .hero::after{

        content:"";

        position:absolute;

        width:700px;

        height:700px;

        right:-250px;

        top:-220px;

        background:radial-gradient(circle,
        rgba(160, 87, 243, 0.932),
        transparent 70%);

        filter:blur(40px);

        animation:luzDerecha 14s ease-in-out infinite;

        z-index:2;

    }


    /* Contenido */

    .heroContenido{

        position:relative;

        z-index:20;

        max-width:1100px;

        text-align:center;

        padding:0 20px;

    }


    .heroLogo{
        margin-top: 150px;
        width:310px;

        margin-bottom:35px;

        animation:flotar 6s ease-in-out infinite;

    }


    .hero h2{

        color:var(--verde);

        font-size:2.5rem;

        font-weight:300;

        letter-spacing:3px;
        
        margin-bottom:20px;

        text-transform:uppercase;

    }


    .hero h1{

        font-family:'Anton',sans-serif;

        font-size:6rem;

        line-height:1;

        letter-spacing:4px;

        margin-bottom:30px;

        text-shadow:0 0 30px rgba(0,0,0,.7);

    }


    .hero p{

        font-size:1.9rem;

        color:#f1f1f1;

        margin:auto;

        max-width:800px;

        line-height:1.8;

    }


    /* Botones */

    .botonesHero{

        margin-top:55px;

        display:flex;

        justify-content:center;

        gap:25px;

        flex-wrap:wrap;

    }

    .botonesHero a{

        padding:18px 42px;

        border-radius:60px;

        text-decoration:none;

        font-weight:700;

        transition:.35s;

        font-size:1rem;
        font-weight: 800;

    }


    .botonesHero a:first-child{

        background:var(--verde);

        color:black;

    }

    .botonesHero a:first-child:hover{

        transform:translateY(-6px);

        box-shadow:0 15px 35px rgba(156,203,60,.45);

    }


    .botonesHero a:last-child{

        border:2px solid white;

        color:white;

    }

    .botonesHero a:last-child:hover{

        background:white;

        color:black;

    }


    /* Flecha */

    .flechaScroll{

        position:absolute;

        bottom:30px;

        left:50%;

        transform:translateX(-50%);

        font-size:2rem;

        color:white;

        animation:subirBajar 2s infinite;

    }


    /* Animaciones */
    /* ===== MENÚ HAMBURGUESA ===== */

/* Ocultar botón en desktop */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100;
}

/* Las tres rayas */
.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Animación para convertir en "X" cuando está activo */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Contenedor del menú (se muestra en desktop) */
.menu-container {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Estilos del nav en desktop */
.menu-container nav {
    display: flex;
    gap: 20px;
}

.menu-container nav a {
    color: #fff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s;
}

.menu-container nav a:hover {
    color: var(--verde, #9ccb3c);
}

/* Botón WhatsApp dentro del menú */
.menu-container .botonWhatsapp {
    background: #25D366;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.3s, transform 0.3s;
}

.menu-container .botonWhatsapp:hover {
    background: #128C7E;
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */




/* ===== AJUSTE DEL LOGO EN EL HEADER ===== */
header .logo {
    flex-shrink: 0;          /* Evita que se encoja */
    max-width: 180px;        /* Ancho máximo en escritorio */
    height: auto;
}

header .logo img {
    width: 50%;
    height: auto;
    display: block;
}

/* Para móviles, reducimos el tamaño */
@media (max-width: 768px) {
    header .logo {
        max-width: 130px;    /* Más pequeño en móvil */
    }
}



/* --- RESPONSIVE DESIGN (Para celulares) --- */
@media (max-width: 768px) {
    .bloque-nosotros,
    .bloque-nosotros.invertido {
        flex-direction: column;
        text-align: center;    /* Mantiene títulos, etc. centrados */
    }

    .bloque-nosotros .texto,
    .bloque-nosotros .imagen {
        width: 100%;
    }

    /* ===== AJUSTE IMPORTANTE: PÁRRAFOS JUSTIFICADOS ===== */
    .bloque-nosotros .texto p,
    .bloque-nosotros.invertido .texto p {
        text-align: justify;   /* Justifica el texto */
        text-justify: inter-word; /* Mejora el espacio entre palabras */
        max-width: 100%;       /* Asegura que ocupe todo el ancho */
        margin-left: auto;
        margin-right: auto;
    }

    /* Opcional: si quieres que los párrafos tengan un poco de espacio interno */
    .bloque-nosotros .texto {
        padding: 0 15px;       /* Para que no toque los bordes */
    }

    /* Orden visual: imagen debajo del texto */
    .bloque-nosotros {
        display: flex;
        flex-direction: column-reverse;
    }

    .bloque-nosotros.invertido {
        display: flex;
        flex-direction: column-reverse;
    }
}


@media (max-width: 768px) {
    /* Mostrar botón hamburguesa */
    .menu-toggle {
        display: flex;
    }

    /* Ocultar menú por defecto en móvil */
    .menu-container {
        display: none;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 100%; /* justo debajo del header */
        left: 0;
        width: 100%;
        background: rgba(123, 53, 204, 0.95);
        backdrop-filter: blur(10px);
        padding: 20px 0;
        gap: 20px;
        border-top: 2px solid var(--verde, #9ccb3c);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        z-index: 99;
    }

    /* Mostrar menú cuando tiene la clase .open */
    .menu-container.open {
        display: flex;
    }

    /* Enlaces en columna */
    .menu-container nav {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: center;
    }

    .menu-container nav a {
        font-size: 1.2rem;
        padding: 8px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .menu-container nav a:last-child {
        border-bottom: none;
    }

    /* Botón WhatsApp en móvil */
    .menu-container .botonWhatsapp {
        margin-top: 10px;
        width: auto;
        padding: 12px 30px;
    }
}

    @keyframes flotar{

        0%{

            transform:translateY(0px);

        }

        50%{

            transform:translateY(-12px);

        }

        100%{

            transform:translateY(0px);

        }

    }


    @keyframes subirBajar{

        0%{

            transform:translate(-50%,0);

        }

        50%{

            transform:translate(-50%,12px);

        }

        100%{

            transform:translate(-50%,0);

        }

    }


    @keyframes luzIzquierda{

        0%{

            transform:rotate(0deg);

        }

        50%{

            transform:rotate(8deg);

        }

        100%{

            transform:rotate(0deg);

        }

    }


    @keyframes luzDerecha{

        0%{

            transform:rotate(0deg);

        }

        50%{

            transform:rotate(-8deg);

        }

        100%{

            transform:rotate(0deg);

        }

    }