/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Syne:wght@400..800&display=swap');


/* RESET */

*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed;overflow-x:hidden}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}img,picture,video,canvas,svg{display:block;max-width:100%;border-style:none}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next,body>div:first-child{isolation:isolate}ol,ul{list-style:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0;text-indent:0}

/* VARIABLES */

:root {
    --color-palette-black: 0, 0, 0;
    --color-palette-white: 255, 255, 255;
    --color-palette-details: 88, 88, 88;

    --font-family-logo: "Syne", sans-serif;
    --font-family-primary: "Mona Sans", sans-serif; 

    /* Ya tienen clamp
    --font-size-small: 0.875rem; /* 14 */ /* No la necesito */ /*
    --font-size-normal: 1rem; /* 16 */ /*
    --font-size-medium: 1.25rem; /* 20 */ /*
    --font-size-large: 1.50rem; /* 24 */ /* No necesita clamp */ /*
    --font-size-xlarge: 3.75rem; /* 60 */ 

    /* CLAMP FONT SIZE */ 
    --font-size-clamp-normal: clamp(1rem, calc(0.8446rem + 0.663vw), 1.375rem); /* Normal */ /* de 16 a 22 */
    --font-size-clamp-medium: clamp(1.25rem, 0.991rem + 1.105vw, 1.875rem); /* Medium */ /* de 20 a 30 */
    --font-size-clamp-large: clamp(1.5rem, 0.1364rem + 0.3636vw, 4.5rem); /* Large */  /* de 24 a 72 */
    --font-size-clamp-xlarge: clamp(3.25rem, 2.6818rem + 0.1515vw, 4.5rem); /* XLarge */ /* de 52 a 72 */

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --spacing-xsmall: 0.5rem; /* 8 */
    --spacing-small: 1rem; /* 16 */
    --spacing-normal: 1.25rem; /* 20 */
    --spacing-medium: 2.5rem; /* 40 */
    --spacing-large: 3rem; /* 48 */
    --spacing-xlarge: 4rem; /* 64 */

/* spacing desktop *//*
--spacing-xsmall: 1.75rem; /* 28px *//*
--spacing-small: 3.5rem; /* 56px  *//*
--spacing-normal: 4.25rem; /* 68px  *//*
--spacing-medium: 8.5rem; /* 136px  *//*
--spacing-large: 10.25rem; /* 164px  *//*
--spacing-xlarge: 13.75rem; /* 220px  */

    /* CLAMP SPACING */ 
    --spacing-clamp-xsmall: clamp(0.5rem, -0.018rem + 2.2099vw, 1.75rem);/* de 8 a 28px  */
    --spacing-clamp-small: clamp(1rem, -0.0359rem + 4.4199vw, 3.5rem);/* de 16 a 56px  */
    --spacing-clamp-normal: clamp(1.25rem, 0.0069rem + 5.3039vw, 4.25rem); /* de 20 a 68px  */
    --spacing-clamp-medium: clamp(2.5rem, 0.0138rem + 10.6077vw, 8.5rem);  /* de 40 a 136px  */
    --spacing-clamp-large: clamp(3rem, -0.0041rem + 12.8177vw, 10.25rem); /* de 48 a 164px  */
    --spacing-clamp-xlarge: clamp(4rem, -0.0401rem + 17.2376vw, 13.75rem);/* de 64 a 220px  */
}

/* TAG SELECTORS */

body {
    padding-top: var(--spacing-clamp-xsmall);
    padding-bottom: var(--spacing-clamp-medium);
    background: rgb(var(--color-palette-white));
    font-family: var(--font-family-primary);
    font-size: var(--font-size-clamp-normal);
    /*line-height: 1.5; */
    color: rgb(var(--color-palette-black));
}

img, video {
    display: block; /* Comportaos como bloques */
    max-width: 100%; /* No os salgáis de vuestro contenedor, tengáis el tamaño que tengáis */
}

h1 {
    font-family: var(--font-family-logo);
    font-size: var(--font-size-clamp-xlarge);
    font-weight: var(--font-weight-regular);
}

h2, h3 { 
    font-family: var(--font-family-primary);
}

a {
    display: inline-block;
    text-decoration: none;
    text-underline-offset: var(--spacing-micro);
    color: inherit;
    transition: all 0.25s ease;
}


/* UTILITY CLASSES */

.hidden {
    display: none;
}

.disable-scroll {
    overflow: hidden;
}


/* GLOBAL STUFF */

/* Site Header */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-clamp-xsmall) var(--spacing-clamp-small); /* Top/Bottom - Left/Right */
}

.site-header__logo-link{
    font-family: var(--font-family-logo);
    font-size: var(--font-size-clamp-xlarge); 
    font-weight: var(--font-weight-regular); 
}

.site-header__subtitle {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-clamp-normal); 
    font-weight: var(--font-weight-regular);
    display: none;
}

.site-header__menu-button {
    /* position: fixed; */
    z-index: 3; 
    top: var(--spacing-clamp-small);
    right: var(--spacing-clamp-small);
    background: none;
    border: none; 
    font-family: var(--font-family-primary);
    font-size: var(--font-size-clamp-normal);
    font-weight: var(--font-weight-regular);
    color: rgb(var(--color-palette-black));/*
    padding:var(--spacing-clamp-xsmall);*/
}

.site-header__menu-button--active {
    position: absolute;
    z-index: 3;
    top: 4rem;
    right: 2rem;
    padding: var(--spacing-clamp-xsmall) var(--spacing-clamp-small);
}

.site-header__mobile-menu {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    flex-direction: column;
    /* justify-content: space-between; */
    gap: var(--spacing-clamp-large);
    width: 100%;
    height: 100%;
    background: white;
    padding: var(--spacing-clamp-xlarge);
    font: var(--font-size-clamp-normal);
    opacity: var(--opacity-none);
    pointer-events: none;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), opacity 0.3s ease;
}

.site-header__mobile-menu--visible {
    opacity: var(--opacity-normal);
    pointer-events: all;
    transform: translateY(0);
}

.site-header__mobile-navigation {
    padding-left: var(--spacing-clamp-normal);
    padding-right: var(--spacing-clamp-xsmall);
    font-size: var(--font-size-clamp-normal);
}

/*
.site-header__mobile-menu-link {
    padding-bottom: var(--spacing-clamp-normal);
}*/

/* Navegación Desktop */

.site-header__desktop-navigation {
    /* --- ESTADO INICIAL (OCULTO) --- */
    display: none;
}

.site-header__desktop-menu-link {
    padding-bottom: var(--spacing-clamp-normal);
    font-size: var(--font-size-clamp-medium);
}


/* Site Footer */
.site-footer {
    position: relative;
    justify-content: center;
    padding-bottom: var(--spacing-clamp-normal);
    padding-left: var(--spacing-clamp-normal);
    padding-right: var(--spacing-clamp-normal);
}

.site-footer__pages {
    position: relative;
    padding-top: var(--spacing-clamp-small); /* Espacio reducido con el contenido superior */
    padding-bottom: var(--spacing-clamp-small);
}

/* Nuevo contenedor para centrar el contenido del footer */
.footer-content-wrapper {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-clamp-small);
    padding-right: var(--spacing-clamp-small);
}

.site-footer__project-nav {
    padding-top: var(--spacing-clamp-xsmall);
    padding-bottom: var(--spacing-clamp-normal);
}

/* La lista principal que separa las dos columnas */
.site-footer__project-nav-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinea ambas columnas por la base */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* El enlace genérico de la navegación de proyectos */
.site-footer__project-nav-link {
    font-family: var(--font-family-primary); 
    font-size: var(--font-size-clamp-normal); 
    color: rgb(var(--color-palette-black)); 
    text-decoration: none; 
}

/* La columna derecha se convierte en un layout flex vertical */
.project-nav__right-column {
    display: flex;
    flex-direction: column;   /* Apila los enlaces */
    align-items: flex-end;    /* Los alinea a la derecha */
    gap: 0.25rem;             /* Espacio vertical entre ellos */
}

/* El enlace para subir */
.site-footer__back-to-top {
    padding-bottom: var(--spacing-clamp-xsmall);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-clamp-normal);
    color: inherit;
    text-decoration: none;
}

.site-footer__copy {
    text-align: center;
    padding-bottom: var(--spacing-clamp-xsmall);
    font-size: var(--font-size-clamp-small);
    font-weight: var(--font-weight-semibold);
}

.site-footer__links { /* fila de links */
    display: flex;
    gap: var(--spacing-clamp-normal);
    justify-content: center;
}

.site-footer__link { /* link puntual */
    text-decoration: underline;
    text-decoration-thickness: 0.055em; 
}


/* CONTENT-SPECIFIC STUFF */

.video-wrapper {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    background-color: #eee; /* Color de fondo mientras carga */
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Asegura que no tenga borde */
}

/* Home */
.project-list{
    padding-top: var(--spacing-clamp-small);
    padding-right: var(--spacing-clamp-small);
    padding-left: var(--spacing-clamp-small);
}

.project-preview {
    padding-bottom: var(--spacing-clamp-normal);
    width: auto;
}

.project-preview__video { 
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block; /* Para que no tenga espacio extra debajo */
    margin-bottom: 0;
}

.project-preview__title {
    padding-top: var(--spacing-clamp-xsmall);
    padding-left: var(--spacing-clamp-small);
    font-size: var(--font-size-clamp-normal);
    font-weight: var(--font-weight-regular);
}

.project-preview__section {
    padding-top: var(--spacing-clamp-normal);
    padding-bottom: var(--spacing-clamp-normal);
    color: rgb(var(--color-palette-details));
}

.menu-section {
    padding: var(--spacing-clamp-xlarge);
}

.menu-section__title { /* Titulo en Home */
    padding-bottom: var(--spacing-clamp-normal);
    font-size: var(--font-size-clamp-large);
    font-weight: var(--font-weight-bold);
}

.main-nav__link {
    padding-bottom: var(--spacing-clamp-normal);
}

.main-nav__link--highlight {
    font-weight: var(--font-weight-bold);
}

/* Projects styles */

.project-list--full-width {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.project__copy {
    padding: var(--spacing-clamp-xsmall) var(--spacing-clamp-small);
}

.project__title {
    text-align: right;/*
    padding-top: var(--spacing-clamp-xsmall);
    padding-bottom: var(--spacing-clamp-xsmall); 
    padding-left: var(--spacing-clamp-normal);*/
    padding-right: var(--spacing-clamp-small);
    font-size: var(--font-size-clamp-normal);
    font-weight: var(--font-weight-semibold); 
    white-space: nowrap;
}

.project__introduction {
    padding-bottom: var(--spacing-clamp-small);
}

.project__description {
    padding-top: var(--spacing-clamp-small);
    padding-bottom: var(--spacing-clamp-normal);
    padding-left: var(--spacing-clamp-small);
    font-size: var(--font-size-clamp-normal);
}

.project__title--caption { /* Detalle después del titulo, lo que está más claro */
    display: inline;
    vertical-align: baseline; /* Alinear bien con el texto principal */
    padding: 0;
    font-size: var(--font-size-clamp-normal);
    font-weight: var(--font-weight-regular); 
    color: rgb(var(--color-palette-details)); 
}

.project-gallery__caption {
    display: none;
}

.project-gallery__image--mupi {
    padding-top: var(--spacing-clamp-small);
    padding-bottom: var(--spacing-clamp-small);
}

.project-gallery__description {
    text-align: left;
    padding: var(--spacing-clamp-small);
    font-size: var(--font-size-clamp-normal);
}

.project-gallery__image--background {
    background-color: rgba(244, 244, 217)
} 

.project-preview__img {
    display: block; /* Para que no tenga espacio extra debajo */
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0;
}

.project-preview__video--border {
    border-width: 0.15rem;
    border-style: solid;
    border-color: rgb(var(--color-palette-details));
}

/* Soy Ani */

.image-ani{
    padding-bottom: var(--spacing-clamp-small);
    padding-right: var(--spacing-clamp-xlarge);
    padding-left: var(--spacing-clamp-xlarge);
}

.about-description__copy {
    padding-bottom: var(--spacing-clamp-xsmall);
    padding-right: var(--spacing-clamp-normal);
    padding-left: var(--spacing-clamp-normal);
}

.about-description__copy--phrase {
    padding: var(--spacing-clamp-normal);
    font-size: var(--font-size-clamp-normal);
}

/* MEDIA QUERIES */

@media (min-width: 40rem) { /* 640px */
/*
    .project-preview__video { 
        width:clamp(343px, 21.4375rem + 11.77vw, 698px);
        max-width: 100%;
        object-fit: cover;
        aspect-ratio: 698 / 449;
    } */
    .project-gallery__description {
        padding-right: var(--spacing-clamp-small);
    }

    .project-gallery--two-columns{ 
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .project-gallery__item {
        margin-bottom: 0;
    }


.about-description__copy {
    padding-right: var(--spacing-clamp-large);
    padding-left: var(--spacing-clamp-large);
}

    .menu-section {
        display: none;
    }
} 

@media (min-width: 50rem) { /* 800px */

    .project-preview__video { 
        width: clamp(21rem, -70rem + 227.5vw, 43.75rem);
        object-fit: cover;
    }

    .project-preview__video--full-width {
        width: 100%;
    }

    .project__copy {
        display: flex;
        align-items: baseline;
        gap: var(--spacing-large);
        padding-left: var(--spacing-clamp-small);
        text-align: left;
    }

    .project-gallery__description {
        width: 50%;
        margin-left: auto; /* Empuja el elemento hacia la derecha */
        margin-right: 0;   /* Asegura que no haya margen derecho por defecto */
        text-align: right;
    }

    .project__title {
        flex: 1;
        padding-top: var(--spacing-clamp-xsmall);
        padding-bottom: var(--spacing-clamp-xsmall);
        padding-right: 0;
        white-space: nowrap;
        text-align: left;
        font-size: var(--font-size-clamp-normal);
    }

    .project__title--caption {
        padding-left: 0; 
    }

    .project__description { 
        flex: 1;
        padding-top: 0;
        padding-bottom: var(--spacing-clamp-medium);
        padding-left: 0;
    }

    /* .project-gallery--two-columns ya está definido en 40rem */
    /* .project-gallery__item ya está definido en 40rem */
    /* .project__copy ya está definido en 40rem */
    /* .project__title ya está definido en 40rem */
/*
    .project__description { 
        padding-left: var(--spacing-clamp-xsmall);
        padding-right: var(--spacing-clamp-normal);
        padding-top: 0; 
        padding-bottom: var(--spacing-large);
    } */

    .project__introduction {
        justify-content: center;
        text-align: left;
        padding-left: var(--spacing-clamp-large);
        padding-right: var(--spacing-clamp-large);
        padding-top: 0;
        padding-bottom: 0;
    }

    .project-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-clamp-small);
        padding-left: var(--spacing-clamp-small);
        padding-right: var(--spacing-clamp-small);
    }

    .project-list--full-width {
        grid-template-columns: 1fr;
    }

.about-description__copy {
    padding-right: var(--spacing-clamp-xlarge);
    padding-left: var(--spacing-clamp-xlarge);
}

    /* --- Navegación Desktop --- */

    .site-header__menu-button,
    .site-header__mobile-menu {
        display: none; 
    }

    .site-header__mobile-navigation { 
        align-self: baseline;
        padding: 0;
    }

    .site-header__desktop-navigation {
        display: block; /* Hacemos visible la ul */
    }

    .site-header__desktop-menu {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        gap: var(--spacing-small);
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .site-header__desktop-menu-link {
        font-size: var(--font-size-clamp-small);
        font-weight: var(--font-weight-regular);
        padding-bottom: 0;
        white-space: nowrap;
        text-decoration: none;
    }

    .site-header__desktop-menu-link--active { /* Para marcar que pagina es */
        font-weight: var(--font-weight-bold);
    }

    .site-header {
        /* display: flex; ya está */
        /* justify-content: space-between; ya está */
        align-items: baseline;
    }

}