/* ─── Páginas de producto · tarjetas del panel flotando en la cabecera ─────────────────────────
   Mismo lenguaje que las de la portada (assets/css/v4-hero.css, prefijo .ht-) pero con contenido de
   cada producto: /precios/vps/, /precios/hosting/, /precios/correo/, /precios/dominios/,
   /servidores-ia/ y /servidores-juego/. Todo decorativo (aria-hidden="true" en .pt).
   Escritorio (≥1024): bloque a la derecha y el texto del hero se estrecha para dejarle sitio
     (v4-producto-hero.js mide la franja que va del antetítulo al último bloque; sin JS, centrado).
   Por debajo: sólo la primera tarjeta, en flujo bajo los botones; en pantallas bajas, ninguna.
   Las animaciones de entrada/flotación son CSS; los bucles con «datos» (terminal, bandeja,
   pasos, contadores) los mueve el JS, y el HTML ya trae el estado final pintado: sin JS o con
   «reducir movimiento» se ve una tarjeta quieta y completa, nunca una a medias.
   Modo claro: al final de este fichero (html[data-tema="claro"] .pt…). */

.hero .env{position:relative}
.hero .env:has(>.pt){--pt-w:min(440px,34vw)}
.pt{--pt-bg:rgba(22,22,22,.7);--pt-borde:#2c2c31;--pt-sep:rgba(44,44,49,.85);--pt-t1:#f2f2f2;--pt-t2:#a1a1a6;--pt-t3:#6b6b70;
  --pt-azul:#3b5bff;--pt-azul2:#7c93ff;--pt-verde:#34c759;--pt-ambar:#f5a524;--pt-rojo:#ff6b6b;--pt-hueco:#1f1f22;--pt-pista:#232326;--pt-term:#0d0d0f;--pt-term-t:#d6d6db;
  position:absolute;z-index:1;pointer-events:none;user-select:none;-webkit-user-select:none;
  right:max(0px,calc(var(--pad) - max(0px,(100vw - var(--ancho)) / 2)));
  top:50%;height:min(420px,58vh);transform:translateY(-50%);
  width:var(--pt-w,440px);font:400 clamp(11px,.95vw,14px)/1.35 "Inter",system-ui,sans-serif;color:var(--pt-t1);
  perspective:900px}
.pt.medida{transform:none}

/* el texto del hero deja sitio a las tarjetas (sólo escritorio) */
@media (min-width:1024px){
  .hero .env:has(>.pt)>:not(.pt){max-width:calc(100% - var(--pt-w) - 36px)}
  .hero .env:has(>.pt) h1{font-size:clamp(40px,4.7vw,72px)}
}

.pt-c{position:absolute;will-change:transform}
.pt-1{top:0;right:0;width:23.5em;z-index:2}
.pt-2{top:41%;left:0;width:22em;z-index:3}
.pt-3{bottom:0;right:3%;width:22.5em;z-index:1}
.pt-dos .pt-2{top:auto;bottom:0}                       /* páginas con dos tarjetas */

.pt-f{animation:ptEntra 1s cubic-bezier(.2,.8,.2,1) var(--d,.45s) both,ptFlota var(--fl,8s) ease-in-out calc(var(--d,.45s) + 1s) infinite}
.pt-1 .pt-f{--d:.4s;--fl:8s}
.pt-2 .pt-f{--d:.55s;--fl:9.5s;--fy:-7px}
.pt-3 .pt-f{--d:.7s;--fl:7.2s;--fy:-5px}
@keyframes ptEntra{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ptFlota{0%,100%{transform:none}50%{transform:translateY(var(--fy,-9px))}}
.pt.quieto .pt-f,.pt.quieto .pt-f *{animation-play-state:paused!important}

.pt-t{background:var(--pt-bg);border:1px solid var(--pt-borde);border-radius:1.65em;padding:1.15em 1.25em;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 60px -24px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.3)}

/* cabecera de tarjeta */
.pt-cab{display:flex;align-items:center;gap:.75em}
.pt-ico{flex:none;width:2.45em;height:2.45em;border-radius:.75em;display:grid;place-items:center;background:var(--pt-hueco);border:1px solid var(--pt-borde);color:var(--pt-t2)}
.pt-ico svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pt-ico.azul{color:#fff;background:linear-gradient(135deg,#3b5bff,#7c93ff);border-color:transparent}
.pt-av{flex:none;width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3b5bff,#7c93ff);color:#fff;font-weight:600;font-size:.86em}
.pt-av.b{background:linear-gradient(135deg,#34c759,#7fd99a)}
.pt-av.c{background:linear-gradient(135deg,#f5a524,#ffc970)}
.pt-av.d{background:linear-gradient(135deg,#a259ff,#c99bff)}
.pt-nom{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1em}
.pt-nom b{font-weight:600;font-size:1.08em;color:var(--pt-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.pt-nom small{font-size:.88em;color:var(--pt-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.92em;letter-spacing:0}

.pt-chip{flex:none;display:inline-flex;align-items:center;gap:.45em;height:1.95em;padding:0 .7em;border-radius:999px;font-weight:500;font-size:.88em;white-space:nowrap}
.pt-chip svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pt-ok{color:var(--pt-verde);background:rgba(52,199,89,.12)}
.pt-ok i{width:.5em;height:.5em;border-radius:50%;background:var(--pt-verde);animation:ptLatido 2.4s ease-out infinite}
.pt-ambar{color:var(--pt-ambar);background:rgba(245,165,36,.12)}
.pt-azulc{color:var(--pt-azul2);background:rgba(59,91,255,.14)}
.pt-gris{color:var(--pt-t2);background:rgba(255,255,255,.06)}
.pt-rojo{color:var(--pt-rojo);background:rgba(255,107,107,.12)}
@keyframes ptLatido{0%{box-shadow:0 0 0 0 rgba(52,199,89,.55)}70%,100%{box-shadow:0 0 0 .5em rgba(52,199,89,0)}}
.pt-gira{width:.85em;height:.85em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ptGira .8s linear infinite}
@keyframes ptGira{to{transform:rotate(360deg)}}

/* dos estados en el mismo hueco: .pt-no mientras trabaja, .pt-si cuando el JS pone .listo */
.pt-est{display:grid;flex:none}
.pt-est>*{grid-area:1/1;justify-self:end}
.pt-si{opacity:0;transform:translateY(.35em) scale(.92);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.pt-no{transition:opacity .25s,transform .35s}
.listo .pt-si{opacity:1;transform:none}
.listo .pt-no{opacity:0;transform:translateY(-.35em)}

/* fila separada */
.pt-fila{display:flex;align-items:center;gap:1em;margin-top:.9em;padding-top:.85em;border-top:1px solid var(--pt-sep)}
.pt-dato{flex:none;display:flex;flex-direction:column;gap:.1em;min-width:3.8em;color:var(--pt-t3)}
.pt-dato b{font-weight:600;font-size:1.3em;color:var(--pt-t1);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.pt-dato b small{font-size:.62em;font-weight:500;color:var(--pt-t3);margin-left:.15em}

/* gráfica que corre (svg al 200 % repetido) */
.pt-graf{position:relative;flex:1;height:2.9em;overflow:hidden;border-radius:.5em;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pt-graf svg{position:absolute;left:0;top:0;width:200%;height:100%;animation:ptCorre 9s linear infinite}
.pt-graf.lenta svg{animation-duration:14s}
@keyframes ptCorre{to{transform:translateX(-50%)}}

/* barras de columnas (visitas) */
.pt-cols{flex:1;height:2.9em;display:flex;align-items:flex-end;gap:.28em}
.pt-cols i{flex:1;border-radius:.2em .2em .1em .1em;background:linear-gradient(180deg,var(--pt-azul2),var(--pt-azul));opacity:.85;height:var(--h);transform-origin:50% 100%;animation:ptCol 4.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.37s)}
.pt-cols i:last-child{background:var(--pt-verde)}
@keyframes ptCol{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}

/* barra de progreso (el JS pone --p de 0 a 1) */
.pt-prog{height:.32em;margin-top:.85em;border-radius:99px;background:var(--pt-pista);overflow:hidden}
.pt-prog i{display:block;height:100%;border-radius:inherit;background:var(--pt-azul);transform-origin:0 50%;transform:scaleX(var(--p,1));transition:transform .7s cubic-bezier(.4,0,.2,1),background .3s}
.listo .pt-prog i{background:var(--pt-verde)}
.pt-prog.larga i{transition-duration:2.4s}
.pt-prog.ambar i{background:var(--pt-ambar)}

/* pasos (instalación, propagación DNS…): .hecho los pone el JS uno a uno */
.pt-pasos{display:grid;gap:.5em;margin-top:.85em}
.pt-paso{display:flex;align-items:center;gap:.6em;color:var(--pt-t3);transition:color .3s}
.pt-paso .m{flex:none;width:1.15em;height:1.15em;border-radius:50%;border:1.5px solid var(--pt-borde);display:grid;place-items:center;transition:background .3s,border-color .3s}
.pt-paso .m svg{width:.75em;height:.75em;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .35s .1s}
.pt-paso.hecho{color:var(--pt-t2)}
.pt-paso.hecho .m{background:var(--pt-verde);border-color:var(--pt-verde)}
.pt-paso.hecho .m svg{stroke-dashoffset:0}
.pt-paso.ahora .m{border-color:var(--pt-azul2);border-right-color:transparent;animation:ptGira .8s linear infinite}
.pt-paso .v{margin-left:auto;font-variant-numeric:tabular-nums}

/* registros DNS: punto ámbar → verde */
.pt-dns{display:grid;gap:.45em;margin-top:.85em}
.pt-dns .pt-paso{display:grid;grid-template-columns:3.2em 1fr auto;gap:.6em}
.pt-dns .tipo{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.85em;color:var(--pt-t2);padding:.15em .45em;border-radius:.4em;background:var(--pt-hueco);border:1px solid var(--pt-borde);text-align:center}
.pt-dns .val{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--pt-t1)}
.pt-dns .pun{width:.55em;height:.55em;border-radius:50%;background:var(--pt-ambar);box-shadow:0 0 0 .22em rgba(245,165,36,.15);transition:background .3s,box-shadow .3s}
.pt-dns .hecho .pun{background:var(--pt-verde);box-shadow:0 0 0 .22em rgba(52,199,89,.15)}

/* terminal */
.pt-term{margin-top:.85em;padding:.75em .85em;border-radius:.85em;background:var(--pt-term);border:1px solid var(--pt-borde);
  font:400 .86em/1.6 "JetBrains Mono",ui-monospace,Menlo,monospace;color:var(--pt-term-t);height:calc(5 * 1.6em + 1.5em);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.pt-term p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-term .pr{color:var(--pt-verde)}
.pt-term .pr::after{content:" "}
.pt-term .ok{color:var(--pt-verde)}
.pt-term .az{color:var(--pt-azul2)}
.pt-term .tn{color:var(--pt-t3)}
.pt-term .cur::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:.1em;vertical-align:-.15em;background:var(--pt-term-t);animation:ptCursor 1s steps(1) infinite}
@keyframes ptCursor{50%{opacity:0}}

/* bandeja / feed: el JS mete filas arriba */
.pt-feed{display:grid;gap:.15em;margin-top:.7em;overflow:hidden}
.pt-msj{display:flex;align-items:center;gap:.7em;padding:.5em .55em;border-radius:.85em;transition:background .6s}
.pt-msj .tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:.05em}
.pt-msj .tx b{font-weight:600;color:var(--pt-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-msj .tx span{font-size:.9em;color:var(--pt-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-msj .h{flex:none;font-size:.82em;color:var(--pt-t3);font-variant-numeric:tabular-nums}
.pt-msj.nuevo{background:rgba(59,91,255,.1);animation:ptLlega .6s cubic-bezier(.2,.8,.2,1) both}
.pt-msj.nuevo .tx b::before{content:"";display:inline-block;width:.45em;height:.45em;border-radius:50%;background:var(--pt-azul2);margin-right:.45em;vertical-align:.12em}
.pt-msj.sale{animation:ptSale .45s ease both}
@keyframes ptLlega{from{opacity:0;transform:translateY(-.8em);max-height:0}to{opacity:1;transform:none;max-height:4em}}
@keyframes ptSale{to{opacity:0;transform:translateY(.4em)}}

/* spam que se va a la papelera */
.pt-spam{position:relative;margin-top:.85em;display:flex;align-items:center;gap:.6em;padding:.55em .7em;border-radius:.85em;background:var(--pt-pista);overflow:hidden}
.pt-spam .tx{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--pt-t2);transition:color .3s}
.pt-spam .tx s{text-decoration-color:transparent;transition:text-decoration-color .3s}
.pt-spam.fuera{animation:ptSpam .9s cubic-bezier(.5,0,.3,1) both}
.pt-spam.fuera .tx{color:var(--pt-t3)}
.pt-spam.fuera .tx s{text-decoration-color:var(--pt-rojo)}
@keyframes ptSpam{0%,35%{transform:none;opacity:1}100%{transform:translateX(70%);opacity:0}}

/* interruptor (renovación automática) */
.pt-sw{flex:none;width:2.6em;height:1.5em;border-radius:99px;background:var(--pt-pista);position:relative;transition:background .3s}
.pt-sw::after{content:"";position:absolute;top:.18em;left:.18em;width:1.14em;height:1.14em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.listo .pt-sw{background:var(--pt-verde)}
.listo .pt-sw::after{transform:translateX(1.1em)}

/* clave-valor pequeño */
.pt-kv{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.5em;margin-top:.85em}
.pt-kv div{padding:.5em .6em;border-radius:.7em;background:var(--pt-hueco);border:1px solid var(--pt-borde);display:flex;flex-direction:column;gap:.1em;min-width:0}
.pt-kv div>span{font-size:.8em;color:var(--pt-t3);white-space:nowrap}
.pt-kv b{font-weight:600;color:var(--pt-t1);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* casillas que se completan dentro de .pt-kv (correo sincronizado) */
.pt-kv .pt-paso b::after{content:"···";color:var(--pt-t3)}
.pt-kv .pt-paso.ahora b::after{content:"···";color:var(--pt-azul2)}
.pt-kv .pt-paso.hecho b::after{content:"✓ Al día";color:var(--pt-verde)}

/* precio pequeño de catálogo dentro de una tarjeta */
.pt-precio{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;margin-top:.85em}
.pt-precio b{font-weight:600;font-size:1.35em;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-precio span{color:var(--pt-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* escritorio estrecho */
@media (max-width:1180px) and (min-width:1024px){ .hero .env:has(>.pt){--pt-w:min(380px,35vw)} }

/* tablet y móvil: sólo la primera tarjeta, en flujo bajo los botones */
@media (max-width:1023px){
  .pt{position:relative;right:auto;top:auto;height:auto;transform:none;width:100%;max-width:23.5em;margin-top:28px;font-size:12px;perspective:none}
  .pt.medida{transform:none}
  .pt-c{position:relative;top:auto;right:auto;left:auto;bottom:auto;width:auto;will-change:auto}
  .pt-2,.pt-3{display:none}
  .pt-1 .pt-f{--d:.6s;--fy:-4px}
  .pt-t{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media (max-width:1023px) and (max-height:700px){ .pt{display:none} }
@media (max-width:560px){ .pt{max-width:none;margin-top:24px} }

@media (prefers-reduced-motion:reduce){
  .pt-f,.pt-f *{animation:none!important;transition:none!important}
  .pt-c{transform:none!important}
}

/* ─── Modo claro (html[data-tema="claro"], cookie hst_tema) ─── */
html[data-tema="claro"] .pt{--pt-bg:rgba(255,255,255,.88);--pt-borde:#e5e5e5;--pt-sep:#ececec;--pt-t1:#0d0d0d;--pt-t2:#5d5d5d;--pt-t3:#8e8e8e;
  --pt-azul:#3b5bff;--pt-azul2:#3b5bff;--pt-verde:#1a7f37;--pt-ambar:#9a6700;--pt-rojo:#cf222e;--pt-hueco:#f4f4f5;--pt-pista:#ececee;--pt-term:#f6f6f7;--pt-term-t:#2b2b30}
html[data-tema="claro"] .pt-t{box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 50px -22px rgba(0,0,0,.22)}
html[data-tema="claro"] .pt-ok{background:rgba(26,127,55,.09)}
html[data-tema="claro"] .pt-ambar{background:rgba(191,135,0,.10)}
html[data-tema="claro"] .pt-azulc{background:rgba(59,91,255,.08)}
html[data-tema="claro"] .pt-gris{background:rgba(0,0,0,.05)}
html[data-tema="claro"] .pt-rojo{background:rgba(207,34,46,.08)}
html[data-tema="claro"] .pt-msj.nuevo{background:rgba(59,91,255,.07)}
html[data-tema="claro"] .pt-msj.nuevo .tx b::before{background:#3b5bff}
html[data-tema="claro"] .pt-cols i{background:linear-gradient(180deg,#7c93ff,#3b5bff)}
html[data-tema="claro"] .pt-cols i:last-child{background:#1a7f37}
html[data-tema="claro"] .pt-sw::after{box-shadow:0 1px 3px rgba(0,0,0,.2)}
html[data-tema="claro"] .pt-graf path[stroke]{stroke:#3b5bff}