/*!
Theme Name: FinFlow Child
Theme URI: https://uicore.co
Description:  Banking, Finance & Fintech WordPress Theme
Author: UiCore
Author URI: https://uicore.co
Template: finflow
Version: 1.0.0
Text Domain: finflow
*/

/* Add your custom style here */

/* Header: UiCore fades in the logo, each nav item, and the CTA buttons one
   by one (generated uicore-global.css sets opacity:0 + a paused animation;
   generated uicore-global.js starts each one 100ms after the last by
   index). Not behind a settings toggle, so overriding the generated rule
   directly — this selector list matches it exactly. */
#wrapper-navbar .uicore-extra > *,
.uicore-header-wrapper .uicore-branding,
.uicore-header-wrapper nav .uicore-ham,
.uicore-header-wrapper ul.uicore-menu > .menu-item > a {
  opacity: 1 !important;
  animation: none !important;
}

/* Home hero slider (Element Pack bdt-slider): pill-shaped active dot vs.
   round inactive dot, animated, lifted off the edge. */
#orsan-hero-slider .swiper-pagination {
  bottom: 16px;
  --swiper-pagination-bullet-horizontal-gap: 4px;
}
#orsan-hero-slider .swiper-pagination-bullet {
  transition:
    width 0.3s ease,
    border-radius 0.3s ease,
    background-color 0.3s ease;
}
#orsan-hero-slider .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 999px;
}

/* Home hero slider (Element Pack bdt-slider widget): badge + headline live
   together inside the widget's single title field (no separate subtitle
   control), and the button is custom HTML inside the content field because
   bdt-slider only exposes one button label for the whole widget, not one per
   slide — each slide needs its own ("Cotizar" vs "Quiero financiamiento"). */
#orsan-hero-slider .bdt-slide-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#orsan-hero-slider .orsan-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  box-sizing: content-box;
  height: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: var(--e-global-color-uicore_primary);
  color: var(--e-global-color-uicore_white);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
}
#orsan-hero-slider .orsan-hero-badge-dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--e-global-color-uicore_white);
}
#orsan-hero-slider .orsan-hero-headline {
  font-size: 56px;
  text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 16px;
}
#orsan-hero-slider .orsan-hero-highlight {
  color: var(--e-global-color-uicore_secondary);
}
#orsan-hero-slider .bdt-slide-text p {
  margin-bottom: 0;
  font-size: 19px;
  text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 16px;
}
#orsan-hero-slider .orsan-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 28px;
  border-radius: 10px;
  background-color: var(--e-global-color-uicore_primary);
  color: var(--e-global-color-uicore_white);
  font-weight: 600;
  font-size: 15px;
  box-shadow: rgba(0, 40, 100, 0.35) 0px 8px 24px;
  transition: background-color 0.2s ease;
}
#orsan-hero-slider .orsan-hero-btn:hover {
  background-color: #002f5c;
}
#orsan-hero-slider .orsan-hero-btn-arrow {
  display: inline-flex;
  flex-shrink: 0;
}

/* Home products grid: equal-height cards (classic Elementor columns don't expose a flex-grow control) */
#orsan-products-grid .elementor-column,
#orsan-products-grid .elementor-widget-wrap {
  height: 100%;
}
#orsan-products-grid .elementor-widget-bdt-advanced-icon-box,
#orsan-products-grid
  .elementor-widget-bdt-advanced-icon-box
  > .elementor-widget-container {
  height: 100%;
}

/* Te ayudamos FAQ accordion: numbered items ("01".."09"). uicore-accordion's
   title field is plain escaped text with no per-item number field, so the
   numbering is generated here via a CSS counter instead of hand-typed digits —
   keeps the number's color/weight independent of the question text. */
#orsan-faq-accordion .ui-e-accordion {
  counter-reset: orsan-faq;
}
#orsan-faq-accordion .ui-e-accordion-title-text {
  counter-increment: orsan-faq;
  gap: 14px;
}
#orsan-faq-accordion .ui-e-accordion-title-text::before {
  content: counter(orsan-faq, decimal-leading-zero);
  color: var(--e-global-color-uicore_primary);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* The widget's own generated CSS adds a faint blue :hover background to each
   item (rgba(0,85,184,0.06)), meant for desktop pointer hover. On touch
   devices :hover doesn't clear on tap-release, so whichever item the visitor
   tapped to open stays "stuck" with that tint — combined with the item's own
   border-radius and padding, it reads as an inset rounded card next to the
   plain full-width rows around it. Disabling it for touch/coarse-pointer
   devices keeps opened items flush with the rest of the list, as designed. */
@media (hover: none), (pointer: coarse) {
  #orsan-faq-accordion .ui-e-accordion-item:hover {
    background-color: transparent;
  }
}

/* Mobile: break the accordion out to full viewport width, edge to edge —
   unlike the "Preguntas frecuentes" heading above it, which keeps the
   section's normal side margin. The row's ancestors stack two insets (the
   column's own 20px responsive padding, plus Elementor's "Default" column-
   gap preset, which keeps a 2.5%-each-side margin on the row container even
   with a single 100%-width column) — rather than fight both at once, this
   repositions the widget directly against the viewport edges regardless of
   what the ancestors add. Each item's own 20px left/right padding (from the
   widget's Elementor settings) keeps the question/answer text readably
   inset even though the row itself is edge to edge. */
@media (max-width: 767px) {
  #orsan-faq-accordion {
    width: 100vw;
    flex-shrink: 0;
    margin-left: calc(50% - 50vw);
  }
}

/* FAQ heading row (headset icon + "Preguntas frecuentes"): Elementor columns
   stack their widgets vertically by default; this column holds just the icon
   + heading pair and needs them side by side instead. */
#orsan-faq-heading-row > .elementor-widget-wrap {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 13px;
}
#orsan-faq-heading-row > .elementor-widget-wrap > .elementor-widget {
  width: auto;
  max-width: none;
}

/* Product icons are custom stroke-only SVGs; the widget's own CSS forces
   fill:currentColor on every path (built for solid Font Awesome icons),
   which turns our outline icons into solid blobs. Only reset elements that
   don't declare their own fill (e.g. the accent dot in "Capital de Trabajo"
   keeps its intentional fill="currentColor"). */
#orsan-products-grid .bdt-ep-advanced-icon-box-icon-wrap svg *:not([fill]) {
  fill: none;
}

/* Final CTA panel: text block and button flush to opposite edges (reference
   uses display:flex + justify-content:space-between on auto-width children;
   Elementor's percentage columns can't express that directly). Desktop only —
   on mobile the columns should keep Elementor's native stacked layout. */
@media (min-width: 1025px) {
  #orsan-final-cta-row > .elementor-container {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  #orsan-final-cta-row > .elementor-container > .elementor-column {
    width: auto;
    max-width: none;
  }
  #orsan-final-cta-row > .elementor-container > .elementor-column:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  #orsan-final-cta-row > .elementor-container > .elementor-column:last-child {
    flex: 0 0 auto;
  }
}

/* Mobile: the button column stacks directly under the text column (native
   Elementor stacking, since the flex override above is desktop-only) with
   no gap between them — add one back in. !important + the extra
   .elementor-widget-wrap > specificity are needed to beat the widget-wrap
   reset below (same specificity otherwise, and this rule comes first). */
@media (max-width: 1024px) {
  #orsan-final-cta-row .elementor-widget-wrap > .elementor-element-27b882e {
    margin-top: 20px !important;
  }
}

/* This inner row is a "boxed" section, which caps .elementor-container at the
   site's default content width (1140px) regardless of its own content_width
   setting — drop that cap so it can use the full width of the gray panel
   it's nested in. */
#orsan-final-cta-row.elementor-section-boxed > .elementor-container {
  max-width: none;
}

/* Elementor gives the heading widget no .elementor-widget-container wrapper
   in this version, so the _margin control (which targets that wrapper) is a
   no-op here — the only spacing actually coming through is Elementor's own
   default widget-stacking margin. Reset every direct child of the wrap and
   reapply the one gap we actually want (heading -> paragraph). */
#orsan-final-cta-row .elementor-widget-wrap > * {
  margin: 0 !important;
  padding: 0 !important;
}
#orsan-final-cta-row .elementor-widget-heading {
  margin-bottom: 10px !important;
}

/* Header — "Portal clientes" CTA. UiCore's native header only has one CTA
   slot (used by "Quiero financiamiento"), so this second button lives in the
   Header Custom Area widget as a plain styled link. Secondary has no UiCore
   hover slot, so the hover value is hard-coded from design/tokens.md. */
.btn-portal-clientes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  border-radius: 10px;
  border: 1.5px solid var(--e-global-color-uicore_secondary);
  background: var(--e-global-color-uicore_secondary);
  color: #ffffff !important;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  transition:
    background 0.15s,
    border-color 0.15s;
}
/* !important: the Header Custom Area and the sitewide `a:hover` rule both
   target plain links with higher specificity than a single class. */
.btn-portal-clientes:hover,
.btn-portal-clientes:focus {
  background: #d68a00 !important;
  border-color: #d68a00 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
/* Mobile menu panel: full-width and taller, matching the native CTA there. */
.uicore-mobile-menu-wrapper .btn-portal-clientes {
  width: 100%;
  padding: 13px 19px;
  font-size: 15px;
  min-height: 44px;
}

/* Header nav: UiCore styles every top-level link the same (headline color,
   bold); the design only bolds/colors the current page and leaves the rest
   as muted body text. */
.uicore-menu > li > a {
  color: var(--e-global-color-uicore_body) !important;
  font-weight: 500 !important;
}
.uicore-menu > li > a:hover {
  color: var(--e-global-color-uicore_primary) !important;
}
.uicore-menu > li.current_page_item > a,
.uicore-menu > li.current-menu-item > a,
.uicore-menu > li.current_page_parent > a,
.uicore-menu > li.current-menu-parent > a,
.uicore-menu > li.current_page_ancestor > a,
.uicore-menu > li.current-menu-ancestor > a {
  color: var(--e-global-color-uicore_primary) !important;
  font-weight: 700 !important;
}

/* "Canal de denuncias" dropdown: UiCore's default sub-menu is a dark panel
   (built for dark header skins); the design calls for a white floating
   panel with a soft shadow. Scoped to .menu-denuncias so other future
   dropdowns aren't affected. */
.menu-denuncias > .sub-menu {
  background: #ffffff !important;
  border: 1px solid #e4e7ee !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(10, 20, 40, 0.1) !important;
  padding: 8px !important;
  min-width: 230px;
}
.menu-denuncias > .sub-menu > li > a {
  border-radius: 8px;
  padding: 12px 14px !important;
  color: var(--e-global-color-uicore_headline) !important;
  font-weight: 500 !important;
}
.menu-denuncias > .sub-menu > li > a:hover {
  background: var(--e-global-color-uicore_light);
  color: var(--e-global-color-uicore_primary) !important;
}
.menu-denuncias > .sub-menu > li.current_page_item > a {
  color: var(--e-global-color-uicore_primary) !important;
  font-weight: 700 !important;
}

/* "Quiero financiamiento" CTA: UiCore's default padding/font-size wraps this
   two-word label onto two lines; design keeps it on one line. */
.uicore-navbar .uicore-cta-wrapper .uicore-btn {
  white-space: nowrap;
  padding: 11px 16px;
  font-size: 14px;
}

/* Nav item spacing: UiCore's default is ~24px of padding per side (a ~48px
   visual gap); design uses a tighter 22px gap between items. The child
   stylesheet loads before uicore-global.css, so this needs !important to
   win the cascade (custom properties support it same as any declaration). */
.uicore-navbar {
  --uicore-header--menu-spaceing: 11px !important;
}

/* Gap between the two CTA buttons: UiCore's default is 25px; design uses 10px. */
.uicore-navbar .uicore-extra {
  gap: 10px !important;
}

/* Mobile collapsed header: UiCore renders both CTA buttons next to the
   hamburger by default, which overflows the viewport and pushes the
   hamburger off-screen. Design shows only logo + hamburger until the panel
   opens — the same buttons already render inside the open mobile panel. */
.uicore-mobile-head-right .uicore-cta-wrapper,
.uicore-mobile-head-right .uicore-custom-area {
  display: none !important;
}

/* Mobile nav panel: UiCore renders this as a fixed, full-viewport overlay
   (`.uicore-navigation-wrapper{position:fixed!important;height:100%;top:0}`
   in the plugin's own CSS), which leaves a big empty gap between the nav
   links and the CTA buttons pinned to the bottom. Design shows a compact
   panel that drops down right under the header and is only as tall as its
   content. Tried removing `position:fixed` so it would flow in after the
   header in normal document order instead — but in the actual DOM this
   wrapper isn't adjacent to the header at all, it's the *last* child of
   `.uicore-body-content` (after the whole page, including the footer), so
   static positioning rendered it thousands of pixels down the page. Kept
   `position: fixed` (same as the plugin, so no specificity fight needed
   there — only `position` carries `!important` in the plugin's rule) and
   instead override `top` to sit just below the header, with `max-height`
   toggled off `body.uicore-mobile-nav-show` (the class UiCore's own JS
   already sets) instead of the plugin's default 100%-height + opacity
   fade. Net effect: a compact panel pinned under the header that floats
   over the page below it (shadowed) rather than literally pushing that
   content down — the practical equivalent given the DOM position above.
   76px top offset = measured mobile header height; hardcoded like other
   measured values in this file rather than computed, since real visitors
   never see the admin bar that would change it. Scoped to the configured
   mobile breakpoint (Theme Options → Header → "Mobile Breakpoint",
   default/current 1025px) since `.uicore-mobile-menu-wrapper` doubles as
   the *desktop* nav on the "Hamburger" header layouts (not used here —
   this site runs "Classic" — but scoping avoids surprises if that ever
   changes). */
@media (max-width: 1025px) {
  .uicore-navbar.uicore-mobile-menu-wrapper {
    top: 76px !important;
    height: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    pointer-events: none !important;
    box-shadow: none;
    transition: max-height 0.25s ease;
  }
  body.uicore-mobile-nav-show .uicore-navbar.uicore-mobile-menu-wrapper {
    max-height: calc(100vh - 76px) !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    box-shadow: 0 16px 30px rgba(10, 20, 40, 0.08);
  }

  /* The panel repeats its own logo + close button at the top (built for the
     old full-screen overlay, which had no header visible behind it to close
     from). Now that the panel opens right under the real header — whose
     hamburger already swaps to a close (X) icon and toggles the same menu
     (both share the `.uicore-toggle` click handler) — this inner copy is a
     redundant second logo/X stacked right under the real ones. */
  .uicore-mobile-menu-wrapper > nav.uicore.uicore-container {
    display: none !important;
  }

  /* UiCore's nav `<ul>` is absolutely positioned inside a 0-height
     container (`.uicore-menu-container{height:100%}` + `.uicore-menu{
     position:absolute;top:0}`) — built to fill the old 100vh overlay, so
     it never contributed to layout height. With a compact panel that
     leaves `.uicore-extra` (the CTA buttons), the container's next flex
     sibling, with nothing above it to push it down — both started at the
     same y position, CTAs painted over the nav links. Back to normal flow
     so the CTAs land below the links instead of on top of them. 16px side
     padding here (not on the `<a>`s) is the one inset point everything
     below — links, dividers, CTAs — lines up against. */
  .uicore-mobile-menu-wrapper .uicore-menu-container {
    height: auto !important;
    padding: 0 16px !important;
  }
  .uicore-mobile-menu-wrapper .uicore-menu-container .uicore-menu {
    position: static !important;
    width: 100% !important;
  }

  /* Nav links: UiCore's own mobile rule sets `max-width:95%` + a much
     larger font-size (measured ~20px) with `padding:15px 10px!important`
     — design measured at 17px / 14px 2px / min-height 44px, each row its
     own full-width divider (including the last one, "Canal de denuncias"
     — that's what separates it from the CTA buttons below). The plugin's
     padding already carries `!important` at 3 classes of specificity
     (`.uicore-navigation-wrapper .uicore-menu-container ul li.menu-item>a`),
     so a plain `.uicore-mobile-menu-wrapper .uicore-menu > li > a` (2
     classes) loses that property specifically even with `!important` on
     both sides — adding `.uicore-navbar` (also present on this element)
     brings it to 4 classes to win outright rather than rely on source
     order. */
  .uicore-mobile-menu-wrapper .uicore-menu > li {
    width: 100%;
  }
  .uicore-navbar.uicore-mobile-menu-wrapper
    .uicore-menu-container
    .uicore-menu
    > li
    > a {
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    font-size: 17px !important;
    padding: 14px 2px !important;
    min-height: 44px !important;
    border-bottom: 1px solid #f0f1f5 !important;
  }

  /* "Canal de denuncias" accordion ("Dropdown Animation Type" theme option
     set to Expand, so UiCore expands this in place instead of sliding to a
     new "Back"-linked panel). UiCore's own expand-mode indicator is a text
     "+"/"-" with its own `padding:15px 10px!important` on the pseudo-
     element (4 classes of specificity: `.ui-a-dsmm-expand .uicore-
     navigation-wrapper .uicore-menu-container ul .menu-item-has-children>
     a:after`) — that padding was silently inflating the bordered box below
     to ~27x37px before the border was even drawn, which is why the chevron
     rendered huge. Design uses a small rotating corner-chevron (border-
     right + border-bottom at 45°) in `currentColor`, so it always matches
     the item's own text color. `.uicore-navbar` (also present on this
     element) brings the selector to the same 4-class specificity needed to
     reliably win. The link itself is already `display:flex` above, so with
     `position:static` here the chevron becomes a normal flex item and
     `justify-content:space-between` pushes it to the row's end and centers
     it vertically — no manual top/right/translateY offsets to keep in sync
     with row height. */
  .uicore-mobile-menu-wrapper .menu-item-has-children > a {
    justify-content: space-between;
  }
  .uicore-navbar.uicore-section.uicore-mobile-menu-wrapper
    .uicore-menu-container
    .menu-item-has-children
    > a:after {
    content: "" !important;
    position: static !important;
    width: 7px !important;
    height: 7px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 1;
    margin-right: 7px;
  }
  .uicore-navbar.uicore-section.uicore-mobile-menu-wrapper
    .uicore-menu-container
    .ui-expanded:after {
    content: "" !important;
    transform: rotate(225deg) !important;
  }

  /* "Canal de denuncias" sub-menu: reuses `.menu-denuncias > .sub-menu`
     (styled above as a floating white card with a shadow, for the desktop
     hover dropdown) — inside the accordion that reads as an odd boxed-
     within-a-box, so it's reset back to a plain indented continuation of
     the same list, 12px left indent, one divider after the group (not
     between each sub-item), and a smaller font size than the top-level
     items it's nested under. */
  .uicore-mobile-menu-wrapper .menu-denuncias > .sub-menu {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0f1f5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 10px 12px !important;
    min-width: 0;
  }
  .uicore-navbar.uicore-mobile-menu-wrapper
    .menu-denuncias
    > .sub-menu
    > li
    > a {
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 12px 2px !important;
    min-height: 44px !important;
    border-radius: 0;
  }

  /* CTA stack (Portal clientes + Quiero financiamiento): UiCore's own
     mobile CSS shrink-wraps + centers `.uicore-custom-area` (built for
     small icon/text content, not a full-width button) — that's why
     `.btn-portal-clientes`'s own width:100% below only ever resolved
     against that already-narrow box. Match the design's full-width stack:
     10px gap, 14px above the first button, same 16px side inset as the
     nav links above, and 20px below the last button before the panel's
     own closing border (added on the wrapper itself, further down). */
  .uicore-mobile-menu-wrapper .uicore-extra {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
    padding: 0 16px 20px !important;
  }
  /* Portal clientes actually sits 2 levels deeper than `.uicore-custom-area`
     — `.uicore-custom-area > .uicore-hca > .textwidget > a.btn-portal-
     clientes` — and `.uicore-hca` is `display:flex` in the plugin's own
     CSS, which shrinks its child to content width same as the outer
     shrink-wrap above. Flattening the whole chain to block + 100% is more
     robust here than chasing each level's own flex/stretch behavior. */
  .uicore-mobile-menu-wrapper .uicore-custom-area,
  .uicore-mobile-menu-wrapper .uicore-custom-area .uicore-hca,
  .uicore-mobile-menu-wrapper .uicore-custom-area .textwidget,
  .uicore-mobile-menu-wrapper .uicore-cta-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .uicore-mobile-menu-wrapper .btn-portal-clientes {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* "Quiero financiamiento": UiCore's native CTA button — same height/
     font recipe as .btn-portal-clientes below (13px/16px padding, 15px
     15px font-size, 600 weight, 44px min-height) so the two stacked
     buttons read as the same size, matching the design. UiCore's own
     generated CSS also puts a `margin-top` on this button (on top of the
     10px `gap` above, stacking into a much bigger visual gap than
     intended) — zeroed here since the flex `gap` already handles spacing. */
  .uicore-mobile-menu-wrapper .uicore-cta-wrapper .uicore-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center;
    margin: 0 !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
  }

  /* Closing edge of the panel, matching the design's own container border
     (the same divider color/weight used between nav items, just once at
     the very end — the 20px padding-bottom above is what gives it room to
     breathe below "Quiero financiamiento" instead of sitting flush). Scoped
     to the open state only — applied unconditionally, the border still
     rendered on the collapsed (max-height:0) box, showing as a stray fixed
     line pinned under the header whenever the panel was closed. */
  body.uicore-mobile-nav-show .uicore-navbar.uicore-mobile-menu-wrapper {
    border-bottom: 1px solid #e4e7ee !important;
  }

  .uicore-navbar.uicore-mobile-menu-wrapper
    .uicore-menu-container
    .uicore-menu
    > li
    > a {
    padding: 22px 2px !important;
  }
}

/* Hamburger button: UiCore's default is a bare 53x53 icon with no frame;
   design uses a bordered 44x44 square matching the "input" radius. */
.uicore-ham {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid #e4e7ee !important;
  border-radius: 10px !important;
  background: var(--e-global-color-uicore_white) !important;
}
/* UiCore's own base CSS sets `align-items/justify-content:center` on this
   button but never `display:flex`, so those properties are inert —
   combined with a hardcoded `body button.uicore-ham{padding:0 0 0 20px
   !important}`, the bars end up pinned ~1px from the right edge instead of
   centered. Actually enabling flex (so the inherited centering takes
   effect) and zeroing that padding centers the icon both ways. `#wrapper-
   navbar` (an ID) is needed to outrank the plugin's own `body button.
   uicore-ham` selector, which otherwise wins on type-selector count even
   though it has fewer classes. */
#wrapper-navbar .uicore-ham {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
/* UiCore's "default" hamburger style tapers the middle bar (16px vs 20px
   on the top/bottom bars); design uses 3 equal-length bars. */
.uicore-ham .bar {
  width: 20px !important;
}

/* Footer (Theme Builder template 40). Colors below have no UiCore global
   slot (design/tokens.md marks them "(c)"), so they're hard-coded here
   instead of as Elementor widget settings. */

/* Original logo asset is navy-on-transparent; the live design recolors it
   white for the dark footer via this exact CSS filter rather than a
   separate white logo file. */
#orsan-footer .orsan-footer-logo img {
  filter: brightness(0) invert(1);
}

/* Hide the "Legal" column content (heading + Términos y condiciones /
   Políticas de privacidad links) without touching _elementor_data — targeted
   by each widget's own Elementor data-id since neither has a CSS class. */
#orsan-footer .elementor-element[data-id="5554347"],
#orsan-footer .elementor-element[data-id="8462f66"] {
  display: none;
}

/* Address + legal link text ("footer muted" token, #9AA5C0). Link hover is
   wired to the Primary global color directly in Elementor (a class-only
   selector here, deliberately no #orsan-footer prefix, so Elementor's own
   higher-specificity `:hover .elementor-icon-list-text` rule still wins). */
.orsan-footer-muted,
.orsan-footer-muted .elementor-icon-list-text,
.orsan-footer-muted p,
.orsan-footer-muted p a {
  color: #9aa5c0;
}
/* Email / phone links under the address: tighter than the default 14px
   paragraph gap so address + contact read as one block. */
#orsan-footer .orsan-footer-muted p {
  margin-bottom: 6px;
}
#orsan-footer .orsan-footer-muted p:last-child {
  margin-bottom: 0;
}
.orsan-footer-muted p a:hover {
  color: var(--e-global-color-uicore_primary);
}

/* Copyright line ("footer faint" token, #728099). */
#orsan-footer .orsan-footer-faint,
#orsan-footer .orsan-footer-faint p {
  color: #728099;
}

/* 3-column row (logo+address / Legal / Síguenos): Elementor's legacy
   section "gap" control only offers fixed presets, none of which equal the
   design's 40px, so it's set directly on the row's flex container. The
   design caps this content at 1400px and left-aligns it inside the section's
   own padding (not centered) rather than stretching edge to edge — both
   rows need the same cap so the bottom bar lines up under the columns. */
#orsan-footer .orsan-footer-columns-row > .elementor-container {
  gap: 40px;
  max-width: 1400px;
}
#orsan-footer .orsan-footer-bottom-bar > .elementor-container {
  max-width: 1400px;
}

/* Bottom bar: separator line + spacing above it ("footer border" token,
   #2A3660) — no Elementor control for a single-side top border + custom
   top-only spacing on a section in one place. */
#orsan-footer .orsan-footer-bottom-bar {
  margin-top: 28px;
  padding-top: 10px;
  border-top: 1px solid #2a3660;
}

/* Social icons (Instagram/LinkedIn): Elementor's own custom-color fields
   would be inline per-widget styles; using a class here instead keeps the
   "social icon" token (#3E4D7D / hover #56669C) reusable and centralized.
   !important beats Elementor's generated per-widget CSS. */
#orsan-footer .orsan-social-icons .elementor-social-icon {
  background-color: #3e4d7d !important;
}
#orsan-footer .orsan-social-icons .elementor-social-icon i,
#orsan-footer .orsan-social-icons .elementor-social-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}
#orsan-footer .orsan-social-icons .elementor-social-icon:hover {
  background-color: #56669c !important;
}

/* Certification logos: the bottom bar's own 2 columns (copyright | logos)
   should stack on mobile like the rest of the footer, but the design keeps
   the 2 logos themselves side by side at every width — override Elementor's
   default column auto-stacking (<=767px) for just this inner row. */
@media (max-width: 767px) {
  #orsan-footer .orsan-footer-bottom-bar .elementor-column {
    text-align: left;
  }
  #orsan-footer .orsan-footer-cert-logos > .elementor-container {
    flex-wrap: nowrap;
  }
  #orsan-footer
    .orsan-footer-cert-logos
    > .elementor-container
    > .elementor-column {
    width: 50%;
    max-width: 50%;
  }
}

/* Page photo heroes (Quiénes somos, Contáctanos, Te ayudamos): full-bleed,
   height following the uploaded image's own aspect ratio. On desktop it's
   capped at 396px, cropping (cover) only once a wide viewport would make
   the image taller than that. */
#orsan-about-hero img,
#orsan-contact-hero img,
#orsan-te-ayudamos-hero img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 1025px) {
  #orsan-about-hero img,
  #orsan-contact-hero img,
  #orsan-te-ayudamos-hero img {
    max-height: 396px;
    object-fit: cover;
  }
}

/* Intro (eyebrow full-width, then a text+image row). Content width: capped
   at 1400px like the footer rows above, but the kit's global
   container_width (1216px, via a `max-width: min(95%, 1216px)` rule)
   otherwise wins over a plain max-width override, so both width and
   max-width need !important here. Below 1400px viewport the section's own
   left/right padding (76px desktop — the design nests a 56px section
   gutter inside an already-centered 1400px page wrapper our full-bleed
   sections don't have, so 76px here reproduces the same visual inset
   directly) is what actually constrains the content; the 1400px cap only
   matters once the viewport is wide enough to hit it. */
#orsan-about-intro > .elementor-container {
  width: 100% !important;
  max-width: 1400px !important;
}

/* The eyebrow sits outside the text+image row (not vertically centered with
   it) — the design's H1 is noticeably lower than the eyebrow because the
   row below centers the text block against the taller 340px image, not
   because of extra margin under the eyebrow itself. Nested inner-section
   for that row: column gap (56px) has no Elementor preset matching the
   design, and align-items:center reproduces that same-row centering. */
.elementor-element-qs0introrow > .elementor-container {
  width: 100% !important;
  max-width: none !important;
  gap: 56px;
  align-items: center;
}
.elementor-element-qs0introrow .elementor-widget-image img {
  height: 340px;
  object-fit: cover;
  /* The subject sits left of center in the photo; when the slot is
     narrower than the image (tablet/mobile), crop more from the right so
     she stays in frame. */
  object-position: 40% center;
}
@media (max-width: 767px) {
  .elementor-element-qs0introrow > .elementor-container {
    gap: 24px;
  }
}

/* Intro spacing: same root cause as #orsan-final-cta-row above — the
   heading widget's own _margin control is a no-op in this Elementor
   version, so the theme's default widget-stacking margin shows through
   instead. Reset and reapply the exact gaps from the design (eyebrow->row
   14px, H1->paragraph 20px). */
#orsan-about-intro .elementor-widget-wrap > * {
  margin: 0 !important;
  padding: 0 !important;
}
#orsan-about-intro .elementor-element-qs0introeyebrow {
  margin-bottom: 14px !important;
}
#orsan-about-intro .elementor-element-qs0introh1 {
  margin-bottom: 20px !important;
}

/* Misión / Visión cards. Content width: same 1400px cap + !important fix as
   the Intro section above (kit's global container_width otherwise wins).
   Column gap (24px) has no Elementor preset matching the design. */
#orsan-mision-vision > .elementor-container {
  width: 100% !important;
  max-width: 1400px !important;
  gap: 24px;
}

/* Card heading spacing: same _margin no-op issue as Intro above. The ID
   selector beats the plain-class reset rule's specificity, so it needs the
   same #orsan-mision-vision prefix. */
#orsan-mision-vision .elementor-widget-wrap > * {
  margin: 0 !important;
  padding: 0 !important;
}
#orsan-mision-vision .elementor-widget-heading {
  margin-bottom: 12px !important;
}

/* Valores: H3 + 4-col card grid, same content-width/nesting pattern as the
   Intro row (outer column holds the heading, then a nested inner-section
   for the actual grid). */
#orsan-valores > .elementor-container {
  width: 100% !important;
  max-width: 1400px !important;
}
#orsan-valores .elementor-element-qs0valoresheading {
  margin-bottom: 20px !important;
}
.elementor-element-qs0valoresrow > .elementor-container {
  width: 100% !important;
  max-width: none !important;
  gap: 20px;
  /* Explicit stretch, not relied on as an unstated default — same fix as
	   the Ecosistema row: at some viewport widths (confirmed at 1920px) the
	   implicit alignment wasn't reliable and cards rendered at their own
	   natural content height instead of stretching to match. */
  align-items: stretch;
}
/* Card icon: the design's SVGs are drawn with extra transparent padding
   inside their viewBox, so a plain 130px width leaves visible dead space
   above/below the artwork vs. the design's tightly-cropped icon. Negative
   margin pulls the visible glyph back to where the design has it, same
   optical-alignment trick as the source (which uses a negative margin on
   the icon's wrapper for the same reason). */
.elementor-element-qs0valoresrow .bdt-ep-advanced-icon-box-icon-wrap {
  margin: -10px 0 -4px -10px;
}
/* Equal-height cards: the 4 cards hold different amounts of text (3 to 5
   bullets each), so without this they render at different heights — same
   "equal-height columns" technique as #orsan-products-grid above. Height
   set on the widget + its inner box (not the column/widget-wrap) — matches
   the Ecosistema fix, since percentage heights on a flex item itself don't
   reliably resolve against a flex container with no explicit height. */
.elementor-element-qs0valoresrow .elementor-widget-bdt-advanced-icon-box {
  height: 100%;
}
.elementor-element-qs0valoresrow .bdt-ep-advanced-icon-box {
  height: 100%;
  box-sizing: border-box;
}

/* Directorio: H2 + 4-col (wraps to 3 on the last row) member grid, same
   content-width/nesting pattern as Valores. */
#orsan-directorio > .elementor-container {
  width: 100% !important;
  max-width: 1400px !important;
}
.elementor-element-qs0directoriorow > .elementor-container {
  width: 100% !important;
  max-width: none !important;
  gap: 24px;
  row-gap: 24px;
  flex-wrap: wrap;
}
.elementor-element-qs0directoriorow > .elementor-container > .elementor-column {
  /* flexbox gap isn't subtracted from percentage flex-basis automatically
	   (unlike CSS Grid), so the width needs the standard N-column formula:
	   (100% - (n-1)*gap) / n — otherwise 4 columns + 3 gaps overflows 100%
	   and the 4th wraps early, giving an uneven 3+4 split instead of 4+3. */
  width: calc(25% - 18px);
  max-width: calc(25% - 18px);
}
@media (max-width: 767px) {
  .elementor-element-qs0directoriorow
    > .elementor-container
    > .elementor-column {
    width: 100%;
    max-width: 100%;
  }
}
/* bdt-member's default skin has no built-in text-align control and left-
   aligns by default; the design centers the photo, name and role. Photo
   size: the widget's own Image Size control only offers registered WP
   sizes (no arbitrary px), so the exact 180px circle is set here instead. */
.elementor-element-qs0directoriorow .bdt-member {
  text-align: center;
}
.elementor-element-qs0directoriorow .bdt-member-photo-wrapper {
  display: flex;
  justify-content: center;
}
/* The widget's 50% border-radius sits on .bdt-member-photo, which stretches
   to the column width; pin it to the photo size so it clips a circle, not
   an ellipse. */
.elementor-element-qs0directoriorow .bdt-member-photo {
  width: 180px;
  height: 180px;
}
.elementor-element-qs0directoriorow .bdt-member-photo img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  margin: 0 auto;
  margin-bottom: 0;
}
.elementor-element-qs0directoriorow .bdt-member-content {
  line-height: 20px;
}
.elementor-element-qs0directoriorow .bdt-member-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--e-global-color-uicore_headline);
}
.elementor-element-qs0directoriorow .bdt-member-role {
  display: block;
  font-size: 13.5px;
  color: var(--e-global-color-uicore_body);
  margin-top: 4px;
}

/* Sucursal: photo + info card, same content-width/nesting pattern as the
   sections above. Both columns stretch to the row's tallest column (the
   photo) — Elementor's own container CSS doesn't default to flexbox's own
   align-items:stretch, so it needs to be explicit here, same as Intro's
   row above before it was overridden to center instead. */
#orsan-sucursal > .elementor-container {
  width: 100% !important;
  max-width: 1400px !important;
}
/* "Sucursal ORSAN" heading spacing: same _margin no-op issue as the other
   section headings — the theme's default (52px) shows through instead of
   the 32px set in Elementor. */
#orsan-sucursal .elementor-element-qs0sucursalheading {
  margin-bottom: 32px !important;
}
.elementor-element-qs0sucursalrow > .elementor-container {
  width: 100% !important;
  max-width: none !important;
  gap: 24px;
  align-items: stretch;
}
.elementor-element-qs0sucursalrow .elementor-widget-image,
.elementor-element-qs0sucursalrow
  .elementor-widget-image
  .elementor-widget-container {
  height: 100%;
}
.elementor-element-qs0sucursalrow .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Info card: content (Dirección/Horario/map) is vertically centered within
   the card's full stretched height, per the design — not top-aligned. 14px
   gap between each item, and the map's own spacing (8px top margin, 8px
   radius) — the native Google Maps widget has no radius control, so the
   iframe needs it directly. */
.elementor-element-qs0sucursalinfocol .elementor-widget-wrap {
  /* Elementor's default widget-wrap is a row flex container, so
	   justify-content:center alone would center horizontally, not
	   vertically — flex-direction needs to flip to column first. */
  flex-direction: column;
  justify-content: center;
}
.elementor-element-qs0sucursalinfocol .elementor-widget-wrap > * {
  margin: 0 !important;
}
.elementor-element-qs0sucursalinfocol .elementor-widget-wrap > * + * {
  margin-top: 14px !important;
}
.elementor-element-qs0sucursalmap {
  margin-top: 8px !important;
}
.elementor-element-qs0sucursalmap iframe {
  border-radius: 8px;
}
@media (max-width: 767px) {
  .elementor-element-qs0sucursalrow .elementor-widget-image img {
    height: 234px;
  }
}

/* Ecosistema: H2 + 3-col card grid, same content-width/nesting pattern as
   Valores (equal-height cards, same hover lift) and Directorio (3-column
   wrap formula). Logo images: contain, not cover — they're brand lockups,
   not photos. */
#orsan-ecosistema > .elementor-container {
  width: 100% !important;
  max-width: 1400px !important;
}
#orsan-ecosistema .elementor-element-qs0ecosistemaheading {
  margin-bottom: 8px !important;
}
.elementor-element-qs0ecosistemarow > .elementor-container {
  width: 100% !important;
  max-width: none !important;
  gap: 24px;
  flex-wrap: wrap;
  /* Explicit stretch, not relied on as an unstated default — at some
	   viewport widths (confirmed at 1920px) the row's 3 columns rendered at
	   different natural-content heights instead of stretching, and a plain
	   height:100% on the children doesn't reliably fix it either (percentage
	   heights don't always resolve against a flex parent whose own height
	   is itself just auto — same root cause as the Sucursal row earlier).
	   align-items:stretch on the container is the one mechanism that held
	   up across widths. */
  align-items: stretch;
}
.elementor-element-qs0ecosistemarow > .elementor-container > .elementor-column {
  width: calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
}
.elementor-element-qs0ecosistemarow .bdt-ep-advanced-icon-box-icon-wrap img {
  width: 160px;
  height: 72px;
  object-fit: contain;
  object-position: left center;
}
.elementor-element-qs0ecosistemarow .elementor-widget-bdt-advanced-icon-box {
  height: 100%;
}
.elementor-element-qs0ecosistemarow .bdt-ep-advanced-icon-box {
  height: 100%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .elementor-element-qs0ecosistemarow
    > .elementor-container
    > .elementor-column {
    width: 100%;
    max-width: 100%;
  }
}

#orsan-ecosistema .elementor-heading-title {
  margin-bottom: 10px;
}

/* Ecosistema cards link out to each company's site (Global Link, opens in a
   new tab) via an onclick handler rather than a real <a href> — that's how
   this widget's "Global Link" feature works, but it means no cursor:pointer
   comes for free. */
.elementor-element-qs0ecosistemarow .bdt-ep-advanced-icon-box {
  cursor: pointer;
}

/* Floating WhatsApp button: lives in the footer Theme Builder template
   (ID 40, basic-global rule) so it's site-wide. The wrapping section is
   forced to zero height so it doesn't add empty footer space; the anchor
   itself breaks out via position:fixed. */
.orsan-whatsapp-float-section {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0;
  overflow: visible;
}

.orsan-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 14px;
  border-radius: 999px;
  background: var(--uicore-accent-color, #25d366);
  box-shadow: 0 10px 24px rgba(10, 20, 40, 0.25);
  text-decoration: none;
  z-index: 200;
  transition:
    background 0.15s,
    transform 0.15s;
}

.orsan-whatsapp-float:hover {
  background: #1fa855;
  transform: translateY(-2px);
}

.orsan-whatsapp-float:active {
  background: #178c46;
}

.orsan-whatsapp-float span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
}

@media (max-width: 480px) {
  .orsan-whatsapp-float {
    bottom: 16px;
    right: 16px;
  }
}

#orsan-contact-titulo .elementor-element-ct0tituloeyebrow {
  margin-bottom: 20px;
}

/* Elementor's core CSS only pre-generates "round" column-width utility
   classes (50, 25, 33, 60, 70...); 55/45 isn't one of them, so columns using
   it collapse to near-zero width. Contáctanos form section uses this split. */
.elementor-col-55 {
  width: 55%;
}
.elementor-col-45 {
  width: 45%;
}

/* Contáctanos form (Ninja Forms, scoped via the form's own wrapper_class so
   this doesn't leak onto the two denuncia forms built later). Values match
   design/tokens.md "Formularios". Design shows no asterisks/"required" hint
   text, so those are hidden rather than styled. */
.orsan-contact-form .nf-form-fields-required,
.orsan-contact-form .ninja-forms-req-symbol {
  display: none;
}
.orsan-contact-form .nf-field-container {
  margin-bottom: 20px;
}
.orsan-contact-form .nf-field-label label,
.orsan-contact-form .nf-field-label .nf-label-span {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--e-global-color-uicore_headline, #16213e);
}
.orsan-contact-form .nf-field-element input[type="text"],
.orsan-contact-form .nf-field-element input[type="email"],
.orsan-contact-form .nf-field-element input[type="tel"],
.orsan-contact-form .nf-field-element textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c9ceda;
  border-radius: 10px;
  padding: 13px 14px;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  background: #ffffff;
  color: var(--e-global-color-uicore_headline, #16213e);
}
.orsan-contact-form .nf-field-element textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}
/* tokens.md says the design has no custom focus style, but the live
   reference actually shows one: border swaps to Primary on focus. */
.orsan-contact-form .nf-field-element input[type="text"]:focus,
.orsan-contact-form .nf-field-element input[type="email"]:focus,
.orsan-contact-form .nf-field-element input[type="tel"]:focus,
.orsan-contact-form .nf-field-element textarea:focus {
  outline: none;
  border-color: var(--e-global-color-uicore_primary, #0055b8);
}
/* Error state: the design doesn't define one (tokens.md has no live
   reference for it); Ninja Forms already adds a #e80000 border via its own
   core CSS on `.nf-error .ninja-forms-field` — overridden here to the exact
   color tokens.md suggests as the fallback, plus a matching helper-text color. */
.orsan-contact-form .nf-error .ninja-forms-field {
  border-color: #e43d30 !important;
}
.orsan-contact-form .nf-error-msg {
  font-size: 12px;
  color: #e43d30;
}

/* "+569" prefix box: a pseudo-element overlay rather than a real compound
   control (Ninja Forms' phone field is a plain <input type=tel>). The
   submitted value is just the local digits; the "+569" is prepended in the
   email action's message template instead. */
.orsan-contact-form .phone-container .nf-field-element {
  position: relative;
}
.orsan-contact-form .phone-container .nf-field-element::before {
  content: "+569";
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f8;
  border-right: 1px solid #c9ceda;
  border-radius: 9px 0 0 9px;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  color: var(--e-global-color-uicore_headline, #16213e);
  pointer-events: none;
}
.orsan-contact-form .phone-container .nf-field-element input {
  padding-left: 66px;
}

/* Motivo: Ninja Forms' listradio renders real radio inputs + labels; the
   inputs are visually hidden (not display:none, so they stay focusable) and
   the labels are styled as pills. Checked state is driven by Ninja Forms'
   own JS toggling the `.nf-checked-label` class. */
.orsan-contact-form .listradio-wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.orsan-contact-form .listradio-wrap li {
  margin: 0 !important;
  padding: 0 !important;
}
.orsan-contact-form .listradio-wrap input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0 !important;
}
.orsan-contact-form .listradio-wrap label {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 10px 20px;
  border: 1px solid #c9ceda;
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--e-global-color-uicore_headline, #16213e);
  background: #ffffff;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.orsan-contact-form .listradio-wrap label:hover {
  border-color: var(--e-global-color-uicore_primary, #0055b8);
}
.orsan-contact-form .listradio-wrap label.nf-checked-label {
  background: var(--e-global-color-uicore_primary, #0055b8);
  border-color: var(--e-global-color-uicore_primary, #0055b8);
  color: #ffffff;
}
.orsan-contact-form .listradio-wrap input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--e-global-color-uicore_primary, #0055b8);
  outline-offset: 2px;
}

.orsan-contact-form .orsan-ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--e-global-color-uicore_primary, #0055b8);
  color: #ffffff !important;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.orsan-contact-form .orsan-ct-submit:hover {
  background: #002f5c;
}

/* Submission success: replaces the whole form (Ninja Forms' "Hide form on
   complete" setting) rather than appending below it, so the plain-text
   default left just a bare line of text where the form used to be. Styled
   as a self-contained card — radii.panel (16px) + the panel shadow — since
   nothing above it (the Elementor column) provides a box. Checkmark is
   drawn in CSS, not inline SVG: success_msg is run through wp_kses_post()
   on the backend, which strips <svg>. Icon tint follows tokens.md's
   icon/tag convention (solid accent color + 12% rgba background), using
   the brand's only green (Accent/WhatsApp) since the design defines no
   dedicated success color. Shared by all three Ninja Forms (Contáctanos,
   Denuncia Declarada, Denuncia Anónima) — same success_msg markup, same box. */
.orsan-contact-form .nf-response-msg,
.orsan-denuncia-form .nf-response-msg {
  background: #ffffff;
  border: 1px solid #e4e7ee;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(10, 20, 40, 0.06);
  padding: 48px 40px;
  text-align: center;
}
.orsan-contact-form .orsan-success-icon,
.orsan-denuncia-form .orsan-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.12);
}
.orsan-contact-form .orsan-success-check,
.orsan-denuncia-form .orsan-success-check {
  display: block;
  width: 18px;
  height: 10px;
  margin-top: -3px;
  border-left: 3px solid #1fa855;
  border-bottom: 3px solid #1fa855;
  transform: rotate(-45deg);
}
.orsan-contact-form .orsan-success-title,
.orsan-denuncia-form .orsan-success-title {
  margin: 0 0 10px;
  font-family: "Geist", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--e-global-color-uicore_headline, #16213e);
}
.orsan-contact-form .orsan-success-text,
.orsan-denuncia-form .orsan-success-text {
  max-width: 340px;
  margin: 0 auto;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--e-global-color-uicore_body, #4a5468);
}
@media (max-width: 640px) {
  .orsan-contact-form .nf-response-msg,
  .orsan-denuncia-form .nf-response-msg {
    padding: 32px 24px;
    margin-bottom: 30px;
  }
}

/* Contact cards (right column): plain styled columns, not icon-box widgets —
   the design shows no icon on these 4 cards (checked against the reference). */
#orsan-contact-form-section
  .elementor-element-ct0card1col
  .elementor-widget-text-editor
  p,
#orsan-contact-form-section
  .elementor-element-ct0card2col
  .elementor-widget-text-editor
  p,
#orsan-contact-form-section
  .elementor-element-ct0card3col
  .elementor-widget-text-editor
  p,
#orsan-contact-form-section
  .elementor-element-ct0card4col
  .elementor-widget-text-editor
  p {
  margin: 0;
}
/* Border/radius/background actually live on the inner .elementor-widget-wrap
   (Elementor's column box-shadow control targets that, not the column
   element itself) — hovering the outer column but styling the wrap keeps
   the shadow inside the same 12px-rounded corners instead of a sharp-edged
   shadow peeking out from under them. */
#orsan-contact-form-section
  .elementor-element-ct0card1col:hover
  > .elementor-widget-wrap,
#orsan-contact-form-section
  .elementor-element-ct0card2col:hover
  > .elementor-widget-wrap,
#orsan-contact-form-section
  .elementor-element-ct0card3col:hover
  > .elementor-widget-wrap,
#orsan-contact-form-section
  .elementor-element-ct0card4col:hover
  > .elementor-widget-wrap {
  border-color: var(--e-global-color-uicore_primary, #0055b8) !important;
  box-shadow: 0 20px 34px rgba(10, 96, 199, 0.18) !important;
}
#orsan-contact-form-section .elementor-element-ct0card1col:hover,
#orsan-contact-form-section .elementor-element-ct0card2col:hover,
#orsan-contact-form-section .elementor-element-ct0card3col:hover,
#orsan-contact-form-section .elementor-element-ct0card4col:hover {
  transform: translateY(-10px);
}

/* Form + cards column: Elementor's section gap is off (boxed columns butt
   against each other) and the form would otherwise stretch to the full
   55% column width. */
#orsan-contact-form-section > .elementor-container {
  column-gap: 30px;
}
.orsan-contact-form {
  max-width: 520px;
}
.elementor-element-ct0card2,
.elementor-element-ct0card3,
.elementor-element-ct0card4 {
  margin-top: 28px;
}

.label-above .nf-field-label {
  margin-bottom: 0 !important;
}

/* Denuncia Declarada form. Design shows no asterisks/"required" hint text,
   same decision as the Contáctanos form above, so those are hidden rather
   than styled. Grid: live reference measured a plain 3-column CSS grid
   (repeat(3, 1fr), 20px gap both axes) on the field list itself — Palabras
   claves/Personas involucradas just auto-flow into columns 1-2 of a row,
   no special 2-col markup needed. Tipo de delito/Descripción/submit use
   .orsan-dd-full (a Ninja Forms per-field "Container Class" setting) to
   span the full row via grid-column. */
.orsan-denuncia-form .nf-form-fields-required,
.orsan-denuncia-form .ninja-forms-req-symbol {
  display: none;
}
.orsan-denuncia-form nf-fields-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}
.orsan-denuncia-form nf-field {
  display: contents;
}
.orsan-denuncia-form .nf-field-container {
  margin-bottom: 0 !important;
}
.orsan-denuncia-form .nf-field-container.orsan-dd-full {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .orsan-denuncia-form nf-fields-wrap {
    grid-template-columns: 1fr;
  }
}

/* Denuncia Anónima form: same wrapper class and field styling as Denuncia
   Declarada, but a 2-column grid instead of 3 (no identifying fields, so
   fewer fields per row). min-width media query keeps this out of the
   mobile 1-col rule above regardless of selector order/specificity. */
@media (min-width: 768px) {
  .orsan-denuncia-form.orsan-da-grid nf-fields-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.orsan-denuncia-form .nf-field-label label,
.orsan-denuncia-form .nf-field-label .nf-label-span {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--e-global-color-uicore_body, #4a5468);
}
.orsan-denuncia-form .nf-field-element input[type="text"],
.orsan-denuncia-form .nf-field-element input[type="email"],
.orsan-denuncia-form .nf-field-element input[type="tel"],
.orsan-denuncia-form .nf-field-element select,
.orsan-denuncia-form .nf-field-element textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c9ceda;
  border-radius: 10px;
  padding: 13px 14px;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  background: #ffffff;
  color: var(--e-global-color-uicore_headline, #16213e);
}
.orsan-denuncia-form .nf-field-element select {
  appearance: auto;
}

/* Date fields: Ninja Forms attaches a flatpickr text input rather than a
   native <input type="date">, so the browser's own calendar glyph (visible
   in the live reference) doesn't come for free — added back as a CSS
   background icon on the same right-side inset a native date input uses. */
.orsan-denuncia-form .date-container input[type="text"] {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A5468' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.orsan-denuncia-form .nf-field-element textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}
.orsan-denuncia-form .nf-field-element input[type="text"]:focus,
.orsan-denuncia-form .nf-field-element input[type="email"]:focus,
.orsan-denuncia-form .nf-field-element input[type="tel"]:focus,
.orsan-denuncia-form .nf-field-element select:focus,
.orsan-denuncia-form .nf-field-element textarea:focus {
  outline: none;
  border-color: var(--e-global-color-uicore_primary, #0055b8);
}
.orsan-denuncia-form .nf-error .ninja-forms-field {
  border-color: #e43d30 !important;
}
.orsan-denuncia-form .nf-error-msg {
  font-size: 12px;
  color: #e43d30;
}

/* "+569" prefix box: same pseudo-element overlay technique as the
   Contáctanos phone field above. The submitted value is just the local
   digits; "+569" is prepended in the email action's message template. */
.orsan-denuncia-form .orsan-dd-phone .nf-field-element {
  position: relative;
}
.orsan-denuncia-form .orsan-dd-phone .nf-field-element::before {
  content: "+569";
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f8;
  border-right: 1px solid #c9ceda;
  border-radius: 9px 0 0 9px;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  color: var(--e-global-color-uicore_headline, #16213e);
  pointer-events: none;
  z-index: 1;
}
.orsan-denuncia-form .orsan-dd-phone .nf-field-element input {
  padding-left: 66px;
}

.orsan-denuncia-form .orsan-dd-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--e-global-color-uicore_primary, #0055b8);
  color: #ffffff !important;
  border: none;
  border-radius: 10px;
  padding: 15px 28px;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.orsan-denuncia-form .orsan-dd-submit:hover {
  background: #002f5c;
}

/* Submission feedback: now the shared icon-box success card defined above
   (.orsan-contact-form / .orsan-denuncia-form .nf-response-msg) — this used
   to be its own flat "info box" style before the design added a dedicated
   success state. */

/* Legal glossary list: live reference is a flex column of term blocks with
   a 20px gap; built here as one text-editor widget with a <p> per term, so
   the gap is reproduced via margin between paragraphs instead. */
#orsan-legal-glossary-list p {
  margin: 0 0 20px 0;
}
#orsan-legal-glossary-list p:last-child {
  margin-bottom: 0;
}

/* UAF page: outline button (Formulario PEP / Declaración Jurada Circular 57
   downloads). The only outline-style button in the whole design — no other
   page uses it — built as a plain styled link via an HTML widget, same
   pattern as .btn-portal-clientes in the header, rather than Elementor's
   Button widget (whose preset skins fight a transparent-fill + hover-invert
   style more than they help). Uses the Primary global color var, not a
   hardcoded hex, so it still follows global color changes. */
.orsan-uaf-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.btn-outline {
  display: inline-block;
  padding: 15px 24px;
  border: 1px solid var(--e-global-color-uicore_primary);
  border-radius: 10px;
  background: transparent;
  color: var(--e-global-color-uicore_primary) !important;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition:
    background 0.15s,
    color 0.15s;
}
.btn-outline:hover,
.btn-outline:focus {
  background: var(--e-global-color-uicore_primary);
  color: #ffffff !important;
}
@media (max-width: 640px) {
  .orsan-uaf-buttons {
    flex-direction: column;
  }
  .btn-outline {
    text-align: center;
  }
}

/* Smart Slider 3 hero slider (built via script — see project notes for the
   build script that assembles slides from these classes). Styled here
   instead of inline on each layer so there's one place to maintain it, and
   !important throughout because Smart Slider's own generated per-layer CSS
   (hash-named classes, regenerated on every rebuild) otherwise wins the
   cascade. Smart Slider also ships its own default font (Roboto) baked into
   those generated classes, so the font-family override below targets the
   stable plugin wrapper rather than anything slider-specific. */
.n2-ss-slider,
.n2-ss-slider * {
  font-family: Geist, sans-serif !important;
}

.orsan-ss-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px !important;
  background: var(--e-global-color-uicore_primary) !important;
  color: var(--e-global-color-uicore_white) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.orsan-ss-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--e-global-color-uicore_white);
  display: inline-block;
}
.orsan-ss-headline {
  font-size: 56px !important;
  font-weight: 700 !important;
  color: var(--e-global-color-uicore_white) !important;
  text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 16px !important;
}
.orsan-ss-highlight {
  color: var(--e-global-color-uicore_secondary) !important;
}
.orsan-ss-subtitle {
  display: block;
  margin: 0 0 24px 0;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: var(--e-global-color-uicore_white) !important;
  text-shadow: rgba(0, 0, 0, 0.45) 0px 2px 16px !important;
}
.orsan-ss-btn {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 40, 100, 0.35);
  font-size: 15px !important;
  font-weight: 600 !important;
  /* Smart Slider's own base CSS resets transitions on every <a> inside a
     slider (`.n2-ss-slider a.n2-ow { transition: none 0s; }`), which beats
     a plain declaration here on specificity — needs !important. */
  transition: background-color 0.2s ease !important;
}
.orsan-ss-btn:hover {
  background-color: #002f5c !important;
}
.n2-bullet.n2-active {
  width: 22px !important;
  border-radius: 999px !important;
  transition:
    width 0.3s ease,
    border-radius 0.3s ease;
}
.n2-ss-slide-limiter {
  max-width: none !important;
}

/* Smart Slider's "simple" slider type sizes each slide to fit its content
   (measured and applied as an inline height by its own JS), not a fixed
   value — so forcing 432px on desktop means overriding that inline style.
   Mobile is left on its natural content-driven height. 1026px matches the
   breakpoint UiCore's own generated nav CSS already uses sitewide. */
@media (min-width: 1026px) {
  .n2-ss-slider.n2-ss-slider {
    height: 432px !important;
    /* .n2-ss-slider is a CSS Grid container, and Smart Slider's JS sets an
       inline grid-template-rows (e.g. "493.711px 0px") independently of the
       height property — forcing height alone left the grid's own row track
       at its old content-measured size, so the actual content area didn't
       shrink to match the 432px box (buttons clipped, vertical centering
       thrown off). Forcing the row track too keeps both in sync. */
    grid-template-rows: 432px 0px !important;
  }
  .n2-ss-slider.n2-ss-slider .n2-ss-slider-wrapper-inside,
  .n2-ss-slider.n2-ss-slider .n2-ss-slider-1,
  .n2-ss-slider.n2-ss-slider .n2-ss-slider-2,
  .n2-ss-slider.n2-ss-slider .n2-ss-slider-3,
  .n2-ss-slider.n2-ss-slider .n2-ss-slider-4,
  .n2-ss-slider.n2-ss-slider .n2-ss-slide-backgrounds,
  .n2-ss-slider.n2-ss-slider .n2-ss-slide-background,
  .n2-ss-slider.n2-ss-slider .n2-ss-slide,
  .n2-ss-slider.n2-ss-slider svg,
  .n2-ss-slider.n2-ss-slider .n2-ss-slide-background-image,
  .n2-ss-slider.n2-ss-slider .n2-ss-slide-background-image picture,
  .n2-ss-slider.n2-ss-slider .n2-ss-slide-background-image img {
    height: 100% !important;
  }
  /* Each individual .n2-ss-slide is *also* its own grid container with its
     own independent inline grid-template-rows (same issue as .n2-ss-slider
     above, one level deeper) — both slides need it, not just the active one,
     since the inactive slide's stale size can still affect layout. */
  .n2-ss-slider.n2-ss-slider .n2-ss-slide {
    grid-template-rows: 432px !important;
  }
}

/* object-fit: cover on the background <img> itself so the photo crops
   instead of stretching to fill the slide (matches the original bdt-slider
   hero). Smart Slider's own stylesheet (smartslider.min.css) declares the
   exact same selector with !important for height, and it's enqueued after
   the theme's style.css — with equal specificity and equal importance,
   later-in-document wins regardless of order within this file, so the
   .n2-ss-slider.n2-ss-slider doubled class is needed here to out-specificity
   it rather than just out-order it. */
.n2-ss-slider.n2-ss-slider .n2-ss-slide-background-image img {
  object-fit: cover !important;
  width: 100% !important;
}
@media (min-width: 1026px) {
  .n2-ss-slider.n2-ss-slider .n2-ss-slide-background-image img {
    height: 432px !important;
  }
}

/* Smart Slider's JS sets body { overflow-x: hidden } inline (guarding
   against a horizontal scrollbar from its own layout calculations). That
   alone is enough to make <body> count as a scroll-container reference per
   spec, even though overflow-y is left at its default — and since <body>
   itself has almost no scrollable range of its own (the page actually
   scrolls via <html>), that breaks two things on any page using the slider:
   the sticky header's containing block becomes the nearly-static <body>
   instead of the viewport (so it stops tracking scroll), and the mouse
   wheel's first tick gets absorbed by body's near-zero internal scroll
   range before the second tick reaches <html>. `clip` gives the same
   "no horizontal scrollbar" result without creating that scroll-container
   reference, so sticky positioning and wheel scrolling go back to
   tracking <html> like every other page. */
body {
  overflow-x: clip !important;
}

/* html/body have no background-color of their own (fully transparent), so
   any gap at the page edges — overscroll/rubber-band bounce past the end,
   sub-pixel rounding, etc. — reveals the browser's blank white canvas
   instead of blending in. Match the footer's navy (rgb(0,39,86), the
   section wrapper background in the footer Theme Builder template, ID 40 —
   not one of the UiCore global color tokens, so used as a literal value)
   so any such gap is invisible against the footer instead of flashing white. */
html,
body {
  background-color: #002756;
}

/* Home hero (headline + [orsan_simulador variant="hero"]), built by
   `wp orsan home-hero`. The simulator card styles itself (plugin CSS,
   .orsan-simh-*); this only covers the Elementor widgets around it. */
.orsan-home-hero .orsan-hero-title .elementor-heading-title {
  text-wrap: balance;
}

.orsan-home-hero .orsan-hero-line,
.orsan-home-hero .orsan-hero-accent {
  display: block;
}

.orsan-home-hero .orsan-hero-accent {
  color: var(--e-global-color-uicore_primary, #0055b8);
}

.orsan-home-hero .orsan-hero-lead {
  max-width: 560px;
}

.orsan-home-hero .orsan-hero-lead p:last-child {
  margin-bottom: 0;
}

.orsan-home-hero .orsan-hero-checks .elementor-icon-list-items {
  row-gap: 12px;
}

/* Scroll cue: framed Elementor icon, but with the neutral border and white
   fill of the design instead of the icon color. */
.orsan-home-hero .orsan-hero-cue .elementor-icon {
  border-color: #d3dae6;
  background-color: #ffffff;
  transition: border-color 0.15s;
}

.orsan-home-hero .orsan-hero-cue .elementor-icon:hover {
  border-color: var(--e-global-color-uicore_primary, #0055b8);
}