/*!
 * IFP Digital — Production stylesheet (WordPress theme)
 * ========================================================
 * Combined from the approved local implementation (src/css/), unchanged in
 * substance from the visually-approved build. If you need to change a
 * rule, edit the matching file under src/css/ in the project repo and
 * regenerate this file the same way, in the same order — do not hand-edit
 * sections here without also updating the source, or the two will drift.
 *
 * Order: design tokens → base/reset → shared components → one block per
 * approved homepage section, in page order → a small new block of
 * "content template" styles for the CPT/blog templates this WordPress
 * pass adds (single-caso, single-recurso, blog, breadcrumbs, related
 * content) — built from the same tokens, not a new visual language.
 *
 * Not minified on purpose (see wordpress/INSTALL.md) — minification is a
 * later, separate optimization pass.
 */


/* ==========================================================
   1. DESIGN TOKENS — src/css/tokens.css
   ========================================================== */
/*
 * IFP Digital — design tokens
 * Source: design-reference/README.md §1.1 (verbatim). Do not hand-roll new
 * values here — if a section needs something this file doesn't have, add it
 * to README.md's token table first, then mirror it here.
 */

:root{
  /* Ink & surface */
  --ifp-charcoal:#2A2A2A;
  --ifp-deep:#171717;        /* primary dark band */
  --ifp-panel:#1A1A1A;       /* raised panel on dark */
  --ifp-panel-2:#1C1C1C;     /* artwork well */
  --ifp-active:#1F1F1F;      /* active row on dark */
  --ifp-white:#FFFFFF;
  --ifp-bone:#F5F4F1;        /* primary light band */
  --ifp-bone-2:#F1EFEA;      /* recessed light surface */
  --ifp-bone-3:#FAF9F7;      /* raised light card */
  --ifp-bone-active:#EFEDE8; /* active row on light */

  /* Accent — a pointer, never a palette */
  --ifp-orange:#E9542A;
  --ifp-orange-hover:#D34620;
  --ifp-orange-press:#B93B1A;
  --ifp-orange-halo:rgba(233,84,42,.16);

  /* Lines */
  --line-light:#E3E1DC;      /* hairline on bone */
  --line-light-2:#DCD9D3;
  --line-dark:#3A3A3A;       /* hairline on charcoal */
  --line-dark-2:#303030;     /* quieter hairline on dark */
  --line-dark-3:#262626;     /* quietest divider on dark */
  --line-dark-active:#6A6A6A;/* active card border */

  /* Text */
  --text-strong:#2A2A2A;
  --text-body:#4A4A4A;
  --text-muted:#6E6B66;
  --text-on-inverse:#FFFFFF;
  --text-on-inverse-muted:rgba(255,255,255,.72);
  --text-on-inverse-faint:rgba(255,255,255,.46);

  /* Type */
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  /* Geometry */
  --container:1280px;
  --page-margin:80px;
  --page-margin-laptop:40px;
  --page-margin-tablet:32px;
  --page-margin-mobile:20px;
  --radius-mark:2px;
  --radius-control:9px;
  --radius-card:14px;
  --radius-card-lg:16px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:150ms;
  --dur:180ms;
  --dur-slow:260ms;

  /*
   * --ifp-gray-400 — INTERPRETED, not in README §1.1.
   * The .dc.html source files reference var(--ifp-gray-400) throughout the
   * Header/Hero markup (inactive EN toggle, panel eyebrow labels, query-list
   * numerals, the "/100" digits) but its value lives in the design tool's own
   * runtime stylesheet (_ds/.../tokens/colors.css), which is not part of this
   * handoff. Rather than invent an arbitrary hex, this reuses the exact rgba
   * value README §2.10 already specifies as the accessible minimum for muted
   * text on a dark surface ("Placeholders are rgba(255,255,255,.52), 4.5:1
   * minimum") — same visual role (muted caption on #171717/#1A1A1A), same
   * accessibility floor. Flag for design confirmation against the real token.
   */
  --ifp-gray-400:rgba(255,255,255,.52);
}

/* ==========================================================
   2. BASE / RESET — src/css/base.css
   ========================================================== */
/*
 * IFP Digital — base / reset
 *
 * FONT SETUP (production TODO — see README §1.2 and §4):
 * This stylesheet declares --font-display / --font-body by family name only.
 * No @font-face is declared here because the production Space Grotesk /
 * Inter WOFF2 files are not part of this handoff (design-reference/assets
 * only has images). Ship this file as-is and either:
 *   (a) have the WordPress theme enqueue self-hosted WOFF2 with @font-face
 *       + font-display:swap + <link rel="preload"> for Space Grotesk 500
 *       and Inter 400 (README's stated approach, no Google Fonts in prod), or
 *   (b) hand the real font files to this codebase and add @font-face blocks
 *       here.
 * Until then, both families fall back to system-ui, which is close in
 * metrics but not pixel-identical — expect minor line-wrap differences.
 * Do not load Space Grotesk / Inter from Google Fonts as a stand-in —
 * README §1.2 is explicit that production must self-host.
 */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
}

html,
body{
  /* This is a backstop, not the fix: every element that actually caused
     horizontal overflow in Hero (unshrinkable flex/grid children — see
     hero.css) has been fixed at the source, so document.scrollWidth
     already equals the viewport width without this rule's help. Keep it
     only as a last line of defense against a future regression — never
     let a new component rely on this to hide its own overflow instead of
     using min-width:0 / box-sizing:border-box where it actually shrinks. */
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--ifp-deep);
  color:var(--text-on-inverse);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
}

button{
  font:inherit;
  color:inherit;
}

h1,h2,h3,p{
  margin:0;
}

/* Global motion budget — README §1.7. Fades and 2–12px translations only;
   this block must win everywhere, including inside section stylesheets. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================
   3. SHARED COMPONENTS — src/css/components.css
   ========================================================== */
/*
 * IFP Digital — reusable primitives shared by 2+ sections.
 * Section-specific rules (KPI numerals, capability rows, etc.) belong in
 * their own src/css/sections/*.css file, not here.
 */

/* Container — README §1.3 / §1.6. One fluid container used by every
   section; page-margin narrows per breakpoint instead of the max-width. */
.ifp-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--page-margin);
}
@media (max-width:1439px){
  .ifp-container{ padding-inline:var(--page-margin-laptop); }
}
@media (max-width:1199px){
  .ifp-container{ padding-inline:var(--page-margin-tablet); }
}
@media (max-width:767px){
  .ifp-container{ padding-inline:var(--page-margin-mobile); }
}
/* Safe fallback below the approved 390px floor, down to 320px: intentionally
   NOT narrowed further. The 20px page padding stays constant all the way
   down — Hero QA explicitly asked for that margin to be preserved rather
   than shrunk, and 20px each side still leaves 280px of content at 320px,
   which is enough once the actual overflow-causing rules are fixed (see
   hero.css). Overflow prevention below 390px comes from making content
   shrink correctly, not from shaving the container padding. */

/* Buttons — README §1.5, verbatim. */
.ifp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:500;border-radius:var(--radius-control);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.ifp-btn--sm{ height:36px;padding:0 16px;font-size:14px; }
.ifp-btn--md{ height:44px;padding:0 20px;font-size:15px; }
.ifp-btn--lg{ height:54px;padding:0 26px;font-size:16px; }
.ifp-btn--block{ width:100%; }

.ifp-btn--primary{ background:var(--ifp-orange);color:#fff; }
.ifp-btn--primary:hover{ background:var(--ifp-orange-hover); }
.ifp-btn--primary:active{ background:var(--ifp-orange-press); }

.ifp-btn--inverse-outline{ background:transparent;color:#fff;border-color:var(--line-dark); }
.ifp-btn--inverse-outline:hover{ border-color:#9A9A9A; }

.ifp-btn:focus-visible{
  outline:2px solid var(--ifp-orange);outline-offset:2px;
  box-shadow:0 0 0 3px var(--ifp-orange-halo);
}

/* CTA arrow — README §1.5: translates 2px diagonally on hover, transform on
   the arrow glyph only, never a scale on the button. Pure CSS, no JS. */
.ifp-btn__arrow{
  display:inline-block;
  transition:transform var(--dur-fast) var(--ease);
}
.ifp-btn:hover .ifp-btn__arrow{ transform:translate(2px,-2px); }

/* Nav / footer link marker gesture — README §1.7. The negative margin hangs
   the reserved square outside the column so links and plain text share one
   flush left edge. */
.ifp-marklink{
  display:inline-flex;align-items:center;
  padding-left:15px;margin-left:-15px;
  text-decoration:none;white-space:nowrap;
  background-image:linear-gradient(var(--ifp-orange),var(--ifp-orange));
  background-repeat:no-repeat;background-position:left center;background-size:0 6px;
  transition:background-size var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.ifp-marklink:hover,
.ifp-marklink[aria-current="page"]{
  color:#fff;background-size:6px 6px;
}

/* Generic square marker used as a standalone bullet (eyebrows, reassurance
   lines, list markers) outside the marklink gesture. */
.ifp-sq{
  display:inline-block;flex:0 0 auto;
  width:7px;height:7px;border-radius:var(--radius-mark);
  background:var(--ifp-orange);
}
.ifp-sq--muted{
  width:5px;height:5px;background:#4E4E4E;
}

/* Visually-hidden but screen-reader-reachable text — used for the
   "(abre en una pestaña nueva)" suffix on external links (README §2.11). */
.ifp-visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Language toggle (segmented control) — Header mobile panel + Footer. */
.ifp-lang-toggle{
  display:flex;
  border:1px solid var(--line-dark);
  border-radius:var(--radius-control);
  overflow:hidden;
}
.ifp-lang-toggle__btn{
  height:40px;
  padding:0 20px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ifp-gray-400);
}
.ifp-lang-toggle__btn + .ifp-lang-toggle__btn{
  border-left:1px solid var(--line-dark);
}
.ifp-lang-toggle__btn.is-active{
  background:var(--ifp-charcoal);
  color:#fff;
}
/* Polylang has no translation of the current page for this language — the
   link still works (goes to that language's homepage, never broken), just
   visually marked as not a direct translation. See inc/seo.php,
   ifp_language_switcher_links(). */
.ifp-lang-toggle__btn.is-lang-fallback{
  opacity:.55;
}

/* Global focus contract — README §1.8. Never removed without a replacement. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--ifp-orange);
  outline-offset:2px;
}

/* ==========================================================
   4. HEADER — src/css/sections/header.css
   ========================================================== */
/*
 * IFP Digital — Header / Navigation
 * Source: design-reference/IFP Header Navigation.dc.html
 * Spec: design-reference/README.md §2.1
 */

.ifp-header-sentinel{
  position:absolute;
  top:0;left:0;
  width:1px;height:1px;
  pointer-events:none;
}

.ifp-header{
  position:sticky;
  top:0;
  z-index:50;
  height:80px;
  display:flex;
  align-items:center;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background-color var(--dur) var(--ease),
             height var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}

/* Scrolled / docked state — README: 80→68px, transparent→#171717, hairline
   #3A3A3A + shadow. No blur, no glassmorphism. Toggled by header.js via
   IntersectionObserver on .ifp-header-sentinel. */
.ifp-header.is-stuck{
  height:68px;
  background:var(--ifp-deep);
  border-bottom-color:var(--line-dark);
  box-shadow:0 1px 0 rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.14);
}

.ifp-header__inner{
  display:flex;
  align-items:center;
  gap:0;
}

.ifp-header__logo{
  display:block;
  flex:0 0 auto;
}
.ifp-header__logo img{
  height:20px;
  width:auto;
  display:block;
  transition:height var(--dur) var(--ease);
}
.ifp-header.is-stuck .ifp-header__logo img{
  height:18px;
}

.ifp-nav{
  display:flex;
  align-items:center;
  gap:24px;
  margin:0 32px 0 56px;
  margin-right:auto;
}
.ifp-nav.ifp-marklink,
.ifp-nav .ifp-marklink{
  font-size:14px;
  font-weight:500;
  line-height:1;
  padding-block:8px;
  color:rgba(255,255,255,.66);
}
.ifp-nav .ifp-marklink[aria-current="page"]{
  color:#fff;
}
.ifp-nav__caret{
  display:inline-block;
  width:5px;height:5px;
  margin-left:9px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  opacity:.5;
}

.ifp-lang{
  display:flex;
  align-items:center;
  gap:10px;
}
.ifp-lang a{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ifp-gray-400);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-lang a[aria-current="true"]{
  color:#fff;
}
.ifp-lang a:hover{
  color:#fff;
}
.ifp-lang a.is-lang-fallback{
  opacity:.55;
}
.ifp-lang__divider{
  width:1px;height:11px;
  background:#4E4E4E;
}

.ifp-header__divider{
  width:1px;height:28px;
  background:rgba(255,255,255,.14);
  margin:0 6px;
  transition:height var(--dur) var(--ease);
}
.ifp-header.is-stuck .ifp-header__divider{
  height:24px;
}

.ifp-header__cta{
  white-space:nowrap;
}

.ifp-header__trigger{
  display:none;
  width:44px;height:44px;
  margin-right:-10px;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:0;
}
.ifp-header__trigger-bar{
  width:22px;height:2px;
  border-radius:1px;
  background:rgba(255,255,255,.9);
}
.ifp-header__trigger-row{
  display:flex;
  align-items:center;
  gap:5px;
}
.ifp-header__trigger-bar--sm{
  width:11px;
}
.ifp-header__trigger-sq{
  width:6px;height:6px;
  border-radius:var(--radius-mark);
  background:var(--ifp-orange);
  flex:0 0 auto;
}

/* ---- Mobile nav (<1200px) — README §2.1 "Mobile (<1200)" ---- */

@media (max-width:1199px){
  .ifp-nav,
  .ifp-lang,
  .ifp-header__divider,
  .ifp-header__cta{
    display:none;
  }
  .ifp-header__trigger{
    display:flex;
    margin-left:auto;
  }
}

.ifp-mobile-panel{
  position:fixed;
  inset:0;
  z-index:60;
  background:var(--ifp-deep);
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.ifp-mobile-panel[hidden]{
  display:none;
}
.ifp-mobile-panel.is-open{
  opacity:1;
  transform:none;
}

.ifp-mobile-panel__bar{
  flex:0 0 auto;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid var(--line-dark-3);
}
.ifp-mobile-panel__bar .ifp-header__logo img{
  height:18px;
}
.ifp-mobile-panel__close{
  display:flex;
  align-items:center;
  gap:9px;
  height:44px;
  margin-right:-4px;
  padding:0 4px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
}

.ifp-mobile-nav{
  flex:1 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  padding:22px 20px 0;
}
.ifp-mobile-nav__item{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:11px 0;
  text-decoration:none;
  border-bottom:1px solid #232323;
  /* ≥44px touch target — README §7 */
  min-height:44px;
}
.ifp-mobile-nav__item--last{
  border-bottom:0;
}
.ifp-mobile-nav__num{
  flex:0 0 auto;
  width:18px;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--text-on-inverse-muted);
}
.ifp-mobile-nav__item[aria-current="page"] .ifp-mobile-nav__num{
  color:var(--ifp-orange);
}
.ifp-mobile-nav__label{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.06;
  color:rgba(255,255,255,.82);
}
.ifp-mobile-nav__item[aria-current="page"] .ifp-mobile-nav__label{
  color:#fff;
}
.ifp-mobile-nav__meta{
  margin-left:auto;
  align-self:center;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-mobile-nav__chevron{
  align-self:center;
  width:6px;height:6px;
  margin-left:10px;
  border-right:1.5px solid var(--ifp-gray-400);
  border-bottom:1.5px solid var(--ifp-gray-400);
  transform:rotate(-45deg);
}

.ifp-mobile-panel__footer{
  flex:0 0 auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-top:1px solid var(--line-dark-3);
}
.ifp-mobile-panel__lang-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ifp-mobile-panel__lang-label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-mobile-panel__note{
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
}

/* Body-scroll lock while the mobile panel is open — class toggled by header.js */
body.ifp-scroll-lock{
  overflow:hidden;
}

/* ==========================================================
   5. HERO — src/css/sections/hero.css
   ========================================================== */
/*
 * IFP Digital — Hero
 * Source: design-reference/IFP Hero v2.dc.html (cards 3a desktop / 3b mobile)
 * Spec: design-reference/README.md §2.2
 *
 * Breakpoint fidelity: the desktop (≥1440, card 3a) and mobile (390–767,
 * card 3b) rules below are pixel-exact transcriptions of the source cards.
 * The Laptop tier (1200–1439) mixes one exact instruction from the README
 * ("H1 clamps down to ~46px, panel shrinks to min(100%,380px), render
 * shifts to right:-120px") with unspecified leftovers carried over from
 * desktop. The Tablet tier (768–1199) has NO reference card and only a
 * qualitative description in the README ("single column... render reduced
 * to a bottom-masked band behind the panel") — the exact band geometry
 * below is an interpretation built by analogy to the mobile band, and
 * should be treated as provisional pending visual sign-off.
 */

.ifp-hero{
  position:relative;
  overflow:hidden;
  background:var(--ifp-deep);
}

/* Background render — masked, decorative. README §2.2 mask geometry is
   pixel-critical; do not simplify to a single mask-image. */
.ifp-hero__art{
  position:absolute;
  top:-60px;
  right:-24px;
  width:840px;
  height:1000px;
  /* Path is relative to THIS file's location: assets/css/ifp.css, one
     level above assets/images/ in the same theme. If ifp.css ever moves
     to a different depth relative to assets/images/, update this path. */
  background-image:url("../images/hero-render.png");
  background-size:cover;
  background-position:57% 42%;
  background-repeat:no-repeat;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 30%),
    linear-gradient(to bottom, #000 62%, transparent 96%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 30%),
    linear-gradient(to bottom, #000 62%, transparent 96%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  animation:ifp-rise 520ms var(--ease) both;
}

.ifp-hero__container{
  position:relative;
  z-index:1;
  padding-top:84px;
}

.ifp-hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:72px;
  align-items:start;
}
/* Grid items default to min-width:auto (their content's intrinsic width),
   which silently overrides any narrower track size the grid tries to give
   them — the #1 cause of the mobile overflow this file used to have. Both
   columns must be allowed to shrink below their content's natural width. */
.ifp-hero__grid > *{
  min-width:0;
}

/* ---- Copy column ------------------------------------------------- */

.ifp-hero__copy{
  animation:ifp-rise 320ms var(--ease) both;
}

.ifp-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:30px;
}
.ifp-hero__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}

.ifp-hero__title{
  font-family:var(--font-display);
  font-size:56px;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.06;
  color:#fff;
  max-width:660px;
  text-wrap:pretty;
}
.ifp-hero__title-dim{
  color:rgba(255,255,255,.46);
}

.ifp-hero__lead{
  margin-top:30px;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text-on-inverse-muted);
  max-width:600px;
  text-wrap:pretty;
}

.ifp-hero__followup{
  margin-top:36px;
  max-width:540px;
}
.ifp-hero__rule{
  display:block;
  width:44px;height:2px;
  background:var(--ifp-orange);
  margin-bottom:18px;
}
.ifp-hero__followup p{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.4;
  color:#fff;
}

.ifp-hero__cta-row{
  margin-top:44px;
  display:flex;
  align-items:center;
  gap:14px;
}

.ifp-hero__reassurance{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:9px;
}
.ifp-hero__reassurance span:last-child{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.6;
  color:var(--ifp-gray-400);
}

/* ---- Panel column -------------------------------------------------- */

.ifp-hero__panel-col{
  position:relative;
  min-height:600px;
  padding-top:52px;
  animation:ifp-rise 360ms var(--ease) 80ms both;
}

.ifp-hero__panel{
  position:relative;
  z-index:1;
  width:428px;
  background:var(--ifp-panel);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card-lg);
  padding:24px 24px 56px;
  box-shadow:0 28px 64px rgba(0,0,0,.55);
}

.ifp-hero__panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}

.ifp-hero__query{
  display:flex;
  align-items:center;
  gap:11px;
  height:46px;
  padding:0 14px;
  background:#141414;
  border:1px solid var(--line-dark-2);
  border-radius:var(--radius-control);
}
.ifp-hero__query-text{
  /* flex:1 1 auto + min-width:0 is what actually lets this line shrink —
     white-space:nowrap + text-overflow:ellipsis do nothing on their own
     inside a flex row, since flex items default to min-width:auto (their
     unwrapped content width acts as a hard floor). That floor was the
     mobile overflow's root cause: this span's intrinsic width (~300px+)
     was winning over the panel's actual available space. */
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-on-inverse-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ifp-hero__caret{
  margin-left:auto;
  flex:0 0 auto;
  width:1.5px;height:16px;
  background:var(--ifp-orange);
  animation:ifp-signal 1.6s steps(1,end) infinite;
}

.ifp-hero__rows{
  margin-top:20px;
  display:flex;
  flex-direction:column;
}

.ifp-hero__row{
  display:flex;
  align-items:center;
  gap:14px;
  height:52px;
  border-bottom:1px solid var(--line-dark-3);
}
.ifp-hero__row-num{
  width:16px;
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:500;
  color:var(--ifp-gray-400);
}
.ifp-hero__row-bar{
  /* Per-row width comes from the --bar-w custom property set inline in
     hero.html (a value, not the `width` property itself), so this rule —
     and the mobile override below — can always win. A literal inline
     `style="width:…"` would beat any class selector on specificity and
     silently ignore the mobile rule, which is exactly what happened here
     before: three decorative bars stayed at their desktop widths
     (124/100/142px) at every breakpoint. */
  display:block;
  flex:1 1 auto;
  min-width:0;
  width:min(var(--bar-w, 120px), 100%);
  height:9px;
  border-radius:var(--radius-mark);
  background:#2E2E2E;
}
.ifp-hero__row-bar--sm{
  margin-left:auto;
  flex:0 0 auto;
  width:44px;
  background:#242424;
}

.ifp-hero__row--brand{
  height:60px;
  padding-left:14px;
  margin-left:-14px;
  border-left:2px solid var(--ifp-orange);
  background:var(--ifp-active);
}
.ifp-hero__row--brand .ifp-hero__row-num{
  color:var(--ifp-orange);
}
.ifp-hero__row-mark{
  flex:0 0 auto;
  width:7px;height:7px;
  border-radius:var(--radius-mark);
  background:var(--ifp-orange);
  animation:ifp-mark 240ms var(--ease) 600ms both;
}
.ifp-hero__row-label{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  letter-spacing:-.01em;
  color:#fff;
}
.ifp-hero__row-tag{
  margin-left:auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
  white-space:nowrap;
}
/* Two labels, one shown at a time via display — not JS. Desktop/tablet get
   the full "Respuesta citada"; mobile switches to the source's own
   shortened "Citada" (see IFP Hero v2.dc.html card 3b) rather than
   shrinking type until it clips. The unused label is display:none, so it
   drops out of the accessibility tree — screen readers only ever see one. */
.ifp-hero__row-tag-short{
  display:none;
}

.ifp-hero__surfaces{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--line-dark-3);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ifp-gray-400);
}
.ifp-dot{
  display:inline-block;
  width:3px;height:3px;
  border-radius:1px;
  background:#4E4E4E;
}

.ifp-hero__score{
  position:relative;
  z-index:2;
  margin:-30px 0 0 -44px;
  width:212px;
  background:var(--text-strong);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card);
  padding:18px 20px;
  box-shadow:0 22px 48px rgba(0,0,0,.5);
}
.ifp-hero__score-label{
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-hero__score-value{
  margin-top:10px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.ifp-hero__score-value span:first-child{
  font-family:var(--font-display);
  font-size:38px;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1;
  color:#fff;
}
.ifp-hero__score-max{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  color:var(--ifp-gray-400);
}
.ifp-hero__score-bar{
  margin-top:14px;
  display:flex;
  gap:5px;
}
.ifp-hero__score-bar span{
  flex:1;
  height:5px;
  border-radius:var(--radius-mark);
  background:var(--ifp-orange);
}
.ifp-hero__score-bar span.is-off{
  background:#4E4E4E;
}

/* ---- KPI strip ------------------------------------------------------- */

.ifp-hero__kpis{
  position:relative;
  z-index:2;
  margin-top:80px;
  padding-bottom:64px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
}
.ifp-hero__kpi{
  border-top:1px solid var(--line-dark);
  padding-top:22px;
}
.ifp-hero__kpi--accent{
  border-top:2px solid var(--ifp-orange);
}
.ifp-hero__kpi-value{
  font-family:var(--font-display);
  font-size:46px;
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
  color:#fff;
}
.ifp-hero__kpi--accent .ifp-hero__kpi-value{
  color:var(--ifp-orange);
}
.ifp-hero__kpi-label{
  margin-top:12px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}

/* ---- Motion — CSS-only, per instruction. Global prefers-reduced-motion
   block in base.css already collapses all of these to their resting
   frame; no per-animation override needed. ---- */

@keyframes ifp-rise{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
@keyframes ifp-mark{
  from{ opacity:0; transform:scale(.4); }
  to{ opacity:1; transform:none; }
}
@keyframes ifp-signal{
  0%, 100%{ opacity:.32; }
  50%{ opacity:1; }
}

/* ===================================================================
   Laptop — 1200–1439px. README: H1 clamps down, panel shrinks, render
   shifts right. Everything else carried over from desktop as-is.
   =================================================================== */
@media (max-width:1439px){
  .ifp-hero__title{
    font-size:clamp(46px, 4.4vw, 56px);
  }
  .ifp-hero__panel{
    width:min(100%, 380px);
  }
  .ifp-hero__art{
    right:-120px;
  }
}

/* ===================================================================
   Tablet — 768–1199px. README: single column, panel full width (overlap
   card becomes a normal sibling, margin:16px 0 0), render becomes a
   bottom-masked band behind the panel. No reference card exists for this
   tier — band geometry below is an interpretation, flagged in the
   project handoff notes; confirm visually before treating as final.
   =================================================================== */
@media (max-width:1199px){
  .ifp-hero__grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .ifp-hero__title{
    font-size:clamp(38px, 5.6vw, 46px);
    max-width:100%;
  }
  .ifp-hero__lead{
    max-width:100%;
  }

  .ifp-hero__art{
    top:0;
    right:0;
    left:0;
    width:100%;
    height:360px;
    background-position:50% 30%;
    background-size:130% auto;
    -webkit-mask-image:linear-gradient(to bottom, #000 54%, transparent 97%);
    mask-image:linear-gradient(to bottom, #000 54%, transparent 97%);
  }

  .ifp-hero__panel-col{
    min-height:0;
    padding-top:0;
    margin-top:16px;
  }
  .ifp-hero__panel{
    width:100%;
    max-width:428px;
    min-width:0;
    box-sizing:border-box;
  }
  .ifp-hero__score{
    z-index:1;
    margin:16px 0 0;
    width:212px;
  }

  .ifp-hero__kpis{
    margin-top:56px;
  }
}

/* ===================================================================
   Mobile — 390–767px. Pixel-exact from card 3b.
   =================================================================== */
@media (max-width:767px){
  .ifp-hero__container{
    padding-top:0;
  }
  .ifp-hero__eyebrow{
    margin-bottom:22px;
  }
  .ifp-hero__title{
    font-size:34px;
    line-height:1.08;
  }
  .ifp-hero__lead{
    margin-top:22px;
    font-size:15px;
  }
  .ifp-hero__followup{
    margin-top:26px;
  }
  .ifp-hero__rule{
    width:36px;
    margin-bottom:14px;
  }
  .ifp-hero__followup p{
    font-size:17px;
    line-height:1.36;
  }
  .ifp-hero__cta-row{
    margin-top:28px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .ifp-hero__reassurance span:last-child{
    font-size:12px;
    line-height:1.5;
  }

  .ifp-hero__grid{
    gap:0;
  }

  .ifp-hero__art{
    position:relative;
    top:auto;left:auto;right:auto;
    height:330px;
    background-size:150% auto;
    background-position:46% 30%;
    -webkit-mask-image:linear-gradient(to bottom, #000 54%, transparent 97%);
    mask-image:linear-gradient(to bottom, #000 54%, transparent 97%);
  }
  .ifp-hero__panel-col{
    margin-top:34px;
    /* The approved 390px card insets the panel (and the KPI strip below)
       an extra 20px beyond the page's own 20px container padding — i.e.
       the panel reads narrower than the copy column above it. That extra
       inset used to live as a horizontal margin on .ifp-hero__panel
       itself, which is exactly the wrong tool once the panel is
       width:100%: 100% + 20px margin on each side is unconditionally
       wider than its container, full stop. Padding on the parent gets the
       identical visual result without ever being able to overflow, since
       it eats into the box's own content area instead of adding to it. */
    padding-inline:20px;
    box-sizing:border-box;
  }
  .ifp-hero__panel{
    position:relative;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    margin:-118px 0 0;
    padding:18px;
    border-radius:var(--radius-card);
  }
  .ifp-hero__panel-head{
    margin-bottom:12px;
  }
  .ifp-hero__query{
    height:42px;
    gap:10px;
    padding:0 12px;
  }
  .ifp-hero__caret{
    height:14px;
  }
  .ifp-hero__rows{
    margin-top:16px;
  }
  /* Mobile card (3b) drops the 4th placeholder result row — 3 rows only */
  .ifp-hero__rows > :nth-child(4){
    display:none;
  }
  .ifp-hero__row{
    height:44px;
    gap:12px;
  }
  .ifp-hero__row-num{
    width:14px;
    font-size:11px;
  }
  .ifp-hero__row-bar{
    width:104px;
  }
  .ifp-hero__row-bar--sm{
    display:none;
  }
  .ifp-hero__row--brand{
    height:52px;
    padding-left:12px;
    margin-left:-12px;
  }
  .ifp-hero__row-label{
    font-size:15px;
  }
  .ifp-hero__row-tag{
    font-size:9px;
    letter-spacing:.1em;
  }
  /* The actual full↔short swap — this was missing, which is why the first
     screenshot at 390px still showed "RESPUESTA CITADA" in full instead of
     the source's shortened "Citada". */
  .ifp-hero__row-tag-full{
    display:none;
  }
  .ifp-hero__row-tag-short{
    display:inline;
  }
  .ifp-hero__surfaces{
    margin-top:14px;
    padding-top:14px;
    gap:10px;
    font-size:10px;
  }
  /* Mobile card (3b) drops the trailing "Marketplaces" entry */
  .ifp-hero__surfaces > :nth-last-child(-n+2){
    display:none;
  }
  .ifp-hero__score{
    display:none; /* mobile card (3b) does not carry the 92/100 overlap card */
  }

  .ifp-hero__kpis{
    /* Same fix as the panel above: the extra 20px inset (beyond the page's
       own container padding) moves from a horizontal margin to padding,
       so it can never push this grid past 100% of its parent. */
    margin:34px 0 40px;
    padding-inline:20px;
    padding-bottom:0;
    box-sizing:border-box;
    grid-template-columns:1fr 1fr;
    gap:20px 24px;
  }
  .ifp-hero__kpi{
    padding-top:16px;
  }
  .ifp-hero__kpi-value{
    font-size:34px;
  }
  .ifp-hero__kpi-label{
    margin-top:8px;
    font-size:10px;
    letter-spacing:.12em;
  }
}

/* Safe fallback below the approved 390px floor (320–389px) — no dedicated
   rules needed. .ifp-hero__panel-col and .ifp-hero__kpis now get their
   extra inset from padding-inline:20px (set in the mobile block above),
   not margin, so they can't overflow at any width; at 320px that leaves
   320 - 20 (page padding) - 20 (panel inset) - 18*2 (panel's own padding)
   = 244px of usable panel content width, which the flex-shrink fixes
   above comfortably fit into. Page padding intentionally stays 20px
   uniformly down to 320px per instruction — not narrowed further. */

/* ==========================================================
   6. PROBLEMA — src/css/sections/problema.css
   ========================================================== */
/*
 * IFP Digital — Problema
 * Source: design-reference/IFP Problema.dc.html
 * Spec: design-reference/README.md §2.3
 *
 * Fluid type: intermediate breakpoints (1200–1439 laptop, 768–1199 tablet)
 * use clamp() between the exact desktop (1440) and mobile (390) values from
 * the source cards, per README §1.6 ("Type scales via clamp() rather than
 * per-breakpoint overrides where possible"). Grid collapses to the mobile
 * single-column layout at ≤1199 (no dedicated tablet card exists).
 */

.ifp-problema{
  background:var(--ifp-bone);
}

.ifp-problema__leadband{
  height:96px;
  display:flex;
  align-items:flex-end;
}
.ifp-problema__leadband-inner{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:0;
}
.ifp-problema__lead-sq{
  width:7px;height:7px;
  border-radius:var(--radius-mark);
  flex:0 0 auto;
}
.ifp-problema__lead-sq--1{ background:var(--ifp-orange); }
.ifp-problema__lead-sq--2{ background:#D9D6D0; }
.ifp-problema__lead-sq--3{ background:var(--line-light); }

.ifp-problema__header{
  padding-top:28px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:1199px){
  .ifp-problema__header{
    grid-template-columns:1fr;
    align-items:start;
    gap:20px;
  }
}

.ifp-problema__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:clamp(22px, 3vw, 28px);
}
.ifp-problema__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ifp-problema__eyebrow--inverse span:last-child{
  color:var(--text-on-inverse-muted);
}

.ifp-problema__heading{
  margin:0;
  max-width:582px;
}
.ifp-problema__highlight{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(34px, 5.2vw, 54px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.06;
  color:var(--ifp-charcoal);
  text-wrap:pretty;

  /* Headline highlight (I-6), simplified per instruction: a CSS sweep
     instead of the source's per-line Range-measurement + infinite WAAPI
     loop. box-decoration-break:clone gives each wrapped line its own
     background box, so the sweep tracks every line correctly even though
     this heading can wrap to 2 lines. Rest state = a small square at the
     left edge (background-size a fixed px width, not 0, so something is
     always visible — matches the source's "resting square"). */
  background-image:linear-gradient(var(--ifp-orange), var(--ifp-orange));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:10px 50%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.ifp-problema__highlight.is-inview{
  animation:ifp-problema-sweep 3.4s cubic-bezier(.32,.72,.28,1) both;
}
@keyframes ifp-problema-sweep{
  0%{ background-size:10px 50%; }
  45%{ background-size:100% 50%; }
  75%{ background-size:100% 50%; }
  100%{ background-size:10px 50%; }
}
@media (prefers-reduced-motion: reduce){
  .ifp-problema__highlight.is-inview{
    animation:none;
    background-size:10px 50%;
  }
}

.ifp-problema__lead{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text-body);
  max-width:460px;
}
@media (max-width:1199px){
  .ifp-problema__lead{ max-width:100%; }
}

.ifp-problema__rows{
  margin-top:56px;
}
.ifp-problema__row{
  display:grid;
  grid-template-columns:112px minmax(0,1fr) minmax(0,460px);
  gap:clamp(24px, 4vw, 48px);
  align-items:start;
  padding:38px 0;
  border-top:1px solid var(--line-light);
  transition:background-color var(--dur) var(--ease);
}
.ifp-problema__row:first-child{
  border-top:2px solid var(--ifp-charcoal);
}
.ifp-problema__row:last-child{
  border-bottom:1px solid var(--line-light);
}
.ifp-problema__row:hover{
  background:var(--ifp-bone-active);
}
.ifp-problema__row-num{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.ifp-problema__row-num span:first-child{
  font-family:var(--font-display);
  font-size:clamp(38px, 4.2vw, 54px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.86;
  color:var(--ifp-charcoal);
  font-variant-numeric:tabular-nums;
}
.ifp-problema__row-num .ifp-sq{
  margin-top:7px;
}
.ifp-problema__row-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(23px, 2.6vw, 30px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.18;
  color:var(--ifp-charcoal);
  max-width:480px;
  text-wrap:pretty;
}
.ifp-problema__row-body{
  margin:0;
  padding-top:7px;
  font-family:var(--font-body);
  font-size:clamp(15.5px, 1.2vw, 16.5px);
  line-height:1.6;
  color:var(--ifp-charcoal);
}

@media (max-width:1199px){
  .ifp-problema__row{
    grid-template-columns:1fr;
    gap:10px;
    padding:28px 0;
  }
  .ifp-problema__row-body{ padding-top:0; }
}
@media (max-width:767px){
  .ifp-problema__rows{ margin-top:44px; }
  .ifp-problema__row{ padding:26px 0; }
  .ifp-problema__row-num{ gap:11px; margin-bottom:2px; }
}

/* ---- Conclusion band --------------------------------------------- */

.ifp-problema__conclusion{
  margin-top:104px;
  background:var(--ifp-charcoal);
}
.ifp-problema__conclusion-inner{
  padding:88px 0 84px;
  display:grid;
  grid-template-columns:1fr 400px;
  gap:72px;
  align-items:end;
}
@media (max-width:1199px){
  .ifp-problema__conclusion-inner{
    grid-template-columns:1fr;
    align-items:start;
    gap:32px;
  }
}
@media (max-width:767px){
  .ifp-problema__conclusion{ margin-top:56px; }
  .ifp-problema__conclusion-inner{ padding:48px 0 52px; }
}

.ifp-problema__conclusion-lead{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(19px, 2.2vw, 30px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.3;
  color:rgba(255,255,255,.62);
  max-width:760px;
}
.ifp-problema__conclusion-rule{
  width:100%;
  max-width:900px;
  height:1px;
  background:var(--line-dark);
  margin:34px 0;
}
@media (max-width:767px){
  .ifp-problema__conclusion-rule{ margin:24px 0; }
}
.ifp-problema__conclusion-headline{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px, 4.6vw, 60px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.06;
  color:#fff;
  max-width:900px;
  text-wrap:pretty;
}
.ifp-problema__conclusion-right{
  border-top:2px solid var(--ifp-orange);
  padding-top:24px;
}
@media (max-width:767px){
  .ifp-problema__conclusion-right{ margin-top:32px; padding-top:20px; }
}
.ifp-problema__conclusion-right p{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(17px, 1.4vw, 19px);
  font-weight:500;
  line-height:1.55;
  color:#fff;
}

/* ==========================================================
   7. SOLUCIONES — src/css/sections/soluciones.css
   ========================================================== */
/*
 * IFP Digital — Soluciones
 * Source: design-reference/IFP Soluciones.dc.html
 * Spec: design-reference/README.md §2.4
 *
 * Desktop active/dim state is pure CSS: hovering (or keyboard-focusing,
 * via :focus-within) one row dims its three siblings and lights the
 * hovered one. No JS. See soluciones.html for the mobile-simplification
 * note (no accordion — all rows always fully visible, reflowed to a
 * stacked block below 1200px).
 */

.ifp-soluciones{
  background:var(--ifp-deep);
  padding-top:104px;
}

.ifp-soluciones__header{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:1199px){
  .ifp-soluciones__header{ grid-template-columns:1fr; align-items:start; gap:20px; }
}

.ifp-soluciones__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}
.ifp-soluciones__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}

.ifp-soluciones__heading{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px, 5.2vw, 54px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.04;
  color:#fff;
  max-width:620px;
  text-wrap:balance;
}
.ifp-soluciones__heading-dim{
  color:rgba(255,255,255,.46);
}

.ifp-soluciones__lead{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text-on-inverse-muted);
  max-width:440px;
}
@media (max-width:1199px){ .ifp-soluciones__lead{ max-width:100%; } }

/* ---- Rows ---------------------------------------------------------- */

.ifp-soluciones__rows{
  margin-top:64px;
  border-top:1px solid var(--line-dark);
}

.ifp-soluciones__row{
  display:grid;
  grid-template-columns:112px minmax(0,1fr) 300px 104px 136px;
  gap:40px;
  align-items:start;
  padding:36px 24px 36px 0;
  margin-left:-24px;
  margin-right:-24px;
  padding-left:24px;
  border-bottom:1px solid var(--line-dark-3);
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ifp-soluciones__row:last-child{
  border-bottom-color:var(--line-dark);
}

.ifp-soluciones__row-num{
  display:flex;
  align-items:flex-start;
  gap:11px;
}
.ifp-soluciones__row-num-value{
  font-family:var(--font-display);
  font-size:44px;
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.88;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.46);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-soluciones__row-num .ifp-sq{
  margin-top:6px;
  opacity:0;
  transform:scale(.5);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.ifp-soluciones__row-category{
  margin:0;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-soluciones__row-prop{
  margin:14px 0 0;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.25;
  color:#fff;
  max-width:380px;
  text-wrap:pretty;
}

.ifp-soluciones__row-services{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding-top:6px;
}
.ifp-soluciones__row-services span{
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  letter-spacing:.005em;
  color:rgba(255,255,255,.56);
  transition:color var(--dur-fast) var(--ease);
}

.ifp-soluciones__row-visual{
  width:104px;
  height:104px;
  border:1px solid var(--line-dark-2);
  box-sizing:border-box;
  transition:border-color var(--dur-fast) var(--ease);
}
.ifp-soluciones__row-visual--grid5{
  padding:13px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-template-rows:repeat(5, 1fr);
  gap:5px;
}
.ifp-soluciones__row-visual--grid4{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(4, 1fr);
  gap:6px;
}
.ifp-soluciones__row-visual--grid5 span,
.ifp-soluciones__row-visual--grid4 span{
  border-radius:var(--radius-mark);
  background:#2E2E2E;
}
.ifp-soluciones__row-visual--grid5 span:nth-child(3n){ background:#242424; }
.ifp-soluciones__row-visual--grid5 span:nth-child(5n){ background:#3A3A3A; }
.ifp-soluciones__row-visual--grid4 span:nth-child(3n){ background:#3A3A3A; }
.ifp-soluciones__row-visual--grid4 span:nth-child(4n){ background:#4A4A4A; }
.ifp-soluciones__row-visual span.is-node{
  background:#4A4A4A;
  transition:background var(--dur-fast) var(--ease);
}

.ifp-soluciones__row-visual--signal{
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
}
.ifp-soluciones__signal-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.ifp-soluciones__signal-row span:first-child{
  width:8px;height:8px;
  flex:0 0 auto;
  border-radius:var(--radius-mark);
  background:#3A3A3A;
}
.ifp-soluciones__signal-row span:first-child.is-node{
  background:#4A4A4A;
}
.ifp-soluciones__signal-bar{
  flex:1;
  height:2px;
  width:var(--w);
  background:#3A3A3A;
  transform-origin:left;
}

.ifp-soluciones__row-visual--squares{
  position:relative;
}
.ifp-soluciones__nest{
  position:absolute;
  width:38px;height:38px;
  border:1px solid #3A3A3A;
}
.ifp-soluciones__nest--1{ left:18px; top:18px; border-color:#4A4A4A; }
.ifp-soluciones__nest--2{ left:32px; top:32px; transform:rotate(12deg); }
.ifp-soluciones__nest--3{ left:46px; top:46px; border-color:#333; transform:rotate(24deg); }
.ifp-soluciones__row-visual--squares .is-node{
  position:absolute;
  left:14px; top:14px;
  width:8px; height:8px;
  border-radius:var(--radius-mark);
  background:#4A4A4A;
  transition:background var(--dur-fast) var(--ease);
}

.ifp-soluciones__row-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-top:8px;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.66);
  transition:color var(--dur-fast) var(--ease);
}

/* ---- Active state — hover or keyboard focus, one row at a time ------ */

.ifp-soluciones__row:hover,
.ifp-soluciones__row:focus-within{
  background:var(--ifp-active);
  box-shadow:inset 2px 0 0 0 var(--ifp-orange);
}
.ifp-soluciones__row:hover .ifp-soluciones__row-num-value,
.ifp-soluciones__row:focus-within .ifp-soluciones__row-num-value{
  color:#fff;
}
.ifp-soluciones__row:hover .ifp-soluciones__row-num .ifp-sq,
.ifp-soluciones__row:focus-within .ifp-soluciones__row-num .ifp-sq{
  opacity:1;
  transform:scale(1);
}
.ifp-soluciones__row:hover .ifp-soluciones__row-category,
.ifp-soluciones__row:focus-within .ifp-soluciones__row-category{
  color:rgba(255,255,255,.78);
}
.ifp-soluciones__row:hover .ifp-soluciones__row-services span,
.ifp-soluciones__row:focus-within .ifp-soluciones__row-services span{
  color:#fff;
}
.ifp-soluciones__row:hover .ifp-soluciones__row-visual,
.ifp-soluciones__row:focus-within .ifp-soluciones__row-visual{
  border-color:var(--line-dark-active);
}
.ifp-soluciones__row:hover .is-node,
.ifp-soluciones__row:focus-within .is-node{
  background:var(--ifp-orange) !important;
}
.ifp-soluciones__row:hover .ifp-soluciones__row-cta,
.ifp-soluciones__row:focus-within .ifp-soluciones__row-cta{
  color:var(--ifp-orange);
}

/* Rows never change height on activation — README's explicit
   pixel-critical rule — so nothing above touches padding/margin/height. */

/* ---- Closing block --------------------------------------------------- */

.ifp-soluciones__closing{
  margin-top:96px;
  padding-bottom:104px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:start;
}
@media (max-width:1199px){
  .ifp-soluciones__closing{ grid-template-columns:1fr; gap:32px; }
}

.ifp-soluciones__closing-statement{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(28px, 3.6vw, 44px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.08;
  color:#fff;
  max-width:520px;
  text-wrap:pretty;
}

.ifp-soluciones__closing-lines{
  display:flex;
  flex-direction:column;
}
.ifp-soluciones__closing-line{
  display:flex;
  gap:14px;
  padding:18px 0;
  border-top:1px solid var(--line-dark-3);
}
.ifp-soluciones__closing-line:last-child{
  border-bottom:1px solid var(--line-dark-3);
}
.ifp-soluciones__closing-line .ifp-sq--muted{
  margin-top:8px;
}
.ifp-soluciones__closing-line p{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
}

.ifp-soluciones__closing-cta{
  margin-top:32px;
  border-top:2px solid var(--ifp-orange);
  padding-top:24px;
}
.ifp-soluciones__closing-cta p{
  margin:0 0 26px;
  font-family:var(--font-body);
  font-size:19px;
  font-weight:500;
  line-height:1.5;
  color:#fff;
}

/* ===================================================================
   Tablet/laptop ≤1199 — drop the visual column (README: "Laptop: drop
   the visual column"). Rows still a horizontal grid, just 4 columns.
   =================================================================== */
@media (max-width:1199px){
  .ifp-soluciones__row{
    grid-template-columns:80px minmax(0,1fr) minmax(0,220px) 100px;
    gap:24px;
  }
  .ifp-soluciones__row-visual{ display:none; }
}

/* ===================================================================
   Mobile ≤767 — stacked, always fully visible (see soluciones.html note).
   =================================================================== */
@media (max-width:767px){
  .ifp-soluciones{ padding-top:56px; }

  .ifp-soluciones__rows{ margin-top:40px; }
  .ifp-soluciones__row{
    grid-template-columns:1fr;
    gap:14px;
    padding:28px 0;
    margin-inline:0;
  }
  .ifp-soluciones__row-num-value{ font-size:32px; }
  .ifp-soluciones__row-prop{ font-size:21px; max-width:100%; }
  .ifp-soluciones__row-visual{
    display:block;
    width:76px;
    height:76px;
  }
  .ifp-soluciones__row-visual--grid5{ padding:10px; gap:4px; }
  .ifp-soluciones__row-visual--grid4{ padding:9px; gap:5px; }
  .ifp-soluciones__nest{ transform-origin:center; }
  .ifp-soluciones__nest--1{ left:13px; top:13px; width:28px; height:28px; }
  .ifp-soluciones__nest--2{ left:24px; top:24px; width:28px; height:28px; }
  .ifp-soluciones__nest--3{ left:35px; top:35px; width:28px; height:28px; }

  /* Every row's content is already visible; on touch there's no hover, so
     nodes/marker stay in their resting (dim) state — README's own fallback
     ("tap-to-expand instead" in the interaction catalogue) is satisfied
     here by "nothing to expand, everything already shown." */
  .ifp-soluciones__row-cta{ padding-top:4px; }

  .ifp-soluciones__closing{ margin-top:48px; padding-bottom:48px; }
  .ifp-soluciones__closing-cta .ifp-btn{ width:100%; }
}

/* ==========================================================
   8. DIFERENCIAL — src/css/sections/diferencial.css
   ========================================================== */
/*
 * IFP Digital — Diferencial
 * Source: design-reference/IFP Diferencial.dc.html
 * Spec: design-reference/README.md §2.5
 */

.ifp-diferencial{
  background:var(--ifp-bone);
  padding-top:96px;
}

.ifp-diferencial__header{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:1199px){
  .ifp-diferencial__header{ grid-template-columns:1fr; align-items:start; gap:20px; }
}

.ifp-diferencial__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}
.ifp-diferencial__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.ifp-diferencial__heading{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(40px, 5.6vw, 66px);
  font-weight:500;
  letter-spacing:-.038em;
  line-height:1.02;
  color:var(--ifp-charcoal);
  max-width:640px;
  text-wrap:balance;
}
.ifp-diferencial__lead{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  color:var(--text-body);
  max-width:420px;
}
@media (max-width:1199px){ .ifp-diferencial__lead{ max-width:100%; } }

/* ---- Table ------------------------------------------------------- */

.ifp-diferencial__table{ margin-top:56px; }

.ifp-diferencial__col-labels{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  padding-bottom:16px;
}
.ifp-diferencial__col-label{
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:56px;
}
.ifp-diferencial__col-label--right{
  padding-right:0;
  padding-left:56px;
}
.ifp-diferencial__col-label span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ifp-diferencial__col-label--right span:last-child{
  color:var(--ifp-charcoal);
}
.ifp-diferencial__label-sq{
  width:7px;height:7px;
  border-radius:var(--radius-mark);
  flex:0 0 auto;
}
.ifp-diferencial__label-sq--muted{ background:#D9D6D0; }

.ifp-diferencial__rows{
  counter-reset:diferencial-row;
}
.ifp-diferencial__row{
  counter-increment:diferencial-row;
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  align-items:center;
  padding:34px 24px;
  margin:0 -24px;
  border-top:1px solid var(--line-light);
  background-image:linear-gradient(var(--ifp-orange), var(--ifp-orange));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0% 2px;
  transition:background-color var(--dur) var(--ease), background-size var(--dur-slow) var(--ease);
}
.ifp-diferencial__row:first-child{ border-top:2px solid var(--ifp-charcoal); }
.ifp-diferencial__row:last-child{ border-bottom:1px solid var(--line-light); }

/* Desktop: .pair *is* the 3-column grid row (old/divider/new); .row just
   adds the hover background + counts rows for the generated "01" number. */
.ifp-diferencial__pair{
  display:contents;
}
.ifp-diferencial__num{
  display:none; /* mobile-only gutter numeral, see ≤767 block */
}

.ifp-diferencial__divider{ background:var(--line-light); align-self:stretch; }

.ifp-diferencial__old{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-right:56px;
}
.ifp-diferencial__old::before{
  content:counter(diferencial-row, decimal-leading-zero);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--text-muted);
  width:24px;
  flex:0 0 auto;
}
.ifp-diferencial__old-sq{
  display:none; /* mobile-only, see ≤767 block */
}
.ifp-diferencial__old span:last-child{
  font-family:var(--font-body);
  font-size:22px;
  line-height:1.4;
  color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease);
}

.ifp-diferencial__new{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-left:56px;
}
.ifp-diferencial__new .ifp-sq{
  width:10px;height:10px;
  opacity:.22;
  transform:scale(.55) translateY(-2px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ifp-diferencial__new span:last-child{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.24;
  color:var(--ifp-charcoal);
}

/* ---- Active row: hover or keyboard focus ---------------------------- */

.ifp-diferencial__row:hover,
.ifp-diferencial__row:focus-within{
  background-color:var(--ifp-bone-active);
  background-size:100% 2px;
}
.ifp-diferencial__row:hover .ifp-diferencial__new .ifp-sq,
.ifp-diferencial__row:focus-within .ifp-diferencial__new .ifp-sq{
  opacity:1;
  transform:scale(1) translateY(-2px);
}
/* Every other row drops half a tone while one is active — README's exact
   value, kept explicit so the left statement never goes illegible. */
.ifp-diferencial__rows:hover .ifp-diferencial__row:not(:hover) .ifp-diferencial__old span:last-child{
  color:#8C8880;
}
.ifp-diferencial__rows:focus-within .ifp-diferencial__row:not(:focus-within) .ifp-diferencial__old span:last-child{
  color:#8C8880;
}

/* ---- Manifesto -------------------------------------------------------- */

.ifp-diferencial__manifesto{
  margin-top:88px;
  padding-bottom:112px;
}
.ifp-diferencial__manifesto .ifp-diferencial__eyebrow{ margin-bottom:26px; }
.ifp-diferencial__manifesto-rule{
  height:2px;
  background:var(--ifp-charcoal);
  margin-bottom:40px;
}
.ifp-diferencial__manifesto-text{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(30px, 5.6vw, 76px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.04;
  color:var(--ifp-charcoal);
  max-width:1140px;
  text-wrap:pretty;
}
.ifp-diferencial__manifesto-text span{
  color:var(--text-muted);
}

/* ===================================================================
   Tablet ≤1199 — keep two columns, tighter type/padding, divider becomes
   a left border on the right cell instead of a centre column.
   =================================================================== */
@media (max-width:1199px){
  .ifp-diferencial__row{ padding:24px; }
  .ifp-diferencial__old span:last-child{ font-size:18px; }
  .ifp-diferencial__new span:last-child{ font-size:22px; }
}

/* ===================================================================
   Mobile ≤767 — stacked pairs, no active state (both always readable).
   =================================================================== */
@media (max-width:767px){
  .ifp-diferencial{ padding-top:56px; }
  .ifp-diferencial__table{ margin-top:40px; }
  .ifp-diferencial__col-labels{ display:none; }

  .ifp-diferencial__row{
    display:flex;
    align-items:baseline;
    gap:12px;
    padding:24px 0;
    margin-inline:0;
    background-image:none;
  }
  .ifp-diferencial__row:hover,
  .ifp-diferencial__row:focus-within{
    background-color:transparent;
  }
  .ifp-diferencial__rows:hover .ifp-diferencial__row:not(:hover) .ifp-diferencial__old span:last-child,
  .ifp-diferencial__rows:focus-within .ifp-diferencial__row:not(:focus-within) .ifp-diferencial__old span:last-child{
    color:var(--text-muted);
  }

  .ifp-diferencial__num{
    display:block;
    width:18px;
    flex:0 0 auto;
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--text-muted);
  }
  .ifp-diferencial__pair{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
  }
  .ifp-diferencial__divider{ display:none; }
  .ifp-diferencial__old{
    padding-right:0;
    gap:10px;
  }
  .ifp-diferencial__old::before{ content:none; }
  .ifp-diferencial__old-sq{
    display:block;
    width:7px;height:7px;
    flex:0 0 auto;
    border-radius:var(--radius-mark);
    background:#D9D6D0;
  }
  .ifp-diferencial__new{
    padding-left:0;
  }
  .ifp-diferencial__new .ifp-sq{ opacity:1; transform:none; }
  .ifp-diferencial__old span:last-child{ font-size:17px; line-height:1.45; }
  .ifp-diferencial__new span:last-child{ font-size:23px; }

  .ifp-diferencial__manifesto{ margin-top:48px; padding-bottom:52px; }
  .ifp-diferencial__manifesto-rule{ margin-bottom:26px; }
}

/* ==========================================================
   9. CASOS (homepage section) — src/css/sections/casos.css
   ========================================================== */
/*
 * IFP Digital — Casos
 * Source: design-reference/IFP Casos.dc.html
 * Spec: design-reference/README.md §2.6
 *
 * Desktop hover/active state is pure CSS (sibling dimming on :hover /
 * :focus-within, same pattern as Soluciones/Diferencial). Mobile already
 * matches the source 1:1 here — it's stacked cards top to bottom, no
 * interpretation needed.
 */

.ifp-casos{
  background:var(--ifp-deep);
  padding-top:96px;
}

.ifp-casos__header{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:1199px){
  .ifp-casos__header{ grid-template-columns:1fr; align-items:start; gap:24px; }
}

.ifp-casos__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}
.ifp-casos__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-casos__eyebrow--muted span:last-child{ color:var(--ifp-gray-400); }

.ifp-casos__heading{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(40px, 5.6vw, 66px);
  font-weight:500;
  letter-spacing:-.038em;
  line-height:1.02;
  color:#fff;
  max-width:640px;
  text-wrap:balance;
}
.ifp-casos__heading-dim{ color:rgba(255,255,255,.46); }

.ifp-casos__lead{
  margin:0;
  font-family:var(--font-body);
  font-size:20px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
  max-width:430px;
}
@media (max-width:767px){ .ifp-casos__lead{ font-size:15px; line-height:1.65; color:var(--text-on-inverse-muted); } }

.ifp-casos__trust{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:22px;
  border-top:1px solid var(--line-dark);
}
.ifp-casos__trust span:first-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-casos__trust-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  color:#fff;
  padding-bottom:5px;
  border-bottom:2px solid var(--ifp-orange);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__trust-cta:hover{ color:var(--ifp-orange); }
@media (max-width:767px){
  .ifp-casos__trust{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ---- Case grid ------------------------------------------------------- */

.ifp-casos__grid{
  margin-top:64px;
  display:grid;
  grid-template-columns:1.34fr 1fr;
  gap:24px;
  align-items:stretch;
}
@media (max-width:1199px){
  .ifp-casos__grid{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .ifp-casos__grid{ margin-top:36px; gap:20px; }
}

.ifp-casos__secondary-list{
  display:grid;
  grid-template-rows:repeat(3, minmax(0,1fr));
  gap:24px;
}
@media (max-width:1199px){
  .ifp-casos__secondary-list{ grid-template-rows:none; }
}
@media (max-width:767px){
  .ifp-casos__secondary-list{ gap:20px; }
}

.ifp-casos__card{
  --line:#303030;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--radius-card-lg);
  overflow:hidden;
  background:#191919;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ifp-casos__card:hover,
.ifp-casos__card:focus-within{
  --line:var(--line-dark-active);
  background:var(--ifp-panel);
}
.ifp-casos__card--secondary{
  flex-direction:row;
  border-radius:var(--radius-card);
}

.ifp-casos__cover{
  position:relative;
  overflow:hidden;
  background:var(--ifp-panel-2);
  border-color:var(--line);
  transition:border-color var(--dur) var(--ease);
}
.ifp-casos__cover--featured{
  height:296px;
  border-bottom:1px solid var(--line);
  padding:26px 26px 44px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform var(--dur-slow) var(--ease), border-color var(--dur) var(--ease);
}
.ifp-casos__card:hover .ifp-casos__cover--featured,
.ifp-casos__card:focus-within .ifp-casos__cover--featured{
  transform:translateY(-12px);
}
.ifp-casos__cover--secondary{
  width:150px;
  flex:0 0 auto;
  border-right:1px solid var(--line);
  padding:18px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  transition:transform var(--dur-slow) var(--ease), border-color var(--dur) var(--ease);
}
.ifp-casos__card:hover .ifp-casos__cover--secondary,
.ifp-casos__card:focus-within .ifp-casos__cover--secondary{
  transform:translateY(-12px);
}

.ifp-casos__cover-signal{
  display:flex;
  align-items:center;
  gap:10px;
}
.ifp-casos__node,
.ifp-casos__cover-signal .ifp-casos__node{
  width:8px;height:8px;
  flex:0 0 auto;
  border-radius:var(--radius-mark);
  background:#4A4A4A;
  transition:background var(--dur) var(--ease);
}
.ifp-casos__card:hover .ifp-casos__node,
.ifp-casos__card:focus-within .ifp-casos__node,
.ifp-casos__card:hover .is-node,
.ifp-casos__card:focus-within .is-node{
  background:var(--ifp-orange);
}
.ifp-casos__cover-bar{
  height:8px;
  flex:1;
  max-width:112px;
  border-radius:var(--radius-mark);
  background:#2E2E2E;
}
.ifp-casos__cover-panels{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  flex:1;
}
.ifp-casos__cover-panels span{
  border:1px solid #2E2E2E;
  background:#1F1F1F;
  border-radius:2px;
}
.ifp-casos__cover-series{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:66px;
}
.ifp-casos__cover-series--sm{ height:26px; gap:5px; }
.ifp-casos__cover-series span{
  flex:1;
  height:var(--h);
  background:#2E2E2E;
  border-radius:1px;
}
.ifp-casos__cover-series span.is-node{ background:var(--ifp-orange); }
.ifp-casos__cover-block{
  height:46px;
  border:1px solid #303030;
  background:#1F1F1F;
  border-radius:2px;
}
.ifp-casos__cover-frame{
  align-self:center;
  width:42px;height:46px;
  border:1px solid #3A3A3A;
  background:#1F1F1F;
  border-radius:2px;
}
.ifp-casos__cover-label{
  position:absolute;
  left:26px;bottom:22px;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}

/* ---- Card body --------------------------------------------------- */

.ifp-casos__card-body{
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:26px;
  flex:1;
  min-width:0;
}
.ifp-casos__card--secondary .ifp-casos__card-body{
  padding:22px 24px;
  gap:14px;
}

.ifp-casos__card-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.ifp-casos__card-num{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.62);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__card:hover .ifp-casos__card-num,
.ifp-casos__card:focus-within .ifp-casos__card-num{ color:#fff; }
.ifp-casos__card-rule{
  width:18px;height:1px;
  background:var(--line);
}
.ifp-casos__card-industry{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__card--secondary .ifp-casos__card-industry{ font-size:10.5px; }
.ifp-casos__card:hover .ifp-casos__card-industry,
.ifp-casos__card:focus-within .ifp-casos__card-industry{ color:rgba(255,255,255,.82); }
.ifp-casos__card-mark{
  margin-left:auto;
  opacity:.18;
  transform:scale(.55);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ifp-casos__card:hover .ifp-casos__card-mark,
.ifp-casos__card:focus-within .ifp-casos__card-mark{ opacity:1; transform:scale(1); }

.ifp-casos__result-value{
  font-family:var(--font-display);
  font-size:72px;
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.96;
  color:var(--ifp-orange);
}
.ifp-casos__result-value--sm{ font-size:34px; letter-spacing:-.04em; color:#fff; }
.ifp-casos__result-value--text{ font-size:30px; letter-spacing:-.035em; line-height:1.06; color:#fff; }
.ifp-casos__result-label{
  margin-top:10px;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:500;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.72);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__card--secondary .ifp-casos__result-label{
  margin-top:7px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
}
.ifp-casos__card:hover .ifp-casos__result-label,
.ifp-casos__card:focus-within .ifp-casos__result-label{ color:#fff; }

.ifp-casos__card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}
.ifp-casos__card--secondary .ifp-casos__card-tags{ gap:6px 16px; }
.ifp-casos__card-tags span{
  font-family:var(--font-body);
  font-size:14px;
  color:rgba(255,255,255,.72);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__card--secondary .ifp-casos__card-tags span{ font-size:13px; }
.ifp-casos__card:hover .ifp-casos__card-tags span,
.ifp-casos__card:focus-within .ifp-casos__card-tags span{ color:rgba(255,255,255,.9); }

.ifp-casos__card-footer{
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  transition:border-color var(--dur) var(--ease);
}
.ifp-casos__card--secondary .ifp-casos__card-footer{ padding-top:14px; gap:16px; }
.ifp-casos__card-logo{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  color:rgba(255,255,255,.58);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__card--secondary .ifp-casos__card-logo{ font-size:12px; }
.ifp-casos__card:hover .ifp-casos__card-logo,
.ifp-casos__card:focus-within .ifp-casos__card-logo{ color:#fff; }
.ifp-casos__card-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,.72);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__card-cta span{
  transition:transform var(--dur) var(--ease);
}
.ifp-casos__card:hover .ifp-casos__card-cta,
.ifp-casos__card:focus-within .ifp-casos__card-cta{ color:var(--ifp-orange); }
.ifp-casos__card:hover .ifp-casos__card-cta span,
.ifp-casos__card:focus-within .ifp-casos__card-cta span{ transform:translateX(4px); }

@media (max-width:767px){
  .ifp-casos__cover--featured{ height:180px; padding:18px; }
  .ifp-casos__cover--secondary{ width:104px; }
  .ifp-casos__result-value{ font-size:46px; }
  .ifp-casos__result-value--sm{ font-size:32px; }
  .ifp-casos__result-value--text{ font-size:26px; }
  .ifp-casos__card-body{ padding:22px 20px; gap:18px; }
  .ifp-casos__card--secondary .ifp-casos__card-body{ padding:20px; }
}

/* ---- Logo wall --------------------------------------------------- */

.ifp-casos__logowall{
  margin-top:72px;
  padding-top:28px;
  border-top:1px solid var(--line-dark);
}
.ifp-casos__logowall-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:1px;
  background:var(--line-dark-3);
  border:1px solid var(--line-dark-3);
}
@media (max-width:767px){
  .ifp-casos__logowall-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.ifp-casos__logo-cell{
  height:88px;
  background:var(--ifp-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:background var(--dur) var(--ease);
}
@media (max-width:767px){ .ifp-casos__logo-cell{ height:72px; } }
.ifp-casos__logo-cell .ifp-sq{
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease);
}
.ifp-casos__logo-cell span:last-child{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-casos__logo-cell:hover{ background:var(--ifp-active); }
.ifp-casos__logo-cell:hover .ifp-sq{ opacity:1; }
.ifp-casos__logo-cell:hover span:last-child{ color:#fff; }

/* ---- Closing ------------------------------------------------------- */

.ifp-casos__closing{
  margin-top:72px;
  padding-bottom:104px;
}
@media (max-width:767px){ .ifp-casos__closing{ margin-top:40px; padding-bottom:52px; } }

.ifp-casos__closing-rule{
  width:64px;height:2px;
  background:var(--ifp-orange);
  margin-bottom:30px;
}
@media (max-width:767px){ .ifp-casos__closing-rule{ width:52px; margin-bottom:22px; } }

.ifp-casos__closing-grid{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:767px){ .ifp-casos__closing-grid{ grid-template-columns:1fr; gap:16px; } }

.ifp-casos__closing-statement{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(28px, 3.4vw, 44px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.08;
  color:#fff;
  text-wrap:pretty;
}
.ifp-casos__closing-sub{
  margin:0;
  padding-bottom:6px;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
}

/* ==========================================================
   10. EXPERIENCIA — src/css/sections/experiencia.css
   ========================================================== */
/*
 * IFP Digital — Experiencia (v2, approved editorial version)
 * Source: design-reference/IFP Experiencia v2.dc.html
 * Spec: design-reference/README.md §2.7
 */

.ifp-experiencia{
  background:var(--ifp-bone);
  padding-top:112px;
}

.ifp-experiencia__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:34px;
}
.ifp-experiencia__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.ifp-experiencia__header{
  display:grid;
  grid-template-columns:1.32fr .68fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:1199px){
  .ifp-experiencia__header{ grid-template-columns:1fr; align-items:start; gap:28px; }
}

.ifp-experiencia__heading{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(42px, 8.4vw, 84px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.0;
  color:var(--ifp-charcoal);
}
.ifp-experiencia__heading-accent{ color:var(--ifp-orange); }

.ifp-experiencia__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px, 3vw, 32px);
  padding-bottom:clamp(0px, 1vw, 12px);
}
.ifp-experiencia__stat{ padding-top:18px; }
.ifp-experiencia__stat--charcoal{ border-top:2px solid var(--ifp-charcoal); }
.ifp-experiencia__stat--orange{ border-top:2px solid var(--ifp-orange); }
.ifp-experiencia__stat-value{
  font-family:var(--font-display);
  font-size:clamp(52px, 7vw, 72px);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:.9;
  color:var(--ifp-charcoal);
}
.ifp-experiencia__stat-label{
  margin-top:14px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
@media (max-width:767px){
  .ifp-experiencia__stats{ margin-top:32px; }
  .ifp-experiencia__stat{ padding-top:14px; }
  .ifp-experiencia__stat-label{ margin-top:10px; }
}

.ifp-experiencia__lead{
  margin:40px 0 0;
  font-family:var(--font-body);
  font-size:20px;
  line-height:1.55;
  color:var(--text-body);
  max-width:620px;
}
@media (max-width:767px){
  .ifp-experiencia__lead{ margin-top:28px; font-size:16px; line-height:1.6; }
}

/* ---- Markets --------------------------------------------------------- */

.ifp-experiencia__markets{
  margin-top:80px;
}
.ifp-experiencia__market{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  padding:30px 24px;
  margin:0 -24px;
  border-top:1px solid var(--line-light);
  background-image:linear-gradient(var(--ifp-orange), var(--ifp-orange));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0% 2px;
  transition:background-color 200ms var(--ease), background-size 300ms var(--ease);
}
.ifp-experiencia__market:first-child{ border-top:2px solid var(--ifp-charcoal); }
.ifp-experiencia__market:last-child{ border-bottom:1px solid var(--line-light); }
.ifp-experiencia__market .ifp-sq{
  opacity:.2;
  transform:scale(.5);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ifp-experiencia__market:hover,
.ifp-experiencia__market:focus-within{
  background-color:var(--ifp-bone-active);
  background-size:100% 2px;
}
.ifp-experiencia__market:hover .ifp-sq,
.ifp-experiencia__market:focus-within .ifp-sq{
  opacity:1;
  transform:scale(1);
}
.ifp-experiencia__market-name{
  font-family:var(--font-display);
  font-size:clamp(32px, 4vw, 52px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.04;
  color:var(--ifp-charcoal);
}
.ifp-experiencia__market-detail{
  margin-left:auto;
  flex:0 0 auto;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.5;
  color:var(--text-muted);
  transition:color var(--dur) var(--ease);
}
.ifp-experiencia__market:hover .ifp-experiencia__market-detail,
.ifp-experiencia__market:focus-within .ifp-experiencia__market-detail{
  color:var(--text-body);
}

@media (max-width:1199px){
  .ifp-experiencia__market{ flex-wrap:wrap; }
  .ifp-experiencia__market-detail{ margin-left:20px; flex-basis:100%; }
}
@media (max-width:767px){
  .ifp-experiencia__markets{ margin-top:56px; }
  .ifp-experiencia__market{ padding:22px 0; margin:0; gap:0; }
  .ifp-experiencia__market-detail{ margin-left:0; padding-left:20px; margin-top:10px; font-size:15px; flex-basis:100%; }
}

.ifp-experiencia__disclaimer{
  margin:20px 0 0;
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--text-muted);
}

/* ---- Verticals index --------------------------------------------- */

.ifp-experiencia__verticals{
  margin-top:104px;
  padding-bottom:112px;
}
@media (max-width:767px){
  .ifp-experiencia__verticals{ margin-top:48px; padding-bottom:56px; }
}

.ifp-experiencia__verticals-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:34px;
}
.ifp-experiencia__verticals-head span:nth-child(2){
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ifp-experiencia__verticals-rule{
  flex:1;
  height:1px;
  background:var(--line-light);
}

.ifp-experiencia__verticals-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(5, auto);
  grid-auto-flow:column;
  column-gap:72px;
}
@media (max-width:767px){
  .ifp-experiencia__verticals-list{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row;
  }
}

.ifp-experiencia__vertical{
  display:flex;
  align-items:baseline;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--line-light);
}
.ifp-experiencia__vertical span:first-child{
  width:30px;
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:500;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--text-muted);
}
.ifp-experiencia__vertical span:last-child{
  font-family:var(--font-display);
  font-size:clamp(22px, 2.4vw, 30px);
  font-weight:500;
  letter-spacing:-.028em;
  line-height:1.16;
  color:var(--ifp-charcoal);
}
@media (max-width:767px){
  .ifp-experiencia__vertical{ padding:16px 0; gap:16px; }
  .ifp-experiencia__vertical span:first-child{ width:22px; font-size:12px; }
}

/* ==========================================================
   11. RECURSOS (homepage section) — src/css/sections/recursos.css
   ========================================================== */
/*
 * IFP Digital — Recursos
 * Source: design-reference/IFP Recursos.dc.html
 * Spec: design-reference/README.md §2.8
 */

.ifp-recursos{
  background:var(--ifp-bone);
  padding-top:104px;
}

.ifp-recursos__header{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:1199px){
  .ifp-recursos__header{ grid-template-columns:1fr; align-items:start; gap:20px; }
}

.ifp-recursos__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}
.ifp-recursos__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ifp-recursos__heading{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(40px, 5.6vw, 66px);
  font-weight:500;
  letter-spacing:-.038em;
  line-height:1.02;
  color:var(--ifp-charcoal);
  text-wrap:balance;
}
.ifp-recursos__lead{
  margin:0;
  font-family:var(--font-body);
  font-size:20px;
  line-height:1.55;
  color:var(--text-body);
  max-width:420px;
}
@media (max-width:767px){ .ifp-recursos__lead{ font-size:16px; line-height:1.6; } }

.ifp-recursos__header-cta{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line-light);
}
.ifp-recursos__trust-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  color:var(--ifp-charcoal);
  padding-bottom:5px;
  border-bottom:2px solid var(--ifp-orange);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-recursos__trust-cta:hover{ color:var(--ifp-orange); }

/* ---- Grid ---------------------------------------------------------- */

.ifp-recursos__grid{
  margin-top:64px;
  display:grid;
  grid-template-columns:1.42fr 1fr;
  gap:24px;
  align-items:stretch;
}
@media (max-width:1199px){
  .ifp-recursos__grid{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .ifp-recursos__grid{ margin-top:36px; gap:20px; }
}

.ifp-recursos__secondary-list{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:24px;
}
@media (max-width:1199px){ .ifp-recursos__secondary-list{ grid-template-rows:none; } }
@media (max-width:767px){ .ifp-recursos__secondary-list{ gap:20px; } }

.ifp-recursos__card{
  --line:#303030;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--radius-card-lg);
  overflow:hidden;
  background:var(--ifp-panel);
  transition:border-color var(--dur) var(--ease);
}
.ifp-recursos__card--secondary{
  flex-direction:row;
  border-radius:var(--radius-card);
  background:var(--ifp-bone-3);
  --line:var(--line-light);
}
.ifp-recursos__card--featured:hover,
.ifp-recursos__card--featured:focus-within{
  --line:var(--line-dark-active);
}
.ifp-recursos__card--secondary:hover,
.ifp-recursos__card--secondary:focus-within{
  --line:#CFCCC5;
  background:#FCFBFA;
}

.ifp-recursos__cover{
  height:330px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  transition:border-color var(--dur) var(--ease);
}
.ifp-recursos__cover--secondary{
  height:auto;
  width:172px;
  flex:0 0 auto;
  border-bottom:0;
  border-right:1px solid var(--line);
}
.ifp-recursos__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.06);
  transition:transform var(--dur-slow) var(--ease);
}
.ifp-recursos__cover--secondary img{ transform:scale(1.08); }
.ifp-recursos__card:hover .ifp-recursos__cover img,
.ifp-recursos__card:focus-within .ifp-recursos__cover img{
  transform:translateY(-10px) scale(1.06);
}
.ifp-recursos__cover--secondary img:not([style]){ }

.ifp-recursos__card-body{
  padding:34px;
  display:flex;
  flex-direction:column;
  gap:22px;
  flex:1;
  min-width:0;
}
.ifp-recursos__card--secondary .ifp-recursos__card-body{
  padding:24px 26px;
  gap:14px;
}

.ifp-recursos__card-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.ifp-recursos__card-num{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.62);
}
.ifp-recursos__card--secondary .ifp-recursos__card-num{ font-size:12px; color:var(--text-muted); }
.ifp-recursos__card:hover .ifp-recursos__card-num,
.ifp-recursos__card:focus-within .ifp-recursos__card-num{ color:#fff; }
.ifp-recursos__card--secondary:hover .ifp-recursos__card-num,
.ifp-recursos__card--secondary:focus-within .ifp-recursos__card-num{ color:var(--ifp-charcoal); }
.ifp-recursos__card-rule{ width:18px; height:1px; background:var(--line); }
.ifp-recursos__card-type{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.ifp-recursos__card--secondary .ifp-recursos__card-type{ font-size:10.5px; color:var(--text-muted); }
.ifp-recursos__card:hover .ifp-recursos__card-type,
.ifp-recursos__card:focus-within .ifp-recursos__card-type{ color:#fff; }
.ifp-recursos__card--secondary:hover .ifp-recursos__card-type,
.ifp-recursos__card--secondary:focus-within .ifp-recursos__card-type{ color:var(--ifp-charcoal); }
.ifp-recursos__card-meta{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.62);
}
.ifp-recursos__card--secondary .ifp-recursos__card-meta{ color:var(--text-muted); }
.ifp-recursos__card-mark{
  margin-left:auto;
  opacity:.2;
  transform:scale(.55);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ifp-recursos__card:hover .ifp-recursos__card-mark,
.ifp-recursos__card:focus-within .ifp-recursos__card-mark{ opacity:1; transform:scale(1); }

.ifp-recursos__card-title{
  margin:0;
  font-family:var(--font-display);
  font-size:38px;
  font-weight:500;
  letter-spacing:-.032em;
  line-height:1.1;
  color:#fff;
  max-width:520px;
  text-wrap:pretty;
}
.ifp-recursos__card-title--sm{
  font-size:25px;
  letter-spacing:-.028em;
  line-height:1.16;
  color:var(--ifp-charcoal);
}
.ifp-recursos__card-desc{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.74);
  max-width:500px;
  transition:color var(--dur-fast) var(--ease);
}
.ifp-recursos__card-desc--sm{
  font-size:14.5px;
  line-height:1.55;
  color:var(--text-body);
}
.ifp-recursos__card:hover .ifp-recursos__card-desc,
.ifp-recursos__card:focus-within .ifp-recursos__card-desc{ color:rgba(255,255,255,.9); }

.ifp-recursos__card-footer{
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transition:border-color var(--dur) var(--ease);
}
.ifp-recursos__card--secondary .ifp-recursos__card-footer{ padding-top:16px; }
.ifp-recursos__card-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,.78);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-recursos__card--secondary .ifp-recursos__card-cta{ font-size:14px; color:var(--ifp-charcoal); }
.ifp-recursos__card-cta span{ transition:transform var(--dur) var(--ease); }
.ifp-recursos__card:hover .ifp-recursos__card-cta,
.ifp-recursos__card:focus-within .ifp-recursos__card-cta{ color:var(--ifp-orange); }
.ifp-recursos__card:hover .ifp-recursos__card-cta span,
.ifp-recursos__card:focus-within .ifp-recursos__card-cta span{ transform:translateX(4px); }

.ifp-recursos__disclaimer{
  margin:44px 0 0;
  padding-bottom:104px;
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--text-muted);
}

@media (max-width:767px){
  .ifp-recursos__cover{ height:196px; }
  .ifp-recursos__cover--secondary{ height:110px; width:100%; border-right:0; border-bottom:1px solid var(--line); }
  .ifp-recursos__card--secondary{ flex-direction:column; }
  .ifp-recursos__card-title{ font-size:27px; }
  .ifp-recursos__card-title--sm{ font-size:23px; }
  .ifp-recursos__card-body{ padding:24px 20px; gap:16px; }
  .ifp-recursos__card--secondary .ifp-recursos__card-body{ padding:20px; gap:13px; }
  .ifp-recursos__disclaimer{ padding-bottom:52px; }
}

/* ==========================================================
   12. MÉTODO — src/css/sections/metodo.css
   ========================================================== */
/*
 * IFP Digital — Método / Cómo trabajamos
 * Source: design-reference/IFP Metodo.dc.html
 * Spec: design-reference/README.md §2.9
 *
 * Active-phase coordination uses CSS :has() so hover/focus can instantly
 * override the JS-driven scroll state without any JS-side coordination:
 * while the phases container :has(a :hover), that wins; otherwise the
 * single .is-active phase (set by metodo.js via IntersectionObserver)
 * wins. Cycle panel dots are styled the same way from .is-active/.is-passed
 * classes metodo.js toggles on an interval.
 */

.ifp-metodo{
  background:var(--ifp-deep);
  padding-top:104px;
}

.ifp-metodo__header{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
}
@media (max-width:1199px){
  .ifp-metodo__header{ grid-template-columns:1fr; gap:40px; }
}

.ifp-metodo__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
}
.ifp-metodo__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-metodo__heading{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(30px, 4.6vw, 62px);
  font-weight:500;
  letter-spacing:-.038em;
  line-height:1.02;
  color:#fff;
  max-width:640px;
  text-wrap:balance;
}
.ifp-metodo__heading-dim{ color:rgba(255,255,255,.46); }
.ifp-metodo__lead{
  margin:28px 0 0;
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:560px;
}
.ifp-metodo__lead-secondary{
  margin:18px 0 0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
  max-width:540px;
}
@media (max-width:767px){
  .ifp-metodo{ padding-top:56px; }
  .ifp-metodo__lead{ font-size:16px; margin-top:20px; }
  .ifp-metodo__lead-secondary{ font-size:15px; margin-top:14px; }
}

/* ---- Cycle panel --------------------------------------------------- */

.ifp-metodo__cycle{
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card-lg);
  padding:28px 28px 24px;
  background:var(--ifp-panel);
}
@media (max-width:767px){
  .ifp-metodo__cycle{ margin-top:32px; padding:20px; border-radius:var(--radius-card); }
}
.ifp-metodo__cycle-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.ifp-metodo__cycle-head span:first-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}
.ifp-metodo__cycle-tagline{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:500;
  letter-spacing:-.01em;
  color:#fff;
}

.ifp-metodo__cycle-stages{ display:flex; flex-direction:column; }
.ifp-metodo__cycle-stage{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0;
}
.ifp-metodo__cycle-dot{
  width:9px;height:9px;
  flex:0 0 auto;
  border-radius:var(--radius-mark);
  background:#4A4A4A;
  transition:background var(--dur) var(--ease);
}
.ifp-metodo__cycle-stage.is-active .ifp-metodo__cycle-dot,
.ifp-metodo__cycle-stage.is-passed .ifp-metodo__cycle-dot{
  background:var(--ifp-orange);
}
.ifp-metodo__cycle-label{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:500;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.6);
  transition:color var(--dur) var(--ease);
}
.ifp-metodo__cycle-stage.is-active .ifp-metodo__cycle-label{ color:#fff; }
.ifp-metodo__cycle-stage.is-passed .ifp-metodo__cycle-label{ color:rgba(255,255,255,.82); }
.ifp-metodo__cycle-num{
  margin-left:auto;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
  transition:color var(--dur) var(--ease);
}
.ifp-metodo__cycle-stage.is-active .ifp-metodo__cycle-num{ color:rgba(255,255,255,.82); }
.ifp-metodo__cycle-connector{
  height:18px;
  margin-left:4px;
  width:1px;
  background:var(--line-dark-2);
}
@media (max-width:767px){ .ifp-metodo__cycle-connector{ height:14px; } }

.ifp-metodo__cycle-note{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line-dark-3);
  display:flex;
  align-items:center;
  gap:12px;
}
.ifp-metodo__cycle-return{
  width:22px;height:22px;
  flex:0 0 auto;
  border:1px solid #4E4E4E;
  border-right-color:var(--ifp-orange);
  border-radius:var(--radius-mark);
}
.ifp-metodo__cycle-note span:last-child{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--text-on-inverse-muted);
}

/* ---- Phases head ----------------------------------------------------- */

.ifp-metodo__phases-head{
  margin-top:88px;
  display:flex;
  align-items:center;
  gap:14px;
}
@media (max-width:767px){ .ifp-metodo__phases-head{ margin-top:48px; } }
.ifp-metodo__phases-head span:first-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}
.ifp-metodo__phases-rule{ flex:1; height:1px; background:var(--line-dark); }
.ifp-metodo__phases-active-label{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--text-on-inverse-muted);
}
.ifp-metodo__phases-active-label [data-phase-name]{ color:#fff; font-weight:500; }
@media (max-width:767px){ .ifp-metodo__phases-active-label{ display:none; } }

/* ---- Phase rows -------------------------------------------------- */

.ifp-metodo__phases{ margin-top:28px; }

.ifp-metodo__phase{
  display:grid;
  grid-template-columns:190px minmax(0,420px) minmax(0,240px) minmax(0,1fr);
  gap:40px;
  align-items:start;
  padding:40px 28px 44px;
  margin:0 -28px;
  border-top:1px solid var(--line-dark-3);
  transition:background var(--dur) var(--ease);
}
.ifp-metodo__phase:first-child{ border-top:2px solid var(--ifp-charcoal); }
.ifp-metodo__phase:last-child{ border-bottom:1px solid var(--line-dark); }

.ifp-metodo__phase-num{
  font-family:var(--font-display);
  font-size:86px;
  font-weight:500;
  letter-spacing:-.05em;
  line-height:.86;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.34);
  transition:color var(--dur) var(--ease);
}
.ifp-metodo__phase-num-col{ display:flex; flex-direction:column; gap:18px; }
.ifp-metodo__phase-label{ display:flex; align-items:center; gap:10px; }
.ifp-metodo__phase-label .ifp-sq{
  opacity:.18;
  transform:scale(.5);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ifp-metodo__phase-label span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  transition:color var(--dur) var(--ease);
}
.ifp-metodo__phase-bar{
  display:flex;
  gap:5px;
  height:10px;
  width:100px;
}
.ifp-metodo__phase-bar span{
  flex:1;
  background:var(--line-dark-3);
}
.ifp-metodo__phase-bar span.is-lit{
  background:#4A4A4A;
  transition:background var(--dur) var(--ease);
}

.ifp-metodo__phase-prop{
  margin:0;
  font-family:var(--font-display);
  font-size:30px;
  font-weight:500;
  letter-spacing:-.028em;
  line-height:1.2;
  color:rgba(255,255,255,.74);
  max-width:420px;
  text-wrap:pretty;
  transition:color var(--dur) var(--ease);
}

.ifp-metodo__phase-activities{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding-top:6px;
}
.ifp-metodo__phase-activities span{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.58);
  transition:color var(--dur) var(--ease);
}

.ifp-metodo__phase-result{
  padding-left:32px;
  border-left:1px solid var(--line-dark-2);
  transition:border-color var(--dur) var(--ease);
}
.ifp-metodo__phase-result-label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:14px;
  transition:color var(--dur) var(--ease);
}
.ifp-metodo__phase-result p{
  margin:0;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.28;
  color:rgba(255,255,255,.72);
  text-wrap:pretty;
  transition:color var(--dur) var(--ease);
}

/* ---- Active state: JS scroll-state OR hover/focus, hover always wins - */

.ifp-metodo__phase.is-active,
.ifp-metodo__phase:hover,
.ifp-metodo__phase:focus-within{
  background:var(--ifp-active);
  box-shadow:inset 2px 0 0 0 var(--ifp-orange);
}
.ifp-metodo__phases:has(.ifp-metodo__phase:hover) .ifp-metodo__phase.is-active:not(:hover){
  background:transparent;
  box-shadow:none;
}
.ifp-metodo__phase.is-active .ifp-metodo__phase-num,
.ifp-metodo__phase:hover .ifp-metodo__phase-num,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-num{ color:#fff; }
.ifp-metodo__phase.is-active .ifp-metodo__phase-label .ifp-sq,
.ifp-metodo__phase:hover .ifp-metodo__phase-label .ifp-sq,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-label .ifp-sq{ opacity:1; transform:scale(1); }
.ifp-metodo__phase.is-active .ifp-metodo__phase-label span:last-child,
.ifp-metodo__phase:hover .ifp-metodo__phase-label span:last-child,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-label span:last-child{ color:#fff; }
.ifp-metodo__phase.is-active .ifp-metodo__phase-prop,
.ifp-metodo__phase:hover .ifp-metodo__phase-prop,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-prop{ color:#fff; }
.ifp-metodo__phase.is-active .ifp-metodo__phase-activities span,
.ifp-metodo__phase:hover .ifp-metodo__phase-activities span,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-activities span{ color:rgba(255,255,255,.9); }
.ifp-metodo__phase.is-active .ifp-metodo__phase-result,
.ifp-metodo__phase:hover .ifp-metodo__phase-result,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-result{ border-left-color:var(--ifp-orange); }
.ifp-metodo__phase.is-active .ifp-metodo__phase-result-label,
.ifp-metodo__phase:hover .ifp-metodo__phase-result-label,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-result-label{ color:#fff; }
.ifp-metodo__phase.is-active .ifp-metodo__phase-result p,
.ifp-metodo__phase:hover .ifp-metodo__phase-result p,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-result p{ color:#fff; }
.ifp-metodo__phase.is-active .ifp-metodo__phase-bar span.is-lit,
.ifp-metodo__phase:hover .ifp-metodo__phase-bar span.is-lit,
.ifp-metodo__phase:focus-within .ifp-metodo__phase-bar span.is-lit{ background:var(--ifp-orange); }

/* ---- Closing ------------------------------------------------------- */

.ifp-metodo__closing{ margin-top:80px; padding-bottom:104px; }
@media (max-width:767px){ .ifp-metodo__closing{ margin-top:48px; padding-bottom:52px; } }
.ifp-metodo__closing-rule{ width:64px; height:2px; background:var(--ifp-orange); margin-bottom:30px; }
.ifp-metodo__closing-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:end;
}
@media (max-width:1199px){ .ifp-metodo__closing-grid{ grid-template-columns:1fr; gap:24px; } }
.ifp-metodo__closing-statement{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(30px, 3.4vw, 46px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.08;
  color:#fff;
  text-wrap:pretty;
}
.ifp-metodo__closing-sub{
  margin:18px 0 0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
  max-width:600px;
}
.ifp-metodo__closing-cta{ padding-bottom:8px; }
@media (max-width:767px){
  .ifp-metodo__closing-cta{ padding-bottom:0; margin-top:24px; }
  .ifp-metodo__closing-cta .ifp-btn{ width:100%; }
}

/* ===================================================================
   Mobile ≤767 — phases always fully visible, stacked (no accordion; see
   the section handoff notes for why). Numerals shrink, bar/result keep
   the same grammar, just single-column.
   =================================================================== */
@media (max-width:767px){
  .ifp-metodo__phase{
    grid-template-columns:1fr;
    gap:16px;
    padding:24px 0 26px;
    margin-inline:0;
  }
  .ifp-metodo__phase-num-col{ flex-direction:row; align-items:center; gap:14px; }
  .ifp-metodo__phase-num{ font-size:40px; }
  .ifp-metodo__phase-bar{ display:none; }
  .ifp-metodo__phase-result{ padding-left:0; border-left:0; border-top:2px solid var(--line-dark-2); padding-top:16px; }
  .ifp-metodo__phase.is-active .ifp-metodo__phase-result,
  .ifp-metodo__phase:hover .ifp-metodo__phase-result,
  .ifp-metodo__phase:focus-within .ifp-metodo__phase-result{ border-top-color:var(--ifp-orange); border-left-color:transparent; }
}

/* ==========================================================
   13. DIAGNÓSTICO — src/css/sections/diagnostico.css
   ========================================================== */
/*
 * IFP Digital — Diagnóstico (final CTA)
 * Source: design-reference/IFP Diagnostico.dc.html
 * Spec: design-reference/README.md §2.10
 *
 * Field-focus square/rule is pure CSS via :focus-within on each .ifp-field
 * label — no JS tracks "which field is active."
 */

.ifp-diagnostico{
  background:var(--ifp-deep);
  padding:112px 0;
}
@media (max-width:767px){ .ifp-diagnostico{ padding:64px 0 0; } }

.ifp-diagnostico__grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:80px;
  align-items:start;
}
@media (max-width:1199px){
  .ifp-diagnostico__grid{ grid-template-columns:1fr; gap:48px; }
}

.ifp-diagnostico__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:30px;
}
.ifp-diagnostico__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-diagnostico__heading{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(38px, 5.6vw, 72px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.0;
  color:#fff;
  max-width:600px;
  text-wrap:balance;
}
.ifp-diagnostico__lead{
  margin:32px 0 0;
  font-family:var(--font-body);
  font-size:21px;
  line-height:1.5;
  color:#fff;
  max-width:480px;
}
.ifp-diagnostico__sublead{
  margin:18px 0 0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
  max-width:460px;
}
@media (max-width:767px){
  .ifp-diagnostico__lead{ font-size:17px; margin-top:22px; }
  .ifp-diagnostico__sublead{ font-size:15px; margin-top:14px; }
}

.ifp-diagnostico__trust{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line-dark);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
}
.ifp-diagnostico__trust span{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  letter-spacing:-.01em;
  color:#fff;
}
.ifp-diagnostico__trust-dot{
  width:4px;height:4px;
  border-radius:1px;
  background:#4E4E4E;
}
.ifp-diagnostico__trust-note{
  margin:16px 0 0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
}
@media (max-width:767px){
  .ifp-diagnostico__trust{ margin-top:28px; padding-top:20px; gap:12px; }
  .ifp-diagnostico__trust span{ font-size:15px; }
  .ifp-diagnostico__trust-note{ font-size:14px; }
}

/* ---- Cal.com placeholder ---------------------------------------- */

.ifp-diagnostico__cal{
  margin-top:56px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card);
  background:var(--ifp-panel);
  padding:24px;
}
@media (max-width:767px){ .ifp-diagnostico__cal{ margin-top:24px; padding:20px; } }
.ifp-diagnostico__cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.ifp-diagnostico__cal-head span:first-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}
.ifp-diagnostico__cal-meta{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-on-inverse-muted);
}
.ifp-diagnostico__cal-days{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;
}
@media (max-width:389px){ .ifp-diagnostico__cal-days{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ifp-diagnostico__cal-day{
  border:1px solid var(--line-dark-2);
  border-radius:var(--radius-control);
  padding:14px 10px;
  text-align:center;
}
.ifp-diagnostico__cal-day span:first-child{
  display:block;
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}
.ifp-diagnostico__cal-day span:last-child{
  display:block;
  margin-top:8px;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:500;
  letter-spacing:-.03em;
  color:rgba(255,255,255,.6);
}
.ifp-diagnostico__cal-day.is-selected{
  border-color:var(--line-dark-active);
  background:var(--ifp-active);
  position:relative;
}
.ifp-diagnostico__cal-day.is-selected::before{
  content:"";
  position:absolute;
  left:10px; top:10px;
  width:7px; height:7px;
  border-radius:var(--radius-mark);
  background:var(--ifp-orange);
}
.ifp-diagnostico__cal-day.is-selected span:first-child{ color:rgba(255,255,255,.82); }
.ifp-diagnostico__cal-day.is-selected span:last-child{ color:#fff; }
.ifp-diagnostico__cal-day.is-disabled{ border-color:var(--line-dark-3); }
.ifp-diagnostico__cal-day.is-disabled span{ color:#4E4E4E; }

.ifp-diagnostico__cal-times{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ifp-diagnostico__cal-times span{
  border:1px solid var(--line-dark-2);
  border-radius:var(--radius-control);
  padding:9px 14px;
  font-family:var(--font-body);
  font-size:13px;
  color:rgba(255,255,255,.72);
}
.ifp-diagnostico__cal-times span.is-selected{
  border-color:var(--ifp-orange);
  background:var(--ifp-active);
  color:#fff;
}
.ifp-diagnostico__cal-note{
  margin:16px 0 0;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.5;
  color:var(--ifp-gray-400);
}

/* ---- Form ---------------------------------------------------------- */

.ifp-diagnostico__form{
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card-lg);
  background:var(--ifp-panel);
  padding:36px;
}
@media (max-width:767px){ .ifp-diagnostico__form{ padding:24px 20px; } }

.ifp-diagnostico__form-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}
.ifp-diagnostico__form-head span:first-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}
.ifp-diagnostico__form-step{
  font-family:var(--font-body);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--text-on-inverse-muted);
}

.ifp-diagnostico__fields{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.ifp-field{
  display:block;
  cursor:text;
}
.ifp-field__label-row{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
}
.ifp-field__mark{
  opacity:.2;
  transform:scale(.5);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ifp-field__label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-field--big .ifp-field__label-row{ margin-bottom:11px; }
.ifp-field__label--big{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  letter-spacing:-.018em;
  text-transform:none;
  color:rgba(255,255,255,.78);
}

.ifp-field input,
.ifp-field textarea{
  display:block;
  width:100%;
  box-sizing:border-box;
  font-family:var(--font-body);
  font-size:16px;
  color:#fff;
  background:transparent;
  border:0;
  padding:0;
  border-radius:var(--radius-mark);
  outline:2px solid transparent;
  outline-offset:2px;
  transition:outline-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ifp-field textarea{
  resize:none;
  line-height:1.55;
}
.ifp-field input::placeholder,
.ifp-field textarea::placeholder{
  color:rgba(255,255,255,.52);
}
.ifp-field input:focus-visible,
.ifp-field textarea:focus-visible{
  outline-color:var(--ifp-orange);
  box-shadow:0 0 0 3px var(--ifp-orange-halo);
}

.ifp-field__rule{
  display:block;
  height:1px;
  margin-top:11px;
  background:var(--line-dark-2);
  transition:background var(--dur) var(--ease);
}
.ifp-field:focus-within .ifp-field__mark{
  opacity:1;
  transform:scale(1);
}
.ifp-field:focus-within .ifp-field__label{ color:#fff; }
.ifp-field:focus-within .ifp-field__label--big{ color:#fff; }
.ifp-field:focus-within .ifp-field__rule{ background:var(--ifp-orange); }
/* Completed (non-empty, not focused) fields settle the rule one step up */
.ifp-field:not(:focus-within) input:not(:placeholder-shown) ~ .ifp-field__rule,
.ifp-field:not(:focus-within) textarea:not(:placeholder-shown) ~ .ifp-field__rule{
  background:var(--line-dark-active);
}

.ifp-field__hint{
  display:block;
  margin-top:10px;
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.55;
  color:var(--text-on-inverse-muted);
}

.ifp-field__error{
  /* No `display` here on purpose — [hidden] (UA stylesheet) keeps this at
     display:none until the sibling-selector rule below explicitly turns
     it on. Setting display:block unconditionally here was a bug: author
     CSS beats the UA [hidden] rule, so it showed the error on every page
     load regardless of field state. */
  margin-top:8px;
  font-family:var(--font-body);
  font-size:13px;
  color:#E9542A;
}
.ifp-field input:invalid:not(:placeholder-shown):not(:focus) ~ .ifp-field__error{
  display:block;
}
.ifp-field input:invalid:not(:placeholder-shown) ~ .ifp-field__rule{
  background:#E9542A;
}

.ifp-diagnostico__form-footer{
  margin-top:32px;
  padding-top:26px;
  border-top:1px solid var(--line-dark-2);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ifp-diagnostico__form-note{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--text-on-inverse-muted);
}
.ifp-diagnostico__form-confirm{
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  color:#fff;
}
.ifp-diagnostico__form-confirm:empty{ display:none; }

/* ==========================================================
   14. FOOTER — src/css/sections/footer.css
   ========================================================== */
/*
 * IFP Digital — Footer
 * Source: design-reference/IFP Footer.dc.html
 * Spec: design-reference/README.md §2.11
 */

.ifp-footer{
  background:var(--ifp-deep);
  padding-top:96px;
}

.ifp-footer__brand{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
}
@media (max-width:1199px){
  .ifp-footer__brand{ grid-template-columns:1fr; gap:20px; }
}
.ifp-footer__logo{
  height:28px;
  width:auto;
  display:block;
}
@media (max-width:767px){ .ifp-footer__logo{ height:24px; } }
.ifp-footer__statement{
  margin:34px 0 0;
  font-family:var(--font-display);
  font-size:clamp(27px, 3vw, 38px);
  font-weight:500;
  letter-spacing:-.032em;
  line-height:1.14;
  color:#fff;
  max-width:540px;
  text-wrap:pretty;
}
.ifp-footer__statement span{ color:rgba(255,255,255,.52); }
.ifp-footer__brand-right p{
  margin:0;
  padding-top:6px;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
  max-width:340px;
}
@media (max-width:767px){ .ifp-footer__brand-right p{ padding-top:0; margin-top:20px; font-size:15px; } }

/* ---- Nav groups + ecosystem bridge --------------------------------- */

.ifp-footer__nav{
  margin-top:72px;
  padding-top:40px;
  border-top:1px solid var(--line-dark);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)) 1.1fr;
  gap:56px;
  align-items:start;
}
@media (max-width:1199px){
  .ifp-footer__nav{ grid-template-columns:1fr 1fr; gap:40px 32px; }
  .ifp-footer__ecosystem{ grid-column:1 / -1; padding-left:0; border-left:0; padding-top:32px; border-top:1px solid var(--line-dark); }
}
@media (max-width:767px){
  .ifp-footer__nav{ margin-top:40px; padding-top:32px; grid-template-columns:1fr; gap:32px; }
}

.ifp-footer__nav-label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
  margin-bottom:22px;
}
.ifp-footer__nav-links{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ifp-footer__nav-links .ifp-marklink{
  align-self:flex-start;
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.72);
  min-height:34px;
}
@media (max-width:767px){
  .ifp-footer__nav-links .ifp-marklink{ font-size:16px; min-height:44px; }
}

.ifp-footer__ecosystem{
  padding-left:40px;
  border-left:1px solid var(--line-dark);
}
.ifp-footer__ecosystem-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
}
.ifp-footer__ecosystem-eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
}
.ifp-footer__ecosystem-title{
  margin:0;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.26;
  color:#fff;
  max-width:300px;
}
.ifp-footer__ecosystem-desc{
  margin:14px 0 0;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
  max-width:320px;
}
.ifp-footer__ecosystem-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:20px;
  min-height:34px;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  color:#fff;
  padding-bottom:5px;
  border-bottom:1px solid #4E4E4E;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ifp-footer__ecosystem-link:hover{
  color:var(--ifp-orange);
  border-color:var(--ifp-orange);
}
.ifp-footer__ecosystem-caption{
  margin-top:18px;
  font-family:var(--font-body);
  font-size:12.5px;
  line-height:1.5;
  color:var(--ifp-gray-400);
}

/* ---- Utility row ---------------------------------------------------- */

.ifp-footer__utility{
  margin-top:72px;
  padding-top:34px;
  border-top:1px solid var(--line-dark);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:48px;
  align-items:start;
}
@media (max-width:1199px){
  .ifp-footer__utility{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:767px){
  .ifp-footer__utility{ margin-top:36px; padding-top:28px; grid-template-columns:1fr; gap:28px; }
}
.ifp-footer__utility-label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifp-gray-400);
  margin-bottom:16px;
}
.ifp-footer__utility-col .ifp-marklink{
  font-size:15px;
  color:rgba(255,255,255,.72);
  min-height:34px;
}
.ifp-footer__office{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}
.ifp-footer__office span{ color:var(--text-on-inverse-muted); }

/* ---- Legal ----------------------------------------------------------- */

.ifp-footer__legal{
  margin-top:64px;
  padding:26px 0 40px;
  border-top:1px solid var(--line-dark-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
@media (max-width:767px){
  .ifp-footer__legal{
    margin-top:36px;
    padding:24px 0 44px;
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:14px;
  }
}
.ifp-footer__copyright{
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--text-on-inverse-muted);
}
.ifp-footer__legal-links{
  display:flex;
  align-items:center;
  gap:28px;
}
@media (max-width:767px){
  .ifp-footer__legal-links{ flex-wrap:wrap; gap:12px 24px; }
}
.ifp-footer__legal-link{
  font-size:13.5px;
  color:var(--text-on-inverse-muted);
  min-height:32px;
}
@media (max-width:767px){ .ifp-footer__legal-link{ min-height:44px; } }

/* ==========================================================
   15. CONTENT TEMPLATES (new — Casos/Recursos/Blog)
   ==========================================================
   Not part of the approved homepage. Built for this WordPress pass using
   the same tokens/components/type scale as the approved sections — no new
   colors, radii, spacing values, or type sizes invented here. Flagged for
   visual review since these layouts were never in the original design
   file (only the homepage teaser cards for Casos/Recursos were approved).
*/

/* Breadcrumbs — used only as a fallback when Rank Math's own breadcrumb
   output isn't present; see inc/seo.php and wordpress/SEO.md. */
.ifp-breadcrumbs{
  padding:14px 0;
}
.ifp-breadcrumbs ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-muted);
}
.ifp-breadcrumbs a{
  text-decoration:none;
  color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease);
}
.ifp-breadcrumbs a:hover{ color:var(--ifp-charcoal); }
.ifp-breadcrumbs--inverse ol,
.ifp-breadcrumbs--inverse a{ color:var(--text-on-inverse-muted); }
.ifp-breadcrumbs--inverse a:hover{ color:#fff; }
.ifp-breadcrumbs li[aria-current="page"]{ color:var(--ifp-charcoal); }
.ifp-breadcrumbs--inverse li[aria-current="page"]{ color:#fff; }
.ifp-breadcrumbs__sep{ opacity:.5; }

/* Content intro band — dark header used by single-caso.php /
   single-recurso.php, reusing Casos/Recursos section tokens exactly. */
.ifp-content-hero{
  background:var(--ifp-deep);
  padding:80px 0 64px;
}
.ifp-content-hero .ifp-breadcrumbs{ margin-bottom:24px; }
.ifp-content-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.ifp-content-hero__eyebrow span:last-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}
.ifp-content-hero__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px, 5vw, 56px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.06;
  color:#fff;
  max-width:820px;
  text-wrap:pretty;
}
.ifp-content-hero__lead{
  margin:24px 0 0;
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.6;
  color:var(--text-on-inverse-muted);
  max-width:680px;
}
.ifp-content-hero__result{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  padding-top:24px;
  border-top:1px solid var(--line-dark);
}
.ifp-content-hero__result-item{ min-width:140px; }
.ifp-content-hero__result-value{
  font-family:var(--font-display);
  font-size:34px;
  font-weight:500;
  letter-spacing:-.03em;
  color:var(--ifp-orange);
}
.ifp-content-hero__result-label{
  margin-top:8px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-on-inverse-muted);
}

/* Prose / article body — Casos (problema/implementación/metodología/
   resultado), Recursos summaries, and standard Blog posts all share this. */
.ifp-article{
  background:var(--ifp-bone);
  padding:64px 0 96px;
}
.ifp-article__body{
  max-width:720px;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--text-body);
}
.ifp-article__body h2{
  margin:48px 0 18px;
  font-family:var(--font-display);
  font-size:clamp(26px, 3vw, 34px);
  font-weight:500;
  letter-spacing:-.028em;
  line-height:1.2;
  color:var(--ifp-charcoal);
}
.ifp-article__body h2:first-child{ margin-top:0; }
.ifp-article__body h3{
  margin:32px 0 14px;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
  letter-spacing:-.022em;
  color:var(--ifp-charcoal);
}
.ifp-article__body p{ margin:0 0 20px; }
.ifp-article__body ul,
.ifp-article__body ol{ margin:0 0 20px; padding-left:22px; }
.ifp-article__body li{ margin-bottom:8px; }
.ifp-article__body a{
  color:var(--ifp-charcoal);
  text-decoration:underline;
  text-decoration-color:var(--ifp-orange);
  text-underline-offset:3px;
}
.ifp-article__body a:hover{ color:var(--ifp-orange); }
.ifp-article__body blockquote{
  margin:28px 0;
  padding-left:24px;
  border-left:2px solid var(--ifp-orange);
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.4;
  color:var(--ifp-charcoal);
}
.ifp-article__body table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 24px;
  font-size:15px;
}
.ifp-article__body th,
.ifp-article__body td{
  padding:10px 14px;
  border-bottom:1px solid var(--line-light);
  text-align:left;
}
.ifp-article__body img{
  border-radius:var(--radius-card);
  margin:24px 0;
}
.ifp-article__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:32px;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-muted);
}
.ifp-article__meta .ifp-dot{ background:#CFCCC5; }
.ifp-article__thumbnail{
  margin:0 0 40px;
  border-radius:var(--radius-card-lg);
  overflow:hidden;
}
.ifp-article__thumbnail img{
  width:100%;
  height:auto;
  display:block;
}

/* Related content grid — used at the bottom of single-caso / single-recurso
   / single blog post, and reused for the Casos/Recursos archive grids. */
.ifp-related{
  background:var(--ifp-bone-2);
  padding:64px 0;
}
.ifp-related__head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:32px;
}
.ifp-related__head span:first-child{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ifp-related__rule{ flex:1; height:1px; background:var(--line-light); }
.ifp-related__grid,
.ifp-archive__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
}
@media (max-width:1199px){
  .ifp-related__grid,
  .ifp-archive__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px){
  .ifp-related__grid,
  .ifp-archive__grid{ grid-template-columns:1fr; }
}
.ifp-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid var(--line-light);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--ifp-bone-3);
  transition:border-color var(--dur) var(--ease);
}
.ifp-card:hover,
.ifp-card:focus-within{ border-color:var(--ifp-gray-300, #CFCCC5); }
.ifp-card__cover{
  height:172px;
  background:var(--ifp-bone-2);
  overflow:hidden;
}
.ifp-card__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ifp-card__body{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.ifp-card__meta{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ifp-card__title{
  margin:0;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.22;
  color:var(--ifp-charcoal);
}
.ifp-card__excerpt{
  margin:0;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.55;
  color:var(--text-body);
}
.ifp-card__cta{
  margin-top:auto;
  padding-top:14px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  color:var(--ifp-charcoal);
}

/* Archive header (archive-caso.php / archive-recurso.php / blog archive) */
.ifp-archive-header{
  background:var(--ifp-bone);
  padding:80px 0 48px;
}
.ifp-archive-header__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px, 5vw, 54px);
  font-weight:500;
  letter-spacing:-.035em;
  color:var(--ifp-charcoal);
}
.ifp-archive-header__desc{
  margin:18px 0 0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--text-body);
  max-width:600px;
}
.ifp-archive{
  background:var(--ifp-bone);
  padding:0 0 96px;
}

/* Prev/next post navigation */
.ifp-post-nav{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line-light);
  font-family:var(--font-body);
  font-size:14px;
}
.ifp-post-nav a{ color:var(--ifp-charcoal); text-decoration:none; }
.ifp-post-nav a:hover{ color:var(--ifp-orange); }
.ifp-post-nav__label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:4px;
}

/* 404 / search */
.ifp-notfound{
  background:var(--ifp-deep);
  padding:120px 0;
  text-align:center;
}
.ifp-notfound__title{
  font-family:var(--font-display);
  font-size:clamp(48px, 8vw, 96px);
  font-weight:500;
  color:#fff;
  margin:0;
}
.ifp-notfound__text{
  margin:16px 0 32px;
  font-family:var(--font-body);
  font-size:17px;
  color:var(--text-on-inverse-muted);
}

/* ==========================================================
   16. WORDPRESS NAV MENU FALLBACK (new)
   ==========================================================
   Only engages when a real WP menu is assigned to the 'primary' or one of
   the three 'footer-*' locations (Appearance → Menus) — wp_nav_menu()
   outputs <ul><li><a>, but .ifp-nav / .ifp-footer__nav-links are flex rows
   expecting flat <a class="ifp-marklink"> children (see inc/setup.php's
   nav_menu_link_attributes filter, which adds that class automatically).
   display:contents on the <ul>/<li> removes their own boxes so the <a>
   tags become direct flex items, matching the approved layout exactly
   without a custom Walker class.
*/
.ifp-nav--wp-menu ul,
.ifp-nav--wp-menu li,
.ifp-footer__nav-links.ifp-footer__nav-links--wp-menu ul,
.ifp-footer__nav-links.ifp-footer__nav-links--wp-menu li{
  display:contents;
}