/* ==== Self-hosted fonts (formerly Google Fonts CDN; moved local
2026-07-19 to remove the render-blocking third-party request).
Files in /assets/fonts/, latin + latin-ext subsets only. ==== */
/* Inter 400 (latin-ext) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 (latin) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 (latin-ext) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500 (latin) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/inter-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 600 (latin-ext) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 600 (latin) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/inter-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 400 (latin-ext) */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400 (latin) */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 500 (latin-ext) */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 500 (latin) */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 500 (latin-ext) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 500 (latin) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 600 (latin-ext) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 600 (latin) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 700 (latin-ext) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 700 (latin) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 800 (latin-ext) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-800-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 800 (latin) */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/assets/fonts/plus-jakarta-sans-800-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
TOKENS — tema claro, paleta teal (decisión final del usuario)
============================================================ */
:root {
--bg: #fbfaf8; /* blanco cálido, estilo Tuta */
--bg-tint: #f3f1ec; /* banda de sección alternada */
--surface: #ffffff;
--border: #e7e3dc;
--border-strong: #d8d3c9;
--fg: #182634; /* azul noche para texto */
--fg-muted: #52606f;
--fg-subtle: #8a94a0;
--ink: #10202e; /* bloques oscuros (footer, terminal) */
--ink-fg: #e8edf4;
--ink-muted: #9aa9ba;
--ink-border: rgba(255,255,255,.12);
--veil: rgba(16, 32, 46, .55); /* --ink with alpha: modal overlays */
--font-display: "Plus Jakarta Sans", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Content width — 1400px like dondominio.com (was 1280, user 2026-07-16) */
--container-max: 1400px;
--radius: 20px;
--radius-sm: 12px;
--shadow-card: 0 1px 2px rgba(24, 38, 52, .05), 0 10px 30px -12px rgba(24, 38, 52, .12);
--shadow-lift: 0 2px 4px rgba(24, 38, 52, .06), 0 22px 44px -16px rgba(24, 38, 52, .18);
/* Mega menu: deep drop + accent-tinted halo so the panel reads as "menu" */
--shadow-mega: 0 2px 4px rgba(24, 38, 52, .06), 0 30px 56px -18px rgba(24, 38, 52, .26), 0 18px 48px -18px var(--accent-glow);
--ease: cubic-bezier(.22,.8,.36,1);
/* Accent — teal Manager (#0997b1, shared with GridCP branding) */
--accent: #0997b1;
--accent-hover: #077e94;
--accent-soft: rgba(9, 151, 177, 0.10);
--accent-softer: rgba(9, 151, 177, 0.055);
--accent-glow: rgba(9, 151, 177, 0.35);
--accent-fg: #ffffff;
--accent-2: #2563eb;
--hero-hue-a: rgba(9, 151, 177, 0.09);
--hero-hue-b: rgba(37, 99, 235, 0.06);
/* Traffic semantics (AntiDDoS scrubbing diagram) */
--ok: #4ade80;
--ok-soft: rgba(74, 222, 128, 0.16);
--bad: #f87171;
--bad-soft: rgba(248, 113, 113, 0.16);
--warn: #fbbf24; /* boot/warning LED (Housing rack mock) */
/* Documentation callouts (:::tip/:::warning/:::danger; info uses accent) */
--co-good: #0e9f6e;
--co-good-soft: rgba(14, 159, 110, 0.07);
--co-warn: #b45309;
--co-warn-soft: rgba(180, 83, 9, 0.07);
--co-bad: #dc2626;
--co-bad-soft: rgba(220, 38, 38, 0.06);
}
/* ============================================================
BASE
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.022em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent);
font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
font-family: var(--font-display);
}
.section { padding: 108px 0; position: relative; }
.section.tinted { background: var(--bg-tint); }
.section-head { margin-bottom: 60px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; margin: 18px 0 16px; }
.section-head p { color: var(--fg-muted); font-size: 18.5px; }
.hl { color: var(--accent); position: relative; white-space: nowrap; }
/* On phones a long highlighted phrase can exceed the viewport and blow up
grid tracks (e.g. "aunque no esté con nosotros"): let it wrap. Hero h1
phrases keep one line because they carry the drawn SVG underline. */
@media (max-width: 640px) {
:not(h1) > .hl { white-space: normal; }
}
.hl svg {
position: absolute; left: 0; right: 0; bottom: -0.18em; width: 100%; height: 0.32em;
color: var(--accent); opacity: .45;
}
/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.reveal { opacity: 1; transform: none; }
}
/* ============================================================
BOTONES — píldora, estilo Tuta
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 50px; padding: 0 30px;
font-family: var(--font-display); font-size: 16px; font-weight: 700;
border-radius: 999px; border: 1.5px solid transparent;
cursor: pointer; white-space: nowrap;
transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
/* On phones, long labels may wrap instead of widening cards/grid tracks
(nowrap was inflating .plan and .net-actions past the viewport). */
@media (max-width: 640px) {
.btn { white-space: normal; padding-top: 10px; padding-bottom: 10px; }
}
.btn-primary {
background: var(--accent); color: var(--accent-fg);
box-shadow: 0 2px 6px -1px var(--accent-glow), 0 10px 24px -10px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 3px 8px -1px var(--accent-glow), 0 16px 32px -10px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: var(--surface); color: var(--fg); border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-link { color: var(--accent); font-weight: 700; font-size: 15.5px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); }
.btn-link svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }
/* ============================================================
LANGUAGE SELECTOR (globe + ES/EN + dropdown, inside .topbar-util)
============================================================ */
.lang-trigger {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 11px; border-radius: 999px;
font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-muted);
transition: color .15s, background .15s;
}
.lang-trigger:hover { color: var(--fg); background: var(--accent-softer); }
.lang-trigger > svg:first-child { width: 14px; height: 14px; }
/* ---- Language selector ---- */
.lang-menu { position: relative; }
/* While open, climb above the fixed topbar (z 100) so the dropdown,
which hangs down over it, is not hidden underneath. */
.lang-menu.open { z-index: 101; }
.lang-trigger { border: 0; background: none; cursor: pointer; }
.lang-trigger .chev { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.lang-menu.open .lang-trigger .chev { transform: rotate(180deg); }
.lang-dropdown {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 105;
width: 208px; padding: 6px;
display: flex; flex-direction: column; gap: 2px;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
box-shadow: var(--shadow-lift);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(6px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Invisible bridge so the pointer can travel from trigger to panel */
.lang-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.lang-menu.open .lang-dropdown {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
}
.lang-option {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 12px; border-radius: 10px;
font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--fg);
}
.lang-option svg { width: 15px; height: 15px; color: var(--accent); }
a.lang-option { transition: color .15s, background .15s; }
a.lang-option:hover { background: var(--accent-softer); }
/* ============================================================
TOPBAR
============================================================
Single unified bar, fixed to the top from the very first paint: no more
"unscrolled vs scrolled" states (user decision 2026-07-16). Sizes below
match what used to be the .scrolled look, kept as the permanent default. */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(251, 250, 248, 0.95);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: flex; align-items: center; }
.logo img { height: 50px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav > a,
.nav-trigger {
padding: 9px 16px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--fg-muted);
font-family: var(--font-display);
transition: color .15s, background .15s;
}
.nav > a:hover, .nav-trigger:hover { color: var(--fg); background: var(--accent-softer); }
.nav > a.active, .nav-trigger.active { color: var(--accent); background: var(--accent-soft); }
.topbar-cta { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 12px; width: 42px; height: 42px; color: var(--fg); cursor: pointer; place-items: center; }
.menu-toggle svg { width: 20px; height: 20px; }
/* ---- "Acceder": icon-only button (the client-area silhouette), opens the
login options dropdown. Text label removed on 2026-07-16 to save space. */
.login-trigger {
display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 999px;
background: var(--accent); color: var(--accent-fg);
border: 0; cursor: pointer;
transition: background .15s, box-shadow .15s var(--ease);
box-shadow: 0 2px 6px -1px var(--accent-glow), 0 10px 24px -10px var(--accent-glow);
}
.login-trigger svg { width: 19px; height: 19px; }
.login-trigger:hover {
background: var(--accent-hover);
box-shadow: 0 0 0 5px var(--accent-soft), 0 2px 6px -1px var(--accent-glow), 0 10px 24px -10px var(--accent-glow);
}
/* ---- Secondary links (doc/afiliados/contacto + idioma) ---- */
/* Desktop-wide: shown inline, behind a separator, next to the main nav so
everything lives in a single bar. Narrower screens turn this into a
dropdown behind the "bocadillo" trigger (see .util-more below). */
.topbar-util {
display: flex;
align-items: center; gap: 0;
padding-left: 14px;
border-left: 1px solid var(--border);
font-family: var(--font-display);
}
.topbar-util-links { display: flex; align-items: center; gap: 0; }
.topbar-util-links a {
padding: 6px 10px; border-radius: 999px;
font-size: 13px; font-weight: 600; color: var(--fg-subtle);
transition: color .15s, background .15s;
}
.topbar-util-links a:hover { color: var(--fg); background: var(--accent-softer); }
.topbar-util-links a.active { color: var(--accent); background: var(--accent-soft); }
.topbar-util .lang-menu { margin-right: 0; }
.topbar-util .lang-trigger { padding: 6px 10px; color: var(--fg-subtle); }
.topbar-util .lang-trigger:hover { color: var(--fg); }
/* ---- "Bocadillo": collapses .topbar-util into a dropdown on tablet-ish
widths instead of just hiding it (user decision 2026-07-16). Wide desktop
shows it inline (no button needed); below 900px the hamburger's
.nav-util already repeats these links, so the whole group is hidden. */
.util-more { position: relative; }
.util-more-trigger {
display: none;
background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 12px;
width: 40px; height: 40px; color: var(--fg-muted); cursor: pointer; place-items: center;
transition: color .15s, border-color .15s;
}
.util-more-trigger svg { width: 19px; height: 19px; }
.util-more-trigger:hover, .util-more.open .util-more-trigger { color: var(--accent); border-color: var(--accent); }
@media (max-width: 1239px) {
.util-more-trigger { display: grid; }
.topbar-util {
position: absolute; top: calc(100% + 12px); right: 0; z-index: 101;
flex-direction: column; align-items: stretch; gap: 4px;
width: 236px; padding: 8px;
border-left: 0; padding-left: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
box-shadow: var(--shadow-lift);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(8px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.topbar-util::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.util-more.open .topbar-util {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
}
.topbar-util-links { flex-direction: column; align-items: stretch; }
.topbar-util-links a { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.topbar-util .lang-menu {
margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border);
}
.topbar-util .lang-trigger { padding: 10px 12px; width: 100%; }
}
@media (max-width: 900px) {
.util-more { display: none; }
}
/* Narrow phones: logo + Acceder + hamburger must fit on one row */
@media (max-width: 640px) {
.logo img { height: 42px; }
}
@media (max-width: 360px) {
.logo img { height: 36px; }
}
/* ---- Dropdown de acceso (Área de cliente / Manager Cloud) ---- */
.login-menu { position: relative; }
.login-dropdown {
position: absolute; top: calc(100% + 12px); right: 0;
width: 264px; padding: 8px;
display: flex; flex-direction: column; gap: 4px;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
box-shadow: var(--shadow-lift);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(8px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Invisible bridge so the pointer can travel from trigger to panel */
.login-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.login-menu.open .login-dropdown {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
}
.login-option {
display: flex; gap: 12px; align-items: center;
padding: 11px 12px; border-radius: 12px;
transition: background .15s var(--ease);
}
.login-option:hover { background: var(--accent-softer); }
.login-option .icon {
width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent);
}
.login-option .icon svg { width: 19px; height: 19px; }
.login-option b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--fg); line-height: 1.3; }
.login-option .login-desc { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
/* ---- Mega menu (dropdown rico por categoría) ---- */
/* Full-width panel anchored to the fixed .topbar (DonDominio-style): it spans
the whole viewport and the content inside aligns with .container. */
.nav-trigger {
display: inline-flex; align-items: center; gap: 6px;
border: 0; background: none; cursor: pointer;
}
.nav-trigger .chev { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.nav-item.open > .nav-trigger .chev { transform: rotate(180deg); }
.mega {
position: absolute; top: 100%; left: 50%;
/* As wide as the .container content (max-width - 2x24 padding), not the viewport */
width: min(calc(var(--container-max) - 48px), calc(100vw - 48px));
padding: 24px 26px 28px;
background: var(--surface);
border: 3px solid var(--accent); border-top: 0;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--shadow-mega);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateX(-50%);
/* Blind/curtain reveal: the panel unrolls top-to-bottom. Negative side and
bottom insets keep the border + shadow visible once revealed. */
clip-path: inset(0 -80px 100% -80px);
transition: clip-path .32s var(--ease), opacity .18s var(--ease), visibility .32s;
}
.nav-item.open > .mega {
opacity: 1; visibility: visible; pointer-events: auto;
clip-path: inset(0 -80px -80px -80px);
}
/* While a mega is open, frost the page content behind it (body.mega-open is
toggled from layout.js). The veil sits below the fixed topbar (z 100), so
the menu itself stays sharp; clicks pass through and still close the menu. */
body::after {
content: ""; position: fixed; inset: 0; z-index: 90;
background: rgba(251, 250, 248, 0.35);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .22s var(--ease), visibility .22s;
}
body.mega-open::after { opacity: 1; visibility: visible; }
.mega-inner {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 28px;
align-items: stretch;
}
.mega-inner.no-aside { grid-template-columns: minmax(0, 1fr); }
.mega-links {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 8px; min-width: 0; align-content: start;
}
/* Fixed 2-column mega (Servidores): fills column by column so the DOM order
VPS Cloud, Windows, Managed, Dedicated renders as two vertical pairs. */
.mega.mega-2col { width: min(880px, calc(100vw - 48px)); }
.mega-links.cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
}
.mega-link {
display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
padding: 16px; border-radius: 14px;
transition: background .15s var(--ease);
}
.mega-link:hover { background: var(--accent-softer); }
/* Featured entry (VPS Cloud): same accent ring + soft tint as .svc-featured */
.mega-link.featured {
background: linear-gradient(180deg, var(--accent-softer), var(--surface) 46%);
box-shadow: 0 0 0 1.5px var(--accent), 0 4px 14px -4px var(--accent-glow);
}
.mega-link.featured:hover { background: var(--accent-softer); }
.mega-link.featured .mega-tag { background: var(--accent); color: var(--accent-fg); }
.mega-link .icon {
width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent);
}
.mega-link .icon svg { width: 21px; height: 21px; }
.mega-link b {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--fg); line-height: 1.3;
}
.mega-link b svg { width: 14px; height: 14px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.mega-link:hover b svg { opacity: 1; transform: translateX(0); }
.mega-link .mega-desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); margin-top: 3px; }
.mega-link .mega-tag {
display: inline-block; margin-top: 8px;
font-family: var(--font-mono); font-size: 11.5px; color: var(--accent);
background: var(--accent-soft); padding: 2px 9px; border-radius: 999px;
}
.mega-aside {
background: var(--bg-tint); border: 1px solid var(--border); border-radius: 14px;
padding: 20px; display: flex; flex-direction: column; gap: 9px;
}
.mega-aside .icon {
width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
background: var(--surface); border: 1px solid var(--border); color: var(--accent);
}
.mega-aside .icon svg { width: 18px; height: 18px; }
.mega-aside b { font-family: var(--font-display); font-size: 14.5px; line-height: 1.35; }
.mega-aside p { font-size: 13px; line-height: 1.55; color: var(--fg-muted); flex: 1; }
.mega-aside .btn-link { font-size: 13.5px; }
.mega-aside .btn-link svg { width: 14px; height: 14px; }
/* Mobile-only secondary block inside the hamburger panel */
.nav-util { display: none; }
@media (max-width: 900px) {
.nav-util {
display: flex; flex-direction: column;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.nav-util a {
display: flex; align-items: center; gap: 11px;
padding: 12px 16px; border-radius: 12px;
font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg-muted);
transition: color .15s, background .15s;
}
.nav-util a:hover { color: var(--fg); background: var(--accent-softer); }
.nav-util a.active { color: var(--accent); background: var(--accent-soft); }
.nav-util a svg { width: 17px; height: 17px; }
.nav-util-note {
display: flex; align-items: center; gap: 11px;
padding: 12px 16px;
font-size: 13.5px; color: var(--fg-subtle);
}
.nav-util-note svg { width: 17px; height: 17px; }
.nav {
display: none; position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; padding: 12px 20px 20px;
background: var(--bg); border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-lift);
}
.nav.open { display: flex; }
.nav > a { padding: 13px 16px; font-size: 16px; border-radius: 12px; }
.menu-toggle { display: grid; }
/* Mega menu becomes an inline accordion inside the mobile panel */
.nav-item { position: static; }
.nav-trigger {
width: 100%; justify-content: space-between;
padding: 13px 16px; font-size: 16px; border-radius: 12px;
}
.mega {
position: static; width: auto; transform: none;
display: none;
padding: 2px 0 14px; border: 0; border-radius: 0;
background: none; box-shadow: none;
opacity: 1; visibility: visible; pointer-events: auto;
clip-path: none;
transition: none;
}
.nav-item.open > .mega { display: block; transform: none; }
.mega-inner { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; max-width: none; }
.mega-links { display: flex; flex-direction: column; gap: 10px; }
.mega-link {
flex-direction: row; gap: 14px; height: auto; padding: 13px 14px;
background: var(--surface); border: 1px solid var(--border);
}
.mega-link.featured {
border-color: var(--accent); box-shadow: none;
background: linear-gradient(180deg, var(--accent-softer), var(--surface) 46%);
}
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
padding: 162px 0 100px;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 840px 520px at 14% -6%, var(--hero-hue-a), transparent 62%),
radial-gradient(ellipse 720px 480px at 90% 10%, var(--hero-hue-b), transparent 62%);
transition: background .5s var(--ease);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; position: relative; }
/* Wide screens (1400px container): 60% copy / 40% visual (user decision
2026-07-16; the earlier 600px/1fr split made the mocks grow too big). */
@media (min-width: 1200px) {
.hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.hero-badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 16px 8px 10px; border-radius: 999px;
background: var(--surface); border: 1.5px solid var(--border);
font-size: 13.5px; font-weight: 600; color: var(--fg-muted);
margin-bottom: 28px; box-shadow: var(--shadow-card);
}
.hero-badge .dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
.hero h1 {
font-size: clamp(40px, 5.6vw, 68px); font-weight: 800; margin-bottom: 24px;
}
/* No max-width: like the h1, it fills the copy column, which is already
capped by the 60/40 grid split (the old 520px cap predated that). */
.hero-sub { font-size: 19.5px; color: var(--fg-muted); margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-points { display: flex; gap: 24px; flex-wrap: wrap; }
.hero-point { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--fg-muted); }
.hero-point .tick {
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.hero-point .tick svg { width: 12px; height: 12px; }
/* Mock del Manager — claro, como el producto real */
.panel-mock {
position: relative;
border-radius: var(--radius); border: 1px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow-lift);
overflow: hidden;
}
.panel-chrome {
display: flex; align-items: center; gap: 8px; padding: 13px 16px;
border-bottom: 1px solid var(--border); background: #fcfbfa;
}
.panel-chrome .dots { display: flex; gap: 6px; }
.panel-chrome .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.panel-chrome .url {
flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle);
background: var(--bg-tint); border-radius: 999px; padding: 5px 12px; margin: 0 20px;
border: 1px solid var(--border);
}
.panel-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 300px; }
.panel-side { border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; background: #fcfbfa; }
.panel-side .item {
display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 9px;
font-size: 12.5px; font-weight: 600; color: var(--fg-subtle); font-family: var(--font-display);
}
.panel-side .item svg { width: 13px; height: 13px; }
.panel-side .item.active { background: var(--accent-soft); color: var(--accent); }
.panel-main { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.panel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pcard {
border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
background: var(--surface); min-width: 0; overflow: hidden;
box-shadow: 0 1px 2px rgba(24,38,52,.04);
}
.pcard .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); margin-bottom: 5px; }
.pcard .v { font-family: var(--font-display); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard .v small { font-size: 11px; font-weight: 600; color: var(--accent); margin-left: 4px; }
.panel-spark { border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; background: var(--surface); flex: 1; box-shadow: 0 1px 2px rgba(24,38,52,.04); }
.panel-spark .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); margin-bottom: 8px; display: flex; justify-content: space-between; }
.panel-spark .k b { color: var(--accent); font-weight: 700; letter-spacing: 0; text-transform: none; }
.panel-spark svg { width: 100%; height: 64px; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.spark-fill { fill: url(#sparkGrad); opacity: .8; }
/* Terminal flotante — se mantiene oscura, como un bloque de código */
.terminal {
position: absolute; right: -18px; bottom: -30px; width: 320px;
border-radius: 16px; border: 1px solid var(--ink);
background: var(--ink);
box-shadow: var(--shadow-lift);
font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75;
overflow: hidden; color: var(--ink-muted);
}
.terminal-head { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--ink-border); font-size: 11px; }
.terminal-head svg { width: 13px; height: 13px; }
.terminal-body { padding: 12px 15px 15px; min-height: 118px; }
.terminal-body .ln { white-space: nowrap; overflow: hidden; }
.terminal-body .p { color: var(--accent); }
.terminal-body .ok { color: #4ade80; }
.terminal-body .caret { display: inline-block; width: 7px; height: 13px; background: currentColor; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Lista de cuentas dentro del mock (WHM del reseller) */
.panel-list { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex: 1; overflow: hidden; box-shadow: 0 1px 2px rgba(24,38,52,.04); }
.panel-list .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); padding: 12px 14px 6px; }
.panel-list .row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid var(--border); }
.panel-list .row b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-list .row .size { margin-left: auto; font-size: 11.5px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-list .row .st { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; flex-shrink: 0; }
.panel-list .row[hidden] { display: none; }
/* Scrubbing showcase — hero AntiDDoS: tráfico sucio (rojo) y limpio (verde)
entran al centro de scrubbing y solo sale verde hacia los servidores.
Los puntos se mueven con SMIL (animateMotion), que el kill-switch global
de prefers-reduced-motion no detiene: por eso se ocultan aparte abajo. */
.scrub {
border-radius: var(--radius); border: 1px solid var(--ink);
background: var(--ink); color: var(--ink-muted);
box-shadow: var(--shadow-lift); overflow: hidden;
}
.scrub-head {
display: flex; align-items: center; gap: 8px; padding: 12px 16px;
border-bottom: 1px solid var(--ink-border);
font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink-fg);
}
.scrub-head > svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.scrub-live {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--ok);
}
.scrub-live i {
width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
box-shadow: 0 0 0 3px var(--ok-soft);
animation: pulse 2.6s ease-in-out infinite;
}
.scrub-flow { display: block; width: 100%; height: auto; }
.scrub-flow .lane { fill: none; stroke: var(--ink-border); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.scrub-flow .lane.out { stroke: var(--ok); stroke-dasharray: none; opacity: .3; }
.scrub-flow .node { fill: rgba(255, 255, 255, .045); stroke: var(--ink-border); stroke-width: 1.2; }
.scrub-flow .icon { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scrub-flow .rack-slot { fill: none; stroke: var(--ink-muted); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.scrub-flow .led { fill: var(--ok); }
.scrub-flow .src { fill: var(--ink-border); }
.scrub-flow .lbl { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-muted); }
.scrub-flow .lbl.strong { fill: var(--ink-fg); }
.scrub-flow .dot.ok { fill: var(--ok); }
.scrub-flow .dot.bad { fill: var(--bad); }
.scrub-ring {
fill: none; stroke: var(--accent); stroke-width: 1.5;
transform-box: fill-box; transform-origin: center;
animation: scrub-ring 2.6s var(--ease) infinite;
}
@keyframes scrub-ring {
0% { transform: scale(.92); opacity: .5; }
100% { transform: scale(1.22); opacity: 0; }
}
.scrub-legend {
display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
padding: 12px 16px; border-top: 1px solid var(--ink-border);
font-family: var(--font-mono); font-size: 11px;
}
.scrub-legend span { display: inline-flex; align-items: center; gap: 7px; }
.scrub-legend i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.scrub-legend i.ok { background: var(--ok); }
.scrub-legend i.bad { background: var(--bad); }
.scrub-legend .scrub-note { margin-left: auto; color: var(--ink-fg); }
@media (max-width: 640px) { .scrub-legend .scrub-note { margin-left: 0; } }
/* Bloque "ataque detectado" integrado en la tarjeta (versión oscura de .ptask,
mismo runner [data-ptask] de layout.js) */
.scrub-task {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
padding: 14px 16px 15px; border-top: 1px solid var(--ink-border);
}
.scrub-task-head {
grid-column: 1 / -1; display: flex; align-items: center; gap: 7px;
font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--ink-fg);
}
.scrub-task-head svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.scrub-task .ptask-field .k { color: var(--ink-muted); }
.scrub-task .ptask-field .v { background: rgba(255, 255, 255, .05); border-color: var(--ink-border); color: var(--ink-fg); }
.scrub-task .ptask-ok { color: var(--ink-muted); }
.scrub-task .ptask-ok svg { color: var(--ok); }
.scrub-task .caret { display: inline-block; width: 7px; height: 12px; background: var(--accent); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@media (max-width: 640px) { .scrub-task { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.scrub-flow .dot { display: none; }
}
/* Escena AntiDDoS por fases (layout.js alterna .under-attack en .ddos-sim):
en calma solo circula tráfico verde y el escudo está en reposo; bajo ataque
aparece la ola .flood (mayoría roja), el anillo del escudo se dispara y la
tarjeta SMAMA se enciende. La salida hacia los servidores nunca cambia. */
.ddos-sim .flood { visibility: hidden; }
.ddos-sim.under-attack .flood { visibility: visible; }
.ddos-sim .scrub-live.bad { display: none; color: var(--bad); }
.ddos-sim .scrub-live.bad i { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); animation-duration: 1.1s; }
.ddos-sim.under-attack .scrub-live.ok { display: none; }
.ddos-sim.under-attack .scrub-live.bad { display: inline-flex; }
.ddos-sim .scrub-ring { animation: none; opacity: 0; }
.ddos-sim.under-attack .scrub-ring { animation: scrub-ring 1.1s var(--ease) infinite; }
.ddos-sim .scrub-task { opacity: .45; transition: opacity .35s var(--ease); }
.ddos-sim.under-attack .scrub-task { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.ddos-sim .scrub-ring, .ddos-sim.under-attack .scrub-ring { animation: none; opacity: .5; transform: none; }
}
/* RACK SHOWCASE — hero Housing (alta de un servidor en el rack).
Reutiliza el chrome de tarjeta .scrub/.scrub-flow; timeline de 10 s en CSS:
0–16% el servidor entra en la bahía, 20–42% arranca (LED ámbar),
45–100% en producción (LED verde + tráfico saliente). */
.rk-bay { fill: none; stroke: var(--ink-border); stroke-width: 1.2; stroke-dasharray: 5 6; }
.rk-new { animation: rk-slide 10s var(--ease) infinite; }
@keyframes rk-slide {
0% { transform: translateX(-250px); opacity: 0; }
4% { opacity: 1; }
16%, 100% { transform: none; opacity: 1; }
}
.rk-led-new { fill: var(--ink-border); animation: rk-boot 10s linear infinite; }
@keyframes rk-boot {
0%, 18% { fill: var(--ink-border); }
20%, 23% { fill: var(--warn); }
24%, 27% { fill: var(--ink-border); }
28%, 31% { fill: var(--warn); }
32%, 35% { fill: var(--ink-border); }
36%, 42% { fill: var(--warn); }
45%, 100% { fill: var(--ok); }
}
.rk-led-idle { animation: rk-idle 2.4s ease-in-out infinite alternate; }
@keyframes rk-idle { from { opacity: .4; } to { opacity: 1; } }
.rk-phase3 { animation: rk-phase3 10s linear infinite; }
@keyframes rk-phase3 { 0%, 46% { opacity: 0; } 52%, 95% { opacity: 1; } 100% { opacity: 0; } }
.rk-flow {
fill: none; stroke: var(--ok); stroke-width: 2;
stroke-dasharray: 4 9; stroke-linecap: round;
animation: rk-march 0.9s linear infinite;
}
@keyframes rk-march { to { stroke-dashoffset: -26; } }
.rk-spark {
fill: none; stroke: var(--ok); stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 300; stroke-dashoffset: 300;
animation: rk-draw 10s linear infinite;
}
@keyframes rk-draw { 0%, 48% { stroke-dashoffset: 300; } 82%, 100% { stroke-dashoffset: 0; } }
.rk-st { opacity: 0; }
.rk-st1 { animation: rk-st1 10s linear infinite; }
.rk-st2 { animation: rk-st2 10s linear infinite; }
.rk-st3 { animation: rk-st3 10s linear infinite; }
@keyframes rk-st1 { 0%, 15% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes rk-st2 { 0%, 19% { opacity: 0; } 23%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes rk-st3 { 0%, 46% { opacity: 0; } 52%, 96% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
/* Static final frame: server installed, green LED, traffic flowing */
.rk-new, .rk-led-new, .rk-led-idle, .rk-phase3, .rk-flow, .rk-spark, .rk-st { animation: none; }
.rk-led-new { fill: var(--ok); }
.rk-phase3 { opacity: 1; }
.rk-spark { stroke-dashoffset: 0; }
.rk-st3 { opacity: 1; }
}
/* PEERING SIM — hero Peering: looping before/after driven by inline JS in
peering.php (4s detour -> "Activando peering" banner -> 4s direct).
Without peering the traffic takes a scenic detour through EU transit hops
(amber, slow SMIL dots); with .peer-sim.on the direct DE-CIX Madrid lane
lights up (green, fast dots) and the latency/hops/speed readouts tween.
Reuses the .scrub card chrome. */
.peer-status {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; color: var(--ink-muted); white-space: nowrap;
}
.peer-status i {
width: 7px; height: 7px; border-radius: 50%; background: var(--warn);
flex-shrink: 0;
}
.peer-sim.on .peer-status i { background: var(--ok); }
.peer-lane { fill: none; stroke-width: 2; stroke-linecap: round; }
.peer-lane.detour {
stroke: var(--warn); stroke-dasharray: 4 9; opacity: .75;
animation: peer-march 1.8s linear infinite;
}
.peer-lane.direct { stroke: var(--ink-border); stroke-width: 1.5; stroke-dasharray: 3 7; opacity: .7; }
.peer-sim.on .peer-lane.detour {
stroke: var(--ink-border); stroke-width: 1.5; stroke-dasharray: 3 7;
opacity: .45; animation: none;
}
.peer-sim.on .peer-lane.direct {
stroke: var(--ok); stroke-width: 2; stroke-dasharray: 4 9;
opacity: .9; animation: peer-march .55s linear infinite;
}
@keyframes peer-march { to { stroke-dashoffset: -26; } }
.scrub-flow .dot.warn { fill: var(--warn); }
.peer-sim .p-fast { display: none; }
.peer-sim.on .p-fast { display: initial; }
.peer-sim.on .p-slow { display: none; }
.peer-sim:not(.on) .peer-ring { display: none; }
.peer-sim:not(.on) .peer-ix-lbl { fill: var(--ink-muted); }
.peer-wrap { position: relative; }
.peer-banner {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--ink) 55%, transparent);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; pointer-events: none;
transition: opacity .3s var(--ease);
}
.peer-sim.activating .peer-banner { opacity: 1; }
.peer-banner span {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--font-mono); font-size: 13px; color: var(--ink-fg);
background: color-mix(in srgb, var(--ink) 80%, transparent);
border: 1px solid var(--accent); border-radius: 999px; padding: 10px 20px;
}
.peer-banner svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.peer-sim.activating .peer-banner svg { animation: peer-spin 1s linear infinite; }
@keyframes peer-spin { to { transform: rotate(360deg); } }
.peer-foot {
display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap;
padding: 14px 16px; border-top: 1px solid var(--ink-border);
}
.peer-stat .k {
display: block; font-family: var(--font-display); font-size: 10px;
font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-muted); margin-bottom: 2px;
}
.peer-stat .v {
font-family: var(--font-mono); font-size: 15px; color: var(--warn);
font-variant-numeric: tabular-nums; white-space: nowrap;
transition: color .3s var(--ease);
}
.peer-sim.on .peer-stat .v { color: var(--ok); }
@media (max-width: 640px) { .peer-foot { gap: 8px 16px; } }
@media (prefers-reduced-motion: reduce) {
.peer-lane.detour, .peer-sim.on .peer-lane.direct, .peer-sim.activating .peer-banner svg { animation: none; }
}
/* Tarjeta de tarea flotante — versión clara de la terminal para cPanel/WHM */
.ptask {
position: absolute; right: -18px; bottom: -30px; width: 320px;
border-radius: 16px; border: 1px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow-lift);
overflow: hidden;
}
.ptask-head {
display: flex; align-items: center; gap: 7px; padding: 10px 14px;
border-bottom: 1px solid var(--border); background: #fcfbfa;
font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--fg-muted);
}
.ptask-head svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.ptask-body { padding: 13px 14px 14px; min-height: 150px; display: flex; flex-direction: column; gap: 9px; }
.ptask-field .k { display: block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); margin-bottom: 4px; }
.ptask-field .v {
display: flex; align-items: center; min-height: 28px; min-width: 0;
border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px;
background: var(--bg); font-family: var(--font-mono); font-size: 11.5px;
white-space: nowrap; overflow: hidden;
}
.ptask-field .v em { font-style: normal; color: var(--fg-subtle); }
/* .ptask-ok keeps its space while invisible so the card doesn't jump while typing */
.ptask-ok { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--fg-muted); opacity: 0; transition: opacity .3s var(--ease); }
.ptask-ok.show { opacity: 1; }
.ptask-ok svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.ptask .caret { display: inline-block; width: 7px; height: 12px; background: var(--accent); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@media (max-width: 980px) {
.hero { padding-top: 132px; }
.hero-inner { grid-template-columns: minmax(0, 1fr); gap: 52px; }
.terminal { right: 0; bottom: -24px; width: min(320px, 82%); }
.ptask { right: 0; bottom: -24px; width: min(320px, 82%); }
}
@media (max-width: 640px) {
/* Long one-line .hl phrases (SVG underline) like "nuestro datacenter"
exceed 375px at the desktop 40px minimum */
.hero h1 { font-size: clamp(30px, 9vw, 40px); }
.panel-body { grid-template-columns: 94px minmax(0, 1fr); }
.panel-side { padding: 10px 6px; }
.panel-side .item { font-size: 10.5px; padding: 6px 7px; gap: 5px; }
.panel-side .item svg { width: 11px; height: 11px; }
.panel-main { padding: 12px; gap: 10px; }
.panel-cards { gap: 8px; }
.pcard { padding: 9px 10px; min-width: 0; }
.pcard .k { font-size: 9px; }
.pcard .v { font-size: 14px; white-space: normal; }
.panel-chrome .url { margin: 0 8px; }
}
/* ============================================================
RDP SHOWCASE — hero VPS Windows.
Scene: the user double-clicks "Conectar" on a Remote Desktop client,
an RDP session opens onto a Windows-like desktop and running
metatrader5-setup.exe ends with MetaTrader open. The timeline lives in
inline JS on the page and drives cumulative phase classes on [data-rdp]
(.p-connecting → .p-desktop → .p-setup → .p-app → .p-app2); with reduced motion
the page adds .static + the final phases and hides the cursor.
============================================================ */
.rdp-screen {
position: relative; height: 380px; overflow: hidden;
background:
radial-gradient(120% 90% at 82% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
var(--ink);
}
@media (max-width: 640px) { .rdp-screen { height: 320px; } }
/* Fake mouse pointer + double-click ripple */
.rdp-cursor {
position: absolute; left: 74%; top: 82%; z-index: 6; width: 19px; height: 19px;
transition: left .9s var(--ease), top .9s var(--ease);
pointer-events: none;
}
.rdp-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.rdp-cursor svg path { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.rdp-cursor::after {
content: ""; position: absolute; left: -7px; top: -7px; width: 32px; height: 32px;
border-radius: 50%; border: 2px solid var(--accent); opacity: 0;
}
.rdp-cursor.clicking::after { animation: rdp-click .32s ease-out; }
@keyframes rdp-click {
from { transform: scale(.35); opacity: .95; }
to { transform: scale(1.25); opacity: 0; }
}
[data-rdp].static .rdp-cursor { display: none; }
/* Phase 1: local Remote Desktop client dialog */
.rdp-client {
position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
width: min(320px, 86%);
background: var(--surface); color: var(--fg);
border-radius: 14px; box-shadow: var(--shadow-lift);
padding: 20px 22px 22px; text-align: center;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.rdp-client .rdp-client-ico {
width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px;
display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent);
}
.rdp-client .rdp-client-ico svg { width: 22px; height: 22px; }
.rdp-client b { display: block; font-family: var(--font-display); font-size: 14.5px; margin-bottom: 12px; }
.rdp-client-field {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 12px; color: var(--fg-muted);
background: var(--bg-tint); border: 1px solid var(--border); border-radius: 9px;
padding: 8px 12px; margin-bottom: 14px;
}
.rdp-client-field code { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.rdp-btn {
display: inline-block; padding: 9px 26px; border-radius: 999px;
background: var(--accent); color: var(--accent-fg);
font-family: var(--font-display); font-size: 13px; font-weight: 700;
transition: transform .15s var(--ease), filter .15s var(--ease);
}
.rdp-btn.pressed { transform: scale(.94); filter: brightness(.88); }
[data-rdp].p-connecting .rdp-client,
[data-rdp].p-desktop .rdp-client {
opacity: 0; transform: translate(-50%, -50%) scale(.96); pointer-events: none;
}
/* Phase 2: connecting pill */
.rdp-connecting {
position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-fg);
background: color-mix(in srgb, var(--ink) 78%, transparent);
border: 1px solid var(--accent); border-radius: 999px; padding: 11px 20px;
opacity: 0; transition: opacity .3s var(--ease);
}
.rdp-connecting svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
[data-rdp].p-connecting .rdp-connecting { opacity: 1; }
[data-rdp].p-connecting .rdp-connecting svg { animation: rdp-spin 1s linear infinite; }
[data-rdp].p-desktop .rdp-connecting { opacity: 0; }
@keyframes rdp-spin { to { transform: rotate(360deg); } }
/* Phase 3: remote Windows desktop */
.rdp-remote {
position: absolute; inset: 0;
opacity: 0; transform: scale(.975); pointer-events: none;
transition: opacity .45s var(--ease), transform .45s var(--ease);
}
[data-rdp].p-desktop .rdp-remote { opacity: 1; transform: none; }
.rdp-connbar {
position: absolute; left: 0; right: 0; top: 0; z-index: 3;
display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 6px 10px;
background: color-mix(in srgb, var(--accent) 26%, var(--ink));
font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-fg);
white-space: nowrap; overflow: hidden;
}
.rdp-connbar svg { width: 11px; height: 11px; color: var(--ok); flex-shrink: 0; }
.rdp-icons {
position: absolute; left: 12px; top: 42px;
display: flex; flex-direction: column; gap: 15px; width: 92px;
}
.rdp-ico {
display: flex; flex-direction: column; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 9px; color: var(--ink-fg);
text-align: center; line-height: 1.3; word-break: break-all;
}
.rdp-ico .glyph {
width: 34px; height: 34px; border-radius: 9px;
display: grid; place-items: center;
background: rgba(255, 255, 255, .07); color: var(--ink-fg);
border: 1px solid transparent;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.rdp-ico .glyph svg { width: 17px; height: 17px; }
.rdp-ico.selected .glyph { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Installer window (phase .p-setup) */
.rdp-setup {
position: absolute; left: 34%; top: 30%; width: 46%; z-index: 2;
border-radius: 10px; overflow: hidden;
background: var(--surface); color: var(--fg);
box-shadow: var(--shadow-lift);
opacity: 0; transform: scale(.94); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
[data-rdp].p-setup .rdp-setup { opacity: 1; transform: none; }
[data-rdp].p-app .rdp-setup { opacity: 0; transform: scale(.94); }
.rdp-winbar {
display: flex; align-items: center; gap: 7px; padding: 7px 10px;
background: var(--bg-tint); border-bottom: 1px solid var(--border);
font-family: var(--font-display); font-size: 10.5px; font-weight: 700; color: var(--fg);
white-space: nowrap; overflow: hidden;
}
.rdp-winbar svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.rdp-winbar .winctl { margin-left: auto; display: inline-flex; gap: 5px; }
.rdp-winbar .winctl i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.rdp-setup-body { padding: 12px 12px 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); }
.rdp-setup-body .bar {
display: block; height: 7px; margin-top: 9px; border-radius: 999px;
background: var(--bg-tint); border: 1px solid var(--border); overflow: hidden;
}
.rdp-setup-body .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
[data-rdp].p-setup .rdp-setup-body .bar i { animation: rdp-progress 1.45s var(--ease) forwards; }
@keyframes rdp-progress { from { width: 0; } to { width: 100%; } }
/* MetaTrader window (phase .p-app) */
.rdp-app {
position: absolute; left: 27%; right: 3.5%; top: 14%; bottom: 52px; z-index: 2;
border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
background: var(--surface); color: var(--fg);
box-shadow: var(--shadow-lift);
opacity: 0; transform: scale(.95); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
[data-rdp].p-app .rdp-app { opacity: 1; transform: none; }
/* Accounting window (phase .p-app2): cascades over MetaTrader to show
the desktop multitasking with two apps open at once */
.rdp-app2 {
position: absolute; left: 41%; right: 1.5%; top: 42%; bottom: 44px; z-index: 3;
border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
background: var(--surface); color: var(--fg);
box-shadow: var(--shadow-lift);
opacity: 0; transform: scale(.95); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
[data-rdp].p-app2 .rdp-app2 { opacity: 1; transform: none; }
.rdp-app2-body {
flex: 1; padding: 9px 11px; display: flex; flex-direction: column; gap: 6px;
font-family: var(--font-mono); font-size: 9.5px;
}
.rdp-app2-body .row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 4px 8px; border-radius: 6px;
background: var(--bg-tint); color: var(--fg-muted);
white-space: nowrap; overflow: hidden;
opacity: 0; transform: translateY(4px);
transition: opacity .3s var(--ease), transform .3s var(--ease);
transition-delay: calc(.2s + var(--i) * .14s);
}
.rdp-app2-body .row b { color: var(--fg); font-weight: 600; }
[data-rdp].p-app2 .rdp-app2-body .row { opacity: 1; transform: none; }
.rdp-app-chart { flex: 1; padding: 8px 10px; }
.rdp-app-chart svg { width: 100%; height: 100%; display: block; }
.rdp-app-chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 5; }
.rdp-app-chart .cndl { opacity: 0; transform: translateY(5px); transition: opacity .3s var(--ease), transform .3s var(--ease); transition-delay: calc(.25s + var(--i) * .11s); }
[data-rdp].p-app .rdp-app-chart .cndl { opacity: 1; transform: none; }
.rdp-app-chart .cndl line { stroke-width: 1.4; }
.rdp-app-chart .cndl.up rect { fill: var(--ok); } .rdp-app-chart .cndl.up line { stroke: var(--ok); }
.rdp-app-chart .cndl.dn rect { fill: var(--bad); } .rdp-app-chart .cndl.dn line { stroke: var(--bad); }
/* Taskbar with the four-pane "start" logo */
.rdp-taskbar {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 34px;
background: color-mix(in srgb, var(--ink) 72%, transparent);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border-top: 1px solid var(--ink-border);
}
.rdp-start { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .08); }
.rdp-start svg { width: 13px; height: 13px; }
.rdp-start svg rect { fill: var(--accent); }
.rdp-task {
display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
border-radius: 7px; background: rgba(255, 255, 255, .09);
border-bottom: 2px solid var(--accent);
font-family: var(--font-mono); font-size: 10px; color: var(--ink-fg);
opacity: 0; transition: opacity .3s var(--ease);
}
.rdp-task svg { width: 11px; height: 11px; color: var(--accent); flex-shrink: 0; }
[data-rdp].p-app .rdp-task.t1 { opacity: 1; }
[data-rdp].p-app2 .rdp-task.t2 { opacity: 1; }
.rdp-clock { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) {
.rdp-cursor { transition: none; }
.rdp-app-chart .cndl { transition: none; }
.rdp-app2-body .row { transition: none; }
}
/* ============================================================
STATS STRIP
============================================================ */
.stats { padding: 0 0 100px; }
.stats-inner {
display: grid; grid-template-columns: repeat(4, 1fr);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-card); overflow: hidden;
}
.stat { padding: 36px 24px; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 26%; height: 48%; width: 1px; background: var(--border); }
.stat .n { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat .n em { font-style: normal; color: var(--accent); }
.stat .l { font-size: 14px; color: var(--fg-subtle); margin-top: 4px; font-weight: 500; }
@media (max-width: 760px) {
.stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat:nth-child(3)::before { display: none; }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 420px) {
.stat { padding: 28px 12px; }
.stat .n { font-size: 23px; }
}
/* ============================================================
CARDS GENÉRICAS
============================================================ */
.card {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); padding: 30px;
box-shadow: var(--shadow-card);
transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
position: relative;
/* Grow from the base: the bottom edge (and the CTA anchored to it) stays put */
transform-origin: bottom center;
}
.card:hover {
transform: scale(1.02);
box-shadow: var(--shadow-lift);
border-color: var(--border-strong);
z-index: 2;
}
.card .icon {
width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent); margin-bottom: 20px;
transition: transform .22s var(--ease);
}
.card:hover .icon { transform: scale(1.08) rotate(-4deg); }
.card .icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 19.5px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 15.5px; color: var(--fg-muted); }
/* ============================================================
MANAGER SECTION
============================================================ */
.manager-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.manager-cta { margin-top: 48px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
@media (max-width: 980px) { .manager-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .manager-grid { grid-template-columns: minmax(0, 1fr); } }
/* ============================================================
PRICING
============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); padding: 34px 30px;
display: flex; flex-direction: column;
box-shadow: var(--shadow-card);
transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
position: relative;
transform-origin: bottom center;
}
.plan:hover { transform: scale(1.02); box-shadow: var(--shadow-lift); z-index: 2; }
.plan.featured {
border: 2px solid var(--accent);
box-shadow: 0 4px 12px -2px var(--accent-glow), var(--shadow-lift);
}
.plan.featured:hover { transform: scale(1.025); }
.plan-tag {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: var(--accent-fg);
font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 5px 16px; border-radius: 999px; white-space: nowrap;
box-shadow: 0 4px 10px -2px var(--accent-glow);
}
.plan h3 { font-size: 19px; font-weight: 800; }
.plan .desc { font-size: 14.5px; color: var(--fg-subtle); margin: 4px 0 22px; }
.plan .price { font-family: var(--font-display); font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 15.5px; font-weight: 600; color: var(--fg-subtle); }
.plan .per-hour {
display: inline-block; align-self: flex-start;
font-family: var(--font-mono); font-size: 12px; color: var(--accent);
background: var(--accent-soft); border-radius: 999px; padding: 3px 12px;
margin: 8px 0 24px;
}
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 15px; color: var(--fg-muted); }
.plan li svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.pricing-note { text-align: center; margin-top: 34px; font-size: 15px; color: var(--fg-muted); }
.pricing-note a { color: var(--accent); font-weight: 700; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin: 0 auto; } }
/* Variante de 4 planes (hosting): tarjetas algo más compactas */
.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plans-4 .plan { padding: 30px 24px; }
.plans-4 .plan .price { font-size: 36px; }
.plans-4 .plan li { font-size: 14px; }
@media (max-width: 1080px) and (min-width: 901px) { .plans-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .plans-4 { grid-template-columns: minmax(0, 1fr); } }
/* Variante de 2 planes (AntiDDoS: tu servidor vs tu propia red) */
.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin: 0 auto; }
@media (max-width: 900px) { .plans-2 { grid-template-columns: minmax(0, 1fr); } }
/* ============================================================
AI / MCP SECTION
============================================================ */
.ai { overflow: hidden; }
.ai-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ai-chat {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); box-shadow: var(--shadow-lift);
padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.ai-chat-head { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ai-chat-head .avatar {
width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
box-shadow: 0 4px 10px -3px var(--accent-glow);
}
.ai-chat-head .avatar svg { width: 17px; height: 17px; }
.ai-chat-head b { font-size: 14.5px; font-family: var(--font-display); }
.ai-chat-head span { font-size: 12.5px; color: var(--fg-subtle); }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.55; }
.msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-fg); border-bottom-right-radius: 5px; }
.msg.bot { align-self: flex-start; background: var(--bg-tint); color: var(--fg); border-bottom-left-radius: 5px; }
.msg.bot code { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); background: var(--surface); border: 1px solid var(--border); padding: 1px 7px; border-radius: 6px; }
.msg.bot .action {
display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px;
border-radius: 10px; background: var(--ink); color: var(--ink-muted);
font-family: var(--font-mono); font-size: 11.5px;
}
.msg.bot .action svg { width: 13px; height: 13px; color: #4ade80; flex-shrink: 0; }
.ai-features { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.ai-feature { display: flex; gap: 16px; padding: 16px; border-radius: 16px; transition: background .18s var(--ease); }
.ai-feature:hover { background: var(--accent-softer); }
.ai-feature .icon {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.ai-feature .icon svg { width: 20px; height: 20px; }
.ai-feature b { display: block; font-family: var(--font-display); font-size: 16.5px; margin-bottom: 3px; }
.ai-feature span { font-size: 15px; color: var(--fg-muted); }
@media (max-width: 980px) { .ai-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
/* ============================================================
OTROS PRODUCTOS
============================================================ */
.others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.other-card { display: flex; flex-direction: column; }
.other-card .meta {
display: inline-block; align-self: flex-start;
font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--accent); background: var(--accent-soft);
padding: 4px 12px; border-radius: 999px; margin-bottom: 16px;
font-family: var(--font-display);
}
.other-card p { flex: 1; margin-bottom: 20px; }
/* Featured other-card (e.g. Redsys 1-click): same treatment as .svc-featured */
.other-card.featured {
border-color: var(--accent);
background: linear-gradient(180deg, var(--accent-softer), var(--surface) 46%);
box-shadow: 0 0 0 1px var(--accent), 0 4px 14px -4px var(--accent-glow), var(--shadow-card);
}
.other-card.featured:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -4px var(--accent-glow), var(--shadow-lift);
}
.other-card.featured .meta { background: var(--accent); color: var(--accent-fg); }
.others.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .others, .others.cols-2 { grid-template-columns: minmax(0, 1fr); } }
/* ============================================================
CONFIGURADOR (reseller) — sliders + resumen de precio
============================================================ */
.config-box {
display: grid; grid-template-columns: 1.15fr 0.85fr;
border: 1px solid var(--border); border-radius: 28px;
background: var(--surface); box-shadow: var(--shadow-lift);
overflow: hidden;
}
.config-main { padding: 44px 40px; min-width: 0; }
.config-main > h2, .config-main > h3 { font-size: 20px; font-weight: 800; margin-bottom: 30px; }
.range-row { margin-bottom: 36px; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.range-head label { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; }
.range-head output {
font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; white-space: nowrap;
color: var(--accent); background: var(--accent-soft);
border-radius: 999px; padding: 3px 14px;
}
input[type="range"].range {
-webkit-appearance: none; appearance: none;
display: block; width: 100%; height: 7px; border-radius: 999px;
background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--border) var(--fill, 0%));
outline-offset: 6px; cursor: pointer;
}
input[type="range"].range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 24px; height: 24px; border-radius: 50%;
background: var(--surface); border: 3.5px solid var(--accent);
box-shadow: 0 2px 6px rgba(24, 38, 52, .2);
transition: transform .15s var(--ease);
}
input[type="range"].range::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"].range::-moz-range-thumb {
width: 17px; height: 17px; border-radius: 50%;
background: var(--surface); border: 3.5px solid var(--accent);
box-shadow: 0 2px 6px rgba(24, 38, 52, .2);
}
input[type="range"].range::-moz-range-track { height: 7px; border-radius: 999px; background: var(--border); }
input[type="range"].range::-moz-range-progress { height: 7px; border-radius: 999px; background: var(--accent); }
.range-scale { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); }
.config-includes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--border); }
.config-includes li { display: flex; gap: 9px; font-size: 14px; color: var(--fg-muted); }
.config-includes svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
/* Standalone "everything included" checklist (own section, outside the configurator) */
.includes-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 28px; max-width: 1100px; margin: 0 auto; }
.includes-list li { display: flex; gap: 10px; font-size: 15px; color: var(--fg-muted); }
.includes-list svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
/* Selects y opciones plegables del configurador VPS */
.config-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 34px; }
.opt-toggle {
display: flex; align-items: center; gap: 11px; cursor: pointer;
font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
}
.opt-toggle input {
width: 19px; height: 19px; flex-shrink: 0;
accent-color: var(--accent); cursor: pointer;
}
.opt-body { margin-top: 16px; }
.opt-body .range-head { justify-content: flex-end; }
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
@media (max-width: 640px) { .config-selects { grid-template-columns: 1fr; } }
/* Resumen de precio: bloque oscuro de contraste */
.config-aside {
background: var(--ink); color: var(--ink-fg);
padding: 44px 36px; display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
.config-aside::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 420px 320px at 80% -10%, var(--accent-glow), transparent 65%);
opacity: .35;
}
.config-aside > * { position: relative; }
.config-aside .k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--font-display); }
.config-price { font-family: var(--font-display); font-size: 54px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; margin: 10px 0 2px; }
.config-price small { font-size: 17px; font-weight: 600; color: var(--ink-muted); }
.config-breakdown { list-style: none; margin: 26px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.config-breakdown li {
display: flex; justify-content: space-between; gap: 14px;
font-size: 13.5px; color: var(--ink-muted);
padding-bottom: 10px; border-bottom: 1px dashed var(--ink-border);
}
.config-breakdown li span:last-child { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-fg); white-space: nowrap; }
.config-breakdown li.free span:last-child { color: var(--accent); }
.config-aside .btn { width: 100%; }
.config-aside .per-hour {
align-self: flex-start;
font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-fg);
background: var(--ink-border); border-radius: 999px; padding: 3px 12px;
margin-top: 8px;
}
.config-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-muted); text-align: center; }
@media (max-width: 900px) {
.config-box { grid-template-columns: minmax(0, 1fr); }
.config-main { padding: 32px 24px; }
.config-aside { padding: 32px 24px; }
.config-includes { grid-template-columns: 1fr; }
}
/* ============================================================
MODAL (aviso de redirección al Manager)
============================================================ */
.modal-overlay {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center; padding: 24px;
background: rgba(16, 32, 46, .55);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-overlay[hidden] { display: none; }
.modal {
max-width: 440px; width: 100%;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-lift); padding: 36px 32px;
text-align: center;
}
.modal h3 { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.modal p { font-size: 15.5px; color: var(--fg-muted); margin-bottom: 26px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ============================================================
TABLA DE ESPECIFICACIONES (ampliaciones por cuenta)
============================================================ */
.spec-table-wrap {
overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); box-shadow: var(--shadow-card);
}
.spec-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.spec-table th {
font-family: var(--font-display); font-size: 12px; font-weight: 800;
letter-spacing: .05em; text-transform: uppercase; color: var(--fg-subtle);
text-align: left; padding: 15px 20px;
background: var(--bg-tint); border-bottom: 1px solid var(--border);
}
.spec-table td { padding: 15px 20px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--fg-muted); }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table tbody tr { transition: background .15s var(--ease); }
.spec-table tbody tr:hover { background: var(--accent-softer); }
.spec-table td:first-child { font-family: var(--font-display); font-weight: 800; color: var(--fg); }
.spec-table td.num { font-family: var(--font-mono); font-size: 13px; }
.spec-table td.price-cell { font-family: var(--font-display); font-weight: 800; color: var(--fg); white-space: nowrap; }
.spec-table .spec-badge {
display: inline-block; font-family: var(--font-display);
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--accent); background: var(--accent-soft);
padding: 3px 12px; border-radius: 999px;
}
/* ============================================================
FAQ (acordeón nativo details/summary)
============================================================ */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
border: 1px solid var(--border); border-radius: 16px;
background: var(--surface); box-shadow: var(--shadow-card);
transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 22px;
font-family: var(--font-display); font-size: 16.5px; font-weight: 700;
border-radius: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; transition: transform .2s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .faq-body { padding: 0 22px 20px; font-size: 15.5px; color: var(--fg-muted); }
.faq .faq-body a { color: var(--accent); font-weight: 600; }
/* ============================================================
CONTACTO — canales + formulario
============================================================ */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.contact-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.contact-item {
display: flex; gap: 15px; align-items: flex-start;
padding: 15px 16px; margin: 0 -16px; border-radius: 16px;
transition: background .18s var(--ease);
}
a.contact-item:hover { background: var(--accent-softer); }
.contact-item .tick {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.contact-item .tick svg { width: 20px; height: 20px; }
.contact-item b { display: block; font-family: var(--font-display); font-size: 16px; }
.contact-item span { font-size: 14.5px; color: var(--fg-muted); }
.contact-item .value { font-family: var(--font-mono); font-size: 13.5px; color: var(--accent); }
.form-card {
border: 1px solid var(--border); border-radius: 28px;
background: var(--surface); box-shadow: var(--shadow-lift);
padding: 44px 40px;
position: relative; overflow: hidden;
}
.form-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 420px 260px at 100% 0%, var(--hero-hue-a), transparent 65%);
}
.form-card > * { position: relative; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.field label small { font-weight: 500; color: var(--fg-subtle); }
.field input,
.field select,
.field textarea {
font-family: var(--font-body); font-size: 16px; color: var(--fg);
background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: 12px;
padding: 12px 16px; outline: none; width: 100%;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-subtle); }
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.field textarea { min-height: 140px; resize: vertical; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select::after {
content: ""; position: absolute; right: 16px; top: 50%; margin-top: -7px;
width: 14px; height: 14px; pointer-events: none;
background-color: var(--fg-subtle);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--fg-muted); max-width: 340px; }
.form-consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.form-consent a { color: var(--accent); font-weight: 600; }
.form-error {
border: 1px solid var(--co-bad); border-radius: var(--radius-sm);
background: var(--co-bad-soft); color: var(--co-bad);
padding: 12px 18px; margin-bottom: 20px; font-size: 14.5px; font-weight: 600;
}
.form-success { text-align: center; padding: 48px 20px; }
.form-success .badge-ok {
width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 22px;
display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.form-success .badge-ok svg { width: 30px; height: 30px; }
.form-success h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.form-success p { color: var(--fg-muted); font-size: 15px; max-width: 380px; margin: 0 auto; }
@media (max-width: 980px) {
.contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.form-card { padding: 32px 24px; }
.form-grid { grid-template-columns: 1fr; }
}
/* ---- IMAP Sync form (imapsync.php): source/destination columns ---- */
.imap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.imap-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.imap-col-head {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-size: 17px; font-weight: 800;
padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.imap-col-head svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.imap-foot { margin-top: 28px; text-align: center; }
.imap-foot .btn { width: 100%; justify-content: center; }
.imap-note { font-size: 13.5px; color: var(--fg-muted); max-width: 440px; margin: 14px auto 0; }
@media (max-width: 640px) {
.imap-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================================
OPINIONES DE CLIENTES
============================================================ */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.review {
display: flex; flex-direction: column;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); padding: 32px 30px;
box-shadow: var(--shadow-card);
position: relative; overflow: hidden;
transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
transform-origin: bottom center;
}
.review:hover { transform: scale(1.015); box-shadow: var(--shadow-lift); border-color: var(--border-strong); z-index: 2; }
.review .quote-mark {
position: absolute; top: 18px; right: 22px;
width: 44px; height: 44px; color: var(--accent); opacity: .12;
pointer-events: none;
}
.review-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.review-rating .stars { display: flex; gap: 2px; color: var(--accent); }
.review-rating .stars svg { width: 16px; height: 16px; }
.review-rating .score {
font-family: var(--font-mono); font-size: 12px; font-weight: 500;
color: var(--accent); background: var(--accent-soft);
border-radius: 999px; padding: 2px 10px;
}
.review-summary {
display: inline-flex; align-items: baseline; gap: 7px; width: fit-content;
margin-top: 14px; padding: 7px 12px; border: 1px solid var(--border);
border-radius: 999px; color: var(--fg-muted); background: var(--surface);
font-size: 13px;
}
.review-summary strong { color: var(--accent); font-family: var(--font-display); font-size: 15px; }
.review h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; padding-right: 40px; }
.review > p { font-size: 15px; color: var(--fg-muted); flex: 1; }
.review-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.review-foot .avatar {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff; font-family: var(--font-display); font-size: 13.5px; font-weight: 800;
letter-spacing: .02em;
box-shadow: 0 4px 10px -3px var(--accent-glow);
}
.review-foot b { display: block; font-family: var(--font-display); font-size: 14.5px; line-height: 1.3; }
.review-foot span { font-size: 12.5px; color: var(--fg-subtle); }
.review-foot .verified {
margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 600; color: var(--fg-subtle); white-space: nowrap;
}
.review-foot .verified svg { width: 14px; height: 14px; color: var(--accent); }
@media (max-width: 860px) { .reviews { grid-template-columns: minmax(0, 1fr); } }
/* ============================================================
NET SHOWCASE — caja oscura de red/datacenter (vps.html)
============================================================ */
.net-box {
display: grid; grid-template-columns: 1.18fr 0.82fr;
background: var(--ink); color: var(--ink-fg);
border-radius: 28px; overflow: hidden;
box-shadow: var(--shadow-lift);
position: relative;
}
.net-box::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 560px 380px at 0% 115%, var(--accent-glow), transparent 62%),
radial-gradient(ellipse 480px 300px at 88% -10%, var(--hero-hue-b), transparent 62%);
opacity: .4;
}
.net-main { padding: 52px 48px; position: relative; min-width: 0; }
.net-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.net-chip {
font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em;
color: var(--ink-fg); background: var(--ink-border);
border: 1px solid var(--ink-border); border-radius: 999px; padding: 5px 14px;
white-space: nowrap;
}
.net-chip.accent { color: var(--accent-fg); background: var(--accent); border-color: transparent; }
.net-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 26px; }
.net-stat .n {
font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px);
font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1;
white-space: nowrap;
}
.net-stat .n em { font-style: normal; color: var(--accent); }
.net-stat .l { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; }
.net-peering {
border-top: 1px dashed var(--ink-border);
margin-top: 34px; padding-top: 26px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.net-peering .k {
font-family: var(--font-display); font-size: 12px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
margin-right: 4px;
}
.net-actions { margin-top: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.net-note { font-size: 13px; color: var(--ink-muted); max-width: 280px; line-height: 1.55; }
/* Photo tiles: real datacenter shots (gradient background remains as loading fallback) */
.net-photos { display: grid; grid-template-rows: 1fr 1fr; position: relative; border-left: 1px solid var(--ink-border); }
.net-photo {
position: relative; margin: 0; min-height: 200px; overflow: hidden;
display: flex; align-items: flex-end; padding: 18px;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 28px),
radial-gradient(ellipse 320px 220px at 72% 18%, var(--accent-glow), transparent 68%),
linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .28));
}
.net-photo + .net-photo { border-top: 1px solid var(--ink-border); }
.net-photo > svg {
position: absolute; top: 50%; left: 50%; width: 74px; height: 74px;
transform: translate(-50%, -60%);
color: var(--ink-fg); opacity: .16;
}
.net-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.net-photo figcaption {
position: relative; display: inline-flex; align-self: flex-start;
font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-fg);
background: color-mix(in srgb, var(--ink) 72%, transparent); border: 1px solid var(--ink-border);
border-radius: 999px; padding: 4px 12px;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 980px) {
.net-box { grid-template-columns: minmax(0, 1fr); }
.net-photos { grid-template-rows: none; grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1px solid var(--ink-border); }
.net-photo { min-height: 160px; }
.net-photo + .net-photo { border-top: 0; border-left: 1px solid var(--ink-border); }
}
@media (max-width: 640px) {
.net-main { padding: 32px 24px; }
.net-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
.net-photos { grid-template-columns: 1fr; }
.net-photo + .net-photo { border-left: 0; border-top: 1px solid var(--ink-border); }
}
/* Tech cards under the net box (Spine & Leaf, ECMP, anycast, NOC room) */
.net-tech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.net-tech-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-card);
padding: 26px 24px;
}
.net-tech-card .k {
display: block; font-family: var(--font-mono); font-size: 12px;
letter-spacing: .02em; color: var(--accent); margin-bottom: 12px;
}
.net-tech-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.net-tech-card p { font-size: 14.5px; color: var(--fg-muted); line-height: 1.6; }
@media (max-width: 1080px) { .net-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .net-tech { grid-template-columns: 1fr; } }
/* ============================================================
TRUST / MIGRACIÓN
============================================================ */
.trust-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
border-radius: 28px;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-lift);
padding: 60px;
position: relative; overflow: hidden;
}
.trust-inner::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 480px 380px at 0% 0%, var(--hero-hue-a), transparent 60%);
}
.trust-inner h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; margin: 16px 0; }
.trust-inner > div > p { color: var(--fg-muted); margin-bottom: 30px; }
.trust-list { display: flex; flex-direction: column; gap: 18px; position: relative; }
.trust-item { display: flex; gap: 15px; align-items: flex-start; }
.trust-item .tick {
width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.trust-item .tick svg { width: 19px; height: 19px; }
.trust-item b { display: block; font-family: var(--font-display); font-size: 16.5px; }
.trust-item span { font-size: 15px; color: var(--fg-muted); }
.trust-item span a { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .trust-inner { grid-template-columns: minmax(0, 1fr); padding: 40px 28px; gap: 36px; } }
/* ============================================================
OS SHOWCASE — VPS Linux / VPS Windows RDP (vps.html)
============================================================ */
.os-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.os-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-card);
padding: 38px 36px; display: flex; flex-direction: column; gap: 20px;
position: relative; overflow: hidden;
}
.os-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 420px 280px at 100% 0%, var(--accent-softer), transparent 65%);
}
.os-card > * { position: relative; }
.os-head { display: flex; gap: 16px; align-items: center; }
.os-ico {
width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent);
}
.os-ico svg { width: 26px; height: 26px; }
.os-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 800; line-height: 1.25; }
.os-sub { display: block; font-size: 14px; color: var(--fg-muted); margin-top: 3px; }
.os-card > p { color: var(--fg-muted); font-size: 15.5px; }
.os-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.os-chip {
font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-muted);
background: var(--bg-tint); border: 1px solid var(--border);
border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.os-list { list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--fg-muted); }
.os-list li { display: flex; gap: 10px; align-items: flex-start; }
.os-list svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.os-card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) {
.os-grid { grid-template-columns: minmax(0, 1fr); }
.os-card { padding: 30px 24px; }
}
/* ============================================================
BACKUP FLOW — diagrama Madrid → copia → Francia (vps.html)
============================================================ */
.backup-inner .trust-list { margin-top: 34px; }
.backup-flow { display: flex; flex-direction: column; position: relative; }
.bf-node {
display: flex; align-items: center; gap: 15px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 16px; padding: 18px 22px;
box-shadow: var(--shadow-card);
position: relative; z-index: 1;
}
.bf-node.accent { border-color: var(--accent); background: var(--accent-softer); }
.bf-ico {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent);
}
.bf-ico svg { width: 22px; height: 22px; }
.bf-node b { display: block; font-family: var(--font-display); font-size: 16px; }
.bf-node .sub { font-size: 13px; color: var(--fg-muted); }
.bf-link {
min-height: 56px; display: flex; align-items: center;
padding-left: 66px; position: relative;
}
.bf-link::before {
content: ""; position: absolute; left: 43px; top: -8px; bottom: -8px;
border-left: 2px dashed var(--accent); opacity: .45;
}
.bf-label {
font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em;
color: var(--fg-muted); background: var(--surface);
border: 1px solid var(--border); border-radius: 999px; padding: 4px 13px;
position: relative;
}
/* ============================================================
CTA FINAL — bloque oscuro de contraste
============================================================ */
.final { padding: 108px 0; }
.final-inner {
position: relative; overflow: hidden; text-align: center;
background: var(--ink); color: var(--ink-fg);
border-radius: 28px; padding: 84px 32px;
box-shadow: var(--shadow-lift);
}
.final-inner::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 620px 380px at 22% 110%, var(--accent-glow), transparent 62%),
radial-gradient(ellipse 520px 320px at 85% -10%, var(--hero-hue-b), transparent 62%);
opacity: .5;
}
.final-inner > * { position: relative; }
.final h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; max-width: 740px; margin: 0 auto 18px; }
.final p { color: var(--ink-muted); font-size: 18.5px; max-width: 520px; margin: 0 auto 38px; }
.final .hero-actions { justify-content: center; margin-bottom: 0; }
.final .btn-ghost { background: transparent; color: var(--ink-fg); border-color: var(--ink-border); }
.final .btn-ghost:hover { border-color: var(--ink-fg); color: var(--ink-fg); }
/* ============================================================
FOOTER
============================================================ */
footer { border-top: 1px solid var(--border); padding: 60px 0 44px; background: var(--bg-tint); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-grid h2 { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 16px; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-grid a { font-size: 15px; color: var(--fg-muted); font-weight: 500; transition: color .15s; }
.footer-grid a:hover { color: var(--accent); }
/* "Manage cookies" reopens the consent modal: a button dressed as a footer link */
.gn-cc-manage {
padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
font-family: var(--font-body); font-size: 15px; color: var(--fg-muted); font-weight: 500;
transition: color .15s;
}
.gn-cc-manage:hover { color: var(--accent); }
.footer-brand .logo img { height: 58px; }
.footer-brand p { font-size: 15px; color: var(--fg-muted); margin-top: 16px; max-width: 300px; }
.footer-bottom {
border-top: 1px solid var(--border-strong); padding-top: 28px;
display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
font-size: 13.5px; color: var(--fg-subtle);
}
.footer-legal { margin-top: 18px; font-size: 12.5px; color: var(--fg-subtle); line-height: 1.7; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
/* ============================================================
HOME GENERALISTA — hero compacto + catálogo de servicios
============================================================ */
.home-hero { position: relative; padding: 142px 0 64px; overflow: hidden; text-align: center; }
.home-hero .hero-bg { z-index: -1; }
.home-hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; max-width: 820px; margin: 22px auto 16px; }
.home-hero p { color: var(--fg-muted); font-size: 19px; max-width: 600px; margin: 0 auto; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; text-align: left; }
.svc-card { display: flex; flex-direction: column; padding: 26px; }
.svc-card .svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.svc-card .icon { margin-bottom: 0; }
.svc-card .badge {
font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
color: var(--accent); background: var(--accent-soft);
padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.svc-card h2 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.svc-card p { flex: 1; font-size: 14.5px; margin: 8px 0 20px; }
.svc-card .svc-price {
display: flex; align-items: baseline; gap: 6px;
font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em;
padding-top: 16px; border-top: 1px solid var(--border);
}
.svc-card .svc-price .from {
font-size: 11.5px; font-weight: 700; color: var(--fg-subtle);
text-transform: uppercase; letter-spacing: .06em;
}
.svc-card .svc-price .per { font-size: 14px; font-weight: 600; color: var(--fg-subtle); }
.svc-card .svc-note { font-size: 13px; color: var(--fg-subtle); margin: 2px 0 18px; min-height: 22px; }
.svc-card .btn { min-height: 44px; font-size: 14.5px; }
/* Featured card (Servidor VPS): accent ring + soft top tint, no layout shift */
.svc-card.svc-featured {
border-color: var(--accent);
background: linear-gradient(180deg, var(--accent-softer), var(--surface) 46%);
box-shadow: 0 0 0 1px var(--accent), 0 4px 14px -4px var(--accent-glow), var(--shadow-card);
}
.svc-card.svc-featured:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -4px var(--accent-glow), var(--shadow-lift);
}
.svc-card.svc-featured .badge { background: var(--accent); color: var(--accent-fg); }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
/* ============================================================
BUSCADOR DE DOMINIOS
============================================================ */
.domain-box {
max-width: 840px; margin: 0 auto; text-align: center;
background: var(--surface); border: 1px solid var(--border); border-radius: 28px;
box-shadow: var(--shadow-lift); padding: 52px 44px;
position: relative; overflow: hidden;
}
.domain-box::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 480px 300px at 50% -20%, var(--hero-hue-a), transparent 65%);
}
.domain-box > * { position: relative; }
.domain-box h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; margin: 16px 0 10px; }
.domain-box > p { color: var(--fg-muted); margin-bottom: 30px; }
.domain-form {
display: flex; gap: 8px; align-items: center;
background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: 999px;
padding: 7px 7px 7px 24px;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.domain-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.domain-form svg { width: 19px; height: 19px; color: var(--fg-subtle); flex-shrink: 0; }
.domain-form input {
flex: 1; min-width: 0; border: 0; background: none; outline: none;
font-family: var(--font-body); font-size: 16.5px; color: var(--fg); padding: 10px 4px;
}
.domain-form input::placeholder { color: var(--fg-subtle); }
.domain-form .btn { flex-shrink: 0; }
.domain-actions { display: flex; gap: 8px; flex-shrink: 0; }
.domain-form .btn-ghost { background: transparent; }
.tld-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.tld-chip {
display: inline-flex; align-items: baseline; gap: 7px;
background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
padding: 7px 15px; font-size: 13.5px; cursor: pointer;
transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tld-chip:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-card); }
.tld-chip b { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.tld-chip span { color: var(--fg-subtle); font-size: 12.5px; }
.domain-note { margin-top: 22px; font-size: 14px; color: var(--fg-muted); }
.domain-note b { color: var(--accent); }
@media (max-width: 640px) {
.domain-box { padding: 36px 20px; }
.domain-form { flex-direction: column; border-radius: 24px; padding: 14px; gap: 12px; }
.domain-form > svg { display: none; }
.domain-form input { width: 100%; text-align: center; }
.domain-form .btn { width: 100%; }
.domain-actions { flex-direction: column; width: 100%; gap: 10px; }
}
/* ============================================================
DOMINIOS — tarjetas de TLD más vendidos + catálogo filtrable
============================================================ */
.tld-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tld-card { padding: 24px 22px; }
.tld-card .ext {
font-family: var(--font-display); font-weight: 800; font-size: 24px;
color: var(--accent); letter-spacing: -.01em;
}
.tld-card .price {
font-family: var(--font-display); font-weight: 800; font-size: 26px;
color: var(--fg); margin: 10px 0 14px;
}
.tld-card .price small { font-size: 14px; font-weight: 600; color: var(--fg-subtle); margin-left: 2px; }
.tld-card .price small:first-child { margin-left: 0; margin-right: 6px; }
.tld-card ul { list-style: none; display: grid; gap: 7px; border-top: 1px solid var(--border); padding-top: 14px; }
.tld-card li { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--fg-subtle); }
.tld-card li b { font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) { .tld-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tld-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tld-grid { grid-template-columns: 1fr; } }
.tld-search {
display: flex; align-items: center; gap: 10px;
max-width: 560px; margin: 0 auto 26px;
background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: 999px;
padding: 9px 20px;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tld-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tld-search svg { width: 18px; height: 18px; color: var(--fg-subtle); flex-shrink: 0; }
.tld-search input {
flex: 1; min-width: 0; border: 0; background: none; outline: none;
font-family: var(--font-body); font-size: 15.5px; color: var(--fg); padding: 6px 0;
}
.tld-search input::placeholder { color: var(--fg-subtle); }
.tld-count { flex-shrink: 0; font-size: 13px; color: var(--fg-subtle); white-space: nowrap; }
.tld-count b { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.tld-table-wrap { max-height: 600px; overflow-y: auto; }
.tld-table-wrap .spec-table { min-width: 560px; }
.tld-table-wrap .spec-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-tint); }
.tld-legal { list-style: none; max-width: 860px; margin: 26px auto 0; display: grid; gap: 8px; }
.tld-legal li { font-size: 13px; color: var(--fg-subtle); line-height: 1.55; }
.tld-legal a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.tld-legal a:hover { color: var(--accent); }
/* ============================================================
VÍDEO CORPORATIVO
============================================================ */
.video-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.video-frame {
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border); box-shadow: var(--shadow-lift);
background: var(--ink); line-height: 0;
}
.video-frame video { width: 100%; height: auto; display: block; }
.video-copy .hero-points { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
@media (max-width: 900px) { .video-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
/* ============================================================
MIGAS DE PAN + CABECERA DE PÁGINA INTERIOR
============================================================ */
.page-head { padding: 102px 0 0; position: relative; }
.page-head .hero-bg { z-index: -1; }
/* Keep .container's horizontal padding (it would be lost: this rule comes
later in the sheet), otherwise the trail sits flush against the edge. */
.breadcrumbs { padding: 14px 24px 0; }
.breadcrumbs ol { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.breadcrumbs li { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--fg-subtle); }
.breadcrumbs li + li::before {
content: ""; width: 14px; height: 14px; flex-shrink: 0; opacity: .55;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.breadcrumbs a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; margin: 0 -4px; border-radius: 999px; color: var(--fg-muted); transition: color .15s, background .15s; }
.breadcrumbs a:hover { color: var(--accent); background: var(--accent-softer); }
.breadcrumbs a svg { width: 14px; height: 14px; }
.breadcrumbs [aria-current="page"] { color: var(--fg); font-weight: 600; padding: 3px 4px; }
/* The element is also the .container: keep its max-width and side padding
(this rule comes later in the sheet and would override both), so the
header aligns left with the topbar logo and the sections below. Before
0.38.4 it was capped at 780px, which sat centered inside the wider
container and left dead space on both sides. Only the intro paragraph
keeps a readable measure. */
.page-title { padding: 22px 24px 48px; max-width: var(--container-max); }
.page-title h1 { font-size: clamp(34px, 4.8vw, 56px); font-weight: 800; margin-bottom: 14px; }
.page-title p { color: var(--fg-muted); font-size: 18.5px; max-width: 780px; }
/* Legacy modifier (doc pages); same values as the base rule since 0.38.4 */
.page-title.wide { max-width: var(--container-max); padding-left: 24px; padding-right: 24px; }
/* ============================================================
DOCUMENTACIÓN (help center: doc.php + doc-articulo.php)
============================================================ */
/* ---- Índice: filtro + selector de idioma ---- */
.doc-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.doc-filter {
display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; max-width: 420px;
background: var(--surface); border: 1.5px solid var(--border-strong);
border-radius: 999px; padding: 11px 18px; box-shadow: var(--shadow-card);
transition: border-color .15s var(--ease);
}
.doc-filter:focus-within { border-color: var(--accent); }
.doc-filter svg { width: 18px; height: 18px; color: var(--fg-subtle); flex-shrink: 0; }
.doc-filter input { border: 0; outline: 0; background: none; font: inherit; color: var(--fg); width: 100%; }
.doc-filter input::placeholder { color: var(--fg-subtle); }
.doc-lang {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--fg-muted);
padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--border-strong);
background: var(--surface); transition: color .15s, border-color .15s;
}
.doc-lang:hover { color: var(--accent); border-color: var(--accent); }
.doc-lang svg { width: 15px; height: 15px; }
/* ---- Índice: tarjetas de categoría (los artículos viven en su página) ---- */
.doc-count {
font-family: var(--font-mono); font-size: 12px; color: var(--accent);
background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
.doc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.doc-cat-card {
display: flex; flex-direction: column; gap: 8px; min-width: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 28px 30px; box-shadow: var(--shadow-card);
transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.doc-cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.doc-cat-card h2 { font-size: 21px; font-weight: 800; }
.doc-cat-card:hover h2 { color: var(--accent); }
.doc-cat-card p { font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); flex: 1; }
.doc-cat-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.doc-cat-meta svg {
width: 17px; height: 17px; color: var(--accent);
opacity: 0; transform: translateX(-4px);
transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.doc-cat-card:hover .doc-cat-meta svg { opacity: 1; transform: none; }
/* ---- Página de categoría: listado numerado y alfabético ---- */
/* Numbered list (alphabetical): the CSS counter skips hidden items, so the
numbering stays 1..n while filtering. */
.doc-list {
list-style: none; counter-reset: doc;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
}
.doc-item { counter-increment: doc; }
.doc-item + .doc-item { border-top: 1px solid var(--border); }
.doc-item a {
display: flex; align-items: center; gap: 18px;
padding: 20px 26px;
transition: background .15s var(--ease);
}
.doc-item a::before {
content: counter(doc);
flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 13.5px; font-weight: 500;
color: var(--accent); background: var(--accent-soft);
}
.doc-item a:hover { background: var(--accent-softer); }
.doc-item-body { min-width: 0; flex: 1; }
.doc-item h2 { font-size: 17px; font-weight: 700; }
.doc-item a:hover h2 { color: var(--accent); }
.doc-item p { font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); margin-top: 3px; }
.doc-item-arrow {
flex-shrink: 0; width: 17px; height: 17px; color: var(--accent);
opacity: 0; transform: translateX(-4px);
transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.doc-item a:hover .doc-item-arrow { opacity: 1; transform: none; }
@media (max-width: 640px) {
.doc-item a { padding: 16px 18px; gap: 13px; }
.doc-item a::before { width: 26px; height: 26px; font-size: 12px; }
.doc-item-arrow { display: none; }
}
.doc-empty { color: var(--fg-muted); text-align: center; padding: 40px 0; }
/* ---- Artículo: layout de dos columnas ---- */
.doc-article-section { padding-top: 8px; }
/* Sized for the 1400px container (0.38.1): wider prose (900px) + wider TOC
(340px, fewer wrapped entries) so no dead gap opens between the columns. */
.doc-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.doc-article-title p.doc-article-meta { font-family: var(--font-mono); font-size: 13.5px; color: var(--fg-subtle); }
.doc-article-meta a { color: var(--accent); font-weight: 600; }
.doc-article-meta a:hover { text-decoration: underline; }
.doc-aside {
position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px;
/* Long TOCs (e.g. legal docs) must scroll inside the sticky column instead
of being cut off; the negative margin + padding keeps card shadows visible. */
max-height: calc(100vh - 96px - 24px); overflow-y: auto;
padding: 8px; margin: -8px; scrollbar-width: thin;
}
.doc-aside-box {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 24px 26px; box-shadow: var(--shadow-card);
display: flex; flex-direction: column; gap: 12px;
}
.doc-aside-box h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); }
.doc-aside-box ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.doc-aside-box li a {
display: block; padding: 7px 10px; margin: 0 -10px; border-radius: var(--radius-sm);
font-size: 14.5px; font-weight: 500; color: var(--fg-muted);
transition: color .15s, background .15s;
}
.doc-aside-box li a:hover { color: var(--accent); background: var(--accent-softer); }
.doc-aside-box .btn-link { margin-top: 4px; }
/* TOC del artículo: los H2 numerados ("ve al punto 5 de la guía") */
.doc-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.doc-toc li { counter-increment: toc; }
.doc-toc li a {
display: flex; align-items: baseline; gap: 10px;
padding: 6px 10px; margin: 0 -10px; border-radius: var(--radius-sm);
font-size: 14px; font-weight: 500; color: var(--fg-muted);
transition: color .15s, background .15s;
}
.doc-toc li a::before {
content: counter(toc);
flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; align-self: center;
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
color: var(--accent); background: var(--accent-soft);
}
.doc-toc li a:hover { color: var(--accent); background: var(--accent-softer); }
@media (max-width: 1000px) {
.doc-article-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.doc-aside { position: static; max-height: none; overflow: visible; }
}
/* ---- Prosa del artículo (Markdown renderizado) ---- */
.doc-prose { max-width: 900px; min-width: 0; font-size: 17px; }
.doc-prose > :first-child { margin-top: 0; }
.doc-prose h2 { font-size: clamp(23px, 2.6vw, 29px); font-weight: 800; margin: 44px 0 14px; }
.doc-prose h3 { font-size: 20px; font-weight: 700; margin: 32px 0 10px; }
.doc-prose h4 { font-size: 17.5px; font-weight: 700; margin: 26px 0 8px; }
/* Anchored jumps (TOC): keep the heading clear of the fixed topbar */
.doc-prose h2, .doc-prose h3, .doc-prose h4 { scroll-margin-top: 96px; }
.doc-prose p { margin: 0 0 16px; }
.doc-prose ul, .doc-prose ol { margin: 0 0 16px; padding-left: 26px; }
.doc-prose li { margin-bottom: 8px; }
.doc-prose li > ul, .doc-prose li > ol { margin: 8px 0 0; }
.doc-prose a { color: var(--accent); font-weight: 600; }
.doc-prose a:hover { text-decoration: underline; }
.doc-prose strong { font-weight: 700; }
.doc-prose hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
.doc-prose blockquote {
border-left: 3px solid var(--accent); background: var(--accent-softer);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 14px 20px; margin: 0 0 16px; color: var(--fg-muted);
}
.doc-prose blockquote > :last-child { margin-bottom: 0; }
.doc-prose code {
font-family: var(--font-mono); font-size: .86em;
background: var(--bg-tint); border: 1px solid var(--border);
border-radius: 6px; padding: 1.5px 7px;
/* long tokens (URLs, paths) must wrap on 375px: no horizontal overflow */
white-space: pre-wrap; overflow-wrap: break-word;
}
.doc-prose .doc-code {
background: var(--ink); color: var(--ink-fg); border-radius: var(--radius-sm);
padding: 20px 24px; margin: 0 0 18px; overflow-x: auto;
font-family: var(--font-mono); font-size: 13.8px; line-height: 1.65;
}
.doc-prose .doc-code code { background: none; border: 0; padding: 0; white-space: pre; font-size: inherit; }
.doc-prose .doc-img {
max-width: 100%; height: auto; border-radius: var(--radius-sm);
border: 1px solid var(--border); box-shadow: var(--shadow-card); margin: 6px 0 18px;
}
.doc-table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.doc-table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--surface); }
.doc-table-wrap th, .doc-table-wrap td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.doc-table-wrap th { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; background: var(--bg-tint); }
.doc-table-wrap tr:last-child td { border-bottom: 0; }
.doc-video { position: relative; aspect-ratio: 16 / 9; margin: 6px 0 18px; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-card); }
.doc-video iframe, .doc-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---- Callouts (:::info/tip/success/warning/danger) ---- */
.doc-callout {
display: flex; gap: 14px; align-items: flex-start;
border: 1px solid; border-radius: var(--radius-sm);
padding: 16px 20px; margin: 0 0 18px;
--co: var(--accent); --co-bg: var(--accent-softer);
border-color: color-mix(in srgb, var(--co) 32%, transparent);
background: var(--co-bg);
}
.doc-callout.tip, .doc-callout.success { --co: var(--co-good); --co-bg: var(--co-good-soft); }
.doc-callout.warning { --co: var(--co-warn); --co-bg: var(--co-warn-soft); }
.doc-callout.danger { --co: var(--co-bad); --co-bg: var(--co-bad-soft); }
.doc-callout-icon { flex-shrink: 0; color: var(--co); margin-top: 2px; }
.doc-callout-icon svg { width: 20px; height: 20px; }
.doc-callout-body { min-width: 0; font-size: 15.5px; }
.doc-callout-body > :last-child { margin-bottom: 0; }
.doc-callout-body p { margin-bottom: 10px; }
/* ============================================================
ESTADO DE LA RED (estado-red.php — datos de Uptime Kuma)
============================================================ */
/* ---- Estado global ---- */
.st-overall {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--radius); padding: 26px 30px; box-shadow: var(--shadow-card);
--st: var(--co-good); --st-led: var(--ok);
}
.st-overall.degraded { --st: var(--co-warn); --st-led: var(--warn); }
.st-overall.maintenance { --st: var(--accent-2); --st-led: var(--accent-2); }
.st-overall.down { --st: var(--co-bad); --st-led: var(--bad); }
.st-beacon {
flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
background: var(--st-led);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-led) 18%, transparent);
animation: st-pulse 2.4s ease-in-out infinite;
}
@keyframes st-pulse {
0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--st-led) 22%, transparent); }
50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--st-led) 10%, transparent); }
}
.st-overall-text { flex: 1; min-width: 220px; }
.st-overall-text h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; color: var(--st); }
.st-overall-text p { color: var(--fg-muted); font-size: 15.5px; margin-top: 2px; }
.st-overall-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.st-count {
font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--st);
background: color-mix(in srgb, var(--st) 9%, transparent);
padding: 5px 14px; border-radius: 999px;
}
.st-updated { font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); }
/* ---- Franja resumen en el footer (includes/footer.php) ---- */
.footer-status {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 999px; padding: 13px 24px; margin-bottom: 44px;
box-shadow: var(--shadow-card);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
--st: var(--co-good); --st-led: var(--ok);
}
.footer-status:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.footer-status.degraded { --st: var(--co-warn); --st-led: var(--warn); }
.footer-status.maintenance { --st: var(--accent-2); --st-led: var(--accent-2); }
.footer-status.down { --st: var(--co-bad); --st-led: var(--bad); }
.footer-status .st-beacon { width: 12px; height: 12px; }
.footer-status b { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--st); }
.fs-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-subtle); }
.fs-link {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--accent);
}
.fs-link svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
.footer-status { border-radius: var(--radius-sm); }
.fs-link { margin-left: 0; }
}
/* ---- Incidencia publicada en Kuma ---- */
.st-incident {
margin-top: 18px; border: 1px solid color-mix(in srgb, var(--co-bad) 32%, transparent);
background: var(--co-bad-soft); border-radius: var(--radius-sm); padding: 18px 22px;
}
.st-incident h3 { font-size: 17px; color: var(--co-bad); }
.st-incident p { font-size: 15px; color: var(--fg-muted); margin-top: 4px; }
/* ---- Grupos y filas de monitores ---- */
.st-group { margin-top: 42px; }
.st-group h3 { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.st-card {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
}
.st-row {
display: grid; grid-template-columns: 18px minmax(140px, 1fr) auto 74px;
align-items: center; gap: 14px; padding: 12px 22px;
border-bottom: 1px solid var(--border);
}
.st-row:last-child { border-bottom: 0; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); justify-self: center; }
.st-dot.down { background: var(--bad); }
.st-dot.pending { background: var(--warn); }
.st-dot.maint { background: var(--accent-2); }
.st-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.st-beats { display: flex; gap: 3px; justify-content: flex-end; }
.st-beats i {
width: 6px; height: 22px; border-radius: 3px; background: var(--ok);
transition: transform .15s var(--ease);
}
.st-beats i:hover { transform: scaleY(1.25); }
.st-beats i.down { background: var(--bad); }
.st-beats i.pending { background: var(--warn); }
.st-beats i.maint { background: var(--accent-2); }
.st-uptime { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--co-good); text-align: right; }
.st-uptime.down { color: var(--co-bad); }
.st-uptime.pending { color: var(--co-warn); }
.st-foot { margin-top: 28px; font-size: 14px; color: var(--fg-subtle); max-width: 640px; }
/* ---- Monitor inaccesible y sin caché ---- */
.st-unavailable {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: var(--shadow-card);
}
.st-unavailable h2 { font-size: 24px; margin-bottom: 8px; }
.st-unavailable p { color: var(--fg-muted); }
.st-unavailable a { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) {
.st-overall { padding: 22px; gap: 14px; }
.st-overall-meta { align-items: flex-start; }
/* Heartbeat bars drop to their own full row under the name */
.st-row { grid-template-columns: 18px 1fr 70px; row-gap: 8px; padding: 14px 18px; }
.st-beats { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.st-beacon { animation: none; }
}
/* ============================================================
COOKIE CONSENT MODAL — OVH-style blocking dialog (user decision
2026-07-17 evening; replaces the discreet bottom-left card): dimmed
overlay, discreet "continue without accepting" link on top, prominent
Accept all, second layer with per-category toggles.
Shown by layout.js only when the gn_consent cookie is missing.
Selectors use the gn-* prefix: generic ones (.cookie-bar, #cookieBar)
are nuked by adblock cookie-notice filter lists (uBlock/Brave/AdGuard).
============================================================ */
.gn-consent-veil {
position: fixed; inset: 0; z-index: 400;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: var(--veil);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.gn-consent-veil[hidden] { display: none; }
body.gn-consent-open { overflow: hidden; }
.gn-consent {
width: 100%; max-width: 640px; max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 22px 28px 28px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-lift);
font-size: 15px; line-height: 1.55; color: var(--fg-muted);
}
.gn-consent:focus { outline: none; }
.gn-consent-skip {
display: inline-block; padding: 10px 0; margin: 0;
background: none; border: 0; cursor: pointer;
font-family: var(--font-body); font-size: 13px; color: var(--fg-subtle);
text-decoration: underline; text-underline-offset: 2px;
transition: color .18s var(--ease);
}
.gn-consent-skip:hover { color: var(--accent); }
.gn-consent-title {
margin: 6px 0 12px;
font-family: var(--font-display); font-size: 22px; font-weight: 800;
line-height: 1.25; color: var(--fg);
}
.gn-consent-text { margin: 0; }
.gn-consent a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gn-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.gn-consent-btn {
min-height: 44px; padding: 8px 26px;
font-family: var(--font-display); font-size: 15px; font-weight: 500;
color: var(--fg); background: var(--bg); border: 1.5px solid var(--border-strong);
border-radius: 999px; cursor: pointer;
transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.gn-consent-btn:hover { border-color: var(--accent); color: var(--accent); }
.gn-consent-btn.accept { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 700; }
.gn-consent-btn.accept:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
/* Second layer: category cards with toggles */
.gn-consent-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gn-consent-cat {
padding: 14px 16px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.gn-consent-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gn-consent-cat h3 {
margin: 0;
font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--fg);
}
.gn-consent-cat p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.gn-consent-lock {
flex-shrink: 0; padding: 4px 12px;
font-size: 12px; font-weight: 600; color: var(--accent);
background: var(--accent-soft); border-radius: 999px;
}
.gn-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; padding: 10px 0; }
.gn-switch input {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: pointer;
}
.gn-switch-track {
width: 44px; height: 24px; border-radius: 999px;
background: var(--border-strong); position: relative;
transition: background .18s var(--ease);
}
.gn-switch-track::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--surface); box-shadow: var(--shadow-card);
transition: transform .18s var(--ease);
}
.gn-switch input:checked + .gn-switch-track { background: var(--accent); }
.gn-switch input:checked + .gn-switch-track::after { transform: translateX(20px); }
.gn-switch input:focus-visible + .gn-switch-track { box-shadow: 0 0 0 3px var(--accent-glow); }
@media (prefers-reduced-motion: no-preference) {
.gn-consent-veil { animation: gn-veil-in .25s var(--ease); }
.gn-consent { animation: gn-card-in .3s var(--ease); }
}
@keyframes gn-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gn-card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
.gn-consent-veil { padding: 12px; }
.gn-consent { padding: 16px 18px 20px; max-height: calc(100vh - 24px); }
.gn-consent-title { font-size: 19px; }
.gn-consent-actions { flex-direction: column-reverse; }
.gn-consent-btn { width: 100%; }
}
/* ============================================================
IMPRESIÓN / "Descargar PDF" (doc + legal)
The [data-print] button just calls window.print(); these rules make the
browser's "Save as PDF" output the bare article: no chrome, no aside,
dark text on white, full-width prose.
============================================================ */
@media print {
.topbar, .breadcrumbs, footer, .doc-aside, .no-print { display: none !important; }
body { background: #fff; color: #000; }
.page-head { padding-top: 0; }
.page-head .hero-bg { display: none; }
.doc-article-layout { display: block; }
.doc-prose { max-width: none; font-size: 12pt; }
.doc-prose a { color: inherit; text-decoration: underline; }
.doc-prose h2 { break-after: avoid; }
.doc-prose pre, .doc-prose table, .doc-callout, .doc-prose blockquote { break-inside: avoid; }
.doc-code { background: #fff; color: #000; border: 1px solid #bbb; box-shadow: none; }
.doc-video { display: none; }
}