/* Amergent Partners — Fondos: hero, fund comparison table, regulatory note and the closing
   "¿Cómo invertir?" band. Loaded after site.css.
   Mobile-first (breakpoints in css/tokens.css). From lg (1024px) the original desktop layout;
   at 1440px it renders exactly as the reference design. */

/* The comparison header compacts while pinned, which changes the table's height. With scroll
   anchoring the browser would compensate by scrolling, un-pinning the header again (a loop),
   so this page opts out: content below simply slides up as the header shrinks. */
body { overflow-anchor: none; }

/* ── Hero ───────────────────────────────────────────────────────────── */

/* The photo is a zoomed crop: 210% of the hero width, positioned at 46% 18% (the original
   `background-size: 210% auto; background-position: 46% 18%`). Where 210% would not cover the
   hero (tall phone screens) it grows to cover it instead, keeping the same 46% focal column. */
.page-hero--fondos .page-hero__img { container-type: size; overflow: hidden; }
.page-hero--fondos .page-hero__img > img {
  position: absolute; left: 46%; top: 18%;
  width: 210%; width: max(210cqw, 272.106cqh); /* 272.106 = 100 × 2068 / 760, the photo's ratio */
  height: auto; max-width: none;
  transform: translate(-46%, -18%);
}

@media (min-width: 1024px) {
  .page-hero--fondos .page-hero__body { grid-template-columns: minmax(0,1fr) minmax(0,500px); gap: 80px; }
}


/* ── 01 · Comparativa ───────────────────────────────────────────────── */

.cmp-section {
  padding: var(--space-section-lg) var(--pad-x) clamp(64px, 5.258vw + 44.3px, 120px);
  background: var(--color-bg);
}
.cmp-head { align-items: end; }
.cmp-head__title { display: flex; flex-direction: column; gap: clamp(20px, 0.751vw + 17.2px, 28px); }
.cmp-head__text {
  margin: 0; max-width: 60ch;
  font-size: 16px; line-height: 1.6; color: var(--color-neutral-700); text-wrap: pretty;
}

.cmp-wrap { margin-top: clamp(40px, 3.756vw + 25.95px, 80px); }
.cmp-frame.is-folding { overflow: clip; } /* clip (not hidden): keeps the header sticky to the viewport */
.cmp__marker { height: 1px; margin-bottom: -1px; } /* top-edge marker for fondos.js */

/* Below lg the table is laid out as a grid: each characteristic's label runs across the top of
   its row and the funds' values sit side by side underneath, one column per fund (--funds is set
   by fondos.js), under a header row with one card per fund. From lg it is the original table:
   labels in the first column. */
.cmp {
  --cmp-tint: color-mix(in srgb, var(--color-text) 4%, transparent);
  --funds: 2;
  display: block; width: 100%; border-collapse: separate; border-spacing: 0;
}
.cmp > thead,
.cmp > tbody { display: block; }
.cmp > tbody[hidden] { display: none; }
.cmp tr { display: grid; grid-template-columns: repeat(var(--funds), minmax(0,1fr)); }
.cmp__caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Header row: sticky under the nav; compacts (.is-stuck) once pinned. Below lg the whole header
   row sticks, and only on screens tall enough to spare the room (not on landscape phones). */
.cmp thead th {
  font-weight: 400; text-align: left;
  background: var(--color-bg); border-bottom: 1px solid var(--color-text);
}
/* "Característica" heads the label column, which only exists from lg. */
.cmp__corner {
  position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  clip-path: inset(50%); white-space: nowrap;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-800);
}
.cmp__fund {
  padding: 0 12px 20px; vertical-align: top;
  border-left: 1px solid var(--color-neutral-300);
  transition: padding 300ms ease;
}
.cmp thead .cmp__fund.is-col { background: linear-gradient(var(--cmp-tint), var(--cmp-tint)), var(--color-bg); }
/* First fund column: no divider on its left; the last one ends flush with the content edge. */
.cmp tr > :nth-child(2) { padding-left: 0; border-left: 0; }
.cmp tr > :last-child { padding-right: 0; }

.cmp__fund-in { display: flex; flex-direction: column; gap: 16px; transition: gap 300ms ease; }
.cmp__fund-top { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cmp__tile {
  flex: none; display: flex; flex-direction: column; justify-content: space-between;
  width: 64px; height: 64px; padding: 8px;
  background: var(--color-text); color: var(--color-bg);
  transition: width 300ms ease, height 300ms ease, padding 300ms ease;
}
.cmp__tile-k { font-size: 10px; letter-spacing: 0.12em; transition: opacity 300ms ease; }
.cmp__tile-n { font-size: 28px; line-height: 1; letter-spacing: -0.03em; transition: font-size 300ms ease; }
.cmp__fund-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmp__fund-short { font-size: clamp(18px, 0.188vw + 17.3px, 20px); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-text); }

/* Name, register and links: folds away (height → 0) while the header is pinned. */
.cmp__fund-more {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 300ms ease, opacity 300ms ease;
}
.cmp__fund-more > div {
  min-height: 0; overflow: clip; overflow-clip-margin: 6px; /* room for focus outlines */
  display: flex; flex-direction: column; gap: 12px;
}
.cmp__fund-name { font-size: var(--fs-15); line-height: 1.45; color: var(--color-neutral-800); text-wrap: pretty; }
.cmp__fund-reg { font-size: 12px; letter-spacing: 0.08em; color: var(--color-neutral-700); }
/* Below lg the links are 44px touch targets; the text keeps sitting on its rule. */
.cmp__fund-link {
  align-self: flex-start; display: flex; align-items: flex-end; gap: 10px; min-height: 44px; padding-bottom: 3px;
  font-size: var(--fs-14); font-weight: 600; text-decoration: none; color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
}
.cmp__fund-link .ic { margin-bottom: 3px; }
.cmp__fund-docs { display: flex; flex-direction: column; align-items: flex-start; font-size: var(--fs-13); color: var(--color-neutral-700); }
.cmp__fund-docs > span { display: none; } /* the "·" separator: the links stack below lg */
.cmp__fund-docs a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-neutral-800); text-decoration: underline; text-underline-offset: 3px;
}

/* Pinned and compact: tile + short name per fund (the status chip returns from lg). */
.cmp.is-stuck .cmp__fund { padding-top: 10px; padding-bottom: 10px; }
.cmp.is-stuck .cmp__fund-in { gap: 0; }
.cmp.is-stuck .cmp__fund-top { flex-direction: row; align-items: center; gap: 8px; }
.cmp.is-stuck .cmp__fund-top .status-chip { display: none; }
.cmp.is-stuck .cmp__tile { width: 36px; height: 36px; padding: 4px; }
.cmp.is-stuck .cmp__tile-k { opacity: 0; }
.cmp.is-stuck .cmp__tile-n { font-size: 16px; }
.cmp.is-stuck .cmp__fund-short { font-size: 16px; }
.cmp.is-stuck .cmp__fund-more {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows 300ms ease, opacity 200ms ease, visibility 0s linear 300ms;
}

/* Body rows: label across the top, values below. */
.cmp tbody th {
  grid-column: 1 / -1; padding: 20px 0 8px; text-align: left; vertical-align: top;
  font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
  color: var(--color-neutral-800);
}
.cmp td {
  position: relative; padding: 0 12px 20px; vertical-align: top;
  border-bottom: 1px solid var(--color-neutral-300); border-left: 1px solid var(--color-neutral-300);
  overflow-wrap: break-word;
  transition: background 250ms ease;
}
.cmp td.is-col { background: var(--cmp-tint); }
.cmp__v { display: block; font-size: 16px; line-height: 1.5; color: var(--color-text); text-wrap: pretty; }
.cmp__v sup { font-size: 11px; margin-left: 2px; }
.cmp__v--na { color: var(--color-neutral-700); }
.cmp__sub { display: block; margin-top: 4px; font-size: var(--fs-13); color: var(--color-neutral-700); }

/* Shared row (same value for every fund, set by fondos.js): dashed dividers with an "=" marker. */
.cmp tr.is-shared td + td { border-left-style: dashed; }
.cmp tr.is-shared .cmp__v { color: var(--color-text); }
.cmp__eq {
  position: absolute; top: calc(50% - 10px); left: 0; transform: translate(-50%, -50%); /* centred on the value (the cell's padding is below it) */
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  font-size: 13px; line-height: 1; color: var(--color-neutral-800);
  background: var(--color-bg); border: 1px solid var(--color-neutral-400);
}

/* "Ver todas las características" toggle. */
.cmp__toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--color-text);
  font-family: inherit; font-size: 16px; text-align: left; color: var(--color-text); cursor: pointer;
}
.cmp__toggle[hidden] { display: none; }
.cmp__toggle > span:first-child { white-space: nowrap; }
.cmp__plus { position: relative; display: block; flex: none; width: 16px; height: 16px; }
.cmp__plus > span { position: absolute; background: var(--color-text); }
.cmp__plus > span:first-child { left: 0; right: 0; top: 7px; height: 2px; }
.cmp__plus > span:last-child { top: 0; bottom: 0; left: 7px; width: 2px; transition: transform 300ms ease; }
.cmp__toggle[aria-expanded="true"] .cmp__plus > span:last-child { transform: scaleY(0); }

.cmp__note { margin: 24px 0 0; max-width: 760px; font-size: var(--fs-13); line-height: 1.6; color: var(--color-neutral-700); }

@media (min-width: 480px) {
  .cmp__fund { padding-left: 16px; padding-right: 16px; }
  .cmp td { padding-left: 16px; padding-right: 16px; }

  .cmp.is-stuck .cmp__fund-top { gap: 10px; }
  .cmp.is-stuck .cmp__tile { width: 40px; height: 40px; padding: 5px; }
  .cmp.is-stuck .cmp__tile-n { font-size: 18px; }
  .cmp.is-stuck .cmp__fund-short { font-size: clamp(18px, 0.188vw + 17.3px, 20px); }
}

/* Sticky header below lg (lg+ sticks the header cells instead, see below). Only once fondos.js
   runs (.is-enhanced), since the full-size header is too tall to pin on a phone uncompacted. */
@media (min-height: 500px) {
  .cmp.is-enhanced > thead { position: sticky; top: calc(var(--nav-h) + var(--safe-top)); z-index: 3; }
}

@media (min-width: 768px) {
  .cmp__fund-top { flex-direction: row; align-items: center; gap: 16px; }
  .cmp__tile { width: 80px; height: 80px; padding: 10px; }
  .cmp__tile-n { font-size: 34px; }
}

@media (min-width: 1024px) {
  .cmp-head__title { grid-column: 1 / span 6; }
  .cmp-head__text { grid-column: 8 / span 5; max-width: none; }

  /* The original table. */
  .cmp { display: table; table-layout: fixed; }
  .cmp > thead,
  .cmp.is-enhanced > thead { display: table-header-group; position: static; }
  .cmp > tbody { display: table-row-group; }
  .cmp tr { display: table-row; }
  .cmp th,
  .cmp td { display: table-cell; }

  .cmp thead th { position: sticky; top: calc(var(--nav-h) + var(--safe-top)); z-index: 3; }
  .cmp__corner {
    width: 236px; height: auto; padding: 0 24px 20px 0; vertical-align: bottom;
    clip-path: none; white-space: normal;
  }
  .cmp__fund { padding: 0 24px 24px; }
  .cmp tr > :nth-child(2) { padding-left: 24px; border-left: 1px solid var(--color-neutral-300); }
  .cmp tr > :last-child { padding-right: 24px; }

  .cmp__fund-top { gap: 16px; }
  .cmp__tile { width: 96px; height: 96px; padding: 12px; }
  .cmp__tile-n { font-size: 40px; }
  .cmp__fund-more > div { gap: 16px; }
  .cmp__fund-link { align-items: center; min-height: 0; }
  .cmp__fund-link .ic { margin-bottom: 0; }
  .cmp__fund-docs { flex-direction: row; flex-wrap: wrap; align-items: normal; gap: 8px; }
  .cmp__fund-docs > span { display: block; }
  .cmp__fund-docs a { display: inline; min-height: 0; }

  .cmp.is-stuck .cmp__fund { padding: 14px 24px; }
  .cmp.is-stuck .cmp__fund-top { gap: 16px; }
  .cmp.is-stuck .cmp__fund-top .status-chip { display: flex; }
  .cmp.is-stuck .cmp__tile { width: 44px; height: 44px; padding: 6px; }

  .cmp tbody th { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--color-neutral-300); }
  .cmp td { padding: 22px 24px; }
  .cmp__eq { top: 50%; }
}

@media (hover: hover) {
  .cmp__fund-link:hover { color: var(--color-neutral-700); }
  .cmp__fund-docs a:hover { color: var(--color-text); }
}

/* ── 02 · Aviso legal ───────────────────────────────────────────────── */

.reg-note__grid { align-items: start; }

/* ── 03 · ¿Cómo invertir? ───────────────────────────────────────────── */

.howto-band { padding: var(--space-section-lg) var(--pad-x); background: var(--color-bg); }
.howto-band__grid { gap: 40px; }
.howto-band__copy {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(32px, 2.254vw + 23.6px, 56px);
}
.howto-band__head { display: flex; flex-direction: column; gap: clamp(20px, 0.751vw + 17.2px, 28px); }
.howto-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.howto-band__actions .link-thin { align-self: center; }
.btn-dark--band { gap: 28px; padding: 15px 20px; font-size: 15px; }
.howto-band__photo { --focus: 58% 50%; aspect-ratio: 5 / 4; }

@media (min-width: 1024px) {
  .howto-band__grid { min-height: 520px; gap: 0 24px; }
  .howto-band__copy { grid-column: 1 / span 5; }
  .howto-band__photo { grid-column: 7 / span 6; aspect-ratio: auto; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cmp__fund, .cmp__fund-in, .cmp__tile, .cmp__tile-k, .cmp__tile-n, .cmp__fund-more,
  .cmp.is-stuck .cmp__fund-more, .cmp td, .cmp__plus > span:last-child { transition: none; }
}