/* ============================================================
   2050 DEST — hoja de estilos del sitio
   Sin frameworks: CSS propio, ~1 archivo, sin build.
   Los colores salen del logo de la marca:
     celeste  #009CED
     marino   #033767
   ============================================================ */

/* ---------- Tipografías (servidas desde este mismo dominio) ---------- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Variables ---------- */
:root {
    /* Marca */
    --brand:        #009CED;   /* celeste del logo */
    --brand-deep:   #033767;   /* azul marino del logo */
    --brand-ink:    #04121f;   /* texto sobre celeste */

    /* Superficies */
    --bg:           #060d18;
    --surface:      #0d1728;
    --surface-2:    #132238;
    --line:         rgba(147, 166, 192, 0.15);
    --line-strong:  rgba(147, 166, 192, 0.32);

    /* Texto */
    --text:         #e8eef7;
    --muted:        #93a6c0;

    /* Estados */
    --ok:           #34d399;
    --warn:         #f5a524;
    --crit:         #f2545b;

    /* Ritmo */
    --radius:       10px;
    --radius-sm:    7px;
    --shell:        1180px;
}

/* ---------- Reset acotado ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background:
        radial-gradient(62% 44% at 82% -8%, rgba(3, 55, 103, 0.55), transparent 68%),
        radial-gradient(55% 40% at 8% -4%, rgba(0, 156, 237, 0.13), transparent 70%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
    font-weight: 800;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }
h4 { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }

p  { margin: 0 0 1.15em; }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
strong { font-weight: 700; color: var(--text); }

::selection { background: var(--brand); color: var(--brand-ink); }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Salto al contenido, para teclado y lectores de pantalla */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--brand);
    color: var(--brand-ink);
    padding: 12px 20px;
    font-weight: 700;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* ---------- Estructura ---------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
}
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tint {
    background: rgba(255, 255, 255, 0.017);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.section--glow {
    background: radial-gradient(58% 130% at 50% 0%, rgba(0, 156, 237, 0.11), transparent 68%);
}

.stack > * + * { margin-top: 16px; }
.measure { max-width: 62ch; }
.center { text-align: center; }
.center .measure { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 24px; }
/* Sin esto, un hijo con un ancho mínimo grande (por ejemplo el widget de
   reCAPTCHA, que mide 304 px fijos) estira la columna entera y desborda la
   página en pantallas angostas. */
.grid > * { min-width: 0; }
@media (min-width: 900px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--split { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
@media (min-width: 620px) and (max-width: 899px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Encabezado de sección ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 7px 16px;
    margin-bottom: 22px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
}
.eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    background: var(--brand);
    box-shadow: 0 0 9px rgba(0, 156, 237, 0.85);
}
.lead {
    font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.16rem);
    color: var(--muted);
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary {
    background: var(--brand);
    color: var(--brand-ink);
    box-shadow: 0 10px 26px rgba(0, 156, 237, 0.26);
}
.btn--primary:hover { filter: brightness(1.1); }
.btn--ghost {
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
    border-color: var(--line-strong);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--brand); }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--brand);
}
.arrow-link svg { transition: transform 0.2s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .btn:hover, .arrow-link:hover svg { transform: none; }
}

/* ---------- Barra de navegación ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(6, 13, 24, 0.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.brand em { font-style: normal; color: var(--brand); }
.brand small {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--muted);
    margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.94rem;
    font-weight: 500;
    transition: color 0.2s ease, background 0.2s ease;
}
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
/* El :not(.btn) importa: sin él, el botón de la página activa queda con el
   texto del mismo color que su fondo, o sea invisible. */
.nav__links a[aria-current="page"]:not(.btn) { color: var(--brand); }
/* El botón del menú no toma el gris de .nav__links a: va con su propio
   contraste, esté o no en la página actual. */
.nav__links .btn--primary,
.nav__links .btn--primary:hover {
    margin-left: 8px;
    padding: 10px 20px;
    color: var(--brand-ink);
    background: var(--brand);
}

.nav__toggle {
    display: none;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 9px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .nav__toggle { display: inline-flex; }
    .nav__links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px 24px 20px;
        background: rgba(6, 13, 24, 0.98);
        border-bottom: 1px solid var(--line);
    }
    .nav__links.is-open { display: flex; }
    .nav__links a { padding: 13px 12px; font-size: 1rem; }
    .nav__links .btn { margin: 8px 0 0; }
}

/* Submenú de servicios (se abre por hover en escritorio, por clic en móvil) */
.has-sub { position: relative; }
.has-sub > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
.has-sub > button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.has-sub > button svg { transition: transform 0.2s ease; }
.has-sub[data-open="true"] > button svg { transform: rotate(180deg); }
.subnav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 268px;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}
.has-sub[data-open="true"] .subnav { display: block; }
.subnav a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
}
.subnav a span {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 400;
    margin-top: 1px;
}

/* Con catorce servicios el submenú va en cuatro columnas, una por grupo.
   Se ancla al ancho de la barra y no al botón: si se anclara al botón,
   la última columna se saldría de la pantalla. */
@media (min-width: 901px) {
    .nav__inner { position: relative; }
    .has-sub { position: static; }
    .subnav--wide { left: 0; right: 0; min-width: 0; }
}
.subnav--wide { display: none; }
.has-sub[data-open="true"] .subnav--wide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 10px;
    align-items: start;
    padding: 18px 14px;
}
.subnav__group {
    margin: 4px 0 8px;
    padding: 0 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 900px) {
    /* En pantallas chicas el submenú sigue colapsado hasta que se toca
       "Servicios": si no, hay que pasar diez enlaces para llegar al resto. */
    .subnav {
        position: static;
        min-width: 0;
        box-shadow: none;
        margin: 4px 0 8px;
    }
    .subnav--wide { display: none; }
    .has-sub[data-open="true"] .subnav--wide { display: block; }
    .has-sub > button { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1rem; }
    .subnav__col + .subnav__col .subnav__group { padding-top: 14px; }
}

/* --- Selector de idioma --- */
.langswitch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.langswitch a {
    padding: 5px 10px !important;
    border-radius: 4px;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.langswitch a:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.langswitch a[aria-current="true"] { background: var(--brand); color: var(--brand-ink); }
@media (max-width: 900px) {
    .langswitch { align-self: flex-start; margin: 10px 0 4px; }
}

/* ---------- Portada ---------- */
.hero { padding: clamp(56px, 8vw, 110px) 0 clamp(44px, 6vw, 76px); }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 32px; }
.brand-accent { color: var(--brand); }

/* ---------- Portada con fondo de datacenter ----------
   La imagen es un render propio (tools/datacenter.html), no una foto de
   stock. El pasillo va al centro, que es justo donde cae el titular, así
   que hacen falta dos capas encima para que el texto se lea: una que
   oscurece la escena entera y otra que pone un halo de luz detrás del
   texto. Sin ellas el blanco sobre el fondo claro del pasillo no llega
   al contraste mínimo. */
.hero--datacenter {
    position: relative;
    isolation: isolate;
    padding: clamp(72px, 10vw, 150px) 0 clamp(64px, 8vw, 120px);
    background-image: url('/assets/img/hero-datacenter.jpg');
    background-size: cover;
    background-position: 50% 52%;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--line);
}

/* Capa 1: oscurece la escena y la funde con el resto de la página */
.hero--datacenter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(68% 64% at 50% 48%, rgba(6, 13, 24, 0.06) 0%, rgba(6, 13, 24, 0.34) 60%, rgba(6, 13, 24, 0.76) 100%),
        linear-gradient(180deg, rgba(6, 13, 24, 0.48) 0%, rgba(6, 13, 24, 0.02) 28%, rgba(6, 13, 24, 0.26) 68%, var(--bg) 100%);
}

/* Capa 2: el halo de luz detrás del texto */
.hero--datacenter::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: -1;
    width: min(1120px, 96%);
    height: 430px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(3, 8, 16, 0.70) 0%,
        rgba(3, 8, 16, 0.50) 44%,
        rgba(3, 8, 16, 0.20) 68%,
        transparent 84%);
    filter: blur(26px);
}

/* Sobre la imagen el texto necesita algo más de peso para despegarse */
.hero--datacenter h1 {
    text-shadow: 0 2px 26px rgba(2, 7, 14, 0.85), 0 1px 3px rgba(2, 7, 14, 0.6);
}
.hero--datacenter .lead {
    color: #c2d3e8;
    text-shadow: 0 1px 14px rgba(2, 7, 14, 0.9);
}
.hero--datacenter .eyebrow {
    background: rgba(9, 18, 32, 0.78);
    backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
    /* En móvil se sirve una versión chica: son 32 KB en vez de 104 KB, y a
       ese ancho no se nota la diferencia. */
    .hero--datacenter {
        background-image: url('/assets/img/hero-datacenter-sm.jpg');
        background-position: 50% 46%;
    }
    .hero--datacenter::after { height: 380px; }
}

/* ---------- Fondo de interfaz ----------
   Paneles de la propia interfaz flotando detrás de la sección, cortados
   por los bordes y desvanecidos. La idea está tomada de cómo lo resuelve
   Linear: mostrar el producto en vez de decorar con formas abstractas.

   Todo es decoración: aria-hidden, sin eventos, y se apaga bastante en
   pantallas chicas donde no hay lugar. */
.seccion--fui {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.fui {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Doble máscara: la radial libera el centro, donde va el texto, y la
       lineal apaga los bordes de la pantalla para que los paneles se
       pierdan en vez de cortarse de golpe. */
    -webkit-mask-image:
        radial-gradient(72% 86% at 50% 50%, transparent 22%, #000 58%, #000 100%),
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image:
        radial-gradient(72% 86% at 50% 50%, transparent 22%, #000 58%, #000 100%),
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    filter: blur(0.4px);
}

.fui__panel {
    position: absolute;
    width: 320px;
    padding: 14px 16px;
    background: rgba(13, 23, 40, 0.72);
    border: 1px solid rgba(147, 166, 192, 0.16);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    opacity: 0.30;
}
/* Los paneles se anclan al BORDE DEL CONTENIDO, no al de la pantalla.
   El contenido vive en un .shell de 1180 px centrado, así que su borde
   izquierdo está en calc(50% - 590px). Anclando los paneles ahí, asoman
   más o menos según el ancho disponible pero nunca se meten debajo del
   texto. Con posiciones fijas en píxeles (left: -90px) esto fallaba
   entre 1280 y 1600, que es justo el rango más común de notebook. */
.fui__panel--a { top: 4%;  right: calc(50% + 600px); }
.fui__panel--b { top: 46%; right: calc(50% + 640px); width: 300px; opacity: 0.20; }
.fui__panel--c { top: 8%;  left:  calc(50% + 600px); }
.fui__panel--d { top: 52%; left:  calc(50% + 636px); width: 340px; opacity: 0.22; }

.fui__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.fui__head b {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--text);
}
.fui__tag {
    font-size: 0.63rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    white-space: nowrap;
}

.fui__fila {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-top: 1px solid rgba(147, 166, 192, 0.08);
}
.fui__txt { flex: 1; min-width: 0; }
.fui__txt b {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fui__txt small {
    display: block;
    font-size: 0.66rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fui__fila time { font-size: 0.63rem; color: var(--muted); white-space: nowrap; }

.fui__dot {
    width: 7px;
    height: 7px;
    flex: none;
    transform: rotate(45deg);
    animation: fui-latido 3.6s ease-in-out infinite;
}
.fui__dot--ok   { background: var(--ok);    box-shadow: 0 0 7px rgba(52, 211, 153, .6); animation-delay: .4s; }
.fui__dot--warn { background: var(--warn);  box-shadow: 0 0 7px rgba(245, 165, 36, .6); animation-delay: 1.2s; }
.fui__dot--crit { background: var(--crit);  box-shadow: 0 0 8px rgba(242, 84, 91, .7);  animation-delay: 0s; }

@keyframes fui-latido {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Barra de progreso de las tarjetas que la llevan */
.fui__barra {
    height: 3px;
    margin-top: 12px;
    border-radius: 3px;
    background: rgba(147, 166, 192, 0.14);
    overflow: hidden;
}
.fui__barra i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: var(--brand);
    transform-origin: left center;
    animation: fui-cargar 6s ease-in-out infinite;
}
@keyframes fui-cargar {
    0%        { transform: scaleX(0.04); opacity: .5; }
    55%       { transform: scaleX(0.72); opacity: 1; }
    78%       { transform: scaleX(0.72); opacity: 1; }
    92%, 100% { transform: scaleX(0.04); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
    .fui__dot { animation: none; opacity: .85; }
    .fui__barra i { animation: none; transform: scaleX(.62); }
}

@media (max-width: 1400px) {
    /* Debajo de este ancho lo que asoma es una tira tan angosta que se lee
       como suciedad en el borde en vez de como un panel. */
    .fui__panel--b, .fui__panel--d { display: none; }
    .fui__panel { opacity: 0.20; }
}
@media (max-width: 1180px) {
    /* Desde acá el contenido ocupa todo el ancho: no queda margen donde
       poner nada sin pisar el texto. */
    .fui { display: none; }
}

/* ---------- Tarjetas ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}
.card--raised { background: var(--surface-2); }
.card--link { display: flex; flex-direction: column; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease; }
.card--link:hover { border-color: var(--brand); transform: translateY(-3px); text-decoration: none; }
.card--link .arrow-link { margin-top: auto; padding-top: 18px; }
.card p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    background: rgba(0, 156, 237, 0.12);
    color: var(--brand);
}
.card__icon svg { width: 21px; height: 21px; }
.card__num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 800; }

/* ---------- Grupo de servicios ---------- */
.group + .group { margin-top: clamp(44px, 6vw, 68px); }
.group__head { margin-bottom: 24px; }
.group__head h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
    margin-bottom: 6px;
}
.group__head h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}
.group__head p { color: var(--muted); margin: 0; font-size: 0.96rem; max-width: 64ch; }

/* ---------- Listas con tilde ---------- */
.ticks { list-style: none; margin: 0 0 26px; padding: 0; }
.ticks li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 6px 0;
    font-size: 0.97rem;
}
.ticks svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px; color: var(--brand); }

/* ---------- Cifras ---------- */
.figures { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.figure__value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    margin-bottom: 7px;
}
.figure__label { font-size: 0.88rem; color: var(--muted); }

/* ---------- Panel de ejemplo (los "dashboards") ---------- */
.panel { display: flex; flex-direction: column; }
.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.panel__head h4 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
.tag {
    font-size: 0.7rem;
    padding: 5px 11px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    white-space: nowrap;
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 20px; }
.stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(147, 166, 192, 0.09);
    border-radius: 8px;
    padding: 15px 8px;
    text-align: center;
}
.stat b {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}
.stat span { font-size: 0.71rem; color: var(--muted); }
.stat--accent b { color: var(--brand); }
.stat--crit b { color: var(--crit); }

.feed { display: grid; gap: 10px; }
.feed__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(147, 166, 192, 0.09);
    border-radius: 8px;
    padding: 11px 15px;
}
.feed__row > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.feed__row b { display: block; font-size: 0.86rem; }
.feed__row small { display: block; font-size: 0.75rem; color: var(--muted); }
.feed__row time { font-size: 0.73rem; color: var(--muted); white-space: nowrap; }
.dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    transform: rotate(45deg);
}
.dot--ok    { background: var(--ok);    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.dot--warn  { background: var(--warn);  box-shadow: 0 0 8px rgba(245, 165, 36, 0.6); }
.dot--crit  { background: var(--crit);  box-shadow: 0 0 8px rgba(242, 84, 91, 0.7); }
.dot--info  { background: var(--brand); box-shadow: 0 0 8px rgba(0, 156, 237, 0.7); }

/* Aviso obligatorio: estos paneles son ilustrativos, no datos de clientes */
.panel__note {
    margin: 16px 0 0;
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--muted);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.panel__note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }

/* ---------- Selector de soluciones ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 34px; }
.center .chips { justify-content: center; }
.chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.chip__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--brand);
}
.chip__icon svg { width: 16px; height: 16px; }
.chip b { display: block; font-size: 0.85rem; font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.2; }
.chip span { display: block; font-size: 0.7rem; color: var(--muted); line-height: 1.2; }
.chip[aria-selected="true"] {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 10px 26px rgba(0, 156, 237, 0.28);
}
.chip[aria-selected="true"] b { color: var(--brand-ink); }
.chip[aria-selected="true"] span { color: rgba(4, 18, 31, 0.68); }
.chip[aria-selected="true"] .chip__icon { background: rgba(4, 18, 31, 0.16); color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) { .chip:hover { transform: none; } }

/* ---------- Franja de tecnologías ----------
   Detrás de los chips va un mosaico con los logos de las marcas
   (assets/img/tec-fondo.png, generado con tools/tecnologias-fondo.html).
   Va muy tenue y se desvanece hacia los bordes: es textura, no contenido.
   Lo que hay que poder leer son los chips, que van encima. */
.tecnologias {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.tecnologias::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('/assets/img/tec-fondo.png');
    background-size: min(1500px, 118%) auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.075;
    -webkit-mask-image: radial-gradient(72% 82% at 50% 50%, #000 20%, transparent 78%);
            mask-image: radial-gradient(72% 82% at 50% 50%, #000 20%, transparent 78%);
}
@media (max-width: 700px) {
    /* En pantallas chicas el mosaico se amontona detrás de los chips y
       ensucia más de lo que aporta. */
    .tecnologias::before { opacity: 0.05; background-size: 190% auto; }
}

.techstrip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.techstrip__item {
    padding: 9px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    color: var(--text);
    white-space: nowrap;
}

/* Bloque grande de certificación, al cierre de las páginas */
.cert {
    display: grid;
    gap: 28px;
    align-items: start;
    margin-top: clamp(40px, 6vw, 64px);
    padding: clamp(28px, 4vw, 40px);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
@media (min-width: 780px) { .cert { grid-template-columns: 190px 1fr; gap: 40px; } }

.cert__mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    border: 3px solid var(--brand);
    background: rgba(0, 156, 237, 0.07);
    box-shadow: 0 0 0 8px rgba(0, 156, 237, 0.06);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--brand);
}
.cert__mark span { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.32em; text-indent: 0.32em; }
.cert__mark b { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.cert__body h3 { margin-bottom: 12px; }
.cert__body p { color: var(--muted); max-width: 68ch; }
.cert__body .ticks { margin-bottom: 0; }

/* Logos de clientes.
   Vienen de marcas distintas, con colores y proporciones distintas. Pasarlos
   todos a blanco los vuelve una franja coherente y legible sobre el fondo
   oscuro; además evita que un logo de fondo claro aparezca como un parche.
   Requisito: el archivo tiene que tener transparencia. */
.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px 46px;
}
.logos img {
    height: 38px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    opacity: 0.66;
    filter: brightness(0) invert(1);
    transition: opacity 0.25s ease;
}
.logos a:hover img,
.logos img:hover { opacity: 1; }
.logos a { display: inline-flex; }
@media (max-width: 600px) { .logos { gap: 20px 30px; } .logos img { height: 28px; } }

/* Sello de certificación */
.seal {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 13px 22px 13px 15px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: left;
}
.seal__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--brand);
    color: var(--brand);
}
.seal__mark svg { width: 19px; height: 19px; }
.seal b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; }
.seal span { display: block; font-size: 0.77rem; color: var(--muted); }

/* ---------- Formulario ---------- */
.field { margin-bottom: 19px; }
.field label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--muted);
}
.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.97rem;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0, 156, 237, 0.16);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(147, 166, 192, 0.6); }
.field__hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }

/* El widget de reCAPTCHA mide 304 px y no se puede redimensionar por CSS
   normal: en pantallas de 360 px no entra junto con el padding de la
   tarjeta. Se lo escala, que es la forma habitual de resolverlo. */
.recaptcha-caja {
    display: flex;
    justify-content: center;
    padding: 4px 0 18px;
}
@media (max-width: 430px) {
    .recaptcha-caja { justify-content: flex-start; }
    .recaptcha-caja .g-recaptcha {
        transform: scale(0.82);
        transform-origin: left center;
        /* compensa el hueco que deja la escala */
        margin-right: -54px;
    }
    /* Más aire adentro de la tarjeta cuesta caro cuando la pantalla es angosta */
    .card { padding: 20px 18px; }
}

.form-note {
    margin: 18px 0 0;
    font-size: 0.79rem;
    color: var(--muted);
    text-align: center;
}

/* Estado de envío del botón */
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 19px;
    height: 19px;
    margin: -10px 0 0 -10px;
    border: 3px solid rgba(4, 18, 31, 0.3);
    border-top-color: var(--brand-ink);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
    margin: 16px 0 0;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.form-status[hidden] { display: none; }
.form-status--ok   { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.35); }
.form-status--err  { background: rgba(242, 84, 91, 0.12);  border: 1px solid rgba(242, 84, 91, 0.35); }

/* ---------- Datos de contacto ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 4px; color: var(--brand); }
.contact-list b { display: block; font-size: 0.79rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 700; }
.contact-list a, .contact-list span { font-size: 1.02rem; color: var(--text); }
.contact-list a:hover { color: var(--brand); }

/* ---------- Preguntas frecuentes ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 4px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.03rem;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--brand);
    line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding: 0 4px 22px; color: var(--muted); max-width: 72ch; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Rastro de migas ---------- */
.crumbs { font-size: 0.83rem; color: var(--muted); padding: 22px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs span { margin: 0 7px; opacity: 0.5; }

/* ---------- Pie ---------- */
.footer {
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.017);
    padding: clamp(44px, 6vw, 68px) 0 30px;
}
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 620px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 1000px) { .footer__brand { grid-column: auto; } }
.footer__about { margin-top: 18px; }
.footer h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 15px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer li a { color: var(--text); font-size: 0.93rem; }
.footer li a:hover { color: var(--brand); }
.footer__about { color: var(--muted); font-size: 0.93rem; max-width: 42ch; }
.footer__legal {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ---------- Aparición al hacer scroll ---------- */
/* Sin JS el contenido queda visible igual: solo se anima si el JS marca la clase. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #04121f;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}
.wa:hover { transform: scale(1.07); text-decoration: none; }
.wa svg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .wa:hover { transform: none; } }

/* ---------- Utilidades ---------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
[hidden] { display: none !important; }