html {
    scroll-behavior: smooth;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f6f6f6; /* Fondo base solicitado */
}

/* Tipografía y Tamaños */
h1, h2, h3, h4 {
    font-weight: 800;
    color: #222;
    line-height: 1.2;
}

p {
    margin-bottom: 1rem;
}

/* Contenedor */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Colores de la marca */
:root {
    --gold: #d4af5d;
    --beige: #e1cea4;
    --gray-light: #acacac;
    --bg-offwhite: #f6f6f6;
    --text-dark: #222;
}

/* Botones */
.btn {
    display: inline-block;
    padding: 14px 28px;
    background-color: var(--gold);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #b59245; /* Un dorado un poco más oscuro */
    transform: translateY(-2px);
}

.btn-large {
    font-size: 1.1rem;
    padding: 18px 36px;
}

/* Navbar */
.navbar {
    background: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Header de Sitio (Barra Superior) */
.site-header {
    background-color: #fff;
    padding: 10px 0; /* Un poco más compacto */
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Izq(flex), Centro(auto), Der(flex) */
    align-items: center;
}

.header-left {
    justify-self: start;
}

.header-center {
    justify-self: center;
    text-align: center;
}

.header-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre icono de Instagram y botón */
}

.header-insta-link {
    color: #333; /* Color oscuro para fondo blanco */
    display: flex;
    align-items: center;
    transition: color 0.3s, transform 0.2s;
}

.header-insta-link:hover {
    color: var(--gold);
    transform: scale(1.1);
}

.logo-link, .logo-link:link, .logo-link:visited {
    text-decoration: none;
    display: inline-block;
}

.logo-link .neuro, .logo-link .zen {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: 32px; /* Tamaño grande para la barra de navegación */
    letter-spacing: 1px;
    transition: color 0.3s ease;
    vertical-align: middle;
}

/* Se definen los colores para todos los estados del enlace para evitar el azul/violeta por defecto */
.logo-link .neuro,
.logo-link:link .neuro,
.logo-link:visited .neuro {
    color: var(--text-dark); /* Color oscuro para el fondo blanco */
}

.logo-link .zen,
.logo-link:link .zen,
.logo-link:visited .zen {
    color: #d4af5d; /* Tono dorado especificado */
}

.logo-link:hover .neuro {
    color: #555; /* Un poco más suave al pasar el mouse */
}

.logo-link:hover .zen {
    color: #b59245; /* Dorado más oscuro, como el hover de los botones */
}

.header-name-link {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.header-name-link:hover {
    opacity: 0.7;
}

.header-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botón Header Pequeño */
.btn-small {
    padding: 8px 16px;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
}

/* Responsive Header */
@media (max-width: 600px) {
    .header-name {
        display: none; /* En móviles muy chicos, ocultamos el nombre para priorizar Logo y Botón */
    }
    .header-content {
        display: flex;
        justify-content: space-between;
    }
    .logo-link .neuro, .logo-link .zen {
        font-size: 26px; /* Reducir tamaño del logo en móviles */
    }
}

/* Header / Hero */
.hero {
    text-align: center;
    padding: 80px 0 80px;
    background: linear-gradient(to bottom, #fff 0%, #fcfcfc 100%); /* Sutil gradiente */
}

/* Contenedor H1 Hero (Centrado y limpio) */
.hero h1 {
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #111;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 50px;
    font-weight: 500;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Botón Animado (Pulse) */
@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 93, 0.7); transform: scale(1); }
    70% { box-shadow: 0 0 0 10px rgba(212, 175, 93, 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 93, 0); transform: scale(1); }
}

.btn-pulse {
    animation: pulse-gold 2s infinite;
    box-shadow: 0 4px 15px rgba(212, 175, 93, 0.4); /* Sombra dorada permanente */
}

/* Video Containers */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 800px;
    margin: 10px auto;
    background: #000;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Secciones Generales */
section {
    padding: 60px 0;
}

section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--gold);
}

/* Social Proof - Lista de Beneficios */
.benefits-list {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #eee;
    max-width: 800px;
    margin: 0 auto;
}

.benefits-list ul {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    padding-left: 30px;
    position: relative;
}

.benefits-list li::before {
    content: "✓";
    color: var(--gold);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* FAQ Accordion Styling */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.faq-item summary {
    padding: 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none; /* Remove default triangle */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    font-size: 1.1rem;
    color: #222;
    transition: background 0.3s;
}

.faq-item summary:hover {
    background-color: #f9f9f9;
}

/* Custom indicator for details */
.faq-item summary::after {
    content: '+';
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--gold);
    transition: transform 0.3s;
}

.faq-item[open] summary::after {
    transform: rotate(45deg); /* Rotate to 'x' when open */
}

.faq-content {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    background-color: #fcfcfc;
    color: #555;
    line-height: 1.6;
}

/* Casos de Éxito - Estilo Revertido (Video abajo) */
.case-study {
    background: #fff;
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.case-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.case-header img {
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    object-fit: cover;
    border: 2px solid var(--gold);
}

.case-study h3 {
    font-size: 1.4rem;
    color: #222;
    margin: 0;
}

.case-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

.video-fallback {
    text-align: center;
    font-size: 0.85rem;
    color: #888;
    margin-top: 10px;
}

/* Sobre Flavio */
.about-section {
    background-color: var(--beige); /* Un toque de color diferente */
    color: #222;
    scroll-margin-top: 90px; /* Compensación para el header fijo */
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: start;
}

.about-photo {
    width: 100%;
    border-radius: 8px;
    background-color: #ccc; /* Placeholder color */
    height: 400px;
    object-fit: cover;
}

/* Pilares / Fases */
.pillars-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pillar-card {
    background: #fff;
    padding: 30px;
    border-top: 5px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    flex: 1 1 350px; /* Base más ancha (350px) y permite crecer */
    max-width: 600px; /* Para que no se estiren infinitamente en pantallas gigantes */
    transition: transform 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-5px);
}

.pillar-card h3 {
    margin-bottom: 15px;
    color: var(--gold);
    font-size: 1.25rem;
}

.pillar-card p {
    font-size: 0.95rem;
    color: #666;
}

/* Resumen Final / Situación */
.summary-section {
    background-color: #fff;
    color: #333;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.summary-section h2 {
    color: var(--gold);
    margin-bottom: 30px;
}

.summary-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

.summary-content p {
    margin-bottom: 1.5rem;
}

/* Preguntas Finales */
.final-questions {
    background-color: var(--bg-offwhite);
    text-align: center;
    padding: 80px 0;
}

.final-questions h2 {
    color: #222;
    font-size: 2rem;
    margin-bottom: 10px;
}

.final-questions h2.highlight {
    color: var(--gold);
    font-size: 2.2rem;
    margin-top: 10px;
}

/* FAQ */
.faq-section {
    background-color: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}


/* Footer */


footer {


    background-color: #111;


    color: var(--gray-light);


    text-align: center;


    padding: 30px 0; /* Reducido de 50px a 30px */


}





footer a {


    color: var(--gray-light); /* Texto gris por defecto */


    text-decoration: none;


    transition: color 0.3s;


}





footer a:hover {


    color: var(--gold);


}





.social-links {


    margin-bottom: 20px;


}





.instagram-link {


    display: inline-flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    color: #fff !important; /* Icono blanco por defecto */


    opacity: 0.8;


    transition: transform 0.3s, opacity 0.3s, color 0.3s;


}





.instagram-link:hover {


    opacity: 1;


    transform: translateY(-3px);


    color: var(--gold) !important; /* Icono dorado al hover */


}





.social-icon {


    fill: currentColor; /* Hereda el color del texto/link */


}





/* Responsive */


@media (max-width: 768px) {




        .about-grid {




            grid-template-columns: 1fr;




        }




    




        /* Ajuste para que la foto no se deforme en celular */




        .about-photo {




            height: auto;




            width: 100%;




            max-width: 400px; /* Para que no sea gigante */




            margin: 0 auto; /* Centrarla */




            display: block;




        }




        




        /* Hero Branding en movil: Puede que queramos apilarlos si el texto es muy largo, 

       o mantenerlos lado a lado pero con texto mas chico */

    .hero-branding {

        flex-direction: column; /* En celulares muy angostos, mejor uno arriba del otro */

        text-align: center;

        gap: 10px;

    }



    .hero h1 {

        font-size: 1.8rem;

        text-align: center; /* Centrar texto en movil si el logo está arriba */

    }



    .btn-large {

        /* width: 100%;  <- ELIMINADO: Ya no ocupan todo el ancho */

        width: auto;     /* Dejar que se ajuste al texto */

        min-width: 250px; /* Un mínimo decente para que sea tapeable */

        text-align: center;

    }

    

        .pillar-card {

    

            flex-basis: 100%; /* En movil, ocupar todo el ancho disponible */

    

        }

    

    

    

        /* Videos más grandes en celular pero con un poquito de margen */
        .case-study {
            padding: 20px 8px; /* Márgenes laterales muy finos (8px) */
        }

        .case-study .video-container {
            width: 100%; /* Ocupa el ancho disponible (restado el padding) */
            margin-left: 0;
            margin-right: 0;
            border-radius: 4px; 
            margin-bottom: 0;
        }

    }