/* Hosteate · home v4 · 06 Precios: calculador del total con IVA (oct-2026).
   Las cifras las pinta PHP (pago_desde_base, el mismo cálculo que cobra el checkout);
   aquí sólo hay presentación. Regla de la sección: NADA cambia el ancho ni el alto de un
   texto al pasar el ratón — el recibo está siempre en el DOM y ocupa siempre lo mismo;
   lo que se mueve son transform y opacity (barra base/IVA y subrayado del total). */

.plan .calc{
  margin:22px 0 0;padding:14px 14px 12px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid var(--linea-2,#2c2c31);
  font:400 13px/1.35 var(--disp);font-variant-numeric:tabular-nums;
  transition:background .35s ease,border-color .35s ease;
}
.plan .calc-tit{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;
  font:500 11.5px/1 var(--disp);letter-spacing:.02em;color:var(--tinta-3)}
.plan .calc-tit .calc-ic{flex:none;width:14px;height:14px;opacity:.7}
.plan .calc dl{margin:0;display:grid;gap:7px}
.plan .calc-f{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan .calc dt{color:var(--tinta-2);margin:0}
.plan .calc dd{margin:0;color:var(--tinta);white-space:nowrap;text-align:right;min-width:9ch}
.plan .calc-f.iva dd{color:var(--tinta-2)}

/* Barra base | IVA: proporción real (--base = base/total), crece con scaleX. */
.plan .calc-barra{display:flex;height:4px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06);margin:2px 0 1px}
.plan .calc-barra i{display:block;height:100%;transform-origin:left center;transform:scaleX(.0001);
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.plan .calc-barra .b{flex:0 0 calc(var(--base,.83) * 100%);background:var(--tinta-3)}
.plan .calc-barra .v{flex:1 1 auto;background:var(--azul,#3b5bff);transition-delay:.18s}

/* Total: la fila que importa. El subrayado azul es un pseudo con scaleX. */
.plan .calc-f.tot{position:relative;padding-top:8px;border-top:1px solid var(--linea-2,#2c2c31)}
.plan .calc-f.tot dt{color:var(--tinta)}
.plan .calc-f.tot dd{font:600 17px/1 var(--disp);letter-spacing:-.01em}
.plan .calc-f.tot::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--azul,#3b5bff);
  transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.7,.2,1) .3s}
.plan .calc-f.ano{color:var(--tinta-3);font-size:12.5px;padding-top:2px}
.plan .calc-f.ano dt,.plan .calc-f.ano dd{color:var(--tinta-3)}

/* Encendido: ratón encima, foco dentro (teclado) o, sin ratón, al entrar en pantalla. */
.plan:hover .calc,.plan:focus-within .calc,.plan .calc.calc-on{background:rgba(59,91,255,.07);border-color:rgba(59,91,255,.4)}
.plan:hover .calc-barra i,.plan:focus-within .calc-barra i,.plan .calc.calc-on .calc-barra i{transform:scaleX(1)}
.plan:hover .calc-f.tot::after,.plan:focus-within .calc-f.tot::after,.plan .calc.calc-on .calc-f.tot::after{transform:scaleX(1)}
.plan:hover .calc-f.tot dd,.plan:focus-within .calc-f.tot dd,.plan .calc.calc-on .calc-f.tot dd{color:var(--azul-tx,#b3c0ff)}

/* La lista de ventajas venía con 26px de margen pensando en ir pegada al precio. */
.plan .calc + ul{margin-top:22px}

@media (max-width:560px){
  .plan .calc{padding:13px 13px 11px}
}
@media (prefers-reduced-motion:reduce){
  .plan .calc,.plan .calc-barra i,.plan .calc-f.tot::after{transition:none}
  .plan .calc-barra i{transform:scaleX(1)}
}