/* Negocios Freelance · Sección cotización (tarjeta con números interactivos) */
#nf-errores.nfq{
  --nfq-card:#F7F6F2; --nfq-ink:#0B1165; --nfq-muted:#6E6F96; --nfq-line:#DAD8E2;
  --nfq-accent:#E0FF00; --nfq-on-accent:#0B1165; --nfq-mark:#DB3E19; --nfq-section:transparent;
  --nfq-cond:'Barlow Condensed','Arial Narrow',Arial,sans-serif; --nfq-sans:'Barlow',Arial,sans-serif;
  --nfq-heavy:'Anton',Impact,'Arial Narrow',sans-serif; --nfq-heavy-w:400; --nfq-hand:'Caveat Brush','Comic Sans MS',cursive;
  --pad:36px; --badge:116px; --amt:72px; --pin:34px;
  position:relative; display:block; box-sizing:border-box; width:100%; max-width:660px; margin:0 auto;
  padding:calc(var(--badge) * .42) calc(var(--badge) * .24) 22px calc(var(--pin) * .6);
  background:var(--nfq-section); box-shadow:0 0 0 100vmax var(--nfq-section); clip-path:inset(0 -100vmax);
  border:0; color:var(--nfq-ink); font-family:var(--nfq-sans); font-size:16px; line-height:1.4;
  text-align:left; letter-spacing:0; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
#nf-errores.nfq *,#nf-errores.nfq *::before,#nf-errores.nfq *::after{box-sizing:border-box}
#nf-errores.nfq :where(div,p,span,a,button){
  margin:0; padding:0; border:0; background:none; font:inherit; color:inherit; letter-spacing:inherit;
  text-transform:none; text-shadow:none; text-decoration:none; box-shadow:none; min-width:0; min-height:0;
}
#nf-errores .nfq-stage{position:relative}
#nf-errores .nfq-offset{position:absolute; inset:0; transform:translate(14px,16px); background:var(--nfq-accent)}
#nf-errores .nfq-card{position:relative; background:var(--nfq-card); padding:var(--pad) var(--pad) calc(var(--pad) * .8)}

/* Etiquetas como en la tarjeta de la calculadora */
#nf-errores .nfq-lbl{display:block; font-family:var(--nfq-cond); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--nfq-muted)}
#nf-errores .nfq-meta{display:block; margin-top:8px; font-family:var(--nfq-cond); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--nfq-muted); opacity:.8}
#nf-errores .nfq-head{display:block; padding:0 max(0px, calc(var(--badge) * .8 - var(--pad))) calc(var(--pad) * .55) 0; border-bottom:1px solid var(--nfq-line)}

/* Filas */
#nf-errores .nfq-row{position:relative; padding:18px 0 16px; border-bottom:1px solid var(--nfq-line)}
#nf-errores .nfq-row--last{border-bottom:0}
#nf-errores .nfq-line{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
#nf-errores .nfq-line--pay{justify-content:flex-start}
#nf-errores .nfq-item{position:relative; font-family:var(--nfq-sans); font-size:17px; font-weight:500; line-height:1.3; color:var(--nfq-ink)}
#nf-errores .nfq-price{flex:none; font-family:var(--nfq-cond); font-size:20px; font-weight:700; letter-spacing:.02em; color:var(--nfq-ink); font-variant-numeric:tabular-nums}
#nf-errores .nfq-circled{position:relative; display:inline-block; white-space:nowrap}
#nf-errores .nfq-ring{position:absolute; left:-.75em; top:-.55em; width:calc(100% + 1.8em); height:calc(100% + 1.15em); overflow:visible; pointer-events:none}
#nf-errores .nfq-ring path,#nf-errores .nfq-under path{fill:none; stroke:var(--nfq-mark); stroke-width:2.4; stroke-linecap:round; vector-effect:non-scaling-stroke}
#nf-errores .nfq-note{display:block; margin-top:8px; font-family:var(--nfq-hand); font-size:21px; line-height:1.15; color:var(--nfq-mark); transform:rotate(-1.5deg); transform-origin:left center}
#nf-errores .nfq-note--end{margin-top:10px; text-align:right; transform-origin:right center}
#nf-errores .nfq-qq{flex:none; margin-left:14px; font-family:var(--nfq-hand); font-size:32px; line-height:.8; color:var(--nfq-mark); transform:rotate(-4deg)}

/* Total */
#nf-errores .nfq-total{position:relative; padding-top:calc(var(--pad) * .7); border-top:2px solid var(--nfq-ink)}
#nf-errores .nfq-amount{display:block; margin-top:6px; line-height:1}
#nf-errores .nfq-amount-v{position:relative; display:inline-block; font-family:var(--nfq-heavy); font-weight:var(--nfq-heavy-w); font-size:var(--amt); line-height:1.02; color:var(--nfq-ink); white-space:nowrap; font-variant-numeric:tabular-nums}
#nf-errores .nfq-under{position:absolute; left:-2%; top:calc(100% + .06em); width:106%; height:.16em; overflow:visible}

#nf-errores .nfq-hint{display:block; margin-top:calc(var(--pad) * .7); font-family:var(--nfq-cond); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--nfq-ink)}
#nf-errores .nfq-hint-h{display:none}
@media (hover:hover) and (pointer:fine){
  #nf-errores .nfq-hint-h{display:inline}
  #nf-errores .nfq-hint-t{display:none}
}

/* Números en el borde de la tarjeta */
#nf-errores .nfq-spot{position:absolute; z-index:4; left:calc(var(--pad) * -1 - var(--pin) / 2); top:15px; width:var(--pin); height:var(--pin)}
#nf-errores .nfq-spot.is-open{z-index:8}
#nf-errores .nfq-total .nfq-spot{top:calc(var(--pad) * .7 + 26px)}
#nf-errores .nfq-pin{
  display:flex; align-items:center; justify-content:center; width:var(--pin); height:var(--pin); border-radius:50%;
  background:var(--nfq-accent); color:var(--nfq-on-accent); font-family:var(--nfq-cond); font-size:19px; font-weight:800; line-height:1;
  box-shadow:0 0 0 3px var(--nfq-on-accent); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; -webkit-appearance:none; appearance:none;
}
#nf-errores .nfq-pin:hover,#nf-errores .nfq-spot.is-open .nfq-pin{transform:scale(1.12); box-shadow:0 0 0 3px var(--nfq-on-accent), 0 0 0 6px var(--nfq-accent)}
#nf-errores .nfq-pin:focus{outline:none}
#nf-errores .nfq-pin:focus-visible{box-shadow:0 0 0 3px var(--nfq-on-accent), 0 0 0 6px var(--nfq-ink)}
#nf-errores .nfq-pin::after{content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--nfq-on-accent); animation:nfq-pulse 2.4s ease-out infinite !important; pointer-events:none}
#nf-errores .nfq-spot.is-open .nfq-pin::after,#nf-errores.nfq.is-used .nfq-pin::after{animation:none !important; opacity:0}
@keyframes nfq-pulse{0%{transform:scale(1); opacity:.9}70%{transform:scale(1.9); opacity:0}100%{transform:scale(1.9); opacity:0}}

/* Ventana emergente */
#nf-errores .nfq-pop{
  position:absolute; z-index:6; left:calc(var(--pin) + 14px); top:50%; width:300px; max-width:calc(100vw - 32px);
  padding:16px 18px 18px; background:var(--nfq-accent); color:var(--nfq-on-accent); transform:translateY(-50%);
  box-shadow:0 16px 34px rgba(3,6,40,.38); visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .16s ease, visibility 0s linear .16s;
}
#nf-errores .nfq-spot.is-open .nfq-pop{visibility:visible; opacity:1; pointer-events:auto; transition:opacity .16s ease}
#nf-errores.nfq:not(.is-js) .nfq-spot:hover .nfq-pop,#nf-errores.nfq:not(.is-js) .nfq-spot:focus-within .nfq-pop{visibility:visible; opacity:1; pointer-events:auto}
#nf-errores .nfq-caret{position:absolute; left:-7px; top:var(--caret-y,50%); width:14px; height:14px; margin-top:-7px; background:var(--nfq-accent); transform:rotate(45deg)}
#nf-errores .nfq-pop.is-below .nfq-caret{left:var(--caret-x,24px); top:-7px; margin-top:0; margin-left:-7px}
#nf-errores .nfq-pop.is-above .nfq-caret{left:var(--caret-x,24px); top:auto; bottom:-7px; margin-top:0; margin-left:-7px}
#nf-errores .nfq-pop-k{display:block; position:relative; font-family:var(--nfq-cond); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--nfq-on-accent); opacity:.7}
#nf-errores .nfq-pop-t{display:block; position:relative; margin-top:6px; font-family:var(--nfq-cond); font-size:24px; font-weight:800; line-height:1.05; color:var(--nfq-on-accent)}
#nf-errores .nfq-pop-d{display:block; position:relative; margin-top:8px; font-family:var(--nfq-sans); font-size:15px; font-weight:500; line-height:1.45; color:var(--nfq-on-accent)}

/* Insignia circular (igual a la de la calculadora) */
#nf-errores .nfq-badge{position:absolute; z-index:3; top:calc(var(--badge) * -.42); right:calc(var(--badge) * -.24); display:block; width:var(--badge); height:var(--badge); border-radius:50%; outline:none}
#nf-errores .nfq-badge svg{display:block; width:100%; height:100%; overflow:visible}
#nf-errores .nfq-badge circle{fill:var(--nfq-accent); stroke:var(--nfq-on-accent)}
#nf-errores .nfq-arrow{stroke:var(--nfq-on-accent)}
#nf-errores .nfq-spin{fill:var(--nfq-on-accent); font-family:var(--nfq-cond); transform-origin:60px 60px; animation:nfq-spin 36s linear infinite !important}
#nf-errores .nfq-arrow{transition:transform .25s ease}
#nf-errores .nfq-badge:hover .nfq-arrow,#nf-errores .nfq-badge:focus-visible .nfq-arrow{transform:translateX(5px)}
#nf-errores .nfq-badge:focus-visible{box-shadow:0 0 0 3px var(--nfq-on-accent), 0 0 0 6px var(--nfq-accent)}
@keyframes nfq-spin{to{transform:rotate(360deg)}}

/* Tarjeta angosta (celular) */
#nf-errores.nfq.is-compact{--pin:30px}
#nf-errores.nfq.is-compact .nfq-pin{font-size:17px}
#nf-errores.nfq.is-compact .nfq-item{font-size:15px}
#nf-errores.nfq.is-compact .nfq-price{font-size:18px}
#nf-errores.nfq.is-compact .nfq-note{font-size:18px}
#nf-errores.nfq.is-compact .nfq-qq{font-size:26px; margin-left:10px}
#nf-errores.nfq.is-compact .nfq-line--pay{flex-wrap:wrap; row-gap:10px}
#nf-errores.nfq.is-compact .nfq-pop-t{font-size:21px}
#nf-errores.nfq.is-compact .nfq-pop-d{font-size:14px}

/* Movimiento: gira aunque el tema o el sistema pidan menos animación, salvo que se desmarque "Giro" en Ajustes */
@media (prefers-reduced-motion:reduce){
  #nf-errores.nfq.reduce-stop .nfq-spin,#nf-errores.nfq.reduce-stop .nfq-pin::after{animation:none !important}
}