/* ========================================
   SECCIONES - Historia y Contacto
   Litl Studio Website
   
   - Secciones con sistema de capas fijas
   - Animaciones de entrada al scroll
   - Diseño centrado y limpio
   ======================================== */

/* ==================
   BASE SECTION
   ================== */

   .section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: var(--color-bg);
    
    padding: 4rem 2rem;
}

/* Contenido de la sección */
.section__content {
    max-width: var(--max-width-text);
    text-align: left;
    
    /* Estado inicial para animación */
    opacity: 0;
    transform: translateY(40px);
    
    /* Transición suave */
    transition: opacity var(--timing-slow) var(--ease-smooth),
                transform var(--timing-slow) var(--ease-smooth);
}

/* Estado visible (activado por JavaScript) */
.section__content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================
   SECCIÓN HISTORIA
   ================== */

.section--about {
    /* Inicialmente relative con margin para empujar el contenido */
    position: relative !important;
    margin-top: 100vh !important;
    z-index: 200 !important;
    background: var(--color-bg) !important;
    min-height: 100vh !important;
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease !important;
}

/* Cuando llega a su posición, se vuelve fixed */
.section--about.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
}

/* About con blur cuando Contact la solapa */
.section--about.blurred {
    filter: blur(8px) !important;
    opacity: 0.7 !important;
}

.section__title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: -1rem;
    line-height: var(--line-height-tight);
}

.section__text {
    margin-top: 2rem;
}

.section__text p {
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
    text-align: left;
}

.section__text p:last-child {
    margin-bottom: 0;
}

/* ==================
   SECCIÓN CONTACTO
   ================== */

.section--contact {
    position: relative !important;
    margin-top: 200vh !important; /* Doble del viewport para dar espacio de scroll */
    z-index: 300 !important;
    background: var(--color-bg) !important;
    min-height: 100vh !important;
}

.contact__message {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin-bottom: 2rem;
    font-weight: var(--font-weight-regular);
}

.contact__email {
    display: inline-block;
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    text-decoration: none;
    
    /* Línea decorativa */
    /* border-bottom: 3px solid transparent;
    padding-bottom: 0.25rem;
    
    transition: border-color var(--timing-medium) var(--ease-smooth),
                transform var(--timing-fast) var(--ease-smooth); */
    
    cursor: none; /* Cursor personalizado */
}

.contact__email:hover {
    border-bottom-color: var(--color-accent);
    transform: translateY(-2px);
}

/* ==================
   RESPONSIVE
   ================== */

/* Tablet */
@media (max-width: 1024px) {
    .section {
        padding: 3rem 2rem;
    }
    
    .section__content {
        max-width: 700px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .section {
        padding: 2rem 1rem;
        min-height: 100vh;
        height: auto;
    }
    
    .section__content {
        max-width: 100%;
        padding: 2rem 0;
    }
    
    .section__title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .section__text p {
        font-size: 1rem;
        margin-bottom: 1.25rem;
        text-align: left;
    }
    
    .contact__message {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        text-align: left;
    }
    
    .contact__email {
        font-size: 1.5rem;
        word-break: break-word;
    }
}

/* Mobile muy pequeño */
@media (max-width: 375px) {
    .section {
        padding: 1.5rem 1rem;
    }
    
    .section__title {
        font-size: 1.75rem;
    }
    
    .contact__email {
        font-size: 1.25rem;
    }
}

/* ==================
   ANIMACIÓN DE SCROLL
   ================== */

/* Fade in desde abajo cuando aparece en viewport */
@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplicar animación cuando la sección es visible */
.section__content.visible {
    animation: sectionFadeIn var(--timing-slow) var(--ease-smooth);
}