/**
 * landing.css - Estilos específicos para el Hero y Embudo de conversión
 * Enfocado en conversión (CRO) y optimización móvil
 */

/* Bloqueo de Scroll */
body.lock-scroll, html.lock-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Control de visibilidad según estados de navegación */
body.state-hero .hero-section {
    display: flex;
}
body.state-hero .breadcrumbs {
    display: block;
}
body.state-hero .embudo-section {
    display: none !important;
}
body.state-hero .site-footer {
    display: none !important;
}

body.state-quiz .hero-section {
    display: none !important;
}
body.state-quiz .breadcrumbs {
    display: none !important;
}
body.state-quiz .embudo-section {
    display: flex;
}
body.state-quiz #quiz-container {
    display: block;
}
body.state-quiz #result-container {
    display: none !important;
}
body.state-quiz .site-footer {
    display: none !important;
}

body.state-result .hero-section {
    display: none !important;
}
body.state-result .breadcrumbs {
    display: none !important;
}
body.state-result .embudo-section {
    display: flex;
}
body.state-result #quiz-container {
    display: none !important;
}
body.state-result #result-container {
    display: block;
}
body.state-result .site-footer {
    display: block;
}

/* ==========================================================================
   Sección Hero (100vh)
   ========================================================================== */
.hero-section {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem 1.5rem 1.5rem; /* Optimizado para celular: reduce top/bottom paddings */
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-title {
    font-size: 1.85rem; /* Más compacto en celular */
    line-height: 1.25;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 1rem; /* Reducido de 1.5rem */
    letter-spacing: -0.5px;
}

.hero-title span {
    color: var(--color-primary);
}

.hero-subtitle {
    font-size: 0.95rem; /* Más compacto en celular */
    line-height: 1.45;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem; /* Reducido de 2.5rem */
    font-weight: 400;
    max-width: 500px;
}

/* Botones y CTA */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold);
    color: #000000;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1.1rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid #dfbf73;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 4px 20px rgba(167, 128, 56, 0.35);
    transition: var(--transition-smooth);
}

.btn-cta:hover,
.btn-cta:focus {
    background: var(--gradient-gold-hover);
    box-shadow: 0 6px 25px rgba(167, 128, 56, 0.5);
    transform: translateY(-2px);
}

.btn-cta:active {
    transform: translateY(0);
}

/* Espacio Placeholder para Imagen */
.hero-image-container {
    width: 100%;
    max-width: 360px; /* Cuadrado compacto en móvil */
    margin: 1.5rem auto 0;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Formato cuadrado 1:1 */
    border: none;
    box-shadow: none;
    border-radius: var(--radius-md); /* Leve redondeo en esquinas para imagen cuadrada */
}

.hero-image-placeholder {
    width: 100%;
    height: 100%;
    /* Gradiente atmosférico imitando montañas oscuras y niebla */
    background: linear-gradient(180deg, var(--color-surface) 0%, #000000 100%);
    position: relative;
}

/* Simulación de silueta de montaña elegante */
.hero-image-placeholder::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background-image: 
        radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.15), transparent 70%),
        linear-gradient(to top, rgba(10, 10, 10, 0.95), transparent 90%);
}

.hero-image-placeholder::after {
    content: "Imagen del Caso (Placeholder)";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Clases para imágenes de fondo reales (WebP) */
.hero-image-placeholder.bg-penal-cuernavaca {
    background-image: url('../img/abogado-penalista-cuernavaca.webp');
}
.hero-image-placeholder.bg-penal-federal {
    background-image: url('../img/defensa-penal-federal.webp');
}
.hero-image-placeholder.bg-penal-adolescentes {
    background-image: url('../img/defensa-penal-adolescentes.webp');
}
.hero-image-placeholder.bg-libertad-48,
.hero-image-placeholder.bg-penas-urgencias {
    background-image: url('../img/libertad-primeras-48-horas.webp');
}
.hero-image-placeholder.bg-audiencia-inicial {
    background-image: url('../img/audiencia-inicial-penal.webp');
}
.hero-image-placeholder.bg-carpeta-investigacion {
    background-image: url('../img/seguimiento-carpeta-investigacion.webp');
}
.hero-image-placeholder.bg-juicio-oral {
    background-image: url('../img/defensa-juicio-oral.webp');
}
.hero-image-placeholder.bg-ejecucion-penas {
    background-image: url('../img/ejecucion-penas-beneficios.webp');
}
.hero-image-placeholder.bg-asesoria-victimas,
.hero-image-placeholder.bg-victimas-asesoria {
    background-image: url('../img/asesoria-juridica-victimas.webp');
}
.hero-image-placeholder.bg-medidas-proteccion,
.hero-image-placeholder.bg-victimas-proteccion {
    background-image: url('../img/medidas-de-proteccion.webp');
}
.hero-image-placeholder.bg-calidad-victima {
    background-image: url('../img/reconocimiento-calidad-victima.webp');
}
.hero-image-placeholder.bg-reparacion-dano {
    background-image: url('../img/reparacion-del-dano.webp');
}
.hero-image-placeholder.bg-contratos-firma {
    background-image: url('../img/elaboracion-revision-contratos.webp');
}
.hero-image-placeholder.bg-contrato-incumplimiento,
.hero-image-placeholder.bg-incumplimiento-contrato {
    background-image: url('../img/incumplimiento-rescision-contratos.webp');
}
.hero-image-placeholder.bg-usucapion-terreno,
.hero-image-placeholder.bg-usucapion {
    background-image: url('../img/juicio-de-usucapion.webp');
}
.hero-image-placeholder.bg-reivindicatoria-propiedad,
.hero-image-placeholder.bg-propiedad-recuperar {
    background-image: url('../img/accion-reivindicatoria.webp');
}
.hero-image-placeholder.bg-escritura-registro,
.hero-image-placeholder.bg-escrituracion {
    background-image: url('../img/escrituracion-y-regularizacion.webp');
}
.hero-image-placeholder.bg-divorcio-firmas,
.hero-image-placeholder.bg-familiar-divorcio {
    background-image: url('../img/divorcio-incausado.webp');
}
.hero-image-placeholder.bg-pension-hijos,
.hero-image-placeholder.bg-pension-alimenticia {
    background-image: url('../img/pension-alimenticia.webp');
}
.hero-image-placeholder.bg-custodia-menor,
.hero-image-placeholder.bg-guarda-custodia {
    background-image: url('../img/guarda-y-custodia.webp');
}
.hero-image-placeholder.bg-adn-paternidad,
.hero-image-placeholder.bg-paternidad-adn {
    background-image: url('../img/juicio-de-paternidad.webp');
}
.hero-image-placeholder.bg-herencia-testamento,
.hero-image-placeholder.bg-sucesiones-firma {
    background-image: url('../img/juicio-testamentario.webp');
}
.hero-image-placeholder.bg-herencia-intestada,
.hero-image-placeholder.bg-sucesion-intestada {
    background-image: url('../img/juicio-intestamentario.webp');
}
.hero-image-placeholder.bg-testamento-plan {
    background-image: url('../img/elaboracion-de-testamentos.webp');
}

/* Propiedades comunes para imágenes reales */
.hero-image-placeholder[class*="bg-"],
.hero-image-placeholder[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

/* Ocultar texto de placeholder cuando hay una imagen de fondo real */
.hero-image-placeholder[class*="bg-"]::after,
.hero-image-placeholder[style*="background-image"]::after {
    display: none !important;
}



/* ==========================================================================
   Parte 2: Embudo Gamificado
   ========================================================================== */
.embudo-section {
    background-color: #000000; /* Pantalla negra sin distracciones */
    min-height: 100vh;
    padding: 6rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--color-border);
}

.embudo-container {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

/* Barra de Progreso */
.progress-wrapper {
    margin-bottom: 2.5rem;
    text-align: center;
}

.progress-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin-bottom: 0.8rem;
    display: block;
}

.progress-bar-container {
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary);
    width: 20%; /* Controlado dinámicamente */
    border-radius: var(--radius-sm);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contenedor de Preguntas del Quiz */
.quiz-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.question-text {
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-text-main);
}

.answers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Respuestas - Botones Grandes */
.btn-answer {
    width: 100%;
    background-color: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-weight: 500;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-answer::after {
    content: "→";
    font-size: 1.2rem;
    color: var(--color-primary);
    opacity: 0.5;
    transition: var(--transition-smooth);
}

.btn-answer:hover,
.btn-answer:focus {
    background-color: var(--color-border);
    border-color: var(--color-primary);
    transform: translateX(4px);
}

.btn-answer:hover::after,
.btn-answer:focus::after {
    opacity: 1;
    transform: translateX(3px);
}

/* ==========================================================================
   Pantalla de Resultado e Involucración Final
   ========================================================================== */
.resultado-card {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

.resultado-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    animation: scaleUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resultado-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-text-main);
}

.resultado-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
    text-align: justify;
}

.btn-final-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold);
    color: #000000;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1.2rem 2.2rem;
    border-radius: var(--radius-md);
    border: 1px solid #dfbf73;
    width: 100%;
    box-shadow: 0 4px 20px rgba(167, 128, 56, 0.35);
    margin-bottom: 1.5rem;
    transition: var(--transition-smooth);
}

.btn-final-cta:hover,
.btn-final-cta:focus {
    background: var(--gradient-gold-hover);
    box-shadow: 0 6px 25px rgba(167, 128, 56, 0.5);
    transform: scale(1.02);
}

/* Mensaje de Urgencia Ética */
.urgency-disclaimer {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    border-left: 2px solid var(--color-primary);
    padding-left: 1rem;
    text-align: left;
    margin-top: 1rem;
}

/* ==========================================================================
   Media Queries para Tablet y Escritorio
   ========================================================================== */
@media (min-width: 768px) {
    .hero-section {
        min-height: 100vh;
        flex-direction: row;
        align-items: center;
        gap: 3rem;
        max-width: var(--max-width);
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    
    .hero-content {
        flex: 1;
        text-align: left;
        align-items: flex-start;
    }
    
    .hero-title {
        font-size: 3rem;
        margin-bottom: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.15rem;
        margin-bottom: 3rem;
        max-width: 100%;
    }
    
    .btn-cta {
        max-width: 320px;
    }
    
    .hero-image-container {
        flex: 1;
        max-width: 550px;
        margin-top: 0;
    }
    
    .quiz-card, .resultado-card {
        padding: 3.5rem 3rem;
    }
    
    .question-text {
        font-size: 1.6rem;
    }
}

@media (min-width: 1024px) {
    /* Utilizar por lo menos el 90% del total de la pantalla en PC */
    .hero-section {
        max-width: 90vw !important;
        width: 90vw !important;
        gap: 6rem;
        margin: 0 auto;
    }

    .hero-content {
        max-width: 50% !important;
        flex: 1 1 50%;
    }

    .hero-title {
        font-size: 3.6rem !important;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.3rem !important;
        max-width: 550px;
    }

    .hero-image-container {
        max-width: 45% !important;
        flex: 1 1 45%;
        aspect-ratio: 1 / 1; /* Cuadrado 1:1 en desktop */
    }

    .embudo-container {
        max-width: 90vw !important;
        width: 90vw !important;
    }

    /* Doble columna para el Quiz (Cuestionario) */
    .quiz-card {
        display: grid !important;
        grid-template-columns: 4.5fr 5.5fr !important;
        gap: 6rem !important;
        padding: 5rem 4.5rem !important;
        align-items: center;
        text-align: left;
    }

    .quiz-info-side {
        text-align: left;
    }

    .question-text {
        font-size: 1.9rem !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        line-height: 1.35;
    }

    .progress-wrapper {
        text-align: left !important;
        margin-bottom: 2rem !important;
    }

    /* Doble columna para los Resultados del Diagnóstico */
    .resultado-card {
        display: grid !important;
        grid-template-columns: 4.5fr 5.5fr !important;
        gap: 6rem !important;
        padding: 5rem 4.5rem !important;
        text-align: left !important;
        align-items: center;
    }

    .resultado-left-side {
        text-align: left;
    }

    .resultado-icon {
        margin-left: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    .resultado-title {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .btn-final-cta {
        margin-bottom: 0 !important;
    }

    .resultado-right-side {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .resultado-text {
        font-size: 1.15rem !important;
        margin-bottom: 0 !important;
        line-height: 1.65;
    }

    .urgency-disclaimer {
        margin-top: 0 !important;
    }
}