/* =======================================================
   ESTILO ULTRA PREMIUM - POL & CO. AGENCY
   ======================================================= */

/* :root {
    --brand-dark: #000F08;
    --brand-accent: #4A1C23; 
    
    --theme-bg: var(--brand-dark);
    --theme-bg-alt: #05140d; 
    --theme-text: #ffffff;
    --theme-text-muted: rgba(255, 255, 255, 0.6);
    --theme-card: rgba(255, 255, 255, 0.03);
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-nav: rgba(0, 15, 8, 0.85);

    --radius-lg: 24px;
    --radius-md: 16px;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
} */
 /* =======================================================
   ESTILO ULTRA PREMIUM - POL & CO. AGENCY (LUXURY BOUTIQUE)
   ======================================================= */
:root {
    /* Colores Principales de tu Marca */
    --brand-dark: #230E12;    /* Un tono casi negro-vino muy profundo (Para el footer y contrastes fuertes) */
    --brand-accent: #54242c;  /* TU COLOR ESTRELLA: Para botones, títulos clave, iconos y llamadas a la acción */
    --brand-light: #EADCDD;   /* Un tono piedra/crema rosado muy elegante para detalles y hovers */
    
    /* Configuración del Tema Claro Boutique */
    --theme-bg: #FCFAFA;                  /* Blanco roto muy sutil y cálido, mucho más elegante que el blanco puro */
    --theme-bg-alt: #F3EAEB;              /* Fondo secundario crema para destacar secciones (ej. Sobre nosotros) */
    --theme-text: #230E12;                /* Textos casi negros para un contraste y lectura perfectos */
    --theme-text-muted: rgba(84, 36, 44, 0.75); /* Tu color estrella suavizado para los párrafos secundarios */
    
    /* Efecto Cristal (Glassmorphism) adaptado a tu nueva paleta */
    --theme-card: rgba(234, 220, 221, 0.4); /* Tarjetas translúcidas muy suaves */
    --theme-border: rgba(84, 36, 44, 0.15);  /* Bordes finos usando tu color estrella */
    --theme-nav: rgba(252, 250, 250, 0.95);  /* Menú de navegación casi sólido */

    --radius-lg: 24px;
    --radius-md: 16px;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Tipografía Inter (Estilo San Francisco) */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
}

/* =======================================================
   RESETEO BASE (SOLUCIÓN DEFINITIVA BUGS INSTAGRAM Y iOS)
   ======================================================= */
* { 
    -webkit-tap-highlight-color: transparent; 
}

html { 
    scroll-behavior: smooth; 
    -webkit-text-size-adjust: 100%; 
}

/* IMPORTANTE: Nunca aplicar overflow-x a HTML, solo a body */
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6, .brand-logo, .magnetic { font-family: var(--font-heading); letter-spacing: -0.02em; }

body { 
    overflow-x: hidden; 
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; 
    background-color: var(--theme-bg); 
    color: var(--theme-text); 
    line-height: 1.6; 
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* FIX: Elevar SIEMPRE los elementos interactivos hacia el dedo del usuario */
a, button, input, select, textarea, .accordion-button, .theme-toggle, label { 
    position: relative !important; 
    z-index: 50 !important; 
    touch-action: manipulation; 
    pointer-events: auto !important;
}

[data-theme="light"] {
    --theme-bg: #fcfcfc;
    --theme-bg-alt: #f0f0f2;
    --theme-text: var(--brand-dark);
    --theme-text-muted: #666666;
    --theme-card: #ffffff;
    --theme-border: rgba(0, 15, 8, 0.1);
    --theme-nav: rgba(252, 252, 252, 0.85);
}

::selection { background-color: var(--brand-accent); color: #fff; }

.theme-text { color: var(--theme-text) !important; transition: color 0.5s ease; }
.theme-text-muted { color: var(--theme-text-muted) !important; transition: color 0.5s ease; }
.theme-bg-alt { background-color: var(--theme-bg-alt) !important; transition: background-color 0.5s ease; }
.theme-border { border-color: var(--theme-border) !important; transition: border-color 0.5s ease; }

.text-brand-accent { color: var(--brand-accent) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.shadow-accent { box-shadow: 0 10px 30px rgba(74, 28, 35, 0.4) !important; }

.brand-logo { height: 40px; width: auto; object-fit: contain; }
.preloader-logo { height: 60px; }

h1, h2, h3, h4, h5, .logo-text { font-weight: 700; letter-spacing: -0.04em; }
.section-padding { padding: 120px 0; }
.section-title { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.1; margin-bottom: 1rem; letter-spacing: -1.5px; }
.section-subtitle { font-size: 1.25rem; max-width: 600px; }
.text-gradient { background: linear-gradient(90deg, var(--brand-accent), #7a2d39); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* CURSORES PC */
.custom-cursor { position: fixed; width: 6px; height: 6px; background-color: var(--brand-accent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: transform 0.15s ease-out, background-color 0.15s; }
.custom-cursor-follower { position: fixed; width: 34px; height: 34px; border: 1.5px solid var(--brand-accent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9998; transition: width 0.2s, height 0.2s, opacity 0.2s; }
.custom-cursor.hover { transform: translate(-50%, -50%) scale(0); }
.custom-cursor-follower.hover { width: 45px; height: 45px; background-color: rgba(74, 28, 35, 0.15); backdrop-filter: blur(2px); border-color: transparent; }

/* PRELOADER */
#preloader { position: fixed; inset: 0; background-color: var(--brand-dark); z-index: 100000; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
.loading-text { color: white; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

.brand-nav { background: var(--theme-nav); backdrop-filter: blur(20px); border-bottom: 1px solid var(--theme-border); transition: all 0.4s; padding: 20px 0; }
.brand-nav.scrolled { padding: 10px 0; box-shadow: 0 4px 30px rgba(0,0,0,0.2); }
.nav-link { color: var(--theme-text) !important; font-weight: 500; font-size: 0.9rem; transition: color 0.3s; }
.theme-toggle { background: transparent; border: none; font-size: 1.2rem; color: var(--theme-text); display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 50%; transition: var(--transition); }
.theme-toggle:hover { color: var(--brand-accent); }
.magnetic { display: inline-block; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; position: relative; z-index: 10; }

.btn-brand-primary { background: var(--brand-accent); color: #fff; border: none; border-radius: 30px; padding: 12px 28px; font-weight: 600; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; transition: background 0.4s, color 0.4s, box-shadow 0.4s; }
.btn-brand-primary:hover { box-shadow: 0 10px 20px rgba(74, 28, 35, 0.4); color: #fff; background: #60242e; } 
.btn-brand-secondary { background: transparent; color: var(--theme-text); border: 2px solid var(--theme-border); border-radius: 30px; padding: 10px 28px; font-weight: 600; text-decoration: none; display: inline-block; transition: var(--transition); position: relative; z-index: 10; }
.btn-brand-secondary:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.btn-brand-outline { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; padding: 10px 28px; text-decoration: none; font-weight: 600; transition: var(--transition); }
.btn-brand-outline:hover { background: white; color: var(--brand-dark); }

/* TARJETAS */
.tilt-card { transform-style: preserve-3d; will-change: transform; transform: perspective(1000px); }
.tilt-card > * { transform: translateZ(30px); }

.brand-card { background: var(--theme-card); border-radius: var(--radius-lg); padding: 2.5rem; border: 1px solid var(--theme-border); transition: background 0.5s, border 0.5s, box-shadow 0.4s; }
.brand-card:hover { border-color: var(--brand-accent); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.icon-box { width: 56px; height: 56px; background: rgba(74, 28, 35, 0.15); color: var(--brand-accent); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; transition: background 0.5s; border: 1px solid rgba(74, 28, 35, 0.3); }
.brand-card:hover .icon-box { background: var(--brand-accent); color: white; }

.glass-card-premium { background: var(--theme-card); backdrop-filter: blur(20px); border: 1px solid var(--theme-border); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

.insta-grid { position: relative; z-index: 2; }
.insta-item { position: relative; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--theme-border); transition: var(--transition); }
.insta-item img { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.insta-item:hover img { transform: scale(1.05); }
.insta-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(74, 28, 35, 0.95), rgba(0, 15, 8, 0.5)); opacity: 0; transition: opacity 0.4s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; backdrop-filter: blur(3px); pointer-events: none; }
.insta-item:hover .insta-overlay { opacity: 1; pointer-events: auto; }
.insta-icon { font-size: 3rem; margin-bottom: 1rem; transform: translateY(20px); transition: transform 0.4s ease; }
.insta-item:hover .insta-icon { transform: translateY(0); }

/* HERO Y ALTURAS DINÁMICAS (FIX INSTAGRAM BARS) */
.hero-section { 
    min-height: 100vh;
    min-height: 100dvh; 
    position: relative; 
    overflow: hidden; 
}

.cursor { display: inline-block; width: 3px; background-color: var(--brand-accent); animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.blob-shape { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(74, 28, 35, 0.4) 0%, rgba(0,15,8,0) 70%); border-radius: 50%; filter: blur(40px); z-index: -2; animation: blob 10s infinite alternate; pointer-events: none !important; }
@keyframes blob { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-40%, -60%) scale(1.2); } }

.marquee-wrapper { white-space: nowrap; user-select: none; }
.marquee-content { display: inline-flex; animation: scrollMarquee 25s linear infinite; }
.marquee-content span { font-size: 1.5rem; font-weight: 600; opacity: 0.8; margin-right: 3rem; display: flex; align-items: center; gap: 10px; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* CALCULADORA FIX NATIVO iOS */
.form-range {
    touch-action: pan-y !important; /* Permite deslizar fluido */
}
.form-range::-webkit-slider-thumb {
    background: var(--brand-accent) !important;
}
.form-range::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.form-step { display: none; animation: slideIn 0.5s ease forwards; }
.form-step.active { display: block; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.form-dark { background: var(--theme-card); border: 1px solid var(--theme-border); color: var(--theme-text) !important; padding: 16px; border-radius: 12px; font-weight: 500; transition: var(--transition); }
.form-dark::placeholder { color: var(--theme-text-muted) !important; font-weight: 400; }
.form-dark:focus { background: var(--theme-card); border-color: var(--brand-accent); color: var(--theme-text) !important; box-shadow: 0 0 0 4px rgba(74, 28, 35, 0.3); outline: none; z-index: 60 !important; }
.form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); }
.footer-link:hover, .footer-icon:hover { color: var(--brand-accent) !important; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }

/* BANNER COOKIES */
.cookies-banner { position: fixed; bottom: -150%; left: 50%; transform: translateX(-50%); width: 90%; max-width: 900px; z-index: 999999; border-radius: var(--radius-md); transition: bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 20px 40px rgba(0,0,0,0.5); border: 1px solid var(--theme-border); }
.cookies-banner.show { bottom: 30px; }

/* CHAT FLOTANTE */
.premium-float-wrapper {
    position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 99999 !important;
    display: flex !important; flex-direction: column !important; align-items: flex-end !important;
    pointer-events: none !important; /* Capa fantasma transparente */
}
.premium-float-btn, .premium-chat-window, .float-tooltip {
    pointer-events: auto !important; /* Sus hijos sí se tocan */
}

.premium-float-btn { width: 65px !important; height: 65px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--brand-accent), #7a2d39) !important; color: white !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 10px 30px rgba(74, 28, 35, 0.5) !important; position: relative !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer; margin-top: 15px; }
.premium-float-btn:hover { transform: translateY(-5px) !important; box-shadow: 0 15px 35px rgba(74, 28, 35, 0.7) !important; }
.pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--brand-accent); animation: pulsing 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); z-index: -1; }
@keyframes pulsing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
.chat-icon { font-size: 1.8rem; transition: all 0.4s ease; position: absolute; }
.close-icon { font-size: 1.5rem; transition: all 0.4s ease; position: absolute; opacity: 0; transform: rotate(-90deg) scale(0); }
.float-tooltip { position: absolute; right: 85px; bottom: 15px; background: var(--theme-card); border: 1px solid var(--theme-border); padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; box-shadow: 0 5px 15px rgba(0,0,0,0.2); backdrop-filter: blur(10px); white-space: nowrap; transition: all 0.3s ease; }
.premium-float-wrapper.open .chat-icon { opacity: 0; transform: rotate(90deg) scale(0); }
.premium-float-wrapper.open .close-icon { opacity: 1; transform: rotate(0) scale(1); }
.premium-float-wrapper.open .pulse-ring { display: none; }
.premium-float-wrapper.open .float-tooltip { opacity: 0; visibility: hidden; transform: translateX(10px); }

.premium-chat-window { width: 350px !important; background: var(--theme-nav) !important; border: 1px solid var(--theme-border) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; transform-origin: bottom right !important; transform: scale(0) !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important; }
.premium-float-wrapper.open .premium-chat-window { transform: scale(1) !important; opacity: 1 !important; visibility: visible !important; }
.ai-chat-body { height: 260px; overflow-y: auto; scroll-behavior: smooth; }
.ai-chat-body::-webkit-scrollbar { width: 4px; }
.ai-chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.ai-bubble { background-color: #15151A !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px 12px 12px 2px !important; }
.ai-bubble a { color: #ff6b81 !important; font-weight: bold; }

/* ==========================================
   DESTRUCCIÓN EFECTOS 3D EN MÓVIL (iOS BUG FIX)
   ========================================== */
@media (max-width: 991px) {
    .custom-cursor, .custom-cursor-follower { display: none !important; }
    .hero-title { font-size: 2.5rem; word-wrap: break-word; }
    
    /* El 3D en móvil corrompe la caja táctil de los botones. Lo anulamos. */
    .tilt-card { 
        transform: none !important; 
        perspective: none !important; 
        transform-style: flat !important; 
        will-change: auto !important;
    } 
    .tilt-card > * { transform: none !important; } 
    
    .premium-chat-window { width: calc(100vw - 60px) !important; }
    .cookies-banner { width: 95%; } 
    .cookies-banner.show { bottom: 15px; } 
    .cookies-buttons { flex-direction: column; width: 100%; } 
    .cookies-buttons button { width: 100%; margin-bottom: 5px; }
}

/* ==========================================
   BOTÓN IDIOMAS REDISEÑADO PREMIUM
   ========================================== */
.lang-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--theme-border);
    color: var(--theme-text);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}
.lang-toggle:hover, .lang-toggle:active {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(74, 28, 35, 0.4);
}
[data-theme="light"] .lang-toggle { background: rgba(0, 0, 0, 0.05); }

/* ACORDEONES Y TEXTOS */
.custom-accordion .accordion-item { background: var(--theme-card); backdrop-filter: blur(10px); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.custom-accordion .accordion-button { box-shadow: none !important; padding: 1.5rem; }
.custom-accordion .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); transition: transform 0.4s ease; }
[data-theme="light"] .custom-accordion .accordion-button::after { filter: none; }
.custom-accordion .accordion-button:not(.collapsed) { color: var(--brand-accent) !important; }
.custom-accordion .accordion-button:not(.collapsed)::after { filter: invert(20%) sepia(80%) saturate(2000%) hue-rotate(330deg) brightness(90%) contrast(90%); }
.custom-accordion .accordion-body { padding: 0 1.5rem 1.5rem 1.5rem; line-height: 1.8; }

.typing-dots span { display: inline-block; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; margin: 0 2px; animation: typing 1.4s infinite both; }
.typing-dots span:nth-child(1) { animation-delay: 0s; } .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.2rem; margin-bottom: 0.5rem; margin-top: 0.5rem; }
.markdown-body li { margin-bottom: 0.3rem; }
.markdown-body strong { color: #ff6b81; font-weight: 700; }

/* Forzar colores del Footer */
.footer-brand {
    background-color: var(--brand-dark) !important;
}
.footer-brand p, .footer-brand h5, .footer-brand a, .footer-brand .bi {
    color: var(--brand-light) !important; 
}
.footer-brand a:hover {
    color: #FFFFFF !important;
}

/* =======================================================
   NUEVAS SECCIONES Y MICRO-INTERACCIONES PREMIUM
   ======================================================= */

/* 1. Tarjetas de Proceso (Roadmap) */
.process-card {
    background: var(--theme-card);
    border: 1px solid var(--theme-border);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}

.step-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--brand-accent);
    opacity: 0.15;
    font-family: var(--font-heading);
    transition: opacity 0.4s ease;
}

/* Micro-interacción: Elevación y cambio de color al pasar el ratón */
.process-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(84, 36, 44, 0.08);
    background: var(--theme-bg);
    border-color: var(--brand-accent);
}

.process-card:hover .step-number {
    opacity: 0.5;
}

/* 2. Caja del Lead Magnet (Auditoría) */
.premium-cta {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-accent));
    box-shadow: 0 20px 40px rgba(35, 14, 18, 0.15);
    border: 1px solid rgba(255,255,255,0.1);
}

/* 3. Animación de Botones Premium (Hover Lift) */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    display: inline-block;
}

.hover-lift:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2) !important;
}

/* 4. Animación Global: Fade-in suave al cargar la web (Estilo Apple) */
@keyframes smoothFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

body {
    animation: smoothFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) ease-out forwards;
}