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

li {
    list-style: none;
}

h1, h2, h3, h4, h5, h6, strong {
    font-weight: inherit;
    font-family: 'Gimbal Extended', sans-serif;
}

a {
    display: block;
    color: inherit;
    text-decoration: none;
}

p a {
    display: inline;
}

form, input, select, option, textarea, button, fieldset {
    display: block;
    font-family: inherit;
    color: inherit;
    background-color: transparent;
}

svg {
    display: block;
    fill: currentColor;
}

:root {

    /* Tipografías */
    --font-family: 'Gimbal Extended', sans-serif;
    --font-family: 'Raleway', sans-serif; /* Tipografía predominante en la web */

    /* Propiedades tipografía */
    --font-size_xs: x-small;
    --font-size_s: small;
    --font-size_m: medium;
    --font-size_l: large;
    --font-size_xl: x-large;
    --font-size_xxl: xx-large;
    --font-size_xxxl: xxx-large;
    --text-transform_cap: capitalize;
    --text-transform: uppercase;
    --font-weight: bold;
    --text-align: justify;

    /* Colores */
    --color-yellow: #FAFFBB; /* Color principal */
    --color-green: #E3F8CF; /* Color Secundario */
    --color-blue: #0E121F;
    --color-white_solid: white;
    --color-white: rgba(255, 255, 255, 0.308);

    /* Border y befores */
    --border-height: 2rem; /* 32px */
    --border-main: var(--border-height) solid var(--color-black);
    --border-radius: .625rem;

    /* Tamaños y espacios */
    --gap: .625rem; /* 10px */
    --padding: .9375rem; /* Padding para menú móvil .Header-dots 15px */


}

img, video, iframe {
    display: block;
    max-width: 100%;
    /* width: 100%; */
}


html {
    font-size: 100%;
    scroll-behavior: smooth;
    text-transform: lowercase;
}


body {

    width: 100vw;
    text-transform: lowercase;
    font-family: 'Raleway', sans-serif;

    background: url(../assets/Background-16.png);
    background-size: cover;
    background-repeat: no-repeat;
}





/* ---------------------- HEADER INDEX, ABOUT, CONTACT, WORKS CSS ---------------------*/

/* Descripción: Estilos para la cabecera de la web que contiene el menú de navegación (Home, Works, About y Contact)
   Estructura: - Header
               - Header-wrapper
               - Header-button
               - Header-dots
               - Header-nav
               - Header-ul
               - Header-li
               - Header-link

*/


.Header {
    width: 100%;
}

.Header-wrapper {
    width: 95%;

    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
    padding: 1.25rem 0rem;

}

.Header-button {
}

.Header-dots {
    width: 3.75rem;
    height: 3.75rem;

    display: none;
    color: var(--color-yellow);
    padding: var(--padding);
}

.Header-nav {
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.Header-ul {
    width: 100%;

    padding: 1.25rem .625rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: var(--color-green);
    text-transform: var(--text-transform);
}

.Header-li {
    font-size: var(--font-size_l);
}

.Header-link {
}


.Header-li:hover {
    color: var(--color-white);
}


/* HEADER INDEX RESPONSIVE */


@media (max-width: 700px) {

    .Header-nav {
        display: none;
        width: 100%;
        position: absolute;
        top: 10%;
    }

    .Header-dots {
        display: block;
    }

    .Header-ul {
        flex-direction: column;
        gap: .3125rem;
    }

    .Header-nav.isActive {
        display: block;
    }
}


/* ---------------------- HEADER INDEX, ABOUT, CONTACT, WORKS CSS ---------------------*/


/* ----------------------------------------------------------------      INDEX     -----------------------------------------------------------------*/


/* ---------------------- LOGO INDEX CSS ---------------------*/

/* Descripción: Estilos para el área del logo, nombre y profesión.
   Estructura: - Logo
               - Logo-wrapper
               - Logo-vector
               - Logo-img
               - Logo-text
               - Logo-name
               - Logo-specialties
               - Logo-designer
               - Logo-frontend
               - Logo-svg

*/


.Logo {
    width: 100%;
    height: 70vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

.Logo-wrapper {
    width: 100%;


    margin: auto;

    gap: .3125rem;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.Logo-vector {
    width: 45%;

    animation: fade-up 0.1s ease 1 1s both;
    overflow: hidden;
}

.Logo-img {}
.Logo-text {
    width: 100%;


    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: .125rem;

}

.Logo-name {
    width: 100%;

    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;

    font-family: 'Raleway', sans-serif;
    color: var(--color-yellow);
    text-transform: var(--text-transform_cap);
    font-size: var(--font-size_xxxl);

    animation: fade-up 0.2s ease 1 1.8s both;
    overflow: hidden;
}

.Logo-specialties {
    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    color: var(--color-yellow);
    text-transform: var(--text-transform_cap);
    font-size: var(--font-size_l);
    letter-spacing: .125rem;

    animation: fade-up 0.2s ease 1 1.8s both;
    overflow: hidden;

}

.Logo-designer{}

.Logo-frontend{}

.Logo-SVG {
    width: 4.375rem;
    height: 4.375rem;
}

/* KEYFRAMES */

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

@keyframes fade-up{
    0%{
        opacity: 0;
        transform: translateY(30px);
    }

    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}


/* LOGO INDEX RESPONSIVE CSS */


@media (max-width: 1800px) {

    .Logo-text {
        font-size: var(--font-size_m);
    }

}


@media (max-width: 700px) {

    .Logo-vector {
        width: 50%;
    }

    .Logo-name {
        font-size: xx-large;
    }

    .Logo-specialties {

        font-size: var(--font-size_m);
        letter-spacing: .125rem;
    }


    .Logo-specialties {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
}


/* ---------------------- LOGO INDEX CSS ---------------------*/


/* ---------------------- SLIDER INDEX CSS ---------------------*/

/* Descripción: Estilos para la es slider que contiene los logos con las marcas con las que he trabajado.
   Estructura: - Slider
               - Slider-ul
               - Slider-li
               - Slider-img

*/

.Slider {
    width: 70vw;
    height: auto;

    margin: auto;
    overflow: hidden;


}

.Slider-ul {

    width: calc(120px * 24);


    display: flex;
    gap: var(--gap);
    animation: scroll 100s linear infinite;
}

.Slider-li {
    width: 100%;
}

.Slider-img {
    width: 100%;
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-120px * 24));
    }
}


/* ---------------------- SLIDER INDEX CSS ---------------------*/

/* ----------------------------------------------------------------      INDEX     -----------------------------------------------------------------*/

/* ----------------------------------------------------------------      ABOUT     -----------------------------------------------------------------*/


/* ---------------------- MAIN ABOUT CSS ---------------------*/

/* Descripción: Estilos para el área principal del apartado about.
   Estructura: - Main
               - Main-wrapper
               - Main-container
               - Main-info
               - Main-bio
               - Main-h1
               - Main-tittle
               - Main-paragraph
               - Main-graphic
               - Main-h3
               - Main-programs
               - Main-adobe
               - Main-developer
               - Main-h4
               - Main-languages
               - Main-programlanguager
               - Main-photo
               - Main-svg

*/


.Main {
}

.Main-wrapper_about {
    width: 80%;

    margin: auto;

    padding: 3.125rem 0rem 0rem 6.25rem;
}

.Main-container {
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;

    padding: 5.9375rem 0rem 3.8125rem 8.125rem;
}

.Main-info {
    width: 60%;


    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: self-start;

    padding: 1.875rem 0rem 0rem 3.125rem;
    gap: .3125rem;

}

.Main-bio {
    width: 90%;


    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: flex-start;

    gap: .3125rem;

}

.Main-h1 {
    width: 70%;

    cursor: pointer;
}

.Main-tittle {
}

.Main-paragraph {
    width: 80%;
    height: 0;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 1rem;

    color: var(--color-green);
    text-transform: none;
    font-size: var(--font-size_m);
    line-height: 1.3;

    overflow: hidden;
    transition: all .5s ease;
}

.Main-paragraph.isActive {
    height: 13.6rem;
}


.Main-span {
}


.Main-specialties {
    width: 100%;


    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-content: flex-start;

    gap: var(--gap);
}

.Main-skills {
    width: 40%;

    cursor: pointer;
}

.Main-img {
}

.Main-graphiccontainer {
    width: 90%;
    height: 0;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    gap: .3125rem;

    font-size: var(--font-size_m);
    text-transform: none;
    color: var(--color-green);
    line-height: 1.5;

    overflow: hidden;
    transition: all .5s ease;
}

.Main-graphiccontainer.isActive {
    height: 13rem;
}


.Main-graphic {
    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    gap: .3125rem;
}

.Main-h3 {
    width: 100%;
    font-family: 'Raleway';
    font-weight: var(--font-weight);
}

.Main-programs {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}

.Main-adobe {
}


.Main-developer {
    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

    gap: .3125rem;
}

.Main-h4 {
    width: 100%;
    font-family: 'Raleway';
    font-weight: var(--font-weight);
    font-size: var(--font-size_m);
}

.Main-languages {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;

}

.Main-programlanguages {
}

.Main-photo {
    width: 10%;

}


.Main-svg {
    width: 5rem;
    height: 5rem;
}


/* MAIN ABOUT RESPONSIVE CSS */

@media (max-width: 1920px) {

    .Main-wrapper_about {
        padding: 0rem 0rem 6.25rem 0rem;
    }

    .Main-bio {
        width: 100%;
    }

    .Main-photo {
        width: 35%;

    }


}


@media (max-width: 1260px) {

    .Main-bio {
        width: 50%;
    }

    .Main-h1 {
        width: 50%;

    }

    .Main-skills {
        width: 30%;
    }

    .Main-paragraph.isActive {
        height: 13rem;
    }

    .Main-wrapper_about {
        padding: 0rem 0rem 3.125rem 0rem;
    }

    .Main-container {

        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;

        padding: .625rem 0rem 3.8125rem 0rem;

    }

    .Main-photo {
        width: 30%;
        padding-top: 3.75rem;
        padding-bottom: 3.125rem;
    }

    .Main-bio {
        width: 100%;
    }

    .Main-info {
        width: 100%;
        font-size: var(--font-size_xs);
        padding: 0rem 0rem 0 remx 8.5rem;
    }

    .Main-specialties {
        width: 100%;
        padding-top: 1px;
    }


}

@media (max-width: 700px) {

    .Main-wrapper_about {
        padding: 5rem 0rem 3.125rem 0rem;
    }

    .Main-paragraph.isActive {
        height: 21rem;
        font-size: var(--font-size_s);
    }

    .Main-graphiccontainer.isActive {
        font-size: var(--font-size_s);
    }
    
    .Main-photo {
        padding: 3.125rem 0rem 0rem 0rem;
        width: 40%;

    }

    .Main-info {
        padding: 0rem 0rem 0rem 5.625rem;
    }

}


/* ---------------------- MAIN ABOUT CSS ---------------------*/

/* ----------------------------------------------------------------      ABOUT     -----------------------------------------------------------------*/

/* ----------------------------------------------------------------      CONTACT     -----------------------------------------------------------------*/

/* ---------------------- MAIN CONTACT CSS ---------------------*/

/* Descripción: Estilos para el área principal del apartado about.
   Estructura: - Main
               - Main-wrapper
               - Main-form
               - Main-h3
               - Main-bio
               - Main-sendme
               - Main-type
               - Main-rrss
               - Main-networks
               - Main-a

*/


.Main-contact {
    width: 100%;
    height: 80vh;
}

.Contact-wrapper {
    width: 100%;


    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    padding: 130px 0px 0px 0px;
    gap: 2.5rem;
}

.Contact-form {
    width: 70%;


    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    position: relative;
}
.Contact-svg{
    width: 20px;
    height: 20px;

    color: var(--color-green);
    
    position: absolute;
    right: 29%;
}

.Contact-h3 {
    width: 50%;
}

.Contact-sendme {
    width: 100%;

}

.Contact-type {
    width: 100%;


    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

input, textarea {
    width: 100%;
    padding: 1.25rem 1.875rem;

    background-color: rgba(255, 255, 255, 0.123);
    border-radius: .9375rem;
}

input:focus {
    outline: none;
}

input::-webkit-input-placeholder {
    font-size: .9375rem;
    color: #fffefe76;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.Contact-rrss {
    width: 50%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    gap: 3rem;
}

.Contact-networks {
    width: 2.5rem;
    height: 2.5rem;


    color: var(--color-green);
}

.Contact-a {
}


.Contact-networks:hover {
    color: var(--color-white);
}

.Contact-linkedin {
}

.Contact-behance {
}

.Contact-github {
}


/* MAIN CONTACT RESPONSIVE */

@media (max-width: 820px) {
    .Contact-wrapper {
        padding: 10rem 0rem 0rem 0rem;
    }

    .Contact-networks {
        width: 2rem;
        height: 2rem;
    }

    .Contact-rrss {
        gap: 1.875rem;
    }
}

/* ---------------------- MAIN CONTACT CSS ---------------------*/

/* ----------------------------------------------------------------      CONTACT     -----------------------------------------------------------------*/

/* ----------------------------------------------------------------       WORKS      -----------------------------------------------------------------*/

/* ---------------------- GRID WORKS CSS ---------------------*/

/* Descripción: Estilos para el Grid de logos donde se alojan los proyectos, básicamente el portafolio completo.
   Estructura: - Grid
               - Grid-wrapper
               - Grid-h1
               - Grid-works
               - Grid-ul
               - Grid-li
               - Grid-a
               - Grid-img
               - Grid-svg

*/


.Grid {
    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.Grid-wrapper {
    width: 100%;


    margin: auto;

}

.Grid-h1 {
    width: 60%;


    margin: auto;
    padding: 1.875rem 3.125rem 1.875rem 3.125rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.Grid-works {
    width: 70%;
}

.Grid-ul {
    width: 100%;
    max-width: 56.25rem;

    margin: auto;

    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(160px, 1fr));
    gap: 3rem;
}

.Grid-li {
}

.Grid-li:hover {
    width: 100%;
    filter: brightness(0.6);
}

.Grid-a {
}

.Grid-img {
    border-radius: 2rem;
    box-shadow: 0 0 1rem rgba(46, 46, 46, 0.261);
    transition: transform .2s ease, box-shadow .3s ease;
    cursor: pointer;
}

.Grid-svg {
    width: 5rem;
    height: 5rem;
}

.Grid-img:hover {
    transform: scale(.9);
    box-shadow: 0 1rem 1rem 0 rgba(46, 46, 46, 0.264);
}

.Grid-img:active {
    transform: scale(0.9);
}


/* GRID WORKS RESPONSIVE */

@media (max-width: 1328px) {

    .Grid-ul {
        max-width: 33rem;
    }
}

@media (max-width: 960px) {

    .Grid {
        padding-top: 3.125rem;
        padding-bottom: 6.25rem;
    }

    .Grid-ul {
        max-width: 22rem;
        gap: 1.2rem;
    }

    .Grid-wrapper {
        padding-bottom: 6.25rem;
    }
}


/* ---------------------- GRID WORKS CSS ---------------------*/


/* ---------------------- LIGHTBOX WORKS CSS ---------------------*/

/* Descripción: Estilos para el Lightbox donde se aloja un preview del proyecto y hay un botón de linkea al proyecto
                completo que redirje al html donde se desplega el proyecto completo.
   Estructura: - Lightbox
               - Lightbox-close
               - Lightbox-svg
               - Lightbox-img
               - Lightbox-fullproject
               - Lightbox-button
               - Lightbox-svg
               - Lightbox-a
               - Lightbox-span

*/

.Lightbox {
    width: 100%;
    height: 100%;

    backdrop-filter: blur(.625rem);

    position: fixed;
    top: 0;
    left: 0;

    /* Cambiado a display 'none' para ocultar el contenido */
    display: none;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease-in-out, display .3s ease-in-out;
}

.Lightbox.isActive {
    opacity: 1;
    /* Se pasa a flex al momento de mostrarlo */
    display: flex;
    pointer-events: auto;
}

.Lightbox-wrapper {
    width: 90vw;
    height: 90vh;

    position: relative;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
}

.Lightbox-close {
    width: 2rem;
    background-color: var(--color-white);
    padding: .5rem;
    border-radius: 1rem;
    box-shadow: 0 1rem 1rem 0 rgba(46, 46, 46, 0.261);

    transition: all .2s ease;
    cursor: pointer;
}

.Lightbox-close:hover {
    transform: scale(.9);
}

.Lightbox:active {
    transform: scale(1.0);
}

.Lightbox-svg {
}

.Lightbox-img {
    width: 80vw;
    height: 80vh;
    background-color: rgb(255, 255, 255);
    object-fit: cover;

    border-radius: 1rem;
    box-shadow: 0 1rem .3125rem rgba(46, 46, 46, 0.261);
}

.Lightbox-project {
    /* Cambiado a display 'none' para ocultar el contenido */
    display: none;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 5%;
    left: 5.5%;

    opacity: 0;
    transition: opacity .5s ease-in-out, display .3s ease-in-out;
}

.Lightbox-project.isActive {
    opacity: 1;
    /* Se pasa a flex al momento de mostrarlo */
    display: flex;
}

.Lightbox-button {
    padding-top: 25rem;
    position: absolute;
    bottom: 10%;
}

.Lightbox-svg {
    width: 15.625rem;
    height: 3.125rem;
    background-color: var(--color-blue);

    border-radius: .625rem;
}

.Lightbox-a {
    position: relative;
}

.Lightbox-fullhtml {
    background-color: #0E121F;
    padding: 1rem 2rem;
    border-radius: 1rem;

    color: var(--color-yellow);
    font-size: var(--font-size_l);
    text-transform: var(--text-transform);
    font-weight: var(--font-weight);
}

.Lightbox-span {
    color: var(--color-yellow);
    font-size: var(--font-size_l);
    text-transform: var(--text-transform);
    font-weight: var(--font-weight);
}


/* GRID WORKS RESPONSIVE */

@media (max-width: 700px) {

    .Grid-wrapper {

    }

    .Grid-ul {

    }

    .Header-svg {
        display: block;
    }


}

/* ---------------------- LIGHTBOX WORKS CSS ---------------------*/


/* ----------------------------------------------------------------       WORKS      -----------------------------------------------------------------*/

/* ----------------------------------------------------------------     PROJECTS     -----------------------------------------------------------------*/

/* ---------------------- HEADER ---------------------*/
/* Descripción: Estilos para el Header que llevan todos los proyectos que contiene el botón para regresar al apartado de works.
   Estructura: - Header
               - Header-wrapper
               - Header-a

*/


.Button-back {
    width: 100%;
    background-color: rgb(255, 255, 255);
}

.Back-wrapper {
    width: 80%;

    margin: auto;
    padding: 3.125rem 3.125rem 3.125rem 3.125rem;
}

.Back-a {
    width: 100%;
    background-color: var(--color-blue);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    padding: 1.25rem;

    border-radius: var(--border-radius);
    color: var(--color-yellow);
    font-size: var(--font-size);
    text-transform: var(--text-transform);

}

/* ---------------------- HEADER ---------------------*/


/* ---------------------- MICKS CSS ---------------------*/

/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Micks
               - Micks-wrapper
               - Micks-micks
               - Micks-paragraph
               - Micks-p
               - Micks-works
               - Micks-img

*/


.Micks {
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
}

.Micks-wrapper {
    width: 100%;
    background-color: rgb(255, 255, 255);


    margin: auto;
}

.Micks-micks {
    width: 60%;
    background-color: rgb(255, 255, 255);

    margin: auto;
    padding: 5rem;
}

.Micks-paragraph {
    width: 100%;
    background-color: #1B1464;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 20px;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;
}

.Micks-p {
    margin: auto;
    color: var(--color-white_solid);
}

.Micks-works {
    width: 70%;
    margin: auto;
    padding: 2.5rem 0rem;
}

.Micks-img {
    width: 100%;
    padding: .625rem 0rem;
}


/* ---------------------- MICKS CSS ---------------------*/


/* ---------------------- PUMA CSS ---------------------*/

/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Puma
               - Puma-div
               - Puma-puma
               - Puma-paragraph
               - Puma-p
               - Puma-works
               - Puma-ul
               - Puma-li
               - Puma-img
               - Puma-pumasays
               - Puma-video


*/


.Puma {
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
}

.Puma-wrapper {
    width: 100%;
    background-color: rgb(255, 255, 255);

    margin: auto;
}

.Puma-div {
    width: 100%;
    background-color: #EB61A1;
}

.Puma-puma {
    width: 50%;


    margin: auto;
    padding: 8.125rem 0rem;
}

.Puma-paragraph {
    width: 100%;
    background-color: var(--color-white_solid);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 20px;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;
}

.Puma-p {
    margin: auto;
}

.Puma-works {
    width: 70%;
    background-color: rgb(255, 255, 255);

    margin: auto;
    padding: 2.5rem 0rem;
}

.Puma-ul {
    width: 100%;
}

.Puma-li {
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    gap: var(--gap);
}

.Puma-img {
}

.Puma-pumasays {
    width: 25%;
    padding-bottom: 1.875rem;
}

.Puma-video {
    width: 100%;
    height: 100%;
    padding: 4.375rem 0rem;
}


/* ---------------------- PUMA CSS ---------------------*/


/* ---------------------- PLANTOSA CSS ---------------------*/

/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Plantosa
               - Plantosa-wrapper
               - Plantosa-div
               - Plantosa-plantosa
               - Plantosa-paragraph
               - Plantosa-p
               - Plantosa-works
               - Plantosa-brand
               - Plantosa-img
*/


.Plantosa {
    width: 100%;
    height: 100vh;

}

.Plantosa-wrapper {
    width: 100%;
    background-color: #1D2226;

    margin: auto;
}

.Header-div {
    width: 100%;
    background-color: #004133;
}

.Plantosa-plantosa {
    width: 50%;


    margin: auto;
    padding: 5rem;
}

.Plantosa-paragraph {
    width: 100%;
    background-color: #EAE0C5;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 20px;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;
}

.Plantosa-p {
    margin: auto;
}

.Plantosa-works {
    width: 80%;
    margin: auto;

    padding: 3.125rem 0rem;

}

.Plantosa-brand {
    width: 100%;
    margin: auto;
    padding: 1.25rem 0rem;
}

.Plantosa-img {
    width: 50%;
    margin: auto;
    padding: 1.25rem 0rem;
}

/* ---------------------- PLANTOSA CSS ---------------------*/


/* ---------------------- COSCAFE CSS ---------------------*/

/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Coscafe
               - Coscafe-wrapper
               - Coscafe-coscafe
               - Coscafe-paragraph
               - Coscafe-p
               - Coscafe-works
               - Coscafe-img
*/


.Coscafe {
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
}

.Coscafe-wrapper {
    width: 100%;
    background-color: rgb(255, 255, 255);

    margin: auto;
}

.Coscafe-coscafe {
    width: 60%;


    margin: auto;
    padding: 5rem;
}

.Coscafe-paragraph {
    width: 100%;
    background-color: #F5D500;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 20px;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;
}

.Coscafe-p {
    margin: auto;
}

.Coscafe-works {
    width: 70%;
    margin: auto;
    padding: 2.5rem 0rem;
}

.Coscafe-img {
    width: 100%;
    padding: .625rem 0rem;
}

/* ---------------------- COSCAFE CSS ---------------------*/


/* ---------------------- MENJURJE CSS ---------------------*/


/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Menjurje
               - Menjurje-wrapper
               - Menjurje-div
               - Menjurje-menjurje
               - Menjurje-paragraph
               - Menjurje-p
               - Menjurje-works
               - Menjurje-blue
               - Menjurje-img
               - Menjurje-productos
*/


.Menjurje {
    width: 100%;
    height: 300vh;

}

.Menjurje-wrapper {
    width: 100%;
    background-color: rgb(255, 255, 255);

    margin: auto;
}

.Menjurje-div {
    width: 100%;
    background-color: #2D408E;
}

.Menjurje-menjurje {
    width: 40%;


    margin: auto;
    padding: 3.125rem 3.125rem;
}

.Menjurje-paragraph {
    width: 100%;
    background-color: #C4C41F;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;

}

.Menjurje-p {
    margin: auto;
}

.Menjurje-works {
    width: 100%;


    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    gap: 3.75rem;
}

.Menjurje-blue {
    width: 100%;
    background-color: #2D408E;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 3.125rem;

    padding: 6.25rem 3.125rem;
}

.Menjurje-img {
    width: 50%;
    padding-top: 3.75rem;
}

.Menjurje-productos {
    width: 100%;
    padding-top: 3.125rem;
}


/* MENJURJE RESPONSIVE CSS */

@media (max-width: 700px) {

    .Main-div {
        width: 100%;
        background-color: #2D408E;
    }

    .Main-menjurje {
        width: 60%;
    }
}


/* ---------------------- MENJURJE CSS ---------------------*/


/* ---------------------- SANTA CRUZ CSS ---------------------*/


/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Santacruz
               - Santacruz-wrapper
               - Santacruz-santacruz
               - Santacruz-paragraph
               - Santacruz-p
               - Santacruz-works
               - Santacruz-img
               - Santacruz-empaque
*/


.Santacruz {
    width: 100%;
    height: 150vh;
    background-color: rgb(255, 255, 255);
}

.Santacruz-wrapper {
    width: 100%;
    background-color: rgb(255, 255, 255);

    margin: auto;
}

.Santacruz-santacruz {
    width: 50%;


    margin: auto;
    padding: 3.125rem;
}

.Santacruz-paragraph {
    width: 100%;
    background-color: #01456d;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;
}

.Santacruz-p {
    margin: auto;
    color: var(--color-white_solid);
}

.Santacruz-works {
    width: 70%;
    margin: auto;
}

.Santacruz-img {
    width: 100%;
}

.Santacruz-empaque {
    padding-bottom: 3.125rem;
}


/* ---------------------- SANTA CRUZ CSS ---------------------*/


/* ---------------------- BARENA CSS ---------------------*/


/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Barena
               - Barena-wrapper
               - Barena-barena
               - Barena-paragraph
               - Barena-p
               - Barena-works
               - Barena-img
*/


.Barena {
    width: 100%;
    height: 200vh;
    background-color: rgb(255, 255, 255);
}

.Barena-wrapper {
    width: 100%;
    background-color: rgb(255, 255, 255);

    margin: auto;
}

.Barena-barena {
    width: 60%;


    margin: auto;
    padding: 5rem;
}

.Barena-paragraph {
    width: 100%;
    background-color: #0a2050;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;
}

.Barena-p {
    margin: auto;
    color: var(--color-white_solid);
}

.Barena-works {
    width: 70%;
    margin: auto;
    padding: 2.5rem 0rem;
}

.Barena-img {
    width: 100%;
    padding: .625rem 0rem;
}


/* ---------------------- BARENA CSS ---------------------*/


/* ---------------------- TUTUNIK CSS ---------------------*/


/* Descripción: Estilos para la estructura de la muestra del proyecto
   Estructura: - Tutunik
               - Tutunik-wrapper
               - Tutunik-tutunik
               - Tutunik-paragraph
               - Tutunik-p
               - Tutunik-works
               - Tutunik-div
               - Tutunik-divimg
               - Tutunik-img
*/

.Tutunik {
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
}

.Tutunik-wrapper {
    width: 100%;
    background-color: rgb(255, 255, 255);

    margin: auto;
}

.Tutunik-tutunik {
    width: 50%;
    background-color: #ffffff;

    margin: auto;
}

.Tutunik-paragraph {
    width: 100%;
    background-color: #B82B2B;

    padding: 6.25rem;

    text-align: var(--text-align);
    text-transform: none;
}

.Tutunik-p {
    margin: auto;
    color: var(--color-white_solid);
}

.Tutunik-works {
    width: 100%;
    margin: auto;

}

.Tutunik-div {
    width: 70%;
    margin: auto;
}

.Tutunik-divimg {
    width: 100%;
}

.Tutunik-img {
    width: 100%;
    padding: .625rem 0rem;
}

/* ---------------------- TUTUNIK CSS ---------------------*/