/* ============================================================================ netbrain.es — sistema de tokens · derivado de atera.com ---------------------------------------------------------------------------- FUENTE ÚNICA DE VERDAD. Todo el sistema lee de aquí; ningún bloque redefine un color ni un tamaño por su cuenta. Encargo: "similar a Atera en colores y tipografías, sin mirar el diseño actual de netbrain.es". Así que esto NO parte del kit de Elementor de producción: parte del CSS de atera.com capturado el 2026-08-04, y cada token lleva anotado el valor del que sale. ========================================================================== */ /* --- Tipografía autoalojada ----------------------------------------------- Dos familias, las dos variables: un fichero cubre todo el rango de pesos. Cero peticiones a Google Fonts. Producción pide hoy TRES familias con 18 variantes cada una. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-var.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } :root { /* --- ACENTO ------------------------------------------------------------ Atera usa #FF176B. Es lo más reconocible de su marca y el comprador IT es justo quien lo reconoce, así que roto el tono hacia el rojo: misma saturación, misma energía, hex propio. ¿Lo quieres calcado? Pon #FF176B aquí y ya está. */ --nb-accent: #FF2E63; /* Atera: #FF176B */ --nb-accent-deep: #C4003F; /* Atera: #C00045 · hover y estados activos */ --nb-accent-soft: #FFE8EE; /* Atera: #FCDFE5 · fondo de realce */ /* Acento secundario. En Atera solo aparece en ilustración y animación, nunca en texto ni en botones. Misma regla aquí. */ --nb-lilac: #B28DE1; /* Atera: #B28DE1 */ /* --- TINTES DE TARJETA ------------------------------------------------- Sacados de sus CSS por bloque (card-switch.css, capabilities-slider.css). Son fondos de tarjeta, nunca de texto: cada bloque grande de la home lleva uno distinto y eso es lo que evita que la página se lea monótona con un solo crudo repetido veinte veces. */ --nb-tint-rosa: #FCDFE5; /* Atera: #FCDFE5 */ --nb-tint-lila: #F0D7FF; /* Atera: #F0D7FF */ --nb-tint-nieve: #FFFAFF; /* Atera: #FFFAFF */ --nb-tint-tierra: #E3DBD9; /* Atera: rgb(227 219 217) */ /* Fondo oscuro de sección. Es un verde azulado muy oscuro, no un negro: sobre negro puro los logos en blanco se ven recortados y duros. */ --nb-dark: #003033; /* Atera: rgb(0 48 51) */ /* El gris al que funde el vídeo del héroe por abajo. La franja de logos usa EXACTAMENTE este valor para que las dos secciones empalmen sin costura: si cambia uno, hay que cambiar el otro — por eso es un token y no un hex suelto en cada bloque. */ --nb-video-fade: #0E1416; /* Degradado de acento, para las piezas que piden más energía que un plano. */ --nb-grad-accent: linear-gradient(120deg, #E04DCF 0%, #F62581 100%); /* Atera: anchor-card */ /* --- TINTA ------------------------------------------------------------- Tres niveles, exactamente como los usa Atera. */ --nb-ink: #1A1A1A; /* Atera: #1A1A1A · titulares */ --nb-text: #3E3E3E; /* Atera: #3E3E3E · texto de bloque */ --nb-muted: #636363; /* Atera: #636363 · secundario, eyebrows */ /* --- SUPERFICIES ------------------------------------------------------- El token que más manda de todo el sistema: el fondo de tarjeta es un CRUDO CÁLIDO, no un gris. Cambiarlo por un #F3F3F3 neutro "porque es casi igual" apaga la página entera. No es casi igual. */ --nb-paper: #FFFFFF; /* Atera: #FFFFFF · fondo de página */ --nb-sunken: #F6F5F3; /* Atera: #F6F5F3 · fondo de tarjeta */ --nb-sunken-hover: #F0EEEB; --nb-rule: #EDEDED; /* Atera: #EDEDED · filetes y bordes */ /* --- SEMÁNTICOS -------------------------------------------------------- Separados del acento a propósito: el acento es marca, esto es estado. */ --nb-ok: #1C7A4B; --nb-warn: #B4661A; --nb-crit: #B32D2E; /* --- FOCO -------------------------------------------------------------- Copiado tal cual de Atera, que esto lo tienen bien resuelto. Azul y no el acento: sobre un botón rosa, un foco rosa no se ve. */ --nb-focus: #0061CD; /* Atera: #0061cd */ --nb-focus-width: 2px; --nb-focus-offset: 3px; /* --- CONTENEDORES ------------------------------------------------------ Los tres anchos de Atera. Ni uno más: es lo que hace que la página respire igual de arriba abajo sin que nadie improvise un max-width. */ --nb-w-text: 1180px; /* héroes, texto corrido, formularios */ /* 1400px útiles con 40px de calle = el .container de 1480px de Atera. Medido en su web: TODAS sus secciones cuelgan del mismo raíl, así que grid y wide valen lo mismo aquí. Tenerlos distintos dejaba el héroe 22px a la izquierda del resto de la página. */ --nb-w-grid: 1400px; --nb-w-wide: 1400px; /* 40px es su calle en escritorio; a 20px en móvil, donde 40 se come la pantalla. */ --nb-gutter: clamp(1.25rem, 2vw, 2.5rem); /* --- FAMILIAS ---------------------------------------------------------- Atera empareja Gellix (display) + Inter (texto). Gellix es de pago (Fontfabric); Plus Jakarta Sans es el esqueleto libre más parecido: geométrica, altura de x alta, bocas cerradas, y aguanta el tracking negativo sin empastarse. Inter se queda: es la de Atera y es libre. Alternativa si Jakarta no convence: Figtree. */ --nb-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --nb-font-text: "Inter", "Segoe UI", system-ui, sans-serif; /* --- ESCALA ------------------------------------------------------------ Los tamaños de Atera, en un clamp por estilo en vez de cuatro breakpoints por estilo como hace el kit de Elementor. */ --nb-size-display: clamp(2.25rem, 1.05rem + 5.35vw, 4.5rem); /* 36 → 72 px */ --nb-size-h1: clamp(2.00rem, 1.20rem + 3.55vw, 3.50rem); /* 32 → 56 px */ --nb-size-h2: clamp(1.75rem, 1.25rem + 2.20vw, 2.75rem); /* 28 → 44 px */ --nb-size-h3: clamp(1.25rem, 1.10rem + 0.65vw, 1.50rem); /* 20 → 24 px */ --nb-size-body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20 px · Atera */ --nb-size-body: 1rem; /* 16 px · Atera */ --nb-size-small: 0.875rem; /* 14 px */ --nb-size-eyebrow: 0.75rem; /* 12 px · Atera, sube a 14 en desktop */ /* --- TRACKING ---------------------------------------------------------- Atera va de −0.7px a 36px hasta −1.44px a 64px. En em para que escale solo con el clamp. Sin esto el resto del sistema no se sostiene: es el cambio que más se nota y el más barato de todos. */ --nb-track-display: -0.023em; /* Atera: −1.44px @ 64px */ --nb-track-h1: -0.021em; --nb-track-h2: -0.019em; /* Atera: −0.7px @ 36px */ --nb-track-h3: -0.012em; --nb-track-body: 0em; --nb-track-eyebrow: 0.083em; /* Atera: 1px @ 12px */ /* --- PESOS Y ALTURAS --------------------------------------------------- */ --nb-weight-display: 700; --nb-weight-heading: 700; /* Atera usa 600 de Gellix; Jakarta pide 700 para el mismo peso óptico */ --nb-weight-body: 400; --nb-weight-strong: 600; --nb-weight-eyebrow: 500; /* Atera: 500 */ --nb-lh-display: 1.02; --nb-lh-heading: 1.12; --nb-lh-body: 1.4; /* Atera: 140% en todo el texto */ --nb-lh-eyebrow: 1.4; /* --- ESPACIADO --------------------------------------------------------- Se usa con gap en flex/grid, no con márgenes sueltos que se colapsan y luego nadie sabe de dónde sale el hueco. */ --nb-space-2xs: 4px; --nb-space-xs: 8px; --nb-space-sm: 16px; --nb-space-md: 24px; --nb-space-lg: 40px; --nb-space-xl: 64px; --nb-space-2xl: 112px; /* Atera: lg:mt-[112px] */ --nb-space-band: clamp(4rem, 2.5rem + 6vw, 7rem); /* separación entre secciones */ /* --- IMAGEN DE TARJETA --------------------------------------------------- Alto de la foto en las tarjetas de caso de éxito y de proyecto. Va en un token y no en una proporción porque las dos tarjetas NO miden lo mismo de ancho: con la misma proporción, la más ancha sale más alta y las dos bandas dejan de leerse de la misma familia. Fijando el alto, coinciden siempre. */ --nb-figura-alto: clamp(200px, 25vw, 358px); /* --- RADIOS Y SOMBRAS -------------------------------------------------- Atera tira de rounded-xl de Tailwind = 12px en tarjeta. */ --nb-radius-sm: 6px; --nb-radius: 12px; /* Atera: rounded-xl */ --nb-radius-lg: 24px; --nb-radius-pill: 999px; --nb-shadow: 0 1px 2px rgb(26 26 26 / .04), 0 12px 32px -20px rgb(26 26 26 / .28); } /* ============================================================================ Base. Solo lo que necesita cualquier bloque para heredar bien. Los componentes se estilan en el CSS de su propio bloque, nunca aquí. ========================================================================== */ body { font-family: var(--nb-font-text); font-size: var(--nb-size-body); font-weight: var(--nb-weight-body); line-height: var(--nb-lh-body); color: var(--nb-text); background: var(--nb-paper); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--nb-font-display); font-weight: var(--nb-weight-heading); line-height: var(--nb-lh-heading); color: var(--nb-ink); text-wrap: balance; } h1 { font-size: var(--nb-size-h1); letter-spacing: var(--nb-track-h1); } h2 { font-size: var(--nb-size-h2); letter-spacing: var(--nb-track-h2); } h3 { font-size: var(--nb-size-h3); letter-spacing: var(--nb-track-h3); } /* --- Utilidades del sistema ------------------------------------------------ Las comparten todos los bloques, así que viven aquí y no se repiten. */ .nb-container { width: 100%; margin-inline: auto; padding-inline: var(--nb-gutter); max-width: calc(var(--nb-w-text) + var(--nb-gutter) * 2); } .nb-container-grid { width: 100%; margin-inline: auto; padding-inline: var(--nb-gutter); max-width: calc(var(--nb-w-grid) + var(--nb-gutter) * 2); } .nb-container-wide { width: 100%; margin-inline: auto; padding-inline: var(--nb-gutter); max-width: calc(var(--nb-w-wide) + var(--nb-gutter) * 2); } /* Etiqueta sobre el titular. El trío eyebrow → titular → entradilla es lo que Atera repite en toda su home sin variarlo. Esa es toda la gracia. */ .nb-eyebrow { font-family: var(--nb-font-text); font-size: var(--nb-size-eyebrow); font-weight: var(--nb-weight-eyebrow); line-height: var(--nb-lh-eyebrow); letter-spacing: var(--nb-track-eyebrow); text-transform: uppercase; color: var(--nb-muted); margin: 0; } @media (min-width: 768px) { .nb-eyebrow { font-size: 0.875rem; } } .nb-display { font-family: var(--nb-font-display); font-size: var(--nb-size-display); font-weight: var(--nb-weight-display); line-height: var(--nb-lh-display); letter-spacing: var(--nb-track-display); color: var(--nb-ink); text-wrap: balance; margin: 0; } .nb-display em { font-style: normal; color: var(--nb-accent); } .nb-lede { font-size: var(--nb-size-body-lg); line-height: var(--nb-lh-body); color: var(--nb-text); max-width: 56ch; margin: 0; } /* Botón. El acento vive aquí y en poco más. */ .nb-btn { display: inline-flex; align-items: center; gap: var(--nb-space-xs); font-family: var(--nb-font-text); font-size: var(--nb-size-body); font-weight: var(--nb-weight-strong); line-height: 1; padding: 15px 28px; border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-accent); color: #FFFFFF; text-decoration: none; cursor: pointer; transition: background-color .15s ease; } .nb-btn:hover, .nb-btn:focus-visible { background: var(--nb-accent-deep); color: #FFFFFF; } .nb-btn--ghost { background: transparent; color: var(--nb-ink); box-shadow: inset 0 0 0 1px var(--nb-rule); } .nb-btn--ghost:hover, .nb-btn--ghost:focus-visible { background: var(--nb-sunken); color: var(--nb-ink); } /* Icono en línea. Hereda tamaño y color del contexto, que es todo el motivo de usar SVG en línea y no una fuente de iconos. */ .nb-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; } /* Enlace con flecha. Es el CTA secundario de Atera: NO es un botón con borde, es texto con una flecha que se desplaza al pasar por encima. Poner dos botones con borde uno al lado del otro reparte el peso y ninguno destaca. */ .nb-link-arrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--nb-font-text); font-size: var(--nb-size-body); font-weight: var(--nb-weight-strong); color: var(--nb-ink); text-decoration: none; padding-block: 15px; } .nb-link-arrow svg { width: 17px; height: 17px; transition: transform .18s ease; } .nb-link-arrow:hover { color: var(--nb-accent); } .nb-link-arrow:hover svg { transform: translateX(3px); } /* Sobre fondo oscuro o vídeo. */ .nb-link-arrow--claro { color: #FFFFFF; } .nb-link-arrow--claro:hover { color: #FFFFFF; opacity: .78; } /* Foco visible en todo lo tabulable. Innegociable, y hoy no existe en netbrain.es. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--nb-focus-width) solid var(--nb-focus); outline-offset: var(--nb-focus-offset); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }