:root{
    --page-padding:22px;
    --slider-max-width:min(100%,1280px);
    --footer-bottom:18px;
    --text:#2D2D2A;
    --bg:#F9F7F4;
}

html{
    height:100%;
}

body{
    min-height:100%;
    display:flex;
    flex-direction:column;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.home{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:18px var(--page-padding) 0;
    min-height:0;
}

/* Contenedor flexible adaptado para que el móvil use el ancho completo */
.home-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}

.hero{
    width:100%;
    display:flex;
    justify-content:center;
}

.slider{
    position:relative;
    width:100%;
    max-width:100%;
    aspect-ratio:1500/1970;
}

.slide{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .7s ease,transform .35s ease;
}

.slide.active{
    opacity:1;
    pointer-events:auto;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Enlace Projects debajo del slider, margen sutil y 20% más pequeño */
.project-navigation {
    margin-top: 8px;
    width: 100%;
}

.project-navigation a {
    text-decoration: none;
    color: var(--text);
    font-size: 80%;
    --text:#2D2D2A;
    
    display: inline-block;
    transition: opacity 0.3s ease;
}

.project-navigation a:hover {
    opacity: 0.65;
}

.footer{
    margin-top:auto;
    padding:20px var(--page-padding) calc(var(--footer-bottom) + env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:10.5px;
    line-height:1.22;
}

.footer a{
    display:flex;
    align-items:center;
    width:max-content;
}

.instagram{
    display:flex;
    align-items:center;
    gap:2px;
}

.instagram img{
    height:.88em;
    width:auto;
    display:block;
}


/* iphone 13 y móviles pequeños */

@media (max-width:374px){
    :root{
        --page-padding:18px;
        --footer-bottom:14px;
    }
    .home{
        padding-top:14px;
    }
    .footer{
        font-size:9.5px;
    }
}

/* --- Ajustes para Móvil / iPhone --- */
@media (max-width: 767px) {
    .project-navigation a {
        /* Reducimos un 20% el tamaño de fuente base (asumiendo que 13px o el original escala a aprox 80%) */
        font-size: 13px; 
        /* 25% menos opaco (1 - 0.25 = 0.75) */
        opacity: 0.70; 
    }
}

/* Tablets */

@media (min-width: 768px) {
    :root {
        --page-padding: 22px;
        --slider-max-width: 760px; 
        --footer-bottom: 24px;
    }
    
    html, body {
        height: 100dvh;
        overflow: hidden;
    }

    .home {
        padding-top: 36px;
        justify-content: flex-start;
    }
    
    .hero {
        justify-content: flex-start;
        width: 100%;
    }
    
    .home-content {
        width: 760px;
        max-width: 100%;
    }
    
    .footer {
        font-size: 14px;
        line-height: 1.28;
        width: 760px;
        max-width: 100%;
        align-self: flex-start;
        padding-top: 0;
    }
}


/* Monitores Ultra Anchos, 1080p */

@media (min-width:1200px){
    :root{
        --page-padding:40px;
        --slider-max-width:1080px;
        --footer-bottom:32px;
    }
    .home{
        padding-top:40px;
        justify-content:flex-start;
    }
    .hero{
        justify-content:flex-start;
    }
    .footer{
        font-size:11px;
        line-height:1.18;
        width:1080px;
        max-width:100%;
        padding-top: 0;
    }
    .footer a {
        text-decoration: none;
        color: var(--text);
        transition: opacity 0.3s ease;
    }

    .project-navigation a {
        /* Reducimos un 20% el tamaño de fuente base (asumiendo que 13px o el original escala a aprox 80%) */
        font-size: 12.5px; 
        /* 25% menos opaco (1 - 0.25 = 0.75) */
        opacity: 0.80; 
    }

    .footer a:hover {
        opacity: 0.65;
    }
    .home-content {
        width: 100%;
        max-width: min(var(--slider-max-width), calc((100dvh - 220px) * (1500 / 1970)));
    }
    .slider img {
        transition: opacity 0.3s ease;
        filter: contrast(1.05) saturate(0.95);
    }
    .slider img:hover {
        opacity: 0.5;
        cursor: pointer;
    }
    .instagram img{
        height:.84em;
    }
}


/* Monitores Ultra Anchos, 4K y Apple 5K */

@media (min-width: 2560px) {
    :root {
        --page-padding: 60px;
        --slider-max-width: 1800px;
        --footer-bottom: 60px;
    }
    
    .home {
        padding-top: 60px;
    }
    
    .home-content {
        width: 1800px;
        max-width: 100%;
    }
    
    .footer {
        font-size: 34px; 
        line-height: 1.2;
        width: 1800px;
        padding-top: 0;
    }
    
    .instagram img {
        height: 0.84em;
    }
}