.elementor-20406 .elementor-element.elementor-element-c7d698d:not(.elementor-motion-effects-element-type-background), .elementor-20406 .elementor-element.elementor-element-c7d698d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#152215;}.elementor-20406 .elementor-element.elementor-element-c7d698d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-20406 .elementor-element.elementor-element-c7d698d > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-20406 .elementor-element.elementor-element-7d087dd{text-align:center;font-family:"DM Sans", Sans-serif;font-size:13px;font-weight:500;color:#F0E0B0;}.elementor-20406 .elementor-element.elementor-element-980a1aa:not(.elementor-motion-effects-element-type-background), .elementor-20406 .elementor-element.elementor-element-980a1aa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-20406 .elementor-element.elementor-element-980a1aa{border-style:solid;border-color:#E0D8CC;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-20406 .elementor-element.elementor-element-980a1aa, .elementor-20406 .elementor-element.elementor-element-980a1aa > .elementor-background-overlay{border-radius:0px 0px 1px 0px;}.elementor-20406 .elementor-element.elementor-element-980a1aa > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-20406 .elementor-element.elementor-element-76c7277{text-align:center;}.elementor-20406 .elementor-element.elementor-element-76c7277 img{width:140px;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-20406 .elementor-element.elementor-element-e0e3dbf{width:var( --container-widget-width, 104.651% );max-width:104.651%;--container-widget-width:104.651%;--container-widget-flex-grow:0;}.elementor-20406 .elementor-element.elementor-element-e0e3dbf .elementor-menu-toggle{margin:0 auto;}.elementor-20406 .elementor-element.elementor-element-d8c2653 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-20406 .elementor-element.elementor-element-d8c2653 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-20406 .elementor-element.elementor-element-38a4177 .elementor-button{background-color:#152215;font-family:"DM Sans", Sans-serif;font-size:13px;font-weight:500;fill:#F0E0B0;color:#F0E0B0;border-style:solid;border-width:1px 1px 1px 1px;border-color:#152215;border-radius:2px 2px 2px 2px;padding:14px 35px 14px 35px;}@media(min-width:768px){.elementor-20406 .elementor-element.elementor-element-31fc8f1{width:15.03%;}.elementor-20406 .elementor-element.elementor-element-efe1837{width:59.97%;}}/* Start custom CSS for section, class: .elementor-element-c7d698d */eg-event-bar/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-76c7277 */.elementor-20406 .elementor-element.elementor-element-76c7277 img { mix-blend-mode: multiply; }/* End custom CSS */ /* Start custom CSS *//* ============================================================ ELISABETH GINER — CSS GLOBAL PARA ELEMENTOR Pegar en: Elementor → Site Settings → Custom CSS O en: Apariencia → Personalizar → CSS adicional ============================================================ */ /* ── 1. FUENTES ───────────────────────────────────────────── Asegúrate de añadir estas fuentes también en: Elementor → Site Settings → Typography → (cada tipografía global) O en el del tema: el @import ya las carga desde Google Fonts. ──────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap'); /* ── 2. VARIABLES DE MARCA ────────────────────────────────── Úsalas en cualquier campo CSS personalizado con var(--nombre) ──────────────────────────────────────────────────────────── */ :root { /* Verdes */ --eg-verde-profundo: #0c1a0c; --eg-verde-oscuro: #152215; --eg-verde-medio: #1e3320; --eg-verde-suave: #2d4a2d; --eg-verde-palido: #f0f5f0; --eg-verde-claro: #e6efe6; /* Dorados */ --eg-dorado: #b8922e; --eg-dorado-claro: #d4ae5a; --eg-dorado-suave: #f0e0b0; --eg-dorado-fondo: #fdf8ed; /* Rosa */ --eg-rosa: #b85472; --eg-rosa-suave: #f5e6ec; /* Cremas y neutros */ --eg-crema: #faf7f2; --eg-crema-medio: #f0ebe0; --eg-crema-borde: #e0d8cc; --eg-texto-oscuro: #1a1a1a; --eg-texto-medio: #4a4a3a; --eg-texto-muted: #7a7a6a; /* Tipografías */ --eg-serif: 'Cormorant Garamond', Georgia, serif; --eg-sans: 'DM Sans', system-ui, sans-serif; } /* ── 3. BASE Y RESET ──────────────────────────────────────── Ajustes globales que afectan a todo el sitio. ──────────────────────────────────────────────────────────── */ body { font-family: var(--eg-sans); color: var(--eg-texto-oscuro); background-color: var(--eg-crema); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Scroll suave al hacer clic en anclas del menú */ html { scroll-behavior: smooth; } /* ── 4. TIPOGRAFÍA GLOBAL ─────────────────────────────────── H1-H4 con Cormorant Garamond. Párrafos con DM Sans. ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4, .elementor-heading-title { font-family: var(--eg-serif) !important; font-weight: 400; letter-spacing: 0.01em; line-height: 1.15; color: var(--eg-texto-oscuro); } h1, .elementor-widget-heading h1 { font-size: clamp(2.4rem, 5.5vw, 4.8rem); } h2, .elementor-widget-heading h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3, .elementor-widget-heading h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); } h4, .elementor-widget-heading h4 { font-size: 1.25rem; } p, .elementor-widget-text-editor p, .elementor-text-editor p { font-family: var(--eg-sans); color: var(--eg-texto-medio); line-height: 1.8; } /* Cursivas en Cormorant */ em, i { font-family: var(--eg-serif); font-style: italic; } /* ── 5. BARRA DE EVENTO ACTIVO ────────────────────────────── Clase para aplicar a una sección de Elementor en la parte superior de la página (antes del header). En Elementor: Advanced → CSS Classes → "eg-event-bar" ──────────────────────────────────────────────────────────── */ .eg-event-bar { background: var(--eg-verde-oscuro) !important; text-align: center; padding: 0.75rem 2rem !important; position: sticky; top: 0; z-index: 9999; } .eg-event-bar p, .eg-event-bar .elementor-widget-text-editor p { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; color: var(--eg-dorado-suave) !important; margin: 0; } .eg-event-bar a { color: var(--eg-dorado-claro) !important; text-decoration: none; border-bottom: 1px solid rgba(212,174,90,0.4); font-weight: 600; margin-left: 0.4rem; transition: border-color 0.2s; } .eg-event-bar a:hover { border-color: var(--eg-dorado-claro); } /* ── 6. SECCIONES POR COLOR ───────────────────────────────── Clases de fondo para cada sección. Aplica en Elementor: Advanced → CSS Classes ──────────────────────────────────────────────────────────── */ /* Fondos claros */ .eg-bg-crema { background-color: var(--eg-crema) !important; } .eg-bg-blanco { background-color: #ffffff !important; } .eg-bg-crema-calida{ background-color: var(--eg-dorado-fondo) !important; } .eg-bg-verde-palido{ background-color: var(--eg-verde-palido) !important; } .eg-bg-verde-claro { background-color: var(--eg-verde-claro) !important; } /* Fondos oscuros */ .eg-bg-verde-oscuro { background-color: var(--eg-verde-oscuro) !important; } .eg-bg-verde-medio { background-color: var(--eg-verde-medio) !important; } .eg-bg-verde-profundo{ background-color: var(--eg-verde-profundo) !important; } /* Textos en secciones oscuras: fuerza colores claros */ .eg-bg-verde-oscuro h1, .eg-bg-verde-oscuro h2, .eg-bg-verde-oscuro h3, .eg-bg-verde-oscuro h4, .eg-bg-verde-oscuro .elementor-heading-title, .eg-bg-verde-medio h1, .eg-bg-verde-medio h2, .eg-bg-verde-medio h3, .eg-bg-verde-medio h4, .eg-bg-verde-medio .elementor-heading-title { color: #ffffff !important; } .eg-bg-verde-oscuro p, .eg-bg-verde-oscuro .elementor-widget-text-editor p, .eg-bg-verde-medio p, .eg-bg-verde-medio .elementor-widget-text-editor p { color: rgba(240,235,224,0.6) !important; } .eg-bg-verde-oscuro a, .eg-bg-verde-medio a { color: var(--eg-dorado-claro); } /* ── 7. TEXTOS ESPECIALES ─────────────────────────────────── Clases de utilidad para aplicar en widgets individuales. ──────────────────────────────────────────────────────────── */ /* Eyebrow / etiqueta superior */ .eg-eyebrow { font-family: var(--eg-sans) !important; font-size: 0.75rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.22em !important; color: var(--eg-dorado) !important; margin-bottom: 1rem !important; } /* Eyebrow en fondo oscuro */ .eg-bg-verde-oscuro .eg-eyebrow, .eg-bg-verde-medio .eg-eyebrow { color: var(--eg-dorado-claro) !important; } /* Cita / blockquote estilo hero */ .eg-lead-quote { font-family: var(--eg-serif) !important; font-size: clamp(1.1rem, 2vw, 1.3rem) !important; font-style: italic !important; color: var(--eg-texto-oscuro) !important; border-left: 2px solid var(--eg-dorado) !important; padding-left: 1.2rem !important; margin-bottom: 2rem !important; line-height: 1.6 !important; } /* Frase central grande (sección de cita) */ .eg-frase-grande { font-family: var(--eg-serif) !important; font-size: clamp(1.7rem, 3vw, 2.6rem) !important; font-style: italic !important; font-weight: 300 !important; color: var(--eg-texto-oscuro) !important; line-height: 1.4 !important; text-align: center !important; } .eg-frase-grande em { color: var(--eg-dorado) !important; font-style: normal !important; } /* Firma / nombre artístico */ .eg-firma { font-family: var(--eg-serif) !important; font-size: 1.7rem !important; font-style: italic !important; color: var(--eg-dorado) !important; margin-top: 1.5rem !important; } /* Texto de prueba social pequeño */ .eg-social-proof { font-size: 0.8rem !important; color: var(--eg-texto-muted) !important; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem !important; } /* Número estadístico */ .eg-stat-num { font-family: var(--eg-serif) !important; font-size: clamp(2.5rem, 4vw, 3.2rem) !important; font-weight: 300 !important; color: var(--eg-dorado-claro) !important; line-height: 1 !important; } .eg-stat-label { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: rgba(240,224,176,0.45) !important; margin-top: 0.3rem !important; } /* ── 8. BOTONES ───────────────────────────────────────────── Aplica en Elementor: en el widget Botón → Advanced → CSS Classes ──────────────────────────────────────────────────────────── */ /* Reset base para todos los botones EG */ .eg-btn, .eg-btn-dorado, .eg-btn-outline-verde, .eg-btn-outline-crema { font-family: var(--eg-sans) !important; font-size: 0.82rem !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 2px !important; padding: 0.9rem 2.2rem !important; transition: all 0.22s ease !important; display: inline-block !important; text-decoration: none !important; } /* Botón principal: fondo verde oscuro, texto dorado */ .eg-btn, .elementor-button.eg-btn { background-color: var(--eg-verde-oscuro) !important; color: var(--eg-dorado-suave) !important; border: 1px solid var(--eg-verde-oscuro) !important; } .eg-btn:hover, .elementor-button.eg-btn:hover { background-color: var(--eg-verde-profundo) !important; color: var(--eg-dorado-suave) !important; } /* Botón dorado: fondo dorado, texto blanco */ .eg-btn-dorado, .elementor-button.eg-btn-dorado { background-color: var(--eg-dorado) !important; color: #ffffff !important; border: 1px solid var(--eg-dorado) !important; } .eg-btn-dorado:hover, .elementor-button.eg-btn-dorado:hover { background-color: var(--eg-dorado-claro) !important; border-color: var(--eg-dorado-claro) !important; color: #ffffff !important; } /* Botón outline verde: borde verde, fondo transparente */ .eg-btn-outline-verde, .elementor-button.eg-btn-outline-verde { background-color: transparent !important; color: var(--eg-verde-oscuro) !important; border: 1px solid var(--eg-verde-suave) !important; } .eg-btn-outline-verde:hover, .elementor-button.eg-btn-outline-verde:hover { background-color: var(--eg-verde-palido) !important; color: var(--eg-verde-oscuro) !important; } /* Botón outline crema: para usar sobre fondos oscuros */ .eg-btn-outline-crema, .elementor-button.eg-btn-outline-crema { background-color: transparent !important; color: var(--eg-dorado-suave) !important; border: 1px solid rgba(240,224,176,0.35) !important; } .eg-btn-outline-crema:hover, .elementor-button.eg-btn-outline-crema:hover { border-color: var(--eg-dorado-claro) !important; color: var(--eg-dorado-claro) !important; } /* ── 9. TARJETAS ──────────────────────────────────────────── Para widgets tipo Inner Section o Container con estas clases. ──────────────────────────────────────────────────────────── */ /* Tarjeta clara (producto, fase del método) */ .eg-card { background: #ffffff !important; border: 1px solid var(--eg-crema-borde) !important; border-radius: 2px !important; padding: 2.5rem 2rem !important; transition: border-color 0.2s, transform 0.2s !important; } .eg-card:hover { border-color: var(--eg-dorado) !important; transform: translateY(-2px) !important; } /* Tarjeta oscura (producto destacado, card de testimonio) */ .eg-card-verde { background: var(--eg-verde-oscuro) !important; border: 1px solid var(--eg-verde-oscuro) !important; border-radius: 2px !important; padding: 2.5rem 2rem !important; } .eg-card-verde h2, .eg-card-verde h3, .eg-card-verde .elementor-heading-title { color: var(--eg-dorado-suave) !important; } .eg-card-verde p, .eg-card-verde .elementor-widget-text-editor p { color: rgba(240,224,176,0.55) !important; } /* Tarjeta de testimonio */ .eg-testimonio { background: var(--eg-verde-medio) !important; border: 1px solid rgba(255,255,255,0.06) !important; padding: 2.2rem !important; transition: border-color 0.2s !important; } .eg-testimonio:hover { border-color: rgba(212,174,90,0.3) !important; } /* ── 10. BADGES Y ETIQUETAS DE EVENTO ─────────────────────── Para aplicar en un widget HTML o Text dentro de cada evento. ──────────────────────────────────────────────────────────── */ .eg-badge { font-family: var(--eg-sans); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.2rem 0.6rem; border-radius: 2px; display: inline-block; margin-right: 0.3rem; margin-bottom: 0.5rem; } .eg-badge--live { background: rgba(45,74,45,0.1); color: var(--eg-verde-medio); border: 1px solid rgba(45,74,45,0.2); } .eg-badge--free { background: rgba(184,146,46,0.1); color: var(--eg-dorado); border: 1px solid rgba(184,146,46,0.2); } .eg-badge--presencial { background: rgba(30,51,32,0.08); color: var(--eg-verde-medio); border: 1px solid rgba(30,51,32,0.15); } /* Fila de evento activo */ .eg-evento-activo { border-color: var(--eg-dorado) !important; background: var(--eg-dorado-fondo) !important; } /* ── 11. LÍNEA SEPARADORA DORADA ──────────────────────────── Alternativa a la línea del Divider nativo de Elementor. Aplica la clase "eg-divider" al widget Divider. ──────────────────────────────────────────────────────────── */ .eg-divider .elementor-divider-separator { border-color: var(--eg-dorado) !important; border-width: 1px !important; width: 60px !important; } /* Versión tenue para separaciones en secciones oscuras */ .eg-divider-sutil .elementor-divider-separator { border-color: rgba(255,255,255,0.08) !important; border-width: 1px !important; width: 100% !important; } /* ── 12. NÚMERO GRANDE DECORATIVO ─────────────────────────── Para las fases del método (I, II, III) — widget Heading. Aplica la clase "eg-num-decorativo". ──────────────────────────────────────────────────────────── */ .eg-num-decorativo .elementor-heading-title { font-family: var(--eg-serif) !important; font-size: 5rem !important; font-weight: 300 !important; color: var(--eg-verde-palido) !important; line-height: 1 !important; /* En fondo oscuro cambia el color: */ } .eg-bg-verde-oscuro .eg-num-decorativo .elementor-heading-title { color: rgba(255,255,255,0.05) !important; } /* ── 13. ESTRELLAS TRUSTPILOT ─────────────────────────────── Aplica "eg-stars" a un widget Text con las estrellas ★★★★★ ──────────────────────────────────────────────────────────── */ .eg-stars p, .eg-stars { color: var(--eg-dorado-claro) !important; font-size: 1rem !important; letter-spacing: 0.1em !important; } .eg-score { font-family: var(--eg-serif) !important; font-size: 3.5rem !important; font-weight: 300 !important; color: var(--eg-dorado-claro) !important; line-height: 1 !important; } /* ── 14. CHIPS / ETIQUETAS PEQUEÑAS ──────────────────────── Para el bloque "Sobre mí" — widget Text o HTML. ──────────────────────────────────────────────────────────── */ .eg-chip { font-size: 0.75rem; padding: 0.3rem 0.9rem; border: 1px solid var(--eg-crema-borde); color: var(--eg-texto-muted); background: #fff; letter-spacing: 0.05em; display: inline-block; margin: 0.25rem; } /* ── 15. HERO — BADGE FLOTANTE ────────────────────────────── Este bloque necesita posicionamiento relativo en el padre y absoluto en el badge. Usar widget HTML para máxima fidelidad, o replicar con un widget Image Box + Custom CSS. ──────────────────────────────────────────────────────────── */ .eg-hero-badge { position: absolute; bottom: -1.5rem; left: -2rem; background: var(--eg-verde-oscuro); padding: 1.2rem 1.6rem; min-width: 200px; z-index: 10; } .eg-hero-badge-num { font-family: var(--eg-serif); font-size: 2.6rem; color: var(--eg-dorado-claro); line-height: 1; display: block; } .eg-hero-badge-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(240,224,176,0.5); margin-top: 0.3rem; display: block; } /* ── 16. AJUSTES ELEMENTOR NATIVOS ────────────────────────── Correcciones para que Elementor no sobreescriba el diseño. ──────────────────────────────────────────────────────────── */ /* Eliminar el padding lateral por defecto en mobile */ @media (max-width: 767px) { .elementor-section.elementor-section-boxed > .elementor-container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } /* Evitar que el tema sobreescriba la familia de fuentes en headings */ .elementor-widget-heading .elementor-heading-title { font-family: var(--eg-serif) !important; } /* Asegurar que los iconos de Elementor no hereden la fuente serif */ .elementor-icon, .elementor-icon i, .eicon-star, i.fas, i.far, i.fab { font-family: inherit !important; } /* ── FIN DEL CSS GLOBAL ──────────────────────────────────── *//* End custom CSS */