/* ============================================================ Puente Elementor → diseño Libertad Adapta el HTML que genera Elementor (contenedores .e-con y los wrappers de cada widget) a los estilos de libertad-global.css, para que los WIDGETS NATIVOS se vean como el diseño original. Se carga después de libertad-global.css. ============================================================ */ /* --- 1. Reasertar el layout del diseño en los contenedores Elementor --- (Elementor fuerza display:flex en .e-con; el diseño usa grid/flex propios. Subimos especificidad con .elementor-element para ganar sin !important.) */ .elementor-element.e-con.about-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(48px,7vw,110px); align-items:center; } .elementor-element.e-con.services-head{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:90px; } .elementor-element.e-con.featured-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(48px,7vw,110px); align-items:center; } .elementor-element.e-con.testi-inner { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(48px,7vw,110px); align-items:center; } .elementor-element.e-con.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); } .elementor-element.e-con.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; } .elementor-element.e-con.results-head, .elementor-element.e-con.team-head { display:block; text-align:center; } .elementor-element.e-con.final-cta-inner { display:flex; align-items:center; justify-content:center; min-height:720px; } .elementor-element.e-con.about-images { position:relative; min-height:640px; } .elementor-element.e-con.featured-content, .elementor-element.e-con.about-content, .elementor-element.e-con.testi-left { display:block; } @media (max-width:1024px){ .elementor-element.e-con.svc-grid { grid-template-columns:repeat(2,1fr); } .elementor-element.e-con.team-grid{ grid-template-columns:1fr; } } @media (max-width:900px){ .elementor-element.e-con.services-head{ grid-template-columns:1fr; gap:32px; margin-bottom:56px; } } @media (max-width:768px){ .elementor-element.e-con.about-grid, .elementor-element.e-con.featured-grid, .elementor-element.e-con.testi-inner { grid-template-columns:1fr; } .elementor-element.e-con.svc-grid { grid-template-columns:1fr; } } /* --- 2. Quitar relleno/gap por defecto de Elementor donde el diseño manda --- */ /* El .container conserva su gutter horizontal del diseño (padding:0 var(--pad-x)); antes lo poníamos a 0 y el contenido tocaba los bordes en móvil/tablet. */ .elementor-element.e-con.container { padding-left:var(--pad-x); padding-right:var(--pad-x); padding-top:0; padding-bottom:0; } .elementor-element.e-con.about-content, .elementor-element.e-con.featured-content, .elementor-element.e-con.testi-left, .elementor-element.e-con.final-cta-content, .elementor-element.e-con.results-head, .elementor-element.e-con.team-head, .elementor-element.e-con.services-head, .elementor-element.e-con.featured-cta, .elementor-element.e-con.final-cta-ctas { padding:0; } .elementor-element.e-con.about-content, .elementor-element.e-con.featured-content, .elementor-element.e-con.testi-left, .elementor-element.e-con.final-cta-content { --gap:0px; gap:0; } /* La tarjeta de servicio conserva su padding del diseño */ .elementor-element.e-con.svc { padding:48px 32px 56px; } /* --- 3. Widgets: sin margen por defecto; heredan la tipografía del diseño --- */ .elementor-element.e-con .elementor-widget { margin-block-end:0; } /* El texto del Encabezado hereda tamaño/peso/etc. del wrapper (que lleva la clase del diseño), pero la FAMILIA la fijamos explícitamente: serif (Cormorant) en los títulos y sans (DM Sans) en eyebrows/etiquetas. (Antes "font:inherit" forzaba la fuente del body = sans en todos los títulos → tipografía incorrecta.) */ /* Familia con !important para ganar a la tipografía global de Elementor (Roboto). */ .elementor-element.e-con .elementor-widget-heading .elementor-heading-title { font-family:var(--serif) !important; font-size:inherit; font-weight:inherit; font-style:inherit; letter-spacing:inherit; line-height:inherit; color:inherit; margin:0; } .elementor-element.e-con .elementor-widget-heading.eyebrow .elementor-heading-title, .elementor-element.e-con .elementor-widget-heading.hero-side .elementor-heading-title, .elementor-element.e-con .elementor-widget-heading.hero-scroll .elementor-heading-title, .elementor-element.e-con .elementor-widget-heading.svc-num .elementor-heading-title, .elementor-element.e-con .elementor-widget-heading.about-tag .elementor-heading-title, .elementor-element.e-con .elementor-widget-heading.doc-role .elementor-heading-title, .elementor-element.e-con .elementor-widget-heading.result-tag .elementor-heading-title, .elementor-element.e-con .elementor-widget-heading.result-time .elementor-heading-title { font-family:var(--sans) !important; } .elementor-element.e-con .elementor-widget-text-editor { color:inherit; } /* Solo reseteamos el margen INFERIOR del

(evita dobles espacios). El margen SUPERIOR y el HORIZONTAL los gestiona el diseño: así los párrafos de columnas van a la izquierda (about-lead) y las cabeceras centradas siguen centradas (results-head/team-head con margin:auto). Antes forzar margin:0/auto rompía esto. */ .elementor-element.e-con .elementor-widget-text-editor p { margin-bottom:0; } /* Color dorado de los de los títulos (el diseño lo hacía con inline style) */ .elementor-widget-heading.h-section em, .elementor-widget-heading.h-display em, .final-cta-content .elementor-widget-heading em { font-style:italic; font-weight:300; color:var(--gold); } /* Cabeceras centradas: centrar el eyebrow y el texto */ .results-head .elementor-widget, .team-head .elementor-widget, .final-cta-content .elementor-widget { text-align:center; } .results-head .eyebrow, .team-head .eyebrow, .final-cta-content .eyebrow { justify-content:center; } /* --- 4. Botones nativos: el adopta el estilo .btn --- (con !important para ganar al color de acento verde por defecto de Elementor) */ /* Doble borde/padding: el WRAPPER del widget Botón lleva la clase .btn (de css_classes), así que el diseño .btn le pintaría un 2º borde + relleno. Lo neutralizamos: todo el estilo del botón va SOLO en el interno. */ .elementor-widget-button.btn, .elementor-widget-button.solid, .elementor-widget-button.cream { border:0 !important; padding:0 !important; background:transparent !important; overflow:visible !important; box-shadow:none !important; } .elementor-widget-button.btn::after { content:none !important; display:none !important; } .elementor-widget-button .elementor-button-content-wrapper { padding:0 !important; border:0 !important; } .elementor-widget-button .elementor-button { display:inline-flex !important; align-items:center; justify-content:center; gap:12px; font-family:var(--sans) !important; font-size:11px !important; letter-spacing:.28em !important; text-transform:uppercase; font-weight:500 !important; padding:18px 32px !important; border:1px solid var(--gold) !important; background:transparent !important; color:var(--gold) !important; border-radius:0 !important; position:relative; overflow:hidden; transition:all .5s cubic-bezier(.2,.7,.2,1); fill:currentColor; } .elementor-widget-button .elementor-button::after { content:""; position:absolute; inset:0; background:var(--gold); transform:translateY(101%); transition:transform .55s cubic-bezier(.7,0,.2,1); z-index:0; } .elementor-widget-button .elementor-button:hover::after { transform:translateY(0); } .elementor-widget-button .elementor-button > * { position:relative; z-index:1; transition:color .35s; } .elementor-widget-button .elementor-button:hover > * { color:var(--ink) !important; } .elementor-widget-button.solid .elementor-button { background:var(--gold) !important; color:var(--ink) !important; } .elementor-widget-button.solid .elementor-button::after { background:transparent; border:1px solid var(--gold); } .elementor-widget-button.solid .elementor-button:hover { background:transparent !important; color:var(--gold) !important; } .elementor-widget-button.solid .elementor-button:hover > * { color:var(--gold) !important; } .elementor-widget-button.cream .elementor-button { border-color:var(--ink) !important; color:var(--ink) !important; } .elementor-widget-button.cream .elementor-button::after { background:var(--ink); } .elementor-widget-button.cream .elementor-button:hover > * { color:var(--cream) !important; } /* --- 5. Imágenes de fondo (contenedores) conservan el alto del diseño --- */ .elementor-element.e-con.svc-img { min-height:180px; } .elementor-element.e-con.featured-img { min-height:680px; } .elementor-element.e-con.doc-img { aspect-ratio:3/4; } /* --- 6. EDITOR de Elementor: el JS de reveal no corre allí, así que el contenido .reveal quedaría invisible (opacity:0). Lo mostramos siempre. --- */ .elementor-editor-active .reveal { opacity:1 !important; transform:none !important; } .elementor-editor-active .img-reveal::after { transform:scaleY(0) !important; } .elementor-editor-active .img-reveal img, .elementor-editor-active .img-reveal .img-fake { transform:none !important; } .elementor-editor-active .eyebrow::before { transform:scaleX(1) !important; } /* Stats del hero editables en el EDITOR: el CONTENEDOR no intercepta el clic (pointer-events:none) y los CONTADORES sí lo reciben (auto) → al hacer clic en "15+" se selecciona el widget Contador (no el contenedor). */ .elementor-editor-active .hero-meta { pointer-events:none !important; } .elementor-editor-active .hero-meta .elementor-widget-counter, .elementor-editor-active .hero-meta .elementor-widget-counter * { pointer-events:auto !important; } /* ============================================================ 9. HEADER y FOOTER (plantillas de Theme Builder con widgets nativos) ============================================================ */ /* Logo (widget Imagen) con la altura del diseño. max-width:none + width:auto evita que el contenedor flex lo aplaste (salía a 30px). */ .nav .elementor-widget-image, .nav-inner .elementor-widget-image { flex:0 0 auto; width:auto; } /* Ancho EXPLÍCITO: el logo es un SVG 1000×500 (2:1). Con width:auto colapsaba a ~48px en el contenedor flex de Elementor (el SVG llegaba como complete:false y no se aplicaba su ratio intrínseco). object-fit:contain mantiene la proporción. */ .nav .elementor-widget-image img, .nav-inner .elementor-widget-image img { height:100px !important; width:200px !important; max-width:none !important; object-fit:contain; display:block; } .footer-brand .elementor-widget-image img { height:110px !important; width:220px !important; max-width:none !important; object-fit:contain; display:block; } .nav .elementor-widget-image .elementor-widget-container, .footer-brand .elementor-widget-image .elementor-widget-container { line-height:0; } @media (max-width:700px){ .nav .elementor-widget-image img{ height:70px !important; width:140px !important; } .footer-brand .elementor-widget-image img{ height:56px !important; width:112px !important; } } /* Franja blanca sobre el header: la plantilla del Theme Builder envuelve el menú móvil (overlay position:fixed) en un contenedor de Elementor que quedaba en el flujo con 10px+10px de padding → se veía ~20px del fondo del body por encima del header. Como su contenido es fixed, anulamos su alto (no afecta al .nav). */ .elementor .e-con:has(.mobile-menu), .elementor .e-con-full:has(.mobile-menu) { padding-top:0 !important; padding-bottom:0 !important; min-height:0 !important; } /* nav-inner en fila space-between; sus 3 bloques a width:auto (Elementor los pone a 100% por defecto, lo que aplastaba el menú y solapaba el grupo derecho). */ /* El nav-inner mantiene su espaciado (sin el pad-x grande del .container, que no dejaría sitio al menú en desktop); en móvil añade un pequeño gutter. */ .elementor-element.e-con.nav-inner { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:32px; padding-left:0; padding-right:0; } @media (max-width:1024px){ .elementor-element.e-con.nav-inner { padding-left:24px; padding-right:24px; } } .elementor-element.e-con.nav-right { display:flex; flex-direction:row; align-items:center; gap:24px; width:auto; flex:0 0 auto; } .nav-inner .nav-links { width:auto; flex:0 1 auto; } /* Transición suave + estado .scrolled (sticky). Elementor deja el contenedor transparente, así que aquí reproducimos el oscurecido del diseño con prioridad alta. libertad.js añade la clase .scrolled al hacer scroll (>80px). */ .elementor-element.e-con.nav { transition:background-color .4s ease, padding .4s ease; } .elementor-element.e-con.nav.scrolled, .nav.scrolled { background-color:rgba(45,42,38,0.92) !important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid var(--line-dark); padding-top:16px !important; padding-bottom:16px !important; } /* Widget "Menú de navegación" con el aspecto de .nav-links del diseño */ .nav-links .elementor-nav-menu, .nav-links .elementor-nav-menu--main { display:flex; gap:38px; align-items:center; flex-wrap:nowrap; width:auto; } .nav-links .elementor-nav-menu--main .elementor-item { font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream) !important; padding:0; line-height:1; background:transparent; fill:var(--cream); position:relative; } /* Hover/activo: dorado (con !important para ganar al color del tema global de Elementor). */ .nav-links .elementor-item:hover, .nav-links .elementor-item:focus, .nav-links .elementor-item.elementor-item-active { color:var(--gold) !important; background:transparent !important; } /* Subrayado dorado que crece desde el centro (como .nav-links a::after del diseño). El menú de Elementor ya pinta un "pointer" ::after pero en verde (--e-global-color-accent) con especificidad (0,4,1); usamos !important en cada propiedad para imponer el del diseño. */ .nav-links .elementor-nav-menu--main .elementor-item::after { content:"" !important; position:absolute !important; left:50% !important; bottom:-6px !important; width:0 !important; height:1px !important; background-color:var(--gold) !important; transition:width .3s ease, left .3s ease !important; opacity:1 !important; } .nav-links .elementor-nav-menu--main .elementor-item:hover::after, .nav-links .elementor-nav-menu--main .elementor-item.elementor-item-active::after { width:100% !important; left:0 !important; } .nav-links .elementor-nav-menu--main .elementor-item::before { display:none !important; } /* Usamos el menú móvil propio del diseño (.mobile-menu): ocultamos el toggle/dropdown nativos */ .nav-links .elementor-menu-toggle, .nav-links .elementor-nav-menu--dropdown { display:none !important; } @media (max-width:1024px){ .nav .nav-links { display:none !important; } } /* Burger y botón de cierre del menú móvil: son