@import url('/styles/precios.css');
@import url('/styles/fuel-tokens.css');
/* Encabezado de la home Precios: padding superior 2×64, gap 24 y centrado. Las tarjetas son las de la home (.s-precios). */
.s-fuel-precios { position: relative; padding: calc(2 * var(--s64)) var(--page-pad) var(--s64); background: var(--paper); }
.s-fuel-precios :is(h2,h3,p) { margin: 0; }
.s-fuel-precios .s-fuel-precios__anchor { position: absolute; top: 0; }
.s-fuel-precios .s-fuel-precios__intro { display: flex; flex-direction: column; align-items: center; gap: var(--s24); text-align: center; }
.s-fuel-precios .s-fuel-precios__meta { display: flex; gap: var(--s24); color: var(--muted); }
.s-fuel-precios .s-fuel-precios__lede { max-width: 800px; color: var(--muted); }
.s-fuel-precios .s-fuel-precios__actions { margin-top: var(--s32); text-align: center; }
.s-fuel-precios .s-fuel-precios__leyenda { margin-top: var(--s8); color: var(--c-muted, var(--muted)); }
.s-fuel-precios .s-fuel-precios__challenge { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s32); margin-top: var(--s64); background: var(--bg); border-radius: var(--r-panel); overflow: hidden; }
.s-fuel-precios .s-fuel-precios__challenge > .photo { min-height: 320px; }
.s-fuel-precios .s-fuel-precios__challenge-copy { padding: var(--s32) var(--s32) var(--s32) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s24); }
.s-fuel-precios .s-fuel-precios__challenge-meta { align-self: stretch; display: flex; justify-content: space-between; gap: var(--s24); }
.s-fuel-precios .s-fuel-precios__price { flex: none; color: var(--brand); }

#fuel-precios-deportiva { scroll-margin-top: 128px; }

/* Tarjetas de color (Juanma 21/10): lime-200 para Día a día, rose-200 para la asesoría deportiva; texto en tinta, botón secundario. */
.s-fuel-precios .s-fuel-precios__card { --c-line: color-mix(in srgb, var(--ink) 18%, transparent); --c-muted: color-mix(in srgb, var(--ink) 72%, transparent); height: auto; color: var(--ink); }
.s-fuel-precios .s-fuel-precios__card.is-lima { background: var(--lime-200); }
.s-fuel-precios .s-fuel-precios__card.is-rosa { background: var(--rose-200); }
.s-fuel-precios .s-fuel-precios__card .s-precios__chip { background: var(--paper); color: var(--ink); }
/* Cada columna: tarjeta arriba e incluye abajo; con subgrid las dos tarjetas y las dos grillas quedan a la misma altura. */
.s-fuel-precios .s-fuel-precios__planes { grid-template-rows: auto auto; row-gap: 0; }
.s-fuel-precios .s-fuel-precios__planes > li { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
/* Incluye: la grilla de beneficios de la home a dos columnas por tarjeta, con trazo rosa y área rose-100. */
.s-fuel-precios .s-fuel-precios__incluye { --mf-area-fill: var(--rose-100); margin-top: var(--s24); }
.s-fuel-precios .membership-features .membership-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-fuel-precios .membership-features .membership-features__grid > li:nth-child(n) { border-left: 1px solid var(--line); }
.s-fuel-precios .membership-features .membership-features__grid > li:nth-child(2n+1) { border-left: 0; }
.s-fuel-precios .membership-features .membership-features__grid > li:nth-child(n) .membership-features__card { padding: var(--s24); }
.s-fuel-precios .membership-features .membership-features__grid > li:nth-child(2n+1) .membership-features__card { padding-left: 0; }
.s-fuel-precios .membership-features .membership-features__grid > li:nth-child(2n) .membership-features__card { padding-right: 0; }
.s-fuel-precios .membership-features .membership-features__title { min-height: 2lh; }
.s-fuel-precios .membership-features .membership-features__content { font-size: var(--body); color: var(--muted); }
.s-fuel-precios .membership-features .membership-features__drawing { height: 84px; flex-basis: 84px; }
.s-fuel-precios .s-fuel-precios__rotulo { color: var(--muted); }
.s-fuel-precios .membership-features .s-fuel-precios__peak { fill: var(--brand); }
/* "Gs. 300.000 consulta" es más ancho que "USD 199 mes": la duración angosta (230 → 168) para que la tarjeta entre en su columna. */
.s-fuel-precios .s-fuel-precios__card .s-precios__dato:last-child { width: 168px; }

@media (max-width: 1199px) {
  .s-fuel-precios { padding-block: var(--s48); }
  .s-fuel-precios .s-fuel-precios__planes { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s48); }
  .s-fuel-precios .s-fuel-precios__planes > li { display: block; grid-row: auto; min-width: 0; }
  .s-fuel-precios .s-fuel-precios__actions a { display: inline-flex; align-items: center; min-height: 44px; }
  .s-fuel-precios .s-fuel-precios__challenge-meta { flex-wrap: wrap; gap: var(--s12); }
}
@media (max-width: 809px) {
  .s-fuel-precios .s-fuel-precios__intro { gap: var(--s16); }
  .s-fuel-precios .s-precios__datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
  .s-fuel-precios .s-precios__dato:first-child { padding-right: 0; border-right: 0; }
  .s-fuel-precios .s-fuel-precios__card .s-precios__dato:last-child { width: auto; padding-left: 0; }
  .s-fuel-precios .s-precios__valor { flex-wrap: wrap; white-space: normal; }
  .s-fuel-precios .s-precios__cifra { font-size: 40px; }
  .s-fuel-precios .membership-features .membership-features__grid { grid-template-columns: minmax(0, 1fr); }
  .s-fuel-precios .membership-features .membership-features__grid > li:nth-child(n) { border-left: 0; }
  .s-fuel-precios .membership-features .membership-features__grid > li:nth-child(n) .membership-features__card { padding: var(--s24) 0; }
  .s-fuel-precios .membership-features .membership-features__title { min-height: 0; }
  .s-fuel-precios .s-fuel-precios__challenge { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--s48); }
  .s-fuel-precios .s-fuel-precios__challenge > .photo { min-height: 0; height: 240px; }
  .s-fuel-precios .s-fuel-precios__challenge-copy { padding: var(--s24); }
  .s-fuel-precios .s-fuel-precios__challenge-copy .btn { width: 100%; padding-inline: var(--s12); }
}
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  .s-fuel-precios.is-armed .s-precios__card { opacity: 1; transform: none; transition: none; }
  .s-fuel-precios.is-armed .membership-features :is(.mf-signal, .mf-area) { clip-path: none; transition: none; }
  .s-fuel-precios.is-armed .membership-features :is(.mf-node, .mf-ring) { opacity: 1; transition: none; }
}
@media (max-width: 1199px) {
  .s-fuel-precios .s-fuel-precios__price { color: var(--ink); }
}