/* =======================================================================
   ESTILOS EXCLUSIVOS PARA LANDING PAGES (Ventas y Conversión)
   Requiere cargar style.css primero para heredar variables globales.
   ======================================================================= */

/* HEADER Y URGENCIA SUPERIOR */
.hero-header { position: absolute; top: 0; left: 0; width: 100%; padding: 25px 8%; display: flex; justify-content: space-between; align-items: center; z-index: 100; background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 100%); }
.elegant-urgency { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 102, 0, 0.3); padding: 8px 20px; border-radius: 30px; font-size: 0.75rem; color: #ccc; display: flex; align-items: center; gap: 10px; letter-spacing: 1px; text-transform: uppercase; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.elegant-urgency span { color: var(--color-light); font-weight: 800; }
.pulse-dot { width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 10px var(--color-accent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.8; } }

/* HERO DE LANDING */
.landing-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 120px 8% 40px; text-align: left; overflow: hidden; background-color: var(--color-bg); }
.hero-video-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; z-index: 1; pointer-events: none; opacity: 0.7; }
.hero-video-bg iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.3); }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%); z-index: 2; }

.hero-content { position: relative; z-index: 3; width: 100%; max-width: 800px; display: flex; flex-direction: column; align-items: flex-start; }
.landing-title { font-size: 3.8rem; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; line-height: 1.05; color: var(--color-light); }
.landing-title span { color: var(--color-accent); }

.price-anchor-top { font-size: 1.6rem; font-weight: 600; color: var(--color-light); margin-bottom: 25px; letter-spacing: 1px; display: flex; align-items: baseline; gap: 8px; }
.price-anchor-top span { font-size: 2.2rem; font-weight: 800; color: var(--color-accent); line-height: 1; }

.landing-subtitle { font-size: 1.1rem; color: #cccccc; margin-bottom: 30px; line-height: 1.6; font-weight: 300; max-width: 600px; }

.hero-checklist { display: flex; gap: 20px; margin-bottom: 35px; flex-wrap: wrap; justify-content: flex-start; }
.hero-checklist span { font-size: 0.9rem; font-weight: 600; color: var(--color-light); display: flex; align-items: center; gap: 6px; }
.hero-checklist span svg { width: 16px; height: 16px; stroke: var(--color-accent); fill: none; stroke-width: 3; }

.disclaimer { display: block; font-size: 0.75rem; color: #777777; font-weight: 300; margin-top: 10px; }

.software-strip { margin-top: 40px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; }
.software-strip p { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #888888; margin-bottom: 15px; text-align: left; font-weight: 600;}
.software-logos { display: flex; align-items: center; justify-content: flex-start; gap: 25px; flex-wrap: wrap; }
.software-logos img { height: 32px; opacity: 0.8; transition: 0.3s; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.software-logos img:hover { opacity: 1; transform: scale(1.05); }

.ia-badge { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.15); padding: 6px 15px; border-radius: 4px; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); transition: 0.3s;}
.ia-badge:hover { border-color: var(--color-accent); }
.ia-badge img { height: 18px !important; opacity: 1 !important; }
.ia-badge span { font-weight: 600; color: var(--color-light); font-size: 0.85rem; }

/* PRUEBA SOCIAL REFINADA */
.social-proof-header h3 { color: #888888; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; margin: 0;}
.carousel-track { display: flex; width: calc(250px * 12); animation: scroll-left-fix 25s linear infinite; }
@keyframes scroll-left-fix { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 6)); } }

/* FONDOS DESVANECIDOS */
.premium-section { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03) 0%, #000000 80%); padding: 100px 8%; text-align: center; position: relative; overflow: hidden; }
.premium-section-alt { background: linear-gradient(to bottom, #000000 0%, rgba(255,102,0,0.02) 50%, #000000 100%); padding: 100px 8%; text-align: center; }

/* INFOGRAFÍA DE PASOS */
.steps-header h2 { font-size: 2.5rem; text-transform: uppercase; margin-bottom: 15px; font-weight: 800; color: var(--color-light); }
.steps-header p { color: var(--color-text-muted); font-size: 1.1rem; max-width: 700px; margin: 0 auto; font-weight: 300;}
.steps-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 50px auto 0; text-align: center; position: relative; z-index: 2; }

.infographic-line { position: absolute; top: 90px; left: 15%; width: 70%; height: 2px; z-index: 1; pointer-events: none; }
.infographic-line line { stroke-dasharray: 8, 8; animation: moveDashes 30s linear infinite; stroke: rgba(255, 102, 0, 0.3); stroke-width: 2; }
@keyframes moveDashes { to { stroke-dashoffset: -1000; } }

.step-box { display: block; text-decoration: none; padding: 40px 25px; transition: transform 0.4s; background: rgba(255,255,255,0.02); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); position: relative; z-index: 2; backdrop-filter: blur(10px); cursor: pointer; }
.step-box:hover { transform: translateY(-5px); border-color: rgba(255,102,0,0.4); box-shadow: 0 15px 35px rgba(0,0,0,0.8); background: rgba(255,255,255,0.04); }

.step-icon-wrapper { width: 70px; height: 70px; margin: 0 auto 25px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,102,0,0.5); position: relative; z-index: 3; box-shadow: inset 0 0 15px rgba(255,102,0,0.15); transition: 0.3s;}
.step-box:hover .step-icon-wrapper { background: rgba(255,102,0,0.1); }
.step-icon { width: 30px; height: 30px; stroke: var(--color-accent); fill: none; stroke-width: 1.5; }
.step-box h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--color-light); text-transform: uppercase; letter-spacing: 1px; }
.step-box p { color: #999999; font-size: 0.95rem; line-height: 1.6; text-align: left; font-weight: 300; margin: 0;}

/* EFECTO WOW DE CORTE DE PRODUCCIÓN */
.production-alert { padding: 0 8% 80px; background-color: var(--color-bg); }
.alert-content { max-width: 1000px; margin: 0 auto; background: linear-gradient(90deg, rgba(255,102,0,0.1) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,102,0,0.2); border-radius: 8px; padding: 40px 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); position: relative; overflow: hidden; backdrop-filter: blur(10px);}
.alert-content::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--color-accent); }

.alert-live-indicator { display: flex; align-items: center; justify-content: center; }
.alert-pulse-ring { width: 16px; height: 16px; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 15px var(--color-accent); animation: pulse-alert 1.5s infinite; }
@keyframes pulse-alert { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(255, 102, 0, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 102, 0, 0); } }

.alert-text { flex: 1; text-align: left; }
.alert-text h3 { font-size: 1.8rem; font-weight: 800; color: var(--color-light); text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; }
.alert-text p { font-size: 1.05rem; color: #ccc; font-weight: 300; margin: 0;}
.alert-text strong { color: var(--color-accent); font-weight: 600; }

.btn-alert { background: var(--color-accent); color: var(--color-bg); padding: 15px 30px; border-radius: 4px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; white-space: nowrap; border: none; display: inline-block;}
.btn-alert:hover { background: var(--color-light); transform: translateY(-2px); }

/* MATERIALES */
.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 1200px; margin: 50px auto 0; }
.material-card { height: 450px; background-size: cover; background-position: center; border-radius: 8px; position: relative; overflow: hidden; text-align: left; }
.material-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 20px 20px; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%); color: white; opacity: 0; transition: opacity 0.4s, transform 0.4s; transform: translateY(15px); }
.material-card:hover .material-overlay { opacity: 1; transform: translateY(0); }
.material-overlay h3 { color: var(--color-accent); font-size: 1.3rem; margin-bottom: 8px; text-transform: uppercase; }
.material-overlay p { font-size: 0.95rem; color: #dddddd; line-height: 1.5; margin-bottom: 10px; font-weight: 300; }
.material-tag { display: inline-block; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-right: 5px; color: #ccc;}

/* TESTIMONIOS */
.testimonial-carousel-wrapper { position: relative; max-width: 800px; margin: 40px auto 0; height: 260px; display: flex; align-items: center; justify-content: center; }
.review-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease-in-out; pointer-events: none; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 40px; border-radius: 12px; border-left: 2px solid var(--color-accent); backdrop-filter: blur(5px); }
.review-slide.active { opacity: 1; pointer-events: auto; z-index: 2; }
.stars { color: var(--color-accent); font-size: 1.2rem; margin-bottom: 15px; letter-spacing: 2px; }
.review-text { font-size: 1.15rem; font-style: italic; color: #e0e0e0; margin-bottom: 20px; line-height: 1.6; font-weight: 300; }
.review-author { font-weight: 600; color: var(--color-light); text-transform: uppercase; font-size: 0.9rem; }
.review-company { font-size: 0.8rem; color: #888888; }

.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; }
.carousel-arrow { cursor: pointer; color: #555; font-size: 2rem; user-select: none; transition: 0.3s; }
.carousel-arrow:hover { color: var(--color-light); }
.carousel-dots { display: flex; gap: 10px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: #333; cursor: pointer; transition: 0.3s; }
.carousel-dot.active { background: var(--color-accent); transform: scale(1.3); }

/* CROSS SELL */
.cross-sell-pro { background-color: #000000; padding: 80px 8%; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
.cross-sell-header h2 { font-size: 2rem; text-transform: uppercase; color: var(--color-light); font-weight: 800; margin-bottom: 15px; }
.cross-sell-header h2 span { color: var(--color-accent); }
.cross-sell-header p { font-size: 1rem; color: #999999; font-weight: 300; max-width: 600px; margin: 0 auto 50px; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 900px; margin: 0 auto 40px; }
.cs-item { background: rgba(255,255,255,0.02); padding: 35px 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); transition: 0.4s; position: relative; overflow: hidden; backdrop-filter: blur(5px); }
.cs-item:hover { transform: translateY(-5px); border-color: rgba(255,102,0,0.3); background: rgba(255,255,255,0.04); }
.cs-icon { width: 40px; height: 40px; fill: none; stroke: var(--color-light); stroke-width: 1.5; margin-bottom: 20px; transition: 0.3s; }
.cs-item:hover .cs-icon { stroke: var(--color-accent); }
.cs-item h4 { color: var(--color-light); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }

/* ADAPTACIÓN MÓVIL ESPECÍFICA PARA LANDINGS */
@media (max-width: 768px) {
    .hero-header { padding: 20px; flex-direction: column; gap: 15px; }
    .elegant-urgency { font-size: 0.65rem; padding: 6px 15px; }
    
    .landing-hero { justify-content: center; text-align: center; padding-top: 160px; padding-bottom: 60px; min-height: 100vh; }
    .hero-overlay { background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.3) 100%); }
    .hero-content { align-items: center; }
    .landing-title { font-size: 2.2rem; }
    
    .price-anchor-top { flex-direction: column; align-items: center; gap: 0; font-size: 1.2rem; }
    .price-anchor-top span { font-size: 2rem; }
    
    .landing-subtitle { text-align: center; margin-bottom: 20px; font-size: 1rem;}
    .hero-checklist { justify-content: center; flex-direction: column; gap: 10px; }
    
    .software-strip p { text-align: center; }
    .software-logos { justify-content: center; }
    
    .steps-container, .materials-grid, .cs-grid { grid-template-columns: 1fr; gap: 20px; }
    .infographic-line { display: none; }
    
    .alert-content { flex-direction: column; text-align: center; padding: 30px 20px; }
    .alert-text { text-align: center; }
    .alert-text h3 { font-size: 1.5rem; }
    
    .material-card { height: 350px; }
    .material-overlay { opacity: 1; transform: translateY(0); background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, transparent 100%); }
    
    .testimonial-carousel-wrapper { height: 380px; }
    .review-slide { padding: 25px; border-left: none; border-top: 2px solid var(--color-accent); }
    
    .cross-sell-header h2 { font-size: 1.8rem; }
    .final-cta .btn-primary, .cross-sell-pro .btn-secondary, .btn-alert { width: 100%; max-width: 300px; padding: 15px 20px; font-size: 0.8rem; }
    
    .carousel-track { width: calc(150px * 12); animation: scroll-left-fix-mobile 20s linear infinite; }
    @keyframes scroll-left-fix-mobile { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-150px * 6)); } }
}