/* 09 · HOSTING — prefijo .hos- */
.hos { --hos-stage-h: clamp(190px, 28vh, 330px); --hos-bd: rgba(241, 238, 230, .5); /* ≥3:1 sobre #15151a */ padding-block: var(--space-l); }
body:not([data-page="home"]) .hos .eyebrow .num { display: none; }
.hos-grid { align-items: start; row-gap: var(--space-l); }

/* ---------- columna izquierda (sticky) ---------- */
.hos-side { grid-column: 1 / span 5; align-self: stretch; }
.hos-side__in { position: sticky; top: max(84px, 9vh); display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.6rem); }
.hos-title { font-size: clamp(2.5rem, min(1rem + 3.7vw, 8.6vh), 5.6rem); margin-top: .35em; max-width: 9.5em; }
.hos-lead { max-width: 44ch; }

.hos-status { display: inline-flex; align-items: center; gap: .85em; align-self: flex-start; padding: .7em 1.1em .7em .95em; border: 1px solid var(--hos-bd); border-radius: 999px; background: rgba(21, 21, 26, .86); }
.hos-dot { width: .6rem; height: .6rem; background: var(--paper-2); flex: none; /* estático: sin monitoreo público no simulamos "en vivo" */ }
.hos-status__big { font-size: .95rem; color: var(--paper); letter-spacing: .04em; line-height: 1; padding-left: .85em; border-left: 1px solid var(--hos-bd); }
.hos-status__small { color: var(--paper-2); font-size: .75rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }

/* escenario del rack: marcos tipo plano técnico */
.hos-stage { position: relative; height: var(--hos-stage-h); margin-top: .4rem; }
.hos-stage__fig { position: absolute; inset: 12px 18px 46px; }
.hos-stage__c { position: absolute; width: 14px; height: 14px; border: 0 solid var(--hos-bd); }
.hos-stage__c--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hos-stage__c--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.hos-stage__c--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hos-stage__c--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.hos-stage__floor { position: absolute; left: 0; right: 0; bottom: 46px; height: 1px; background: repeating-linear-gradient(90deg, var(--hos-bd) 0 6px, transparent 6px 10px); }
.hos-cap { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; display: flex; gap: .55em; align-items: center; font-size: .8rem; color: var(--paper-2); letter-spacing: .06em; text-transform: uppercase; }
.hos-cap::before { content: ''; width: .55em; height: .55em; background: var(--accent); box-shadow: .55em .55em 0 -.1em var(--cobalt); margin-right: .55em; }

/* ---------- columna derecha ---------- */
.hos-main { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }


.hos-plans { display: flex; flex-direction: column; gap: clamp(.7rem, 1.2vw, 1rem); }

/* ticket */
.hos-card { --plan-ink: var(--ink); position: relative; display: grid; grid-template-columns: minmax(214px, .34fr) 1fr; border-radius: 22px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; transition: transform .7s var(--ease-out), box-shadow .5s var(--ease-out); }
.hos-card[data-plan="mini"] { --plan-ink: var(--ink); }
.hos-card::before { /* spotlight que sigue al mouse */ content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 0%), color-mix(in srgb, var(--plan) 22%, transparent), transparent 62%); opacity: 0; transition: opacity .5s var(--ease-out); }
.hos-card:hover, .hos-card.is-on { box-shadow: inset 0 0 0 1px var(--plan); }
@media (hover: hover) { .hos-card:hover { transform: translateX(-8px); } }
.hos-card:hover::before, .hos-card.is-on::before { opacity: 1; }
.hos-card--feat { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }

.hos-card__stub { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .8rem; padding: clamp(.9rem, 1.6vw, 1.25rem) clamp(1.1rem, 2vw, 1.5rem); min-height: 100%; background: color-mix(in srgb, var(--plan) 13%, transparent); transition: background .5s var(--ease-out), color .5s var(--ease-out); }
.hos-card:hover .hos-card__stub, .hos-card.is-on .hos-card__stub { background: var(--plan); color: var(--plan-ink); }
.hos-card[data-plan="max"]:hover .hos-card__stub, .hos-card[data-plan="max"].is-on .hos-card__stub { --plan-ink: var(--paper); }
.hos-tag { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-2); transition: color .4s; }
.hos-card:hover .hos-tag, .hos-card.is-on .hos-tag { color: inherit; opacity: .8; }
.hos-card__name { font-size: clamp(2rem, 1.1rem + 1.8vw, 2.8rem); line-height: .9; letter-spacing: -.04em; }
.hos-meter { display: inline-flex; gap: 5px; }
.hos-meter i { width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .38; transition: opacity .4s, background .4s, transform .5s var(--ease-out); }
.hos-meter i.on { background: currentColor; opacity: 1; }
.hos-card:hover .hos-meter i.on, .hos-card.is-on .hos-meter i.on { animation: hos-blip 1.8s var(--ease-out) infinite; }
.hos-card:hover .hos-meter i.on:nth-child(2), .hos-card.is-on .hos-meter i.on:nth-child(2) { animation-delay: .15s; }
.hos-card:hover .hos-meter i.on:nth-child(3), .hos-card.is-on .hos-meter i.on:nth-child(3) { animation-delay: .3s; }
@keyframes hos-blip { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* perforación vertical entre stub y cuerpo */
.hos-card__body { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "price cta" "info info"; align-items: center; gap: .7rem clamp(1rem, 2vw, 2rem); padding: clamp(.9rem, 1.6vw, 1.2rem) clamp(1.1rem, 2vw, 1.6rem); border-left: 2px dashed var(--hos-bd); }
.hos-card__buy { display: contents; }
.hos-pricebox { grid-area: price; }
.hos-cta { grid-area: cta; justify-self: end; }
.hos-card__info { grid-area: info; }
.hos-card__body::before, .hos-card__body::after { content: ''; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.hos-card__body::before { top: -11px; }
.hos-card__body::after { bottom: -11px; }
.hos-card:hover .hos-card__body, .hos-card.is-on .hos-card__body { border-left-color: transparent; }

.hos-card__info { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.hos-card__desc { color: var(--paper-2); font-size: var(--step-0); line-height: 1.35; max-width: 52ch; }
.hos-specs { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.hos-specs div { display: grid; gap: .1rem; min-width: 0; }
.hos-specs dt { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); line-height: 1.2; }
.hos-specs dd { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: var(--step-0); letter-spacing: -.02em; color: var(--paper); font-variant-numeric: tabular-nums; }
.hos-all { padding: 1rem 1.2rem; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.hos-all__t { margin: 0 0 .7rem; font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--paper-2); }
.hos-all__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.6rem; }
.hos-all__list li { position: relative; padding-left: 1.2em; font-size: var(--step--1); line-height: 1.35; color: var(--paper); }
.hos-all__list li::before { content: ''; position: absolute; left: 0; top: .42em; width: .5em; height: .5em; background: var(--mint); }
.hos-feats li { position: relative; padding-left: 1.3em; font-size: var(--step--1); line-height: 1.4; color: var(--paper); }
.hos-feats li::before { content: ''; position: absolute; left: 0; top: .42em; width: .5em; height: .5em; background: var(--plan); box-shadow: .3em .3em 0 -.05em color-mix(in srgb, var(--plan) 35%, transparent); }

.hos-price { display: flex; align-items: baseline; gap: .15em; margin: 0; font-family: var(--font-display); font-weight: 750; letter-spacing: -.04em; line-height: .9; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hos-price__cur { font-size: var(--step-2); color: var(--paper-2); align-self: flex-start; margin-top: .1em; }
.hos-price__num { font-size: clamp(2.2rem, 1.2rem + 2vw, 3.3rem); }
.hos-price__per { font-family: var(--font-mono); font-weight: 400; font-size: var(--step--1); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-left: .5em; }
.hos-equiv { margin: .4rem 0 0; color: var(--paper-2); font-size: var(--step--1); line-height: 1.3; }
.hos-cta { white-space: nowrap; }
.hos-card:hover .hos-cta::after, .hos-card.is-on .hos-cta::after { transform: translateY(0); }
.hos-card:hover .hos-cta, .hos-card.is-on .hos-cta { color: var(--ink); }
.hos-card[data-plan="max"]:hover .hos-cta, .hos-card[data-plan="max"].is-on .hos-cta { color: var(--paper); }
.hos-card[data-plan="max"] .hos-cta::after { background: var(--cobalt); }
.hos-card--feat .hos-cta { --bg: var(--accent); }
.hos-card--feat .hos-cta::after { background: var(--paper); }
.hos-card--feat:hover .hos-cta, .hos-card--feat.is-on .hos-cta { color: var(--ink); }


.hos-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem 2rem; flex-wrap: wrap; padding-top: .2rem; }
.hos-help { min-height: 48px; }
.hos-note { order: 9; flex: 1 1 100%; color: var(--paper-2); font-size: var(--step--1); max-width: 62ch; }
.hos-detail { display: inline-flex; gap: .6em; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; color: var(--paper); padding-bottom: 3px; }
.hos-detail .arrow { display: inline-block; transition: transform .5s var(--ease-out); }
.hos-detail:hover .arrow { transform: translateX(4px); }
.hos-portal { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; color: var(--paper); padding-bottom: 3px; }
.hos-portal__sq { width: .55em; height: .55em; background: var(--accent); transition: transform .5s var(--ease-out); }
.hos-portal:hover .hos-portal__sq { transform: rotate(90deg) scale(1.3); background: var(--lime); }
.hos-portal .arrow { transition: transform .5s var(--ease-out); display: inline-block; }
.hos-portal:hover .arrow { transform: translate(3px, -3px); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .hos-side { grid-column: 1 / span 12; }
  .hos-main { grid-column: 1 / span 12; }
  .hos-side__in { position: static; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem 2.5rem; align-items: end; }
  .hos-side__in > .eyebrow { grid-column: 1 / -1; }
  .hos-title { max-width: none; }
  .hos-stage { grid-column: 2; grid-row: 2 / span 3; height: clamp(220px, 36vw, 340px); margin: 0; }
}

/* ---------- mobile: tickets apilados (precio visible sin gestos) ---------- */
@media (max-width: 760px) {
  .hos-grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-s); }
  /* el contenedor sticky se disuelve para poder ordenar: título, bajada, pastilla, PLANES, figura */
  .hos-side, .hos-side__in { display: contents; }
  .hos-side__in > .eyebrow { order: 1; }
  .hos-title { order: 2; font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .hos-lead { order: 3; }
  .hos-status { order: 4; }
  /* figura: franja sticky arriba (canvas en overlay mientras #hosting está activa) → el rack sigue a la tarjeta que leés */
  .hos-stage { --hos-stage-h: 100px; order: 5; position: sticky; top: 64px; z-index: 2; height: var(--hos-stage-h); margin: .4rem calc(var(--gutter) * -1) 0; padding-inline: var(--gutter); background: linear-gradient(to bottom, var(--ink) 82%, rgba(13, 13, 16, 0)); }
  .hos-stage__fig { inset: 4px 24px 24px; }
  .hos-stage__floor { bottom: 24px; left: var(--gutter); right: var(--gutter); }
  .hos-stage__c { display: none; }
  .hos-cap { left: var(--gutter); bottom: 4px; font-size: .75rem; }
  .hos-main { order: 6; margin-top: 0; }
  .hos-status { align-self: flex-start; }
  .hos-card { grid-template-columns: 1fr; transform: none !important; }
  .hos-card__stub { flex-direction: row; align-items: center; flex-wrap: wrap; padding-block: 1rem; gap: .4rem 1rem; }
  .hos-tag { width: 100%; }
  .hos-card__name { flex: 1; font-size: clamp(2rem, 9vw, 2.6rem); }
  .hos-card__body { grid-template-columns: 1fr; grid-template-areas: "price" "info" "cta"; align-items: start; border-left: 0; border-top: 2px dashed var(--hos-bd); }
  .hos-card__body::before, .hos-card__body::after { top: -11px; bottom: auto; }
  .hos-card__body::before { left: -11px; }
  .hos-card__body::after { left: auto; right: -11px; }
  .hos-card:hover .hos-card__body, .hos-card.is-on .hos-card__body { border-top-color: transparent; }
  .hos-cta { justify-self: stretch; justify-content: space-between; min-height: 48px; }
    .hos-foot { flex-direction: column; align-items: stretch; }
  .hos-specs { grid-template-columns: 1fr 1fr; }
  .hos-all__list { grid-template-columns: 1fr; }
  .hos-help { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .hos-card:hover .hos-meter i.on, .hos-card.is-on .hos-meter i.on { animation: none; }
}