/* General */
body {
    margin: 0;
    padding: 0;
    font-family: 'Chillax', sans-serif;
    background-color: #e0e0de;
    color: #2B2B2B;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;
}

/* Logo */
.logo img {
    position:absolute;
    height: 30px;
    z-index: 2;
}

/*--------------------------------------Menú---------------------------------------------------------------------*/


/* Menú hamburguesa */
.menu-hamburger {
    position: fixed;
    top: 1rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    z-index: 2;
   
}

/* Botón para cerrar el menú */
.close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}


.menu-hamburger div {
    width: 30px;
    height: 3px;
    background-color: #2B2B2B;
}

/* Menú desplegable */
.dropdown-menu {
    position: fixed; /* Cambiado de absolute a fixed */
    top: 0;
    right: -100%; /* Oculto completamente fuera de la pantalla */
    width: 50%;
    height: 100%;
    background-color: #2B2B2B;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(0); /* Quitamos translateX */
    transition: right 0.3s ease-in-out; /* Animamos la posición */
    z-index: 2;
}

.dropdown-menu.show {
    right: 0; /* Aparece en la pantalla al activarse */
}

.dropdown-menu.show {
    transform: translateX(0);
}

.dropdown-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.dropdown-menu li {
    margin: 1rem 0;
}

/* Estilo general para los enlaces del menú */
.dropdown-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600; /* Semibold */
    transition: color 0.3s ease-in-out; /* Transición suave para el cambio de color */
}

/* Efecto hover para los enlaces */
.dropdown-menu a:hover {
    color: #009C4D; /* Color verde */
}


/*--------------------------------------Menú-----------------------------------------------------------------------*/



/*--------------------------------------HeroSection----------------------------------------------------------------*/


/* Sección Hero */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Toda la altura de la ventana */
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Alinea el texto en la parte inferior */
}

/* Fondo de la ilustración */
.hero-background img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit:cover; /* Asegura que la imagen cubra todo */
    z-index: -1; /* Envía la imagen al fondo */
}

/* Contenido del héroe */
.hero-content {
    margin: 1rem;
    z-index: 1; /* Asegura que el texto esté encima del fondo */
}

.hero-content h1 {
    font-size: 5rem; /* Ajustar tamaño según prefieras */
    font-weight: 600; /* Semibold */
    color: #1c1c1c; /* Texto negro */
    line-height: 1;
    text-align: left;
}

/*--------------------------------------HeroSection--------------------------------------------------------------------*/






/*--------------------------------------Informacion--------------------------------------------------------------------*/


/* Sección de información de contacto */
.contact-info {
    margin: 2rem;
    padding: 2rem 0;
    text-align: left;
    color: #000;
}

.info-block {
    margin-bottom: 1rem;
}

.label {
    font-size: 1rem;
    font-weight: 400; /* Regular */
    margin: 0;
}

.value {
    font-size: 1rem;
    margin: 0;
}

.semibold {
    font-weight: 600; /* Semibold para los valores */
}

/* Enlaces */
.value a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.value a:hover {
    color: #4caf50; /* Cambia a verde al pasar el cursor */
}

/*--------------------------------------Informacion-----------------------------------------------------------------------*/




/*--------------------------------------Footer-----------------------------------------------------------------------------*/

/* Footer */
.footer {
    background-color: #333333; /* Color oscuro del footer */
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;
    height: 60px; /* Altura fija */
}

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.footer-left .semibold {
    font-weight: 600; /* Semibold para el nombre */
    margin: 0;
    font-size: 1rem;
}

.footer-left .regular {
    font-weight: 400; /* Regular para el año */
    margin: 0;
    font-size: 0.9rem;
}

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

.footer-right a {
    display: inline-block;
    text-decoration: none;
    margin-left: 1rem;
}

.footer-right img {
    width: 24px; /* Tamaño del logo de Instagram */
    height: 24px;
}

.footer-right a:hover img {
    opacity: 0.7; /* Efecto hover para el logo */
}



@media (max-width: 1000px) {
    .hero-background img {
        content: url('assets/img/oooh.gif'); /* Cambia la imagen */
    }
}


/*--------------------------------------Footer---------------------------------------------------------------------*/






/*--------------------------------------Sobre Mi--------------------------------------------------------------------*/

/* Página Sobre mí */
.about {
    margin: 2rem;
    padding-top: 5rem; /* Para evitar superposición con el header fijo */
    text-align: left;
}

.about-title {
    font-size: 5rem;
    font-weight: 600; /* Semibold */
    margin: 0 0 1rem 0;
    color: #2B2B2B;
}

.about-description {
    font-size: 1rem;
    font-weight: 400; /* Regular */
    line-height: 1.6;
    color: #2B2B2B;
    margin-bottom: 2rem;
    max-width: 50%;
    text-align: justify;
}

.info-section {
    margin-top: 2rem;
}

.info-block {
    margin-bottom: 1.5rem;
}

.label {
    font-size: 1rem;
    font-weight: 400; /* Regular */
    margin: 0;
}

.value {
    font-size: 1rem;
    font-weight: 600; /* Semibold */
    margin: 0;
}

/* Ilustración de fondo */
.about {
    position: relative;
    background-image: url('assets/img/plantuki.gif'); /* Ruta de la imagen */
    background-size:cover; /* Asegura que la imagen cubra todo el espacio */
    background-repeat: no-repeat; /* No repite la imagen */
    background-position: center right; /* La imagen se centra verticalmente y está alineada a la derecha */
    z-index: -1;
}

@media (max-width: 1200px) {
    /* Ajustar el texto para que ocupe más ancho */
    .about-description {
        max-width: 100%; /* Ahora ocupa todo el ancho del contenedor */
        text-align: justify; /* Opcional: Justifica el texto */
        font-weight: 600; /* Semibold */
    }

    /* Cambiar la imagen de fondo */
    .about {
        background-image: url('assets/img/coso.gif'); /* Ruta de la imagen para pantallas pequeñas */
        background-size: cover; /* Asegura que la imagen cubra toda la sección */
        background-position: center; /* Centra la imagen */
    }
}


/*--------------------------------------Sobre Mi--------------------------------------------------------------------*/


/*--------------------------------------trabajos--------------------------------------------------------------------*/


/* Página Trabajos */
.trabajos {
    display: flex;
    flex-direction: row;
    margin: 2rem;
    padding-top: 2rem; /* Evita superposición con el header */
}

.trabajos-title {
    font-size: 5rem;
    font-weight: 600; /* Semibold */
    margin: 0;
    position:absolute; /* Fija el título */
    top: 8rem;
    left: 2rem;
    z-index: 2;
    color: #2B2B2B;
}

.trabajos-gallery {
    margin-left: auto; /* Alinea la galería a la derecha */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    width: 60%; /* Ocupa la parte derecha */
}

.trabajo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.trabajo img:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el ratón */
}

/* Ilustración fija */
.ilustracion-fija {
    content: '';
    position: fixed;
    top: 0;
    left: 10;
    width: 65%; /* Ocupa un tercio de la pantalla */
    height: 100%;
    background-image: url('assets/img/BomBom.gif'); /* Ruta de tu ilustración */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    transform: scale(1); /* Escala inicial */
    transition: transform 0.1s ease-in-out; /* Suavidad en la transición */
}

@media (max-width: 900px) {
    .trabajos-title {
     font-size: 5rem;
    font-weight: 600; /* Semibold */
    margin: 10;
    position:absolute; /* q suba */
    top: 4rem;
    left: 2rem;
    z-index: 2;
    color: #2B2B2B;
    
}
.trabajos-gallery {
    margin-left: auto; /* Alinea la galería a la derecha */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    width: 60%; /* Ocupa la parte derecha */
    margin-top: 25rem;
}
}



/* Panel Lateral */
.panel {
    position: fixed;
    left: -50%;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #272727e5;
    color: white;
    padding: 20px;
    transition: left 0.5s ease-in-out;
    z-index: 1000;
    display: none; /* Se oculta hasta que se active */
}

/* Contenido del panel */
.contenido-panel {
    margin-top: 50px;
}

/* Botón de cierre */
#cerrar-panel {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 50px;
    cursor: pointer;
}

/*--------------------------------------trabajos--------------------------------------------------------------------*/
/*--------------------------------------Contacto--------------------------------------------------------------------*/

/* Página Contacto */
.contacto {
    margin: 2rem;
    padding-top: 5rem; /* Para evitar superposición con el header */
    text-align: left;
    position: relative; /* Asegura que el pseudo-elemento se posicione dentro de esta sección */

}

.contacto-title {
    font-size: 5rem;
    font-weight: 600; /* Semibold */
    margin: 0 0 2rem 0;
    color: #2B2B2B;
}

/* Formulario */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espacio entre los elementos */
    max-width: 400px; /* Ancho máximo del formulario */
    margin-top: 2rem;
}

.contacto-form label {
    font-size: 1rem;
    font-weight: 400; /* regular */
    color: #2B2B2B;
}

.contacto-form input,
.contacto-form textarea {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    font-family: 'Chillax', sans-serif;
    border: 1px solid #757575;
    border-radius: 4px;
    background-color: #f0f0f0; /* Color gris claro */
    resize: none; /* Evita el redimensionamiento del textarea */
}

.contacto-form textarea {
    height: 150px; /* Caja de mensaje más grande */
}

.contacto-form input:focus,
.contacto-form textarea:focus {
    border-color: #009C4D; /* Verde al enfocar */
    outline: none;
    box-shadow: 0 0 4px #004B25; /* Efecto visual al enfocar */
}

.submit-btn {
    padding: 0.6rem;
    font-size: 1rem;
    font-weight: 600; /* Semibold */
    color: #fff;
    background-color: #009C4D;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #004B25; /* Verde más oscuro al pasar el ratón */
}

.contacto::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Ajusta el ancho del fondo */
    height: 100%;
    background-image: url('assets/img/Gambita.gif'); /* Ruta de tu ilustración */
    background-size: contain; /* Asegura que la imagen mantenga sus proporciones */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la ilustración en el área */
    z-index: -2; /* Envía la ilustración al fondo */
}


@media (max-width: 1000px) {
    /* Reducir el tamaño de las cajas de texto */
    .contacto-form {
        max-width: 300px; /* Formulario más estrecho */
    }

    .contacto-form input,
    .contacto-form textarea {
        font-size: 0.9rem; /* Texto más pequeño */
        padding: 0.4rem; /* Reducir el relleno interno */
    }

    .contacto-form textarea {
        height: 120px; /* Reducir la altura del mensaje */
    }

    /* Cambiar la imagen de fondo */
    .contacto::after {
        background-image: url('assets/img/Gambitas.gif'); /* Imagen alternativa para pantallas pequeñas */
        background-size: cover; /* Asegura que cubra todo el área */
        background-position: center; /* Centra la nueva imagen */
    }

    /* Menú siempre en la esquina superior derecha */
    .menu-hamburger {
        position: fixed; /* Fija el menú en la esquina superior derecha */
        top: 1rem;
        right: 1rem;
        z-index: 5; /* Por encima de otros elementos */
    }
}

/*--------------------------------------Contacto--------------------------------------------------------------------*/

/*--------------------------------------blog--------------------------------------------------------------------*/
/* Sección Blog */
.blog {
    margin: 2rem;
    padding-top: 5rem; /* Evita superposición con el header */
    text-align: left;
}

.blog-title {
    font-size: 5rem;
    font-weight: 600; /* Semibold */
    margin: 0 0 2rem 0;
    margin-bottom: 5rem;
    color: #2B2B2B;
}

/* Diseño de la cuadrícula del blog */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem; /* Espacio entre tarjetas */
}

/* Estilo de las tarjetas del blog */
.blog-card {
    background-color: #fff;
    border: 1px solid #009C4D;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 6px #004B25;
    display: flex;
    flex-direction: column;
}

.blog-image {
    width: 100%;
    height: 250px;
    object-fit:cover; /* Ajusta la imagen al contenedor */
}

.blog-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1rem;
    color: #2B2B2B;
}

.blog-card-description {
    font-size: 1rem;
    font-weight: 400;
    margin: 0 1rem 1rem;
    color: #2B2B2B;
}

.blog-card-link {
    margin: 0 1rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #4caf50;
    text-decoration: none;
}

.blog-card-link:hover {
    text-decoration: underline;
}

.blog::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Ajusta el tamaño del ancho */
    height: 100%; /* Ocupa toda la altura de la sección */
    background-image: url('assets/img/skate.gif'); /* Ruta de tu ilustración */
    background-size: contain; /* Ajusta las proporciones */
    background-repeat: no-repeat; /* Evita repeticiones */
    background-position: center;
    z-index: -1; /* Envía la ilustración detrás del contenido */
}