/* features.css: Floor 1 · The App (/features/ and /es/funciones/). Every selector is scoped to this floor.
   Tokens only (site.css); gold (--deco-*) is decoration, never text. No 100vw; figures never wrap. */

/* ---- Page head: copy and the opening screenshot side by side on wide screens ---- */
body[data-floor="app"] .app-head {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 56rem) {
  body[data-floor="app"] .app-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}
body[data-floor="app"] .app-head .page-head { padding-block-end: 0; }
body[data-floor="app"] .app-head .shot { margin-block-end: 0; }
body[data-floor="app"] .app-note { margin: var(--s-3) 0 0; font-size: var(--t-subhead); color: var(--ink-2); }

/* ---- Floor directory (same-page links; wayfinding in chunks) ---- */
body[data-floor="app"] .app-directory { margin-block-start: var(--s-5); }
body[data-floor="app"] .app-directory__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body[data-floor="app"] .app-directory ol {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 30rem) {
  body[data-floor="app"] .app-directory ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-floor="app"] .app-directory li { margin: 0; }
body[data-floor="app"] .app-directory a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 100%;
  min-height: var(--target);
  padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  font-size: var(--t-callout);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-1);
  text-decoration: none;
  background: var(--noir-1);
  border: 1px solid var(--deco-gold-faint);
  border-radius: var(--radius-1);
}
body[data-floor="app"] .app-directory a:hover { border-color: var(--brand-accent); }
body[data-floor="app"] .app-directory a:hover .app-directory__label { text-decoration: underline; }
body[data-floor="app"] .app-directory__no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: 0.3rem;
  font-size: var(--t-footnote);
  font-weight: 700;
  color: var(--ink-1);
  border: 1px solid var(--deco-gold);
  border-radius: 999px;
}

/* ---- Galleries (one per group of features) ---- */
body[data-floor="app"] .app-wing__head { max-width: 46rem; margin-block-end: var(--s-5); }
body[data-floor="app"] .app-wing__head > :is(p, si-p):last-child { margin-block-end: 0; }
body[data-floor="app"] .app-wing__intro { margin: 0; max-width: 54ch; color: var(--ink-2); font-size: var(--t-title3); line-height: 1.45; }
body[data-floor="app"] .app-wing__head .price-disclosure { margin-block-start: var(--s-3); max-width: 54ch; }

/* Cards beside a framed screenshot; the screenshot never sits under text. */
body[data-floor="app"] .app-gallery {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 64rem) {
  body[data-floor="app"] .app-gallery { grid-template-columns: minmax(0, 1fr) 19rem; }
  body[data-floor="app"] .app-gallery__shot { position: sticky; inset-block-start: calc(var(--bar-h) + var(--s-4)); }
}
body[data-floor="app"] .app-gallery__shot { max-width: 21rem; width: 100%; margin-inline: auto; }
body[data-floor="app"] .app-gallery__shot .shot { margin-block-end: 0; }
body[data-floor="app"] .app-gallery .card-row { align-content: start; }
@media (min-width: 64rem) {
  body[data-floor="app"] .app-gallery .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-floor="app"] .card-row + .app-subhead { margin-block-start: var(--s-7); }
body[data-floor="app"] .app-subhead {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Card contents */
body[data-floor="app"] .card h3 { margin-block-end: var(--s-2); }
body[data-floor="app"] .card :is(p, si-p) { margin: 0 0 var(--s-3); }
/* The page rule above must not undo site.css's push-down: every card action sits on the row's bottom line (D30). */
body[data-floor="app"] .card > .card__cta { margin-block-start: auto; }
/* Prose never runs wider than about 70 characters (54ch; ch is the "0", about 1.3 average letters), even in a card that spans the row. */
body[data-floor="app"] .card :is(p, si-p),
body[data-floor="app"] .card li,
body[data-floor="app"] .app-advice { max-width: 54ch; }
/* Standalone links (card actions, "Back to the galleries"): a 44 px tall target, still underlined text. */
body[data-floor="app"] .card__cta a,
body[data-floor="app"] .app-back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}
body[data-floor="app"] .app-back { margin: var(--s-4) 0 0; font-size: var(--t-subhead); }
body[data-floor="app"] .card .fine-print { color: var(--ink-2); }
body[data-floor="app"] .card .math { margin-block: 0 var(--s-3); }
body[data-floor="app"] .app-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
body[data-floor="app"] .app-list { margin: 0 0 var(--s-3); padding-inline-start: 1.15rem; }
body[data-floor="app"] .app-list li + li { margin-block-start: var(--s-1); }
body[data-floor="app"] .app-list--cols { columns: 2 11rem; column-gap: var(--s-5); }
body[data-floor="app"] .app-card--wide { grid-column: 1 / -1; }
@media (min-width: 40rem) { body[data-floor="app"] .app-card--wide .app-list--cols { columns: 3 10rem; } }
body[data-floor="app"] .app-list--cols li { break-inside: avoid; }
body[data-floor="app"] .card .pairs { margin-block-end: var(--s-3); }
body[data-floor="app"] .math__body :is(p, si-p) { margin: 0 0 var(--s-2); }
body[data-floor="app"] .math__body :is(p, si-p):last-child { margin-block-end: 0; }
body[data-floor="app"] .math__eq sup { font-size: 0.72em; }

/* "More" disclosures for long secondary lists inside a card that stays visible (its anchor id never hides). */
body[data-floor="app"] .app-more {
  margin-block: 0 var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-1);
}
body[data-floor="app"] .app-more > summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--target);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-1);
  list-style: none;
}
body[data-floor="app"] .app-more > summary::-webkit-details-marker { display: none; }
body[data-floor="app"] .app-more > summary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-inline-start: auto;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-disclosure) ease-in-out;
}
body[data-floor="app"] .app-more[open] > summary::after { transform: rotate(-135deg); }
body[data-floor="app"] .app-more > .app-list { margin: 0; padding: 0 0.9rem 0.9rem 2.05rem; }
body[data-floor="app"] .app-more--years > .app-years-wrap { margin: 0 0.6rem 0.6rem; }

/* ---- Worked example ---- */
body[data-floor="app"] .app-example {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 64rem) {
  body[data-floor="app"] .app-example { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
body[data-floor="app"] .app-example__case { margin: 0 0 var(--s-3); font-size: var(--t-title3); line-height: 1.45; }
body[data-floor="app"] .app-example__case .example-tag { margin-inline-end: 0.5em; vertical-align: 0.15em; }
body[data-floor="app"] .app-example .compare td .fig,
body[data-floor="app"] .app-years td .fig { font-weight: 650; }
body[data-floor="app"] .app-example__gain { margin: 0 0 var(--s-4); font-size: var(--t-title3); line-height: 1.45; }

/* Year-by-year table: four figure columns; it scrolls inside its own box if a phone is too narrow. */
body[data-floor="app"] .app-years-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 var(--s-3);
  border: 1px solid var(--deco-gold-faint);
  border-radius: var(--radius-1);
  background: var(--noir-0);
}
body[data-floor="app"] .app-years {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-subhead);
}
body[data-floor="app"] .app-years caption {
  padding: 0.75rem 0.75rem 0.25rem;
  text-align: start;
  font-size: var(--t-subhead);
  color: var(--ink-2);
}
body[data-floor="app"] .app-years th,
body[data-floor="app"] .app-years td {
  padding: 0.55rem 0.6rem;
  text-align: end;
  white-space: nowrap;
  border-block-end: 1px solid var(--hairline);
}
body[data-floor="app"] .app-years thead th {
  font-size: var(--t-caption1);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-block-end-color: var(--deco-gold-line);
}
body[data-floor="app"] .app-years th[scope="row"] { text-align: start; font-weight: 600; color: var(--ink-2); }
body[data-floor="app"] .app-years tfoot th,
body[data-floor="app"] .app-years tfoot td { font-weight: 700; color: var(--ink-1); border-block-end: 0; }
body[data-floor="app"] .app-years thead th:first-child { text-align: start; }

/* ---- In construction panel ---- */
body[data-floor="app"] .app-construction {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  body[data-floor="app"] .app-construction { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-floor="app"] .app-construction li {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--noir-2);
  border: 1px dashed var(--deco-gold-line);
  border-radius: var(--radius-1);
}
body[data-floor="app"] .app-construction strong { font-weight: 650; color: var(--ink-1); }
body[data-floor="app"] .app-construction span:not(.badge-construction) { color: var(--ink-2); font-size: var(--t-callout); }

/* ---- Education note ---- */
body[data-floor="app"] .app-advice { margin-block-start: var(--s-5); max-width: 46rem; color: var(--ink-2); font-size: var(--t-subhead); }

/* ---- Row matching: an odd last card in a two-column gallery takes the full row; 3-up rows where 6 cards sit ---- */
@media (min-width: 64rem) {
  body[data-floor="app"] .app-gallery .card-row:not(:has(.app-card--wide)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  body[data-floor="app"] .app-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Gallery 7 has seven cards: at most three a row so lines stay readable, and a lone last card takes the row. */
@media (min-width: 48rem) {
  body[data-floor="app"] #calculator .card-row { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
  body[data-floor="app"] #calculator .card-row > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
body[data-floor="app"] .app-nowrap { white-space: nowrap; }

/* Year table on phones: each year becomes a short list of label-value pairs, so no column hides off-screen
   and no figure is squeezed (the layout changes, never the number). */
@media (max-width: 35.98rem) {
  body[data-floor="app"] .app-years thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-floor="app"] .app-years,
  body[data-floor="app"] .app-years tbody,
  body[data-floor="app"] .app-years tfoot { display: block; }
  body[data-floor="app"] .app-years caption { display: block; }
  body[data-floor="app"] .app-years tr {
    display: block;
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--hairline);
  }
  body[data-floor="app"] .app-years tfoot tr { border-block-end: 0; }
  body[data-floor="app"] .app-years th[scope="row"] { display: block; padding: 0 0 0.2rem; text-align: start; border: 0; }
  body[data-floor="app"] .app-years td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding: 0.15rem 0;
    text-align: end;
    border: 0;
  }
  body[data-floor="app"] .app-years th[scope="row"][data-label]::before { content: attr(data-label) "\00a0"; }
  body[data-floor="app"] .app-years td:empty { display: none; }
  body[data-floor="app"] .app-years td::before {
    content: attr(data-label);
    font-size: var(--t-footnote);
    font-weight: 500;
    white-space: normal;
    text-align: start;
    color: var(--ink-2);
  }
}