.hc-page {
  --hc-accent: #ef3f7c;
  --hc-accent-2: #ffd900;
  --hc-ink: #0b1629;
  --hc-muted: #697286;
  --hc-soft: #f5f7fb;
  --hc-line: #e4e8f0;
  color: var(--hc-ink);
  background: #fff;
  font-family: inherit;
}
.hc-page * { box-sizing: border-box; }
.hc-page--ecommerce { --hc-accent: #c12d67; --hc-accent-2: #ffd800; --hc-hero-image: url("../img/hosting-suite/hero-ecommerce-v2.jpg"); }
.hc-page--reseller { --hc-accent: #7b50e6; --hc-accent-2: #27d4e2; --hc-hero-image: url("../img/hosting-suite/hero-reseller-v2.jpg"); }
.hc-page--mail { --hc-accent: #1769d2; --hc-accent-2: #31d5ca; --hc-hero-image: url("../img/hosting-suite/hero-correo-v2.jpg"); }
.hc-page--sysadmin { --hc-accent: #08a879; --hc-accent-2: #50e3b2; --hc-hero-image: url("../img/hosting-suite/hero-sysadmin-v2.jpg"); }
.hc-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hc-hero {
  position: relative;
  overflow: hidden;
  padding: 158px 0 86px;
  color: #fff;
  background-color: #071828;
  background-image:
    linear-gradient(90deg, rgba(5,18,34,.98) 0%, rgba(5,18,34,.93) 42%, rgba(5,18,34,.52) 70%, rgba(5,18,34,.28) 100%),
    var(--hc-hero-image),
    linear-gradient(125deg, #071828 0%, #10263a 56%, #28203e 100%);
  background-position: center, center, center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hc-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to left, #000, transparent 75%);
}
.hc-breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; color:rgba(255,255,255,.62); font-size:14px; }
.hc-breadcrumbs a { color:#fff; text-decoration:none; }
.hc-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:72px; align-items:center; }
.hc-kicker { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.hc-kicker::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--hc-accent-2); box-shadow:0 0 0 7px rgba(255,216,0,.12); }
.hc-hero h1 { margin:20px 0 22px; max-width:760px; color:#fff; font-size:clamp(44px,6vw,78px); line-height:.99; letter-spacing:-.045em; font-weight:800; }
.hc-hero h1 span { color:var(--hc-accent-2); }
.hc-lead { max-width:720px; margin:0; color:rgba(255,255,255,.76); font-size:clamp(18px,2vw,22px); line-height:1.65; }
.hc-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hc-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:13px; font-weight:800; text-decoration:none !important; transition:.2s ease; }
.hc-btn:hover { transform:translateY(-2px); }
.hc-btn--primary { color:#101321 !important; background:var(--hc-accent-2); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.hc-btn--ghost { color:#fff !important; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07); }
.hc-hero-card { padding:34px; border:1px solid rgba(255,255,255,.22); border-radius:26px; background:rgba(4,17,31,.68); backdrop-filter:blur(15px); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.hc-hero-card h2 { color:#fff; font-size:23px; margin:0 0 22px; }
.hc-hero-card ul { margin:0; padding:0; list-style:none; display:grid; gap:16px; }
.hc-hero-card li { display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.82); line-height:1.45; }
.hc-hero-card i { color:var(--hc-accent-2); margin-top:4px; }
.hc-strip { border-bottom:1px solid var(--hc-line); background:#fff; }
.hc-strip-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.hc-strip-item { display:flex; gap:13px; align-items:center; padding:24px 18px; border-right:1px solid var(--hc-line); }
.hc-strip-item:last-child { border-right:0; }
.hc-strip-item i { color:var(--hc-accent); font-size:22px; }
.hc-strip-item strong { display:block; font-size:15px; }
.hc-strip-item small { color:var(--hc-muted); }
.hc-section { padding:92px 0; }
.hc-section--soft { background:var(--hc-soft); }
.hc-section-head { max-width:800px; margin:0 auto 48px; text-align:center; }
.hc-eyebrow { color:var(--hc-accent); font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.hc-section h2 { margin:12px 0 14px; color:var(--hc-ink); font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-.035em; font-weight:800; }
.hc-section-head p, .hc-copy { color:var(--hc-muted); font-size:18px; line-height:1.75; }
.hc-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.hc-plans--two { grid-template-columns:repeat(2,minmax(0,470px)); justify-content:center; }
.hc-plan { position:relative; display:flex; flex-direction:column; min-height:100%; padding:34px; border:1px solid var(--hc-line); border-radius:24px; background:#fff; box-shadow:0 18px 50px rgba(10,26,46,.07); }
.hc-plan--featured { border:2px solid var(--hc-accent); transform:translateY(-8px); }
.hc-badge { position:absolute; top:0; right:24px; transform:translateY(-50%); padding:8px 14px; border-radius:999px; color:#fff; background:var(--hc-accent); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hc-plan .hc-label { color:var(--hc-accent); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hc-plan h3 { margin:12px 0 4px; color:var(--hc-ink); font-size:28px; line-height:1.12; }
.hc-price { display:flex; align-items:flex-end; gap:8px; margin:22px 0; }
.hc-price strong { font-size:48px; line-height:1; letter-spacing:-.05em; }
.hc-price span { color:var(--hc-muted); font-size:14px; }
.hc-plan > p { color:var(--hc-muted); line-height:1.65; }
.hc-plan ul { margin:20px 0 28px; padding:20px 0 0; border-top:1px solid var(--hc-line); list-style:none; display:grid; gap:13px; }
.hc-plan li { display:flex; gap:10px; color:#4f596c; line-height:1.4; }
.hc-plan li i { color:#1eae62; margin-top:4px; }
.hc-plan .hc-btn { margin-top:auto; color:#fff !important; background:var(--hc-ink); }
.hc-plan--featured .hc-btn { background:var(--hc-accent); }
.hc-note { margin-top:14px; color:#8a91a1; font-size:12px; text-align:center; }
.hc-signature { padding:76px 0; overflow:hidden; background:#fff; }
.hc-signature-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:64px; }
.hc-signature h2 { margin:12px 0 16px; color:var(--hc-ink); font-size:clamp(34px,4vw,52px); line-height:1.06; letter-spacing:-.035em; }
.hc-signature p { color:var(--hc-muted); font-size:18px; line-height:1.75; }
.hc-signal-board { position:relative; min-height:350px; padding:34px; border-radius:30px; color:#fff; background:linear-gradient(145deg,#091d32,#1e2446); box-shadow:0 28px 60px rgba(11,22,41,.16); }
.hc-signal-board::before { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.09); border-radius:22px; pointer-events:none; }
.hc-signal-board h3 { position:relative; margin:0 0 24px; color:#fff; font-size:23px; }
.hc-signal-list { position:relative; display:grid; gap:14px; }
.hc-signal { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; padding:15px 17px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.07); }
.hc-signal i { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:var(--hc-accent-2); background:rgba(255,255,255,.08); }
.hc-signal strong,.hc-signal small { display:block; }
.hc-signal small { margin-top:2px; color:rgba(255,255,255,.58); }
.hc-signal b { color:var(--hc-accent-2); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.hc-page--reseller .hc-signal-board { background:linear-gradient(145deg,#10152f,#291e50); }
.hc-page--mail .hc-signal-board { background:linear-gradient(145deg,#071d3c,#113c60); }
.hc-page--sysadmin .hc-signal-board { background:linear-gradient(145deg,#071c28,#0c3935); }
.hc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hc-card { padding:30px; border:1px solid var(--hc-line); border-radius:22px; background:#fff; }
.hc-card-icon { display:grid; place-items:center; width:52px; height:52px; margin-bottom:20px; border-radius:15px; color:var(--hc-accent); background:color-mix(in srgb, var(--hc-accent) 11%, white); font-size:22px; }
.hc-card h3 { margin:0 0 10px; color:var(--hc-ink); font-size:21px; }
.hc-card p { margin:0; color:var(--hc-muted); line-height:1.7; }
.hc-split { display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:center; }
.hc-panel { padding:38px; border-radius:26px; color:#fff; background:linear-gradient(145deg,#0c2033,#251e3d); box-shadow:0 22px 55px rgba(10,26,46,.14); }
.hc-panel h3 { color:#fff; font-size:28px; }
.hc-panel ul { padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hc-panel li { display:flex; gap:10px; color:rgba(255,255,255,.78); }
.hc-panel i { color:var(--hc-accent-2); }
.hc-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:steps; }
.hc-step { padding:26px; border-radius:20px; background:#fff; border:1px solid var(--hc-line); }
.hc-step::before { counter-increment:steps; content:counter(steps); display:grid; place-items:center; width:38px; height:38px; margin-bottom:18px; border-radius:50%; color:#fff; background:var(--hc-accent); font-weight:800; }
.hc-step h3 { font-size:19px; margin:0 0 8px; }
.hc-step p { color:var(--hc-muted); line-height:1.6; margin:0; }
.hc-faq { max-width:900px; margin:0 auto; }
.hc-faq details { border-bottom:1px solid var(--hc-line); padding:22px 0; }
.hc-faq summary { cursor:pointer; color:var(--hc-ink); font-size:19px; font-weight:750; }
.hc-faq p { color:var(--hc-muted); line-height:1.7; margin:14px 0 0; }
.hc-cta { padding:52px; border-radius:28px; color:#fff; background:linear-gradient(120deg,#0b1b2c 0%,#26203d 65%,var(--hc-accent) 150%); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.hc-cta h2 { color:#fff; margin:8px 0; font-size:36px; }
.hc-cta p { color:rgba(255,255,255,.72); margin:0; }
@media (max-width: 991px) {
  .hc-hero { padding-top:132px; }
  .hc-hero-grid, .hc-split { grid-template-columns:1fr; gap:42px; }
  .hc-signature-grid { grid-template-columns:1fr; gap:38px; }
  .hc-plans, .hc-grid { grid-template-columns:repeat(2,1fr); }
  .hc-plans .hc-plan:last-child { grid-column:1/-1; max-width:560px; width:100%; justify-self:center; }
  .hc-steps, .hc-strip-grid { grid-template-columns:repeat(2,1fr); }
  .hc-strip-item:nth-child(2) { border-right:0; }
}
@media (max-width: 640px) {
  .hc-container { width:min(100% - 26px,1180px); }
  .hc-hero { padding:116px 0 62px; background-image:linear-gradient(90deg,rgba(5,18,34,.97),rgba(5,18,34,.83)),var(--hc-hero-image); background-position:center,68% center; }
  .hc-hero h1 { font-size:44px; }
  .hc-hero-card, .hc-plan, .hc-panel { padding:26px; }
  .hc-strip-grid, .hc-plans, .hc-plans--two, .hc-grid, .hc-steps { grid-template-columns:1fr; }
  .hc-plans .hc-plan:last-child { grid-column:auto; }
  .hc-plan--featured { transform:none; }
  .hc-strip-item { border-right:0; border-bottom:1px solid var(--hc-line); }
  .hc-section { padding:68px 0; }
  .hc-panel ul { grid-template-columns:1fr; }
  .hc-cta { padding:34px; align-items:flex-start; flex-direction:column; }
  .hc-signature { padding:58px 0; }
  .hc-signal-board { min-height:0; padding:26px 22px; }
  .hc-signal { grid-template-columns:42px 1fr; }
  .hc-signal b { grid-column:2; }
}