/* ═══════════════════════════════════════════════════════ Sanbai · Minimal (Apple-style) Light canvas · huge type · generous air · orange only on CTAs ═══════════════════════════════════════════════════════ */ :root{ /* canvas */ --m-bg: #FFFFFF; --m-bg-soft: #F5F5F7; /* Apple light gray */ --m-bg-card: #FFFFFF; --m-dark: #0F2744; /* azul oscuro · feature/dark moments */ --m-dark-2: #0B1E36; /* ink */ --m-ink: #2D343A; /* gris antracita */ --m-ink-2: #515860; --m-ink-3: #6E747C; /* secondary */ --m-ink-4: #8B9098; --m-line: #E4E4E7; --m-line-2: rgba(0,0,0,0.08); /* surfaces (theme-aware) */ --m-glass: rgba(255,255,255,0.86); --m-input-bg: #FFFFFF; --m-nav-bg: rgba(255,255,255,0.72); --m-nav-bg-2: rgba(255,255,255,0.82); --m-menu-bg: rgba(255,255,255,0.96); --m-card-bd-hover: #d8d8dc; --m-btn-soft-hover: #ECECEF; --m-shadow: rgba(0,0,0,0.22); /* accent — Sanbai orange (marca) */ --m-orange: #F6611A; --m-orange-2: #FF7C42; --m-orange-ink:#D9520F; /* on dark */ --m-d-ink: #F5F5F7; --m-d-ink-2: #A1A1A6; --m-d-line: rgba(255,255,255,0.12); --m-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --m-wrap: 1120px; --m-wrap-wide: 1320px; --m-r: 22px; --m-r-lg: 30px; } /* ═══ DARK THEME ═══════════════════════════════════════ Activado con · negro/grafito. El naranja de marca y las secciones navy se mantienen. ═══════════════════════════════════════════════════════ */ :root[data-theme="dark"]{ --m-bg: #0A0B0D; --m-bg-soft: #121419; --m-bg-card: #16191F; --m-dark: #0C1F38; /* navy un poco más profundo sobre fondo negro */ --m-dark-2: #0A1A30; --m-ink: #F4F5F7; --m-ink-2: #C2C6CC; --m-ink-3: #9298A0; --m-ink-4: #6B7178; --m-line: rgba(255,255,255,0.10); --m-line-2: rgba(255,255,255,0.07); --m-glass: rgba(16,18,22,0.82); --m-input-bg: #1B1E25; --m-nav-bg: rgba(10,11,13,0.7); --m-nav-bg-2: rgba(10,11,13,0.82); --m-menu-bg: rgba(10,11,13,0.96); --m-card-bd-hover: rgba(255,255,255,0.18); --m-btn-soft-hover: #22262E; --m-shadow: rgba(0,0,0,0.6); /* naranja levemente más cálido para legibilidad sobre negro */ --m-orange-ink:#FF7A3D; } :root[data-theme="dark"] body.minimal{background:var(--m-bg)} /* theme toggle button */ .m-theme-toggle{ width:34px;height:34px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; color:var(--m-ink-2);border:1px solid var(--m-line); background:transparent;cursor:pointer;flex-shrink:0; transition:color .2s,border-color .2s,background .2s; } .m-theme-toggle:hover{color:var(--m-ink);border-color:var(--m-ink-3)} .m-theme-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .m-theme-toggle .ic-sun{display:none} .m-theme-toggle .ic-moon{display:block} :root[data-theme="dark"] .m-theme-toggle .ic-sun{display:block} :root[data-theme="dark"] .m-theme-toggle .ic-moon{display:none} @media (max-width:860px){ .m-theme-toggle{margin-left:auto} } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%} body.minimal{ background:var(--m-bg); color:var(--m-ink); font-family:var(--m-font); font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-0.011em; overflow-x:hidden; } .minimal img,.minimal svg{display:block;max-width:100%} .minimal a{color:inherit;text-decoration:none} .minimal button{font:inherit;background:none;border:none;color:inherit;cursor:pointer} .minimal input,.minimal select,.minimal textarea{font:inherit;color:inherit} .m-wrap{max-width:var(--m-wrap);margin:0 auto;padding:0 28px} .m-wrap-wide{max-width:var(--m-wrap-wide);margin:0 auto;padding:0 28px} /* ─── reveals ─────────────────────────────────────────── */ .m-reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)} .m-reveal.in{opacity:1;transform:none} .m-reveal[data-d="1"]{transition-delay:.08s} .m-reveal[data-d="2"]{transition-delay:.16s} .m-reveal[data-d="3"]{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .m-reveal{opacity:1;transform:none;transition:none} } /* ═══ NAV ═══════════════════════════════════════════════ */ .m-nav{ position:fixed;top:0;left:0;right:0;z-index:100; height:52px; background:var(--m-nav-bg); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; } .m-nav.scrolled{border-bottom-color:var(--m-line);background:var(--m-nav-bg-2)} .m-nav-inner{ max-width:var(--m-wrap-wide);margin:0 auto;height:100%; padding:0 28px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .m-brand{display:flex;align-items:center;gap:10px} .m-brand img{height:22px;width:auto;opacity:0.95} .m-brand .bt{font-weight:600;font-size:18px;letter-spacing:-0.02em;color:var(--m-ink)} .m-nav-links{display:flex;align-items:center;gap:6px} .m-nav-links a{ font-size:13.5px;font-weight:400;color:var(--m-ink-2); padding:7px 13px;border-radius:980px;transition:color .2s,background .2s; letter-spacing:-0.01em; } .m-nav-links a:hover{color:var(--m-ink)} .m-nav-links a.active{color:var(--m-ink);font-weight:500} .m-nav-cta{ background:var(--m-orange)!important;color:#fff!important;font-weight:500!important; padding:7px 16px!important; } .m-nav-cta:hover{background:var(--m-orange-ink)!important} .m-nav-toggle{display:none} @media (max-width:860px){ .m-nav-links{ position:fixed;top:52px;left:0;right:0; flex-direction:column;align-items:stretch;gap:2px; background:var(--m-menu-bg);backdrop-filter:blur(20px); padding:12px 20px 20px;border-bottom:1px solid var(--m-line); transform:translateY(-130%);transition:transform .35s cubic-bezier(.2,.7,.2,1); } .m-nav-links.open{transform:none} .m-nav-links a{padding:12px 8px;font-size:16px;border-radius:10px} .m-nav-cta{text-align:center;margin-top:8px} .m-nav-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--m-ink)} .m-nav-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6} } /* ═══ shared bits ═══════════════════════════════════════ */ .m-kicker{ font-size:13px;font-weight:600;letter-spacing:0.01em; color:var(--m-orange-ink);margin-bottom:14px; } .m-h1{ font-size:clamp(2.6rem,6.6vw,5.6rem); font-weight:600;line-height:1.04;letter-spacing:-0.025em; color:var(--m-ink);text-wrap:balance; } .m-h2{ font-size:clamp(2rem,4.6vw,3.6rem); font-weight:600;line-height:1.06;letter-spacing:-0.025em; color:var(--m-ink);text-wrap:balance; } .m-h3{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600;line-height:1.12;letter-spacing:-0.02em;color:var(--m-ink); } .m-lead{ font-size:clamp(1.18rem,2vw,1.5rem); font-weight:400;line-height:1.42;color:var(--m-ink-3);letter-spacing:-0.014em; text-wrap:pretty; } .m-accent{color:var(--m-orange)} /* link with chevron — Apple style */ .m-link{ display:inline-flex;align-items:center;gap:5px; color:var(--m-orange-ink);font-weight:400;font-size:clamp(1rem,1.4vw,1.18rem); letter-spacing:-0.012em;transition:gap .2s; } .m-link::after{content:"›";font-size:1.3em;line-height:0;transform:translateY(1px);transition:transform .2s} .m-link:hover::after{transform:translate(2px,1px)} /* buttons */ .m-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-size:15px;font-weight:500;letter-spacing:-0.01em; padding:13px 24px;border-radius:980px;transition:background .2s,transform .2s,color .2s,border-color .2s; } .m-btn-fill{background:var(--m-orange);color:#fff} .m-btn-fill:hover{background:var(--m-orange-ink)} .m-btn-soft{background:var(--m-bg-soft);color:var(--m-ink);border:1px solid var(--m-line)} .m-btn-soft:hover{background:var(--m-btn-soft-hover)} .m-btn-line-light{border:1px solid var(--m-d-line);color:var(--m-d-ink)} .m-btn-line-light:hover{background:rgba(255,255,255,0.08)} .m-btn-fill-light{background:#fff;color:var(--m-ink)} .m-btn-fill-light:hover{background:#e8e8ea} /* ═══ HERO ══════════════════════════════════════════════ */ .m-hero{ padding:148px 0 0; text-align:center; } .m-hero .m-h1{margin:0 auto;max-width:15ch} .m-hero-sub{ margin:26px auto 0;max-width:40ch; } .m-hero-cta{ margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap; } .m-hero-figure{ margin:64px auto 0; max-width:var(--m-wrap-wide); padding:0 28px; } .m-hero-carousel{ position:relative; width:100%; height:clamp(380px,56vw,640px); border-radius:var(--m-r-lg); overflow:hidden; background:var(--m-bg-soft); isolation:isolate; } .m-hero-slide{ position:absolute;inset:0; background-size:cover; background-position:center 42%; opacity:0; transform:scale(1.04); transition:opacity 1.4s cubic-bezier(.4,0,.2,1); will-change:opacity,transform; } .m-hero-slide.is-active{ opacity:1; z-index:1; animation:mKenburns 8s ease-out forwards; } @keyframes mKenburns{ from{transform:scale(1.04)} to{transform:scale(1.12)} } .m-hero-dots{ position:absolute;z-index:3;left:0;right:0;bottom:18px; display:flex;gap:8px;justify-content:center;align-items:center; } .m-hero-dot{ width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,0.5); border:none;cursor:pointer;padding:0; box-shadow:0 1px 4px rgba(0,0,0,0.25); transition:width .35s cubic-bezier(.2,.7,.2,1),background .3s; } .m-hero-dot.is-active{width:26px;border-radius:4px;background:#fff} .m-hero-img{width:100%;height:clamp(380px,56vw,640px);object-fit:cover;border-radius:var(--m-r-lg);background:var(--m-bg-soft);} .m-hero-figcap{margin-top:16px;font-size:12.5px;color:var(--m-ink-4);letter-spacing:-0.005em;transition:opacity .4s} @media (prefers-reduced-motion:reduce){ .m-hero-slide{transition:opacity .4s} .m-hero-slide.is-active{animation:none;transform:none} } /* ═══ STATS ═════════════════════════════════════════════ */ .m-stats{padding:96px 0 88px} .m-stats-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; max-width:920px;margin:0 auto;text-align:center; } .m-stat .v{ font-size:clamp(3rem,6vw,4.6rem);font-weight:600;line-height:1; letter-spacing:-0.04em;color:var(--m-ink); } .m-stat .v .u{font-size:0.42em;font-weight:600;color:var(--m-ink-3);margin-left:4px;letter-spacing:-0.02em} .m-stat .l{margin-top:14px;font-size:15px;color:var(--m-ink-3);letter-spacing:-0.01em} @media (max-width:720px){ .m-stats-grid{grid-template-columns:1fr;gap:48px} } /* ═══ SECTION head (centered) ═══════════════════════════ */ .m-section{padding:clamp(80px,11vw,140px) 0} .m-section.soft{background:var(--m-bg-soft)} /* anchored sections clear the fixed 52px nav when jumped to */ .m-section,.m-dark-sec,.m-cta,.m-hero{scroll-margin-top:72px} .m-sec-head{text-align:left;max-width:none;margin:0 0 clamp(44px,6vw,72px)} .m-sec-head .m-lead{margin-top:18px;max-width:58ch} .m-sec-head .m-h2{max-width:20ch} .m-sec-head .m-link{margin-top:22px} /* ═══ FEATURE CARDS (bento-ish grid) ═══════════════════ */ .m-cards{ display:grid;grid-template-columns:repeat(6,1fr);gap:20px; } .m-card{ background:var(--m-bg-card);border:1px solid var(--m-line); border-radius:var(--m-r);padding:34px 32px; display:flex;flex-direction:column; grid-column:span 2; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s; } .m-section.soft .m-card{background:var(--m-bg-card)} .m-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px var(--m-shadow);border-color:var(--m-card-bd-hover)} .m-card.feat{grid-column:span 3} .m-card .m-card-ic{ width:46px;height:46px;border-radius:13px; background:var(--m-bg-soft);display:flex;align-items:center;justify-content:center; margin-bottom:auto; } .m-section.soft .m-card .m-card-ic{background:var(--m-bg-soft)} .m-card .m-card-ic svg{width:23px;height:23px;stroke:var(--m-orange);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .m-card h3{ font-size:1.32rem;font-weight:600;letter-spacing:-0.02em;line-height:1.14; margin-top:30px;color:var(--m-ink); } .m-card.feat h3{font-size:1.6rem} .m-card p{margin-top:11px;font-size:15px;line-height:1.5;color:var(--m-ink-3);letter-spacing:-0.008em} .m-card .m-card-tag{ margin-top:20px;font-size:12.5px;font-weight:500;color:var(--m-ink-4);letter-spacing:-0.005em; } .m-card .m-card-go{ margin-top:18px;color:var(--m-orange-ink);font-size:14px;font-weight:500; display:inline-flex;align-items:center;gap:5px; } .m-card .m-card-go::after{content:"›";font-size:1.25em;line-height:0;transform:translateY(1px);transition:transform .2s} .m-card:hover .m-card-go::after{transform:translate(2px,1px)} @media (max-width:900px){ .m-cards{grid-template-columns:repeat(2,1fr)} .m-card,.m-card.feat{grid-column:span 1} } @media (max-width:560px){ .m-cards{grid-template-columns:1fr} .m-card,.m-card.feat{grid-column:span 1} } /* ═══ GALLERY strip ════════════════════════════════════ */ .m-gallery{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; } .m-gal-item{ position:relative;border-radius:var(--m-r);overflow:hidden; aspect-ratio:4/5;background:var(--m-bg-soft); } .m-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .m-gal-item:hover img{transform:scale(1.04)} .m-gal-cap{ position:absolute;left:0;right:0;bottom:0;padding:26px 24px; background:linear-gradient(180deg,transparent,rgba(0,0,0,0.62)); color:#fff;display:flex;flex-direction:column;gap:8px; } .m-gal-cap .l{font-size:12px;font-weight:600;opacity:0.85;letter-spacing:0.04em;text-transform:uppercase} .m-gal-cap .v{font-size:1.3rem;font-weight:600;letter-spacing:-0.02em;line-height:1.15} @media (max-width:760px){ .m-gallery{grid-template-columns:1fr} .m-gal-item{aspect-ratio:16/10} } /* ═══ INDUSTRIES (clean list grid) ═════════════════════ */ .m-ind{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--m-line);border-left:1px solid var(--m-line); border-radius:var(--m-r);overflow:hidden; } .m-ind-cell{ border-right:1px solid var(--m-line);border-bottom:1px solid var(--m-line); padding:38px 34px;background:var(--m-bg-card);transition:background .25s; } .m-section.soft .m-ind-cell{background:var(--m-bg-card)} .m-ind-cell:hover{background:var(--m-bg-soft)} .m-ind-cell .ic{width:34px;height:34px;margin-bottom:20px} .m-ind-cell .ic svg{width:34px;height:34px;stroke:var(--m-ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .m-ind-cell h4{font-size:1.18rem;font-weight:600;letter-spacing:-0.018em;color:var(--m-ink)} .m-ind-cell p{margin-top:9px;font-size:14px;line-height:1.5;color:var(--m-ink-3)} @media (max-width:820px){.m-ind{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.m-ind{grid-template-columns:1fr}} /* ═══ PRODUCTS list ════════════════════════════════════ */ .m-prod{border-top:1px solid var(--m-line)} .m-prod-row{ display:grid;grid-template-columns:64px 1.4fr 2fr auto; gap:28px;align-items:center; padding:30px 6px;border-bottom:1px solid var(--m-line); transition:padding-left .25s,background .25s; } .m-prod-row:hover{padding-left:18px} .m-prod-row .pn{font-size:13px;color:var(--m-ink-4);font-weight:500;font-variant-numeric:tabular-nums} .m-prod-row .pname{font-size:1.2rem;font-weight:600;letter-spacing:-0.02em;color:var(--m-ink)} .m-prod-row .pname .sub{display:block;font-size:13px;font-weight:400;color:var(--m-ink-4);margin-top:3px;letter-spacing:0} .m-prod-row .pdesc{font-size:14.5px;line-height:1.45;color:var(--m-ink-3)} .m-prod-row .pspec{font-size:14px;font-weight:500;color:var(--m-ink);white-space:nowrap;justify-self:end} .m-prod-row .parr{justify-self:end;color:var(--m-ink-4);transition:transform .2s,color .2s} .m-prod-row:hover .parr{color:var(--m-orange-ink);transform:translateX(3px)} .m-prod-row .parr svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media (max-width:860px){ .m-prod-row{grid-template-columns:1fr auto;gap:6px 16px;align-items:start;padding:26px 4px} .m-prod-row .pn{grid-row:1;font-size:12px} .m-prod-row .pname{grid-column:1;grid-row:2} .m-prod-row .pdesc{grid-column:1;grid-row:3;margin-top:8px} .m-prod-row .pspec{grid-column:2;grid-row:2;align-self:center} .m-prod-row .parr{grid-column:2;grid-row:1} .m-prod-row:hover{padding-left:4px} } /* ═══ DARK MOMENT (manifesto / why) ════════════════════ */ .m-dark-sec{ background:var(--m-dark);color:var(--m-d-ink); padding:clamp(96px,13vw,160px) 0; } .m-manifesto{max-width:900px;margin:0 auto;text-align:center} .m-manifesto .lab{font-size:13px;font-weight:600;color:var(--m-orange-2);margin-bottom:26px;letter-spacing:0.01em} .m-manifesto .q{ font-size:clamp(2rem,5vw,4rem);font-weight:600;line-height:1.1; letter-spacing:-0.028em;color:#fff;max-width:16em;margin:0 auto; } .m-manifesto .q .a{color:var(--m-orange-2)} .m-manifesto .by{margin-top:36px;font-size:15px;color:var(--m-d-ink-2);letter-spacing:-0.01em} /* dark "why huawei" feature block */ .m-why-grid{ display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(48px,7vw,96px);align-items:center; } .m-why-grid .m-h2{color:#fff} .m-why-grid .m-lead{color:var(--m-d-ink-2)} .m-why-list{display:flex;flex-direction:column;gap:0} .m-why-item{ display:flex;gap:20px;align-items:baseline; padding:22px 0;border-top:1px solid var(--m-d-line); } .m-why-item:last-child{border-bottom:1px solid var(--m-d-line)} .m-why-item .n{font-size:13px;color:var(--m-orange-2);font-weight:600;font-variant-numeric:tabular-nums;min-width:26px} .m-why-item .t{font-size:1.02rem;line-height:1.45;color:var(--m-d-ink);letter-spacing:-0.012em} @media (max-width:820px){.m-why-grid{grid-template-columns:1fr;gap:40px}} /* ═══ ABOUT split ══════════════════════════════════════ */ .m-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center} .m-split.rev .m-split-media{order:2} .m-split-media{border-radius:var(--m-r-lg);overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--m-bg-soft)} .m-split-media img{width:100%;height:100%;object-fit:cover} .m-split-cap{ position:absolute;left:20px;right:20px;bottom:20px; background:var(--m-glass);backdrop-filter:blur(16px); border-radius:16px;padding:18px 20px; } .m-split-cap .l{font-size:12px;font-weight:600;color:var(--m-orange-ink);letter-spacing:0.01em} .m-split-cap .t{font-size:14.5px;line-height:1.4;color:var(--m-ink-2);margin-top:6px} .m-split-body .m-lead{margin-top:22px;font-size:clamp(1.05rem,1.5vw,1.22rem)} .m-split-body p{margin-top:18px;font-size:16px;line-height:1.6;color:var(--m-ink-3)} .m-about-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 28px;margin-top:42px} .m-about-stat .v{font-size:2.6rem;font-weight:600;letter-spacing:-0.035em;color:var(--m-ink);line-height:1} .m-about-stat .l{margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--m-ink-3)} @media (max-width:780px){ .m-split{grid-template-columns:1fr;gap:36px} .m-split.rev .m-split-media{order:0} .m-split-media{aspect-ratio:16/12} } /* ═══ PROCESS ══════════════════════════════════════════ */ .m-process{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .m-step{border-top:2px solid var(--m-ink);padding-top:22px} .m-step .n{font-size:13px;font-weight:600;color:var(--m-orange-ink);font-variant-numeric:tabular-nums} .m-step h4{margin-top:14px;font-size:1.22rem;font-weight:600;letter-spacing:-0.02em;color:var(--m-ink)} .m-step p{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--m-ink-3)} @media (max-width:760px){.m-process{grid-template-columns:1fr 1fr;gap:28px 24px}} @media (max-width:440px){.m-process{grid-template-columns:1fr}} /* ═══ TEAM ═════════════════════════════════════════════ */ .m-team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .m-team-card{background:var(--m-bg-soft);border-radius:var(--m-r);padding:34px 30px} .m-team-card .av{ width:62px;height:62px;border-radius:50%;background:var(--m-bg-card);border:1px solid var(--m-line); display:flex;align-items:center;justify-content:center; font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--m-ink);margin-bottom:22px; } .m-team-card h4{font-size:1.24rem;font-weight:600;letter-spacing:-0.02em;color:var(--m-ink)} .m-team-card .role{margin-top:4px;font-size:14px;font-weight:500;color:var(--m-orange-ink)} .m-team-card p{margin-top:14px;font-size:14px;line-height:1.55;color:var(--m-ink-3)} @media (max-width:860px){.m-team{grid-template-columns:1fr}} /* ═══ FINANCE ══════════════════════════════════════════ */ .m-fin-list{display:flex;flex-direction:column;gap:14px;margin-top:34px} .m-fin-card{ display:flex;gap:20px;align-items:flex-start; background:var(--m-bg-card);border:1px solid var(--m-line);border-radius:18px;padding:24px 26px; transition:border-color .25s,transform .25s; } .m-fin-card:hover{border-color:#d6d6da;transform:translateY(-2px)} .m-fin-card .n{font-size:13px;font-weight:600;color:var(--m-orange-ink);font-variant-numeric:tabular-nums;min-width:24px;margin-top:3px} .m-fin-card h4{font-size:1.08rem;font-weight:600;letter-spacing:-0.018em;color:var(--m-ink)} .m-fin-card p{margin-top:7px;font-size:14px;line-height:1.5;color:var(--m-ink-3)} .m-fin-figure{position:relative;border-radius:var(--m-r-lg);overflow:hidden;aspect-ratio:3/4;background:var(--m-bg-soft)} .m-fin-figure img{width:100%;height:100%;object-fit:cover} .m-fin-over{ position:absolute;left:22px;right:22px;bottom:22px; background:var(--m-glass);backdrop-filter:blur(16px);border-radius:16px;padding:20px 22px; } .m-fin-over .l{font-size:12px;font-weight:600;color:var(--m-orange-ink)} .m-fin-over .t{font-size:14.5px;line-height:1.45;color:var(--m-ink-2);margin-top:7px} /* ═══ CTA band ═════════════════════════════════════════ */ .m-cta{background:var(--m-bg-soft);text-align:center;padding:clamp(88px,12vw,150px) 0} .m-cta .m-lead{margin:22px auto 0;max-width:46ch} .m-cta-actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ═══ FOOTER ═══════════════════════════════════════════ */ .m-footer{background:var(--m-bg-card);border-top:1px solid var(--m-line);padding:72px 0 40px} .m-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .m-foot-brand img{height:24px;margin-bottom:18px} .m-foot-brand .t{font-size:16px;font-weight:600;letter-spacing:-0.02em;color:var(--m-ink);line-height:1.3} .m-foot-brand p{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--m-ink-3);max-width:32ch} .m-foot-col h5{font-size:13px;font-weight:600;color:var(--m-ink);margin-bottom:16px;letter-spacing:-0.01em} .m-foot-col ul{list-style:none} .m-foot-col li{margin-bottom:11px} .m-foot-col a{font-size:13.5px;color:var(--m-ink-3);transition:color .2s} .m-foot-col a:hover{color:var(--m-ink)} .m-foot-bottom{ margin-top:56px;padding-top:26px;border-top:1px solid var(--m-line); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:12.5px;color:var(--m-ink-4); } .m-foot-bottom a{color:var(--m-ink-4)} .m-foot-bottom a:hover{color:var(--m-ink-2)} @media (max-width:820px){ .m-foot-top{grid-template-columns:1fr 1fr;gap:36px 28px} .m-foot-brand{grid-column:1/-1} } /* ═══ CONTACT ══════════════════════════════════════════ */ .m-contact{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,80px);align-items:start} .m-contact-info ul{list-style:none;margin-top:34px;display:flex;flex-direction:column;gap:22px} .m-contact-info li{display:flex;gap:16px;align-items:flex-start} .m-contact-info .ic{ width:40px;height:40px;border-radius:11px;background:var(--m-bg-soft); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .m-contact-info .ic svg{width:19px;height:19px;stroke:var(--m-orange);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .m-contact-info .lbl{font-size:12.5px;font-weight:500;color:var(--m-ink-4)} .m-contact-info .val{font-size:15.5px;color:var(--m-ink);margin-top:2px;display:block} .m-form{background:var(--m-bg-soft);border-radius:var(--m-r-lg);padding:clamp(28px,4vw,44px)} .m-form-head{font-size:1.3rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:24px;color:var(--m-ink)} .m-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .m-field{margin-bottom:16px} .m-field label{display:block;font-size:13px;font-weight:500;color:var(--m-ink-2);margin-bottom:7px} .m-field input,.m-field select,.m-field textarea{ width:100%;background:var(--m-input-bg);border:1px solid var(--m-line);border-radius:12px; padding:13px 15px;font-size:15px;color:var(--m-ink);transition:border-color .2s,box-shadow .2s; } .m-field input::placeholder,.m-field textarea::placeholder{color:var(--m-ink-4)} .m-field input:focus,.m-field select:focus,.m-field textarea:focus{ outline:none;border-color:var(--m-orange);box-shadow:0 0 0 3px rgba(246,97,26,0.15); } .m-field textarea{min-height:120px;resize:vertical} .m-form-submit{ width:100%;background:var(--m-orange);color:#fff;font-weight:500;font-size:15px; padding:15px;border-radius:980px;display:inline-flex;align-items:center;justify-content:center;gap:8px; transition:background .2s; } .m-form-submit:hover{background:var(--m-orange-ink)} .m-form-submit svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media (max-width:820px){ .m-contact{grid-template-columns:1fr;gap:44px} } @media (max-width:480px){ .m-form-row{grid-template-columns:1fr} } /* partners / logos strip */ .m-logos{padding:46px 0;border-top:1px solid var(--m-line);border-bottom:1px solid var(--m-line)} .m-logos .lab{text-align:center;font-size:12.5px;font-weight:500;color:var(--m-ink-4);margin-bottom:24px;letter-spacing:0.02em} .m-logos-row{ display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center; max-width:900px;margin:0 auto; } .m-logos-row span{font-size:16px;font-weight:500;color:var(--m-ink-3);letter-spacing:-0.01em} .m-logos-row span em{font-style:normal;color:var(--m-ink-4);font-weight:400} /* ═══════════════════════════════════════════════════════ INTERNAL PAGES (Soluciones · Tecnología · Productos · Contacto) ═══════════════════════════════════════════════════════ */ /* page hero */ .m-page-hero{padding:128px 0 clamp(44px,6vw,72px);border-bottom:1px solid var(--m-line)} .m-crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--m-ink-4);margin-bottom:26px} .m-crumbs a{color:var(--m-ink-3)} .m-crumbs a:hover{color:var(--m-ink)} .m-crumbs .sep{opacity:0.5} .m-page-hero .m-h1{max-width:15ch} .m-page-hero .m-lead{margin-top:22px;max-width:60ch} /* solution / tech detail blocks */ .m-detail{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(40px,6vw,88px);align-items:start} .m-detail-side{position:sticky;top:84px} .m-detail-side .m-h2{max-width:14ch;margin-top:4px} .m-detail-side p{margin-top:18px;font-size:16px;line-height:1.6;color:var(--m-ink-3);max-width:40ch} .m-detail-side .m-btn{margin-top:26px} .m-detail-list{display:flex;flex-direction:column} .m-ditem{display:grid;grid-template-columns:auto 1fr auto;gap:22px;padding:30px 0;border-top:1px solid var(--m-line)} .m-ditem:first-child{border-top:none;padding-top:4px} .m-ditem .ic{width:48px;height:48px;border-radius:13px;background:var(--m-bg-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0} .m-section.soft .m-ditem .ic{background:var(--m-bg-card)} .m-ditem .ic svg{width:23px;height:23px;stroke:var(--m-orange);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .m-ditem h4{font-size:1.18rem;font-weight:600;letter-spacing:-0.018em;color:var(--m-ink)} .m-ditem p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--m-ink-3)} .m-ditem .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .m-chip{font-size:12px;color:var(--m-ink-2);background:var(--m-bg-soft);border:1px solid var(--m-line);border-radius:999px;padding:5px 11px;letter-spacing:-0.003em} .m-section.soft .m-chip{background:var(--m-bg-card)} .m-ditem .meta{font-size:12px;color:var(--m-ink-4);font-variant-numeric:tabular-nums;font-weight:500} @media(max-width:860px){ .m-detail{grid-template-columns:1fr;gap:40px} .m-detail-side{position:static} .m-ditem{grid-template-columns:auto 1fr} .m-ditem .meta{display:none} } /* product cards */ .m-pcard{ display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(32px,5vw,64px);align-items:center; background:var(--m-bg-card);border:1px solid var(--m-line);border-radius:var(--m-r-lg); padding:clamp(28px,4vw,48px);scroll-margin-top:80px;transition:border-color .25s; } .m-pcard:hover{border-color:var(--m-card-bd-hover)} .m-pcard + .m-pcard{margin-top:24px} .m-pcard .pmodel{font-size:12.5px;font-weight:600;color:var(--m-orange-ink);letter-spacing:0.01em;margin-bottom:14px} .m-pcard h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-0.022em;color:var(--m-ink);margin-bottom:14px} .m-pcard h3 .accent{color:var(--m-orange)} .m-pcard .desc{font-size:15px;line-height:1.6;color:var(--m-ink-3);margin-bottom:26px} .m-pspecs{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;border-top:1px solid var(--m-line);padding-top:24px} .m-pspec .l{font-size:12px;color:var(--m-ink-4);font-weight:500} .m-pspec .v{font-size:1.05rem;font-weight:600;letter-spacing:-0.015em;color:var(--m-ink);margin-top:4px} .m-pvisual{ aspect-ratio:1/1;border-radius:var(--m-r);overflow:hidden;position:relative; background:radial-gradient(120% 120% at 50% 18%, var(--m-bg-card), var(--m-bg-soft)); border:1px solid var(--m-line); display:flex;align-items:center;justify-content:center; } .m-pvisual .glyph svg{width:104px;height:104px;stroke:var(--m-orange);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round} .m-pvisual .plabel{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:11px;font-weight:500;color:var(--m-ink-4);letter-spacing:0.06em} @media(max-width:760px){ .m-pcard{grid-template-columns:1fr;gap:28px} .m-pvisual{order:-1;max-width:280px} } /* contact info column */ .m-info-block{border-top:1px solid var(--m-line);padding-top:22px;margin-top:22px} .m-info-block .lbl{font-size:12.5px;font-weight:600;color:var(--m-orange-ink);margin-bottom:8px} .m-info-block .v{font-size:1.18rem;font-weight:600;letter-spacing:-0.018em;color:var(--m-ink);line-height:1.35} .m-info-block .v a{color:inherit} .m-info-block .v a:hover{color:var(--m-orange-ink)} .m-info-block .sub{font-size:13.5px;color:var(--m-ink-3);margin-top:8px} .m-hours{display:grid;grid-template-columns:auto 1fr;gap:11px 28px;margin-top:14px} .m-hours .day{font-size:13px;color:var(--m-ink-4);font-weight:500} .m-hours .hr{font-size:14px;color:var(--m-ink);font-weight:500} .m-map{margin-top:28px;border-radius:var(--m-r);overflow:hidden;border:1px solid var(--m-line);aspect-ratio:16/11;background:var(--m-bg-soft)} .m-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(0.2)} :root[data-theme="dark"] .m-map iframe{filter:grayscale(0.3) invert(0.9) hue-rotate(180deg)}