/* LISTA · Vacunados VIP: la lista de invitados. Marfil de papel de invitación, dorado grabado y azul vacuna.
   El motivo recorre la página: filetes dorados, rombos de separación, tarjetas de invitación en los módulos
   y el cordón de nombres corriendo bajo la portada. */
body.fmt--lista { --bg: #FBF7EF; --bg-2: #F3ECDD; --fg: #1F1A12; --mute: #7A6F5C; --acc: #8E6D1F; --acc-2: #1E5BAA; --line-x: rgba(31,26,18,.14);
  --tarjeta: #FFFDF8; --oro: linear-gradient(90deg, transparent, var(--acc) 12%, #D9BC6A 50%, var(--acc) 88%, transparent);
  --f-display: 'Playfair Display', Georgia, serif; --f-body: 'IBM Plex Sans', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --f-label: 'IBM Plex Sans', system-ui, sans-serif; }
.fmt--lista .htitle, .fmt--lista .cap__title, .fmt--lista .fmod__head h2 { font-weight: 900; letter-spacing: -.02em; }
.fmt--lista .htitle em, .fmt--lista .cap__title em, .fmt--lista .fmod__head h2 em { font-weight: 400; font-style: italic; color: var(--acc); }
.fmt--lista .ftext { font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.66; }

/* ---------------------------------------------------------------- portada: la invitación */
.hero--lista { padding: 120px 0 0; min-height: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 34px;
  background: radial-gradient(120% 70% at 85% 0%, rgba(176,141,46,.16), transparent 60%), var(--bg); }
.hero--lista .hero__grid { align-items: end; }
.hero--lista .htitle { font-size: clamp(56px, 7.6vw, 118px); max-width: 10ch; margin-bottom: 14px; }
.hero--lista .hdeck { font-size: clamp(16px, 1.2vw, 18.5px); max-width: 52ch; }
.hero__big { margin: 0 0 22px; display: flex; align-items: baseline; gap: 16px; border-top: 1px solid var(--line-x); padding-top: 14px; }
.hero__big b { font-family: var(--f-display); font-weight: 400; font-size: clamp(52px, 6.4vw, 92px); line-height: .9; color: var(--acc-2); letter-spacing: -.03em; }
.hero__big span { font-family: var(--f-label); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); max-width: 18ch; line-height: 1.4; }
.hero--lista .hstats { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 2px solid var(--fg); }
.hero--lista .hstats b { font-family: var(--f-display); font-weight: 900; }

.invit { position: relative; background: var(--tarjeta); border: 1px solid var(--acc); padding: 0 0 20px; box-shadow: 0 22px 50px -34px rgba(31,26,18,.5); }
.invit::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(142,109,31,.35); pointer-events: none; }
.hero--lista .hero__art { position: static; inset: auto; height: auto; margin: 0; }
.hero--lista .hero__art::after { content: none; }
.hero--lista .hero__art img { width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; opacity: 1; mask-image: none; -webkit-mask-image: none; animation: none; filter: saturate(.9) contrast(1.02); }
.invit__h { padding: 18px 26px 14px; text-align: center; }
.invit__h span { display: block; font-family: var(--f-label); font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--acc); }
.invit__h b { display: block; font-family: var(--f-display); font-weight: 400; font-style: italic; font-size: 15.5px; line-height: 1.3; color: var(--mute); margin-top: 6px; }
.invit__h::after { content: ""; display: block; height: 2px; margin: 14px auto 0; width: 70%; background: var(--oro); }
.invit__l { list-style: none; margin: 0; padding: 0 26px; counter-reset: iv; }
.invit__l li { counter-increment: iv; padding: 11px 0 11px 30px; position: relative; border-bottom: 1px dashed rgba(31,26,18,.16); }
.invit__l li:last-child { border-bottom: 0; }
.invit__l li::before { content: counter(iv, decimal-leading-zero); position: absolute; left: 0; top: 15px; font-family: var(--f-mono); font-size: 10.5px; color: var(--acc); }
.invit__l b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.15; }
.invit__l span { display: block; font-family: var(--f-label); font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.invit__l i { display: block; font-style: normal; font-size: 11px; color: var(--acc-2); margin-top: 3px; }
.invit__pie { display: flex; gap: 16px; align-items: center; padding: 16px 26px 0; margin: 8px 0 0; border-top: 1px solid var(--line-x); }
.invit__pie p { margin: 0; font-family: var(--f-label); font-size: 12px; line-height: 1.45; color: var(--mute); }
.invit__sello { flex: none; font-family: var(--f-label); font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #A8121F; border: 2px solid currentColor; padding: 7px 10px; transform: rotate(-7deg); text-align: center; max-width: 96px; line-height: 1.2; }

.ticker { overflow: hidden; border-block: 1px solid var(--acc); background: var(--fg); color: #FBF7EF; padding: 12px 0; }
.ticker__track { display: flex; gap: 40px; white-space: nowrap; animation: tick 60s linear infinite; font-family: var(--f-display); font-style: italic; font-size: 18px; }
.ticker__track span::after { content: "✦"; color: #D9BC6A; margin-left: 40px; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (max-width: 999px) { .hero--lista { padding-top: 96px; } .hero--lista .htitle { max-width: none; } }

/* ---------------------------------------------------------------- el motivo, por toda la página */
.fmt--lista .fnav a { font-family: var(--f-display); text-transform: none; letter-spacing: 0; font-size: 15px; }
.fmt--lista .fnav a b { color: var(--acc); font-family: var(--f-mono); }
.fmt--lista .claves li { border-top: 1px solid var(--acc); }
.fmt--lista .cap + .cap { border-top: 0; position: relative; }
.fmt--lista .cap + .cap::before { content: "✦"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); color: var(--acc); font-size: 15px; }
.fmt--lista .cap + .cap::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--oro); }
.fmt--lista .cap__num { font-family: var(--f-label); font-weight: 600; letter-spacing: .24em; }
.fmt--lista .estado { position: relative; padding-left: 16px !important; }
.fmt--lista .estado::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; height: auto; margin: 0; background: linear-gradient(180deg, var(--acc), #D9BC6A); }
.fmt--lista .estado b { font-family: var(--f-display); font-weight: 700; }
.fmt--lista .fmod__head { border-top: 2px solid var(--fg); padding-top: 16px; }
.fmt--lista .fmod__head .kicker { font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: 10.5px; }
.fmt--lista .fcita { border-left: 0; padding-left: 0; }
.fmt--lista .fcita p { font-style: italic; }
.fmt--lista .fdato b, .fmt--lista .fcifras b { font-family: var(--f-display); font-weight: 900; background: none; padding: 0; margin-left: 0; }
.fmt--lista .fdato { border-top-color: var(--acc); }
.fmt--lista .hito { border-top: 3px solid var(--acc); }
.fmt--lista .preguntas li::before { color: var(--acc); }
.fmt--lista .retrato figcaption { border-top-color: var(--acc); }
.fmt--lista .despues { border-top: 1px solid var(--acc); }

/* Módulo `lista`: los nombres fuertes, cruzados con lo que se respondió */
.vipds { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 44px; }
@media (min-width: 860px) { .vipds { grid-template-columns: 1fr 1fr; } }
.vipd { position: relative; background: var(--tarjeta); border: 1px solid var(--line-x); border-top: 3px solid var(--acc); padding: 22px 24px 24px; }
.vipd__id { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.vipd__foto { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 2px solid var(--acc); background: var(--bg-2); }
.vipd__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(1) contrast(1.06); transition: filter .5s; }
.vipd:hover .vipd__foto img { filter: none; }
.vipd__foto--sin { display: grid; place-items: center; border-style: dashed; }
.vipd__foto--sin span { font-family: var(--f-display); font-size: 24px; color: var(--acc); }
.vipd__n { display: block; font-size: 11px; letter-spacing: .18em; color: var(--acc); margin-bottom: 4px; }
.vipd h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.06; margin: 0 0 6px; }
.vipd__c { margin: 0; font-family: var(--f-label); font-size: 13px; font-weight: 500; color: var(--fg); }
.vipd__f { margin: 4px 0 0; font-size: 11.5px; color: var(--acc-2); }
.vipd__q { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: #4A4234; }
.vipd__d { border-top: 1px solid var(--line-x); padding-top: 12px; border-left: 3px solid var(--acc-2); padding-left: 14px; }
.vipd__d span { display: block; font-family: var(--f-label); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--acc-2); margin-bottom: 5px; }
.vipd__d b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 16px; margin-bottom: 5px; }
.vipd__d p { margin: 0; font-family: var(--f-label); font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.vip__head { margin: 8px 0 16px; }
.vip__head .kicker { display: block; font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }
.vip__head h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2vw, 27px); margin: 6px 0 0; }
.vip { list-style: none; margin: 0; padding: 0; counter-reset: v; border-top: 2px solid var(--fg); }
.vip li { counter-increment: v; display: grid; grid-template-columns: 40px 1fr 1fr max-content 60px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-x); }
.vip li::before { content: counter(v, decimal-leading-zero); font-family: var(--f-mono); font-size: 12px; color: var(--acc); }
.vip b { font-family: var(--f-display); font-size: 19px; }
.vip span { font-size: 14px; color: var(--mute); } .vip small { font-family: var(--f-mono); font-size: 11.5px; color: var(--acc-2); }
.vip i { justify-self: end; font-style: normal; font-family: var(--f-label); font-weight: 600; font-size: 10px; letter-spacing: .2em; padding: 4px 8px; background: var(--acc); color: #fff; border-radius: 20px; }
@media (max-width: 720px) { .vip li { grid-template-columns: 30px 1fr 50px; } .vip span, .vip small { grid-column: 2; } }

/* Descargos en tarjetas */
.fresp--tarjetas { display: grid; gap: 16px; max-width: none; }
@media (min-width: 860px) { .fresp--tarjetas { grid-template-columns: 1fr 1fr; } }
.fresp--tarjetas li { border-left: 3px solid var(--acc); border-top: 1px solid var(--line-x); padding: 18px 20px; }
.fresp--tarjetas b { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--fg); }
.fresp--tarjetas p { font-size: 14.5px; line-height: 1.55; color: #4A4234; }

/* Fases del plan */
.fases { position: relative; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-top: 30px; }
.fases__line { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--line-x); }
.fases__line i { display: block; height: 100%; width: 0; background: var(--acc-2); transition: width 2.4s var(--ease-out); }
.fases.in .fases__line i { width: 100%; }
.fase { position: relative; padding-top: 12px; }
.fase__n { position: absolute; top: -30px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--acc-2); color: #fff; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; }
.fase time { display: block; font-family: var(--f-mono); font-size: 12px; color: var(--acc); }
.fase small { display: block; font-size: 11.5px; color: var(--mute); margin-bottom: 8px; }
.fase h3 { font-family: var(--f-display); font-size: 19px; line-height: 1.15; margin: 0 0 6px; }
.fase p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.fmt--lista .cierre__paneles { grid-template-columns: 1fr; }
@media (min-width: 760px) { .fmt--lista .cierre__paneles { grid-template-columns: 1fr 1fr 1fr; } }
.fmt--lista .cierre__panel { border-top: 3px solid var(--acc); }
.fmt--lista .cierre__panel li { grid-template-columns: 1fr; gap: 2px; }
.fmt--lista .cierre__panel li b { text-align: left; font-size: 16px; }