/* ============================================================ TECMOSA — Sistema de diseño Colores oficiales de marca Odoo: morado #714B67 (primario) + coral #FC787D (acento). Inter (display + texto, misma fuente que odoo.com) · Spline Sans Mono (etiquetas) ============================================================ */ /* Fuente cargada desde via tecmosa_theme/views/layout.xml (tecmosa_fonts) — NO usar @import aquí: el bundler de assets de Odoo corta el @import en el primer ";" que encuentra. La API v1 de Google Fonts que usa Inter (pesos separados por coma) no tiene este problema, pero el en es igual más rápido y es el mismo patrón que usa odoo.com. */ :root { /* Tinta y papel (tono frío sutil) */ --ink: oklch(0.25 0.03 258); --ink-soft: oklch(0.44 0.02 258); --ink-faint: oklch(0.60 0.015 258); --paper: oklch(0.992 0.003 250); --paper-2: oklch(0.968 0.008 252); --paper-3: oklch(0.945 0.012 252); --line: oklch(0.905 0.012 256); --line-soft: oklch(0.93 0.008 256); /* "Azul" de marca — ahora el morado oficial de Odoo (#714B67, mismo tono que usan en botones primarios de odoo.com). Se mantiene el nombre --blue para no tener que tocar cada referencia en el CSS/HTML. */ --blue: #714b67; --blue-700: color-mix(in oklab, #714b67, black 14%); --blue-600: color-mix(in oklab, #714b67, black 6%); --blue-300: color-mix(in oklab, #714b67, white 35%); --blue-100: color-mix(in oklab, #714b67, white 78%); --blue-50: color-mix(in oklab, #714b67, white 92%); --navy: oklch(0.26 0.06 337); --navy-2: oklch(0.22 0.055 337); /* Acento — teal del isotipo real de TECMOSA (#3AADAA), para que el acento del sitio combine con el logo en vez de quedar suelto con el coral de Odoo. */ --coral: #3aadaa; --coral-600: color-mix(in oklab, #3aadaa, black 14%); --coral-soft: color-mix(in oklab, #3aadaa, white 82%); --coral-bright: color-mix(in oklab, #3aadaa, white 50%); /* Tipografía — Inter, la misma fuente de odoo.com (somos partner Odoo) */ --display: "Inter", "Odoo Unicode Support Noto", system-ui, sans-serif; --body: "Inter", "Odoo Unicode Support Noto", system-ui, -apple-system, sans-serif; --mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace; /* Métricas */ --shell: 1240px; --pad: clamp(20px, 5vw, 64px); --r-sm: 10px; --r: 16px; --r-lg: 26px; --shadow: 0 1px 2px oklch(0.4 0.05 260 / 0.05), 0 18px 40px -22px oklch(0.4 0.08 260 / 0.30); --shadow-lg: 0 2px 4px oklch(0.4 0.05 260 / 0.06), 0 40px 80px -34px oklch(0.4 0.10 260 / 0.40); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body); background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--coral-soft); color: var(--ink); } /* ---------- Tipografía ---------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: -0.02em; color: var(--ink); } h1 { font-size: clamp(2.6rem, 6.4vw, 5.1rem); } h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.025em; } h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.02em; } h4 { font-size: 1.12rem; letter-spacing: -0.01em; } p { margin: 0 0 1em; text-wrap: pretty; } strong { font-weight: 700; } .eyebrow { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--coral); display: inline-block; } .eyebrow.center::before { display: none; } .lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--ink-soft); line-height: 1.55; } .muted { color: var(--ink-soft); } .mono { font-family: var(--mono); } /* ---------- Layout ---------- */ .shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(64px, 9vw, 132px); } .section.tight { padding-block: clamp(48px, 6vw, 88px); } .center { text-align: center; } .stack-sm > * + * { margin-top: 0.6rem; } .bg-paper2 { background: var(--paper-2); } .bg-blue50 { background: var(--blue-50); } .bg-navy { background: var(--navy); color: oklch(0.96 0.01 256); } .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: oklch(0.98 0.008 250); } .bg-navy .muted, .bg-navy .lead { color: oklch(0.82 0.02 256); } .bg-navy .eyebrow, .page-hero.on-navy .eyebrow { color: var(--coral-bright); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--body); font-weight: 600; font-size: 1rem; padding: 0.85em 1.4em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space: nowrap; line-height: 1; } .btn svg { width: 1.05em; height: 1.05em; } .btn-primary { background: var(--blue); color: oklch(0.99 0.005 250); box-shadow: 0 10px 24px -12px var(--blue); } .btn-primary:hover { background: var(--blue-700); transform: translateY(-2px); box-shadow: 0 16px 30px -14px var(--blue); } .btn-coral { background: var(--coral); color: oklch(0.99 0.01 300); box-shadow: 0 10px 24px -12px var(--coral); } .btn-coral:hover { background: var(--coral-600); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); } .btn-on-dark { background: oklch(0.99 0.005 250); color: var(--navy); } .btn-on-dark:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px oklch(0 0 0 / 0.5); } .btn-lg { padding: 1.02em 1.7em; font-size: 1.06rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; color: var(--blue); } .link-arrow svg { width: 1em; height: 1em; transition: transform .2s ease; } .link-arrow:hover svg { transform: translateX(4px); } /* ---------- Tarjetas ---------- */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-soft); } .pill { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; padding: 0.42em 0.85em; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); white-space: nowrap; } .pill.coral { background: var(--coral-soft); color: var(--coral-600); border-color: oklch(0.85 0.07 50); } .pill.partner { background: var(--paper); border-color: var(--line); color: var(--ink-soft); } .pill.partner img { height: 14px; width: auto; display: block; } .footer-partner { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: oklch(0.72 0.02 256); margin-top: 14px; } .footer-partner img { height: 15px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.85; } .chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.6em 0.95em; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-weight: 500; font-size: 0.96rem; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; } /* Grids */ .grid { display: grid; gap: clamp(16px, 2vw, 24px); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } } /* Placeholder de imagen */ .ph { position: relative; border-radius: var(--r); overflow: hidden; background: repeating-linear-gradient(135deg, oklch(0.93 0.012 255) 0 14px, oklch(0.955 0.01 255) 14px 28px); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-faint); min-height: 200px; } .ph .ph-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); background: var(--paper); padding: 0.4em 0.8em; border-radius: 999px; border: 1px solid var(--line); } .ph.dark { background: repeating-linear-gradient(135deg, oklch(0.30 0.04 262) 0 14px, oklch(0.33 0.04 262) 14px 28px); border-color: oklch(0.36 0.04 262); } .ph.dark .ph-label { background: var(--navy); color: oklch(0.78 0.02 256); border-color: oklch(0.4 0.04 262); } .shot { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 200px; } .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .shot.dark { border-color: oklch(0.36 0.04 262); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: oklch(0.992 0.003 250 / 0.82); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; } .site-header.scrolled { border-bottom-color: var(--line); } .nav { display: flex; align-items: center; gap: 22px; height: 74px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 800; font-size: 1.42rem; letter-spacing: -0.04em; color: var(--ink); } .brand-logo { height: 34px; width: auto; display: block; } .brand-icon { height: 30px; width: auto; display: block; flex: none; } .brand b { color: var(--blue); font-weight: 800; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; } .nav-links a { font-size: 0.97rem; font-weight: 500; color: var(--ink-soft); padding: 0.5em 0.8em; border-radius: 9px; transition: color .15s, background .15s; } .nav-links a:hover { color: var(--ink); background: var(--paper-2); } .nav-links a.active { color: var(--blue); font-weight: 600; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); } .lang-toggle button { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.45em 0.7em; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; transition: all .15s; } .lang-toggle button.on { background: var(--blue); color: oklch(0.99 0.005 250); } .hamburger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; align-items: center; justify-content: center; } .hamburger span, .hamburger span::before, .hamburger span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: .2s; } .hamburger span::before { position: absolute; top: -6px; } .hamburger span::after { position: absolute; top: 6px; } @media (max-width: 940px) { .nav-links { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px var(--pad) 22px; margin: 0; transform: translateY(-130%); transition: transform .28s ease; box-shadow: var(--shadow); } .nav-links.open { transform: translateY(0); } .nav-links a { padding: 0.9em 0.4em; border-radius: 0; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; } .hamburger { display: inline-flex; } .nav-cta-desktop { display: none; } } /* ---------- Footer ---------- */ .site-footer { background: var(--navy); color: oklch(0.84 0.02 256); padding-block: clamp(54px, 7vw, 86px) 30px; } .site-footer a { color: oklch(0.86 0.02 256); } .site-footer a:hover { color: oklch(0.98 0.01 250); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid h5 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); margin: 0 0 16px; font-weight: 500; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 0.96rem; } .footer-brand .brand { color: oklch(0.98 0.01 250); margin-bottom: 14px; } .footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid oklch(0.4 0.04 262); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.84rem; color: oklch(0.72 0.02 256); font-family: var(--mono); } /* ---------- WhatsApp flotante ---------- */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: oklch(0.72 0.16 152); color: white; display: grid; place-items: center; box-shadow: 0 14px 30px -10px oklch(0.6 0.14 152 / 0.7); transition: transform .2s ease; } .wa-float:hover { transform: scale(1.08) translateY(-2px); } .wa-float svg { width: 30px; height: 30px; } /* ---------- Animaciones de entrada ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* utilidades */ .flow > * + * { margin-top: 1.1rem; } .maxw-sm { max-width: 540px; } .maxw-md { max-width: 680px; } .maxw-lg { max-width: 820px; } .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .divider { height: 1px; background: var(--line); border: 0; margin: 0; }