/* ============================================================
   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 --- */
.elementor-element.e-con.container,
.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; }
.elementor-element.e-con .elementor-widget-heading .elementor-heading-title {
  font:inherit; letter-spacing:inherit; line-height:inherit; color:inherit; margin:0;
}
.elementor-element.e-con .elementor-widget-text-editor { color:inherit; }
.elementor-element.e-con .elementor-widget-text-editor p { margin:0; }

/* Color dorado de los <em> 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 <a.elementor-button> adopta el estilo .btn ---
   (con !important para ganar al color de acento verde por defecto de Elementor) */
.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; }

/* --- 7. HERO nativo (fondo de vídeo + contadores nativos) --- */
.elementor-element.e-con.hero { min-height:100vh; }
.hero-bg .elementor-background-video-container,
.hero-bg .elementor-background-video-container video,
.hero-bg video { width:100% !important; height:100% !important; object-fit:cover; object-position:60% center; }
.hero .accent { font-style:italic; font-weight:300; color:var(--gold); }
/* hero-meta: el contador nativo toma el aspecto del diseño */
.hero-meta-item .elementor-counter { text-align:left; }
.hero-meta-item .elementor-counter-number-wrapper {
  display:block; font-family:var(--serif); font-size:32px; font-weight:400;
  letter-spacing:0; color:var(--gold); margin-bottom:6px; line-height:1;
}
.hero-meta-item .elementor-counter-title {
  font-family:var(--sans); font-size:11px; letter-spacing:.06em;
  color:rgba(255,253,251,.7); text-transform:none; font-weight:400; line-height:1.4;
}
