/* =============================================================================
   OCAMPO 1890 — Style overrides over Bexton index-11 base
   =============================================================================
   Loaded AFTER `bexton-assets/css/main.css` to override Bexton's CSS variables
   without touching the original files.

   Maps Bexton's `--tj-*` custom properties to the OCAMPO 1890 palette and
   typography defined in `design.md`.

   Bexton uses: Mona Sans (one family) + a teal/dark palette.
   OCAMPO 1890 uses: Fraunces (display + headings) + DM Sans (body + UI) +
   Carmine/Onyx/Sea Salt palette.
   ========================================================================== */


/* ---------- Self-hosted fonts ---------------------------------------------- */

/* DM Sans — body and UI ("works") */
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/dm-sans/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/dm-sans/DMSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/dm-sans/DMSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/dm-sans/DMSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/dm-sans/DMSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/dm-sans/DMSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Fraunces — display and editorial accents ("speaks") */
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces/Fraunces-VariableFont_SOFT%2CWONK%2Copsz%2Cwght.ttf') format('truetype-variations'),
       url('/static/fonts/fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces/Fraunces-Italic-VariableFont_SOFT%2CWONK%2Copsz%2Cwght.ttf') format('truetype-variations'),
       url('/static/fonts/fraunces/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ---------- Override Bexton CSS variables --------------------------------- */

:root {
  /* Typography — "Fraunces speaks. DM Sans works." */
  --tj-ff-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --tj-ff-heading: 'Fraunces', Georgia, serif;

  /* Heading & text colors */
  --tj-color-heading-primary: #111111;                /* Onyx */
  --tj-color-text-body: #31373A;                      /* Gunmetal — body text */
  --tj-color-text-body-2: #878787;                    /* Battleship — muted */
  --tj-color-text-body-3: #878787;                    /* Battleship — secondary */
  --tj-color-text-body-4: #111111;                    /* Onyx — strong text */
  --tj-color-text-body-5: rgba(249, 249, 249, 0.80);  /* Sea Salt 80% on dark surfaces */

  /* Theme colors — Carmine is the brand accent */
  --tj-color-theme-primary: #B32436;                  /* Carmine */
  --tj-color-theme-bg: #F9F9F9;                       /* Sea Salt — light background */
  --tj-color-theme-bg-2: #FFFFFF;                     /* Surface — cards over Sea Salt */
  --tj-color-theme-bg-3: #373737;                     /* Jet — dark surface variant */
  --tj-color-theme-dark: #111111;                     /* Onyx */
  --tj-color-theme-dark-2: #373737;                   /* Jet */
  --tj-color-theme-dark-3: #31373A;                   /* Gunmetal */
  --tj-color-theme-dark-4: #878787;                   /* Battleship */
  --tj-color-theme-dark-5: #878787;                   /* Battleship */

  /* Neutrals */
  --tj-color-common-white: #FFFFFF;
  --tj-color-common-black: #111111;                   /* "Black" mapped to Onyx, not pure #000 */
  --tj-color-grey-1: #D7D7D7;                         /* Timberwolf */
  --tj-color-grey-2: #AFAFAF;                         /* Silver */
  --tj-color-grey-3: rgba(249, 249, 249, 0.10);

  /* Borders */
  --tj-color-border-1: #D7D7D7;                       /* Timberwolf */
  --tj-color-border-2: #373737;                       /* Jet */
  --tj-color-border-3: rgba(249, 249, 249, 0.15);
  --tj-color-border-4: rgba(249, 249, 249, 0.20);
  --tj-color-border-5: rgba(179, 36, 54, 0.15);       /* Carmine with alpha */

  /* Red signal stays a red signal (errors / required-field marker) */
  --tj-color-red-1: #B32436;                          /* Carmine doubles as red signal */
}


/* ---------- Belt-and-suspenders: reapply on the elements that read these ---- */
/* Some component CSS in Bexton sets font-family directly with the variable.
   These rules reinforce the application in case any selector hardcodes a
   family name instead of using the var. */

body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--tj-ff-body);
  color: var(--tj-color-text-body);
  background-color: var(--tj-color-theme-bg);
}

h1, h2, h3, h4, h5, h6,
.banner-title,
.section-title,
.tj-section-title,
.tj-heading {
  font-family: var(--tj-ff-heading);
  color: var(--tj-color-heading-primary);
}

a {
  color: var(--tj-color-theme-primary);
}
a:hover,
a:focus {
  color: var(--tj-color-theme-dark);
}


/* ---------- Selector-level overrides for hardcoded teal residues ---------- */
/* Bexton ships ~37 rules that literally write `rgb(12, 30, 33)` or
   `rgba(12, 30, 33, X)` (its dark-teal #0c1e21) instead of reading the
   --tj-color-theme-dark custom property. Variable overrides cannot reach
   those declarations; we have to redefine the rules selector by selector.
   Add an entry below the first time you see a teal residue in a new
   block, mirroring the original rule's geometry but pointing at the
   OCAMPO 1890 palette (typically `var(--tj-color-theme-dark)` = Onyx). */

/* Blog card image overlay (visible in the home's Blog Section). */
.blog-item.style-3 .blog-thumb::before {
  background: linear-gradient(0deg, var(--tj-color-theme-dark) 0%, rgba(17, 17, 17, 0) 100%);
}

/* Footer GILC badge: Bexton caps .award-logo at 96px which crushes the
   GILC horizontal mark to ~28px tall. Bump the container so the badge
   reads as a primary trust signal in the footer brand block. */
.award-logo-area .award-logo {
  max-width: 242px;
}


/* Numeralia (Bloque 2) — editorial flat treatment.
   Bexton's `.countup-item.style-2` ships a white card with border-radius,
   90px padding-top reserved for an icon, and text-align:start. That reads
   as SaaS dashboard, not boutique law firm. We bypass it entirely with our
   own classes — numbers float in whitespace, hairline rule between columns,
   centered. The .odometer/.countup-number spans stay so Bexton's JS still
   animates the count on scroll. */
.ocampo-numeralia-item {
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
}
@media (min-width: 992px) {
  .col-lg-3:not(:first-child) .ocampo-numeralia-item::before {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 1px;
    background-color: var(--tj-color-border-1);
  }
}
.ocampo-numeralia-number {
  font-family: var(--tj-ff-heading);
  font-weight: 400;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tj-color-theme-primary);
  margin-bottom: 0.75rem;
  white-space: nowrap;
}
.ocampo-numeralia-number .odometer {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  display: inline;
}
.ocampo-numeralia-number--plus::after {
  content: "+";
  font-family: inherit;
  font-weight: 400;
  font-size: 0.5em;
  color: inherit;
  margin-left: 0.05em;
  vertical-align: 0.55em;
}
.ocampo-numeralia-label {
  font-family: var(--tj-ff-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tj-color-text-body);
}


/* FAQ active state — Bexton's `.tj-faq.style-2 .accordion-item.active`
   paints the whole item Carmine with white title text. Combined with the
   white `border-bottom: 1px dashed` under the title and the circular
   `::after` indicator (white glyph on Carmine bg with Carmine border), the
   result reads as a weird white "notch" obscuring the title text. Swap
   the inversion for a subtle Sea Salt bg with Carmine-accented title +
   indicator — still marks "active" but keeps the title fully readable
   against any background bleed. */
.tj-faq.style-2 .accordion-item.active {
  background-color: var(--tj-color-theme-bg);
  border: 1px solid rgba(179, 36, 54, 0.15);
}
.tj-faq.style-2 .accordion-item.active .faq-title {
  color: var(--tj-color-theme-primary);
  border-color: rgba(179, 36, 54, 0.25);
}
.tj-faq.style-2 .accordion-item.active .faq-title::after {
  color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.tj-faq.style-2 .accordion-item.active .accordion-body p {
  color: var(--tj-color-text-body);
}


/* Reconocimientos (Bloque 8) — tj-award-* stack.
   Bexton's `.tj-award-wrapper` ships with a single `.active-bg` that fills
   the entire wrapper when ANY item is hovered — designed for a layout
   with a moving indicator (probably JS-positioned in the original demo).
   In our static stack of 4 items this paints all 4 cards Carmine while
   only the hovered card gets its text inverted to white → the other 3
   become unreadable. Fix:
     - Remove `<span class="active-bg">` from markup (this file: home.html)
     - Force per-item hover here: each card gets its own bg + text inversion
     - Set min-height on item-inner so all 4 cards match in height regardless
       of result-line length differences */
.tj-award-item {
  transition: background-color 0.4s ease;
}
.tj-award-item:hover {
  background-color: var(--tj-color-theme-primary);
}
.tj-award-item-inner {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
/* Bexton's `.tj-award-title-wrapper` only sets padding-inline-start: 40px
   but no flex-grow. Combined with `justify-content: space-between` on its
   parent, the title-wrapper hugs the right edge of the row and sizes to
   its content — so for cards with different result-line lengths, the
   title-wrapper width varies, which means the title text starts at a
   different X across cards. `flex: 1` makes the title-wrapper claim all
   remaining horizontal space after the logo, so the 40px left-padding
   aligns at the same X in every card and the titles read as a column. */
.tj-award-img-wrapper .tj-award-title-wrapper {
  flex: 1;
}


/* Servicios dual (Bloque 5) — RC 360 + P&C cards.
   Bexton's `.service-item` ships with an 80×80 icon circle filled with a
   teal gradient (rgba(30,138,138,...)) hardcoded — a residue of Bexton's
   original palette. We re-tint to Carmine and dial the icon down to a
   boutique 64×64. Also force `height: 100%` so the two cards match their
   col heights regardless of body-length differences. */
.h11-service .service-item {
  height: 100%;
  margin-bottom: 0;
}
.h11-service .service-item .service-icon {
  width: 64px;
  height: 64px;
  font-size: 32px;
  background: rgba(179, 36, 54, 0.08);
  border: 1px solid rgba(179, 36, 54, 0.15);
  margin-bottom: 24px;
}


/* ============================================================================
   Page header (tj-page-header) — full-bleed global.
   El header oscuro con breadcrumb se usa en ~18 páginas, siempre dentro de
   `.section-gap-x > .container`, lo que lo dejaba con gutters laterales. Lo
   rompemos del contenedor a ancho completo del viewport (edge-to-edge) y le
   quitamos el radius. Cambio ÚNICO = aplica a TODAS las páginas que lo usan,
   sin tocar las plantillas. (.container está centrado en el viewport, así que
   `calc(50% - 50vw)` alinea el borde izquierdo con el borde de la página.)
   ========================================================================== */
.tj-page-header {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  /* Imagen de fondo común a todas las páginas (antes inline por plantilla). */
  background-image: url('/static/images/home/hero/header-background.webp');
}
/* Tablet/mobile: more top room so the page title clears the (now flush-top)
   header and isn't cramped against the top edge of the background image.
   Bexton ships 60px here, too tight under the ~76px header on small screens. */
@media (max-width: 991px) {
  .tj-page-header {
    padding-top: 90px;
  }
}

/* ----------------------------------------------------------------------------
   Estilos migrados desde inline en las plantillas (mejor práctica: cero
   style="" en el HTML). Cada regla reemplaza un patrón que estaba repetido.
   -------------------------------------------------------------------------- */
.tj-page-header-wrap { padding-top: 32px; }              /* wrapper del page-header (×17) */
.site_logo .logo img { width: 180px; height: auto; }    /* logo del header (×4) */
.footer-logo img { width: 220px; height: auto; }        /* logo del footer */
.award-logo img { max-height: 160px; width: auto; }     /* badge GILC del footer */
.team-details__name { margin-bottom: 4px; }             /* nombre en perfiles (×8) */
.ocampo-accent { color: var(--tj-color-theme-primary); } /* texto acento carmín */

/* ============================================================================
   Hero (Bloque 1) — rediseño index-9 / propuesta Figma.
   Custom composition (NOT Bexton's h9-hero split): a single dark rounded
   card with header-background.webp as cover, Carmine accents, Fraunces title.
   Namespaced `ocampo-hero-*` so none of Bexton's h9/h11 banner rules apply.
   ========================================================================== */
.ocampo-hero {
  padding-top: 16px;
}
.ocampo-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--tj-color-theme-dark);   /* Onyx fallback under the image */
  isolation: isolate;
}
.ocampo-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: -2;
}
/* Dark wash heavier on the left so the title/lead stay legible over the
   building, fading toward the right where the architecture should read. */
.ocampo-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* warm Carmine glow on the lower-left (matches Figma's soft tint) */
    radial-gradient(58% 64% at 14% 56%,
      rgba(179, 36, 54, 0.24) 0%,
      rgba(179, 36, 54, 0.00) 60%),
    linear-gradient(100deg,
      rgba(17, 17, 17, 0.92) 0%,
      rgba(17, 17, 17, 0.70) 34%,
      rgba(17, 17, 17, 0.22) 64%,
      rgba(17, 17, 17, 0.00) 100%);
}
.ocampo-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(620px, 50vw, 900px);   /* match Figma card proportion (~1.8:1) */
  /* padding: top · right · bottom · left — left mayor para indentar el contenido (como Figma) */
  padding: clamp(120px, 10vw, 176px) clamp(28px, 4vw, 72px) clamp(40px, 4vw, 64px) clamp(28px, 8vw, 140px);
}
.ocampo-hero-title {
  /* Figma sets the big EN headline in the workhorse sans (DM Sans), keeping
     Fraunces serif as the editorial accent on the Spanish tagline below. */
  font-family: var(--tj-ff-body);
  font-weight: 400;
  color: var(--tj-color-common-white);
  font-size: clamp(2.75rem, 7.4vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;                 /* title pinned to top */
  max-width: 14ch;
}
.ocampo-hero-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 72px);
  max-width: 62%;            /* leave room for the framed image on the right */
  margin: auto 0;            /* center the tagline + lead in the middle band */
}
.ocampo-hero-tagline {
  flex: 0 0 auto;
  width: clamp(150px, 13vw, 200px);
  /* Fraunces serif as the editorial accent (matches Figma). */
  font-family: var(--tj-ff-heading);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--tj-color-text-body-5);
}
.ocampo-hero-rule {
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: 18px;
  background-color: var(--tj-color-theme-primary);
  box-shadow: 56px 0 0 -1px rgba(179, 36, 54, 0.45);   /* second shorter dash */
}
.ocampo-hero-lead {
  flex: 1 1 auto;
  max-width: 460px;
}
.ocampo-hero-lead p {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tj-color-text-body-5);
  margin-bottom: 28px;
}
.ocampo-hero-social {
  position: absolute;
  left: clamp(28px, 8vw, 140px);
  bottom: clamp(40px, 4vw, 64px);
  display: flex;
  gap: 12px;
}
.ocampo-hero-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tj-color-border-4);
  color: var(--tj-color-common-white);
  font-size: 15px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.ocampo-hero-social a:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.ocampo-hero-frame {
  position: absolute;
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(40px, 4vw, 64px);
  width: clamp(300px, 32%, 480px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.ocampo-hero-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablet / mobile: stack everything, let the framed image flow under. */
@media (max-width: 991px) {
  .ocampo-hero-inner {
    min-height: 0;
    padding-top: clamp(110px, 22vw, 140px);
  }
  .ocampo-hero-body {
    flex-direction: column;
    max-width: 100%;
    gap: 24px;
  }
  .ocampo-hero-tagline {
    width: 100%;
  }
  .ocampo-hero-social {
    position: static;
    margin-top: 32px;
  }
  .ocampo-hero-frame {
    position: static;
    width: 100%;
    max-width: 480px;
    margin-top: 32px;
  }
}


/* ----------------------------------------------------------------------------
   Header full-width (todas las páginas).
   Bexton entrega el header como "pill" flotante: width: calc(100% - 30px) +
   margin-inline 15px (.section-gap-x) + esquinas inferiores redondeadas (12px,
   en .header-area). Sobre los heros oscuros esas esquinas dejaban ver el fondo
   y quedaba raro. Lo llevamos a barra blanca de ancho completo, edge-to-edge y
   sin radius — tanto el header absoluto como el duplicado sticky.
   -------------------------------------------------------------------------- */
.h11-header.header-area {
  border-radius: 0;
}
.h11-header.header-area.header-1.header-absolute,
.h11-header.header-area.sticky {
  width: 100%;
  margin: 0;
}
/* Internal pages: the absolute header sits flush at the top so the page-header
   / banner background image stays BELOW the menu (no image strip peeking above
   it). The home keeps its 16px floating inset via the more-specific .page-home
   rule below. */
.h11-header.header-area.header-1.header-absolute {
  top: 0;
}

/* ----------------------------------------------------------------------------
   Header over the dark hero (home only).
   The header partial is shared site-wide, so every restyle here is scoped to
   `.page-home` AND to the floating `.header-absolute` (the sticky-on-scroll
   duplicate keeps its default light treatment). The dual <img> logo defaults
   to the dark variant everywhere; only the home's absolute header swaps to the
   white+carmine variant so it reads over the Onyx hero card.
   -------------------------------------------------------------------------- */
/* Drop the white pill background (`.header-area` + `.header-1 .header-wrapper`
   both ship `background-color: white`) so the header reads transparent over the
   dark hero. Nudge it down to clear the 16px card inset so the white logo/nav
   never land on the white sliver above the card. */
.page-home .header-area.header-1.header-absolute,
.page-home .header-area.header-1.header-absolute .header-wrapper {
  background-color: transparent;
}
.page-home .header-area.header-1.header-absolute {
  top: 16px;
}
.logo-light {
  display: none;
}
.page-home .header-area.header-absolute .logo-dark {
  display: none;
}
.page-home .header-area.header-absolute .logo-light {
  display: inline-block;
}
.page-home .header-area.header-absolute .mainmenu > ul > li > a {
  color: var(--tj-color-common-white);
}
.page-home .header-area.header-absolute .mainmenu > ul > li > a:hover {
  color: var(--tj-color-theme-primary);
}
.page-home .header-area.header-absolute .mainmenu > ul > li.has-dropdown > a::after {
  color: var(--tj-color-common-white);
}

/* ----------------------------------------------------------------------------
   Header actions (Figma): red "Asesoría" CTA pill.
   Third zone of the header-wrapper, so Bexton's `space-between` recenters the nav.
   -------------------------------------------------------------------------- */
.header-action {
  gap: 16px;
}
.ocampo-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 24px;
  border-radius: 50px;
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 0.3s ease;
}
.ocampo-cta:hover {
  background-color: var(--tj-color-theme-dark);
  color: var(--tj-color-common-white);
}
.ocampo-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-theme-primary);
  font-size: 12px;
}
.ocampo-cta-icon i {
  transform: rotate(-45deg);   /* tji-arrow-right -> points up-right (↗) */
}


/* ============================================================================
   Pilares (Bloque 3 — "Por qué OCAMPO") — rediseño index-9 / Figma.
   White cards on Sea Salt, Carmine icon circle (icons forced white via filter
   since the source SVGs ship mixed fills), no per-card link (matches Figma).
   Section eyebrow uses Fraunces serif; the title uses DM Sans — the designer's
   inverted pattern (serif accent, sans statement), so we override the global
   `h2 { font-family: Fraunces }` rule explicitly.
   ========================================================================== */
.ocampo-pilares {
  background-color: var(--tj-color-theme-bg);
}
.ocampo-section-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.ocampo-eyebrow {
  display: inline-block;
  font-family: var(--tj-ff-heading);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tj-color-theme-primary);
  margin-bottom: 16px;
}
.ocampo-section-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tj-color-heading-primary);
  max-width: 20ch;
  margin: 0 auto;
}
/* ----------------------------------------------------------------------------
   Párrafos editoriales (reemplazan estilos inline en las plantillas).
   .ocampo-lead  → intro/acento en Fraunces itálica carmín (ej. "El Arquitecto
                   del Legado"). .ocampo-prose → cuerpo de artículo (DM Sans
                   17px, interlínea holgada).
   Spacing de bios de equipo: el párrafo intro tras la designación y el párrafo
   que sigue a la lista de formación, antes resueltos con margin inline.
   -------------------------------------------------------------------------- */
.ocampo-lead {
  font-family: var(--tj-ff-heading);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--tj-color-theme-primary);
  margin: 4px 0 20px;
}
.ocampo-prose {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin: 0 0 24px;
}
.ocampo-prose:last-child {
  margin-bottom: 0;
}
.team-details__desig + p {
  margin-top: 24px;
}
.team-details__content .ocampo-aldo-list + p {
  margin-top: 16px;
}

.ocampo-pilar-card {
  height: 100%;
  background-color: var(--tj-color-theme-bg-2);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.4vw, 34px);
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.05);
}
.ocampo-pilar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  margin-bottom: 28px;
}
.ocampo-pilar-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* normalize mixed source fills to white */
}
.ocampo-pilar-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--tj-color-heading-primary);
  margin-bottom: 16px;
}
.ocampo-pilar-desc {
  font-family: var(--tj-ff-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--tj-color-text-body);
  margin: 0;
}


/* ============================================================================
   About (Bloque 4 — "Sobre nosotros") — image-left / content-right.
   ========================================================================== */
.ocampo-about-img img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}
.ocampo-about-title {
  text-align: left;
  max-width: none;
  margin: 16px 0 24px;
}
.ocampo-about-desc {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin-bottom: 36px;
  max-width: 62ch;
}
.ocampo-about-stats {
  display: flex;
  gap: 36px;
  border-top: 1px solid var(--tj-color-border-1);
  padding-top: 28px;
  margin-bottom: 36px;
}
.ocampo-stat {
  flex: 1;
}
.ocampo-stat + .ocampo-stat {
  padding-left: 36px;
  border-left: 1px solid var(--tj-color-border-1);
}
.ocampo-stat-number {
  font-family: var(--tj-ff-heading);
  font-weight: 400;
  color: var(--tj-color-theme-primary);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ocampo-stat-plus {
  font-size: 0.5em;
  vertical-align: 0.55em;
  margin-right: 0.02em;
}
.ocampo-stat-label {
  font-family: var(--tj-ff-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tj-color-text-body);
  margin-top: 14px;
}


/* ============================================================================
   About (Bloque 4) — fine-tune (feedback usuario)
   ========================================================================== */
/* 1) Título flush-left; desc + stats + botón indentados a la derecha (como Figma). */
.ocampo-about-desc,
.ocampo-about-stats,
.ocampo-about-btn {
  margin-left: clamp(0px, 14%, 116px);
}
/* 2) Stats: línea arriba Y abajo + labels más angostos (parten en más líneas). */
.ocampo-about-stats {
  border-bottom: 1px solid var(--tj-color-border-1);
  padding-bottom: 28px;
}
.ocampo-stat-label {
  max-width: 190px;
}
/* 3) Botón primario: círculo blanco + flecha carmín (Bexton trae Onyx + flecha blanca). */
.tj-primary-btn .btn-icon {
  background-color: var(--tj-color-common-white);
}
.tj-primary-btn .btn-icon i {
  color: var(--tj-color-theme-primary);
}
@media (max-width: 991px) {
  .ocampo-about-desc,
  .ocampo-about-stats,
  .ocampo-about-btn { margin-left: 0; }
}

/* ============================================================================
   Especialidades (Bloque 5) — bloque "Scalable business services" (h9-service)
   de Juan, con fondo Carmín (el template usaba verde/teal vía theme-dark).
   Imágenes = placeholder hasta que Juan pase las reales.
   ========================================================================== */
.ocampo-especialidades.h9-service {
  background-color: var(--tj-color-theme-dark);   /* negro/Onyx (diseño de Juan) */
  position: relative;
}
.ocampo-especialidades .container {
  position: relative;
  z-index: 1;
}
.ocampo-especialidades .sub-title {
  font-family: var(--tj-ff-heading);
  color: var(--tj-color-theme-primary);            /* eyebrow carmín sobre negro */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.ocampo-especialidades .sec-title,
.ocampo-especialidades.h9-service .sec-heading .sec-title {
  font-family: var(--tj-ff-body);
  color: var(--tj-color-common-white);
}
.ocampo-esp-rail-desc {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 18px 0 30px;
}
/* Cards charcoal sobre el negro (diseño de Juan) */
.ocampo-especialidades .service-item.style-5 {
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
}
.ocampo-especialidades .service-item .title,
.ocampo-especialidades .service-item .title a {
  font-family: var(--tj-ff-body);
  color: var(--tj-color-common-white);
}
.ocampo-especialidades .service-item .desc {
  color: rgba(255, 255, 255, 0.70);
}
.ocampo-especialidades .h9-service-nav i {
  color: var(--tj-color-common-white);
}
/* Ícono: círculo carmín relleno + glyph blanco, contenido (no glyph gigante suelto) */
.ocampo-especialidades .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
}
.ocampo-especialidades .service-icon i,
.ocampo-especialidades .service-icon .ocampo-icon {
  font-size: 26px;
  color: var(--tj-color-common-white);
}
/* Degradado/glow suave al pie del bloque (como el footer) */
.ocampo-especialidades::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 420px;
  background: radial-gradient(72% 100% at 50% 100%, rgba(249, 249, 249, 0.20) 0%, rgba(249, 249, 249, 0.07) 45%, rgba(249, 249, 249, 0) 80%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================================
   Metodologías (Bloque 6) — "Dos arquitecturas de servicio".
   Stack de cards (tj-service-section-5 / service-item style-5) de home-4,
   reestilado por Juan: card clara, contenido izq + imagen der, ícono carmín.
   Layout explícito para no depender del estilo dark del template.
   ========================================================================== */
.ocampo-metodologias .service-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ocampo-metodologias .service-item.style-5 {
  background-color: var(--tj-color-theme-bg-2);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.05);
}
.ocampo-metodologias .service-content-area {
  flex: 1 1 48%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 56px);
}
.ocampo-metodologias .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  margin-bottom: 36px;
}
.ocampo-metodologias .service-icon i,
.ocampo-metodologias .service-icon .ocampo-icon {
  font-size: 26px;
  color: var(--tj-color-common-white);
}
.ocampo-metodologias .service-content .no {
  display: block;
  font-family: var(--tj-ff-body);
  font-size: 0.95rem;
  color: var(--tj-color-text-body-2);
  margin-bottom: 8px;
}
.ocampo-metodologias .service-content .title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  line-height: 1.2;
  color: var(--tj-color-heading-primary);
  margin-bottom: 16px;
}
.ocampo-metodologias .service-content .title a { color: inherit; }
.ocampo-metodologias .service-content .desc {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tj-color-text-body);
  margin-bottom: 28px;
}
.ocampo-metodologias .service-img {
  flex: 1 1 44%;
  min-width: 300px;
}
.ocampo-metodologias .service-img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .ocampo-metodologias .service-item.style-5 { flex-direction: column; }
  .ocampo-metodologias .service-img img { min-height: 240px; }
}


/* ============================================================================
   Casos (Bloque 7 — Casos emblemáticos): narrative intro + cases list.
   ========================================================================== */
.ocampo-casos {
  background-color: var(--tj-color-theme-bg-2);   /* blanco (no el Sea Salt gris del body) */
}
/* Intro: 2 columnas — eyebrow+foto (izq) | título+historia (der) */
.ocampo-casos-intro {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: clamp(48px, 6vw, 88px);
  /* sin border-bottom: el Figma no tiene línea encima de "Casos que definen…" */
}
.ocampo-casos-intro-left {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 300px);
}
.ocampo-casos-intro-left .ocampo-eyebrow {
  display: block;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.ocampo-casos-history-img img {
  width: clamp(160px, 18vw, 256px);
  height: clamp(160px, 18vw, 256px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.ocampo-casos-intro-right {
  flex: 1;
}
.ocampo-casos-lead {
  text-align: left;
  max-width: 20ch;
  margin: 0 0 28px;
}
.ocampo-casos-history-text {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--tj-color-text-body);
  margin: 0;
}
.ocampo-casos-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.ocampo-casos-title {
  text-align: left;
  max-width: 16ch;
  margin: 0;
}
.ocampo-casos-list {
  display: flex;
  flex-direction: column;
}
.ocampo-caso-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding: 32px 0;
  border-top: 1px solid var(--tj-color-border-1);
  color: var(--tj-color-heading-primary);
  transition: color 0.3s ease;
}
.ocampo-caso-row:last-child {
  border-bottom: 1px solid var(--tj-color-border-1);
}
.ocampo-caso-row:hover {
  color: var(--tj-color-theme-primary);
}
.ocampo-caso-thumb {
  flex: 0 0 auto;
  width: 210px;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
}
.ocampo-caso-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Número: más grande, más separado y NEGRO (no gris) */
.ocampo-caso-index {
  flex: 0 0 auto;
  font-family: var(--tj-ff-body);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 500;
  color: var(--tj-color-heading-primary);
  min-width: 96px;
  text-align: center;
}
.ocampo-caso-body {
  flex: 1;
}
/* Tag: pill con borde, DM Sans gris (no serif carmín en mayúsculas) */
.ocampo-caso-tag {
  display: inline-block;
  font-family: var(--tj-ff-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tj-color-text-body-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 50px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
/* Título: más grande, wrap a ~3 líneas como el Figma */
.ocampo-caso-title {
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: inherit;
  margin: 0;
  max-width: 24ch;   /* angosto → wrap a ~3 líneas como el Figma */
}
/* Flecha plana (↗), sin círculo, como el Figma */
.ocampo-caso-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 20px;
}
.ocampo-caso-arrow i {
  transform: rotate(-45deg);
}
@media (max-width: 575px) {
  .ocampo-casos-intro { flex-direction: column; }
  .ocampo-casos-lead { max-width: none; }
  .ocampo-caso-thumb { display: none; }
}


/* ============================================================================
   Reconocimientos (Bloque 8) — 4 white cards, laurel icon, carmine footer line.
   ========================================================================== */
.ocampo-recon-card {
  height: 100%;
  background-color: var(--tj-color-theme-bg-2);
  border-radius: 16px;
  padding: clamp(28px, 2.6vw, 38px) clamp(24px, 2.2vw, 32px);
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.05);
}
.ocampo-recon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  margin-bottom: 26px;
}
.ocampo-recon-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.ocampo-recon-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--tj-color-heading-primary);
  margin-bottom: 14px;
}
.ocampo-recon-result {
  font-family: var(--tj-ff-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tj-color-text-body);
  margin-bottom: 18px;
}
.ocampo-recon-since {
  font-family: var(--tj-ff-heading);
  font-size: 0.85rem;
  color: var(--tj-color-theme-primary);
}


/* ============================================================================
   Miembros (Bloque 9) — dark section, header row + 4 portrait cards.
   ========================================================================== */
.ocampo-miembros {
  background-color: var(--tj-color-theme-dark);
}
.ocampo-miembros-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.ocampo-miembros-title {
  text-align: left;
  max-width: 14ch;
  margin: 16px 0 0;
  color: var(--tj-color-common-white);
}
.ocampo-miembro {
  position: relative;
}
.ocampo-miembro-img {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.ocampo-miembro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}
.ocampo-miembro:hover .ocampo-miembro-img img {
  transform: scale(1.04);
}
.ocampo-miembro-info {
  padding-top: 18px;
}
.ocampo-miembro-role {
  display: block;
  font-family: var(--tj-ff-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--tj-color-text-body-5);
  margin-bottom: 6px;
}
.ocampo-miembro-name {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  margin: 0;
}
.ocampo-miembro-name a {
  color: var(--tj-color-common-white);
}
.ocampo-miembro-name a:hover {
  color: var(--tj-color-theme-primary);
}

/* Equipo (/equipo, Figma 557-1746): la card .ocampo-miembro base es para fondo
   oscuro (texto blanco) con orden rol→nombre. Aquí va sobre fondo claro y con
   jerarquía nombre→rol (markup reordenado), así que se ajustan color y tamaño. */
.page-equipo .ocampo-miembro-info {
  padding-top: 16px;
}
.page-equipo .ocampo-miembro-name {
  font-size: 1.375rem;
  color: var(--tj-color-heading-primary);
  margin-bottom: 4px;
}
.page-equipo .ocampo-miembro-role {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--tj-color-text-body);
  margin-bottom: 0;
}
/* Nombre enlazado a la página del miembro (fondo claro → texto oscuro). */
.page-equipo .ocampo-miembro-name a {
  color: var(--tj-color-heading-primary);
}
.page-equipo .ocampo-miembro-name a:hover {
  color: var(--tj-color-theme-primary);
}

/* Miembros — carrusel Swiper: flechas prev/next (estilo Figma) */
.ocampo-miembros-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ocampo-miembros-nav {
  display: flex;
  gap: 10px;
}
.ocampo-miembros-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--tj-color-border-4);
  background-color: transparent;
  color: var(--tj-color-common-white);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.ocampo-miembros-arrow:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.ocampo-miembros-arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.ocampo-miembros-slider {
  overflow: hidden;
}
.ocampo-miembros-slider .swiper-slide {
  height: auto;
}

/* FAQ (Bloque 10) — ajustes Figma: título DM Sans + call-box oscura (no carmín) */
.faq-img-area .faq-img .title {
  font-family: var(--tj-ff-body);
}
.tj-faq-section .call-box {
  background-color: var(--tj-color-theme-dark);
}

/* ===========================================================================
   Clientes (Bloque 11) — banda Carmín full-width, marquee de logos
   (sangra por los bordes como el Figma; pausa al hover; respeta motion).
   NOTA: logocliente-ocampo1 (HDI) y -4 (La Latino) traen caja gris opaca;
   los otros 4 son blanco transparente. Pendiente versiones transparentes.
   =========================================================================== */
.ocampo-clientes {
  background-color: var(--tj-color-theme-primary);
  padding: clamp(40px, 5vw, 64px) 0;
  overflow: hidden;
}
.ocampo-clientes-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin: 0 0 clamp(28px, 3vw, 44px);
}
.ocampo-clientes-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ocampo-clientes-track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  width: max-content;
  animation: ocampo-marquee 38s linear infinite;
}
.ocampo-clientes-marquee:hover .ocampo-clientes-track {
  animation-play-state: paused;
}
@keyframes ocampo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ocampo-cliente {
  flex: 0 0 auto;
  width: clamp(170px, 16vw, 220px);
  height: clamp(84px, 8vw, 104px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 2vw, 28px);
  border-radius: 14px;
  background-color: rgba(249, 249, 249, .10);
}
.ocampo-cliente img {
  max-width: 100%;
  max-height: clamp(44px, 4.5vw, 60px);
  width: auto;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .ocampo-clientes-track { animation: none; }
}

/* ============================================================
   Error pages (404 / 500) — centered, sober composition on the
   Sea Salt background. Canon: DM Sans for the big code + title;
   Fraunces only on the eyebrow (sparse editorial accent). No JS
   reveal here — error pages must render even if scripts fail.
   ============================================================ */
.ocampo-error {
  min-height: 68vh;
  display: flex;
  align-items: center;
}
.ocampo-error-inner {
  max-width: 620px;
  margin-inline: auto;
}
.ocampo-error-code {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--tj-color-theme-primary);
  margin: clamp(8px, 1.5vw, 16px) 0 clamp(12px, 2vw, 20px);
}
.ocampo-error-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  color: var(--tj-color-heading-primary);
  margin: 0 0 clamp(12px, 2vw, 18px);
}
.ocampo-error-lead {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tj-color-text-body-2);
  margin: 0 auto clamp(28px, 4vw, 40px);
  max-width: 48ch;
}
.ocampo-error-lead a {
  color: var(--tj-color-theme-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ocampo-error-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* =============================================================================
   LEGAL TEXT PAGE — Aviso de Privacidad (and future long-form institutional text)
   ============================================================
   Canon:
     - DM Sans is the structural voice: headings, body, lists.
     - Fraunces appears only on the .ocampo-eyebrow (already defined above).
     - Narrow prose container for legibility; no marketing layout, no JS reveals.
   ============================================================ */

.ocampo-legal {
  background-color: var(--tj-color-theme-bg);
}

.ocampo-legal-inner {
  max-width: 768px;
  margin-inline: auto;
}

/* Page header */
.ocampo-legal-header {
  margin-bottom: 40px;
}

.ocampo-legal-header .ocampo-eyebrow {
  display: block;
  margin-bottom: 16px;
}

.ocampo-legal-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tj-color-heading-primary);
  margin: 0 0 8px;
}

.ocampo-legal-subtitle {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tj-color-text-body-2);
  margin: 0;
}

/* Body text rhythm */
.ocampo-legal-body {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--tj-color-text-body);
}

.ocampo-legal-body h2 {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--tj-color-heading-primary);
  margin: 40px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--tj-color-border-1);
}

.ocampo-legal-body h2:first-child {
  border-top: none;
  margin-top: 0;
}

.ocampo-legal-body h3 {
  font-family: var(--tj-ff-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--tj-color-heading-primary);
  margin: 24px 0 8px;
}

.ocampo-legal-body p {
  margin: 0 0 16px;
}

.ocampo-legal-body ul,
.ocampo-legal-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.ocampo-legal-body li {
  margin-bottom: 6px;
}

.ocampo-legal-body a {
  color: var(--tj-color-theme-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}

.ocampo-legal-body a:hover {
  color: #8E1B2B; /* Carmine 600 — hover state per design.md */
}

/* Bottom metadata area (fecha / responsable) */
.ocampo-legal-meta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--tj-color-border-1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ─────────────────────────────────────────────────────────────
   BROCHURE PAGE — RC 360°
   /brochure
   Typography canon:
     DM Sans  → structural (headings, body, UI)
     Fraunces → editorial accent ONLY (eyebrows via .ocampo-eyebrow,
                pilar taglines via .ocampo-rc-pilar-tagline)
   Tokens: --tj-* variables only; no hardcoded hex except where a
           specific Carmine shade is needed for hover states.
───────────────────────────────────────────────────────────── */

/* ── Hero / Intro ── */
/* Subtitle tagline — Fraunces as editorial accent (per canon) */
.ocampo-brochure-tagline {
  font-family: var(--tj-ff-heading); /* Fraunces — sparse editorial accent */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* quote-display range */
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--tj-color-heading-primary);
  margin: 0 0 40px;
}

.ocampo-brochure-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ocampo-brochure-intro p {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem; /* body-lg ~17px */
  font-weight: 400;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin: 0;
}

/* ── Pilares section wrapper ── */
.ocampo-brochure-pilares {
  background-color: var(--tj-color-theme-bg-2);
}

/* 2-column on desktop (≥992px), 1-column on mobile */
.ocampo-brochure-pilares-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}

/* RC pilar card — extends .ocampo-pilar-card layout; adds number + tagline */
.ocampo-rc-pilar-card {
  position: relative;
  padding-top: 56px; /* room for the number badge */
}

.ocampo-rc-pilar-num {
  display: block;
  font-family: var(--tj-ff-body); /* DM Sans — structural; number is UI element */
  font-size: 2.5rem; /* display-md */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tj-color-theme-primary); /* Carmine */
  margin-bottom: 12px;
}

.ocampo-rc-pilar-title {
  font-family: var(--tj-ff-body); /* DM Sans — structural heading */
  font-size: 1.125rem; /* body-lg / heading-sm */
  font-weight: 500;
  line-height: 1.35;
  color: var(--tj-color-heading-primary);
  margin: 0 0 10px;
}

/* Pilar tagline — Fraunces italic as editorial accent (per canon) */
.ocampo-rc-pilar-tagline {
  font-family: var(--tj-ff-heading); /* Fraunces — sparse editorial accent */
  font-size: 0.9375rem; /* body-sm/md bridge */
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tj-color-text-body-2);
  margin: 0 0 16px;
}

/* ── Closing band ── */
.ocampo-brochure-closing {
  background-color: var(--tj-color-theme-bg);
  border-top: 1px solid var(--tj-color-border-1);
}

.ocampo-brochure-closing-title {
  font-family: var(--tj-ff-body); /* DM Sans — structural section heading */
  font-size: clamp(1.75rem, 3vw, 2.5rem); /* heading-xl / display-sm */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tj-color-heading-primary);
  margin: 0 0 24px;
}

.ocampo-brochure-closing-body {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin: 0 0 40px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .ocampo-brochure-pilares-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ocampo-rc-pilar-card {
    padding-top: 40px;
  }
}

@media (max-width: 767px) {
  .ocampo-brochure-pilares-grid {
    margin-top: 40px;
  }
}

/* ── Capacidades 360° — full-brochure extensions ── */

/* Cover */
.ocampo-brochure-lead {
  font-family: var(--tj-ff-body);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tj-color-text-body);
  margin: 0 auto 28px;
  max-width: 44ch;
}
.ocampo-brochure-practices {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tj-color-heading-primary);
  margin: 0 0 12px;
}
.ocampo-brochure-rankings {
  font-family: var(--tj-ff-heading); /* Fraunces — sparse editorial accent */
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tj-color-text-body-2);
  margin: 0;
}

/* Lead-in + índice */
.ocampo-brochure-leadin {
  background-color: var(--tj-color-theme-bg);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.ocampo-brochure-leadin-title {
  font-family: var(--tj-ff-body);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--tj-color-heading-primary);
  margin: 0 0 20px;
}
.ocampo-brochure-leadin-body {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin: 0 0 48px;
}
.ocampo-indice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.ocampo-indice-card {
  display: block;
  padding: 28px 24px;
  background-color: var(--tj-color-theme-bg-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}
.ocampo-indice-card:hover {
  border-color: var(--tj-color-theme-primary);
  transform: translateY(-3px);
}
.ocampo-indice-num {
  display: block;
  font-family: var(--tj-ff-body);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--tj-color-theme-primary);
  margin-bottom: 10px;
}
.ocampo-indice-title {
  font-family: var(--tj-ff-body);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--tj-color-heading-primary);
  margin: 0 0 8px;
}
.ocampo-indice-desc {
  font-family: var(--tj-ff-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tj-color-text-body-2);
  margin: 0;
}
.ocampo-brochure-quote {
  font-family: var(--tj-ff-heading); /* Fraunces — pull-quote accent */
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.4;
  color: var(--tj-color-heading-primary);
  border-left: 3px solid var(--tj-color-theme-primary);
  padding-left: 24px;
  margin: 0;
}

/* Section headers (01 / 02 / 03) */
.ocampo-brochure-section {
  border-top: 1px solid var(--tj-color-border-1);
}
.ocampo-brochure-section-head {
  margin-bottom: 40px;
}
/* The global .ocampo-section-title is centered (margin: 0 auto + max-width: 20ch)
   for use inside text-center columns (home). Inside the brochure section head the
   numeral, eyebrow and tagline are left-aligned, so the title must be too —
   otherwise short titles look centered and long ones drift right. */
.ocampo-brochure-section-head .ocampo-section-title {
  max-width: none;
  margin: 0;
}
.ocampo-brochure-section-num {
  display: block;
  font-family: var(--tj-ff-body);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tj-color-grey-1); /* faint Timberwolf big number */
  margin-bottom: 4px;
}
.ocampo-brochure-pilares-heading,
.ocampo-brochure-subhead {
  font-family: var(--tj-ff-body);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--tj-color-heading-primary);
  margin: 56px 0 24px;
}
.ocampo-brochure-section-close {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin: 48px 0 0;
  max-width: 70ch;
}

/* Riesgos list (2-col) */
.ocampo-riesgos-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
.ocampo-riesgos-list li {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tj-color-text-body);
  padding-left: 18px;
  position: relative;
}
.ocampo-riesgos-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
}

/* Por qué (3-col) */
.ocampo-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ocampo-why-item {
  padding: 24px;
  background-color: var(--tj-color-theme-bg-2);
  border-radius: 12px;
  border: 1px solid var(--tj-color-border-1);
}
.ocampo-why-title {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--tj-color-heading-primary);
  margin: 0 0 10px;
}
.ocampo-why-item p {
  font-family: var(--tj-ff-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tj-color-text-body);
  margin: 0;
}

/* Record highlight (5 meses y 21 días) */
.ocampo-record {
  margin: 40px 0;
  padding: 32px;
  background-color: var(--tj-color-theme-dark); /* Onyx */
  border-radius: 12px;
}
.ocampo-record-num {
  display: block;
  font-family: var(--tj-ff-body);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tj-color-theme-primary); /* Carmine */
  margin-bottom: 12px;
}
.ocampo-record-desc {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tj-color-text-body-5); /* Sea Salt 80% on dark */
  margin: 0;
  max-width: 60ch;
}

/* Capacidades (I / II / III) */
.ocampo-cap-block {
  margin-top: 8px;
}
.ocampo-cap-intro {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin: 0 0 20px;
  max-width: 72ch;
}
.ocampo-cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}
.ocampo-cap-list li {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tj-color-text-body);
  padding-left: 16px;
  border-left: 2px solid var(--tj-color-border-1);
}
.ocampo-cap-list li strong {
  color: var(--tj-color-heading-primary);
  font-weight: 500;
}

/* Contacto (Hablemos) */
.ocampo-brochure-contact {
  background-color: var(--tj-color-theme-bg);
  border-top: 1px solid var(--tj-color-border-1);
}
.ocampo-brochure-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.ocampo-brochure-contact-list li {
  font-family: var(--tj-ff-body);
  font-size: 1.0625rem;
  color: var(--tj-color-text-body);
}
.ocampo-brochure-contact-list li span {
  display: inline-block;
  min-width: 92px;
  font-weight: 500;
  color: var(--tj-color-text-body-2);
}
.ocampo-brochure-contact-list a {
  color: var(--tj-color-theme-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ocampo-brochure-gilc {
  font-family: var(--tj-ff-heading); /* Fraunces accent */
  font-style: italic;
  font-size: 1rem;
  color: var(--tj-color-text-body-2);
  margin: 0 0 32px;
}

/* Responsive — full brochure */
@media (max-width: 991px) {
  .ocampo-indice,
  .ocampo-why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ocampo-riesgos-list,
  .ocampo-cap-list {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   PAGES: /equipo  +  /equipo/aldo-ocampo
   Added 2026-06-15. Minimal additions only — cards,
   group headings, and profile helpers. All card markup
   reuses .ocampo-miembro from home (no redefinition).
   ═══════════════════════════════════════════════════ */

/* Group heading inside each hub section */
.ocampo-equipo-grupo-head {
  margin-bottom: 32px;
}
.ocampo-equipo-grupo-title {
  margin-top: 8px;
  margin-bottom: 0;
}

/* In-memoriam variant — muted name, no link affordance */
.ocampo-miembro--memoriam .ocampo-miembro-name {
  color: var(--tj-color-text-body-2);
}

/* Aldo profile — simple two-column list for formación/docencia */
.ocampo-aldo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ocampo-aldo-list li {
  font-family: var(--tj-ff-body);
  font-size: 1rem;
  color: var(--tj-color-text-body);
  line-height: 1.5;
}

/* Aldo profile — CTA area */
.ocampo-aldo-cta {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px 48px;
  background: var(--tj-color-theme-dark);
  border-radius: 12px;
  flex-wrap: wrap;
}
.ocampo-aldo-cta__lead {
  flex: 1;
  font-family: var(--tj-ff-body);
  font-size: 1.125rem;
  color: var(--tj-color-common-white);
  margin: 0;
}
@media (max-width: 767px) {
  .ocampo-aldo-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }
}

/* ============================================================================
   FIRMA (/firma) — Quiénes somos. Rediseño Figma (node 455-1247).
   Principio: el grueso del estilo lo pone Bexton (main.css) vía sus clases
   (ocampo-hero ya existente, h10-process, tj-cta-section/cta-area). Aquí solo
   van los "pequeños ajustes" que el template no trae.
   ========================================================================== */

/* Variante left para títulos de sección que NO van centrados
   (el default trae margin: 0 auto, que centra el bloque). */
.ocampo-section-title--left {
  margin-left: 0;
  margin-right: 0;
  max-width: 26ch;
}

/* Header transparente sobre el hero oscuro — mismo tratamiento que .page-home
   (que es la única "cosa chica" que ocampo.css le agrega al header del template). */
.page-firma .header-area.header-1.header-absolute,
.page-firma .header-area.header-1.header-absolute .header-wrapper {
  background-color: transparent;
}
.page-firma .header-area.header-1.header-absolute {
  top: 16px;
}
.page-firma .header-area.header-absolute .logo-dark { display: none; }
.page-firma .header-area.header-absolute .logo-light { display: inline-block; }
.page-firma .header-area.header-absolute .mainmenu > ul > li > a { color: var(--tj-color-common-white); }
.page-firma .header-area.header-absolute .mainmenu > ul > li > a:hover { color: var(--tj-color-theme-primary); }
.page-firma .header-area.header-absolute .mainmenu > ul > li.has-dropdown > a::after { color: var(--tj-color-common-white); }

/* Hero — el headline de Firma es una frase larga (no el lockup corto del home),
   así que baja de escala y ensancha la medida para que respire. */
.page-firma .ocampo-hero-title {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.05;
  max-width: 22ch;
}

/* ¿Quiénes somos? — el home indenta desc+botón a la derecha; en Firma van
   alineados con el título (sin sangría). */
.page-firma .ocampo-about-desc,
.page-firma .ocampo-about-btn {
  margin-left: 0;
}

/* Por qué nosotros — recuadro blanco: eyebrow + statement a lo ancho + CTA.
   No existe en Bexton; lo arma ocampo.css. */
.ocampo-porque-box {
  background-color: var(--tj-color-common-white);
  border-radius: 24px;
  padding: clamp(36px, 4.5vw, 72px);
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.05);
}
.ocampo-porque-box .ocampo-eyebrow {
  margin-bottom: 20px;
}
.ocampo-porque-text {
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 2.125rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--tj-color-heading-primary);
  margin: 0;
}
.ocampo-porque-btn {
  margin-top: 28px;
}

/* Lo que nos caracteriza — bloque h10-process de Bexton (index-10), recoloreado.
   Cambios: sección Onyx→Carmine; cards en rojo muy transparente (no el gris Jet);
   sin el número/badge negro (quitado del markup) → menos padding-top; texto blanco. */
.h10-process {
  background-color: var(--tj-color-theme-primary);
}
.h10-process-wrapper .h10-process-item {
  background-color: rgba(255, 255, 255, 0.08);
  padding-top: 40px;
}
.h10-process-wrapper .h10-process-item .desc {
  color: rgba(255, 255, 255, 0.88);
}

/* CTA pre-footer — cta-area nativa de Bexton (content 50% + img 50%). La imagen
   img-footer.png ya trae el degradado integrado (como cta-bg.webp en index.html),
   así que NO hace falta CSS de degradado. Acá sólo: fondo oscuro para continuar
   con el footer Onyx, y el solape (margin-bottom) un poco mayor que el -195 nativo. */
/* CTA pre-footer REUTILIZABLE (drop-in en cualquier página vía {% include %}).
   Transparente (como index.html): el card flota con el fondo claro arriba y se
   SUPERPONE al footer oscuro abajo (straddle). El aire de arriba y el solape de
   abajo viven en el propio bloque, así no depende de la sección anterior. */
.tj-cta-section {
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: -180px;
}
/* El footer recibe el card superpuesto SÓLO cuando el CTA está presente, en
   cualquier página: las páginas sin CTA conservan su padding-top normal.
   (main y footer son hermanos adyacentes en #smooth-content — ver base.html). */
.site-main:has(.tj-cta-section) + .tj-footer-section.footer-2 {
  padding-top: clamp(140px, 13vw, 190px);
}
/* Firma: acorta el padding oscuro de socios para que el aire previo al card
   sea limpio (el resto de páginas usan su propio espaciado de sección). */
.page-firma .ocampo-miembros {
  padding-bottom: clamp(40px, 4.5vw, 64px);
}
/* Sólo la imagen: img-footer.png (rojo+degradado+apretón integrados) cubre TODO
   el card; quitamos el Carmine sólido de .cta-area y el texto se superpone a la
   izquierda. Sin costura entre color-sólido e imagen. */
@media (min-width: 992px) {
  .tj-cta-section .cta-area {
    background-color: transparent;
  }
  .tj-cta-section .cta-area .cta-img {
    position: absolute;
    inset: 0;
    width: 100%;
  }
  .tj-cta-section .cta-area .cta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .tj-cta-section .cta-area .cta-content {
    position: relative;
    z-index: 2;
  }
}

/* ============================================================================
   NOSOTROS (/nosotros) — Nuestra Trayectoria. Elementos Bexton casi sin tocar
   (tj-page-header, timeline de history.html, project-item). Sólo 2 ajustes:
   ========================================================================== */
/* Timeline: usamos 1 imagen por hito (el de Bexton trae 2 en grid de 2 col);
   a 1 columna para que la imagen ocupe el ancho de la card. */
.page-nosotros .timeline-inner .content .bottom {
  grid-template-columns: 1fr;
}
/* Casos: cards de texto (.ocampo-pilar-card, título + descripción), sin imágenes
   — usa estilos existentes, sin CSS propio. */

/* ============================================================================
   INDUSTRIAS (/industrias). Reusa ocampo-about (hero/casos), el slider de
   miembros para las 12 industrias y tj-marquee-section. Ajustes mínimos:
   ========================================================================== */
.ocampo-industrias-slider {
  overflow: hidden;
}
.ocampo-industrias-slider .swiper-slide {
  height: auto;
}
/* Hero: la "imagen" es placeholder de un video; va más baja que el panel de
   contenido (no a altura completa) y centrada verticalmente. */
.page-industrias .banner-right-box {
  align-self: center;
}
.page-industrias .banner-img {
  height: clamp(340px, 34vw, 480px);
}
/* Card de industria (Figma node 474-857): pill "Industria" + número + nombre +
   botón circular con flecha diagonal, e imagen grande abajo. Bexton no tiene un
   card con esta composición (su .project-item es imagen-arriba), así que es
   custom — reutiliza tokens de color/tipografía. */
.ocampo-ind-card {
  height: 100%;
  background-color: var(--tj-color-common-white);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  padding: 24px;
}
.ocampo-ind-card-head {
  position: relative;
  padding-right: 56px;
  margin-bottom: 20px;
}
.ocampo-ind-card-tag {
  display: inline-block;
  font-family: var(--tj-ff-heading);
  font-size: 0.875rem;
  line-height: 1.04;
  color: var(--tj-color-text-body);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 1000px;
  padding: 4px 14px 5px;
  margin-bottom: 18px;
}
.ocampo-ind-card-num,
.ocampo-ind-card-name {
  display: block;
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--tj-color-heading-primary);
  margin: 0;
}
.ocampo-ind-card-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--tj-color-theme-primary);
  color: var(--tj-color-theme-primary);
  font-size: 0.8rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ocampo-ind-card-arrow i {
  transform: rotate(-45deg);
}
.ocampo-ind-card:hover .ocampo-ind-card-arrow {
  background-color: var(--tj-color-theme-primary);
  color: #fff;
}
.ocampo-ind-card-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.ocampo-ind-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ocampo-ind-card:hover .ocampo-ind-card-img img {
  transform: scale(1.05);
}

/* Affordances de carrusel: flechas a los lados + dots abajo. Los dots reusan
   .swiper-pagination-bullet de Bexton; sólo se ajusta el estado activo. */
.ocampo-ind-slider-wrap {
  position: relative;
}
.ocampo-ind-nav {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--tj-color-border-1);
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.1);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ocampo-ind-nav:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
  color: #fff;
}
.ocampo-ind-prev {
  left: -10px;
}
.ocampo-ind-next {
  right: -10px;
}
@media (max-width: 767px) {
  .ocampo-ind-nav {
    display: none;
  }
}

/* ===========================================================================
   Service detail pages (svc-*) — RC 360, Property & Casualty, …
   Two-column layout: content + sticky services sidebar (Bexton scaffold:
   .tj-main-sidebar + .tj-sidebar-widget + .widget-nav-menu), stacked pillars,
   emblematic cases grid. Shared across all /servicios/* pages.
   =========================================================================== */

/* --- Content column --- */
.svc-content {
  max-width: 760px;
}
.svc-content-img {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.svc-content-img img {
  width: 100%;
  height: auto;
  display: block;
}
.svc-lead-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tj-color-heading-primary);
  margin-bottom: 24px;
}
.svc-lead p {
  color: var(--tj-color-text-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 18px;
}
.svc-lead p:last-child {
  margin-bottom: 0;
}
.svc-lead strong {
  color: var(--tj-color-heading-primary);
  font-weight: 600;
}
.svc-subtitle {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--tj-color-heading-primary);
  margin: clamp(40px, 4.5vw, 56px) 0 24px;
}

/* --- ¿Para quién? check list --- */
.svc-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-check-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 16px;
  color: var(--tj-color-text-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.svc-check-list li:last-child {
  margin-bottom: 0;
}
.svc-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
}
.svc-check-list li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.svc-check-list strong {
  color: var(--tj-color-heading-primary);
  font-weight: 600;
}

/* --- Pillars (stacked) --- */
.svc-pilar {
  padding-bottom: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--tj-color-border-1);
}
.svc-pilar:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.svc-pilar-num {
  display: inline-block;
  font-family: var(--tj-ff-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--tj-color-theme-primary);
  margin-bottom: 8px;
}
.svc-pilar-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--tj-color-theme-primary);
  margin-bottom: 8px;
}
.svc-pilar-tagline {
  font-family: var(--tj-ff-heading);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--tj-color-text-body-2);
  margin-bottom: 18px;
}
.svc-pilar-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tj-color-text-body);
  margin-bottom: 18px;
}
.svc-pilar-lead strong {
  color: var(--tj-color-heading-primary);
  font-weight: 600;
}
.svc-pilar-note {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tj-color-text-body-2);
  margin: 16px 0 0;
}
.svc-pilar-note strong {
  color: var(--tj-color-theme-primary);
  font-weight: 600;
}
.svc-pilar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-pilar-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  color: var(--tj-color-text-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.svc-pilar-list li:last-child {
  margin-bottom: 0;
}
.svc-pilar-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
}
.svc-pilar-list strong {
  color: var(--tj-color-heading-primary);
  font-weight: 600;
}

/* --- Sidebar: Bexton scaffold (.tj-main-sidebar + .tj-sidebar-widget +
   .widget-nav-menu) supplies the shell, title, bg, padding and radius.
   Only the brand-specific bits live here. --- */
.svc-sidebar {
  position: sticky;
  top: 110px;
}

/* Render the Bexton nav-menu as filled service pills with a carmine active
   state. Bexton's stock nav-menu is plain text links, so this brand override
   is scoped to .page-rc360 — every other page keeps the template default. */
.svc-sidebar .widget-nav-menu {
  padding-inline-start: 0;
}
.svc-sidebar .widget-nav-menu ul li {
  padding: 0;
  margin-bottom: 8px;
}
.svc-sidebar .widget-nav-menu ul li:last-child {
  margin-bottom: 0;
}
.svc-sidebar .widget-nav-menu ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-text-body-4);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.svc-sidebar .widget-nav-menu ul li a i {
  flex-shrink: 0;
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}
.svc-sidebar .widget-nav-menu ul li a:hover {
  background-color: var(--tj-color-theme-primary);
  color: #fff;
  transform: translateX(0);
}
.svc-sidebar .widget-nav-menu ul li a:hover i {
  transform: translateX(3px);
}
.svc-sidebar .widget-nav-menu ul li.active a {
  background-color: var(--tj-color-theme-primary);
  color: #fff;
}

/* --- Contact card --- */
.svc-contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 28px 24px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-image: url('/static/images/rc360/img-contacto.webp');  /* antes inline (×2) */
  color: #fff;
  isolation: isolate;
}
.svc-contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(179, 36, 54, 0.12) 0%, rgba(179, 36, 54, 0.92) 100%);
  z-index: -1;
}
.svc-contact-eyebrow {
  font-family: var(--tj-ff-heading);
  font-style: italic;
  font-size: 1rem;
  opacity: 0.92;
  margin-bottom: 6px;
}
.svc-contact-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.75rem;
  color: #fff;
  margin-bottom: 16px;
}
.svc-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
}
.svc-contact-btn i {
  transition: transform 0.25s ease;
}
.svc-contact-card:hover .svc-contact-btn i {
  transform: translateX(4px);
}

/* --- Emblematic cases --- */
.svc-casos {
  background-color: var(--tj-color-theme-bg);
}
.svc-casos-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.svc-casos-head .ocampo-section-title {
  margin-top: 4px;
}
.svc-casos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.svc-caso-card {
  display: flex;
  flex-direction: column;
  background-color: var(--tj-color-theme-bg-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-caso-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.1);
}
.svc-caso-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.svc-caso-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.svc-caso-card:hover .svc-caso-img img {
  transform: scale(1.05);
}
.svc-caso-body {
  flex: 1;
  padding: 22px 22px 14px;
}
.svc-caso-tag {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--tj-color-theme-primary);
  margin-bottom: 10px;
}
.svc-caso-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--tj-color-heading-primary);
  margin-bottom: 8px;
}
.svc-caso-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tj-color-text-body-2);
  margin: 0;
}
.svc-caso-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 22px 22px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  color: #fff;
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}
.svc-caso-card:hover .svc-caso-arrow {
  transform: translateX(4px);
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .svc-content {
    max-width: none;
  }
  .svc-sidebar {
    position: static;
    margin-top: 48px;
  }
  .svc-casos-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .svc-casos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .svc-casos-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Contacto (/contacto) — 4 cards de info con ícono (Figma node 562-1103).
   Sin formulario (regla del cliente). El mapa reusa .map-area de Bexton; sólo
   se le fija altura. Bexton no tiene una card centrada con ícono en círculo,
   así que las cards son custom (reusan tokens).
   =========================================================================== */
.ocampo-contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: clamp(32px, 4vw, 52px);
}
.ocampo-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  background-color: var(--tj-color-theme-bg-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ocampo-contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.08);
}
.ocampo-contact-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 22px;
}
.ocampo-contact-card-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--tj-color-heading-primary);
  margin-bottom: 12px;
}
.ocampo-contact-card-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tj-color-text-body-2);
  margin: 0;
  transition: color 0.25s ease;
}
.ocampo-contact-card:hover .ocampo-contact-card-text {
  color: var(--tj-color-text-body);
}

/* Mapa: .map-area (Bexton) da radius/overflow; aquí sólo la altura. */
.ocampo-contact-map {
  height: 460px;
}

@media (max-width: 991px) {
  .ocampo-contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .ocampo-contact-cards {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Equipo — perfil de socio (/equipo/aldo-ocampo, Figma 558-927)
   Portrait sticky + columna de contenido. Reusa Bexton (team-details,
   team-details__contact-info, social-links, team-details__experience);
   sólo ajustes de fondo claro y layout.
   =========================================================================== */
.page-equipo-detail .aldo-portrait {
  position: sticky;
  top: 110px;
}
.page-equipo-detail .team-details__contact-info {
  margin-top: 24px;
}
.page-equipo-detail .aldo-block {
  margin-top: clamp(32px, 3.5vw, 48px);
}
.page-equipo-detail .aldo-block .ocampo-eyebrow {
  margin-bottom: 8px;
}
.page-equipo-detail .aldo-block-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--tj-color-heading-primary);
  margin: 0 0 16px;
}
/* Lista con flecha (distinciones / formación / docencia) */
.page-equipo-detail .ocampo-aldo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.page-equipo-detail .ocampo-aldo-list li i {
  color: var(--tj-color-theme-primary);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 4px;
}
@media (max-width: 991px) {
  .page-equipo-detail .aldo-portrait {
    position: static;
  }
}

/* ===========================================================================
   Alianza Internacional (/alianza-internacional, Figma 532-631)
   GILC: intro con círculo del logo + 3 cards de valor (reusan .ocampo-why-grid).
   =========================================================================== */
.alianza-circle {
  width: 256px;
  max-width: 100%;
  aspect-ratio: 1;
  margin-top: 24px;
  border-radius: 50%;
  overflow: hidden;
}
.alianza-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.alianza-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--tj-color-heading-primary);
  margin-bottom: 18px;
}
.alianza-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--tj-color-theme-primary);
}
.alianza-link i {
  transition: transform 0.25s ease;
}
.alianza-link:hover i {
  transform: translateX(4px);
}
.ocampo-why-icon {
  display: inline-flex;
  font-size: 2.25rem;
  color: var(--tj-color-theme-primary);
  margin-bottom: 20px;
}

/* ===========================================================================
   Reconocimientos Internacionales (/reconocimientos, Figma 547-1328)
   Hero editorial (foto + círculo) + filas de reconocimiento; la distinción más
   alta va destacada en carmín. Logos oficiales de directorios: pendientes.
   =========================================================================== */
.ocampo-recon-hero-title {
  margin: 12px 0 20px;
}
.ocampo-recon-hero-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin-bottom: 28px;
  max-width: 52ch;
}
.ocampo-recon-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
}
.ocampo-recon-hero-media::before {
  content: "";
  position: absolute;
  top: -6%;
  right: 2%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--tj-color-theme-bg);
  z-index: 0;
}
.ocampo-recon-hero-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 15px;
  overflow: hidden;
}
.ocampo-recon-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  display: block;
}

.ocampo-recon-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}
.ocampo-recon-row {
  display: grid;
  grid-template-columns: 44px 132px 1fr 1.3fr auto;
  gap: 28px;
  align-items: center;
  padding: 24px 32px;
  background-color: var(--tj-color-theme-bg-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 10px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.ocampo-recon-num,
.ocampo-recon-name,
.ocampo-recon-desc,
.ocampo-recon-year {
  transition: color 0.25s ease;
}
.ocampo-recon-row:hover {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.ocampo-recon-num {
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--tj-color-text-body-2);
}
.ocampo-recon-name {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  color: var(--tj-color-heading-primary);
  margin: 0;
}
.ocampo-recon-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tj-color-text-body-2);
  margin: 0;
}
.ocampo-recon-year {
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--tj-color-text-body-2);
  text-align: right;
  white-space: nowrap;
}
.ocampo-recon-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background-color 0.25s ease;
}
.ocampo-recon-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Swap a la versión blanca del logo en hover (fila carmín) */
.recon-logo-white {
  display: none;
}
.ocampo-recon-row:hover .recon-logo-dark {
  display: none;
}
.ocampo-recon-row:hover .recon-logo-white {
  display: block;
}
/* Leaders League no tiene versión blanca → chip blanco en hover */
.ocampo-recon-row:hover .ocampo-recon-logo--chip {
  background-color: #fff;
}
.ocampo-recon-row:hover .ocampo-recon-num,
.ocampo-recon-row:hover .ocampo-recon-name,
.ocampo-recon-row:hover .ocampo-recon-desc,
.ocampo-recon-row:hover .ocampo-recon-year {
  color: #fff;
}
@media (max-width: 767px) {
  .ocampo-recon-row {
    grid-template-columns: auto 1fr auto;
    gap: 8px 14px;
    padding: 20px;
  }
  .ocampo-recon-logo {
    display: none;
  }
  .ocampo-recon-desc {
    grid-column: 1 / -1;
  }
}

/* ===========================================================================
   Casos de éxito (/casos, Figma 552-1569)
   Hero editorial + slider de cards grandes horizontales. Representaciones
   reusan .ocampo-caso-row (sin thumb); el header reusa .svc-casos-head; las
   flechas reusan .ocampo-ind-nav. CSS propio sólo para hero y card grande.
   =========================================================================== */
/* Hero: reusa .h5-banner-section de Bexton (index-5) — sin CSS propio. */

.ocampo-casos-slider-wrap {
  position: relative;
}
.ocampo-casos-slider {
  overflow: hidden;
}
.ocampo-casos-slider .swiper-slide {
  height: auto;
}
.ocampo-caso-card-lg {
  display: flex;
  height: 100%;
  background-color: var(--tj-color-theme-bg-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 15px;
  overflow: hidden;
}
.ocampo-caso-card-lg-img {
  flex: 0 0 46%;
  overflow: hidden;
}
.ocampo-caso-card-lg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ocampo-caso-card-lg-body {
  flex: 1;
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ocampo-caso-card-lg-tag {
  align-self: flex-start;
  font-family: var(--tj-ff-heading);
  font-size: 0.875rem;
  color: var(--tj-color-text-body);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 1000px;
  padding: 4px 14px 5px;
  margin-bottom: 18px;
}
.ocampo-caso-card-lg-title {
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tj-color-heading-primary);
  margin: 0 0 16px;
}
.ocampo-caso-card-lg-desc {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tj-color-text-body);
  margin: 0;
}
.ocampo-casos-prev {
  left: -10px;
}
.ocampo-casos-next {
  right: -10px;
}
@media (max-width: 767px) {
  .ocampo-caso-card-lg {
    flex-direction: column;
  }
  .ocampo-caso-card-lg-img {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
  }
  .ocampo-casos-prev,
  .ocampo-casos-next {
    display: none;
  }
}

/* ===========================================================================
   Especialidades (/especialidades, Figma 531-412)
   Bloques de arquitectura (card + foto) + grid de áreas. Reusa tj-page-header,
   ocampo-section-head/title, tj-primary-btn e íconos FA del home. Hover de áreas
   = mismo patrón carmín que las filas de Reconocimientos.
   =========================================================================== */
.ocampo-esp-intro-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tj-color-text-body);
  margin-bottom: 28px;
}

/* Bloques de arquitectura (RC 360 / P&C): card + imagen */
.ocampo-esp-arch {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
  background-color: var(--tj-color-theme-bg-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 16px;
  overflow: hidden;
}
.ocampo-esp-arch + .ocampo-esp-arch {
  margin-top: 28px;
}
.ocampo-esp-arch-card {
  padding: clamp(32px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ocampo-esp-arch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-bg);
  color: var(--tj-color-theme-primary);
  font-size: 1.5rem;
  margin-bottom: 24px;
}
.ocampo-esp-arch-num {
  font-family: var(--tj-ff-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--tj-color-text-body-2);
  margin-bottom: 6px;
}
.ocampo-esp-arch-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tj-color-heading-primary);
  margin-bottom: 16px;
}
.ocampo-esp-arch-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tj-color-text-body);
  margin-bottom: 28px;
}
.ocampo-esp-arch-card .tj-primary-btn {
  margin-top: auto;
}
.ocampo-esp-arch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Grid de áreas complementarias */
.ocampo-esp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ocampo-esp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 36px 32px;
  background-color: var(--tj-color-theme-bg-2);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.ocampo-esp-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-bg);
  color: var(--tj-color-theme-primary);
  font-size: 1.5rem;
  margin-bottom: 28px;
  transition: background-color 0.25s ease;
}
.ocampo-esp-card-title {
  font-family: var(--tj-ff-body);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--tj-color-heading-primary);
  margin-bottom: 14px;
  transition: color 0.25s ease;
}
.ocampo-esp-card-desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tj-color-text-body-2);
  margin-bottom: 28px;
  transition: color 0.25s ease;
}
/* Cards are informational (no detail pages): the desc is the last element. */
.ocampo-esp-card-desc {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .ocampo-esp-arch {
    grid-template-columns: 1fr;
  }
  .ocampo-esp-arch-img {
    aspect-ratio: 16 / 10;
  }
  .ocampo-esp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .ocampo-esp-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Nuestros Clientes (/clientes) — el banner del h7-about llena el alto de la
   columna de contadores (Bexton deja la img en height:auto = más baja).
   =========================================================================== */
.page-clientes .h7-about-banner {
  height: 100%;
  min-height: 480px;
}
.page-clientes .h7-about-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1199px) {
  .page-clientes .h7-about-banner {
    min-height: 360px;
  }
}
/* El .h5-about de index-5 es de fondo oscuro; en el Figma de Clientes va CLARO
   (texto oscuro). Los logos de clientes son blancos → van sobre tarjetas en
   tinte carmín pálido para que se lean. */
.page-clientes .h5-about {
  background-color: var(--tj-color-theme-bg);
}
.page-clientes .h5-about .bg-shape-1,
.page-clientes .h5-about .bg-shape-2 {
  display: none;
}
.page-clientes .h5-about-content.style-3 .sec-heading .sec-title,
.page-clientes .h5-about-counter {
  color: var(--tj-color-heading-primary);
}
/* El highlight del título usa gradiente blanco→gris (para fondo oscuro);
   en claro lo cambio a oscuro→gris para que se lea. */
.page-clientes .h5-about-content.style-3 .sec-heading .sec-title .line {
  background-image: linear-gradient(90deg, var(--tj-color-heading-primary) var(--highlight-offset), var(--tj-color-text-body-3) var(--highlight-offset));
}
.page-clientes .h5-about .sub-title {
  color: var(--tj-color-theme-primary);
}
/* Marquee Swiper (slidesPerView:"auto"): cada slide debe medir el ancho de su
   logo, no el 100% que setea swiper.min.css en .swiper-slide. La regla de Bexton
   (.client-item{width:auto}) tiene la misma especificidad que .swiper-slide y se
   pierde por orden de carga; ésta (2 clases) gana siempre. */
.client-slider .swiper-slide {
  width: auto;
}
.page-clientes .h5-client-item .client-logo {
  background-color: rgba(179, 36, 54, 0.45);
  backdrop-filter: none;
  border-radius: 16px;
}
/* Se mantiene el morph a círculo del demo index-5 (gusta), pero en carmín y
   sin el overlay teal ni el placeholder (h5-brand-bg.webp / "254x254"). */
.page-clientes .h5-client-item .client-logo::before,
.page-clientes .h5-client-item .client-logo::after {
  display: none;
}
.page-clientes .h5-client-item .client-logo:hover {
  border-radius: 100%;
  background-color: var(--tj-color-theme-primary);
}

/* ============================================================
   Mobile navigation (meanmenu) for the white h11 header.
   main.js wires `$("#mobile-menu").meanmenu()` (meanScreenWidth 991)
   and we add an empty `.mobile_menu` container per header for it to
   fill. Bexton's mean-* theming is scoped under `.hamburger_menu`
   (a wrapper this site doesn't use), so only base meanmenu.css
   applies — which renders a dark bar + white hamburger, invisible on
   our white header. These rules adapt meanmenu to the OCAMPO header.
   ocampo.css loads last, so it wins the cascade on equal specificity.
   ============================================================ */
@media (max-width: 991px) {
  .header-wrapper {
    position: relative;
  }

  /* strip meanmenu's dark full-width bar — keep only a hamburger button
     sitting where the desktop actions used to be (right side of the row) */
  .mobile_menu.mean-container,
  .mobile_menu .mean-bar {
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    float: none;
    background: transparent;
    position: static;
  }

  /* hamburger button — dark lines, visible on white. meanmenu builds
     three NESTED <span>s stacked via margin-top, so we only recolour
     and resize them (no flex). */
  .mobile_menu a.meanmenu-reveal {
    position: static;
    display: block;
    width: 28px;
    height: auto;
    padding: 0;
    margin: 0;
    /* the open state swaps the bars for an "X" character (meanMenuClose) */
    color: var(--tj-color-theme-dark);
    font-size: 26px;
    line-height: 18px;
    text-align: center;
  }
  .mobile_menu a.meanmenu-reveal span {
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 6px;
    background: var(--tj-color-theme-dark);
    border-radius: 2px;
  }
  .mobile_menu a.meanmenu-reveal span:first-child {
    margin-top: 0;
  }
  /* home + firma: the absolute header is transparent over a dark hero,
     so the hamburger (and the "X") go white — mirrors the logo-light /
     white-nav switch. The white sticky duplicate header keeps the dark default. */
  .page-home .header-area.header-absolute .mobile_menu a.meanmenu-reveal,
  .page-firma .header-area.header-absolute .mobile_menu a.meanmenu-reveal {
    color: var(--tj-color-common-white);
  }
  .page-home .header-area.header-absolute .mobile_menu a.meanmenu-reveal span,
  .page-firma .header-area.header-absolute .mobile_menu a.meanmenu-reveal span {
    background: var(--tj-color-common-white);
  }

  /* dropdown panel — full width under the header */
  .mobile_menu .mean-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    float: none;
    margin: 0;
    background: var(--tj-color-common-white);
    box-shadow: 0 16px 30px rgba(17, 17, 17, 0.12);
  }
  .mobile_menu .mean-nav > ul {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .mobile_menu .mean-nav ul li {
    border-top: 1px solid rgba(17, 17, 17, 0.08);
  }
  .mobile_menu .mean-nav ul li a {
    width: 100%;
    padding: 14px 20px;
    color: var(--tj-color-theme-dark);
    font-size: 16px;
    text-transform: none;
  }
  .mobile_menu .mean-nav ul li a:hover {
    color: var(--tj-color-theme-primary);
  }
  /* Firma sub-menu, slightly indented */
  .mobile_menu .mean-nav ul ul li a {
    padding-inline-start: 38px;
    opacity: 0.85;
  }
  /* expand chevron */
  .mobile_menu .mean-nav a.mean-expand {
    height: auto;
    padding: 14px 20px !important;
    border: 0 !important;
    color: var(--tj-color-theme-dark);
  }
}

/* ============================================================================
   Inline SVG icons — reemplazan Font Awesome (que pesaba 500KB CSS + ~11MB de
   fuentes). Se comportan como una fuente de íconos: heredan tamaño vía 1em y
   color vía currentColor del contenedor, igual que los <i> que reemplazaron.
   ============================================================================ */
.ocampo-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}