/* ============================================================
 MI AFP CON SENTIDO — page sections. Mode: persuade (index, propuesta) · read (experiencias).
 Structure after the Joson education template: full-bleed hero, a three-tile bar that
 overlaps the hero edge, split about block, then lists. Tokens come from styles.css.
 Figures (prices, amounts, percentages, step numbers) are always Roboto 700 with tabular
 numerals; Literata is for headings only, so no two numeral styles sit side by side.
 ============================================================ */

:root {
  --accent: #00D9F0; --accent-hi: #5CE8F7; --accent-ink: #007480; --white: #fff;
  --hair: 2px; --hair-2: 1.5px; --nudge: 3px; --dot: 12px; --icon: 20px; --tap: 44px;
  /* the scaffold's JetBrains Mono file is not shipped; the system mono carries the labels */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-h2: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  --bar-h: 18px; --bar-r: 9px; --sticky-top: 100px; --hero-max: 780px; --media-max: 520px;
}

.section-flush { padding-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ds-allow-hardcode: the standard visually-hidden pattern */
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent-hi); transform: translateY(calc(var(--hair) * -1)); }
.btn-accent:hover svg { transform: translate(var(--nudge), calc(var(--nudge) * -1)); }
:focus-visible { outline-color: var(--accent-ink); }
.fx-loop :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .tiles :focus-visible { outline-color: var(--accent); }
.cta-band { background: var(--ink-2); }
.cta-band h2 { margin-top: 1rem; }

/* ---------- hero: copy on the left, the film's subject on the right ---------- */
.fx-loop { min-height: min(86svh, var(--hero-max)); display: flex; align-items: center; }
.fx-loop video { object-position: 78% 50%; }
.fx-loop::after { background: linear-gradient(90deg, rgba(0, 16, 46, 0.94) 0%, rgba(0, 16, 46, 0.72) 42%, rgba(0, 16, 46, 0.12) 78%); }
.hero-copy { max-width: 41rem; padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(6rem, 5rem + 5vw, 9rem); }
.hero-copy h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.9rem); letter-spacing: -0.02em; margin-top: 1.3rem; color: var(--white); text-wrap: balance; }
.hero-copy h1 .accent { color: var(--accent); }
.hero-copy p { color: rgba(255, 255, 255, 0.88); font-size: var(--text-lead); margin-top: 1.4rem; max-width: 34rem; }
.hero-copy .hero-actions { margin-top: 2rem; }

/* ---------- tiles: the three experiences, overlapping the hero edge ---------- */
.tiles { position: relative; z-index: 2; margin-top: -3.4rem; }
.tiles-bar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ink-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tile { display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 1rem; align-items: center; padding: 1.5rem 1.6rem; color: var(--white); border-left: 1px solid var(--line-dark); transition: background var(--dur-fast) var(--ease); }
.tile:first-child { border-left: 0; }
.tile:hover { background: var(--ink-3); }
.tile-num { grid-row: span 2; font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 2rem; color: var(--accent); line-height: 1; }
.tile-tag { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.tile-title { grid-column: 2; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; }
.tile-go { grid-row: 1 / span 2; grid-column: 3; color: var(--accent); }
.tile-go svg { width: var(--icon); height: var(--icon); transition: transform var(--dur) var(--ease); }
.tile:hover .tile-go svg { transform: translate(var(--nudge), calc(var(--nudge) * -1)); }

.split-media img, .mod-media img { aspect-ratio: 4 / 3; border-radius: var(--radius); width: 100%; object-fit: cover; }

/* ---------- contribution split ---------- */
.rates { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.rate-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.rate-row h3 { font-size: 1.2rem; }
.rate-bar { display: flex; height: var(--bar-h); border-radius: var(--bar-r); overflow: hidden; margin-top: 1.1rem; gap: var(--hair); }
.rate-bar i { flex-basis: 0; }
.rate-worker { background: var(--accent); }
.rate-employer, .rate-account { background: var(--green); }
.rate-system { background: var(--muted-2); }
.rate-list { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.rate-list li { display: grid; grid-template-columns: var(--dot) 1fr auto auto; gap: 0.8rem; align-items: baseline; }
.rate-list i { width: var(--dot); height: var(--dot); border-radius: var(--nudge); align-self: center; }
.rate-pct { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--muted); }
.rate-amt { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 8.5ch; text-align: right; }
.rates-note { color: var(--muted); font-size: 0.95rem; max-width: 70ch; margin-block: 1.4rem; }

/* ---------- how it works (sticky stack beside a sticky heading) ---------- */
.fx-stack-card { border: 1px solid var(--line); }
.fx-stack-card h3 { font-size: var(--text-h3); color: var(--green-ink); }
.fx-stack-card p { color: var(--muted); margin-top: 0.7rem; font-size: var(--text-lead); }

/* ---------- options (the three proposals) ---------- */
/* The three cards share six rows (key, name, price, meta, scope, note) through subgrid, so the
   names, prices, durations and "Incluye:" lines sit on the same baseline and the cards end level. */
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.2rem; }
.opt { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
/* an outline ring instead of a thicker border: the recommended card keeps the same inner box */
.opt.is-rec { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow); } /* ds-allow-hardcode: 1px ring matching the 1px border */
.opt-foot { align-self: end; }
.opt-key { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.opt h3 { font-size: 1.3rem; margin-top: 0.4rem; }
.opt-price { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 0.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.opt-meta { margin-top: 0.5rem; }
/* duration first, so the three durations share a line; the badge sits under it on B only */
.opt-dur { color: var(--muted); }
.opt-rec { color: var(--green-ink); font-weight: 700; margin-top: 0.3rem; }
.opt-inc { font-weight: 600; margin-top: 1.3rem; }
.opt .check-list { margin-top: 0.8rem; gap: 0.7rem; }
.opt-text { margin-top: 1.3rem; }
.opt-note { color: var(--muted); font-size: 0.92rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.opt-more { margin-top: 1.8rem; }

/* ---------- experience modules ---------- */
.mod-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.mod-media { position: sticky; top: var(--sticky-top); }
.mod-body h2 { font-size: var(--text-h2); margin-top: 1rem; text-wrap: balance; }
.mod-body h3 { font-size: 1.25rem; margin-top: 2rem; }
.mod-story { font-size: var(--text-lead); margin-top: 1.1rem; }
.answers { display: grid; gap: 0.7rem; margin-top: 1rem; }
.answer { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.method .answer, .method .calc { background: var(--card); }
.answer summary { cursor: pointer; list-style: none; padding: 0.95rem 1.2rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; min-height: var(--tap); align-items: center; }
.answer summary::-webkit-details-marker { display: none; }
.answer summary::after { content: "+"; color: var(--green); font-size: 1.4rem; line-height: 1; }
.answer[open] summary::after { content: "\2013"; }
.answer[open] { border-color: var(--green); }
.answer p { padding: 0 1.2rem 1.1rem; color: var(--muted); }
.calc { margin-top: 2.2rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.calc h3 { margin-top: 0; }
.calc label { display: block; font-weight: 600; margin-top: 1rem; }
.calc input { font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; width: 100%; max-width: 18rem; margin-top: 0.4rem; padding: 0.75rem 0.9rem; border: var(--hair-2) solid var(--muted); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); }
.calc-hint, .calc-note, .mod-note { color: var(--muted); font-size: 0.92rem; margin-top: 0.6rem; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-top: 1.2rem; }
.metric { background: var(--green-soft); padding: 0.9rem 1rem; border-radius: var(--radius-sm); display: grid; gap: 0.2rem; }
.metric span { font-size: 0.9rem; color: var(--green-ink); }
.metric strong { font-family: var(--font-body); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.prep { display: grid; gap: 0.3rem; margin-top: 0.8rem; }
.prep label { display: flex; gap: 0.7rem; align-items: center; min-height: var(--tap); cursor: pointer; }
.prep input { width: var(--icon); height: var(--icon); accent-color: var(--green); flex: 0 0 auto; }
.mod-links { margin-top: 1.6rem; margin-bottom: 1.4rem; }
.mod-links span { color: var(--muted); }
.mod-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.mod-links a { display: inline-block; padding-block: 0.35rem; min-width: var(--tap); }
.mod-links a, .sources a { color: var(--green-ink); text-decoration: underline; text-underline-offset: var(--nudge); }

/* ---------- propuesta ---------- */
.feat-4 { grid-template-columns: repeat(4, 1fr); }
.contact-line { font-size: 1rem; }
/* two text columns: both start on the same line and use the same heading and body size */
.split-top { align-items: start; }
.split-top h2 { font-size: var(--text-h3); }
.split-top .contact-line { font-size: 1rem; }
.sources { list-style: disc; padding-left: 1.2rem; margin-top: 1rem; display: grid; gap: 0.6rem; color: var(--muted); font-size: var(--text-lead); }

@media (max-width: 1020px) { /* ds-allow-hardcode: custom properties are not valid in media queries */
  .opt-grid, .rates { grid-template-columns: 1fr; }
  .opt-grid { row-gap: 1.2rem; }
  .opt { display: block; }
  .mod-grid { grid-template-columns: 1fr; }
  .mod-media { position: static; max-width: var(--media-max); }
  .feat-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tiles-bar { grid-template-columns: 1fr; }
  .tile { border-left: 0; border-top: 1px solid var(--line-dark); }
  .tile:first-child { border-top: 0; }
  .fx-loop::after { background: linear-gradient(180deg, rgba(0, 16, 46, 0.9) 0%, rgba(0, 16, 46, 0.78) 60%, rgba(0, 16, 46, 0.5) 100%); }
  .feat-4, .metrics { grid-template-columns: 1fr; }
  /* phones: the four steps read as a plain list; the sticky stack needs a tall viewport */
  /* .method-grid prefix: effects.css loads after this file */
  .method-grid .fx-stack { gap: 1rem; padding-bottom: 0; }
  .method-grid .fx-stack-card { position: static; }
  /* "con sentido" is eleven characters: sized to fit the phone width instead of clipping */
  .fm-giant { font-size: 15.5vw; }
  .rate-list li { grid-template-columns: var(--dot) 1fr auto; }
  .rate-amt { grid-column: 2 / -1; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-accent:hover, .tile:hover .tile-go svg { transform: none; }
}