/* Actualización de la web: pulido general, hosting aliado y detalles */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::selection { background: color-mix(in srgb, var(--forge) 55%, transparent); color: #fff; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--forge) 70%, #fff); outline-offset: 3px; border-radius: 6px; }
.btn { transition: transform .15s, box-shadow .15s, background-color .15s; }
.cat, .rcard { transition: transform .18s ease, box-shadow .18s ease; }
.cat:hover, .rcard:hover { transform: translate(-2px, -3px); }

/* aparecer al hacer scroll */
.rv-pre { opacity: 0; transform: translateY(22px); }
.rv-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0s); }
@media (prefers-reduced-motion: reduce) { .rv-pre { opacity: 1; transform: none; } }

/* pie de página */
.foot-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.foot-host { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1.5px solid rgba(255,255,255,.28); border-radius: 999px; color: inherit; text-decoration: none; font-size: 13px; transition: background .15s, border-color .15s; }
.foot-host:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.foot-host b { color: #fff; }

/* tarjeta del hosting aliado */
.hs-wrap { margin-top: 8px; }
.hs-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: center; overflow: hidden; padding: 34px 36px; border: var(--bw) solid var(--ink); border-radius: calc(var(--r) + 6px); background: linear-gradient(135deg, color-mix(in srgb, #5865f2 18%, var(--card)), var(--card) 55%, color-mix(in srgb, var(--forge) 14%, var(--card))); box-shadow: 7px 7px 0 var(--shadow-c); }
.hs-glow { position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #5865f2 45%, transparent), transparent 68%); pointer-events: none; }
.hs-main { position: relative; z-index: 1; }
.hs-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 400 12px/1 var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.hs-tag i { width: 9px; height: 9px; border-radius: 50%; background: #2cc96f; box-shadow: 0 0 0 4px color-mix(in srgb, #2cc96f 25%, transparent); animation: hs-pulse 2.2s ease-in-out infinite; }
@keyframes hs-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, #2cc96f 0%, transparent); } }
.hs-card h2 { margin: 0 0 10px; font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--f-display); }
.hs-name { color: var(--forge); }
.hs-blurb { margin: 0 0 16px; max-width: 60ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.hs-perks { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.hs-perks li { position: relative; padding-left: 28px; font-weight: 600; }
.hs-perks li::before { content: '✓'; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2cc96f; color: #06210f; font-size: 12px; font-weight: 900; }
.hs-perks--lg li { font-size: 17px; }
.hs-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hs-side { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; }
.hs-rack { display: grid; gap: 10px; width: 100%; padding: 18px; border: var(--bw) solid var(--ink); border-radius: 16px; background: #0b0e1a; box-shadow: 5px 5px 0 var(--shadow-c); }
.hs-rack { grid-template-columns: 14px 1fr; align-items: center; }
.hs-led { width: 10px; height: 10px; border-radius: 50%; background: #2cc96f; box-shadow: 0 0 10px #2cc96f; animation: hs-blink 2.4s infinite; }
.hs-rack .hs-led:nth-of-type(2) { animation-delay: -.8s; } .hs-rack .hs-led:nth-of-type(3) { animation-delay: -1.5s; }
.hs-line { height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, #1f2640 0 14px, #2a3356 14px 16px); }
@keyframes hs-blink { 0%, 90%, 100% { opacity: 1; } 94% { opacity: .25; } }
.hs-partner { margin: 0; text-align: center; color: var(--ink-2); font-size: 13px; }
.hs-partner b { display: block; margin-top: 2px; color: var(--ink); font: 800 17px/1.2 var(--f-display); }
@media (max-width: 820px) { .hs-card { grid-template-columns: 1fr; padding: 26px 22px; } .hs-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .hs-led, .hs-tag i { animation: none; } }

/* página del hosting */
.hp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.hp-card { padding: 26px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--card); box-shadow: 5px 5px 0 var(--shadow-c); }
.hp-card h2 { margin: 0 0 16px; font: 800 24px/1.15 var(--f-display); }
.hp-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 18px; }
.hp-steps li { position: relative; padding-left: 52px; counter-increment: s; }
.hp-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--forge); color: var(--on-forge, #fff); font: 400 15px/1 var(--f-px); }
.hp-steps b { display: block; font-size: 17px; margin-bottom: 2px; }
.hp-steps span { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.hp-code { margin-top: 22px; padding: 16px; border: 2px dashed var(--forge); border-radius: 14px; background: color-mix(in srgb, var(--forge) 8%, transparent); }
.hp-code > span { display: block; margin-bottom: 8px; font: 400 11px/1 var(--f-px); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.hp-code div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hp-code code { font: 800 24px/1 var(--f-display); letter-spacing: .06em; }
.hp-code small { display: block; margin-top: 8px; color: var(--ink-2); }
.hp-note { margin: 22px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; max-width: 80ch; }
.hp-test { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--card); }
.hp-test h2 { margin: 0 0 4px; font: 800 22px/1.2 var(--f-display); } .hp-test p { margin: 0; color: var(--ink-2); }
.hp-test code { padding: 12px 18px; border-radius: 10px; background: #05070d; color: #4ade80; font: 600 18px/1 ui-monospace, Consolas, monospace; }

/* aviso del hosting dentro del generador de servidores */
.sp-host { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: var(--bw) solid var(--ink); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, #5865f2 22%, var(--card)), var(--card)); color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--shadow-c); transition: transform .15s; }
.sp-host:hover { transform: translate(-2px, -2px); }
.sp-host-t small { display: block; color: var(--ink-2); font-size: 12.5px; } .sp-host-t b { font: 800 16px/1.25 var(--f-display); }

/* selector de diseño nuevo/antiguo: visible en los dos diseños */
.ui-switch { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(12, 14, 22, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #cfd4e6; font: 600 12.5px/1 var(--f-ui, system-ui); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.ui-switch span { padding: 0 8px 0 10px; opacity: .75; }
.ui-switch a { padding: 8px 12px; border-radius: 999px; color: inherit; text-decoration: none; }
.ui-switch a.is-on { background: #ff3b4e; color: #fff; }

/* aviso legal dentro de la rejilla del pie */
.foot-in > .foot-legal { grid-column: 1 / -1; width: auto; margin-inline: 0; }