/*
 * style.css
 * Estilos para Medallo Marketing (v10.3 - Corrección Portafolio Móvil)
 */

/* ======== 1. Configuración Global y Tema ======== */
html,
body {
    overflow-x: hidden;
    width: 100%;
}
body {
    background-color: #0E0E0E;
    color: #f8f9fa;
}
:root {
    --bs-primary: #0E93FF;
    --bs-primary-rgb: 14, 147, 255;
    --bs-body-color-rgb: 248, 249, 250;
    --bs-body-bg-rgb: 14, 14, 14;
    --bs-dark-subtle: #1a1a1a;
}

/* ======== 2. Tipografía y LEGIBILIDAD ======== */
h4, h5, h6, .text-primary {
    color: #0E93FF !important;
    font-weight: 700;
}
h1, h2, h3 {
    color: #FFDA2A !important;
    font-weight: 700;
}
h1.text-primary,
h2.text-primary,
h3.text-primary {
    color: #FFDA2A !important;
}

/* Sombra de texto (inicialmente sutil para desktop) */
h1, h2, h3, h4, p, .lead, li, .blockquote {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(14, 147, 255, 0.2);
}

/* ======== 3. Navbar y Footer ======== */
footer { position: relative; z-index: 10; }
.navbar .nav-link:hover,
.navbar .navbar-brand:hover { color: #0E93FF !important; }

/* ======== 4. Scrollytelling y Secciones ======== */
#scrolly-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; 
}
.full-section {
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start; 
    position: relative;
    overflow: hidden;
    padding: 70px 20px 20px 20px;
}
/* Color de fondo sutil para desktop en secciones alternas */
.bg-dark-subtle-desktop {
    background-color: var(--bs-dark-subtle);
}
#testimonials.bg-dark-subtle { /* Asegura que testimonios tenga fondo */
    background-color: var(--bs-dark-subtle) !important;
}


/* ======== 5. Estilos de Fondo de Sección (Solo Hero por defecto) ======== */
.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.bg-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, rgba(14, 14, 14, 0.8) 0%, rgba(14, 14, 14, 0.4) 100%);
    z-index: 2;
}

/* ======== 6. Sistema de Animación ======== */

/* 6a. Definiciones de animación */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: var(--animation-delay, 0s); /* Para delays escalonados */
}
.slide-in-left { transform: translateX(-50px); }
.slide-in-right { transform: translateX(50px); }
.fade-in-up { transform: translateY(40px); }


/* 6b. Animaciones Móvil (Typewriter) */
.typewriter-title {
    min-height: 1.2em;
}
.typewriter-title::after {
    content: '▋';
    color: #FFDA2A;
    animation: blink 1s step-end infinite;
}
.typewriter-title.typing-done::after {
    content: '';
    animation: none;
}
@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* Contenido post-typewriter */
.typewriter-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: 0.2s;
}
.typewriter-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 6c. Estado Visible (lo activa JS) */
.full-section.is-visible .animate-on-scroll {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* ======== 7. Estilos de Contacto y Botón Flotante ======== */
.contact-icon-link {
    transition: transform 0.3s ease;
}
.contact-icon-link:hover {
    transform: translateY(-8px);
}
.contact-icon-link:hover i {
    color: #0E93FF !important; /* Cambia a azul al pasar el mouse */
}
.floating-whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Color oficial de WhatsApp */
    color: #FFFFFF;
    border-radius: 50%;
    text-align: center;
    font-size: 2.2rem; /* Tamaño del icono */
    line-height: 60px; /* Centrado vertical */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-whatsapp-btn:hover {
    color: #FFFFFF;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}


/* ======== 8. Responsividad Móvil ======== */
@media (max-width: 991.98px) {
    
    .full-section {
        padding: 80px 20px 20px 20px;
    }
    
    /* Fuentes */
    .display-3 { font-size: 2.2rem; line-height: 1.2; }
    .display-4 { font-size: 1.9rem; line-height: 1.2; }
    .lead { font-size: 1.1rem; }
    p, .fs-5, .list-unstyled { font-size: 0.95rem; }

    /* Sombra de texto MÁS FUERTE para legibilidad sobre imágenes */
    .story-section h2, .story-section p, .story-section .lead, .story-section li {
        /* Sombra nítida + Sombra difusa y oscura */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.955);
        color: #ffffff; /* Forzar blanco sobre la imagen */
    }
    .story-section .list-unstyled {
        display: inline-block;
        text-align: left;
    }

    /* Transformar las secciones de historia */
    .story-section {
        background-position: center center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .story-section .story-image-col { display: none; }
    .story-section .story-text-col { width: 100%; }
    .story-section .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
    .story-section .typewriter-content {
        opacity: 0;
        transform: translateY(20px);
    }
    .story-section .typewriter-content.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Aplicamos los fondos dinámicamente */
    #foundation { background-image: url('/imagenes/fundacion.webp'); }
    #attraction { background-image: url('/imagenes/atraccion.webp'); }
    #conversion { background-image: url('/imagenes/conversion.webp'); }
    #about { background-image: url('/imagenes/about.webp'); }

    /* Resetea el fondo sutil de desktop */
    .bg-dark-subtle-desktop,
    #testimonials.bg-dark-subtle {
        background-color: transparent;
    }

    /* Ajuste para secciones no-historia */
    #portfolio, #contact {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ======== CAMBIO (v10.3): Arreglo Portafolio Móvil ======== */
    #portfolio .container {
        /* Organiza el contenido de la sección en columna */
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    #portfolio .row.g-4 {
        /* Hace que la fila de tarjetas sea la única parte con scroll */
        flex-grow: 1; /* Ocupa el espacio disponible */
        overflow-y: auto; /* AÑADE SCROLL INTERNO */
        min-height: 0; /* Necesario para que flex-grow funcione */
    }
    #portfolio .card-body {
        /* Reduce el padding de las tarjetas */
        padding: 1.5rem !important;
    }
    #portfolio .card h3 {
        font-size: 1.25rem; /* Reduce el h3 de la tarjeta */
    }
    #portfolio .card p {
        font-size: 0.9rem; /* Reduce el texto de la tarjeta */
        line-height: 1.4;
    }
    #portfolio .lead {
        margin-bottom: 1.5rem !important; /* Reduce el margen del subtítulo */
    }
    #portfolio .mt-5 {
        margin-top: 1.5rem !important; /* Reduce el margen de la frase de cierre */
        padding-top: 0 !important;
    }
    /* ======== FIN CAMBIO (v10.3) ======== */
}