/* Orozco template pack — patches & overrides.
   Loaded AFTER styles.css to fix missing rules and Hello Elementor parent quirks.
*/

/* =========================================================================
   16. ELEMENTOR KIT OVERRIDES — force pack tokens on native Elementor widgets
   ========================================================================= */
/* Elementor's kit-17816 forces Roboto + #6EC1E4 + 0 padding via high-specificity
   selectors. We re-assert pack tokens with matching specificity. */

/* Typography on headings inside Elementor widgets — keep !important only on
   font-family/weight to defeat the kit, but NOT on color so per-widget
   title_color (used on dark sections) can win. */
.elementor .elementor-heading-title,
.elementor .elementor-widget-heading .elementor-heading-title {
  font-family: var(--display) !important;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 300;
}
.elementor .elementor-heading-title.eye,
.elementor .eye .elementor-heading-title,
.elementor .elementor-widget-heading.eye-wrap .elementor-heading-title {
  font-family: var(--mono) !important;
  font-size: var(--fs-eye) !important;
  color: var(--brass);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}
.elementor h1.elementor-heading-title { font-size: var(--fs-hero); }
.elementor h2.elementor-heading-title { font-size: var(--fs-h2); }
.elementor h3.elementor-heading-title { font-size: var(--fs-h3); font-weight: 400; }

/* Text editor (paragraphs) inherits Inter Tight via body but ensure size */
.elementor .elementor-widget-text-editor,
.elementor .elementor-widget-text-editor p {
  font-family: var(--sans);
  color: var(--ink-2, #2a3a52);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.elementor .elementor-widget-text-editor.lead p,
.elementor .lead.elementor-widget-text-editor p {
  font-size: var(--fs-lead);
  color: var(--ink-2, #2a3a52);
  line-height: 1.55;
}

/* Buttons — pack .btn aesthetic applied ONLY to the inner <a>, never to the
   widget outer div (to avoid the double-border bug). */
.elementor .elementor-widget-button > .elementor-widget-container > a.elementor-button,
.elementor .elementor-widget-button a.elementor-button-link.elementor-button {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all .28s ease;
}
/* Kill any border/background that Pack rules like .btn--brass or .btn--xl could
   have set on the OUTER widget div (we no longer add those classes via
   _css_classes, but defensive in case Elementor or other CSS adds them). */
.elementor-widget-button,
.elementor-widget-button > .elementor-widget-container {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Container max-width — Elementor's content_width=boxed should set this but
   the kit forces "none". Override directly. */
body.page-template-elementor_canvas .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container, 1180px) !important;
}

/* Widgets on ink (navy) sections — invert text colour.
   _css_classes work reliably on widgets (unlike sections/columns), so we tag
   widgets in dark sections with "on-ink" in the builder. */
.elementor-widget-heading.on-ink .elementor-heading-title { color: var(--bone); }
.elementor-widget-text-editor.on-ink,
.elementor-widget-text-editor.on-ink p { color: rgba(245, 240, 228, 0.78); }

/* =========================================================================
   17. PACK HERO-STD — replicate demo Pack visual via #pack-hero-std hook
   ========================================================================= */
#pack-hero-std {
  position: relative;
  overflow: hidden;
}
/* Subtle grid pattern background, matching the pack hero */
#pack-hero-std::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,35,50,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,35,50,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
#pack-hero-std > .elementor-container {
  position: relative;
  z-index: 1;
  max-width: 760px !important;
  margin-inline: auto;
  margin-left: clamp(24px, 6vw, 96px) !important;
}
/* Breadcrumbs (rendered via small HTML widget) */
#pack-hero-std .breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2, #5b6478);
}
#pack-hero-std .breadcrumbs li { display: inline-flex; align-items: center; }
#pack-hero-std .breadcrumbs li + li::before {
  content: "→"; margin: 0 10px; opacity: 0.55;
}
#pack-hero-std .breadcrumbs a {
  color: inherit; text-decoration: none; transition: color .2s ease;
}
#pack-hero-std .breadcrumbs a:hover { color: var(--brass); }
#pack-hero-std .breadcrumbs li[aria-current="page"] { color: var(--ink); }
/* Hero typography sizing within pack-hero-std */
#pack-hero-std h1.elementor-heading-title {
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 8px 0 24px;
}
#pack-hero-std .lead--hero p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-2, #2a3a52);
  max-width: 58ch;
}
/* Chips */
#pack-hero-std .chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 28px 0 32px;
}
#pack-hero-std .chip {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid rgba(26,35,50,0.22);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2, #2a3a52);
  background: rgba(255,255,255,0.4);
}
/* Hero inline 2-col actions: drop the column gap, align baselines */
#hero-actions { gap: 14px !important; }
#hero-actions > .elementor-container { gap: 14px; }
#hero-actions .elementor-widget-button .elementor-button { width: auto; }

/* =========================================================================
   18. PACK SECTION HEADS + CARDS (area__num, area__title, area__desc, link)
   ========================================================================= */
.elementor-widget-html .area__num,
.elementor-widget-html .process__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}
.elementor-widget-heading.area__title .elementor-heading-title,
.elementor-widget-heading.process__title .elementor-heading-title {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.elementor-widget-text-editor.area__desc p,
.elementor-widget-text-editor.process__desc p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, #2a3a52);
  margin-bottom: 12px;
}
/* "Ver área →" link under each card */
.elementor-widget-html .link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.elementor-widget-html .link:hover { color: var(--brass); }
.elementor-widget-html .link .arrow { margin-left: 6px; transition: transform .2s ease; }
.elementor-widget-html .link:hover .arrow { transform: translateX(3px); }

/* Section description (under section h2) */
.elementor-widget-text-editor.section__desc p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ink-2, #2a3a52);
  max-width: 56ch;
  margin-bottom: 32px;
}

/* =========================================================================
   19. PACK PROCESO (#pack-proceso) — ink with numbered steps
   ========================================================================= */
#pack-proceso {
  /* bg already ink via section variant */
}
#pack-proceso .elementor-widget-html .process__num { color: var(--brass); }
#pack-proceso .elementor-widget-heading .elementor-heading-title { color: var(--bone); }
#pack-proceso .elementor-widget-text-editor p,
#pack-proceso .elementor-widget-text-editor.process__desc p {
  color: rgba(245,240,228,0.78);
}

/* =========================================================================
   20. PACK CTA FINAL (#pack-cta-final)
   ========================================================================= */
#pack-cta-final .cta-final__title .elementor-heading-title {
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 16px;
  text-wrap: balance;
}
#pack-cta-final .cta-final__desc p {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 32px;
}
#pack-cta-final .elementor-widget-button .elementor-button {
  padding: 22px 36px;
}

/* Section eyebrow (used inside all pack section heads) */
.elementor-widget-heading.eye .elementor-heading-title { margin-bottom: 14px; }

/* =========================================================================
   21. BUTTON FIXES — wrapper should NOT inherit border/background.
   ========================================================================= */
/* Elementor wraps each button in <div class="elementor-widget-container">
   > <div class="elementor-button-wrapper"> > <a class="elementor-button-link
   elementor-button btn"> ... </a>. When we set background_color/border on
   the widget Elementor applies them via inline <style> targeting the wrapper
   too in some versions, creating the "double border" effect.
   Force wrapper to be transparent + inline-flex. */
.elementor-widget-button .elementor-button-wrapper {
  display: inline-flex;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.elementor-widget-button .elementor-button-wrapper > a.elementor-button {
  display: inline-flex;
  width: auto;
}
/* Action row: two buttons side by side without bloating */
#hero-actions .elementor-widget-button,
#hero-actions .elementor-widget-button .elementor-widget-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* Center-aligned button wrappers (CTA final etc.) — wrapper takes the full row
   only to act as the centering track. The actual <a class="elementor-button">
   inside stays inline-flex so its border doesn't stretch.
   We use text-align on the parent widget container instead of flex on the
   wrapper, which keeps the wrapper truly inline. */
.elementor-widget-button.elementor-widget-align-center,
.elementor-widget-button.elementor-widget-align-center > .elementor-widget-container {
  text-align: center;
}
.elementor-widget-button[data-align="center"] .elementor-button-wrapper,
.elementor-widget-button .elementor-button-wrapper.elementor-align-center,
.elementor-widget-button.elementor-widget-align-center .elementor-button-wrapper {
  /* Inline-flex so the wrapper hugs the button (no stretch). text-align on
     parent does the centering. */
  display: inline-flex !important;
  justify-content: center;
  width: auto;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.elementor-widget-container { background: transparent !important; }

/* =========================================================================
   22. CARDS GRID SPACING — gap between cards + INTERNAL padding.
   Column settings (padding, border) are stripped by Elementor like
   _css_classes, so we force everything via CSS using the parent #pack-* id.
   ========================================================================= */
/* Horizontal gap between cards in a row */
#pack-areas-grid .elementor-inner-section > .elementor-container,
#pack-proceso .elementor-inner-section > .elementor-container {
  gap: clamp(20px, 2.2vw, 32px);
}
/* Vertical gap between rows of cards */
#pack-areas-grid .elementor-inner-section + .elementor-inner-section,
#pack-proceso .elementor-inner-section + .elementor-inner-section {
  margin-top: clamp(20px, 2.2vw, 32px);
}
/* INTERNAL padding + border on each card (column inner wrapper) */
#pack-areas-grid .elementor-inner-section .elementor-column .elementor-element-populated,
#pack-proceso .elementor-inner-section .elementor-column .elementor-element-populated {
  padding: clamp(28px, 3vw, 44px) !important;
  border: 1px solid rgba(26, 35, 50, 0.12);
  background: rgba(255, 255, 255, 0.5);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Empty filler column (for odd-count rows): no padding or border */
#pack-areas-grid .elementor-inner-section .elementor-column:empty .elementor-element-populated,
#pack-areas-grid .elementor-inner-section .elementor-column .elementor-widget-wrap:empty,
#pack-areas-grid .elementor-inner-section .elementor-column:has(> .elementor-element-populated:empty) {
  border: none;
  background: transparent;
  padding: 0 !important;
}
/* On the ink proceso section, cards have transparent bg with subtle outline */
#pack-proceso .elementor-inner-section .elementor-column .elementor-element-populated {
  background: rgba(245, 240, 228, 0.04);
  border-color: rgba(245, 240, 228, 0.15);
}
/* Make sure the head (heading/intro) has breathing room before the grid */
#pack-areas-grid .elementor-widget-heading.eye,
#pack-areas-grid > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading:not(.eye):not(.area__title):first-of-type {
  margin-bottom: 8px;
}
#pack-areas-grid .elementor-widget-text-editor.section__desc {
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* =========================================================================
   23. FAQ ACCORDION — kit defaults are green/blue; force pack palette.
   ========================================================================= */
.elementor-widget-accordion .elementor-accordion-item {
  border: none !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.12) !important;
}
.elementor-widget-accordion .elementor-tab-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink) !important;
  background: transparent !important;
  padding: 24px 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.08) !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active {
  color: var(--brass) !important;
}
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon {
  color: var(--brass) !important;
}
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon svg,
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon i {
  fill: var(--brass) !important;
  color: var(--brass) !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
  color: var(--ink) !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg,
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i {
  fill: var(--ink) !important;
  color: var(--ink) !important;
}
.elementor-widget-accordion .elementor-tab-content {
  padding: 8px 0 28px !important;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2, #2a3a52) !important;
  background: transparent !important;
  border: none !important;
}
.elementor-widget-accordion .elementor-tab-content p {
  color: var(--ink-2, #2a3a52);
}
/* Override Elementor Kit's "global colors" used by accordion via CSS vars */
.elementor-widget-accordion {
  --e-global-color-primary: var(--brass);
  --e-global-color-secondary: var(--ink);
  --e-global-color-text: var(--ink-2, #2a3a52);
  --e-global-color-accent: var(--brass);
}
/* Catch-all for any leftover SVG/icon inheritance */
.elementor-widget-accordion .elementor-tab-title svg path,
.elementor-widget-accordion .elementor-tab-title svg * {
  fill: currentColor !important;
}
.elementor-widget-accordion .elementor-tab-title { color: var(--ink) !important; }
.elementor-widget-accordion .elementor-tab-title.elementor-active { color: var(--brass) !important; }
.elementor-widget-accordion .elementor-tab-title:hover { color: var(--brass) !important; }
/* CRITICAL: the question text lives in <a class="elementor-accordion-title">
   nested inside .elementor-tab-title. That <a> inherits Roboto from kit.
   Force pack font here. */
.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-title,
.elementor-widget-accordion a.elementor-accordion-title {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  color: inherit !important;
  text-decoration: none !important;
  letter-spacing: -0.01em;
}

/* Cards (.area) — pack card aesthetic for hub-area subsections */
.elementor-element.area > .elementor-element-populated {
  padding: 32px;
  border: 1px solid rgba(26, 35, 50, 0.12);
  background: rgba(255, 255, 255, 0.4);
  height: 100%;
}
.elementor-element.area .area__title .elementor-heading-title {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 12px;
}
.elementor-element.area .area__desc p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, #2a3a52);
}
.elementor-element.areas { gap: 24px; }
.elementor-element.areas > .elementor-container { gap: 24px; }

/* Inner sections (rows of cards) — keep tight vertical gap */
.elementor-inner-section.areas + .elementor-inner-section.areas {
  margin-top: 24px;
}

/* CTA final centered */
.elementor-element.cta-final .elementor-element {
  text-align: center;
}
.elementor-element.cta-final .elementor-button-wrapper {
  text-align: center;
}

/* FAQ accordion — pack look */
.elementor .elementor-widget-accordion .elementor-tab-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  padding: 24px 0;
  border-bottom: 1px solid rgba(26, 35, 50, 0.12);
  background: transparent !important;
}
.elementor .elementor-widget-accordion .elementor-tab-title.elementor-active {
  color: var(--brass);
}
.elementor .elementor-widget-accordion .elementor-tab-content {
  padding: 8px 0 24px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2, #2a3a52);
  background: transparent !important;
  border: none !important;
}
.elementor .elementor-widget-accordion .elementor-accordion-item {
  border: none !important;
  background: transparent !important;
}


/* --- 1. nav-main: missing in pack v1 ---------------------------------- */
.nav-main {
  display: flex;
  align-items: center;
}
.nav-main ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-main li { margin: 0; padding: 0; }
.nav-main a {
  color: var(--ink-2, #2a3a52);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color .2s ease;
}
.nav-main a:hover,
.nav-main a:focus { color: var(--brass, #b8935a); }

/* --- 2. header__inner alias (pack has .site-header__inner only) -------- */
.header__inner { /* alias kept for safety if anything still uses old class */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}

/* --- 3. footer columns: ensure clean grid + bullets off ---------------- */
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li { margin: 0; padding: 4px 0; }

/* --- 4. Hello Elementor parent leftovers: hide skip-link and site-title */
/* (we override header.php anyway but belt-and-suspenders) */
.elementor-location-header,
header#site-header.site-header.hello-elementor-default {
  display: none !important;
}

/* --- 5. Footer: HTML uses .footer__grid / .footer__col but pack CSS
       defines .site-footer__top instead — alias here. ---------------- */
.site-footer { background: var(--ink, #0a1428); color: var(--bone, #f5f1e8); padding: 80px 0 40px; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.footer__col h3.footer__title {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass, #b8935a);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer__col--brand .brand { color: var(--bone-2, #fff); font-size: 26px; display: inline-block; margin-bottom: 14px; }
.footer__desc {
  color: rgba(245,241,232,0.65);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  max-width: 36ch;
}
.footer__bottom {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(245,241,232,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer__copy { font-size: 12px; color: rgba(245,241,232,0.55); margin: 0; letter-spacing: 0.02em; }
.footer__ica { font-size: 11px; color: rgba(245,241,232,0.4); margin: 0; font-style: italic; }
@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --- 6. Quote: HTML uses <footer class="quote__author"> but CSS
       only defines .quote__cite. Add proper styling. ----------------- */
.quote {
  max-width: 900px;
  margin: 0 auto;
  border-left: 2px solid var(--brass, #b8935a);
  padding-left: 32px;
}
.quote p {
  font-family: var(--font-display, "Bricolage Grotesque", serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  font-weight: 400;
  color: inherit;
  margin: 0 0 24px;
  font-style: normal;
}
.quote__author {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass, #b8935a);
  font-weight: 500;
  font-style: normal;
}
.section--ink .quote { color: var(--bone, #f5f1e8); }

/* --- 7. Stats: HTML uses .stat__lab but pack CSS has .stat__label only.
       Also override the pack's hardcoded `repeat(3, 1fr)` so 4 stat cards
       fit cleanly on one row at desktop. -------------------------------- */
@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}
.stat__lab {
  display: block;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(10,20,40,0.55));
  margin-top: 6px;
  line-height: 1.4;
}

/* --- 8. Breadcrumbs aria-current: CSS targets <span> inside <li>,
       but our HTML puts aria-current on <li> directly. Add direct rule. */
.breadcrumbs li[aria-current="page"] {
  color: var(--text-muted, rgba(10,20,40,0.55));
  font-weight: 500;
}
/* Slightly more compact for less visual noise. */
.hero-std .breadcrumbs {
  margin-bottom: 24px;
  font-size: 12px;
  opacity: 0.85;
}

/* --- 9. Hero std H1 emphasis: bump size + tighten lead so the H1
       clearly dominates over the breadcrumbs above it. -------------- */
.hero-std .eye {
  margin-bottom: 14px;
  display: block;
}
.hero-std h1 {
  font-size: clamp(36px, 5.2vw, 72px) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 22px;
  font-weight: 500;
}
.hero-std .lead--hero {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  max-width: 60ch;
  color: var(--text-muted, rgba(10,20,40,0.7));
}

/* --- 10. Hero chips (used inside hero-std HERO_META_BLOCK) ---------- */
.hero-chips { display: flex; gap: 8px; margin: 18px 0 24px; flex-wrap: wrap; }
.hero-chips .chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* --- 11. Section footer link (used after casos grid) ---------------- */
.section__footer-link {
  margin-top: 40px;
  text-align: center;
}

/* --- 12. CRITICAL: free Elementor's boxed container constraint -------
   On Elementor Canvas pages that host the Orozco pack, Elementor wraps
   our HTML widget in:
     section.elementor-section > div.elementor-container[max-width:1140]
       > .elementor-column > .elementor-widget-wrap > .elementor-widget
         > .elementor-widget-html > .elementor-widget-container > <our pack HTML>
   This boxed container caps width at 1140px → the pack's `.hero-fullbleed`
   (designed to span 100vw) becomes a 1140px island with cream side bands.
   We release the constraint on Canvas pages so the pack's own `.container`
   (max-width: var(--container)) controls inner-content width per section.
-------------------------------------------------------------------------- */
body.page-template-elementor_canvas .elementor-section .elementor-container {
  max-width: none !important;
  width: 100% !important;
}
body.page-template-elementor_canvas .elementor-column,
body.page-template-elementor_canvas .elementor-widget-wrap,
body.page-template-elementor_canvas .elementor-widget,
body.page-template-elementor_canvas .elementor-widget-html,
body.page-template-elementor_canvas .elementor-widget-html .elementor-widget-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* --- 13. Header + Footer: Hello Elementor parent CSS caps <header> and
       <footer> at max-width: 1140px via `--container-max-width`. Our pack
       expects them to span 100vw (cream header, navy footer = full bleed).
       Override globally — these classes only exist on our pack. ---------- */
.site-header,
.site-footer {
  max-width: none !important;
  width: 100% !important;
}

/* --- 15. Home hero background image -----------------------------------
   DEPRECATED 2026-05-19: hero bg image is now set NATIVELY in Elementor
   section settings (background_background=classic + background_image +
   background_overlay gradient) via build_home_native.py. No CSS fallback
   needed. Kept this comment as a marker. */

/* --- 14. Archive templates (category, blog index, single post) -------- */

.hero--archive .hero__intro,
.hero--archive .hero__lead {
  max-width: 720px;
  margin-top: 24px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-2, #2a3a52);
}

.archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
}
@media (min-width: 720px)  { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }

.archive-grid .card-article .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.archive-grid .card-article:not(:has(.media)) {
  border-top: 1px solid var(--rule, rgba(26, 35, 50, 0.12));
  padding-top: 24px;
}

.pagination { margin-top: clamp(48px, 6vw, 80px); }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--rule, rgba(26, 35, 50, 0.15));
  border-radius: 4px;
  color: var(--ink-2, #2a3a52);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pagination .page-numbers:hover,
.pagination .page-numbers:focus,
.pagination .page-numbers.current {
  background: var(--ink, #1a2332);
  color: var(--bone, #f5f0e4);
  border-color: var(--ink, #1a2332);
}
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

.empty-state {
  padding: 48px 0;
  font-family: var(--display, Georgia, serif);
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-2, #2a3a52);
}

.hero--post .post-meta {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #5b6b80);
}
.post-figure { margin: 0 0 clamp(32px, 4vw, 56px); }
.post-figure img { width: 100%; height: auto; display: block; }
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--rule, rgba(26, 35, 50, 0.12));
}
.post-nav__next { text-align: right; }
.post-nav a {
  display: inline-block;
  color: var(--ink-2, #2a3a52);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px; line-height: 1.4;
  transition: color .2s ease;
}
.post-nav a:hover, .post-nav a:focus { color: var(--brass, #b8935a); }

.archive-grid .card-article__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size .35s ease;
}
.archive-grid .card-article:hover .card-article__title a,
.archive-grid .card-article__title a:hover,
.archive-grid .card-article__title a:focus { background-size: 100% 1px; }

/* =========================================================================
   24. PACK HOME — hero (#pack-hero-home) — rich Pack visual
   Background image is set NATIVELY in section settings (Elementor handles
   background_background=classic + image + gradient overlay).
   This block only handles layout, typography overrides, chips and seal.
   ========================================================================= */
#pack-hero-home {
  position: relative !important;
  overflow: hidden;
  min-height: 86vh;
  display: flex;
  align-items: center;
  color: var(--bone, #f5f0e4) !important;
}
/* Container — full bleed inside the section with content left-aligned */
#pack-hero-home > .elementor-container {
  position: relative;
  z-index: 2;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-inline: clamp(24px, 6vw, 96px);
  align-items: center;
}
/* Content column (first column) takes the full text width, max 760px */
#pack-hero-home > .elementor-container > .elementor-column:not(.hero-seal-col) > .elementor-element-populated {
  max-width: 760px;
}
/* Headings inside hero must stay bone on the dark bg — Elementor widget
   typography is already set inline but force the !important here defensively
   to defeat the global Elementor Kit override. */
#pack-hero-home .eye .elementor-heading-title {
  color: var(--brass) !important;
  margin-bottom: 18px;
}
#pack-hero-home h1.elementor-heading-title,
#pack-hero-home .hero-h1 .elementor-heading-title {
  color: var(--bone, #f5f0e4) !important;
  text-wrap: balance;
  margin: 8px 0 28px;
}
#pack-hero-home .lead--hero p,
#pack-hero-home .elementor-widget-text-editor.lead p {
  color: rgba(245, 240, 228, 0.86) !important;
  max-width: 60ch;
}
/* Chips on hero ink */
#pack-hero-home .chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 32px 0 36px;
}
#pack-hero-home .chip {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid rgba(245, 240, 228, 0.4);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 228, 0.86);
  background: rgba(10, 20, 40, 0.18);
  backdrop-filter: blur(4px);
}
/* SEAL — Elementor strips _css_classes from columns, so we target the seal
   column by the widget INSIDE it (`.seal-wrap` class is preserved on widgets).
   The seal column is the SECOND child column of the hero section. We position
   it absolutely to the top-right corner of the section. */
#pack-hero-home > .elementor-container > .elementor-column:has(.seal-wrap) {
  position: absolute !important;
  top: clamp(40px, 6vw, 88px);
  right: clamp(24px, 6vw, 96px);
  width: clamp(140px, 16vw, 220px) !important;
  max-width: none !important;
  min-height: 0;
  z-index: 3;
  pointer-events: none;
  flex: 0 0 auto !important;
}
/* Fallback for browsers without :has() — target the column that contains
   the seal widget by using sibling selector (last-child of container). */
@supports not selector(:has(*)) {
  #pack-hero-home > .elementor-container > .elementor-column:last-child {
    position: absolute !important;
    top: clamp(40px, 6vw, 88px);
    right: clamp(24px, 6vw, 96px);
    width: clamp(140px, 16vw, 220px) !important;
    flex: 0 0 auto !important;
    z-index: 3;
    pointer-events: none;
  }
}
#pack-hero-home > .elementor-container > .elementor-column:has(.seal-wrap) > .elementor-element-populated,
#pack-hero-home > .elementor-container > .elementor-column:last-child > .elementor-element-populated {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  height: 0;
  padding-bottom: 100% !important; /* keep aspect 1:1 */
  position: relative;
}
#pack-hero-home .seal-wrap,
#pack-hero-home .seal-wrap > .elementor-widget-container {
  position: absolute !important;
  inset: 0;
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
#pack-hero-home .seal {
  position: relative;
  width: 100%;
  height: 100%;
  color: rgba(245, 240, 228, 0.78);
}
#pack-hero-home .seal__rotor {
  position: absolute; inset: 0;
}
#pack-hero-home .seal__rotor svg {
  width: 100%; height: 100%;
  animation: seal-rotate 32s linear infinite;
}
#pack-hero-home .seal__center {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--display);
  color: rgba(245, 240, 228, 0.92);
  line-height: 1;
}
#pack-hero-home .seal__center .o {
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.02em;
}
#pack-hero-home .seal__center .o em {
  color: var(--brass);
  font-style: normal;
  margin: 0 2px;
}
#pack-hero-home .seal__center .yr {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--brass);
  margin-top: 6px;
}
@keyframes seal-rotate { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  #pack-hero-home .hero-seal-col { display: none !important; }
  #pack-hero-home { min-height: 78vh; }
  #pack-hero-home > .elementor-container { padding-inline: 20px; }
}

/* =========================================================================
   24b. PACK HOME — unified container widths
   All home sections share the same inner content width to keep visual rhythm.
   Override per-section widths below ONLY when intentional (quote, hero).
   ========================================================================= */
body.page-id-15260 #pack-stats-home > .elementor-container,
body.page-id-15260 #pack-manifest-home > .elementor-container,
body.page-id-15260 #pack-areas-grid > .elementor-container,
body.page-id-15260 #pack-proceso > .elementor-container,
body.page-id-15260 #pack-faq > .elementor-container,
body.page-id-15260 #pack-cta-final > .elementor-container,
body.page-id-15260 [id^="pack-cta-mid"] > .elementor-container {
  max-width: 1080px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 32px);
}
/* Hero container also 1080 inner but allow padding margin to breathe */
body.page-id-15260 #pack-hero-home > .elementor-container {
  max-width: 1080px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 32px);
}

/* =========================================================================
   25. PACK HOME — stats grid (#pack-stats-home)
   ========================================================================= */
#pack-stats-home .elementor-inner-section > .elementor-container {
  gap: clamp(20px, 3vw, 48px);
}
#pack-stats-home .elementor-column .elementor-element-populated {
  text-align: left;
  padding: clamp(20px, 2vw, 28px) 0 !important;
  border-top: 1px solid rgba(26, 35, 50, 0.18);
}
#pack-stats-home .stat__num .elementor-heading-title {
  font-family: var(--display) !important;
  font-size: clamp(34px, 3.6vw, 56px) !important;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  margin: 0 0 8px;
}
#pack-stats-home .stat__lab {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(10,20,40,0.6));
  line-height: 1.45;
}

/* =========================================================================
   26. PACK HOME — manifesto (#pack-manifest-home)
   ========================================================================= */
#pack-manifest-home .h2--display .elementor-heading-title {
  font-family: var(--display) !important;
  font-size: clamp(32px, 4vw, 58px) !important;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 12px 0 36px;
  max-width: 22ch;
  text-wrap: balance;
}
#pack-manifest-home .manifest__body p {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
  color: var(--ink-2, #2a3a52);
  max-width: 64ch;
  margin-bottom: 18px;
}

/* =========================================================================
   27. PACK HOME — quote section (#pack-quote)
   ========================================================================= */
#pack-quote > .elementor-container {
  max-width: 880px !important;
  margin-inline: auto;
}
#pack-quote .quote {
  margin: 0;
  text-align: center;
}
#pack-quote .quote p {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 24px;
  text-wrap: balance;
}
#pack-quote .quote__author {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

/* =========================================================================
   28. PACK HOME — areas grid header alignment (no eyebrow nudge needed)
   ========================================================================= */
body.page-id-15260 #pack-areas-grid .elementor-widget-heading:not(.eye):not(.area__title) .elementor-heading-title {
  font-size: clamp(32px, 3.6vw, 48px) !important;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 8px 0 12px;
  max-width: 22ch;
  text-wrap: balance;
}

/* =========================================================================
   29. PACK HOME — CTA-mid bands (between sections)
   ========================================================================= */
[id^="pack-cta-mid"] .elementor-inner-section > .elementor-container {
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
[id^="pack-cta-mid"] .elementor-inner-section .elementor-column .elementor-element-populated {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
[id^="pack-cta-mid"] h3.elementor-heading-title {
  margin: 8px 0 12px;
  text-wrap: balance;
}
[id^="pack-cta-mid"] .elementor-widget-text-editor p {
  margin-bottom: 0;
  max-width: 56ch;
}
[id^="pack-cta-mid"] .elementor-widget-button {
  justify-self: end;
}
@media (max-width: 720px) {
  [id^="pack-cta-mid"] .elementor-inner-section .elementor-widget-button {
    justify-self: start;
  }
  [id^="pack-cta-mid"] .elementor-widget-button .elementor-widget-container {
    text-align: left !important;
  }
  [id^="pack-cta-mid"] .elementor-widget-button .elementor-button-wrapper {
    justify-content: flex-start;
  }
}

/* =========================================================================
   30. PACK HOME — FINAL on-ink text color overrides (must beat all kit + §1)
   Highest specificity + !important. Applied to hero, proceso, quote, cta-final.
   ========================================================================= */
body.page-id-15260 #pack-hero-home .elementor-widget-text-editor,
body.page-id-15260 #pack-hero-home .elementor-widget-text-editor p,
body.page-id-15260 #pack-hero-home .elementor-widget-text-editor .elementor-widget-container,
body.page-id-15260 #pack-hero-home .elementor-widget-text-editor .elementor-widget-container p {
  color: rgba(245, 240, 228, 0.86) !important;
}
body.page-id-15260 #pack-hero-home .chips,
body.page-id-15260 #pack-hero-home .chips .chip,
body.page-id-15260 #pack-hero-home .chip {
  color: rgba(245, 240, 228, 0.92) !important;
  border-color: rgba(245, 240, 228, 0.45) !important;
}
/* Chips wrap: ensure spacing between chips (in case user sees them inlined
   with no margin "Sede en RondaCobertura en Málaga..." that happens when
   the parent display is not flex) */
body.page-id-15260 #pack-hero-home .hero-chips-wrap .chips,
body.page-id-15260 #pack-hero-home .chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 28px 0 32px !important;
}

/* Proceso (ink section) — text must be bone */
body.page-id-15260 #pack-proceso .elementor-widget-text-editor,
body.page-id-15260 #pack-proceso .elementor-widget-text-editor p,
body.page-id-15260 #pack-proceso .elementor-widget-text-editor .elementor-widget-container p {
  color: rgba(245, 240, 228, 0.82) !important;
}
body.page-id-15260 #pack-proceso h2.elementor-heading-title,
body.page-id-15260 #pack-proceso h3.elementor-heading-title,
body.page-id-15260 #pack-proceso .elementor-heading-title {
  color: #F5F0E4 !important;
}
/* Process num + numbers on ink should be brass */
body.page-id-15260 #pack-proceso .process__num {
  color: #B8935A !important;
}

/* Quote (ink section) */
body.page-id-15260 #pack-quote .elementor-widget-html,
body.page-id-15260 #pack-quote .quote,
body.page-id-15260 #pack-quote .quote p {
  color: #F5F0E4 !important;
}
body.page-id-15260 #pack-quote .quote__author {
  color: #B8935A !important;
}

/* CTA final (ink section) */
body.page-id-15260 #pack-cta-final .elementor-widget-heading h2,
body.page-id-15260 #pack-cta-final .elementor-heading-title,
body.page-id-15260 #pack-cta-final .cta-final__title .elementor-heading-title {
  color: #F5F0E4 !important;
}
body.page-id-15260 #pack-cta-final .elementor-widget-text-editor,
body.page-id-15260 #pack-cta-final .elementor-widget-text-editor p,
body.page-id-15260 #pack-cta-final .cta-final__desc p {
  color: rgba(245, 240, 228, 0.82) !important;
}

/* Defensive: any heading with on-ink class anywhere */
body.page-id-15260 .on-ink.elementor-heading-title,
body.page-id-15260 .on-ink .elementor-heading-title,
body.page-id-15260 .elementor-widget-heading.on-ink .elementor-heading-title {
  color: #F5F0E4 !important;
}
body.page-id-15260 .elementor-widget-text-editor.on-ink,
body.page-id-15260 .elementor-widget-text-editor.on-ink p {
  color: rgba(245, 240, 228, 0.82) !important;
}

/* =========================================================================
   31. PACK CONTACTO — tarjeta de contacto + form CF7
   ========================================================================= */
/* Unified inner width on contacto sections */
#pack-contacto-hero > .elementor-container,
#pack-contacto-grid > .elementor-container,
#pack-contacto-faq > .elementor-container {
  max-width: 1080px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 32px);
}
/* Breadcrumbs text */
#pack-contacto-hero .breadcrumbs-text .elementor-heading-title {
  color: var(--ink-2, #5b6478) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
/* Contact card */
.contact-card {
  background: #fafaf7;
  border: 1px solid rgba(26, 35, 50, 0.12);
  padding: clamp(28px, 4vw, 48px);
  height: 100%;
}
.contact-card__head .eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 8px;
}
.contact-card__head h3 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 28px;
  line-height: 1.1;
}
.contact-list {
  list-style: none;
  margin: 0; padding: 0;
}
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(26, 35, 50, 0.08);
}
.contact-list li:first-child { border-top: none; }
.contact-list__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.contact-list__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.contact-list__label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(10,20,40,0.55));
  margin-bottom: 4px;
}
.contact-list a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
  transition: color .2s ease;
}
.contact-list a:hover { color: var(--brass); }
.contact-card__foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 35, 50, 0.08);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2, #2a3a52);
}
.contact-card__foot strong { color: var(--ink); font-weight: 500; }

/* CF7 form styling — pack aesthetic */
#pack-contacto-grid .wpcf7 { margin-top: 24px; }
#pack-contacto-grid .wpcf7-form p { margin-bottom: 18px; }
#pack-contacto-grid .wpcf7-form label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(10,20,40,0.7));
  margin-bottom: 8px;
}
#pack-contacto-grid .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(26, 35, 50, 0.22);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#pack-contacto-grid .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.12);
}
#pack-contacto-grid .wpcf7-form textarea { min-height: 140px; resize: vertical; }
#pack-contacto-grid .wpcf7-submit {
  background: var(--ink) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ink) !important;
  padding: 16px 32px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all .28s ease;
}
#pack-contacto-grid .wpcf7-submit:hover {
  background: var(--brass) !important;
  border-color: var(--brass) !important;
}
#pack-contacto-grid .wpcf7-acceptance label {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2, #2a3a52);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
#pack-contacto-grid .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--brass);
}
#pack-contacto-grid .wpcf7-response-output {
  margin-top: 20px !important;
  padding: 14px 18px !important;
  font-family: var(--sans);
  font-size: 14px;
  border-radius: 2px;
}
/* Form intro */
#pack-contacto-grid .form-intro p {
  margin-bottom: 0;
  max-width: 52ch;
}

@media (max-width: 720px) {
  #pack-contacto-grid .elementor-inner-section > .elementor-container {
    flex-direction: column;
  }
  #pack-contacto-grid .elementor-inner-section .elementor-column {
    width: 100% !important;
  }
}

/* =========================================================================
   32. PACK PAGES — espaciado de párrafos en text-editor widgets
   Sin esta regla, varios <p> consecutivos en un solo widget se pegan
   visualmente. Aplica a todas las pages estándar de Orozco.
   ========================================================================= */
.elementor-widget-text-editor .elementor-widget-container > p,
.elementor-widget-text-editor > .elementor-widget-container > p {
  margin-bottom: 18px;
}
.elementor-widget-text-editor .elementor-widget-container > p:last-child,
.elementor-widget-text-editor > .elementor-widget-container > p:last-child {
  margin-bottom: 0;
}

/* Reducir el padding bottom del hero en páginas estándar — evita el hueco
   excesivo entre el lead y la siguiente sección. */
#pack-about-hero,
#pack-hono-hero,
#pack-careers-hero,
#pack-contacto-hero {
  padding-bottom: 56px !important;
}
@media (max-width: 720px) {
  #pack-about-hero,
  #pack-hono-hero,
  #pack-careers-hero,
  #pack-contacto-hero {
    padding-bottom: 40px !important;
  }
}

/* Listas de perfiles estilo "Letrado/a", "Pasantes", "Apoyo administrativo":
   los <strong> al inicio de párrafo actúan como label, dar respiro entre
   bloques. */
.elementor-widget-text-editor p > strong:first-child {
  display: inline-block;
  margin-bottom: 4px;
}

/* Sección Cultura del despacho: variant default (white). Asegurar bg blanco
   limpio y margin consistente entre items strong-labelled. */
#pack-careers-cultura .elementor-widget-text-editor .elementor-widget-container > p,
#pack-about-equipo .elementor-widget-text-editor .elementor-widget-container > p,
#pack-about-titular .elementor-widget-text-editor .elementor-widget-container > p,
#pack-about-especializacion .elementor-widget-text-editor .elementor-widget-container > p,
#pack-about-cobertura .elementor-widget-text-editor .elementor-widget-container > p,
#pack-hono-proceso .elementor-widget-text-editor .elementor-widget-container > p,
#pack-hono-transparencia .elementor-widget-text-editor .elementor-widget-container > p {
  margin-bottom: 20px;
}

/* =========================================================================
   33. CF7 form styling EXTEND — apply same brand look to careers form too
   (#pack-careers-form has the [contact-form-7 id="16091"] CV form).
   ========================================================================= */
#pack-careers-form .wpcf7 { margin-top: 24px; }
#pack-careers-form .wpcf7-form p { margin-bottom: 14px; }
#pack-careers-form .cv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 0;
}
#pack-careers-form .cv-form-row > p { margin-bottom: 0; }
@media (max-width: 540px) {
  #pack-careers-form .cv-form-row { grid-template-columns: 1fr; }
}
#pack-careers-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(26, 35, 50, 0.22);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#pack-careers-form .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.12);
}
#pack-careers-form .wpcf7-form textarea { min-height: 140px; resize: vertical; }
/* File upload */
#pack-careers-form .cv-file-label,
#pack-careers-form input[type="file"] + label,
#pack-careers-form .wpcf7-form > p:has(input[type="file"]):before {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(10,20,40,0.7));
  margin-bottom: 6px;
  display: block;
}
#pack-careers-form input[type="file"] {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  padding: 8px 0;
}
#pack-careers-form input[type="file"]::file-selector-button {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 12px;
  transition: all .25s ease;
}
#pack-careers-form input[type="file"]::file-selector-button:hover {
  background: var(--ink);
  color: var(--bone);
}
/* Submit button — same brand look as /contacto/ */
#pack-careers-form .wpcf7-submit {
  background: var(--ink) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ink) !important;
  padding: 16px 32px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all .28s ease;
  margin-top: 8px;
}
#pack-careers-form .wpcf7-submit:hover {
  background: var(--brass) !important;
  border-color: var(--brass) !important;
}
/* Acceptance checkbox + label */
#pack-careers-form .cv-acceptance,
#pack-careers-form .wpcf7-acceptance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
#pack-careers-form .wpcf7-acceptance input[type="checkbox"],
#pack-careers-form .cv-acceptance input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--brass);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
#pack-careers-form .cv-acceptance {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2, #2a3a52);
  padding: 8px 0;
}
#pack-careers-form .cv-acceptance a { color: var(--brass); text-decoration: underline; }
#pack-careers-form .wpcf7-response-output {
  margin-top: 20px !important;
  padding: 14px 18px !important;
  font-family: var(--sans);
  font-size: 14px;
  border-radius: 2px;
}

/* =========================================================================
   34. HEADER v2 — logo img + hamburger + mobile drawer (rebrand 2026-05-21)
   - Header bg es cream (rgba(251,250,246,0.86)) → logo NAVY transparent.
   - Footer bg es ink/navy → logo CREAM transparent (handled más abajo).
   ========================================================================= */

/* Brand: replace wordmark text with logo image */
.site-header .brand { display: inline-flex; align-items: center; line-height: 0; }
.site-header .brand picture,
.site-header .brand picture img,
.site-header .brand__img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 240px;
}
/* Legacy wordmark text — hide if anywhere still rendered */
.site-header .brand__text { display: none !important; }

/* Footer brand logo (cream sobre navy) */
.site-footer .footer__col--brand .brand { display: inline-block; line-height: 0; margin-bottom: 18px; }
.site-footer .footer__brand-img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 240px;
}
/* Hide any leftover wordmark text inside footer brand */
.site-footer .footer__col--brand .brand__text { display: none !important; }

/* Footer grid override: 3 columns instead of 4 */
.footer__grid--3col {
  grid-template-columns: 2.2fr 1fr 1fr !important;
}
@media (max-width: 800px) {
  .footer__grid--3col { grid-template-columns: 1fr 1fr !important; gap: 32px; }
  .footer__grid--3col .footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__grid--3col { grid-template-columns: 1fr !important; }
}

/* Header inner layout */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}

/* Hamburger button (mobile only by default) */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 10px;
  background-color: transparent;
  border: 1px solid rgba(10, 20, 40, 0.18);
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 1015;
  outline: none;
}
/* IMPORTANTE: reset.css de Hello Elementor pinta `button:focus/:hover` con
   background:#c36 (magenta) y color:#fff. Neutralizar en todos los estados. */
.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:active,
.nav-toggle:focus-visible {
  background-color: transparent !important;
  color: inherit !important;
  border-color: rgba(10, 20, 40, 0.18) !important;
  text-decoration: none !important;
  outline: none !important;
}
.nav-toggle__bar {
  display: block !important;
  width: 24px !important;
  height: 3px !important;
  min-height: 3px !important;
  /* Header bg es cream → barras navy para que se vean. Importantes para
     ganar a cualquier reset de pack que collapse spans (height:0). */
  background: #0a1428 !important;
  margin: 4px 0 !important;
  transition: transform .25s ease, opacity .2s ease, background .2s ease;
  border-radius: 1px;
  flex-shrink: 0;
}

/* =========================================================================
   34d. KILL the saturate(180%) on .site-header backdrop-filter
   - pack styles.css aplica `backdrop-filter: blur(22px) saturate(180%)`
     que sobre la foto del hero gris/verde produce un tinte violeta/morado
     en la franja del header. Bajamos saturate a 100% (neutral) y blur
     algo menor para que se vea menos "lavanda".
   ========================================================================= */
.site-header {
  backdrop-filter: blur(16px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(100%) !important;
}
.site-header.on {
  backdrop-filter: blur(14px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(100%) !important;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Two header-cta variants: desktop visible, mobile lives inside drawer */
.header-cta--mobile { display: none; }

/* Desktop ≥ 881px: classic horizontal nav + desktop CTA visible */
@media (min-width: 881px) {
  .nav-toggle { display: none; }
  .header-cta--mobile { display: none; }
  .header-cta--desktop { display: inline-flex; }
}

/* Mobile ≤ 880px: hide nav by default, show hamburger, drawer on open */
@media (max-width: 880px) {
  .site-header__inner { padding-block: 14px; }
  .site-header .brand picture img,
  .site-header .brand__img { height: 38px; max-width: 200px; }

  .nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }

  /* Desktop CTA hidden on mobile (we render a duplicate inside the drawer) */
  .header-cta--desktop { display: none !important; }

  /* Drawer container */
  .nav-main {
    position: fixed;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;
    background: var(--ink, #0a1428);
    color: var(--bone, #f5f0e4);
    padding: 88px 28px 32px;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    z-index: 1005;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-main ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-main li {
    border-bottom: 1px solid rgba(245, 240, 228, 0.08);
  }
  .nav-main a {
    display: block;
    padding: 16px 4px;
    color: var(--bone, #f5f0e4);
    font-family: var(--display, "Bricolage Grotesque", serif);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.005em;
  }
  .nav-main a:hover,
  .nav-main a:focus { color: var(--brass, #b8935a); }

  /* CTA inside drawer */
  .header-cta--mobile {
    display: inline-flex;
    margin-top: 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--brass, #b8935a);
    color: var(--ink, #0a1428);
    text-decoration: none;
    font-family: var(--mono, "JetBrains Mono", monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
  }
  .header-cta--mobile .arrow { font-family: var(--sans); font-weight: 400; }

  /* Open state via <html class="nav-open"> */
  html.nav-open { overflow: hidden; }
  html.nav-open .nav-main { transform: translateX(0); }

  /* CRITICAL: el header tiene backdrop-filter:blur(22px) que crea un stacking
     context. El drawer queda atrapado debajo del overlay y se ve borroso /
     inhabilitado. Cuando el drawer está abierto, kill backdrop-filter en
     header + bump z-index para que el drawer salga del trap. */
  html.nav-open .site-header {
    z-index: 1010 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
  }
  html.nav-open .site-header.on {
    background: transparent !important;
  }
  /* Brand fuera de vista mientras drawer está abierto */
  html.nav-open .site-header .brand { visibility: hidden; }
  /* Barras hamburguesa cream cuando drawer abierto (sobre fondo navy) */
  html.nav-open .nav-toggle__bar { background: var(--bone, #f5f0e4) !important; }
  html.nav-open .nav-toggle,
  html.nav-open .nav-toggle:hover,
  html.nav-open .nav-toggle:focus,
  html.nav-open .nav-toggle:active {
    background-color: transparent !important;
    border-color: rgba(245, 240, 228, 0.35) !important;
    color: inherit !important;
  }

  html.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 40, 0.55);
    z-index: 1000;
    animation: orozcoFade .25s ease;
  }
}
@keyframes orozcoFade { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================================
   34b. HUB-SPOKE v2 "Otras áreas" — padding mobile + max-width responsive
   ========================================================================= */
.pack-related-v2 {
  /* Inline tiene max-width:1140px;margin:0 auto pero sin padding lateral
     → en móvil se come los bordes. Forzamos box-sizing + padding. */
  box-sizing: border-box !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: clamp(20px, 5vw, 32px) !important;
  padding-right: clamp(20px, 5vw, 32px) !important;
}
@media (max-width: 720px) {
  /* H3 del bloque ocupa todo el ancho con tamaño grande → reducir + wrap */
  .pack-related-v2 h3 {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.18 !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Cards en una columna pero con padding interior algo más compacto */
  .pack-related-v2 ul.pack-related-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pack-related-v2 ul.pack-related-grid > li > a {
    padding: 20px 18px !important;
  }
  .pack-related-v2 ul.pack-related-grid > li > a > span:first-child {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}

/* =========================================================================
   34c. HOME H1 — clamp para que no se corte en mobile
   ========================================================================= */
@media (max-width: 720px) {
  .elementor-widget-heading.hero-h1 .elementor-heading-title,
  .elementor .hero-h1.elementor-heading-title,
  .elementor h1.elementor-heading-title {
    font-size: clamp(28px, 7.5vw, 44px) !important;
    line-height: 1.12 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }
}
@media (max-width: 480px) {
  .elementor-widget-heading.hero-h1 .elementor-heading-title {
    font-size: clamp(26px, 8vw, 38px) !important;
  }
}

/* =========================================================================
   35. ELEMENTOR CTA dual-button (Reservar consulta + Llamar) — mobile fix
   ========================================================================= */
/* Many service pages have a section "¿Necesita asesoramiento jurídico inmediato?"
   with 2 columns 50/50 carrying buttons. On mobile these get cramped + the
   "Llamar 952..." button has nested <a> markup. We force stacking + neutralise
   the nested anchor cosmetically. */
@media (max-width: 720px) {
  /* Force stack of inner sections that hold the two CTA columns */
  .elementor-section.elementor-inner-section .elementor-column.elementor-col-50 {
    width: 100% !important;
  }
  /* Pad the lower button so they don't visually collide */
  .elementor-section.elementor-inner-section .elementor-column + .elementor-column .elementor-widget-button {
    margin-top: 12px;
  }
}
/* Neutralise nested <a> inside button text so the whole tile is one tappable
   target. The outer button anchor still works as `tel:` link. */
.elementor-widget-button .elementor-button-text a[href^="tel:"] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
  font-weight: inherit !important;
}