/*
 * replica.css — static replicas of production widgets injected by JS in prod
 * (HubSpot meetings iframe, Trustindex Google-reviews). Loaded on every page;
 * rules are scoped so they are inert where the markup is absent.
 */

/* ---------------------------------------------------------------------------
 * HubSpot meetings embed. Production JS turns .meetings-iframe-container into a
 * self-sizing iframe; we render a fixed-height iframe so the surrounding layout
 * (and footer position) matches. Iframes are masked in the visual diff, so only
 * the occupied box height matters.
 */
.meetings-iframe-container {
  width: 100%;
  /* Reserve the embed's box on the container too: if the parser yields for
     first paint before the inner <iframe> is laid out, the space is already
     held and nothing below shifts (CLS). */
  min-height: 722px;
}
.meetings-iframe-container iframe {
  display: block;
  width: 100%;
  border: none;
  height: 722px;
}
@media (max-width: 767px) {
  .meetings-iframe-container {
    min-height: 763px;
  }
  .meetings-iframe-container iframe {
    height: 763px;
  }
}

/* ---------------------------------------------------------------------------
 * HubSpot NATIVE form placeholders (hbspt.forms.create). public/js/hs-forms.js
 * lazy-loads HubSpot's embed script and renders the real form into these boxes.
 * The fixed height only holds the layout while the box is still EMPTY (cold
 * render, no-JS, and the visual comparison against production); once hydrated
 * the rendered form's own height must win, so it becomes a min-height.
 */
.hs-form-placeholder--newsletter {
  height: 398px;
}
.hs-form-placeholder--743cfa0 {
  height: 770px;
}
.hs-form-placeholder.is-hydrated {
  height: auto;
}
.hs-form-placeholder--newsletter.is-hydrated {
  min-height: 398px;
}
.hs-form-placeholder--743cfa0.is-hydrated {
  min-height: 770px;
}
@media (max-width: 767px) {
  .hs-form-placeholder--newsletter {
    height: 398px;
  }
  .hs-form-placeholder--743cfa0 {
    height: 1045px;
  }
  .hs-form-placeholder--newsletter.is-hydrated {
    min-height: 398px;
  }
  .hs-form-placeholder--743cfa0.is-hydrated {
    min-height: 1045px;
  }
}

/* ---------------------------------------------------------------------------
 * Trustindex badge host: the production widget lives in a hidden <pre> holding
 * a <template>; site.js stamps it out (loading the mirrored widget CSS).
 * Keep the host <pre> collapsed even before JS runs.
 */
pre.ti-widget {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Header desktop dropdown sub-menus. Production uses the jQuery SmartMenus
 * plugin (loaded via Elementor Pro's nav-menu widget) which reveals a submenu
 * by writing inline display:block; the base bundle keeps every submenu
 * .elementor-nav-menu ul{display:none}. We re-implement the reveal in
 * site.js by toggling `.is-open` on the parent li; this rule is the CSS half.
 * Scoped to the desktop main menu and the >=1025px breakpoint (matching the
 * widget's elementor-nav-menu--dropdown-tablet modifier, which hides the main
 * menu and shows the hamburger below 1025px). The mobile dropdown keeps its
 * own accordion behavior (site.js initNavToggle + .elementor-nav-menu--open).
 */
@media (min-width: 1025px) {
  .elementor-nav-menu--main .menu-item-has-children {
    position: relative;
  }
  .elementor-nav-menu--main .menu-item-has-children.is-open > .sub-menu {
    display: block;
    top: 100%;
    left: 0;
    /* Size like production's SmartMenus (it writes width:auto; min-width:10em;
     * max-width:1000px inline): grow with the longest item so long entries
     * ("Centro de Recursos para Emprendedores") don't paint outside the
     * dropdown (sweep KNOWN-1; items are white-space:nowrap). */
    width: max-content;
    min-width: 10em;
    max-width: 1000px;
  }
}

/* ---------------------------------------------------------------------------
 * "Usos Frecuentes" popups (home). Production renders these lazily via
 * Elementor Popup Builder's Dialog Manager (dim overlay + centered white card).
 * We ship the 6 modal blocks inline (partials.usos-frecuentes-popups), hidden
 * until site.js opens them. Rules are inert where the markup is absent.
 */
.usos-popup-overlay[hidden] {
  display: none;
}
.usos-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}
.usos-popup {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding: 40px 32px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.usos-popup-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #003865;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.usos-popup-close:hover,
.usos-popup-close:focus {
  color: #ff8200;
}
.usos-popup-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.usos-popup-col-left {
  flex: 0 0 200px;
  max-width: 200px;
  text-align: center;
}
.usos-popup-col-right {
  flex: 1 1 300px;
  min-width: 0;
}
.usos-popup-heading {
  margin: 0 0 16px;
  color: #003865;
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.usos-popup-icon {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
}
.usos-popup-cta {
  display: inline-block;
}
.usos-popup-col-right p {
  margin: 0 0 12px;
  color: #333;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .usos-popup-grid {
    flex-direction: column;
  }
  .usos-popup-col-left {
    flex-basis: auto;
    max-width: none;
  }
}

/* ====================================================================
 * ACCESSIBILITY QUICK-WINS  (branch: a11y-quick-wins, 2026-07-24)
 * Lighthouse a11y color-contrast + target-size overrides, in ONE block.
 * replica.css loads AFTER the page bundle, so equal-specificity rules win by
 * order. Every contrast fix is the smallest lightness shift of the original
 * hue that reaches WCAG AA (4.5:1), verified against the rendered background.
 * ========================================================================= */

/* DEFERRED (Jose, 2026-07-24) -- white text on brand orange BUTTONS.
 * White on #ff8200 = 2.48:1 (AA needs 4.5:1), the primary CTA on ~12 pages.
 * DECISION: keep the brand orange for now, faithful to production; fixing it
 * is a brand/conversion decision for after the cutover (with marketing).
 * The known-passing options when that day comes:
 *   a) darken the button bg:  .elementor-button { --e-global-color-primary: #b95e00; }
 *      + same bg on .gform_wrapper .gform_button (!important) -> 4.50:1
 *   b) keep #ff8200 bg, switch button TEXT to near-black -> ~8.4:1 (brand hue intact)
 * Cost of deferring: the color-contrast audit (weight 7) fails on button pages,
 * capping their Lighthouse a11y at ~91-93 (still >= the 90 bar).
 * See WEEKEND_REPORT.md "Deferred decisions". */

/* color-contrast -- brand orange TEXT on light backgrounds.
 * Orange headings/spans fail on white (2.48) and on the #f5f5f5 sections
 * (2.28). #af5900 clears both (4.94 on #fff, 4.53 on #f5f5f5). Headings colour
 * from var(--e-global-color-primary); redefine it on heading elements only. */
.elementor-heading-title { --e-global-color-primary: #af5900; } /* #ff8200->#af5900; 2.48->4.94(#fff), 2.28->4.53(#f5f5f5) */

/* Inline color:#FF8200 (manten stat headings) beats the sheet -> !important. */
.elementor-widget-container [style*="FF8200"] { color: #af5900 !important; } /* #ff8200->#af5900, 2.48->4.94 */

/* color-contrast -- red heading (manten "Evita multas de USD $25.000...").
 * #ff0000 on #f5f5f5 = 3.66 -> #e30000 = 4.52. */
.elementor-element-eff5ee8 .elementor-heading-title { color: #e30000 !important; } /* #ff0000->#e30000, 3.66->4.52 */

/* color-contrast -- muted grey "powered by Google" #777 on #fff = 4.47.
 * The widget's own rule ".wp-gr .wp-google-powered" is !important at (0,2,0),
 * so match its specificity and win by cascade order. */
.wp-gr .wp-google-powered { color: #767676 !important; } /* #777777->#767676, 4.47->4.54 */

/* DEFERRED (Jose, 2026-07-30) -- PRICE FIGURES keep brand orange.
 * Same rationale as the 2026-07-24 button decision above: fidelity to
 * production now, contrast is a brand/marketing call after the cutover.
 * Production paints every price figure #ff8200. The global
 * `.elementor-heading-title { --e-global-color-primary: #af5900 }` rule above
 * darkened them all, and an extra #9b4f00 override (removed here) darkened the
 * comparison-table ones further -- so our prices differed from production AND
 * from each other across the three renderings of the same number.
 * This exemption restores #ff8200 on the price headings ONLY; every other
 * orange heading on the site keeps the a11y fix.
 * SCOPE: deliberately unscoped by page. 7321801/3464f4f also render on
 * /precios-paquete-de-cumplimiento/ and /precios-paquete-de-cumplimiento-clientes/
 * ("USD $1.400 /año.", "USD $800 el primer año..."), where production paints
 * them #ff8200 too (verified 2026-07-30 with computed styles on the live
 * pages, desktop and mobile) -- so the exemption applying there is correct,
 * not spillover. Scoping it to /precios/ would leave those pages' prices
 * darkened, i.e. unfaithful.
 * Cost accepted: the color-contrast audit (weight 7) fails on the three
 * pricing pages, capping their Lighthouse a11y in the low 90s (still >= the
 * 90 bar).
 * Elements (all paint from --e-global-color-primary, verified in the page CSS):
 *   899830f / 0e1c94c  "USD $600 /año"    comparison table (desktop / mobile)
 *   7321801 / 3464f4f  "USD $1.400 /año"  comparison table (desktop / mobile)
 *                       (+ the two compliance pricing pages, see SCOPE above)
 *   ac9aa40            "$600 /año"        plan card
 *   9311e47            "$1.400 /año"      plan card
 *   7792e4a            "USD $600 /año"    package template (library 2520)
 *   fd4eb10            "USD $1.400 /año"  package template (library 2527) */
.elementor-element-899830f .elementor-heading-title,
.elementor-element-0e1c94c .elementor-heading-title,
.elementor-element-7321801 .elementor-heading-title,
.elementor-element-3464f4f .elementor-heading-title,
.elementor-element-ac9aa40 .elementor-heading-title,
.elementor-element-9311e47 .elementor-heading-title,
.elementor-element-7792e4a .elementor-heading-title,
.elementor-element-fd4eb10 .elementor-heading-title { --e-global-color-primary: #ff8200; }

/* color-contrast -- precios grey price sub-labels (#aaa on #fff = 2.32). */
.elementor-element-be6ca05 .elementor-heading-title,
.elementor-element-58a33f7 .elementor-heading-title,
.elementor-element-c62b263 .elementor-heading-title,
.elementor-element-759e3f5 .elementor-heading-title,
.elementor-element-94cf70a .elementor-heading-title,
.elementor-element-bc5a245 .elementor-heading-title,
.elementor-element-1f135c8 .elementor-heading-title,
.elementor-element-af324cc .elementor-heading-title { color: #767676 !important; } /* #aaaaaa->#767676, 2.32->4.54 */

/* target-size -- home slider pagination bullets (elementor-element-c063300).
 * Swiper renders 8x8px bullets (min tap target 24x24). Grow each bullet's box
 * to 24x24 (axe measures the element box) while painting the visible dot at
 * its original 8px via a ::before -- dot size/colour/position unchanged. The
 * negative horizontal margin preserves the original 16px centre pitch. */
.elementor-element-c063300 .swiper-pagination-bullet {
  width: 24px !important; height: 24px !important; /* beat the 0,4,0 page rule that pins 8px */
  margin: 0 1px !important; /* 26px pitch: 24x24 targets can't sit at the old 16px pitch without overlapping (axe rejects obscured targets), so the dot row spreads slightly. Visible dot size/colour unchanged. !important beats Swiper's .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet (0,3,0), which site.js now activates so the row centres like production's. */
  background: transparent !important;
  position: relative;
  vertical-align: middle;
}
.elementor-element-c063300 .swiper-pagination-bullet::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--e-global-color-secondary); /* #003865 inactive dot */
}
.elementor-element-c063300 .swiper-pagination-bullet-active::before {
  background-color: var(--e-global-color-primary);   /* #ff8200 active dot */
}

/* ===========================================================================
 * SWEEP FIXES (2026-07-24) — see sweep-report D3.
 * The extracted page bundles for the two confirmation pages apply the
 * desktop-only widening (margin:0 -95px + padding:0 100px) of the
 * "¡Gracias por confiar…" text widget at ALL widths; production ships a
 * mobile media-query zeroing it that the extraction dropped. Result was a
 * 526px-wide box on a 390px viewport -> whole-page horizontal scroll.
 * ========================================================================= */
@media (max-width: 767px) {
  /* Mirror the bundled selectors' shape (.elementor-<pageId>
   * .elementor-element.elementor-element-765c214 > …) so specificity ties
   * and cascade order (replica.css loads last) wins — a bare
   * .elementor-element-765c214 selector LOSES to the bundle and the -95px
   * margins survive (Codex P2, PR #17). Both confirmation pages listed. */
  .elementor-3977 .elementor-element.elementor-element-765c214 > .elementor-widget-container,
  .elementor-8982 .elementor-element.elementor-element-765c214 > .elementor-widget-container {
    margin: 0;
    padding: 0 10px;
  }
}

/* ===========================================================================
 * DELIBERATE DIVERGENCE FROM PRODUCTION (Jose, 2026-07-30)
 * /manten-tu-llc-en-cumplimiento/ — testimonial widget on mobile.
 * The page bundle pins the widget to 45% of its container at EVERY width
 * (`.elementor-20816 .elementor-element.elementor-element-a2195a4 {
 *  width: var(--container-widget-width, 45%); max-width: 45% }`), which at a
 * 375px viewport is a 160px column: the quote wraps to two or three words per
 * line. Production renders exactly the same 160px box — this is NOT an
 * extraction defect — but Jose asked for it to be readable, so on mobile only
 * we let it fill the container (~355px at 375px). Alignment, spacing and every
 * other declaration are untouched, and desktop still matches production.
 * Mirror the bundle's selector shape so specificity ties and cascade order
 * (replica.css loads last) wins; the custom property has to be overridden too
 * because `width` reads through it.
 * ========================================================================= */
@media (max-width: 767px) {
  .elementor-20816 .elementor-element.elementor-element-a2195a4 {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* ===========================================================================
 * DELIBERATE DIVERGENCE FROM PRODUCTION (Jose, 2026-08-04)
 * Privacy policy — site-wide legal bar + the per-form privacy line.
 * Production has NO privacy policy, so neither element exists there and
 * neither can be mirrored. Both are hand-written and live here because
 * replica.css is the only stylesheet loaded on every page (the legal bar sits
 * under the footer on all of them, and the form notice renders inside every
 * replicated Gravity Form). Colours are the site's own: #003865 is the footer
 * background (--e-global-color-secondary).
 * ========================================================================= */
.llchub-legal-bar {
  background-color: #003865;
  padding: 14px 20px 18px;
  text-align: center;
  font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.llchub-legal-bar a {
  color: #ffffff;
  text-decoration: underline;
}
.llchub-legal-bar a:hover,
.llchub-legal-bar a:focus {
  color: #ff8200;
}

/* Injected by App\Services\Forms\FormRenderer next to each form's consent
 * checkbox (or, on the forms that have none, above the submit button). */
.llchub-privacy-notice {
  /* Next to a consent checkbox the notice is a child of GF's .gform_fields
     GRID, where an unspanned item gets a single ~1/12 column and the sentence
     wraps two words per line. Span the full row; inert in the form footer,
     which is not a grid. */
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5a5a5a;
}
.llchub-privacy-notice a {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Production's `<style id="wp-custom-css">` (WP Customizer "Additional CSS"),
 * shipped inline on every production page but never imported by the blade
 * generation. Rules verbatim except the asset-CDN image URL, rewritten to the
 * local mirror of the same file. The html/body overflow-x clip is load-bearing:
 * production's hero button (element b35b497, width 744.703px) genuinely
 * overflows at ~900px viewports and production hides it with this rule — the
 * replica showed a horizontal scrollbar there until this block was restored.
 * .r-subscribe-plan is used by the three pricing pages; the price-check /
 * price-cross / footer-social-icon / elementor-toggle rules are inert in the
 * in-scope markup but kept for fidelity.
 */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.elementor-toggle .elementor-tab-title{
	border:none !important;
}

.price-check{
    padding-left: 25px;
    display: block;
    position: relative;
    color:#303030;
    margin-bottom: 10px;
}
.price-check::before{
   position: absolute;
   left: 0;
   top: 0;
   width: 20px;
   height: 20px;
   content: '';
   background-image: url('/wp-content/uploads/2021/03/Check22.png');
   background-size: cover;
}
.price-cross{
    padding-left: 25px;
    display: block;
    position: relative;
    color:#B4B4B4;
    margin-bottom: 10px;
}
.price-cross::before{
   position: absolute;
   left: 0;
   top: 0;
   width: 20px;
   height: 20px;
   content: '';
   background-image: url('/wp-content/uploads/2021/03/Check22.png');
   background-size: cover;
}
.r-subscribe-plan a {
    margin-bottom: -6px !important;
}
.footer-social-icon{
	text-align:center !important;
	margin: 0 auto;
}