/* ======================================================================================================================================
   Capa ilustrada de la carta natal (.fm--ill): pergamino, rojo, dorado y azul tinta, como Almas Afines. Excepción acotada a esta página
   (DESIGN.md, registro del 26/10/2026). Los iconos son dibujos propios; sol y luna opcionales en assets/afines/{sol,luna}.webp.
   ====================================================================================================================================== */
.fm.fm--ill{--fm-parch:#F7EEDA;--fm-card:#FFFCF4;--fm-line:#E6D7B3;--fm-gold:#C4902D;--fm-red:#8A1C1C;--fm-navy:#1F3A5C;--fm-ink:#2A211B;max-width:1000px;margin-inline:auto;color:var(--fm-ink)}
.fm--ill .i-g{stroke:var(--fm-gold)}.fm--ill .i-r{stroke:var(--fm-red)}
.fm--ill svg{display:block}
/* cabecera */
.fm-herobox{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:300px;align-items:center;margin-bottom:26px;background:linear-gradient(180deg,#F8EBCB,var(--fm-parch));border:1px solid var(--fm-line);border-radius:14px;overflow:hidden}
.fm-herotext{position:relative;z-index:2;padding:36px 8px 36px 56px}
.fm--ill .fm-h1{margin:0 0 4px;font:600 clamp(2.6rem,6vw,4.25rem)/1 var(--av-serif);letter-spacing:-.02em;color:var(--fm-red)}
.fm--ill .fm-orn{margin:6px 0 14px;line-height:0;color:var(--fm-gold)}.fm--ill .fm-orn svg{width:min(260px,70%);height:14px}
.fm--ill .fm-sub{margin:0 0 8px;font:600 1.0625rem/1.4 var(--av-sans);color:var(--fm-ink)}
.fm--ill .fm-lead{margin:0;max-width:46ch;font-size:.96875rem;line-height:1.55;color:var(--fm-ink)}
.fm-heroart{position:relative;align-self:stretch;min-height:240px;overflow:hidden}
.fm-heroart .av-banner{position:absolute;inset:0;margin:0;border:0;border-radius:0;background:none}
.fm-heroart .av-banner img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:60% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.fm-sun,.fm-moon{position:absolute;z-index:1;color:var(--fm-gold);opacity:.4;pointer-events:none;line-height:0}
.fm-herobox .fm-sun{left:-64px;top:50%;width:150px;height:150px;transform:translateY(-50%)}
.fm-sun svg,.fm-moon svg,.fm-sun img,.fm-moon img{width:100%;height:100%;object-fit:contain}
/* tarjeta del formulario */
.fm--ill .fm-card.av-panel{position:relative;max-width:860px;margin:0 auto 34px;padding:26px 40px 34px;background:var(--fm-card);border:1px solid var(--fm-line);border-radius:14px;overflow:hidden}
.fm-card .fm-sun-s{left:-96px;top:64%;width:150px;height:150px;transform:translateY(-50%);opacity:.3}
.fm-card .fm-moon-s{right:-72px;top:62%;width:120px;height:120px;transform:translateY(-50%);opacity:.35}
.fm--ill .av-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 26px;padding:0;list-style:none;font:500 .9375rem var(--av-serif);color:var(--fm-ink)}
.fm--ill .av-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;padding:0;flex:none;text-align:center}
.fm--ill .av-steps li:not(:last-child)::after{content:"";position:absolute;top:21px;left:calc(50% + 30px);width:calc(100% - 60px);height:1px;background:var(--fm-gold)}
.fm--ill .av-steps .fm-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#F7E7BD;border:1.5px solid var(--fm-gold);font:600 1.25rem var(--av-serif);color:var(--fm-ink)}
.fm--ill .av-steps li.is-cur .fm-n{background:var(--fm-red);border-color:var(--fm-red);color:#fff}
.fm--ill .av-steps li.is-cur .fm-l{color:var(--fm-red);font-weight:600}
.fm--ill [data-av-step]:not([hidden]){position:relative;z-index:1;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:18px;align-items:start;max-width:none}
.fm--ill [data-av-step]>*{grid-column:2}
.fm--ill [data-av-step]>.fm-ico{grid-column:1;grid-row:1/span 8;width:62px;height:62px;margin-top:22px;line-height:0}
.fm--ill [data-av-step] .fm-ico svg{width:100%;height:100%}
.fm--ill .av label,.fm--ill label,.fm--ill legend{font:600 1.125rem/1.3 var(--av-serif);color:var(--fm-ink);margin:0 0 8px}
.fm--ill .av-seg label,.fm--ill .av-check{font:400 .9375rem var(--av-sans)}
.fm--ill input[type=date],.fm--ill input[type=time],.fm--ill input[type=text],.fm--ill select{background:#FFFBF1;border:1px solid var(--fm-line);border-radius:8px;min-height:52px;font-size:1.0625rem}
.fm--ill input:focus,.fm--ill select:focus{border-color:var(--fm-red);outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--fm-red) 22%,transparent)}
.fm--ill .av-seg{border-color:var(--fm-line);border-radius:8px;background:#FFFBF1}
.fm--ill .av-seg label{border-color:var(--fm-line)}
.fm--ill .av-seg label:has(input:checked){background:var(--fm-red);color:#fff}
.fm--ill .av-btn{background:var(--fm-red);border-color:var(--fm-red);color:#fff;border-radius:8px;min-height:50px;padding-inline:26px;font:600 1.0625rem var(--av-serif);justify-self:start}
.fm--ill .av-btn:hover:not(:disabled){background:#6E1313;border-color:#6E1313;color:#fff}
.fm--ill .av-btn.is-ghost{background:transparent;color:var(--fm-red)}
.fm--ill .av-btn.is-ghost:hover:not(:disabled){background:#FFF1EE;color:var(--fm-red)}
.fm--ill [data-av-step]>.av-btn+.av-btn{grid-column:2}
.fm--ill .av-sum th{color:var(--fm-navy)}
/* ventajas */
.fm-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:8px 0 4px}
.fm-benefits li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 20px}
.fm-benefits li:not(:last-child)::after{content:"";position:absolute;right:0;top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,transparent,var(--fm-gold),transparent)}
.fm-bico{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#F7E7BD;border:1px solid var(--fm-line)}
.fm-bico svg{width:40px;height:40px}
.fm--ill .av-btn span[aria-hidden]{margin-left:.45em}
.fm-benefits b{font:600 1.125rem/1.25 var(--av-serif);color:var(--fm-ink)}
.fm-benefits li>span:last-child{font-size:.9375rem;line-height:1.5;color:var(--fm-ink);opacity:.82;max-width:26ch}
/* con resultado en pantalla la cabecera y las ventajas se van */
.fm.is-result .fm-herobox,.fm.is-result .fm-benefits{display:none}
@media (max-width:860px){
  .fm-herobox{grid-template-columns:1fr;min-height:0}.fm-herotext{padding:28px 24px 8px}.fm-heroart{min-height:190px}
  .fm-herobox .fm-sun{top:60px;transform:none;left:-80px}
  .fm--ill .fm-card.av-panel{padding:20px 18px 26px}
  .fm--ill [data-av-step]:not([hidden]){grid-template-columns:1fr}.fm--ill [data-av-step]>*,.fm--ill [data-av-step]>.fm-ico{grid-column:1}.fm--ill [data-av-step]>.fm-ico{grid-row:auto;width:48px;height:48px;margin:0 0 6px}
  .fm-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}.fm-benefits li:nth-child(2n)::after{display:none}
}
@media (max-width:420px){.fm--ill .av-steps{font-size:.8125rem}.fm--ill .av-steps .fm-n{width:34px;height:34px;font-size:1rem}.fm--ill .av-steps li:not(:last-child)::after{top:17px;left:calc(50% + 24px);width:calc(100% - 48px)}}
:root[data-theme="dark"] .fm.fm--ill{--fm-parch:#17120D;--fm-card:#1D1812;--fm-line:#3A2F22;--fm-gold:#D1A24A;--fm-red:#E58A7A;--fm-navy:#8FB3DD;--fm-ink:#EDE4D3}
:root[data-theme="dark"] .fm-herobox{background:linear-gradient(180deg,#201912,#17120D)}
:root[data-theme="dark"] .fm--ill input[type=date],:root[data-theme="dark"] .fm--ill input[type=time],:root[data-theme="dark"] .fm--ill input[type=text],:root[data-theme="dark"] .fm--ill select,:root[data-theme="dark"] .fm--ill .av-seg{background:#14100B}
:root[data-theme="dark"] .fm--ill .av-btn,:root[data-theme="dark"] .fm--ill .av-seg label:has(input:checked){background:#B24A3C;border-color:#B24A3C;color:#fff}
:root[data-theme="dark"] .fm-bico,:root[data-theme="dark"] .fm--ill .av-steps .fm-n{background:#2A2013}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fm.fm--ill{--fm-parch:#17120D;--fm-card:#1D1812;--fm-line:#3A2F22;--fm-gold:#D1A24A;--fm-red:#E58A7A;--fm-navy:#8FB3DD;--fm-ink:#EDE4D3}
  :root:not([data-theme="light"]) .fm-herobox{background:linear-gradient(180deg,#201912,#17120D)}
  :root:not([data-theme="light"]) .fm--ill input[type=date],:root:not([data-theme="light"]) .fm--ill input[type=time],:root:not([data-theme="light"]) .fm--ill input[type=text],:root:not([data-theme="light"]) .fm--ill select,:root:not([data-theme="light"]) .fm--ill .av-seg{background:#14100B}
  :root:not([data-theme="light"]) .fm--ill .av-btn,:root:not([data-theme="light"]) .fm--ill .av-seg label:has(input:checked){background:#B24A3C;border-color:#B24A3C;color:#fff}
  :root:not([data-theme="light"]) .fm-bico,:root:not([data-theme="light"]) .fm--ill .av-steps .fm-n{background:#2A2013}}