/* ============================================= */
/* ARCHIVO 2: style.css (CORREGIDO)     */
/* ============================================= */

/* === Configuración Global === */
:root {
    --color-primario: #E67E22; /* Naranja profesional */
    --color-primario-oscuro: #D35400;
    --color-fondo: #2c3e50; /* Un fondo oscuro/elegante */
    --color-tarjeta: #ffffff;
    --color-texto-claro: #ecf0f1;
    --color-texto-oscuro: #333;
    --color-texto-secundario: #95a5a6;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto-claro);
    margin: 0;
    padding: 0;
    overflow: hidden; /* Evita el scroll vertical */
}

/* === El Contenedor Principal (Horizontal) === */
.container-principal {
    width: 100%;
    height: 100vh; /* Ocupa toda la pantalla */
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    /* La Magia del Scroll Horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
}

/* === Cada Pantalla (Slide) === */
.pantalla {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    scroll-snap-align: start; /* Se "pega" al inicio */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    box-sizing: border-box; /* Importante para que el padding no rompa el 100% */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contenido-pantalla {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* Permite scroll vertical SOLO en la última pantalla */
.scrollable-y {
    overflow-y: auto;
    align-items: flex-start; /* Alinea al inicio */
    padding-top: 60px; /* Espacio para el header */
    /* Estilo de la barra de scroll para Chrome/Safari */
    &::-webkit-scrollbar {
        width: 8px;
    }
    &::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
        border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb {
        background: var(--color-primario);
        border-radius: 4px;
    }
}

/* === Pantalla 1: Hub de Conexión === */
#pantalla-1 {
    background: linear-gradient(-45deg, var(--color-primario), var(--color-primario-oscuro), var(--color-primario), var(--color-primario-oscuro));
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.foto-perfil-v2 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid white;
    object-fit: cover;
    margin-bottom: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

#pantalla-1 h1 {
    margin: 10px 0 5px 0;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

#pantalla-1 h2 {
    margin: 0;
    font-size: 16px; 
    font-weight: 300;
    line-height: 1.4;
    color: white;
    max-width: 500px;
    margin: 0 auto 20px auto;
}

.estado {
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 25px;
}

.luz-verde {
    width: 10px;
    height: 10px;
    background-color: #2ecc71;
    border-radius: 50%;
    margin-right: 10px;
    animation: pulso-verde 2s infinite;
}

@keyframes pulso-verde {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* === HUB DE CONTACTO: ICONOS FLOTANTES 3D (NUEVO) === */
.hub-contacto.iconos-flotantes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que se ajusten en móviles */
    gap: 20px; /* Espacio entre los iconos */
    margin-top: 30px;
}

.boton-contacto-flotante {
    display: block;
    transition: all 0.3s ease;
}

.boton-contacto-flotante img {
    width: 65px; /* Tamaño de los iconos */
    height: 65px;
    object-fit: contain;
    /* Sombra sutil para el efecto "flotante" */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transition: all 0.3s ease;
}

.boton-contacto-flotante:hover {
    transform: scale(1.15) translateY(-5px); /* Zoom y elevación */
}

.boton-contacto-flotante:hover img {
    /* Sombra más pronunciada al pasar el mouse */
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.3));
}


.indicador-scroll {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    animation: pulso-texto 1.5s infinite alternate;
}

@keyframes pulso-texto {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* === Pantallas 2, 3, 4 (Fondo oscuro) === */
#pantalla-2, #pantalla-3, #pantalla-4 {
    background-color: var(--color-fondo);
    color: var(--color-texto-claro);
}

.titulo-seccion-v2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primario);
    margin-top: 0;
    margin-bottom: 30px;
}

/* === Pantalla 2: Dashboard === */
.dashboard-impacto {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 30px;
}
.stat-item .contador {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primario);
}
.stat-item p {
    font-size: 16px;
    color: var(--color-texto-secundario);
    margin: 0;
}
.bio-v2 {
    font-size: 17px;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-texto-claro);
}

/* === Pantalla 3: Credenciales === */
.galeria-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
}
.logo-item {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background-color: #34495e;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo-item:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.logo-item img {
    max-height: 60px;
    width: auto;
    max-width: 100%;
    margin-bottom: 10px;
    filter: brightness(0) invert(1); /* Hace logos blancos */
}
.logo-item p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    color: var(--color-texto-secundario);
}

/* === Pantalla 4: Detalles === */
details {
    background-color: #34495e;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #4a6580;
}
details[open] {
    border-color: var(--color-primario);
}
summary {
    padding: 15px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    outline: none;
    list-style: none;
}
summary::before {
    content: '►';
    margin-right: 10px;
    font-size: 12px;
    transition: transform 0.2s;
}
details[open] summary {
    color: var(--color-primario);
}
details[open] summary::before {
    transform: rotate(90deg);
}
.details-content {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #4a6580;
    text-align: left;
}
.footer-v2 {
    text-align: center;
    padding: 30px 0 10px 0;
    font-size: 14px;
    color: var(--color-texto-secundario);
}
.volver-inicio {
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 700;
}

/* === REGLAS PARA MÓVILES === */
@media (max-width: 700px) {
    #pantalla-1 h1 { font-size: 24px; }
    #pantalla-1 h2 { font-size: 14px; }
    .foto-perfil-v2 { width: 150px; height: 150px; }
    
    .hub-contacto.iconos-flotantes {
        gap: 15px; /* Menos espacio entre iconos en móvil */
    }
    .boton-contacto-flotante img {
        width: 50px; /* Iconos un poco más pequeños en móvil */
        height: 50px;
    }
    
    .dashboard-impacto {
        flex-direction: column;
        gap: 20px;
    }
    .stat-item .contador { font-size: 40px; }

    .galeria-logos {
        grid-template-columns: 1fr;
    }
}