/* --- CAPA HISTORIA BASE --- */
#full-story-layer { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(90deg, #FDE0D0 0%, #FBE0E9 50%, #F6D9ED 100%); 
    z-index: 5000; display: none; flex-direction: column; 
    padding: 100px 5% 40px; overflow-y: auto; opacity: 0; transition: opacity 0.6s ease; 
}
#full-story-layer.active { display: flex; opacity: 1; }

/* BOTÓN VOLVER RESTAURADO */
.back-to-island { 
    position: fixed; top: 25px; left: 25px; /* Posición original exacta */
    background: #fff; border: 1.5px solid #9966ff; color: #9966ff; 
    padding: 8px 16px; border-radius: 50px; font-size: 10px; 
    font-weight: 800; cursor: pointer; z-index: 6000; transition: all 0.3s; 
}
.back-to-island:hover { background: #9966ff; color: #fff; }

/* TÍTULOS Y CABECERA */
.story-wrapper { max-width: 900px; margin: 0 auto; color: #1a1a1a; }
.story-header h1 { font-size: 40px; line-height: 1.1; margin: 20px 0; }
.gradient-text { background: linear-gradient(90deg, #9966ff, #00f2ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* LÍNEA DE TIEMPO SUTIL */
.story-grid { 
    position: relative; display: flex; flex-direction: column; 
    gap: 120px; margin-top: 60px; padding-bottom: 100px; 
}

/* El Eje Central */
.story-grid::before { 
    content: ''; position: absolute; left: 50%; top: 0; 
    width: 2px; height: 100%; 
    background: linear-gradient(to bottom, #9966ff, #00f2ff, transparent); 
    transform: translateX(-50%); 
}

.grid-item { display: flex; align-items: center; width: 100%; position: relative; z-index: 1; }

/* Zig-Zag Limpio */
.grid-item:nth-child(odd) { flex-direction: row; }
.grid-item:nth-child(even) { flex-direction: row-reverse; text-align: right; }

/* EL NODO (Círculo de la historia sutil) */
.grid-item::after {
    content: ''; position: absolute; left: 50%; top: 50%; 
    width: 14px; height: 14px; background: #fff; 
    border: 3px solid #9966ff; border-radius: 50%; 
    transform: translate(-50%, -50%); 
    box-shadow: 0 0 10px rgba(153, 102, 255, 0.4); z-index: 2; 
}

/* ESPACIADO PARA QUE NADA SE TOQUE (100px de aire) */
/* 1. Aseguramos que las cajas tengan el mismo ancho */
.item-text-box, .image-container { 
    flex: 1; 
    width: 50%; 
}

/* 2. ESPACIADO REAL: Empujamos el texto lejos de la línea */

/* Cuando el texto está a la DERECHA (Hitos impares) */
.grid-item:nth-child(odd) .item-text-box { 
    padding-left: 80px;  /* Espacio desde la línea hacia la derecha */
    text-align: left;
}

/* Cuando el texto está a la IZQUIERDA (Hitos pares) */
.grid-item:nth-child(even) .item-text-box { 
    padding-right: 80px; /* Espacio desde la línea hacia la izquierda */
    text-align: right;
}

/* 3. Ajuste de los contenedores de imagen para que no estorben */
.grid-item:nth-child(odd) .image-container { padding-right: 40px; }
.grid-item:nth-child(even) .image-container { padding-left: 40px; }
.image-container { flex: 1; display: flex; justify-content: center; position: relative; }

/* Estilo de los personajes */
.story-icon { 
    width: 280px; height: auto; 
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.05)); 
    transition: transform 0.5s ease; 
}
.grid-item:hover .story-icon { transform: translateY(-10px); }

/* Textos de los hitos corregidos */
.grid-item span { font-size: 12px; color: #9966ff; font-weight: 900; letter-spacing: 3px; display: block; margin-bottom: 8px; }
.grid-item h3 { font-size: 24px; color: #1a1a1a; margin-bottom: 10px; }
.grid-item p { font-size: 15px; color: #555; line-height: 1.6; max-width: 450px; }
.grid-item:nth-child(even) p { margin-left: auto; }

/* --- RESPONSIVIDAD TOTAL ONCLIP --- */
/* --- RESPONSIVIDAD TOTAL ONCLIP (ACTUALIZADA) --- */
@media (max-width: 768px) {
    #full-story-layer {
        padding: 70px 15px 40px !important; /* Reducimos padding lateral para ganar espacio */
    }

    .story-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .story-header h1 { 
        font-size: 28px !important; /* Título más pequeño para que no desborde */
        line-height: 1.2 !important;
        word-wrap: break-word;
    }

    .story-grid {
        gap: 60px !important; /* Reducimos el espacio vertical entre hitos */
    }

    /* La línea del tiempo más a la izquierda para dejar espacio al texto */
    .story-grid::before { 
        left: 10px !important; 
    }

    .grid-item::after { 
        left: 10px !important; 
        top: 20px !important;
    }

    .grid-item, .grid-item:nth-child(even) { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        text-align: left !important; 
        padding-left: 35px !important; /* Espacio para que el texto no toque la línea */
        width: 100% !important;
    }

    .item-text-box { 
        width: 100% !important; 
        padding: 0 !important;
    }

    .grid-item h3 {
        font-size: 20px !important;
    }

    .grid-item p { 
        max-width: 100% !important; /* El texto ahora ocupa todo el ancho de la pantalla */
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-left: 0 !important;
    }

    .story-icon { 
        width: 180px !important; /* Imagen un poco más pequeña para dar prioridad al texto */
        margin-bottom: 10px !important;
    }
}