/* ========================================================================== SAVTIA — hoja de estilos del sitio Hero a sangre con la misma ciudad de dia y de noche, modo dia/noche, luz que sigue al puntero, barra de progreso de lectura, contadores, parallax y apariciones al hacer scroll. Todo el movimiento se apaga con prefers-reduced-motion. El modo por defecto lo decide la hora local del visitante (dia de 08:00 a 19:59), desde el script del ; si el visitante usa el interruptor, su eleccion queda guardada y manda ella. ========================================================================== */ /* -------------------------------------------------------------------------- TOKENS — el modo dia es el estado base -------------------------------------------------------------------------- */ :root { color-scheme: light; --bg:#F7F4EF; --surf:#FFFFFF; --surf-2:#EFEAE1; --line:rgba(20,33,61,.14); --line-2:rgba(20,33,61,.28); --text:#14213D; /* 14.6:1 sobre el fondo */ --muted:#55627A; /* 5.6:1 */ --acc:#C2410C; /* 4.7:1 · blanco encima 5.2:1 */ --acc-2:#1D4ED8; --on-acc:#FFFFFF; --topo-filter:brightness(.42) saturate(1.2); --topo-opacity:.34; --scrim-1:26%; --scrim-2:52%; /* Acentos de submarca */ --web:#1D4ED8; --web-soft:#EAF0FE; --apps:#6D28D9; --apps-soft:#F2EDFE; --track:#047857; --track-soft:#E6F5EF; --agenda:#C2410C; --agenda-soft:#FDEEE4; --security:#0E7490; --security-soft:#E4F3F7; --extra:#55627A; --extra-soft:#EFEAE1; --display:"Space Grotesk", system-ui, sans-serif; --body:"Inter", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace; --container:1180px; --r:12px; --r-sm:8px; --r-pill:999px; --ease:cubic-bezier(.16,1,.3,1); } /* Modo noche por preferencia del sistema */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg:#0A0F1E; --surf:#121A2C; --surf-2:#18213A; --line:rgba(245,166,106,.20); --line-2:rgba(245,166,106,.42); --text:#F2EFEA; /* 16.7:1 */ --muted:#B0A99F; /* 8.2:1 */ --acc:#F5A66A; /* 9.6:1 */ --acc-2:#8FB8FF; --on-acc:#120A04; --topo-filter:none; --topo-opacity:.55; --scrim-1:42%; --scrim-2:62%; --web:#60A5FA; --web-soft:rgba(96,165,250,.13); --apps:#A78BFA; --apps-soft:rgba(167,139,250,.13); --track:#34D399; --track-soft:rgba(52,211,153,.13); --agenda:#FB923C; --agenda-soft:rgba(251,146,60,.13); --security:#22D3EE; --security-soft:rgba(34,211,238,.13); --extra:#B0A99F; --extra-soft:rgba(255,255,255,.06); } } /* El interruptor manual gana en ambas direcciones */ :root[data-theme="dark"] { color-scheme: dark; --bg:#0A0F1E; --surf:#121A2C; --surf-2:#18213A; --line:rgba(245,166,106,.20); --line-2:rgba(245,166,106,.42); --text:#F2EFEA; --muted:#B0A99F; --acc:#F5A66A; --acc-2:#8FB8FF; --on-acc:#120A04; --topo-filter:none; --topo-opacity:.55; --scrim-1:42%; --scrim-2:62%; --web:#60A5FA; --web-soft:rgba(96,165,250,.13); --apps:#A78BFA; --apps-soft:rgba(167,139,250,.13); --track:#34D399; --track-soft:rgba(52,211,153,.13); --agenda:#FB923C; --agenda-soft:rgba(251,146,60,.13); --security:#22D3EE; --security-soft:rgba(34,211,238,.13); --extra:#B0A99F; --extra-soft:rgba(255,255,255,.06); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img, svg { display:block; max-width:100%; } p { margin:0 0 16px; } a { color:var(--acc-2); } h1, h2, h3 { font-family:var(--display); font-weight:700; line-height:1.06; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance; } :where(a, button, input, select, textarea) { touch-action:manipulation; } :where(a, button, input, textarea, select, summary):focus-visible { outline:2px solid var(--acc-2); outline-offset:3px; border-radius:var(--r-sm); } /* -------------------------------------------------------------------------- Fondo general: lineas topograficas + luz que sigue al puntero -------------------------------------------------------------------------- */ .bg { position:fixed; inset:-10%; z-index:0; pointer-events:none; } .bg__art { position:absolute; inset:0; background:url("assets/bg-topo.svg?v=20260901") repeat; background-size:900px 600px; opacity:var(--topo-opacity); filter:var(--topo-filter); will-change:transform; } .bg__light { position:absolute; inset:0; z-index:1; background:radial-gradient(24rem 24rem at calc(var(--mx,.5) * 100%) calc(var(--my,.35) * 100%), color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%); } /* Barra de progreso de lectura */ .progress-track { position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:color-mix(in srgb, var(--text) 10%, transparent); } .progress-bar { height:100%; width:0; background:linear-gradient(90deg, var(--acc), var(--acc-2)); } /* Aparicion al hacer scroll */ .js-motion [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .js-motion [data-reveal][data-revealed] { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .bg__light { display:none; } .js-motion [data-reveal] { opacity:1; transform:none; transition:none; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } .container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; position:relative; z-index:1; } @media (min-width:768px){ .container{ padding-inline:32px; } } section[id] { scroll-margin-top:84px; } .section { padding-block:88px; position:relative; z-index:1; border-top:1px dashed var(--line); } @media (min-width:768px){ .section{ padding-block:116px; } } .skip-link { position:absolute; left:20px; top:-100px; z-index:300; background:var(--acc); color:var(--on-acc); padding:12px 18px; border-radius:var(--r-sm); font-weight:700; text-decoration:none; } .skip-link:focus { top:16px; } .label { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; } .label b { color:var(--acc); font-weight:500; } .title { font-size:34px; } @media (min-width:768px){ .title{ font-size:48px; } } .title em { font-style:normal; color:var(--acc); } .lead { color:var(--muted); max-width:62ch; font-size:18px; } /* Botones */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:13px 24px; border:1px solid var(--line-2); border-radius:var(--r-sm); font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.04em; text-decoration:none; cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn--primary { background:var(--acc); color:var(--on-acc); border-color:var(--acc); } .btn--primary:hover { background:color-mix(in srgb, var(--acc) 82%, var(--text)); border-color:transparent; } .btn--ghost { background:transparent; color:var(--text); } .btn--ghost:hover { background:color-mix(in srgb, var(--acc) 14%, transparent); } .btn[disabled] { opacity:.5; cursor:not-allowed; } /* -------------------------------------------------------------------------- Cabecera -------------------------------------------------------------------------- */ .header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .header__inner { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:66px; } .brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); } .brand svg { width:32px; height:32px; flex:none; } .brand span { font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.06em; } .brand .tia { color:var(--acc); font-weight:500; } .nav { display:none; gap:24px; } .nav a { color:var(--muted); text-decoration:none; font-family:var(--mono); font-size:13px; letter-spacing:.06em; } .nav a:hover { color:var(--text); } @media (min-width:1000px){ .nav{ display:flex; } } .header__actions { display:flex; align-items:center; gap:10px; } .header .btn { min-height:40px; padding:9px 16px; font-size:13px; } .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border:1px solid var(--line-2); border-radius:var(--r-sm); background:transparent; color:var(--text); cursor:pointer; transition:background-color .2s var(--ease); } .icon-btn:hover { background:color-mix(in srgb, var(--acc) 14%, transparent); } .icon-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* -------------------------------------------------------------------------- Hero con la ciudad -------------------------------------------------------------------------- */ .hero { padding-block:80px 88px; position:relative; overflow:hidden; } @media (min-width:768px){ .hero{ padding-block:120px 124px; } } .hero__art { position:absolute; inset:0; z-index:0; overflow:hidden; } .hero__art img { width:100%; height:100%; object-fit:cover; animation:kenburns 38s ease-in-out infinite alternate; will-change:transform; } .hero__art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--bg) var(--scrim-1), transparent) 0%, color-mix(in srgb, var(--bg) var(--scrim-2), transparent) 45%, var(--bg) 100%); } @keyframes kenburns { from { transform:scale(1.04) translate3d(0,0,0); } to { transform:scale(1.16) translate3d(-2%,-2%,0); } } @media (prefers-reduced-motion: reduce) { .hero__art img { animation:none; } } /* La ciudad que se muestra depende del modo activo */ .art--noche { display:none; } .art--dia { display:block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .art--noche { display:block; } :root:not([data-theme="light"]) .art--dia { display:none; } } :root[data-theme="dark"] .art--noche { display:block; } :root[data-theme="dark"] .art--dia { display:none; } :root[data-theme="light"] .art--noche { display:none; } :root[data-theme="light"] .art--dia { display:block; } .hero h1 { font-size:40px; } @media (min-width:768px){ .hero h1{ font-size:62px; } } .hero h1 em { font-style:normal; color:var(--acc); display:block; } .hero__lead { color:var(--muted); font-size:18px; max-width:52ch; margin-bottom:28px; } .hero__actions { display:flex; flex-wrap:wrap; gap:12px; } /* Cifras */ .stats { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:64px; padding-top:28px; border-top:1px dashed var(--line-2); } @media (min-width:768px){ .stats{ grid-template-columns:repeat(4,1fr); } } .stat strong { display:block; font-family:var(--display); font-weight:700; font-size:38px; line-height:1; color:var(--acc); font-variant-numeric:tabular-nums; } .stat span { color:var(--muted); font-size:14px; } /* -------------------------------------------------------------------------- Servicios: una tarjeta por submarca, cada una con su acento y su icono -------------------------------------------------------------------------- */ .cards { display:grid; gap:18px; margin-top:48px; grid-template-columns:1fr; } @media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .cards{ grid-template-columns:repeat(3,1fr); } } .card { background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column; gap:12px; transition:transform .25s var(--ease), border-color .25s var(--ease); } .card:hover { transform:translateY(-4px); border-color:var(--accent, var(--line-2)); } .card__icon { width:50px; height:50px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft, var(--surf-2)); color:var(--accent, var(--acc)); } .card__icon svg { width:24px; height:24px; } .card__title { font-size:20px; margin:0; } .card__title span { color:var(--accent, var(--acc)); } .card p { color:var(--muted); font-size:15px; margin:0; } .card__list { margin:0; padding-left:20px; color:var(--muted); font-size:14px; } .card__list li { margin-bottom:4px; } .badge { align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent, var(--acc)); background:var(--accent-soft, var(--surf-2)); padding:4px 10px; border-radius:var(--r-pill); } .card--web { --accent:var(--web); --accent-soft:var(--web-soft); } .card--apps { --accent:var(--apps); --accent-soft:var(--apps-soft); } .card--track { --accent:var(--track); --accent-soft:var(--track-soft); } .card--agenda { --accent:var(--agenda); --accent-soft:var(--agenda-soft); } .card--security { --accent:var(--security); --accent-soft:var(--security-soft); } .card--extra { --accent:var(--extra); --accent-soft:var(--extra-soft); } /* Proceso */ .steps { display:grid; gap:26px; margin-top:48px; } @media (min-width:768px){ .steps{ grid-template-columns:repeat(4,1fr); gap:20px; } } .step { border-top:2px solid var(--acc); padding-top:16px; } .step__n { font-family:var(--mono); font-size:12px; color:var(--acc); } .step h3 { font-size:17px; margin:6px 0 8px; } .step p { color:var(--muted); font-size:15px; margin:0; } /* Proyectos */ .cases { display:grid; gap:16px; margin-top:48px; } @media (min-width:768px){ .cases{ grid-template-columns:repeat(3,1fr); } } .case { border:1px solid var(--line); background:var(--surf); border-radius:var(--r); padding:24px 22px; } .case__meta { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); margin-bottom:10px; } .case h3 { font-size:18px; margin-bottom:8px; } .case p { color:var(--muted); font-size:15px; margin:0; } .note { margin-top:30px; padding-left:16px; border-left:1px dashed var(--line-2); color:var(--muted); font-size:15px; } /* Contacto */ .contact { display:grid; gap:44px; margin-top:48px; } @media (min-width:960px){ .contact{ grid-template-columns:.85fr 1.15fr; gap:60px; } } .direct { list-style:none; margin:26px 0 0; padding:0; } .direct li { border-bottom:1px dashed var(--line); } .direct a { display:flex; align-items:center; gap:14px; min-height:56px; text-decoration:none; color:var(--text); font-weight:600; } .direct a:hover { color:var(--acc); } .direct svg { width:20px; height:20px; color:var(--acc); flex:none; } .direct small { display:block; font-family:var(--mono); font-weight:400; font-size:12px; color:var(--muted); } .form { display:grid; gap:18px; border:1px solid var(--line); background:var(--surf); border-radius:var(--r); padding:26px 22px; } @media (min-width:768px){ .form{ padding:32px 28px; } } .field { display:grid; gap:8px; } .field label { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .field .req { color:var(--acc); } .field input, .field select, .field textarea { width:100%; min-height:46px; padding:12px 14px; font-family:var(--body); font-size:16px; color:var(--text); background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm); } .field textarea { min-height:130px; resize:vertical; } .hint { font-size:13px; color:var(--muted); margin:0; } .error { font-size:13px; color:#B3261E; font-weight:600; margin:0; display:none; } :root[data-theme="dark"] .error { color:#FCA5A5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .error { color:#FCA5A5; } } .field[data-invalid="true"] .error { display:block; } .field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color:currentColor; } .form__status { display:none; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:14px; font-weight:600; } .form__status[data-state="error"] { display:block; color:#B3261E; } :root[data-theme="dark"] .form__status[data-state="error"] { color:#FCA5A5; } .form__status[data-state="ok"] { display:block; color:var(--track); } /* Pie */ .footer { border-top:1px solid var(--line); padding-block:44px; color:var(--muted); font-size:14px; position:relative; z-index:1; } .footer__inner { display:flex; flex-direction:column; gap:24px; } @media (min-width:768px){ .footer__inner{ flex-direction:row; justify-content:space-between; } } .footer strong { color:var(--text); } .footer ul { list-style:none; margin:0; padding:0; } .footer li { margin-bottom:8px; font-family:var(--mono); font-size:13px; } .footer a { color:var(--muted); text-decoration:none; } .footer a:hover { color:var(--acc); }