/* === SLIDES.CSS === */
/* Contiene estilos específicos para cada slide, delays de animación y media queries. */

/* --- Slide 1 (Portada) --- */
#slide-1 {
    background-color: var(--color-background);
}

#slide-1 .deco-left, 
#slide-1 .deco-right {
    position: absolute;
    top: 0;
    height: 100vh;
    z-index: 0;
    max-width: 280px;
    opacity: 0.9;
}
#slide-1 .deco-left { left: 0; }
#slide-1 .deco-right { right: 0; }

#slide-1 .title-container { 
    position: relative; 
}
#slide-1 .title-socialmedia { 
    max-width: 600px; 
    width: 100%; 
}
#slide-1 .title-portafolio { 
    max-width: 700px; 
    width: 90%; 
    margin-top: 0.5rem; 
}
#slide-1 .title-hi { 
    position: absolute; 
    top: -10%; 
    left: 50%; 
    transform: translateX(-55%); 
    width: 85px; 
}
#slide-1 .arrow { 
    color: var(--color-dark-blue); /* Color de flecha específico para slide 1 */
}


/* --- Slide 2 (Layout: "HOLA! SOMOS HIMAGEN" - Especificación detallada) --- */
#slide-2 {
    /* Fondo: Recurso 45.png */
    background-image: url('../assets/slide2/Recurso 45.png'); 
    background-size: cover;
    background-position: center;
    position: relative; 
}

/* Posicionamiento de elementos de esquina (Slide 2) */
#slide-2 .slide2-corner {
    position: absolute;
    z-index: 10;
}
#slide-2 .top-left {
    left: 5%;
    top: 4%;
    width: 136px; 
}
#slide-2 .top-right {
    right: 5%;
    top: 4%;
    width: 85px; 
}
#slide-2 .bottom-left {
    left: 5%;
    bottom: 7%;
    width: 161px; 
}
#slide-2 .bottom-right {
    right: 5%;
    bottom: 7%;
    width: 205px; 
}

/* Posicionamiento de contenido central (Slide 2) */
#slide-2 .slide2-main-content {
    position: relative;
    width: 100%;
    height: 100%;
}
#slide-2 .slide2-title-image {
    position: absolute;
    left: 15%; 
    top: 23%;  
    max-width: 60%; 
    height: auto;
    z-index: 5;
}
#slide-2 .slide2-text-image {
    position: absolute;
    left: 15%; 
    top: 52%;  
    width: 60%; 
    height: auto;
    z-index: 5;
}
#slide-2 .arrow { 
    color: #FFFFFF; /* Flechas blancas para fondo oscuro */
}


/* --- Slide 3 (Layout: "Quiénes Somos" - Especificación detallada) --- */
#slide-3 {
    /* Fondo: Textura de papel (Recurso 57.png) con fallback de color */
     background-image: url('../assets/slide3/Recurso 57.png'); 
    background-color: #0D374C;
    background-size: cover;
    background-position: center;
    position: relative; 
}

/* Posicionamiento de Elementos de Esquina (Slide 3) */
#slide-3 .slide3-corner {
    position: absolute;
    z-index: 10;
}
#slide-3 .top-left { left: 5%; top: 4%; width: 136px; }
#slide-3 .top-right { right: 5%; top: 4%; width: 85px; }
#slide-3 .bottom-left { left: 5%; bottom: 7%; width: 161px; }
#slide-3 .bottom-right { right: 5%; bottom: 7%; width: 205px; }

/* Posicionamiento de Contenido Central (Slide 3) */
#slide-3 .slide3-title-accent-arrow {
    position: absolute;
    left: 11%;
    top: 31%;
    width: 41px; 
    z-index: 3;
}
#slide-3 .slide3-title-image {
    position: absolute;
    left: 15%;
    top: 28%;
    width: 56%; 
    z-index: 2;
}
#slide-3 .slide3-title-accent-smiley {
    position: absolute;
    left: 58%;
    top: 36%;
    width: 24%; 
    z-index: 2;
}

/* Estilos de Texto Vivo (Slide 3) */
#slide-3 .slide3-live-text {
    position: absolute;
    left: 11%;
    top: 64%;
    width: 78%; 
    font-family: 'Poppins', sans-serif; 
    color: #FDFADF; 
    font-size: clamp(14px, 1.2vw, 20px); 
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-align: left;
    z-index: 2;
}
#slide-3 .slide3-live-text .highlight {
    color: #DBDB13; /* Acento amarillo */
}
#slide-3 .arrow { 
    color: #FFFFFF; /* Flechas blancas para fondo oscuro */
}


/* === Delays de Animación Específicos === */

/* Delays Generales Header/Footer (se aplican a todos los slides) */
.slide.active .slide-inner-content .slide-header .anim-item,
.slide.active .slide-footer .anim-item {
    /* Si usamos posicionamiento absoluto, estos delays generales podrían no aplicarse */
    /* Los delays específicos por slide son más robustos */
}
#slide-1.active .anim-item.title-hi { transition-delay: 0.4s; }
#slide-1.active .anim-item.title-socialmedia { transition-delay: 0.5s; }
#slide-1.active .anim-item.title-portafolio { transition-delay: 0.6s; }

/* Delays Slide 2 */
#slide-2.active .top-left { transition-delay: 0.2s; }
#slide-2.active .top-right { transition-delay: 0.3s; }
#slide-2.active .slide2-title-image { transition-delay: 0.4s; }
#slide-2.active .slide2-text-image { transition-delay: 0.6s; }
#slide-2.active .bottom-left { transition-delay: 0.8s; }
#slide-2.active .bottom-right { transition-delay: 0.9s; }
#slide-2.active .arrow { transition-delay: 1s; }

/* Delays Slide 3 */
#slide-3.active .top-left { transition-delay: 0.2s; }
#slide-3.active .top-right { transition-delay: 0.3s; }
#slide-3.active .slide3-title-accent-arrow { transition-delay: 0.4s; }
#slide-3.active .slide3-title-image { transition-delay: 0.5s; }
#slide-3.active .slide3-title-accent-smiley { transition-delay: 0.6s; }
#slide-3.active .slide3-live-text { transition-delay: 0.7s; }
#slide-3.active .bottom-left { transition-delay: 0.8s; }
#slide-3.active .bottom-right { transition-delay: 0.9s; }
#slide-3.active .arrow { transition-delay: 1s; }


/* === Media Queries para Responsividad === */
@media (max-width: 768px) {
    .slide { padding: 1.5rem; }

    /* Ajustes Slide 1 */
    #slide-1 .title-socialmedia { max-width: 400px; }
    #slide-1 .title-portafolio { max-width: 450px; }
    #slide-1 .title-hi { width: 70px; top: -5%; }

    /* Ajustes Slide 2 (Ejemplo - ajustar % de posición si es necesario) */
    #slide-2 .slide2-title-image { left: 10%; width: 70%; top: 25%; }
    #slide-2 .slide2-text-image { left: 10%; width: 80%; top: 55%; }

    /* Ajustes Slide 3 (Ejemplo - ajustar % de posición si es necesario) */
    #slide-3 .slide3-title-image { left: 10%; width: 60%; top: 30%; }
    #slide-3 .slide3-live-text { left: 10%; width: 80%; top: 60%; font-size: clamp(14px, 1.5vw, 18px); }
    #slide-3 .slide3-title-accent-smiley { left: 70%; width: 25%; }
}

@media (max-width: 480px) {
    .slide { padding: 1rem; }
    .slide-header img, .slide-footer img { max-height: 18px; }

    /* Ajustes Slide 1 */
    #slide-1 .title-socialmedia { max-width: 280px; }
    #slide-1 .title-portafolio { max-width: 320px; }
    #slide-1 .title-hi { width: 50px; }

    /* Ajustes Slide 2 (Ejemplo) */
    #slide-2 .slide2-title-image { left: 5%; width: 90%; top: 30%; }
    #slide-2 .slide2-text-image { left: 5%; width: 90%; top: 58%; }
    #slide-2 .top-left, #slide-2 .bottom-left { left: 3%; }
    #slide-2 .top-right, #slide-2 .bottom-right { right: 3%; }

    /* Ajustes Slide 3 (Ejemplo) */
    #slide-3 .slide3-title-image { left: 5%; width: 70%; top: 30%; }
    #slide-3 .slide3-live-text { left: 5%; width: 90%; top: 60%; }
    #slide-3 .slide3-title-accent-smiley { left: auto; right: 5%; top: 45%; width: 30%; }
    #slide-3 .slide3-title-accent-arrow { display: none; } /* Ocultar acento pequeño en móvil */
}
/* --- Slide 4 (Layout: "NUESTRA HISTORIA") --- */

#slide-4 {
    /* Fondo: Textura de papel (Recurso 71.png) con fallback de color */
    background-color: #455D67;
    background-image: url('../assets/slide4/Recurso 71.png'); 
    background-size: cover;
    background-position: center;
    position: relative; 
}

/* Franja decorativa izquierda */
#slide-4 .slide4-deco-strip {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 17.3%; /* Ancho relativo según especificación */
    z-index: 1;
}

/* --- Posicionamiento de Elementos de Esquina --- */
#slide-4 .slide4-corner {
    position: absolute;
    z-index: 5;
}
#slide-4 .top-left { left: 5%; top: 4%; width: 136px; }
#slide-4 .top-right { right: 5%; top: 4%; width: 85px; }
#slide-4 .bottom-left { left: 5%; bottom: 7%; width: 161px; }
#slide-4 .bottom-right { right: 5%; bottom: 7%; width: 205px; }

/* --- Posicionamiento de Contenido Central --- */
#slide-4 .slide4-title-accent-arrow {
    position: absolute;
    left: 11.5%;
    top: 31%;
    width: 41px; 
    z-index: 4;
}
#slide-4 .slide4-title-image {
    position: absolute;
    left: 15%;
    top: 28%;
    width: 56%; /* Ancho de lienzo sugerido */
    z-index: 3;
}
#slide-4 .slide4-title-accent-smiley {
    position: absolute;
    left: 58%;
    top: 36%;
    width: 24%; /* Ancho de lienzo sugerido */
    z-index: 3;
}

/* --- Estilos de Texto Vivo --- */
#slide-4 .slide4-live-text {
    position: absolute;
    left: 11%;
    top: 64%;
    width: 78%; 
    font-family: 'Poppins', sans-serif; 
    color: #FDFADF; 
    font-size: clamp(14px, 1.2vw, 20px); 
    line-height: 1.45;
    text-align: left;
    z-index: 2;
}

/* Flechas blancas para el fondo oscuro */
#slide-4 .arrow { 
    color: #FFFFFF; 
}

/* --- Delays de Animación Específicos para Slide 4 --- */
#slide-4.active .top-left { transition-delay: 0.2s; }
#slide-4.active .top-right { transition-delay: 0.3s; }
#slide-4.active .slide4-title-accent-arrow { transition-delay: 0.4s; }
#slide-4.active .slide4-title-image { transition-delay: 0.5s; }
#slide-4.active .slide4-title-accent-smiley { transition-delay: 0.6s; }
#slide-4.active .slide4-live-text { transition-delay: 0.7s; }
#slide-4.active .bottom-left { transition-delay: 0.8s; }
#slide-4.active .bottom-right { transition-delay: 0.9s; }
#slide-4.active .arrow { transition-delay: 1s; }
/* --- Slide 5 (Layout: "CÓMO SOMOS?") --- */

#slide-5 {
    /* Fondo: Textura de papel (Recurso 84.png) con fallback de color */
    background-color: #0D374C;
    background-image: url('../assets/slide5/Recurso 84.png'); 
    background-size: cover;
    background-position: center;
    position: relative; 
}

/* Franja decorativa izquierda */
#slide-5 .slide5-deco-strip {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 17.3%; /* Ancho relativo según especificación */
    z-index: 1;
}

/* --- Posicionamiento de Elementos de Esquina --- */
#slide-5 .slide5-corner { position: absolute; z-index: 5; }
#slide-5 .top-left { left: 5%; top: 4%; width: 136px; }
#slide-5 .top-right { right: 5%; top: 4%; width: 85px; }
#slide-5 .bottom-left { left: 5%; bottom: 7%; width: 161px; }
#slide-5 .bottom-right { right: 5%; bottom: 7%; width: 205px; }

/* --- Posicionamiento de Contenido Central (Superposición) --- */

/* Título base (Capa inferior del título) */
#slide-5 .slide5-title-base {
    position: absolute;
    left: 15%;
    top: 29%;
    width: 58%; /* Ancho de render sugerido */
    z-index: 3;
}

/* Superposición de aros amarillos (Capa superior del título) */
#slide-5 .slide5-title-overlay {
    position: absolute;
    left: 15%; /* Misma posición que el título base */
    top: 29%;  /* Misma posición que el título base */
    width: 58%; /* Mismo ancho que el título base */
    z-index: 4; /* Encima del título base */
}

/* Smiley */
#slide-5 .slide5-title-smiley {
    position: absolute;
    left: 59%;
    top: 36%;
    width: 24%; /* Ancho de render sugerido */
    z-index: 3;
}

/* Bloque de texto (imagen) */
#slide-5 .slide5-text-block {
    position: absolute;
    left: 15%;
    top: 56%;
    width: 78%; /* Ancho de render sugerido */
    z-index: 2;
}

/* Tira de atributos (encima del bloque de texto) */
#slide-5 .slide5-attributes {
    position: absolute;
    left: 15%;
    top: 68%;
    width: 78%; /* Ancho de render sugerido */
    z-index: 4; /* Encima del párrafo */
}

/* Flechas blancas para el fondo oscuro */
#slide-5 .arrow { 
    color: #FFFFFF; 
}

/* --- Delays de Animación Específicos para Slide 5 --- */
#slide-5.active .top-left { transition-delay: 0.2s; }
#slide-5.active .top-right { transition-delay: 0.3s; }
#slide-5.active .slide5-title-base { transition-delay: 0.4s; }
#slide-5.active .slide5-title-overlay { transition-delay: 0.5s; } /* Aparece justo después de la base */
#slide-5.active .slide5-title-smiley { transition-delay: 0.6s; }
#slide-5.active .slide5-text-block { transition-delay: 0.7s; }
#slide-5.active .slide5-attributes { transition-delay: 0.8s; }
#slide-5.active .bottom-left { transition-delay: 0.9s; }
#slide-5.active .bottom-right { transition-delay: 1.0s; }
#slide-5.active .arrow { transition-delay: 1.2s; }