/** * Vulpik AI Elementor Widgets - Frontend Styles * Estilos base para widgets generados por IA */ /* ============================================ BASE WRAPPER STYLES ============================================ */ .vulpik-ai-wrapper { position: relative; width: 100%; overflow: visible; /* Cambiado a visible para animaciones */ } /* Usado cuando enable_wrapper='no': el div existe para el contenteditable del editor pero no altera el layout del HTML inyectado. */ .vulpik-ai-passthrough { display: contents; } /* ── Edit mode: display:contents tiene NO tiene caja real en el layout, por lo que el navegador no puede colocar el cursor aunque el elemento tenga contenteditable. En el editor de Elementor, el tiene la clase elementor-editor-active, lo usamos para restaurar display:block solo en ese contexto (no afecta el frontend). */ body.elementor-editor-active .vulpik-ai-passthrough[data-vulpik-inline-edit] { display: block; } /* Cursor de texto y outline de edición en modo editor */ body.elementor-editor-active .vulpik-ai-passthrough[contenteditable="true"] { cursor: text; } body.elementor-editor-active .vulpik-ai-passthrough[contenteditable="true"]:focus { outline: 2px dashed #6a4bc4; outline-offset: 2px; } /* ── Inline editing (editor preview iframe) ───────────────────────────── editor.css NO se carga en el iframe de preview; widgets.css SÍ. Cuando contenteditable se activa el browser aplica white-space:pre-wrap en su UA stylesheet, haciendo visibles los \n entre tags HTML. Forzamos normal para mantener el layout idéntico al frontend. */ .elementor-widget-vulpik_ai_html_section [contenteditable="true"] { white-space: normal !important; outline: none; } /* Box-sizing correcto para todos los elementos */ .vulpik-ai-wrapper *, .vulpik-ai-wrapper *::before, .vulpik-ai-wrapper *::after { box-sizing: border-box; } /* ============================================ RESPONSIVE MEDIA ============================================ */ /* Asegurar que imágenes sean responsive */ .vulpik-ai-wrapper img { max-width: 100%; height: auto; display: block; } /* Videos responsive */ .vulpik-ai-wrapper video { max-width: 100%; height: auto; } /* Iframes responsive */ .vulpik-ai-wrapper iframe { max-width: 100%; } /* ============================================ ELEMENTOR OVERRIDES ============================================ */ /* Remover margin por defecto del contenedor de Elementor */ .elementor-widget-vulpik_ai_html_section .elementor-widget-container { margin: 0 !important; } /* Permitir que el wrapper use todo el ancho disponible */ .elementor-widget-vulpik_ai_html_section { width: 100%; } /* ============================================ TAILWIND CSS COMPATIBILITY ============================================ */ /* Prevenir conflictos entre Tailwind y estilos del theme */ .vulpik-ai-wrapper.tailwind-enabled { /* Reset básico para contenedor con Tailwind */ } /* Asegurar que las clases de Tailwind funcionen correctamente */ .vulpik-ai-wrapper [class*="tw-"], .vulpik-ai-wrapper [class*="dark:"], .vulpik-ai-wrapper [class*="hover:"], .vulpik-ai-wrapper [class*="focus:"], .vulpik-ai-wrapper [class*="sm:"], .vulpik-ai-wrapper [class*="md:"], .vulpik-ai-wrapper [class*="lg:"], .vulpik-ai-wrapper [class*="xl:"] { /* Tailwind classes mantienen su especificidad */ } /* ============================================ ANIMATIONS SUPPORT ============================================ */ /* Soporte para animaciones tipo Stripe (gradientes animados) */ @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } .vulpik-ai-wrapper .animate-blob { animation: blob 7s infinite; } .vulpik-ai-wrapper .animation-delay-2000 { animation-delay: 2s; } .vulpik-ai-wrapper .animation-delay-4000 { animation-delay: 4s; } /* Fade in animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .vulpik-ai-wrapper .fade-in { animation: fadeIn 0.6s ease-out forwards; } /* Slide up animation */ @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .vulpik-ai-wrapper .slide-up { animation: slideUp 0.8s ease-out forwards; } /* ============================================ COMMON UI PATTERNS ============================================ */ /* Buttons base reset */ .vulpik-ai-wrapper button, .vulpik-ai-wrapper .btn { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; margin: 0; } /* Links reset */ .vulpik-ai-wrapper a { color: inherit; text-decoration: none; } /* ============================================ BACKDROP BLUR SUPPORT ============================================ */ .vulpik-ai-wrapper .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .vulpik-ai-wrapper .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .vulpik-ai-wrapper .backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ============================================ GRADIENT BACKGROUNDS ============================================ */ /* Soporte para gradientes complejos generados por IA */ .vulpik-ai-wrapper .gradient-bg { background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%); } /* ============================================ FLEXBOX & GRID HELPERS ============================================ */ /* Asegurar que flex y grid funcionen correctamente */ .vulpik-ai-wrapper .flex { display: flex; } .vulpik-ai-wrapper .grid { display: grid; } /* ============================================ RESPONSIVE BREAKPOINTS ============================================ */ /* Mobile First approach */ @media (max-width: 767px) { .vulpik-ai-wrapper { /* Ajustes para móvil */ } } /* Tablet */ @media (min-width: 768px) and (max-width: 1024px) { .vulpik-ai-wrapper { /* Ajustes para tablet */ } } /* Desktop */ @media (min-width: 1025px) { .vulpik-ai-wrapper { /* Ajustes para desktop */ } } /* ============================================ PRINT STYLES ============================================ */ @media print { .vulpik-ai-wrapper { /* Optimizaciones para impresión */ background: white !important; } .vulpik-ai-wrapper .no-print { display: none !important; } } /* ============================================ ACCESSIBILITY ============================================ */ /* Focus visible para accesibilidad */ .vulpik-ai-wrapper *:focus-visible { outline: 2px solid #4A90E2; outline-offset: 2px; } /* Reducir movimiento para usuarios que lo prefieren */ @media (prefers-reduced-motion: reduce) { .vulpik-ai-wrapper * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================ DARK MODE SUPPORT ============================================ */ @media (prefers-color-scheme: dark) { .vulpik-ai-wrapper.auto-dark { /* Estilos automáticos para modo oscuro */ } } /* ============================================ PERFORMANCE OPTIMIZATIONS ============================================ */ /* GPU acceleration para animaciones */ .vulpik-ai-wrapper .gpu-accelerated { will-change: transform; transform: translateZ(0); } /* Optimizar rendering de imágenes */ .vulpik-ai-wrapper img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* ============================================================ VULPIK SECTION WIDGETS — Base layout Estilos estructurales para los widgets vulpik_hero, vulpik_cards_grid, vulpik_services, vulpik_cta, vulpik_stats, vulpik_testimonials, vulpik_faq. ============================================================ */ /* ── Shared container ───────────────────────────────────────── */ .vulpik-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; box-sizing: border-box; } .vulpik-section-header { text-align: center; margin-bottom: 48px; } .vulpik-section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin: 0 0 16px; line-height: 1.2; } .vulpik-section-description { font-size: 1.125rem; opacity: 0.7; max-width: 640px; margin: 0 auto; line-height: 1.7; } /* ── Grid ───────────────────────────────────────────────────── */ .vulpik-grid { display: grid; gap: 28px; } .vulpik-grid--1 { grid-template-columns: 1fr; } .vulpik-grid--2 { grid-template-columns: repeat(2, 1fr); } .vulpik-grid--3 { grid-template-columns: repeat(3, 1fr); } .vulpik-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ── Buttons ────────────────────────────────────────────────── */ .vulpik-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 28px; border-radius: 8px; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease, background-color 0.2s ease; line-height: 1; border: 2px solid transparent; box-sizing: border-box; white-space: nowrap; } .vulpik-btn--primary { background-color: var(--e-global-color-accent, #6366f1); color: #fff; border-color: var(--e-global-color-accent, #6366f1); } .vulpik-btn--primary:hover { opacity: 0.88; color: #fff; text-decoration: none; } .vulpik-btn--secondary { background-color: transparent; color: inherit; border-color: currentColor; } .vulpik-btn--secondary:hover { background-color: rgba(0, 0, 0, 0.05); color: inherit; text-decoration: none; } /* ── Hero ───────────────────────────────────────────────────── */ .vulpik-hero { width: 100%; box-sizing: border-box; } .vulpik-hero__inner { display: flex; align-items: center; gap: 60px; padding: 80px 0; } .vulpik-hero--centered .vulpik-hero__inner { flex-direction: column; text-align: center; align-items: center; } .vulpik-hero--content-right .vulpik-hero__inner { flex-direction: row-reverse; } .vulpik-hero__content { flex: 1; min-width: 0; } .vulpik-hero__tagline { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; } .vulpik-hero__heading { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin: 0 0 20px; } .vulpik-hero__description { font-size: 1.125rem; line-height: 1.7; margin: 0 0 32px; opacity: 0.8; } .vulpik-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; } .vulpik-hero--centered .vulpik-hero__buttons { justify-content: center; } .vulpik-hero__media { flex: 1; min-width: 0; } .vulpik-hero__media img { width: 100%; height: auto; display: block; } /* ── Cards Grid ─────────────────────────────────────────────── */ .vulpik-cards-grid { width: 100%; box-sizing: border-box; } .vulpik-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); padding: 28px; display: flex; flex-direction: column; box-sizing: border-box; } .vulpik-card__image { margin: -28px -28px 24px; overflow: hidden; flex-shrink: 0; } .vulpik-card__image img { width: 100%; height: 200px; object-fit: cover; display: block; } .vulpik-card__title { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; line-height: 1.3; } .vulpik-card__description { font-size: 0.95rem; line-height: 1.65; opacity: 0.7; flex: 1; margin: 0; } .vulpik-card__button { margin-top: 20px; } /* ── Services ───────────────────────────────────────────────── */ .vulpik-services { width: 100%; box-sizing: border-box; } .vulpik-service-item { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; } .vulpik-service-item--inline { flex-direction: row; align-items: flex-start; gap: 16px; } .vulpik-service__icon { font-size: 1.75rem; color: var(--e-global-color-accent, #6366f1); flex-shrink: 0; line-height: 1; } .vulpik-service__icon svg { width: 1.75rem; height: 1.75rem; fill: currentColor; } .vulpik-service__content { min-width: 0; } .vulpik-service__title { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; } .vulpik-service__description { font-size: 0.95rem; line-height: 1.65; opacity: 0.7; margin: 0; } .vulpik-service__link { display: inline-block; margin-top: 10px; font-size: 0.9rem; font-weight: 600; color: var(--e-global-color-accent, #6366f1); text-decoration: none; } .vulpik-service__link:hover { text-decoration: underline; } /* ── CTA ────────────────────────────────────────────────────── */ .vulpik-cta { width: 100%; box-sizing: border-box; } .vulpik-cta__inner { padding: 72px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; } .vulpik-cta--split .vulpik-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 48px; } .vulpik-cta__content { flex: 1; min-width: 0; } .vulpik-cta__tagline { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .vulpik-cta__heading { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 700; line-height: 1.2; margin: 0 0 16px; } .vulpik-cta__description { font-size: 1.1rem; line-height: 1.7; opacity: 0.8; margin: 0; } .vulpik-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; flex-shrink: 0; } .vulpik-cta--split .vulpik-cta__buttons { justify-content: flex-end; } /* ── Stats ──────────────────────────────────────────────────── */ .vulpik-stats { width: 100%; box-sizing: border-box; } .vulpik-stats__grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: flex-start; padding: 48px 0; } .vulpik-stat-item { text-align: center; flex: 1; min-width: 140px; } .vulpik-stat__value { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1; color: var(--e-global-color-accent, #6366f1); } .vulpik-stat__label { display: block; font-size: 0.95rem; opacity: 0.7; margin-top: 8px; } .vulpik-stat__description { font-size: 0.85rem; opacity: 0.5; margin: 4px 0 0; } /* ── Testimonials ────────────────────────────────────────────── */ .vulpik-testimonials { width: 100%; box-sizing: border-box; } .vulpik-testimonial-card { background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; box-sizing: border-box; } .vulpik-testimonial__rating { color: #f59e0b; font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 14px; } .vulpik-testimonial__quote { font-size: 1rem; line-height: 1.7; font-style: italic; opacity: 0.85; flex: 1; margin: 0 0 20px; } .vulpik-testimonial__author { display: flex; align-items: center; gap: 12px; } .vulpik-testimonial__author-image { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .vulpik-testimonial__author-info { min-width: 0; } .vulpik-testimonial__author-name { display: block; font-weight: 600; font-size: 0.95rem; } .vulpik-testimonial__author-role { display: block; font-size: 0.85rem; opacity: 0.6; } /* ── FAQ ────────────────────────────────────────────────────── */ .vulpik-faq { width: 100%; box-sizing: border-box; } .vulpik-faq__list { max-width: 800px; margin: 0 auto; } .vulpik-faq-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .vulpik-faq-item:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .vulpik-faq__question { width: 100%; text-align: left; background: none; border: none; padding: 20px 0; font-size: 1.05rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: inherit; font-family: inherit; line-height: 1.4; } .vulpik-faq__question::after { content: '+'; font-size: 1.4rem; font-weight: 300; flex-shrink: 0; transition: transform 0.25s ease; line-height: 1; } .vulpik-faq-item--open .vulpik-faq__question::after { transform: rotate(45deg); } .vulpik-faq__answer { overflow: hidden; } .vulpik-faq__answer[hidden] { display: none; } .vulpik-faq__answer-inner { padding: 0 0 20px; opacity: 0.75; line-height: 1.7; font-size: 0.975rem; } .vulpik-faq__answer-inner p { margin: 0 0 12px; } .vulpik-faq__answer-inner p:last-child { margin-bottom: 0; } /* ── Elementor widget container overrides ───────────────────── */ .elementor-widget-vulpik_hero .elementor-widget-container, .elementor-widget-vulpik_cards_grid .elementor-widget-container, .elementor-widget-vulpik_services .elementor-widget-container, .elementor-widget-vulpik_cta .elementor-widget-container, .elementor-widget-vulpik_stats .elementor-widget-container, .elementor-widget-vulpik_testimonials .elementor-widget-container, .elementor-widget-vulpik_faq .elementor-widget-container { padding: 0 !important; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 768px) { .vulpik-hero__inner, .vulpik-hero--content-right .vulpik-hero__inner { flex-direction: column; padding: 56px 0; gap: 36px; } .vulpik-cta--split .vulpik-cta__inner { flex-direction: column; text-align: center; } .vulpik-cta--split .vulpik-cta__buttons { justify-content: center; } .vulpik-grid--2, .vulpik-grid--3, .vulpik-grid--4 { grid-template-columns: 1fr; } .vulpik-stats__grid { gap: 24px; padding: 36px 0; } } @media (min-width: 769px) and (max-width: 1024px) { .vulpik-grid--3, .vulpik-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ VULPIK SECTION — Nested container widget ============================================================ */ .vulpik-section__wrap { width: 100%; display: block; box-sizing: border-box; position: relative; } .vulpik-section__inner { width: 100%; display: block; } /* Quitar padding extra que Elementor añade al widget container */ .elementor-widget-vulpik_section > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }