/* =================================================================
   CSS for the LIORAT Landing Page
   ================================================================= */

/* --- Full-Width Override --- */
/* This targets your theme's containers ONLY when this specific page is active. */
body.liorat-full-width-page .grid-container,
body.liorat-full-width-page .site-content,
body.liorat-full-width-page .content-area,
body.liorat-full-width-page .inside-article {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- General Styles --- */
.liorat-landing-page { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
}

.liorat-landing-page h1, 
.liorat-landing-page h2, 
.liorat-landing-page h3 { 
    font-family: 'Playfair Display', serif; 
    font-weight: 700; 
    color: #111; 
}

/* --- Hero Section with Video --- */
.landing-hero {
    position: relative;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;

    /* --- NUEVO: Añadido para la versión de imagen --- */
    background-size: cover;
    background-position: center center;
}

.video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* --- NUEVO: Oculta el <video> si estamos en modo imagen --- */
.hero-with-images .video-background {
    display: none;
}

/* =================================================================
   LÓGICA DE MODO DE TEXTO (CLARO / OSCURO)
   ================================================================= */

/* --- MODO POR DEFECTO: Texto claro (sobre fondo oscuro/video) --- */
.landing-hero.text-mode-light .video-overlay {
    position: absolute;
    inset: 0;
    /* MODIFICADO: Gradiente más fuerte en la base y 100% limpio arriba */
    background: linear-gradient(
        to bottom, /* De arriba hacia abajo */
        rgba(0, 0, 0, 0.0) 0%,  /* 100% transparente en el borde superior */
        rgba(0, 0, 0, 0.1) 40%, /* Ligeramente oscuro en el centro */
        rgba(0, 0, 0, 1) 100% /* 70% oscuro en la base (más contraste) */
    );
    z-index: 1;
}

.landing-hero.text-mode-light .hero-content .pre-headline,
.landing-hero.text-mode-light .hero-content h1,
.landing-hero.text-mode-light .hero-content .subtitle {
    color: #fff; /* Texto blanco */
}

/* El botón de cristal funciona bien en modo claro (fondo oscuro) */
.landing-hero.text-mode-light .lr-btn-banner {
    background-color: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    color: #fff; 
}

/* --- NUEVO MODO: Texto oscuro (sobre fondo claro) --- */
.landing-hero.text-mode-dark .video-overlay {
    display: none; /* Ocultamos la capa oscura */
}

.landing-hero.text-mode-dark .hero-content .pre-headline {
    color: #6b7280; /* Texto gris */
}
.landing-hero.text-mode-dark .hero-content h1 {
    color: #111; /* Texto negro */
}
.landing-hero.text-mode-dark .hero-content .subtitle {
    color: #4b5563; /* Texto gris oscuro */
}

/* El botón de cristal no funciona en fondo claro, usamos un botón sólido */
.landing-hero.text-mode-dark .lr-btn-banner {
    background-color: #111;
    color: #fff;
    border: 1px solid #111;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.landing-hero.text-mode-dark .lr-btn-banner:hover {
    background-color: #333;
    border-color: #333;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.hero-content {
    position: relative;
    z-index: 2;
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.hero-content .pre-headline { 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.9rem; 
}

.hero-content h1 { 
    font-size: clamp(2.5rem, 6vw, 4.5rem); 
    line-height: 1.1; 
    margin: 1rem 0; 
}

.hero-content .subtitle { 
    font-size: 1.125rem; 
    opacity: 0.9; 
    max-width: 600px; 
    margin: 0 auto; 
}
/* --- --------------------------------------------------------------Inicio boton header --- */
.lr-btn-banner {
  display: inline-block;
  
  /* === INICIO CAMBIOS PARA EFECTO CRISTAL === */

  /* 1. Fondo translúcido (ajusta el 0.15 a tu gusto) */
  background-color: rgba(255, 255, 255, 0.15); 
  
  /* 2. El desenfoque del fondo (la magia) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
  
  /* 3. Borde sutil para */
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* 4. Sombra suave para dar profundidad */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

  /* 5. Color de texto (blanco suele verse mejor en este efecto) */
  color: #fff; 

  /* === FIN CAMBIOS === */
  
  padding: 14px 32px;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 9999px; /* Perfecto para la forma  */
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 2rem;
}

.lr-btn-banner:hover {
  /* Hacemos el cristal un poco más  en hover */
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
  
  /* Tus efectos de hover (que están geniales) */
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* ----------------------------------------------------------------------------------------Fin boton header------------------------- --- */
/* --- Social Proof Section --- */
.social-proof { 
    text-align: center; 
    padding: 4rem 2rem; 
    background: #f9f9f9; 
}

.social-proof h3 { 
    color: #aaa; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.8rem; 
    margin-bottom: 2.5rem; 
}

.logos { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 4rem; 
    flex-wrap: wrap; 
}

.logos img { 
    max-height: 25px; 
    filter: grayscale(100%) opacity(0.5); 
    transition: all 0.3s ease; 
}

.logos img:hover { 
    filter: grayscale(0%) opacity(1); 
}

/* --- How It Works - VERSIÓN MODERNA --- */
.process-infographic { 
    padding: 4rem 1.5rem; 
    text-align: center; 
    background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%);
}

.process-infographic h2 { 
    font-size: clamp(1.75rem, 5vw, 2.5rem); 
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
}

.process-infographic h2 span {
    display: block;
    font-size: 0.5em;
    color: #6b7280;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Inter, Roboto, Arial, sans-serif;
}

.process-steps { 
    display: flex; 
    justify-content: center; 
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.step { 
    flex: 1; 
    max-width: 340px; 
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.step-number { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #111 0%, #333 100%);
    border-radius: 50%;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.step h3 { 
    font-size: 1.375rem; 
    margin: 0 0 1rem 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.step p { 
    color: #4b5563; 
    font-size: 0.938rem; 
    line-height: 1.7;
    margin: 0;
}

.step:not(:last-child)::after { 
    display: none;
}

/* --- AI Visualizer Section --- */
.ai-visualizer { 
    padding: 6rem 2rem; 
    background: #111; 
    color: #fff; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 4rem; 
    align-items: center; 
}

.ai-text { 
    max-width: 450px; 
}

.ai-text h2 { 
    color: #fff; 
    font-size: clamp(2rem, 5vw, 2.5rem); 
}

.ai-text p { 
    color: #ccc; 
    line-height: 1.7; 
}

.ai-slider-container { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 3/5; 
    overflow: hidden; 
    border-radius: 16px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
}

.ai-slider-image { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.image-after { 
    clip-path: inset(0 0 0 50%); 
}

.slider-handle { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 4px; 
    height: 100%; 
    background: #fff; 
    cursor: ew-resize; 
    z-index: 10; 
}

.slider-handle::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 40px; 
    height: 40px; 
    border: 2px solid #fff; 
    border-radius: 50%; 
    background: rgba(0,0,0,0.3); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
}

/* --- Final CTA Section --- */
.final-cta-section { 
    text-align: center; 
    padding: 6rem 2rem; 
    background: #f9f9f9; 
}

.final-cta-card { 
    background: #fff; 
    border-radius: 16px; 
    padding: 4rem; 
    max-width: 800px; 
    margin: 0 auto; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); 
}

.final-cta-card h2 { 
    font-size: clamp(2rem, 5vw, 2.5rem); 
    margin-bottom: 2rem; 
}

/* --- Responsiveness for Landing --- */
@media(max-width: 900px) {
    .process-steps { 
        flex-direction: column; 
        align-items: center; 
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .step {
        max-width: 100%;
        width: 100%;
        padding: 2rem 1.5rem;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
    
    .step h3 {
        font-size: 1.25rem;
    }
    
    .step p {
        font-size: 0.875rem;
    }
    
    .ai-visualizer { 
        grid-template-columns: 1fr; 
    }
}

@media(max-width: 640px) {
    .process-infographic {
        padding: 3rem 1rem;
    }
    
    .process-infographic h2 {
        margin-bottom: 2rem;
    }
}
/* --- How It Works - CON IMAGEN DE FONDO --- */
.process-infographic { 
    padding: 4rem 1.5rem; 
    text-align: center; 
    position: relative;
    overflow: hidden;
    background: 
        linear-gradient(135deg, #f5e6d3 0%, #f9f3ee 50%, #ead5c1 100%);
}

/* Noise texture overlay */
.process-infographic::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.03) 0px,
            transparent 1px,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.03) 0px,
            transparent 1px,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 3px
        );
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.process-infographic h2,
.process-steps {
    position: relative;
    z-index: 1;
}

.process-infographic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    z-index: 0;
}

.process-infographic h2,
.process-steps {
    position: relative;
    z-index: 1;
}

.process-infographic h2 { 
    font-size: clamp(1.75rem, 5vw, 2.5rem); 
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
}

.process-infographic h2 span {
    display: block;
    font-size: 0.5em;
    color: #6b7280;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Inter, Roboto, Arial, sans-serif;
}

.process-steps { 
    display: flex; 
    justify-content: center; 
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.step { 
    flex: 1; 
    max-width: 340px; 
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.85);
}
.step-number { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111;
    position: relative;
    /* Inner glass circle */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Aro exterior de cristal */
.step-number::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
}

.step:hover .step-number {
    transform: scale(1.08);
}

.step:hover .step-number::before {
    inset: -8px;
    background: rgba(255, 255, 255, 0.25);
}
/* --- INICIO: Sticky Scroll Slider --- */

.liorat-scroll-wrapper {
    /* Define el "recorrido" del scroll. 200vh = 2 veces la altura de la pantalla. */
    /* Ajusta este valor si quieres que el scroll sea más largo o corto */
    height: 200vh;
    position: relative;
    /* Mantiene el fondo negro de la sección */
    background: #111;
}

/* Solo en ESCRITORIO (desktop) activamos el sticky */
@media (min-width: 901px) {
    .ai-visualizer#sticky-slider-section {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        display: grid;
        align-items: center;
        overflow: hidden;
        will-change: transform; /* <-- FUSIONADO AQUÍ */
    }

    .ai-slider-container#image-comparison-slider .image-after {
        clip-path: inset(0 0 0 100%);
        will-change: clip-path; /* <-- FUSIONADO AQUÍ */
    }

    .slider-handle-mobile {
        display: none;
    }
}

/* En MÓVIL (max-width: 900px) NO hay sticky */
@media (max-width: 900px) {
    .liorat-scroll-wrapper {
        height: auto; /* Altura normal en móvil */
        padding: 4rem 1.25rem; /* Re-aplica el padding que tenías */
    }
    
    /* ¡AQUÍ ESTÁ LA MAGIA! */
    /* Aplicamos el clip-path a .image-after (la elegante) */
    .image-after { 
        /* Oculta el 90% de la imagen "After" (elegante) desde la izquierda,
           coincidiendo con la posición 'left: 90%' del handle. */
        clip-path: inset(0 0 0 90%); 
    }

    /* El handle (la línea) en 90% (esto está bien) */
    .slider-handle-mobile {
        position: absolute; 
        top: 0; 
        left: 90%; 
        transform: translateX(-50%); 
        width: 4px; 
        height: 100%; 
        background: #fff; 
        cursor: ew-resize; 
        z-index: 10; 
    }
    
    /* Chevrones '<<' a la izquierda del círculo (indicando "arrastra para revelar") */
    .slider-handle-mobile::before {
        content: '<<';
        position: absolute;
        top: 50%;
        right: 25px; /* A la izquierda de la línea, correcto */
        transform: translateY(-50%);
        color: #666; /* Color gris como en tu captura */
        font-weight: 600;
        font-size: 22px; /* Tamaño grande como en tu captura */
        opacity: 0.7;
        animation: mobileHandlePulse 2.5s infinite ease-in-out 0.1s;
    }

    /* El círculo (esto está bien) */
    .slider-handle-mobile::after { 
        content: ''; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 40px; 
        height: 40px; 
        border: 2px solid #fff; 
        border-radius: 50%; 
        background: rgba(0,0,0,0.3); 
        backdrop-filter: blur(5px); 
        -webkit-backdrop-filter: blur(5px); 
        animation: mobileHandlePulse 2.5s infinite ease-in-out;
    }
}
/* --- FIN: Sticky Scroll Slider --- */

/* --- Animación de Pulso para el Handle Móvil --- */
@keyframes mobileHandlePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}