/* ===================================================================== ServicesCode — Design System v2 "Editor" Estética: developer/editor de código (trio de marca azul/rosa/cian) sobre base B2B limpia. Tokens en :root, dark mode via .dark en . Estructura: 1. Tokens 7. Servicios 13. Contacto 2. Base 8. Tecnologías 14. Footer 3. Utilidades 9. Portafolio 15. To-top / Modales / Cookies 4. Botones 10. Proceso 16. Páginas legales 5. Header/Nav 11. Testimonios 17. Responsive 6. Hero 12. FAQs 18. Reduced motion ===================================================================== */ /* 1) TOKENS ----------------------------------------------------------- */ :root { /* Marca (trio del logo ) */ --blue: #1F6FEB; --blue-deep: #1456C4; /* hover / texto azul AA sobre claro */ --pink: #ff79c6; /* decorativo */ --pink-ink: #B02E88; /* rosa apto para texto en claro */ --cyan: #8be9fd; /* decorativo */ --cyan-ink: #0E7490; /* cian apto para texto en claro */ --grad-brand: linear-gradient(90deg, var(--blue), var(--pink) 50%, var(--cyan)); --grad-cta: linear-gradient(180deg, #3B82F6, #1F6FEB 60%, #1A63D6); /* Superficies y texto (modo claro) */ --bg: #ffffff; --bg-soft: #f4f7fc; --surface: #ffffff; --surface-2: #f7fafd; --border: #e4eaf3; --border-strong: #c9d5e6; --text: #0e1a2b; --text-soft: #45566e; --text-faint: #5f7189; --ring: #1F6FEB; /* Estados */ --ok: #1a7f37; --error: #cf222e; /* Sombras (tinte navy, nunca negro puro) */ --shadow-xs: 0 1px 2px rgba(14, 26, 43, .06); --shadow-sm: 0 2px 6px rgba(14, 26, 43, .06), 0 1px 2px rgba(14, 26, 43, .05); --shadow-md: 0 10px 28px -8px rgba(14, 26, 43, .14), 0 2px 6px rgba(14, 26, 43, .05); --shadow-lg: 0 24px 55px -18px rgba(14, 26, 43, .22), 0 4px 12px rgba(14, 26, 43, .06); --glow-blue: 0 10px 30px -8px rgba(31, 111, 235, .45); /* Tipografía */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-display: clamp(2.35rem, 1.6rem + 2.8vw, 3.55rem); --fs-h2: clamp(1.7rem, 1.35rem + 1.4vw, 2.3rem); --fs-h3: 1.18rem; --fs-lead: clamp(1.05rem, .98rem + .35vw, 1.2rem); /* Layout */ --container-width: 1140px; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --border-radius: 12px; /* legacy alias */ --section-pad: clamp(4rem, 3rem + 3.5vw, 6.25rem); --transition-speed: 0.25s; /* Aliases legacy (compatibilidad con reglas antiguas / inline) */ --color-primary: var(--blue); --color-accent: var(--cyan-ink); --color-dark: var(--text); --color-light: var(--bg-soft); --color-white: #ffffff; --color-gray: var(--text-faint); --color-success: var(--ok); --color-error: var(--error); --brand: var(--blue); --brand2: var(--cyan-ink); --neutral-900: #0e1a2b; --neutral-700: #45566e; --neutral-400: #94A3B8; --neutral-100: #F1F5F9; color-scheme: light; } .dark { --bg: #0a0f1c; --bg-soft: #0d1526; --surface: #121a2e; --surface-2: #0f1626; --border: #223050; --border-strong: #33456e; --text: #e7edf8; --text-soft: #a9b7cf; --text-faint: #8393ad; --ring: #8be9fd; --blue-deep: #6ea8ff; /* “azul de texto” legible en oscuro */ --pink-ink: #ff9ad5; --cyan-ink: #7cd7ec; --ok: #3fb950; --error: #f97583; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45); --shadow-md: 0 12px 30px -8px rgba(0, 0, 0, .55); --shadow-lg: 0 28px 60px -18px rgba(0, 0, 0, .65); --glow-blue: 0 10px 32px -8px rgba(31, 111, 235, .55); --color-gray: var(--text-faint); --color-light: var(--bg-soft); color-scheme: dark; } /* 2) BASE -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 92px; /* anclas bajo el header sticky */ background: var(--bg); } body { font-family: var(--font-family); line-height: 1.65; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; } h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.02em; font-weight: 700; color: var(--text); } b, strong { font-weight: 650; } a { color: var(--blue-deep); } ::selection { background: rgba(31, 111, 235, .22); } .dark ::selection { background: rgba(139, 233, 253, .28); color: #fff; } /* Skip link (accesibilidad) */ .skip-link { position: absolute; top: -48px; left: 12px; background: var(--blue); color: #fff; padding: 10px 18px; z-index: 3000; text-decoration: none; font-weight: 650; border-radius: 10px; box-shadow: var(--shadow-md); transition: top .25s ease; } .skip-link:focus { top: 12px; } .dark .skip-link { background: var(--cyan); color: #0a0f1c; } /* Focus visible global — anillo de marca, nunca lo elimines */ :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } /* 3) UTILIDADES -------------------------------------------------------- */ .container { max-width: var(--container-width); margin-inline: auto; padding: 0 1.25rem; } .section { padding: var(--section-pad) 0; } /* Secciones alternas: lienzo frío con retícula de puntos (blueprint sutil) */ .section--light, .section--alt { background-color: var(--bg-soft); background-image: radial-gradient(circle, rgba(14, 26, 43, .055) 1px, transparent 1.5px); background-size: 26px 26px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .dark .section--light, .dark .section--alt { background-color: var(--bg-soft); background-image: radial-gradient(circle, rgba(139, 233, 253, .05) 1px, transparent 1.5px); } .section__title { font-size: var(--fs-h2); font-weight: 760; letter-spacing: -0.025em; text-align: center; margin-bottom: 2.9rem; text-wrap: balance; } /* Subrayado firma: barra degradada con el trio de marca */ .section__title::after { content: ""; display: block; width: 64px; height: 4px; margin: .95rem auto 0; border-radius: 999px; background: var(--grad-brand); } .subtitle { font-size: var(--fs-lead); color: var(--text-soft); max-width: 620px; margin: 0 auto 2rem; } .section__title + .subtitle { margin-top: -1.9rem; margin-bottom: 2.6rem; text-align: center; } /* Notas “comentario de código” (services__note, tech__note) */ .services__note, .tech__note { text-align: center; margin-top: 2.4rem; color: var(--text-faint); font-family: var(--font-mono); font-size: .875rem; } /* Visually-hidden */ .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Chips base (.badge — trust badges, stack tags, case meta) */ .badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); padding: .45rem 1rem; border-radius: 999px; font-family: var(--font-mono); font-size: .82rem; font-weight: 500; line-height: 1.4; } .dark .badge { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: var(--text-soft); } /* 4) BOTONES ----------------------------------------------------------- */ .button { display: inline-block; padding: .8rem 1.7rem; border-radius: 10px; text-decoration: none; font-weight: 650; font-size: 1rem; letter-spacing: .01em; line-height: 1.4; border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease; } .button--primary { background: var(--grad-cta); color: #fff; box-shadow: 0 1px 2px rgba(14, 26, 43, .2), inset 0 1px 0 rgba(255, 255, 255, .18); } .button--primary:hover, .button--primary:focus-visible { background: linear-gradient(180deg, #2E77F2, #1A63D6 60%, #1456C4); transform: translateY(-2px); box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255, 255, 255, .18); } .button--primary:active { transform: translateY(0); } .button--secondary { background: transparent; color: var(--blue-deep); border-color: rgba(31, 111, 235, .45); } .button--secondary:hover, .button--secondary:focus-visible { background: rgba(31, 111, 235, .09); border-color: var(--blue); color: var(--blue-deep); transform: translateY(-2px); } .dark .button--secondary { color: #9ec5ff; border-color: rgba(110, 168, 255, .45); } .dark .button--secondary:hover, .dark .button--secondary:focus-visible { background: rgba(31, 111, 235, .22); border-color: #6ea8ff; color: #cfe1ff; } .button--small { padding: .55rem 1.05rem; font-size: .9rem; border-radius: 9px; } /* 5) HEADER & NAVEGACIÓN ----------------------------------------------- */ /* El inline