/* ============================================================
   FACTURACIÓN · portal público (E-2026-837) — estilos de /facturacion
   Fuente de diseño: lienzo de Design (Main/Datos/Listo/Móvil). Todo lleva prefijo fx-.
   Tokens: los reales de style.css (--wine-*, --gold, --cream*, --line, --serif, --sans, --script, --ease).
   Al final del archivo van las animaciones de marca (tienda en A y corazón) copiadas de
   app-ayv/www/css/app.css (.rom-tipi*, .rom-cora*, .rom-chis*) — la web es estática y no puede
   importar el módulo de la app. La factura y la camioneta (nuevas) viven aparte, en
   animacion-factura.css + js/animacion-factura.js, para poder llevarlas a la app.
   ============================================================ */
:root{
  --fx-ok:#55703c;
  --fx-err:#a23b3b;
  --fx-sombra:0 16px 32px rgba(69,13,26,.10);
  --fx-sombra-suave:0 8px 16px rgba(69,13,26,.06);
  --fx-sombra-btn:0 8px 16px rgba(69,13,26,.18);
}
.fx{padding:clamp(96px,11vw,124px) 0 clamp(48px,7vw,88px);min-height:100svh;font-weight:400;font-size:16px;line-height:1.5;color:var(--cream)}
.fx-wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,5vw,24px)}
.fx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fx :is(a,button,input,select,summary):focus-visible,.fx input:focus,.fx select:focus{outline:2px solid var(--gold);outline-offset:2px}
.fx [tabindex="-1"]:focus{outline:none}
.fx a{color:var(--wine-600);text-decoration:none}
.fx a:hover{color:var(--wine-deep)}
.fx svg{flex:none}
.fx-demo{max-width:520px;margin:0 auto 20px;text-align:center;font-size:13px;color:var(--cream-dim);background:var(--wine-700);border:1px dashed var(--gold);border-radius:999px;padding:8px 16px}
.fx-demo a{font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- indicador de pasos ---------- */
.fx-pasos{display:flex;align-items:flex-start;justify-content:center;max-width:520px;margin:0 auto clamp(28px,5vw,44px);list-style:none}
.fx-pi{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:72px;text-align:center}
.fx-pi__c{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--cream-dim);display:grid;place-items:center;font-family:var(--serif);font-size:18px;font-weight:600;transition:background .4s var(--ease),border-color .4s,color .4s,transform .4s var(--ease)}
.fx-pi__c svg{position:absolute;inset:0;margin:auto;width:18px;height:18px;opacity:0;transition:opacity .2s}
.fx-pi__c svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) .1s}
.fx-pi__n{transition:opacity .2s}
.fx-pi__t{font-size:13px;color:var(--cream-faint);letter-spacing:.03em;transition:color .3s}
.fx-pi.is-actual .fx-pi__c{border-color:var(--gold);color:var(--wine-600);transform:scale(1.08);box-shadow:0 0 0 0 rgba(173,127,62,.35);animation:fxPulso 2.4s var(--ease-soft) infinite}
.fx-pi.is-actual .fx-pi__t{color:var(--wine-600);font-weight:500}
.fx-pi.is-hecho .fx-pi__c{background:var(--wine-600);border-color:var(--wine-600);color:#fff}
.fx-pi.is-hecho .fx-pi__n{opacity:0}
.fx-pi.is-hecho .fx-pi__c svg{opacity:1}
.fx-pi.is-hecho .fx-pi__c svg path{stroke-dashoffset:0}
.fx-pi.is-hecho .fx-pi__t{color:var(--cream-dim)}
.fx-pl{flex:1;min-width:24px;height:2px;margin-top:16px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.fx-pl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--wine-600),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fx-pl.is-llena::after{transform:scaleX(1)}
@keyframes fxPulso{0%{box-shadow:0 0 0 0 rgba(173,127,62,.38)}70%{box-shadow:0 0 0 10px rgba(173,127,62,0)}100%{box-shadow:0 0 0 0 rgba(173,127,62,0)}}

/* ---------- pasos: cortina / revelado ---------- */
.fx-step{position:relative}
.fx-step[hidden]{display:none}
.fx-step.fx-saliendo{opacity:0;transform:translateY(-8px);transition:opacity .17s ease-in,transform .17s ease-in}
.fx-step.fx-entrando{animation:fxRevela .4s var(--ease) both}
.fx-step.fx-entrando::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-soft) 70%,transparent);animation:fxCortina .4s var(--ease) both}
@keyframes fxRevela{
  from{opacity:0;transform:translateY(18px);clip-path:inset(-40px -40px 100% -40px)}
  to{opacity:1;transform:none;clip-path:inset(-40px -40px -40px -40px)}
}
@keyframes fxCortina{from{top:0;opacity:1}to{top:100%;opacity:0}}

/* ---------- piezas comunes ---------- */
.fx-eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fx-h1{font-family:var(--serif);font-weight:500;line-height:1.1;color:var(--wine-deep);letter-spacing:.005em}
.fx-script{font-family:var(--script);font-size:40px;line-height:1;color:var(--gold);font-weight:400}
.fx-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--fx-sombra-suave)}
.fx-card--form{padding:clamp(22px,4vw,36px);box-shadow:var(--fx-sombra)}
.fx-card h2{font-family:var(--serif);font-weight:500;color:var(--wine-deep);line-height:1.15}
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--wine-600);color:#fff;font:500 16px/1 var(--sans);letter-spacing:.04em;cursor:pointer;box-shadow:var(--fx-sombra-btn);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.fx-btn:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 12px 22px rgba(69,13,26,.22);color:#fff}
.fx-btn:active{transform:translateY(0)}
.fx-btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.fx-btn:hover svg{transform:translateX(3px)}
.fx-btn:disabled{opacity:.8;cursor:progress;transform:none;background:var(--wine-600)}
.fx-btn--ghost{background:transparent;color:var(--wine-600);border:1px solid var(--gold);box-shadow:none;width:auto}
.fx-btn--ghost:hover{background:var(--wine-900);color:var(--wine-deep);box-shadow:none}
.fx-btn--auto{width:auto;height:52px}
.fx-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:fxGira .8s linear infinite}
@keyframes fxGira{to{transform:rotate(360deg)}}
.fx-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:14px;color:var(--cream-dim)!important;background:none;border:0;cursor:pointer;font-family:inherit}
.fx-link:hover{color:var(--wine-600)!important}

/* ---------- campos ---------- */
.fx-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.fx-field>label{font-size:14px;font-weight:500;color:var(--cream)}
.fx-input{position:relative;display:block}
.fx-input input,.fx-input select{width:100%;height:50px;border:1px solid var(--line);border-radius:16px;padding:0 16px;font:400 16px var(--sans);color:var(--cream);background:#fff;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.fx-input input::placeholder{color:var(--cream-faint)}
.fx-input input:focus,.fx-input select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(173,127,62,.14)}
.fx-input select{padding-right:42px;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237a1830' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.fx-input--grande input{height:52px;font-size:18px;letter-spacing:.04em;background:var(--wine-900)}
.fx-input--rfc input{letter-spacing:.06em;padding-right:46px}
.fx-field.invalid .fx-input input,.fx-field.invalid .fx-input select{border-color:var(--fx-err);box-shadow:0 0 0 3px rgba(162,59,59,.1)}
.fx-msg{font-size:12.5px;line-height:1.4;color:var(--cream-dim);min-height:0}
.fx-msg:empty{display:none}
.fx-field.invalid .fx-msg{color:var(--fx-err);font-weight:500}
.fx-ok{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .25s,transform .45s var(--ease)}
.fx-ok circle{fill:rgba(173,127,62,.14);stroke:var(--gold)}
.fx-ok path{stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) .12s}
.fx-field.valido .fx-ok{opacity:1;transform:none}
.fx-field.valido .fx-ok path{stroke-dashoffset:0}
.fx-field.valido .fx-input input{border-color:var(--gold)}
.fx-check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;cursor:pointer}
.fx-check input{width:20px;height:20px;accent-color:var(--wine-600);flex:none;cursor:pointer}
/* La casilla no lleva el aro dorado al tocarla: sólo con teclado, y en vino. */
.fx .fx-check input:focus{outline:none}
.fx .fx-check input:focus-visible{outline:2px solid var(--wine-600);outline-offset:2px}

/* ---------- paso 1 ---------- */
.fx-p1{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,48px);align-items:flex-start;padding-top:clamp(0px,2vw,16px)}
.fx-p1__txt{flex:1 1 420px;min-width:0}
.fx-p1__txt .fx-h1{font-size:clamp(38px,6vw,56px);margin:8px 0 16px}
.fx-p1__txt>p{margin:0 0 32px;font-size:clamp(16px,2vw,18px);color:var(--cream-dim);max-width:460px;font-weight:400}
.fx-lista{list-style:none;display:flex;flex-direction:column;gap:16px;max-width:460px}
.fx-lista li{display:flex;gap:14px;align-items:flex-start}
.fx-lista b{font-weight:500;display:block}
.fx-lista span.d{font-size:14px;color:var(--cream-dim)}
.fx-num{flex:none;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);color:var(--cream-dim);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;font-weight:600}
.fx-num.on{border-color:var(--gold);color:var(--wine-600)}
.fx-p1__card{flex:1 1 420px;min-width:0}
.fx-p1__card h2{font-size:clamp(26px,4vw,32px);margin:0 0 4px}
.fx-p1__card>p,.fx-sub{margin:0 0 24px;font-size:14px;color:var(--cream-dim)}
.fx-form1{display:flex;flex-direction:column;gap:20px}
.fx-aviso{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--cream-dim)}
.fx-aviso svg{margin-top:2px}
.fx-error{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid rgba(162,59,59,.3);background:rgba(162,59,59,.06);color:#7d2b2b;font-size:14px;line-height:1.45}
.fx-error[hidden]{display:none}
.fx-error svg{margin-top:2px}
.fx-error a{text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* ---------- paso 2 ---------- */
.fx-p2__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px;margin-bottom:clamp(20px,4vw,32px)}
.fx-p2__top .fx-h1{font-size:clamp(30px,5vw,44px);margin:4px 0 0}
.fx-folio{font-size:15px;color:var(--cream-dim);letter-spacing:.06em}
.fx-grid{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,32px);align-items:flex-start}
.fx-col-l{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:clamp(16px,2.4vw,24px)}
.fx-col-r{flex:1 1 520px;min-width:0}
.fx-evt-t{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--wine-deep);line-height:1.15}
.fx-evt-f{font-size:14px;color:var(--cream-dim);margin-top:2px}
.fx-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.fx-cifras .k{font-size:13px;color:var(--cream-dim)}
.fx-cifras .v{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.2;color:var(--cream);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fx-cifras .v.ok{color:var(--fx-ok)}
.fx-nota{font-size:13px;color:var(--cream-dim);margin-top:4px}
.fx-pagos h2{font-size:24px;margin:0 0 8px}
.fx-pago{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.fx-pago:last-child{border-bottom:0;padding-bottom:0}
.fx-pago .t{font-weight:500}
.fx-pago .s{font-size:13px;color:var(--cream-dim)}
.fx-pago .m{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.fx-pago .e{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:12px;font-weight:400;color:var(--fx-ok)}
.fx-pago .e svg{width:13px;height:13px}
/* Miniatura del comprobante a la derecha del monto; se abre en el visor. */
.fx-pago__d{display:flex;align-items:center;gap:12px}
.fx-comp{flex:none;width:40px;height:52px;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease}
.fx-comp img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.fx-comp:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(33,19,22,.12)}
.fx-visor{margin:auto;inset:0;border:0;padding:0;background:transparent;max-width:min(92vw,440px);width:100%}
.fx-visor::backdrop{background:rgba(20,10,12,.62)}
.fx-visor[open]{animation:fxVisor .22s ease}
@keyframes fxVisor{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.fx-visor__c{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.fx-visor__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px;font-size:14px;font-weight:500;border-bottom:1px solid var(--line)}
.fx-visor__x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:inherit}
.fx-visor__x:hover{background:rgba(0,0,0,.05)}
.fx-visor img{display:block;width:100%;max-height:78vh;object-fit:contain;background:#f4f5f7}
@media (prefers-reduced-motion: reduce){.fx-visor[open]{animation:none}.fx-comp{transition:none}}
.fx-vacio{font-size:14px;color:var(--cream-dim)}
.fx-aparece{opacity:0;animation:fxSube .55s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes fxSube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fx-como{background:var(--wine-900);display:flex;gap:14px;align-items:flex-start;padding:24px;font-size:14px;box-shadow:none}
.fx-como svg{margin-top:2px}
.fx-como b{display:block;font-weight:500;margin-bottom:4px}
.fx-col-r h2{font-size:clamp(24px,3.5vw,30px);margin:0 0 4px}
.fx-const{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px dashed var(--gold);border-radius:16px;background:var(--wine-900);margin:0 0 28px;font-size:14px;cursor:not-allowed}
.fx-const>span{flex:1;min-width:0;color:var(--cream-dim)}
.fx-const b{font-weight:500;color:var(--wine-600);opacity:.7}
.fx-const input{position:absolute;width:1px;height:1px;opacity:0}
.fx-pronto{display:inline-block;margin-top:6px;font-size:12px;letter-spacing:.04em;color:var(--gold);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.fx-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.fx-full{grid-column:1/-1}
.fx-fina{margin:0;font-size:12px;color:var(--cream-dim);text-align:center}
.fx-volver{margin:-8px 0 8px -4px}

/* ---------- escena de timbrado ---------- */
.fx-esc{max-width:620px;margin:0 auto;text-align:center}
.fx-esc__card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--fx-sombra);padding:clamp(22px,5vw,40px) clamp(16px,4vw,32px)}
.fx-esc .fx-eyebrow{display:block;margin-bottom:6px}
.fx-stage{position:relative;height:clamp(190px,46vw,224px);margin:8px auto 4px;overflow:hidden;color:var(--wine-600);--rom-oro:var(--gold);--rom-crema:var(--wine-950);--rom-tipi-acento:var(--gold);--rom-carga-sobre:#fff}
.fx-quadro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .35s ease,transform .5s var(--ease);pointer-events:none}
.fx-quadro.on{opacity:1;transform:none}
.fx-quadro svg{height:100%;width:auto;max-width:100%;aspect-ratio:1/1;overflow:visible}
.fx-quadro--van{transform:none;transition:opacity .12s}
.fx-quadro--van svg{width:min(360px,100%);height:auto;aspect-ratio:220/150}
.fx-stage .rom-van{--rom-van-vueltas:1}
.fx-stage .rom-fac{--rom-fac-ciclo:3s}
.fx-stage .rom-tipi{--rom-tipi-ciclo:2.3s}
.fx-stage .rom-cora{--rom-cora-ciclo:2.6s}
.fx-cap{font-family:var(--serif);font-weight:500;font-size:clamp(26px,5.4vw,34px);line-height:1.15;color:var(--wine-deep);min-height:1.2em;margin:8px 0 0}
.fx-cap.cambia{animation:fxSube .5s var(--ease) both}
.fx-cap2{margin:6px auto 0;max-width:420px;font-size:14px;color:var(--cream-dim);min-height:2.9em}
/* ---------- escena nueva (7-oct): corazón → documento y sello ---------- */
.fx-esc__card{position:relative}
.fx-conf--esc{top:calc(clamp(22px,5vw,40px) + 34px + clamp(190px,46vw,224px) * .66)}
.fx-stage .fx-quadro{transition:opacity .45s ease,transform .6s var(--ease),filter .7s ease}
.fx-stage.is-mal .fx-quadro{filter:saturate(.25) opacity(.6)}
.fx-sello{color:var(--wine-600)}
.fx-sello__sombra{fill:currentColor;opacity:.08}
.fx-sello__papel{fill:#fff}
.fx-sello__borde,.fx-sello__renglon{stroke-dasharray:1 2;stroke-dashoffset:1}
.fx-sello__renglon{stroke-width:2.4;opacity:.5}
.fx-sello__marca{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.fx-sello__marca text{fill:currentColor;font-family:var(--sans,"Jost",sans-serif);font-size:7.2px;font-weight:500;letter-spacing:.06em}
.fx-sello__onda{stroke:var(--gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.fx-sello__chispas{stroke:var(--gold);stroke-width:1.6;opacity:0;transform-box:view-box;transform-origin:60px 78px}
.fx-sello__mano{opacity:0;transform-box:view-box;transform-origin:60px 73px}
.fx-sello__mango{fill:var(--gold);stroke:var(--gold)}
.fx-sello__mano path{fill:var(--gold);stroke:var(--gold)}
.fx-sello__base{fill:var(--wine-600)}
.fx-sello__hoja{transform-box:view-box;transform-origin:60px 102px}
/* Tras un rechazo del SAT: el campo exacto brilla en rojo suave dos veces. */
.fx-field.fx-brillo .fx-input input,.fx-field.fx-brillo .fx-input select{animation:fxBrillo 1.6s ease-in-out 2}
@keyframes fxBrillo{0%,100%{box-shadow:0 0 0 3px rgba(162,59,59,.1)}50%{box-shadow:0 0 0 6px rgba(162,59,59,.2),0 0 22px rgba(162,59,59,.28)}}
/* Sin conexión con el SAT: botón de reintento dentro del aviso. */
.fx-reintentar{flex:none;align-self:center;margin-left:auto;min-height:40px;padding:0 16px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.fx-reintentar:hover{background:rgba(162,59,59,.06)}
.fx-cuenta b{font-variant-numeric:tabular-nums}
/* Modo foto (demo): sólo la escena, sin avisos del demo ni botones flotantes. */
.fx-foto .fx-demo,.fx-foto #fxSalirEscena,.fx-foto .wa-float-wrap,.fx-foto #fxAyuda1{display:none!important}
.fx-foto .fx-fase.is-act::after{animation:none;transform:none}
.fx-error.fx-error--info{border-color:rgba(173,127,62,.35);background:rgba(173,127,62,.07);color:var(--wine-deep)}
.fx-error:has(.fx-reintentar){flex-wrap:wrap}
.fx-error:has(.fx-reintentar)>span{flex:1 1 200px}
@media (prefers-reduced-motion: reduce){.fx-field.fx-brillo .fx-input input,.fx-field.fx-brillo .fx-input select{animation:none}.fx-sello__borde,.fx-sello__renglon{stroke-dashoffset:0}.fx-sello__marca{opacity:1}}
.fx-fases{display:flex;justify-content:center;gap:8px;margin-top:16px}
.fx-fase{width:34px;height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;transition:background .4s}
.fx-fase.is-hecho{background:var(--wine-600)}
.fx-fase.is-act{background:var(--line)}
.fx-fase.is-act::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform:translateX(-100%);animation:fxCarga 1.2s var(--ease-soft) infinite}
@keyframes fxCarga{to{transform:translateX(100%)}}

/* ---------- paso 3 ---------- */
.fx-p3{max-width:760px;margin:0 auto;text-align:center;position:relative}
.fx-sello-ok{position:relative;width:76px;height:76px;margin:0 auto 20px}
.fx-sello-ok svg{width:100%;height:100%;overflow:visible}
.fx-sello-ok .aro{stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:1}
.fx-sello-ok .tic{stroke:var(--wine-600);stroke-dasharray:1;stroke-dashoffset:1}
.fx-p3.fx-entrando .fx-sello-ok .aro,.fx-p3.fx-anima .fx-sello-ok .aro{animation:fxTrazo .8s var(--ease) .15s forwards}
.fx-p3.fx-entrando .fx-sello-ok .tic,.fx-p3.fx-anima .fx-sello-ok .tic{animation:fxTrazo .55s var(--ease) .65s forwards}
.fx-p3:not(.fx-entrando):not(.fx-anima) .fx-sello-ok :is(.aro,.tic){stroke-dashoffset:0}
@keyframes fxTrazo{to{stroke-dashoffset:0}}
.fx-p3 .fx-script{font-size:clamp(34px,6vw,40px)}
.fx-p3 .fx-h1{font-size:clamp(34px,6vw,48px);margin:8px 0 12px}
.fx-p3__sub{margin:0 auto 32px;max-width:520px;font-size:17px;color:var(--cream-dim)}
.fx-p3__sub strong{font-weight:500;color:var(--cream)}
.fx-doc{text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(18px,4vw,28px) clamp(18px,4vw,32px);box-shadow:var(--fx-sombra)}
.fx-doc__top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fx-doc__top .k{font-size:13px;color:var(--cream-dim)}
.fx-doc__top .tot{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.fx-uuid{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--cream);overflow-wrap:anywhere;display:block}
.fx-doc__uuid{text-align:right}
.fx-copiar{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;font-size:13px;color:var(--wine-600);background:none;border:0;cursor:pointer;font-family:inherit}
.fx-copiar:hover{color:var(--wine-deep)}
.fx-copiar svg{width:15px;height:15px}
.fx-copiar.ok{color:var(--fx-ok)}
.fx-arch{padding-top:6px}
.fx-arch__f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.fx-arch__f:last-child{border-bottom:0}
.fx-arch__f>span:first-child{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px}
.fx-arch__f>span:first-child svg{color:var(--gold);width:20px;height:20px}
.fx-arch__ls{display:flex;gap:4px;flex:none}
.fx-arch__ls a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:56px;min-height:44px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:500;transition:background .2s}
.fx-arch__ls a:hover{background:var(--wine-900)}
.fx-arch__ls svg{width:15px;height:15px}
.fx-acc{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.fx-ayuda{margin-top:24px;font-size:13px;color:var(--cream-dim)}
/* confeti */
.fx-conf{position:absolute;left:50%;top:38px;width:0;height:0;pointer-events:none;z-index:2}
.fx-conf i{position:absolute;left:0;top:0;display:block;opacity:0;animation:fxConf var(--t,1.8s) cubic-bezier(.12,.7,.3,1) var(--d,0s) forwards}
.fx-conf .p{width:7px;height:7px;border-radius:50%}
.fx-conf .t{width:5px;height:12px;border-radius:2px}
.fx-conf .s{width:12px;height:12px;background:var(--gold);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
@keyframes fxConf{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}
  12%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r))}
}
.fx-brilla{position:absolute;width:14px;height:14px;background:var(--gold-soft);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:fxTitila 3.2s ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none}
@keyframes fxTitila{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}

/* ---------- celular ---------- */
@media (max-width:640px){
  .fx-card{border-radius:16px;padding:18px}
  .fx-card--form{padding:18px}
  .fx-input input,.fx-input select{height:48px;border-radius:14px}
  .fx-field>label{font-size:13px}
  .fx-btn{height:54px}
  .fx-fgrid{grid-template-columns:minmax(0,1fr);gap:14px}
  .fx-cifras .v{font-size:24px}
  .fx-evt-t{font-size:22px}
  .fx-const{padding:14px 16px;margin-bottom:20px}
  .fx-pi{min-width:60px}
  .fx-doc{border-radius:16px}
  .fx-doc__uuid{text-align:left}
  .fx-p1__txt>p{margin-bottom:24px}
  .fx-acc .fx-btn{width:100%}
  .fx-script{font-size:34px}
}

/* ---------- sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .fx *,.fx *::before,.fx *::after{animation:none!important;transition:none!important}
  .fx-aparece{opacity:1}
  .fx-quadro{transform:none}
  .fx-step.fx-entrando::before{display:none}
  .fx-sello-ok :is(.aro,.tic){stroke-dashoffset:0!important}
  .fx-pi.is-actual .fx-pi__c{box-shadow:none}
  .fx-fase.is-act{background:var(--gold)}
  .fx-fase.is-act::after{display:none}
  .fx-conf,.fx-brilla{display:none}
  .rom-tipi__palo,.rom-tipi__travesano{stroke-dashoffset:0;opacity:1}
  .rom-tipi__palo--atras1,.rom-tipi__palo--atras2{opacity:.6}
  .rom-tipi__foco{opacity:1}
  .rom-cora__aro{stroke-dashoffset:0;opacity:1}
  .rom-cora__rosas{stroke-width:11.4;opacity:1}
  .rom-cora__flor{opacity:.9}
  .rom-cora__neon{opacity:1}
  .rom-chis__base,.rom-chis__fuego{opacity:1}
}

/* ============================================================
   ANIMACIONES DE MARCA — copiadas tal cual de app-ayv/www/css/app.css
   (tienda en A «teepee», corazón «My Heart» y sus chisperos). No se redibujan.
   ============================================================ */
/* ═══ ANIMACIÓN DE CARGA · TEEPEE (1-oct-2026 · E-2026-766, P7 — PRUEBA) ═══════════════
   Dictado de Alan: «un Teepee que se va armando, se cae, se desarma y se vuelve a armar».
   ⭐ 2-oct-2026 · SEGUNDA VERSIÓN: tienda en A (dos palos cruzados adelante, dos atrás, el
   travesaño y la tela), no el tipi cónico «estilo indio» de la primera — Alan, con fotos:
   «ese no es el que usamos». Un ciclo de 4.2 s, todas las piezas con la MISMA duración para
   que vayan sincronizadas:
   0-18 % los dos palos del frente se trazan (uno y luego el otro) · 12-26 % los de atrás ·
   24-32 % el travesaño · 30-44 % la tela del costado baja desde el travesaño · 40-52 % las
   cortinas del frente caen y se recogen · 52-60 % se prenden los foquitos uno por uno ·
   60-72 % armada (los foquitos titilan) · 72-79 % se tambalea · 79-88 % se vuelca hacia la
   izquierda sobre la pata del frente y rebota · 88-94 % se desarma (se desvanece) · 94-100 %
   vacío y vuelve a empezar. Sin movimiento: armada y quieta. */
.rom-tipi { display: block; overflow: visible; --rom-tipi-ciclo: 4.2s; }
.rom-tipi * { transform-box: fill-box; }
.rom-tipi__sombra { fill: currentColor; opacity: 0.12; transform-origin: 50% 50%; animation: rom-tipi-sombra var(--rom-tipi-ciclo) ease-in-out infinite; }
/* El vuelco gira sobre la pata izquierda del frente (18,100), en coordenadas del dibujo. */
.rom-tipi__todo { transform-box: view-box; transform-origin: 18px 100px; animation: rom-tipi-todo var(--rom-tipi-ciclo) ease-in-out infinite; }
.rom-tipi__palo, .rom-tipi__travesano {
  stroke: var(--rom-tipi-acento, var(--rom-oro)); stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0;
  animation: var(--rom-tipi-paso) var(--rom-tipi-ciclo) cubic-bezier(.22,1,.36,1) infinite;
}
.rom-tipi__palo--frente1 { --rom-tipi-paso: rom-tipi-frente1; }
.rom-tipi__palo--frente2 { --rom-tipi-paso: rom-tipi-frente2; }
.rom-tipi__palo--atras1 { --rom-tipi-paso: rom-tipi-atras1; stroke-width: 2.4; }
.rom-tipi__palo--atras2 { --rom-tipi-paso: rom-tipi-atras2; stroke-width: 2.4; }
.rom-tipi__travesano { --rom-tipi-paso: rom-tipi-travesano; stroke-width: 2.4; }
.rom-tipi__lona { transform-origin: 50% 0%; animation: rom-tipi-lona var(--rom-tipi-ciclo) cubic-bezier(.34,1.25,.64,1) infinite; }
.rom-tipi__costado { fill: currentColor; fill-opacity: 0.3; }
.rom-tipi__pliegue { opacity: 0.22; }
.rom-tipi__cortinas { transform-origin: 50% 0%; animation: rom-tipi-cortinas var(--rom-tipi-ciclo) cubic-bezier(.34,1.3,.64,1) infinite; }
.rom-tipi__cortina { fill: currentColor; fill-opacity: 0.55; }
.rom-tipi__lazo { stroke: var(--rom-tipi-acento, var(--rom-oro)); }
.rom-tipi__foco { fill: var(--rom-tipi-acento, var(--rom-oro)); opacity: 0; transform-origin: 50% 50%; animation: rom-tipi-foco var(--rom-tipi-ciclo) ease-out infinite; }
.rom-tipi__foco:nth-child(2) { animation-name: rom-tipi-foco2; }
.rom-tipi__foco:nth-child(3) { animation-name: rom-tipi-foco3; }
.rom-tipi__foco:nth-child(4) { animation-name: rom-tipi-foco4; }

@keyframes rom-tipi-frente1 {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  12%, 88% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rom-tipi-frente2 {
  0%, 6% { stroke-dashoffset: 1; opacity: 0; }
  7% { opacity: 1; }
  18%, 88% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rom-tipi-atras1 {
  0%, 12% { stroke-dashoffset: 1; opacity: 0; }
  13% { opacity: 0.6; }
  22%, 88% { stroke-dashoffset: 0; opacity: 0.6; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rom-tipi-atras2 {
  0%, 16% { stroke-dashoffset: 1; opacity: 0; }
  17% { opacity: 0.6; }
  26%, 88% { stroke-dashoffset: 0; opacity: 0.6; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rom-tipi-travesano {
  0%, 24% { stroke-dashoffset: 1; opacity: 0; }
  25% { opacity: 1; }
  32%, 88% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* La tela cuelga del travesaño: baja desde arriba con un poco de rebote, como cae una tela. */
@keyframes rom-tipi-lona {
  0%, 30% { transform: scaleY(0); opacity: 0; }
  33% { opacity: 1; }
  44%, 88% { transform: scaleY(1); opacity: 1; }
  94%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes rom-tipi-cortinas {
  0%, 40% { transform: scaleY(0); opacity: 0; }
  43% { opacity: 1; }
  52%, 88% { transform: scaleY(1); opacity: 1; }
  94%, 100% { transform: scaleY(1); opacity: 0; }
}
/* Los foquitos se prenden uno tras otro (52-60 %) y titilan mientras está armada. */
@keyframes rom-tipi-foco {
  0%, 52% { opacity: 0; transform: scale(0.4); }
  54% { opacity: 1; transform: scale(1.5); }
  56%, 62% { opacity: 1; transform: scale(1); }
  66% { opacity: 0.45; } 70% { opacity: 1; }
  88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; }
}
@keyframes rom-tipi-foco2 {
  0%, 54% { opacity: 0; transform: scale(0.4); }
  56% { opacity: 1; transform: scale(1.5); }
  58%, 64% { opacity: 1; transform: scale(1); }
  68% { opacity: 0.45; } 72% { opacity: 1; }
  88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; }
}
@keyframes rom-tipi-foco3 {
  0%, 56% { opacity: 0; transform: scale(0.4); }
  58% { opacity: 1; transform: scale(1.5); }
  60%, 62% { opacity: 1; transform: scale(1); }
  66% { opacity: 0.45; } 70% { opacity: 1; }
  88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; }
}
@keyframes rom-tipi-foco4 {
  0%, 58% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.5); }
  62%, 64% { opacity: 1; transform: scale(1); }
  68% { opacity: 0.45; } 72% { opacity: 1; }
  88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; }
}
/* Se tambalea (72-79 %) y se VUELCA hacia la izquierda sobre la pata izquierda del frente,
   con peso (entra acelerando y rebota un poco al tocar el piso), y ahí se desarma: todo se
   desvanece (88-94 %). Vacío hasta 100 % y se vuelve a armar. El `translateX` la regresa al
   centro ya acostada. */
@keyframes rom-tipi-todo {
  0%, 72% { transform: none; animation-timing-function: ease-in-out; }
  74.5% { transform: rotate(3deg); }
  77% { transform: rotate(-3deg); }
  79% { transform: none; animation-timing-function: cubic-bezier(.55,0,.9,.45); }
  86% { transform: translateX(var(--rom-tipi-x, 92px)) rotate(-114deg); animation-timing-function: ease-out; }
  89% { transform: translateX(var(--rom-tipi-x, 92px)) rotate(-106deg); animation-timing-function: ease-in; }
  92%, 100% { transform: translateX(var(--rom-tipi-x, 92px)) rotate(-114deg); }
}
@keyframes rom-tipi-sombra {
  0%, 4% { transform: scaleX(0.25); opacity: 0; }
  12% { opacity: 0.12; }
  44%, 79% { transform: scaleX(1); opacity: 0.12; }
  87% { transform: scaleX(1.25); opacity: 0.14; }
  94%, 100% { transform: scaleX(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rom-tipi *, .rom-tipi__todo { animation: none !important; }
  .rom-tipi__palo, .rom-tipi__travesano { stroke-dashoffset: 0; opacity: 1; }
  .rom-tipi__palo--atras1, .rom-tipi__palo--atras2 { opacity: 0.6; }
  .rom-tipi__foco { opacity: 1; }
}

/* ═══════════ EL CORAZÓN «MY HEART» · 5-oct-2026 · E-2026-766 ═══════════
   El dibujo vive en nucleo/animaciones-carga.js (CORAZON). Un ciclo de 4.6 s, todas las piezas
   con la MISMA duración: 0-16 % la estructura del aro se traza desde la punta hacia arriba (las
   dos mitades a la vez) · 13-29 % brotan las rosas encima (el trazo de puntos engorda) y sus
   remolinos en tres tandas (22-36 %) · 32-42 % se desenrolla la alfombra · 40-49 % suben los
   pedestales · 47-51 % se prenden las velas · 50-58 % el neón parpadea y prende · 60-73 % late
   dos veces con los dos chisperos tronando (58-82 %) · 78-83 % se apaga el neón · 82-96 % se deshoja (caen pétalos, el aro se
   desvanece) · 96-100 % vacío. Colores: el aro hereda `currentColor`; lo
   dorado sale de `--rom-tipi-acento` (el mismo acento del teepee); lo que se dibuja ENCIMA del
   aro (las rosas) sale de `--rom-carga-sobre` (crema sobre vino; en una escena vino, al revés). */
.rom-cora { display: block; overflow: visible; --rom-cora-ciclo: 4.6s; --rom-cora-acento: var(--rom-tipi-acento, var(--rom-oro)); }
.rom-cora * { transform-box: fill-box; }
.rom-cora__corazon { transform-box: view-box; transform-origin: 60px 50px; animation: rom-cora-late var(--rom-cora-ciclo) ease-in-out infinite; }
.rom-cora__aro { stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; animation: rom-cora-aro var(--rom-cora-ciclo) cubic-bezier(.3,.7,.3,1) infinite; }
.rom-cora__rosas { stroke-width: 0; opacity: 0; animation: rom-cora-rosas var(--rom-cora-ciclo) cubic-bezier(.3,1.3,.5,1) infinite; }
.rom-cora__flor { stroke: var(--rom-carga-sobre, var(--rom-crema)); opacity: 0; transform-origin: 50% 50%; animation: rom-cora-flor1 var(--rom-cora-ciclo) cubic-bezier(.3,1.5,.5,1) infinite; }
.rom-cora__flores--2 .rom-cora__flor { animation-name: rom-cora-flor2; }
.rom-cora__flores--3 .rom-cora__flor { animation-name: rom-cora-flor3; }
.rom-cora__alfombra { fill: currentColor; fill-opacity: 0.2; transform-origin: 50% 0%; animation: rom-cora-alfombra var(--rom-cora-ciclo) cubic-bezier(.22,1,.36,1) infinite; }
.rom-cora__pedestal { transform-origin: 50% 100%; animation: rom-cora-pedestal-i var(--rom-cora-ciclo) cubic-bezier(.34,1.3,.64,1) infinite; }
.rom-cora__pedestal--d { animation-name: rom-cora-pedestal-d; }
.rom-cora__marco { stroke: var(--rom-cora-acento); }
.rom-cora__bola { fill: currentColor; }
.rom-cora__flor-quieta { stroke: var(--rom-carga-sobre, var(--rom-crema)); stroke-width: 1; opacity: 0.85; }
.rom-cora__vela { animation: rom-cora-vela var(--rom-cora-ciclo) ease-out infinite; }
.rom-cora__cera { fill: currentColor; fill-opacity: 0.5; }
.rom-cora__llama { fill: var(--rom-cora-acento); transform-origin: 50% 100%; animation: rom-cora-llama 0.5s ease-in-out infinite alternate; }
.rom-cora__vela--d .rom-cora__llama { animation-delay: -0.23s; }
.rom-cora__neon { opacity: 0; animation: rom-cora-neon var(--rom-cora-ciclo) linear infinite; }
.rom-cora__neon path { stroke: var(--rom-cora-acento); }
.rom-cora__hilo { opacity: 0.45; }
.rom-cora__halo { opacity: 0.11; }
.rom-cora__petalo { fill: currentColor; opacity: 0; animation: rom-cora-petalo var(--rom-cora-ciclo) cubic-bezier(.45,0,.85,.6) infinite; }
.rom-cora__petalo--1 { --dx: -7px; --dy: 34px; --giro: -170deg; }
.rom-cora__petalo--2 { --dx: -3px; --dy: 28px; --giro: 140deg; }
.rom-cora__petalo--3 { --dx: 2px; --dy: 22px; --giro: -120deg; }
.rom-cora__petalo--4 { --dx: 5px; --dy: 30px; --giro: 160deg; }
.rom-cora__petalo--5 { --dx: 8px; --dy: 36px; --giro: -150deg; }
.rom-cora__petalo--6 { --dx: -4px; --dy: 58px; --giro: 200deg; }
.rom-cora__petalo--7 { --dx: 6px; --dy: 62px; --giro: -210deg; }
@keyframes rom-cora-aro {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1.5% { opacity: 1; }
  16%, 84% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Las rosas «brotan» sobre la estructura: el trazo de puntos engorda de 0 a su tamaño. */
@keyframes rom-cora-rosas {
  0%, 13% { stroke-width: 0; opacity: 0; }
  14% { opacity: 1; }
  25% { stroke-width: 12.6; }
  29%, 84% { stroke-width: 11.4; opacity: 1; }
  92%, 100% { stroke-width: 11.4; opacity: 0; }
}
@keyframes rom-cora-flor1 {
  0%, 22% { opacity: 0; transform: scale(0.2); }
  27% { opacity: 0.9; transform: scale(1.3); }
  30%, 84% { opacity: 0.9; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes rom-cora-flor2 {
  0%, 25% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 0.9; transform: scale(1.3); }
  33%, 84% { opacity: 0.9; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes rom-cora-flor3 {
  0%, 28% { opacity: 0; transform: scale(0.2); }
  33% { opacity: 0.9; transform: scale(1.3); }
  36%, 84% { opacity: 0.9; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes rom-cora-alfombra {
  0%, 32% { transform: scaleY(0); opacity: 0; }
  34% { opacity: 1; }
  42%, 88% { transform: scaleY(1); opacity: 1; }
  95%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes rom-cora-pedestal-i {
  0%, 40% { transform: scaleY(0); opacity: 0; }
  41% { opacity: 1; }
  46%, 88% { transform: scaleY(1); opacity: 1; }
  95%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes rom-cora-pedestal-d {
  0%, 43% { transform: scaleY(0); opacity: 0; }
  44% { opacity: 1; }
  49%, 88% { transform: scaleY(1); opacity: 1; }
  95%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes rom-cora-vela {
  0%, 47% { opacity: 0; }
  51%, 86% { opacity: 1; }
  93%, 100% { opacity: 0; }
}
@keyframes rom-cora-llama { from { transform: scale(0.82, 0.9); } to { transform: scale(1.08, 1.12); } }
/* El neón no «aparece»: parpadea como un tubo que agarra, se queda, respira y se apaga. */
@keyframes rom-cora-neon {
  0%, 50% { opacity: 0; }
  51.5% { opacity: 1; } 53% { opacity: 0.15; } 54.5% { opacity: 0.9; } 56% { opacity: 0.4; }
  58%, 64% { opacity: 1; } 69% { opacity: 0.74; } 74%, 78% { opacity: 1; }
  79.5% { opacity: 0.2; } 81% { opacity: 0.8; }
  83%, 100% { opacity: 0; }
}
@keyframes rom-cora-late {
  0%, 60% { transform: none; }
  63% { transform: scale(1.05); } 66% { transform: scale(1); }
  69% { transform: scale(1.035); } 73%, 100% { transform: none; }
}
@keyframes rom-cora-petalo {
  0%, 82% { opacity: 0; transform: none; }
  84% { opacity: 0.9; }
  92% { opacity: 0.75; }
  96%, 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 30px)) rotate(var(--giro, 150deg)); }
}

/* ═══════════ LOS CHISPEROS Y LA RULETA · 5-oct-2026 · E-2026-766 ═══════════
   Alan, al ver la lámina: «solo a animaciones de marry me y my heart, le agregas chisperos como
   en las fotos… o hasta el de "ruleta" en el marry me». El dibujo vive en
   nucleo/animaciones-carga.js (CHISPERO, RULETA). Dos relojes a la vez:
   · el del DIBUJO decide cuándo prende y cuándo se apaga (`rom-cora-chis` 58-82 %, junto al
     (crece desde abajo), se queda y se ahoga;
   · el de la CHISPA no para: el trazo punteado corre hacia arriba (`rom-chis-sube`, un paso de
     punteado: 3.6, 3.1 o 4.2 según el chorro) y los destellos titilan. Cada chorro lleva su paso
     y su desfase para que no suban en fila. La ruleta gira sobre su centro (seis brazos iguales: el centro de su caja ES el eje). */
.rom-chis__base { fill: currentColor; opacity: 0; }
.rom-chis__fuego { opacity: 0; transform-origin: 50% 100%; }
.rom-chis__chorro {
  fill: none; stroke: var(--rom-tipi-acento, var(--rom-oro)); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 0.1 3.5; animation: rom-chis-sube 0.42s linear infinite;
}
.rom-chis__chorro--2, .rom-chis__chorro--3 { stroke-dasharray: 0.1 3; animation-name: rom-chis-sube2; animation-duration: 0.46s; }
.rom-chis__chorro--4, .rom-chis__chorro--5 { stroke-dasharray: 0.1 4.1; animation-name: rom-chis-sube3; animation-duration: 0.56s; }
.rom-chis__chorro--6, .rom-chis__chorro--7 { stroke-width: 1.15; animation-duration: 0.62s; }
/* Izquierda y derecha no suben parejas (si no, las chispas hacen «espiga»), ni un chispero igual al otro. */
.rom-chis__chorro--3 { animation-delay: -0.23s; }
.rom-chis__chorro--5 { animation-delay: -0.3s; }
.rom-chis__chorro--7 { animation-delay: -0.33s; }
.rom-chis--d .rom-chis__chorro--1, .rom-chis--d .rom-chis__chorro--2, .rom-chis--d .rom-chis__chorro--4, .rom-chis--d .rom-chis__chorro--6 { animation-delay: -0.17s; }
.rom-chis--d .rom-chis__chorro--3, .rom-chis--d .rom-chis__chorro--5, .rom-chis--d .rom-chis__chorro--7 { animation-delay: -0.06s; }
.rom-chis__destello {
  fill: none; stroke: var(--rom-tipi-acento, var(--rom-oro)); stroke-width: 0.8; stroke-linecap: round;
  transform-origin: 50% 50%; animation: rom-chis-destello 0.7s ease-in-out infinite;
}
.rom-chis__destello--2 { animation-delay: -0.25s; }
.rom-chis__destello--3 { animation-delay: -0.48s; }
.rom-chis__destello--4 { animation-delay: -0.12s; }
.rom-cora .rom-chis__base { animation: rom-cora-vela var(--rom-cora-ciclo) ease-out infinite; }
.rom-cora .rom-chis__fuego { animation: rom-cora-chis var(--rom-cora-ciclo) ease-out infinite; }
@keyframes rom-chis-sube { to { stroke-dashoffset: -3.6; } }
@keyframes rom-chis-sube2 { to { stroke-dashoffset: -3.1; } }
@keyframes rom-chis-sube3 { to { stroke-dashoffset: -4.2; } }
@keyframes rom-chis-destello {
  0%, 100% { opacity: 0; transform: scale(0.2); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes rom-cora-chis {
  0%, 57% { opacity: 0; transform: scale(0.4, 0.08); }
  58% { opacity: 1; transform: scale(0.5, 0.2); }
  62% { opacity: 1; transform: scale(1, 1.07); }
  64%, 75% { opacity: 1; transform: none; }
  80% { opacity: 0.7; transform: scale(0.7, 0.3); }
  82%, 100% { opacity: 0; transform: scale(0.4, 0.08); }
}

/* Empresas (10-oct-2026): los dos datos de la constancia sólo con RFC de 12. `.fx-field` es flex: sin esto, `hidden` no oculta. */
.fx-pm[hidden]{display:none}
.fx-pm__nota{margin:0;font-size:13.5px;line-height:1.5;color:var(--cream-dim)}
.fx-pm__preg{font-size:14px;font-weight:500;color:var(--cream)}
.fx-sino{display:flex;gap:24px}
.fx-sino .fx-check input{accent-color:var(--wine-600)}
.fx-field.invalid .fx-sino .fx-check{color:var(--fx-err)}
.fx-input input[type="date"]{min-height:inherit;line-height:normal;text-align:left}
.fx-input input[type="date"]::-webkit-date-and-time-value{text-align:left}