/* Tema oscuro permanente, inspirado en la propuesta de JTA.
   France se utiliza exclusivamente para el nombre de marca. */
@font-face {
    font-family: France;
    src: url('fonts/France-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --navy: #0a2038;
    --blue: #88bce2;
    --green: #8fc66b;
    --orange: #f7931d;
    --ink: #edeae1;
    --muted: #adb8c2;
    --paper: #1c222a;
    --line: #35414c;
    --white: #151a20;
}
.brand-name {
    font-family: France, Georgia, serif;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.logo {
    text-decoration: none;
    display: block;
}
.brand-lockup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 0 11px;
}
.brand-lockup-name {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-family: France, Georgia, serif;
    font-size: 39px;
    line-height: 1.08;
    color: #b8d9f0;
    font-weight: 400;
}
.brand-lockup-name b {
    font-family: France, Georgia, serif;
    font-weight: 400;
    color: var(--green);
    font-size: 29px;
}
.brand-lockup-name i {
    width: 9px;
    height: 9px;
    display: block;
    align-self: center;
    background: var(--orange);
    border-radius: 50%;
    margin-left: 2px;
}
.brand-subtitle {
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #bac8d3;
}
.footer-wordmark {
    font-family: France, Georgia, serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
}
.footer-wordmark b {
    font-family: France, Georgia, serif;
    font-weight: 400;
}
.footer-main h3 .brand-name {
    font-size: 18px;
}
.eyebrow .brand-name {
    font-size: 1.12em;
}
.site-header {
    background: rgba(21, 26, 32, 0.98);
}
.utility {
    background: #091a2c;
}
.utility a:hover {
    color: var(--orange);
}
.nav-links .nav-contact {
    background: #243e55;
    color: #fff;
}
.nav-links .nav-contact:hover {
    background: #2d4b64;
    color: #fff;
}
.nav-links .nav-contact[aria-current='page'] {
    color: #fff;
}
.button {
    background: #24435e;
    border-color: #42627c;
    color: #fff;
}
.button:hover {
    background: #315c7d;
}
.button.orange {
    background: var(--orange);
    border-color: var(--orange);
    color: #111f2d;
}
.button.orange:hover {
    background: #ffa932;
}
.button.outline {
    color: var(--ink);
    border-color: #667684;
    background: transparent;
}
.button.outline:hover {
    background: #26313c;
}
.button.light {
    color: #fff;
    border-color: #8b9da9;
    background: transparent;
}
.button.light:hover {
    background: #1e3c56;
}
.hero-image {
    background: #0a2038;
}
.quote {
    color: var(--ink);
}
.cta-band {
    background: #1b2b38;
}
.plan.featured {
    background: #203342;
}
.comparison thead {
    background: #233a4e;
}
.savings-box,
.contact-form {
    background: #181f27;
}
.savings-result strong,
.story-big {
    color: var(--blue);
}
.billing button {
    background: #151a20;
    color: var(--ink);
    border-color: #526473;
}
.billing button[aria-pressed='true'] {
    background: #315674;
    border-color: #6b8aa2;
    color: #fff;
}
input:not([type='range']),
select,
textarea {
    background: #111820;
    color: var(--ink);
    border-color: #526473;
}
input::placeholder,
textarea::placeholder {
    color: #8f9eab;
}
input[type='range'] {
    accent-color: var(--blue);
}
.brand-control {
    font-family: France, Georgia, serif;
}
#servicio option[value='backup'],
#servicio option[value='oncall'],
#servicio option[value='pack5'],
#servicio option[value='upgraded'] {
    font-family: France, Georgia, serif;
}
.mini-stats strong {
    color: var(--blue);
}
.footer-wordmark b {
    color: #9bce78;
}
.cloud-feature .fine-print {
    color: #b3c8d8;
}
.nojs {
    background: #3c2b18;
    color: var(--ink);
}
.skip {
    background: #1c222a;
    color: var(--ink);
}
@media (max-width: 1150px) {
    .brand-lockup-name {
        font-size: 34px;
    }
    .brand-lockup-name b {
        font-size: 25px;
    }
    .brand-subtitle {
        font-size: 8px;
    }
}
@media (max-width: 900px) {
    .nav-links {
        background: #151a20;
        box-shadow: 0 12px 20px #0004;
    }
    .menu-button {
        background: #1c222a;
        color: var(--ink);
        border-color: #526473;
    }
    .brand-lockup-name {
        font-size: 31px;
    }
    .brand-lockup-name b {
        font-size: 23px;
    }
    .brand-lockup {
        gap: 7px;
    }
}