/* /como-funciona, en el lenguaje de la landing (landing.css + home.css: tema, .ld-hero, .ld-btn, .ld-final).
   Aquí solo lo propio: la tarjeta del hero, los seis pasos grandes, los números y las preguntas.
   Los pasos 4 a 6 (donde entra y sale el dinero) llevan el número en lima; los anteriores, en gris. */
.flow { --flow-ink: var(--accent); --flow-panel: color-mix(in srgb, var(--fg) 5%, var(--bg)); }
:root[data-theme="lima"] .flow { --flow-ink: var(--accent-ink, #3c8c1c); }
.flow a:not(.ld-btn) { color: var(--accent-ink, var(--accent)); }

/* Hero: el texto y, bajo los botones, lo que el productor quiere saber primero; la foto queda libre a la derecha. */
.flow-hero__card {
  width: 100%; max-width: 27rem; margin-top: 2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.flow-hero__card p { margin: 0; }
.flow-hero__kicker { color: var(--muted); font-size: .88rem; }
.flow-hero__big { margin: .2rem 0 .2rem !important; font-size: clamp(2rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--flow-ink); }
.flow-hero__sub { font-size: .95rem; }
.flow-hero__foot { margin-top: .8rem !important; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
/* Más aire que el hero del home: este lleva además la tarjeta, y todo junto quedaba amontonado. */
.flow .flow-hero { padding-top: 6.5rem; padding-bottom: 4.5rem; }
@media (min-width: 64rem) { .flow .flow-hero { padding: 5.5rem 3rem 6rem; } }
.flow .flow-hero .ld-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 1.25rem; }
.flow .flow-hero .ld-hero__subtitle { margin-bottom: 2.5rem; }
.flow .flow-hero__card { margin-top: 3.25rem; padding: 1.5rem 1.7rem; }
.flow .flow-hero__sub { margin-top: .35rem !important; line-height: 1.45; }

/* Los seis pasos: titular grande y una frase, con una pantallita al lado; se alternan de lado. */
.flow__line { list-style: none; max-width: 70rem; margin: 0 auto; padding: 2rem 1.25rem 1rem; }
@media (min-width: 64rem) { .flow__line { padding: 3rem 3rem 1rem; } }
.flow__stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding: 2.5rem 0; border-top: 1px solid var(--line); --num-color: var(--muted);
}
.flow__stage:first-child { border-top: 0; }
.flow__stage--money { --num-color: var(--flow-ink); }
@media (min-width: 52rem) {
  .flow__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; padding: 3.5rem 0; }
  .flow__stage:nth-child(even) .flow__text { order: 2; }
}
.flow__num { position: absolute; top: 1.6rem; left: 0; font-size: 1rem; font-weight: 800; color: var(--num-color); }
.flow__text { padding-top: 1.6rem; }
.flow .flow__text h2 { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.flow__text p { margin: 0; max-width: 30rem; color: var(--muted); font-size: 1.1rem; line-height: 1.55; }
.flow__num::after { content: ""; display: inline-block; width: 2.2rem; height: 2px; margin-left: .6rem; vertical-align: middle; background: var(--num-color); border-radius: 2px; }

.flow__panel { padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 20px; background: var(--flow-panel); font-size: .98rem; }
.flow__checklist, .flow__rows { list-style: none; margin: 0; padding: 0; }
.flow__checklist li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; font-weight: 600; }
.flow__tick { flex: none; box-sizing: border-box; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--muted); }
.flow__tick--todo { background: transparent; border: 2px solid var(--line); }
.flow__rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.flow__rows div:first-child { border-top: 0; }
.flow__rows dt { color: var(--muted); }
.flow__rows dd { margin: 0; font-weight: 600; text-align: right; }
.flow__rows .is-total { font-weight: 800; }
.flow__rows .is-total dt { color: var(--fg); }
.flow__rows .is-total dd { color: var(--flow-ink); }
.flow__rows dd.is-ok { color: var(--flow-ink); }
.flow__rows dd.is-warn { color: #d99a00; }
.flow__rows dd.is-bad { color: #e5584a; }
.flow__url { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-weight: 700; font-size: 1.1rem; word-break: break-all; }
.flow__url span { color: var(--muted); font-weight: 400; }

.flow__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.flow__table caption { margin: 0 0 .7rem; text-align: left; font-weight: 700; }
.flow__table th, .flow__table td { padding: .65rem .4rem; text-align: right; border-top: 1px solid var(--line); }
.flow__table thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: .82rem; }
.flow__table tbody th { text-align: left; font-weight: 400; color: var(--muted); }
.flow__table .is-total th, .flow__table .is-total td { font-weight: 800; color: var(--fg); }
.flow__table .is-total td:nth-child(2) { color: var(--flow-ink); }

/* ¿Cuánto recibes?: los dos casos en grande. */
.flow__numbers { max-width: 70rem; margin: 2rem auto 0; padding: 3.5rem 1.25rem; text-align: center; border-top: 1px solid var(--line); }
@media (min-width: 64rem) { .flow__numbers { padding: 4.5rem 3rem; } }
.flow .flow__numbers h2, .flow .flow__faq h2 { margin: 0 0 .7rem; font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; }
.flow__numbers > p { max-width: 34rem; margin: 0 auto 2rem; color: var(--muted); font-size: 1.05rem; }
.flow__cases { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 46rem; margin: 0 auto; }
@media (min-width: 40rem) { .flow__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flow__case { padding: 1.8rem 1.5rem; border: 1px solid var(--line); border-radius: 22px; background: var(--flow-panel); }
.flow__case p { margin: 0; }
.flow__case-label { color: var(--muted); font-weight: 600; }
.flow__case-big { margin: .5rem 0 .2rem !important; font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--flow-ink); }
.flow__case-note { color: var(--muted); font-size: .92rem; }
.flow .flow__numbers .flow__numbers-foot { margin: 1.5rem auto 0; font-size: .88rem; }

/* La letra chica: preguntas que se abren. */
.flow__faq { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.flow .flow__faq h2 { text-align: center; margin-bottom: 1.5rem; }
.flow__faq details { border-top: 1px solid var(--line); }
.flow__faq details:last-child { border-bottom: 1px solid var(--line); }
.flow__faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; }
.flow__faq summary::-webkit-details-marker { display: none; }
.flow__faq summary::after { content: "+"; flex: none; font-size: 1.4rem; font-weight: 400; color: var(--muted); }
.flow__faq details[open] summary::after { content: "–"; }
.flow__faq summary:hover { color: var(--accent-ink, var(--accent)); }
.flow__faq details p { margin: 0 0 1.2rem; color: var(--muted); max-width: 40rem; }

/* Fotos propias de esta página (distintas a las del home): la puerta del evento en el hero y la pista lista en el
   cierre, cada una en versión noche y día. Mismos degradados del home para que el texto se lea. */
:root:not([data-theme="lima"]) .flow .flow-hero::before { background: url("/assets/pages/como-funciona/hero-noche-84d88077.webp") center 45% / cover no-repeat; opacity: .8; }
:root:not([data-theme="lima"]) .flow .flow-hero::after {
  background: linear-gradient(color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 30%, transparent)), linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 30%, color-mix(in srgb, var(--bg) 55%, transparent) 65%, color-mix(in srgb, var(--bg) 45%, transparent) 100%);
}
:root[data-theme="lima"] .flow .flow-hero::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -2;
  background: url("/assets/pages/como-funciona/hero-dia-7019e939.webp") center 40% / cover no-repeat;
}
:root[data-theme="lima"] .flow .flow-hero::after {
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 38%, color-mix(in srgb, var(--bg) 20%, transparent) 75%, transparent 100%);
}
.flow .ld-final {
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 18%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent), color-mix(in srgb, var(--bg) 80%, transparent) 65%, var(--bg) 97%),
    url("/assets/pages/como-funciona/cta-noche-cef931e6.webp") center 45% / cover no-repeat;
}
:root[data-theme="lima"] .flow .ld-final {
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 18%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 25%, transparent), color-mix(in srgb, var(--bg) 60%, transparent) 65%, var(--bg) 97%),
    url("/assets/pages/como-funciona/cta-dia-e3f4f957.webp") center 45% / cover no-repeat;
}