/* ============================================================================
   assets/elementor-atomic-fixes.css

   Complemento de `assets/elementor-atomic.css` (el puente de cascada).

   El puente reemite el sistema de diseño con `.elementor` de ancestro para que
   empate en especificidad (0,2,0) con los estilos base del motor atomico y gane
   por orden de encolado. Eso resuelve todas las propiedades que una clase del
   sistema de diseño DECLARA. No resuelve dos cosas:

     1. Las propiedades que el motor declara y la clase del sistema NO
        (`padding:10px` y `min-width:30px` de `.e-div-block-base` /
        `.e-flexbox-base`, `width:100%` de `.e-con`, la piel azul de
        `.e-button-base`). Nada las pisa: no hay con que.

     2. Los selectores del sistema de diseño anclados a una ETIQUETA que el
        editor atomico no sabe emitir. El enum de `tag` de `e-div-block` y
        `e-flexbox` es `div|header|section|article|aside|footer|a|button`.
        No hay `nav`, ni `main`, ni `ul`, ni `li`. Reglas como
        `.navbar-frame nav a` o `.footer-dark ul` nunca llegan a aplicarse.

   Este archivo cubre esas dos cosas y nada mas. No inventa diseño: cada valor
   es copia literal de `assets/components.css`, `assets/site.css` o de un
   atributo `style` del fuente `website/site/index.html`.

   ORDEN DE ENCOLADO (importa, y mucho)
   ------------------------------------
     prio 10 · base-desktop.css        (motor, en uploads/)
     prio 15 · ESTE ARCHIVO            (neutralizacion del motor)
     prio 20 · elementor-atomic.css    (sistema de diseño reemitido)

   Las reglas del bloque 1 valen (0,2,0), igual que las del motor y que las del
   puente. Al ir en medio, ganan al motor (que va antes) y pierden contra el
   sistema de diseño (que va despues). Es justo lo que se quiere: quitar el
   estilo del motor sin tapar el del sistema.

   Las reglas del bloque 2 y 3 llevan un ancestro extra a proposito, para ganar
   por especificidad al puente sin depender del orden.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1 · Neutralizacion del motor atomico
-------------------------------------------------------------------------------*/

/* `.e-con { width: var(--width) }` con `--width:100%`, y `.elementor-element
   { width:100% }`. Un `<div>` del fuente vale `width:auto`. Los contenedores
   en flex y los absolutos (`.hero-dock`, `.info-chip`, `.tag-pill`,
   `.cta-pair`) se estiran a todo el ancho si no se corrige. */
.elementor .e-atomic-element { width: auto; }

/* `.e-div-block-base { min-width:30px; padding:10px }`
   `.e-flexbox-base   { padding:10px }`
   Ningun `<div>` del fuente lleva relleno propio. Donde el sistema de diseño
   si declara `padding` (`.tag-pill`, `.faq-item button`, `.hero-dock`,
   `.stats-premium .cell`...) el puente lo devuelve, porque va despues. */
.elementor .e-div-block-base,
.elementor .e-flexbox-base { padding: 0; min-width: 0; }

/* `.e-form-input-base { height:36px; font-size:12px; color:#0c0d0e;
   border-radius:0; border-color:#D6D5D5 }`.
   El puente devuelve font, color, borde y radio, porque `.input` los declara
   (components.css:86). `height` no lo declara nadie: el alto del campo lo da su
   padding. Sin esta linea el input mide 36px cuando el fuente mide 45,5px
   (19,5 de linea + 24 de padding + 2 de borde), y afecta a los 4 formularios.
   Detectado por separado en `contacto` y en `inversores`. */
.elementor .e-form-input-base { height: auto; }

/* `.e-form-submit-button-base { justify-content:center }`. `.btn` declara
   `display:inline-flex` y `align-items:center`, pero no `justify-content`.
   En el fuente el texto del boton de envio se alinea al inicio. */
.elementor .e-form-submit-button-base:where(.btn) { justify-content: normal; }

/* `.e-button-base { background-color:#375EFB; border-radius:2px;
   padding-block:12px; padding-inline:24px; text-align:center;
   display:inline-block }`.
   Los `e-button` que NO son un boton del sistema de diseño son enlaces de
   texto: los seis del menu y los nueve del pie. El `:where()` no suma
   especificidad, asi que la regla sigue valiendo (0,2,0). */
.elementor .e-button-base:where(:not(.btn)):where(:not(.btn-circle)):where(:not(.skip-link)) {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  text-align: inherit;
  display: inline;
}

/* `.e-paragraph-base { margin:0 }` borra el margen que el navegador le da a un
   `<p>`. El fuente cuenta con el: la `.lead` de `.hero-under` (rejilla, sin
   colapso de margenes), el `<p>` del panel de FAQ y el parrafo de marca del
   pie. Donde el sistema de diseño si declara `margin:0` (`.card-property .meta`,
   `.step-cell p`, `.card-testimonial p`, `.cta-band--premium .sub`) el puente
   lo devuelve, porque va despues y empata en especificidad (0,2,1).
   Solo los `<p>`: los `e-paragraph` con `tag: span` no llevan margen. */
.elementor p.e-paragraph-base { margin-block: 1em; }

/* El `<svg>` del `.faq-ico` no tiene ninguna regla de tamaño en components.css
   (mira components.css:239: solo `.faq-item button .faq-ico`, de 36x36, y el
   `rotate(45deg)` al abrir). Se comporta como un reemplazado con viewBox y sin
   width, y llena los 36px de su circulo. Medido con Playwright: 36x36.
   El bloque ENGINE_OVERRIDES del puente forzaba 18px con un comentario que decia
   lo contrario; corregido en `_scripts/build-elementor-atomic-css.py` el
   2026-07-08. Esta linea se queda como cinturon y tirantes: repone exactamente
   lo que `Svg_Src_Transformer` escribe inline (`width:100%; height:100%`), asi
   que si algun dia el motor deja de escribirlo, el icono no se encoge.
   Especificidad (0,3,1), por encima de cualquier `.e-svg-base > svg` (0,2,1). */
.elementor .faq-item .faq-ico > svg { width: 100% !important; height: 100% !important; }

/* `reset.css` de Hello Elementor (`a { text-decoration:none }`) y
   `frontend.min.css` de Elementor (`.elementor a { text-decoration:none }`)
   apagan el subrayado que el navegador le da a un enlace de prosa. tokens.css
   cuenta con el: `a { color: var(--brand-strong); text-underline-offset: 3px }`
   no declara `text-decoration` porque no le hacia falta.
   Se devuelve solo a los enlaces SIN clase dentro del texto enriquecido de un
   parrafo o un titular, que es exactamente donde el fuente los subraya (el
   enlace del paso 2 y el del panel de FAQ). El `:where()` no suma
   especificidad: los `.btn`, `.footer-dark a` y demas siguen sin subrayado. */
.elementor .e-paragraph-base a:where(:not([class])),
.elementor .e-heading-base a:where(:not([class])) { text-decoration: underline; }

/* La ubicacion `header` del Theme Builder envuelve la plantilla en un `<header>`
   propio, cuya caja mide exactamente lo mismo que la barra. Un `position:sticky`
   solo puede desplazarse dentro de la caja de su padre: encerrado ahi, se va con
   el scroll a los dos pixeles. El sticky sube al envoltorio, con el mismo `top`
   y el mismo `z-index` que site.css le da a `.site-header`. */
.elementor-location-header { position: sticky; top: 14px; z-index: 70; }
.elementor.elementor-location-header .site-header { position: static; top: auto; z-index: auto; }

@media (max-width: 920px) {
  .elementor-location-header { top: 8px; }
}

/* Cuatro paginas del fuente (contacto, sesion-informativa, gracias y el articulo
   del blog) no usan `.site-header`: usan `<header class="container">` con un
   `.nav-minimal` dentro, y NO son sticky. Se sirven con la plantilla de Theme
   Builder `header-minimal.json`, y la ubicacion envuelve a las dos por igual, asi
   que el sticky de arriba tambien las alcanzaria. `inc/site-chrome.php` marca el
   body con `lon-nav-minimal` en esas cuatro (misma lista que decide la condicion
   de inclusion de la plantilla). Especificidad (0,2,1) contra (0,1,0). */
body.lon-nav-minimal .elementor-location-header { position: static; top: auto; z-index: auto; }


/* ----------------------------------------------------------------------------
   2 · Selectores del sistema de diseño anclados a etiquetas inalcanzables

   Copia literal de la declaracion original. Solo cambia el selector: la
   etiqueta pasa a ser la clase que el nodo atomico si puede llevar.
-------------------------------------------------------------------------------*/

/* components.css:130  `.navbar-frame nav { display:flex; gap:4px; flex-wrap:wrap }` */
.elementor .navbar-frame .main-links { display: flex; gap: 4px; flex-wrap: wrap; }

/* components.css:131  `.navbar-frame nav a { ... }` */
.elementor .navbar-frame .main-links a {
  font: 500 14px/1 var(--font-body); color: var(--text); text-decoration: none;
  padding: 11px 16px; border-radius: var(--r-pill);
}
/* components.css:135 */
.elementor .navbar-frame .main-links a:hover,
.elementor .navbar-frame .main-links a[aria-current="page"] { background: var(--panel); }

/* components.css:11-20 (hover float): la lista de `.navbar-frame nav a` */
@media (prefers-reduced-motion: no-preference) {
  .elementor .navbar-frame .main-links a { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
  .elementor .navbar-frame .main-links a:hover { transform: translateY(-2px); }
}

/* site.css:72-79  menu movil: `.site-header nav.main-links` */
@media (max-width: 920px) {
  .elementor .site-header .main-links {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3);
    padding: 10px; flex-direction: column; gap: 2px;
  }
  .elementor .site-header .main-links a { padding: 14px 16px; font-size: 15px; }
  .elementor .site-header .navbar-frame.nav-open .main-links { display: flex; }
}

/* components.css:864  `.footer-dark ul { list-style:none; margin:0; padding:0; display:grid; gap:10px }` */
.elementor .footer-dark .link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* site.css:129  `.compare-row dt { ... }`  ->  <span role="term">
   `dt` no esta en el enum de `tag` (lanza `invalid_value`, verificado). El
   comparador de proyectos.html usa `div role="list"` + `role="listitem"` +
   `span role="term"` / `span role="definition"`. */
.elementor .compare-row .lon-el-compare-term {
  font: 400 14px/1.45 var(--font-body); color: var(--text-muted); margin: 0;
}

/* site.css:130  `.compare-row dd { ... }`  ->  <span role="definition"> */
.elementor .compare-row .lon-el-compare-def {
  font: 600 14.5px/1.45 var(--font-body); margin: 0; text-align: right;
}

/* site.css:131  `.compare-col dl { margin:0 }` solo neutraliza el margen que el
   navegador le da a un `<dl>`. El `<div role="list">` que lo sustituye no lo
   trae: no hay nada que portar. */

/* components.css:463  `.card-location .place svg { ...; flex:0 0 auto }`
   El widget `e-svg` intercala un `<div class="e-svg-base">` entre `.place` y el
   `<svg>`: el item flex de `.place` pasa a ser el div, no el svg. El `width` y
   el `height` van en el bloque ENGINE_OVERRIDES del puente (llevan `!important`
   porque pelean contra un atributo `style` inline). El `flex` va aqui. */
.elementor .card-location .place > .e-svg-base { flex: 0 0 auto; }


/* ----------------------------------------------------------------------------
   3 · Atributos `style` del fuente, portados a clase

   Elementor no imprime un atributo `style` en un nodo atomico (_HARNESS.md §3.4).
   Cada declaracion inline de `website/site/*.html` vive aqui, verbatim, con su
   linea de origen. El nodo que la necesita lleva la clase `lon-el-*` en su prop
   `classes` (o en `_css_classes` si es el widget clasico `lon-calendly`).

   Son 64 clases `lon-el-*` en las trece paginas + cabecera + pie + componentes.
   Ninguna huerfana, ninguna sobrante: comprobado nodo a nodo contra los JSON.

   TRES COSAS QUE HAY QUE SABER ANTES DE AÑADIR UNA CLASE AQUI
   ----------------------------------------------------------
   a) Estas clases NO pelean solo contra `base-desktop.css`. Pelean contra el
      PUENTE (`elementor-atomic.css`), que se encola DESPUES de este archivo y
      reemite el sistema de diseño con selectores DESCENDENTES. Ejemplo real:
      `.elementor .lead.lon-el-lead-80` vale (0,3,0) y pierde contra
      `.elementor .about-centered .about-body p` del puente, que vale (0,3,1).
      El parrafo se quedaba en 52ch en vez de 80ch: 39px de alto de diferencia.
      Remedio sin `!important`: subir a (0,4,0) añadiendo la clase base del
      elemento atomico (`.e-paragraph-base`) o el ancestro que haga falta. Se
      aplica donde hace falta, no en bloque, y se comprueba con el valor
      COMPUTADO en el navegador. Declarar la clase no basta.

   b) Hay ALIAS: nombres distintos con la misma declaracion, porque cuatro
      agentes portaron las trece paginas en paralelo. Se agrupan en un solo
      selector. NO se renombra nada en los JSON.

   c) Hay una COLISION real (un nombre, dos declaraciones): `lon-el-lead-80`.
      Se resuelve por contexto, mas abajo, sin tocar los JSON.
-------------------------------------------------------------------------------*/


/* --- 3.1 · Heroes ---------------------------------------------------------- */

/* ALIAS x3, misma declaracion, tres nombres:
     `lon-el-hero-h1`         conocenos:80 · proyectos:70 · financiacion:97
                              san-fernando:107 · el-nido:107
     `lon-el-display-hero-sm` inversores:80 · faq:99 · blog:77
     `lon-el-hero-title-sm`   contacto:56
   <h1 class="display-hero" style="font-size:clamp(36px,5.5vw,82px)"> */
.elementor .display-hero.lon-el-hero-h1,
.elementor .display-hero.lon-el-display-hero-sm,
.elementor .display-hero.lon-el-hero-title-sm { font-size: clamp(36px, 5.5vw, 82px); }

/* ALIAS x2. `lon-el-pill-mb14`: conocenos:79 · proyectos:69 · financiacion:96 ·
   inversores:79 · faq:98 · blog:76 · blog-leasehold:67.
   `lon-el-pill-gap`: san-fernando:106 · el-nido:106.
   <span class="tag-pill" style="margin-bottom:14px"> */
.elementor .tag-pill.lon-el-pill-mb14,
.elementor .tag-pill.lon-el-pill-gap { margin-bottom: 14px; }

/* ALIAS x2. `lon-el-lead-mb20`: proyectos:73 · financiacion:100 · inversores:83 ·
   faq:102 · blog:80.  `lon-el-lead-gap`: san-fernando:110 · el-nido:110.
   <p class="lead" style="margin-bottom:20px"> */
.elementor .lead.lon-el-lead-mb20,
.elementor .lead.lon-el-lead-gap { margin-bottom: 20px; }

/* conocenos:83  <p class="lead" style="margin-bottom:20px;max-width:70ch"> */
.elementor .lead.lon-el-lead-70 { max-width: 70ch; margin-bottom: 20px; }

/* san-fernando:111 / el-nido:111  <div class="spec-chips" style="margin-bottom:22px"> */
.elementor .spec-chips.lon-el-chips-gap { margin-bottom: 22px; }

/* index.html:200  <p class="lead" style="max-width:78ch;margin-bottom:28px"> */
.elementor .lead.lon-el-lead-wide { max-width: 78ch; margin-bottom: 28px; }


/* --- 3.2 · Filas de botones ------------------------------------------------ */

/* ALIAS x3, misma declaracion:
     `lon-el-actions-row` conocenos:225 · proyectos:74 · proyectos:249 · financiacion:101
     `lon-el-btn-row`     san-fernando:117 · el-nido:117
     `lon-el-cta-actions` inversores:226 · faq:252
   <div style="display:flex;gap:12px;flex-wrap:wrap">
   Sin ancestro: los tres aparecen dentro y fuera de `.cta-band`. */
.elementor .lon-el-actions-row,
.elementor .lon-el-btn-row,
.elementor .lon-el-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* san-fernando:204 / el-nido:217  <a class="btn btn-secondary" style="margin-left:8px"> */
.elementor .btn.lon-el-btn-gap { margin-left: 8px; }

/* index.html:286  <a class="btn" style="background:var(--cream);color:var(--ink)"> */
.elementor .btn.lon-el-btn-cream { background: var(--cream); color: var(--ink); }
.elementor .btn.lon-el-btn-cream:hover { background: var(--white); }

/* financiacion:283  <div class="cta-pair" style="margin-top:6px"> */
.elementor .overlay-caption .lon-el-ctapair-mt6 { margin-top: 6px; }


/* --- 3.3 · La colision: `lon-el-lead-80` ----------------------------------- */

/* El grupo A (conocenos) y el grupo B (fichas de producto) usaron el mismo nombre
   para dos declaraciones distintas. Los JSON no se tocan: se separan por contexto,
   que en el DOM es disjunto y se puede comprobar.
     - conocenos:208     el parrafo cuelga de `.about-body`
     - san-fernando:238  el parrafo es hijo DIRECTO de `section.container`
     - el-nido:264       idem
   Y `lon-el-lead-80ch` (inversores:194) es la misma declaracion que el de
   conocenos, con otro nombre: alias, va agrupado con el suyo cuando el selector
   lo permite. Aqui no lo permite (los ancestros difieren), asi que va aparte. */

/* conocenos:208  <p class="lead" style="max-width:80ch">
   Dentro de `.about-centered .about-body`, cuyo `p` del puente vale (0,3,1) y
   fija `max-width:52ch`. Con el ancestro y `.e-paragraph-base` sube a (0,5,0).
   NO lleva `margin-top`: se lo pone `.about-centered .about-body p { margin:0 auto }`. */
.elementor .about-body .e-paragraph-base.lead.lon-el-lead-80 { max-width: 80ch; }

/* san-fernando:238 · el-nido:264  <p class="lead" style="max-width:80ch;margin-top:24px">
   Hijo directo de la seccion. `margin-bottom` se queda en el `1em` del navegador,
   igual que en el fuente. */
.elementor .container > .e-paragraph-base.lead.lon-el-lead-80 { max-width: 80ch; margin-top: 24px; }

/* inversores:194  <p class="lead" style="max-width:80ch"> */
.elementor .e-paragraph-base.lead.lon-el-lead-80ch { max-width: 80ch; }

/* financiacion:119  <p class="lead" style="max-width:88ch;margin-top:var(--s-4)"> */
.elementor .lead.lon-el-lead-88 { max-width: 88ch; margin-top: var(--s-4); }

/* financiacion:149  <p class="lead" style="max-width:82ch;margin:0"> */
.elementor .lead.lon-el-lead-82 { max-width: 82ch; margin: 0; }


/* --- 3.4 · Notas y microcopy ----------------------------------------------- */

/* ALIAS x2. `lon-el-note-mt18`: conocenos:153 · proyectos:205.
   `lon-el-note-gap`: san-fernando:222 · el-nido:247.
   <p class="mini-note" style="margin-top:18px"> */
.elementor .mini-note.lon-el-note-mt18,
.elementor .mini-note.lon-el-note-gap { margin-top: 18px; }

/* financiacion:174,188,202,216  <p class="mini-note" style="padding-inline:6px;margin:0"> */
.elementor .mini-note.lon-el-note-flush { padding-inline: 6px; margin: 0; }

/* blog:122  <p class="mini-note" style="color:color-mix(in srgb, currentColor 78%, transparent)"> */
.elementor .mini-note.lon-el-note-dim { color: color-mix(in srgb, currentColor 78%, transparent); }

/* index.html:289  <p class="sub" style="font-size:12.5px"> */
.elementor .cta-band--premium .sub.lon-el-sub-sm { font-size: 12.5px; }

/* index.html:282  <span class="dot" style="background:var(--cream)"> */
.elementor .tag-pill .dot.lon-el-dot-cream { background: var(--cream); }


/* --- 3.5 · Bandas de llamada a la accion ----------------------------------- */

/* ALIAS x2, misma declaracion. `lon-el-ctaband-sub`: conocenos:223.
   `lon-el-cta-sub`: inversores:224.
   <p style="font:400 15px/1.6 var(--font-body);color:color-mix(in srgb,var(--brand-contrast) 88%,transparent);max-width:48ch;margin-top:10px"> */
.elementor .cta-band .lon-el-ctaband-sub,
.elementor .cta-band .lon-el-cta-sub {
  font: 400 15px/1.6 var(--font-body);
  color: color-mix(in srgb, var(--brand-contrast) 88%, transparent);
  max-width: 48ch; margin-top: 10px;
}

/* conocenos:209  <p style="margin-top:14px"> con un <a class="btn"> dentro.
   El <a> necesita clase, asi que es nodo propio, asi que el <p> pasa a <div> y la
   regla `.about-centered .about-body p` deja de alcanzarlo. Se repone verbatim:
   sin su `font-size` de 15px, el `max-width:52ch` se resuelve sobre los 16px
   heredados y la caja mide 533px en vez de 500px. */
.elementor .about-centered .about-body .lon-el-about-cta {
  font: 400 15px/1.65 var(--font-body); color: var(--text-muted);
  max-width: 52ch; margin: 14px auto 0;
}


/* --- 3.6 · Rejillas y modulos ---------------------------------------------- */

/* proyectos:94  <div style="display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))"> */
.elementor .lon-el-typologies-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* san-fernando:153 / el-nido:166  <div style="display:grid;gap:var(--s-4)"> */
.elementor .lon-el-stack-4 { display: grid; gap: var(--s-4); }

/* san-fernando:216  <div class="discover-grid" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr))"> */
.elementor .discover-grid.lon-el-discover-fit { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* financiacion:147  <div class="econ-module" style="margin-top:var(--s-4)"> */
.elementor .econ-module.lon-el-econ-mt { margin-top: var(--s-4); }

/* san-fernando:191 / el-nido:204  <h2 style="font:600 clamp(26px,3.2vw,40px)/1.12 var(--font-display);margin:14px 0 8px"> */
.elementor .econ-module .lon-el-econ-h2 { font: 600 clamp(26px, 3.2vw, 40px)/1.12 var(--font-display); margin: 14px 0 8px; }

/* san-fernando:192  <p style="font:400 15px/1.65 var(--font-body);color:var(--text-muted);max-width:70ch;margin:0"> */
.elementor .econ-module .lon-el-econ-lead { font: 400 15px/1.65 var(--font-body); color: var(--text-muted); max-width: 70ch; margin: 0; }

/* el-nido:205  igual, con max-width:78ch */
.elementor .econ-module .lon-el-econ-lead-wide { font: 400 15px/1.65 var(--font-body); color: var(--text-muted); max-width: 78ch; margin: 0; }


/* --- 3.7 · Fichas de producto ---------------------------------------------- */

/* san-fernando:159 / el-nido:172  <p class="meta" style="margin:0;font:400 14px/1.6 var(--font-body);color:var(--text-muted)"> */
.elementor .card-listing .meta.lon-el-listing-meta { margin: 0; font: 400 14px/1.6 var(--font-body); color: var(--text-muted); }

/* san-fernando:160 / el-nido:173
   <ul style="margin:0;padding-left:20px;font:400 14.5px/1.7 var(--font-body);color:var(--text-muted)">
   `ul` no esta en el enum de `tag`, pero SI pasa el `wp_kses` de `html-v3`: la
   lista viaja dentro del `e-paragraph tag=span` y la clase va en el `<span>`.
   El lector de pantalla recibe una lista de verdad. */
.elementor .lon-el-listing-list { display: block; }
.elementor .lon-el-listing-list > ul { margin: 0; padding-left: 20px; font: 400 14.5px/1.7 var(--font-body); color: var(--text-muted); }

/* san-fernando:317 / el-nido:343
   <div style="display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid color-mix(in srgb,var(--cream) 18%,transparent);padding-top:16px"> */
.elementor .lon-el-form-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  padding-top: 16px;
}

/* ALIAS x2, misma declaracion, dos contextos distintos.
   `lon-el-rn-tr`          el-nido:260      dentro de `.media-band`
   `lon-el-render-note-tr` blog-leasehold:73 dentro de `.media-organic`
   <span class="render-note" style="position:absolute;top:16px;right:16px"> */
.elementor .media-band > .render-note.lon-el-rn-tr,
.elementor .media-organic .render-note.lon-el-render-note-tr { position: absolute; top: 16px; right: 16px; }


/* --- 3.8 · Inversores ------------------------------------------------------ */

/* inversores:100  <div class="featured-head" style="text-align:left"> */
.elementor .featured-head.lon-el-featured-head-left { text-align: left; }

/* inversores:108  <p style="padding-inline:6px;font:400 13.5px/1.6 var(--font-body);color:var(--text-muted);margin:0"> */
.elementor .card-sale .lon-el-card-sale-copy {
  padding-inline: 6px; font: 400 13.5px/1.6 var(--font-body);
  color: var(--text-muted); margin: 0;
}

/* inversores:111 y 115  <div class="stat-tile stat-tile--soft" style="min-height:auto"> */
.elementor .stat-tile--soft.lon-el-tile-auto { min-height: auto; }


/* --- 3.9 · Blog y articulo ------------------------------------------------- */

/* blog:116  <div class="post-feature" style="cursor:default"> */
.elementor .post-feature.lon-el-post-static { cursor: default; }

/* blog:156  <div class="form-card" style="max-width:640px;margin-inline:auto"> */
.elementor .form-card.lon-el-form-narrow { max-width: 640px; margin-inline: auto; }

/* blog:157  <h2 style="margin:0;font:600 clamp(22px,2.6vw,28px)/1.15 var(--font-display)"> */
.elementor .form-card .lon-el-form-title { margin: 0; font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--font-display); }

/* blog-leasehold:64  <section class="container" style="padding-top:var(--s-4)"> */
.elementor .container.lon-el-section-pt4 { padding-top: var(--s-4); }

/* blog-leasehold:69  <p style="font:400 13px/1 var(--font-body);color:var(--text-soft);margin-top:14px"> */
.elementor .hero-split .lon-el-article-meta { font: 400 13px/1 var(--font-body); color: var(--text-soft); margin-top: 14px; }

/* blog-leasehold:105  <div style="max-width:440px;margin-inline:auto"> */
.elementor .lon-el-card-narrow { max-width: 440px; margin-inline: auto; }


/* --- 3.10 · Contacto, sesion informativa y gracias -------------------------- */

/* contacto:79  <p style="max-width:60ch;margin-inline:auto;text-align:center;font:400 15px/1.65 var(--font-body);color:var(--text-muted)"> */
.elementor .lon-el-calendly-intro {
  max-width: 60ch; margin-inline: auto; text-align: center;
  font: 400 15px/1.65 var(--font-body); color: var(--text-muted);
}

/* contacto:80  <div class="calendly-wrap" style="margin-top:20px">
   Unica clase que NO viaja en la prop `classes`: va en `_css_classes` del widget
   clasico `lon-calendly`, asi que aterriza en el envoltorio `.elementor-element`,
   no en el `.calendly-wrap` que pinta el propio widget. */
.elementor .lon-el-calendly-gap { margin-top: 20px; }

/* contacto:83  <p class="mini-note" style="text-align:center;margin-top:14px;max-width:60ch;margin-inline:auto"> */
.elementor .mini-note.lon-el-calendly-note {
  text-align: center; margin-top: 14px; max-width: 60ch; margin-inline: auto;
}

/* contacto:95 y sesion-informativa:75
   <h2 style="margin:0;font:600 clamp(20px,2.4vw,26px)/1.2 var(--font-display)">
   El titular vive DENTRO del fragmento de formulario (elementor/forms/*.json),
   que no se toca. Se ancla por el `_cssid` del `e-form`, que si es estable. */
.elementor #form-contacto h2,
.elementor #form-sesion-informativa h2 {
  margin: 0; font: 600 clamp(20px, 2.4vw, 26px)/1.2 var(--font-display);
}

/* sesion-informativa:60-63  <span class="num" style="font-size:clamp(18px,2.2vw,24px)"> */
.elementor .stat-tile .num.lon-el-num-sm { font-size: clamp(18px, 2.2vw, 24px); }

/* sesion-informativa:69  <p style="max-width:70ch;margin-inline:auto;text-align:center;font:400 15px/1.7 var(--font-body);color:var(--text-muted)"> */
.elementor .lon-el-si-intro {
  max-width: 70ch; margin-inline: auto; text-align: center;
  font: 400 15px/1.7 var(--font-body); color: var(--text-muted);
}

/* sesion-informativa:74  <form class="form-card" style="max-width:480px;margin-inline:auto"> */
.elementor #form-sesion-informativa { max-width: 480px; margin-inline: auto; }

/* gracias:75  <div class="step-cell" style="max-width:600px;margin-inline:auto;text-align:center"> */
.elementor .step-cell.lon-el-step-narrow {
  max-width: 600px; margin-inline: auto; text-align: center;
}


/* --- 3.11 · Cascada que el editor atomico no reproduce ---------------------
   `.overlay-caption span { font:400 14px/1.6 var(--font-body); opacity:.92 }`
   (components.css:443) apunta a una ETIQUETA. En el fuente cae sobre dos hijos
   directos de `.overlay-caption` que en Elementor cambian de etiqueta.
   Se usa en financiacion:283.
-------------------------------------------------------------------------------*/

/* a) La pildora es un <span class="tag-pill"> en el fuente: la regla la alcanza y
      toda la pildora (cristal, punto y texto) se pinta al 92 %. Un `e-flexbox`
      emite un `<div>`, la regla ya no llega y la pildora sale opaca. La opacidad
      se repone en el contenedor, que es donde vive el grupo de composicion.
      El `font` tampoco es decorativo: `.tag-pill` declara `letter-spacing:.08em`
      y el espaciado se hereda YA RESUELTO EN PX. Sobre los 14px que la regla le
      imponia al <span> son 1,12px; sobre los 11px propios de `.tag-pill` serian
      0,88px, y la palabra sale 8px mas estrecha. */
.elementor .overlay-caption .tag-pill.lon-el-oc-pill {
  opacity: .92; font: 400 14px/1.6 var(--font-body);
}

/* a bis) El texto de la pildora es un nodo de texto suelto en el fuente y aqui
      tiene que ser un <span> propio (`wp_kses` borra `class`, asi que el punto ya
      obliga a nodos hermanos). Ese <span> vuelve a casar `.overlay-caption span`
      y se lleva OTRO .92 encima del .92 del contenedor: 0,846 efectivo. El punto
      si debe quedarse en .92 (en el fuente tambien es un <span> anidado); el
      texto no. */
.elementor .overlay-caption .lon-el-oc-pill > .lon-el-oc-label { opacity: 1; }

/* b) El <strong> es hijo directo de `.overlay-caption` en el fuente: opacity 1.
      Ningun nodo atomico emite un <strong>, asi que viaja dentro de un
      `e-paragraph tag=span`, y `.overlay-caption span` le clava opacity .92 al
      grupo entero (la opacidad de un grupo no se anula desde el hijo). Se
      restaura en el envoltorio, con el `font` que el fuente le daba al contexto
      de linea del <strong>. */
.elementor .overlay-caption .lon-el-oc-strong { opacity: 1; font: inherit; }


/* --- 3.12 · Pie de pagina (index.html) --------------------------------------
   Las tres del pie. `lon-el-lead-wide`, `lon-el-dot-cream`, `lon-el-btn-cream` y
   `lon-el-sub-sm`, que antes vivian aqui, estan arriba con las demas de su
   familia (heroes, filas de botones, microcopy).
-------------------------------------------------------------------------------*/

/* index.html:295  <footer class="footer-dark" style="border-radius:0;margin-top:var(--s-7)"> */
.elementor .footer-dark.lon-el-footer-flush { border-radius: 0; margin-top: var(--s-7); }

/* index.html:296  <div class="container" style="display:grid;gap:var(--s-5)"> */
.elementor .footer-dark .lon-el-footer-grid { display: grid; gap: var(--s-5); }

/* index.html:304  <p style="font:400 13px/1.6 var(--font-body);color:...;max-width:32ch;margin-top:14px"> */
.elementor .footer-dark .lon-el-footer-note {
  font: 400 13px/1.6 var(--font-body);
  color: color-mix(in srgb, var(--cream) 70%, transparent);
  max-width: 32ch; margin-top: 14px;
}

/* ----------------------------------------------------------------------------
   Consentimiento RGPD compacto  ·  decisión CEO 2026-07-09
   ----------------------------------------------------------------------------
   Los formularios envian a GoHighLevel, asi que el opt-in de tratamiento de
   datos es obligatorio. La primera version era una fila propia que empujaba el
   boton y todo el pie ~34px hacia abajo: fiel salvo por ese desplazamiento.
   Aqui la casilla va en una sola linea compacta que reutiliza el hueco del
   texto de ayuda del formulario (que se retira), asi el alto no crece y la
   pagina vuelve a la paridad. La casilla sigue siendo opt-in explicito sin
   marcar y sigue siendo requerida para enviar.
   Especificidad (0,3,0), gana a los estilos base del motor (0,2,0).
-------------------------------------------------------------------------------*/
.elementor .e-flexbox-base.lon-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
}
.elementor .lon-consent .e-form-checkbox-base {
  width: 16px; height: 16px; min-width: 16px;
  margin: 2px 0 0; flex: 0 0 auto;
}
.elementor .lon-consent .e-form-label-base {
  margin: 0;
  font: 400 12.5px/1.4 var(--font-body);
  color: var(--text-muted);
}