html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

* {
    font-family: 'Poppins', sans-serif;
    /* transition: transform .2s, filter .2s; */
    transition: all .2s;
    margin: 0;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* ============================== */

html {
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}

main {
    overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #fff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #00d3f5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #00a2bb;
}

.load-animation {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    /* Toma el 100% de la altura de la ventana */
    background-color: var(--black);
    color: var(--cream);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease;
    /* Transición para la animación de entrada */
}

.load-animation.hidden {
    opacity: 0;
    /* Oculta el encabezado */
    pointer-events: none;
    /* Evita interacciones con el encabezado oculto */
}

/* 
.menu {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1;
    background-color: var(--black);
    padding: 10px;
} */

.menu-item {
    margin: 0 10px;
    cursor: pointer;
    color: var(--cream);
}


.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    /* Inicialmente oculto */
    background-color: transparent;
    color: var(--cream);
    padding: 10px;
    cursor: pointer;
}

main section {
    text-align: center;
}

/* START ANIMATION */
/* Agrega transición para el fondo */
/* TODO revisar esto que se lia con el subtitulo nuevo (STUDIO) */
/* header span {
    position: relative;
    align-items: center;
    clip-path: circle(0% at 50% 50%);
    width: 100%;
    height: 100%;
    transition: clip-path 1.2s, background 1.2s;
} */

/* .fade-out {
    clip-path: circle(100% at 50% 50%);
    background: #eee5dcff; */
/* eee5dcff */
/* Cambia el fondo después de la animación */
/* } */

/* .load-animation #logo { */
/* Logo despues del fade*/
/* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25em;
    height: auto; */
/* } */

/* .load-animation span #logo-2 {
    position: relative;
    width: 25em;
    top: 305px;
} */

/* start draw arrow down */
.arrow-a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
}

.arrow-b {
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
}

.arrow-c {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
}

.arrow-d {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
}

.arrow-f {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
}


.load-animation .logoOne .arrow {
    position: relative;
    border: dotted #00d3f5;
    border-width: 0 7px 7px 0;
    display: inline-block;
    padding: 70px;
    top: 225px;
}

.load-animation .logoOne .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* Draw Arrow to UP */
.go-top::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: solid;
    border-width: 0 27px 36px 27px;
    border-color: transparent transparent #00d3f5 transparent;
}

.load-animation .logoOne {
    cursor: pointer;
}

.animation-logo {
    animation: moveToTopRight 0.5s ease-in-out forwards;
}

@keyframes moveToTopRight {
    0% {
        transform: translate(-200px, -180px);
        width: 25em;
        height: 22.5em;
        /* me cago en dios */
    }

    100% {
        transform: translate(750px, -450px);
        width: 100px;
        height: 100px;
    }
}

.slogan {
    width: 90%;
}

@media (min-width:500px) {
    .slogan {
        width: 85%;
    }
}

@media (min-width:1200px) {
    .slogan {
        width: 80%;
    }
}

.animation-slogan {
    animation: moveToTop 0.5s ease-in-out forwards;
}

@keyframes moveToTop {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(0px, -600px);
        font-size: 6em;
        font-weight: 200;
        letter-spacing: 1em;
    }
}

/* satrt bg code */

.quefem,
.quisom,
.com,
.casanostra {
    position: absolute;
    transform: rotate(-17.4deg);
    opacity: .2;
    width: 100px;
    min-width: auto;
    height: auto;
    height: 100%;
    /* TODO arreglar esto que con el css de studio no se ve si lo activas */
    z-index: -1;
    top: 0;
    width: 89%;
    /* background-color: cornflowerblue; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.quefem span,
.quisom span,
.com span {
    position: absolute;
    white-space: nowrap;
    /* background-color: green; */
    text-transform: uppercase;
    font-weight: 100;
    color: var(--cream);
    width: fit-content;
    letter-spacing: 2px;
    /* color: red; */
}

/* ----------------- */
/* size group 1 */
.quefem .s {
    font-size: 5.5em;
}

/* size group 2 */
.quefem .m {
    font-size: 9.3em;
}

/* size group 3 */
.quefem .l {
    font-size: 18.8em;
    margin-bottom: -0.1em;
}

/* ----------------- */

/* individual positions */
.quefem span:nth-of-type(1) {
    top: 26svh;
    left: 0.27em;
}

.quefem span:nth-of-type(2) {
    top: 25svh;
    right: 3em;
}

.quefem span:nth-of-type(4) {
    bottom: 20svh;
    left: 1.5em;
}

.quefem span:nth-of-type(5) {
    bottom: 6svh;
    right: 0.5em;
}

/* ===================== */

/* ----------------- */
/* size group 1 */
.quisom .s {
    font-size: 5.5em;
}

/* size group 2 */
.quisom .m {
    font-size: 9.3em;
}

/* size group 3 */
.quisom .l {
    font-size: 18.8em;
    margin-bottom: -10svh;
    margin-left: -1.67em;
}

/* ----------------- */

/* individual positions */
.quisom span:nth-of-type(1) {
    top: -10svh;
    left: 2.7em;
}

.quisom span:nth-of-type(2) {
    left: -0.35em;
    top: 30svh;
}

.quisom span:nth-of-type(4) {
    right: -0.6em;
}

.quisom span:nth-of-type(5) {
    bottom: -9svh;
    right: 1.1em;
}

/* ===================== */

/* ----------------- */
/* size group 1 */
.com .s {
    font-size: 5.5em;
}

/* size group 2 */
.com .m {
    font-size: 9.3em;
}

/* size group 3 */
.com .l {
    font-size: 12.5em;
    margin-bottom: 25svh;
    margin-left: -5.35em;
}

/* ----------------- */

/* individual positions */
.com span:nth-of-type(1) {
    top: -6svh;
    left: 4.2em;
}

.com span:nth-of-type(2) {
    right: -0.13em;
    top: 41.8svh;
}

.com span:nth-of-type(4) {
    right: 1.63em;
    bottom: 52svh;
}

.com span:nth-of-type(5) {
    bottom: 48svh;
    left: 1em;
}

/* ===================== */



/* end bg */

/* Start secction */
main .container {
    /* position: absolute; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
}

main .container .category {
    position: absolute;
    text-transform: uppercase;
}

main .container .category a {
    text-decoration: none;
}

main .category h2 {
    position: relative;
    /* font-size: 6rem; */
    /* font-size: 5em; */
    /* font-size: clamp(2em, 7vw, 5em); */
    font-size: clamp(2em, 7vw, 5em);
    font-weight: 900;
    line-height: 0.8;
    width: fit-content;
    padding-top: 0.3em;
    margin-top: -.3em;
}

main .category h2 .s {
    font-size: .8em;
}

main .category .izquierda {
    text-align: start;
    /* margin-right: 450px; */
    /* bottom: -40px; */
}

main .category .derecha {
    text-align: end;
    /* top: 40px; */
}

main .oculto {
    display: none;
}

main .visible {
    display: block;
}

/* Fade animation whit opacity */
.animation-section {
    animation: moveTobottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes moveTobottom {
    0% {
        letter-spacing: -0.5em;
        transform: translateZ(-700px) translateY(-500px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

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

main .category h2 {
    background: linear-gradient(to right, var(--blue), var(--cream));
    background-clip: text;
    -webkit-background-clip: text;
    color: var(--cream);
    display: block;
    text-transform: uppercase;
    font-weight: 900;
    cursor: pointer;
}

main .category h2 span {
    transition: all 0s;
}

main .category .izquierda:hover {
    color: rgba(255, 255, 255, 0);
}

main .category .derecha {
    background: linear-gradient(to left, var(--blue), var(--cream));
    background-clip: text;
    -webkit-background-clip: text;
}

main .category .derecha:hover {
    color: rgba(255, 255, 255, 0);
}

.galeria {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    grid-gap: 20px;
    /* background-color: green; */
    justify-content: space-between;
}

.photocard {
    font-size: clamp(.5em, 2vw, 1em);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18.1em;
    height: 19.7em;
    position: relative;
    /* box-shadow: inset 7px 14px 0px 4px var(--cream), inset -7px -14px 0px 4px var(--cream); */
    box-shadow: inset .45em .9em 0px .25em var(--cream), inset -.45em -.9em 0px .25em var(--cream);
    background-color: var(--black);
}

/* Chevron content here */

section .chevron {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 85%;
    padding: 3em 0;
}

section .chevron .box-chevron {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    grid-gap: 2em
}

section .chevron div {
    display: flex;
    align-items: center;
    width: 100%;
}

section .chevron div * {
    text-align: center;
}

section .chevron p {
    margin-right: 0;
    font-size: clamp(1.1em, 2vw, 1.6em);
    text-align: center;
    max-width: 20em;

}

.chevron .text-right p {
    margin-right: 0;
    font-size: 2rem;

}

.box-chevron img {
    height: 14em;
}

.left-chevron {
    justify-content: right;
    flex-flow: column-reverse;
}

.right-chevron {
    justify-content: left;
    flex-direction: column;
}

.left-chevron .chevron-img {
    padding-left: 2em;
    padding-right: 1em;
    display: none;
}

.right-chevron .chevron-img {
    padding-left: 1em;
    padding-right: 2em;
    display: none;
}


@media (min-width:1260px) {
    .dot-line {
        display: none !important;
    }

    .left-chevron {
        flex-flow: row;
    }

    .right-chevron {
        flex-direction: row;
    }

    .left-chevron .chevron-img {
        display: flex;
    }

    .right-chevron .chevron-img {
        display: flex;
    }

    section .chevron p {
        text-align: right;
    }

    .box-chevron>div:nth-child(1)>h3 {
        text-align: left;
    }

    .box-chevron>div:nth-child(2)>h3 {
        text-align: right;
    }

    .box-chevron>div:nth-child(3)>h3 {
        text-align: left;
    }

    .box-chevron>div:nth-child(4)>h3 {
        text-align: right;
    }

    .box-chevron>div:nth-child(2)>p {
        text-align: left;
    }

    .box-chevron>div:nth-child(4)>p {
        text-align: left;
    }

    .box-chevron>div:nth-child(6)>p {
        text-align: left;
    }

    .box-chevron>div:nth-child(8)>p {
        text-align: left;
    }
}


input,
textarea {
    background-color: var(--cream);
    border: var(--width-input-border) solid var(--co-textfld-border);
    padding: var(--padding-inputs);
    border-radius: var(--radius-inputs);
    font: inherit;
    color: inherit;
    accent-color: var(--blue);
    /* accent-color: var(--co-body-accent); */
    line-height: var(--leading-inputs);
    color: var(--black);
    max-width: 100%;
}

input {
    height: clamp(2.5em, 4.5vw, 3em);
}

textarea {
    height: clamp(10em, 20vw, 13em);
}

input:active,
textarea:active {
    transform: translate(-3px, 3px);
    box-shadow: 10px -10px 0 #00d3f5;
}

input:focus,
textarea:focus,
input:focus-visible,
textarea:focus-visible {
    outline: none;
    transform: translate(-3px, 3px);
    box-shadow: 10px -10px 0 #00d3f5;
}

button,
.button {
    height: fit-content;
    width: fit-content;
    max-width: 80vw;
    padding: 0.2em 1.3em;
    background-color: var(--cream);
    border-radius: 25px;
    border: 7px solid var(--black);
    display: inline-block;
    cursor: pointer;
    color: var(--black);
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(255, 0, 0, 0);
}

button:hover,
.button:hover {
    transform: translate(-3px, 3px);
    box-shadow: 10px -10px 0 #00d3f5;
}

footer {
    width: 100%;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--cream);
}

footer .logo {
    height: 9em;
    margin: 3em 0;
    cursor: pointer;
}

footer p,
footer a {
    font-size: 1em;
    font-weight: 300;
    color: var(--cream);
}

footer a {
    text-decoration: underline;
}

footer a:hover {
    color: var(--blue);
}

nav.menu,
nav.menu * {
    transition: none;
}

nav.menu {
    display: none;
    flex-direction: column;
    position: sticky;
    top: 0;
    right: 0;
    left: 100%;
    background-color: var(--cream);
    color: var(--black);
    width: 100%;
    height: 100vh;
    margin-top: -100vh;
    z-index: 10;
    padding-top: 7em;
    padding-left: 2em;
    transform: translateX(100%);
    border-left: 3px solid var(--black);
    box-shadow: black 0px 5px 15px;
    font-size: clamp(90%, 0.5em + 0.6vw, 100%);
}

@media (min-width:500px) {
    nav.menu {
        width: 25rem;
    }
}

nav.menu .vdivider {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background-color: var(--black);
}

nav.menu .hdivider {
    width: 0;
    height: 2px;
    background-color: var(--black);
    margin-bottom: 1em;
}

#nav-toggle {
    transition: none;
    text-align: end;
    padding: 2em;
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    width: fit-content;
    display: flex;
    font-size: clamp(.7em, 0.2em + 1vw, 1em);
}

body.light #nav-toggle {
    filter: brightness(0.15);
}

#nav-toggle .responsive-container {
    display: flex;
}


#nav-toggle img {
    cursor: pointer;
    height: 4em;
}


@media (max-width:750px) {
    #nav-toggle.mini {
        padding: 1em;
    }

    #nav-toggle.mini img {
        display: none;
    }

    #nav-toggle.mini .three-dots {
        flex-direction: row;
    }
}

nav.menu ul {
    /* border: 3px solid cornflowerblue; */
    list-style-type: none;
    padding: 0;
}

nav.menu p {
    color: var(--black);
    margin-top: 1.5em;
    /* margin-bottom: 1em; */
}

nav.menu a {
    color: var(--black);
}

nav.menu .contact li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

nav.menu .dot {
    background-color: var(--black);
    clip-path: circle(50%);
    height: 1em;
    width: 1em;
    margin-right: 5px;
}

nav.menu .links a {
    font-size: 2.5em;
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    color: var(--black);
    text-decoration: none;
}

nav p,
nav .contact a {
    font-size: 1.2em;
}

nav.menu .contact a:hover {
    color: var(--blue) !important;
}


nav.menu .links a:hover:before,
.nav-hover:before {
    position: absolute;
    content: attr(data-title);
    color: var(--blue);
    z-index: -1;
    /* transform: translate(0.07em, -0.07em); */
    transform: translate(0.1em, -0.13em);
    width: 100%;
    top: 0;
    left: 0;
}

nav.menu .social {
    display: flex;
    flex-direction: row;
    gap: 1em;
    margin-top: 1em;
}

nav.menu .social svg {
    height: 2.5em;
}

body.light nav.menu .social svg {
    fill: var(--cream);
}

nav.menu .social a:hover svg {
    fill: var(--blue);
}



body.light nav {
    background-color: var(--black);
    color: var(--cream);
    /* border-left: 3px solid var(--cream); */
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
}

body.light nav a,
body.light nav p {
    color: var(--cream) !important;
}

body.light nav .contact .dot {
    background-color: var(--cream);
}

body.light nav.menu .hdivider {
    background-color: var(--cream);
}

.dot-line {
    display: flex;
    margin: .5em 0;
}

.dot {
    clip-path: circle(50%);
    background-color: var(--blue);
    height: 1em;
    width: 1em;
    margin-right: 5px;
}

.menu-line {
    background-color: var(--cream);
    height: .4em;
    width: 1.3em;
    border-radius: 4px;
    margin-right: 5px;
}

.three-dots {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.consent-container {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    color: var(--cream);
}

body.light .consent-container {
    color: var(--black);
}

.consent-container * {
    cursor: pointer;
}

.consent-container a {
    font-size: 1em;
    text-decoration: underline;
}

.consent-container a:hover {
    color: var(--blue);
}

.consent-container input[type="checkbox"] {
    height: 1em;
    width: 1em;
    transform: none;
    box-shadow: none;
    margin: .3em;
}

.form-controls {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-top: 1em;
}