/* ========================================================================== EdicBravos — landing skeleton v2 Tokens live as CSS custom properties so the skeleton is reusable: swap :root values (config.js does this at runtime) per client. ========================================================================== */ @font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} :root{ color-scheme: light; /* neutral surfaces — these flip between light/dark themes */ --bg:#FAFAF9; --surface:#F1F2EF; --ink:#0B0D12; --ink-soft:#54585F; --line:#E4E5E2; /* brand accent — WCAG-checked against both themes */ --accent:#16C172; --accent-ink:#083A22; --eyebrow-ink:#083A22; --accent-on-dark:#3DDC8A; /* lighter green for text/borders on dark surfaces */ --mesh-1:#16C172; --mesh-2:#2F6FED; --mesh-3:#7C5CFF; /* fixed dark panel — used by .section-dark blocks; constant across themes in LIGHT mode */ --panel:#181B20; --panel-ink:#F4F5F2; --panel-line:#33373A; --panel-card:#20242A; --panel-card-2:#111318; --panel-soft:#9A9F92; --panel-label:#C6C9C0; --panel-ink-soft:#A9ADA2; --danger:#E0533D; --font-display:"Manrope",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; --container:1160px; --radius:16px; --radius-sm:8px; } /* ---- DARK THEME: user toggles data-theme="dark" on ---- */ :root[data-theme="dark"]{ color-scheme: dark; --bg:#0F1115; --surface:#191C22; --ink:#F4F5F2; --ink-soft:#AFB3BB; --line:#2A2E35; --accent:#16C172; --accent-ink:#052E1B; --eyebrow-ink:#16C172; --accent-on-dark:#3DDC8A; /* in dark mode the "dark panel" sections blend one shade deeper than the page so they still read as distinct bands, and their inner cards lift above them */ --panel:#080A0D; --panel-ink:#F4F5F2; --panel-line:#242830; --panel-card:#161A20; --panel-card-2:#0F1216; --panel-soft:#9DA2A9; --panel-label:#C6C9CE; --panel-ink-soft:#AFB3BB; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* ---- Accessibility: visible keyboard focus (WCAG 2.4.7) ---- */ :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px} :root[data-theme="dark"] :focus-visible{outline-color:var(--accent-on-dark)} .section-dark :focus-visible{outline-color:var(--accent-on-dark)} /* skip-to-content link, visible only when focused (WCAG 2.4.1) */ .skip-link{ position:absolute;left:12px;top:-60px;z-index:100; background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:8px; font-weight:700;font-size:14px;transition:top .15s; } .skip-link:focus{top:12px} /* screen-reader-only text */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-display);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased;overflow-x:hidden; -webkit-text-size-adjust:100%;text-size-adjust:100%; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;background:none;border:none} ul{margin:0;padding:0;list-style:none} .wrap{max-width:var(--container);margin:0 auto;padding:0 24px} .eyebrow{ font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--eyebrow-ink);display:inline-flex;align-items:center;gap:8px; } .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent)} .section-dark .eyebrow{color:var(--accent)} h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;margin:0} h1{font-size:clamp(3rem,7.4vw,6.4rem);line-height:.98} h2{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.04} h3{font-size:1.15rem;font-weight:700} p{margin:0} .lede{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ink-soft);max-width:46ch;line-height:1.55} .section-dark .lede{color:var(--panel-ink-soft, #a9ada2)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 26px;border-radius:100px;font-weight:700;font-size:15px; border:1.5px solid transparent;transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease; white-space:nowrap; } .btn:active{transform:scale(.96)} .btn-primary{background:var(--ink);color:var(--bg)} .btn-primary:hover{background:#22252c;box-shadow:0 10px 30px -10px rgba(11,13,18,.4)} .btn-accent{background:var(--accent);color:var(--accent-ink)} .btn-accent:hover{filter:brightness(1.06);box-shadow:0 10px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink)} .section-dark .btn-ghost{color:var(--panel-ink);border-color:var(--panel-line)} .section-dark .btn-ghost:hover{border-color:var(--panel-ink)} .btn-on-dark{background:var(--panel-ink);color:var(--panel)} .btn-on-dark:hover{background:#fff} .section{padding:120px 0;position:relative} .section-dark{background:var(--panel);color:var(--panel-ink)} .section-head{max-width:640px;margin:0 0 56px;display:flex;flex-direction:column;gap:18px} .section-head h2{white-space:pre-line} @media (max-width:640px){.section{padding:76px 0}} /* ---------- icon buttons (social) ---------- */ .icon-btn{ width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);color:var(--ink-soft);transition:border-color .15s, color .15s, transform .15s; } .icon-btn:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)} .icon-btn svg{width:16px;height:16px} .section-dark .icon-btn{border-color:var(--panel-line);color:var(--panel-ink-soft, #a9ada2)} .section-dark .icon-btn:hover{border-color:var(--panel-ink);color:var(--panel-ink)} .social-row{display:flex;gap:14px} /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:60; border-bottom:1px solid transparent; transition:border-color .25s; } /* backdrop-filter lives on this pseudo-element rather than on .nav itself: backdrop-filter/filter/transform on an element creates a new containing block for any position:fixed descendants — which was trapping the mobile menu (#nav-links, fixed) inside the header's own ~72px box instead of the viewport. Pseudo-elements aren't ancestors, so this sidesteps that. */ .nav::before{ content:"";position:absolute;inset:0;z-index:-1; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .nav.is-scrolled{border-bottom-color:var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;transition:height .25s} .nav.is-scrolled .wrap{height:64px} .brand{font-weight:800;font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px} .brand-logo{width:30px;height:30px;border-radius:8px;display:block;flex-shrink:0} .brand .dim{color:var(--ink-soft);font-weight:600} .brand .dot{color:var(--accent)} .nav-links{display:block} .nav-links-list{display:flex;align-items:center;gap:32px} .nav-links-extra{display:none} .nav-links a{font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:color .15s} .nav-links a:hover{color:var(--ink)} .nav-actions{display:flex;align-items:center;gap:12px} /* theme toggle + language switch */ .nav-control{ width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);color:var(--ink-soft); transition:border-color .15s, color .15s, transform .15s, background .15s; } .nav-control:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)} .nav-control svg{width:17px;height:17px} .nav-control .icon-sun{display:none} :root[data-theme="dark"] .nav-control .icon-moon{display:none} :root[data-theme="dark"] .nav-control .icon-sun{display:block} .lang-switch{ height:38px;padding:0 12px;border-radius:100px;display:inline-flex;align-items:center;gap:6px; border:1px solid var(--line);color:var(--ink-soft);font-family:var(--font-mono);font-size:12px;font-weight:600; transition:border-color .15s, color .15s, transform .15s; } .lang-switch:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)} .lang-switch .lang-current{color:var(--ink);font-weight:700} .nav-toggle{display:none;padding:8px} .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.2s} body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .nav-toggle span:nth-child(2){opacity:0} body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:860px){ .nav-links{position:fixed;inset:64px 0 0 0;background:var(--bg);pointer-events:none;opacity:0;transform:translateY(-8px);transition:.2s;overflow-y:auto} .nav-links.open{opacity:1;transform:translateY(0);pointer-events:auto} .nav-links-list{flex-direction:column;justify-content:flex-start;padding:36px 24px 12px;gap:24px} .nav-links-list a{font-size:1.2rem} .nav-links-extra{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px; padding:24px 24px 36px;margin-top:8px;border-top:1px solid var(--line); } .nav-links-extra .btn-ghost{width:100%;order:10} .nav-toggle{display:block} /* keep only the hamburger in the fixed bar — everything else lives in .nav-links-extra */ .nav-actions > *:not(.nav-toggle){display:none} } /* ---------- hero ---------- */ .hero{ min-height:100dvh;display:flex;align-items:center;position:relative; background:var(--panel);color:var(--panel-ink);overflow:hidden; padding:120px 0 60px; } .aurora{position:absolute;inset:0;z-index:0;overflow:hidden} .aurora span{ position:absolute;border-radius:50%;filter:blur(90px);opacity:.38; will-change:transform; } .aurora .b1{width:52vw;height:52vw;left:-14vw;top:-16vw;background:var(--mesh-1);animation:drift1 22s ease-in-out infinite alternate} .aurora .b2{width:44vw;height:44vw;right:-12vw;top:6vw;background:var(--mesh-2);animation:drift2 26s ease-in-out infinite alternate} .aurora .b3{width:38vw;height:38vw;left:22vw;bottom:-18vw;background:var(--mesh-3);animation:drift3 19s ease-in-out infinite alternate} .aurora::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg, var(--panel) 0%, var(--panel) 38%, transparent 68%), radial-gradient(ellipse at 72% 35%, transparent 0%, var(--panel) 70%) } @keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,4vw) scale(1.08)}} @keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-5vw,6vw) scale(.94)}} @keyframes drift3{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,-5vw) scale(1.1)}} .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .hero-copy{display:flex;flex-direction:column;gap:24px} .hero-copy h1{display:flex;flex-direction:column} .hero-copy h1 .line{display:block;overflow:hidden} .js .hero-copy h1 .line span{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1)} .hero-copy h1 .line:nth-child(2) span{color:var(--accent)} .hero.is-ready .hero-copy h1 .line:nth-child(1) span{transition-delay:.15s;transform:translateY(0)} .hero.is-ready .hero-copy h1 .line:nth-child(2) span{transition-delay:.3s;transform:translateY(0)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px} .hero-proof{display:flex;gap:32px;margin-top:10px;flex-wrap:wrap} .hero-proof div{display:flex;flex-direction:column;gap:2px} .hero-proof strong{font-size:1.5rem;font-weight:800} .hero-proof span{font-family:var(--font-mono);font-size:11px;color:var(--panel-label);text-transform:uppercase;letter-spacing:.05em} @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;gap:44px} .hero{padding:110px 0 50px} } .scroll-cue{ position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:1; display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--panel-label); font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; animation:bob 2.2s ease-in-out infinite; } .scroll-cue svg{width:14px;height:14px} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}} @media (max-width:640px){.scroll-cue{display:none}} /* signature element: floating audit terminal */ .audit-float{animation:float 6.5s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .audit{ background:var(--panel-card-2);color:var(--panel-ink); border-radius:var(--radius);border:1px solid var(--panel-line); overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02); transform-style:preserve-3d;transition:transform .25s ease-out; } .audit-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--panel-line)} .audit-bar span{width:10px;height:10px;border-radius:50%;background:var(--panel-line)} .audit-url{margin-left:10px;font-family:var(--font-mono);font-size:12px;color:var(--panel-label);background:var(--panel-card-2);border:1px solid var(--panel-line);padding:5px 12px;border-radius:6px} .audit-body{padding:24px 24px 28px;font-family:var(--font-mono);font-size:13.5px} .audit-cmd{color:#8ea88f;margin-bottom:18px} .audit-cmd .caret{color:var(--accent)} .audit-cmd .type-caret{display:inline-block;width:7px;height:15px;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite} @keyframes blink{50%{opacity:0}} .audit-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--panel-line);opacity:0;transform:translateX(-8px);transition:opacity .4s ease, transform .4s ease} .audit-row.is-in{opacity:1;transform:none} .audit-row:last-of-type{border-bottom:none} .audit-label{color:var(--panel-label)} .audit-val{display:flex;align-items:center;gap:10px;font-weight:600} .audit-score{color:var(--accent);min-width:2.6ch;text-align:right} .audit-check{color:var(--accent)} .audit-time{margin-top:18px;padding-top:18px;border-top:1px solid var(--panel-line);display:flex;justify-content:space-between;color:var(--panel-soft)} .audit-time strong{color:var(--panel-ink);font-size:1.1rem} /* ---------- marquee ---------- */ .marquee-wrap{ border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line); background:var(--panel);overflow:hidden;padding:16px 0; } .marquee-track{display:flex;width:max-content;gap:0;animation:scroll-x 32s linear infinite} .marquee-wrap:hover .marquee-track{animation-play-state:paused} .marquee-track span{ font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;color:var(--panel-soft); padding:0 28px;white-space:nowrap;display:flex;align-items:center;gap:28px; } .marquee-track span::after{content:"◆";color:var(--accent);font-size:8px} @keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- stat / comparativa (dark) ---------- */ .stat-section{text-align:center} .stat-section .section-head{margin:0 auto 8px;max-width:720px;align-items:center;text-align:center} .stat-mega{ font-family:var(--font-display);font-weight:800;letter-spacing:-.03em; font-size:clamp(4.5rem,15vw,11rem);line-height:.9;margin:24px 0 4px; background:linear-gradient(135deg, var(--panel-ink) 20%, var(--accent) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .stat-caption{font-family:var(--font-mono);font-size:13px;color:var(--panel-soft);max-width:36ch;margin:0 auto 64px} .compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;max-width:920px;margin:0 auto} @media (max-width:760px){.compare{grid-template-columns:1fr}} .compare-card{background:var(--panel-card);border:1px solid var(--panel-line);border-radius:var(--radius);padding:28px} .compare-card.is-fast{border-color:color-mix(in srgb, var(--accent) 40%, var(--panel-line))} .compare-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px} .compare-top h3{font-size:1.05rem;color:var(--panel-ink)} .compare-time{font-family:var(--font-mono);font-weight:700;color:var(--panel-soft)} .compare-card.is-fast .compare-time{color:var(--accent)} .track{height:10px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:16px} .fill{height:100%;border-radius:100px;background:var(--danger);width:0%;transition:width 1.2s cubic-bezier(.2,.8,.2,1)} .compare-card.is-fast .fill{background:var(--accent)} .compare-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;color:var(--panel-soft)} .compare-note{margin-top:28px;font-size:13px;color:var(--panel-soft);font-family:var(--font-mono);text-align:center} /* ---------- servicios (bento) ---------- */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(180px,auto);gap:18px} .bento .card.is-big{grid-column:span 2;grid-row:span 2} @media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.bento .card.is-big{grid-column:span 2;grid-row:span 1}} @media (max-width:560px){.bento{grid-template-columns:1fr}.bento .card.is-big{grid-column:span 1}} .card{ background:var(--bg);border:1px solid var(--line);border-radius:var(--radius); padding:28px 24px;display:flex;flex-direction:column;gap:16px; transition:border-color .2s, transform .2s, box-shadow .2s; position:relative;overflow:hidden; } .card:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(11,13,18,.2)} .card.is-big{justify-content:flex-end} .card.is-big h3{font-size:1.5rem} .card-icon{width:38px;height:38px;color:var(--eyebrow-ink);opacity:.9} .card-icon svg{width:100%;height:100%} .tag{ align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em; padding:5px 10px;border-radius:6px;background:var(--surface);color:var(--ink-soft); } .card p{color:var(--ink-soft);font-size:14.5px;line-height:1.5} .card-link{margin-top:auto;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px} .card-link .arrow{transition:transform .15s} .card:hover .card-link .arrow{transform:translateX(3px)} /* ---------- proceso (timeline) ---------- */ .timeline{display:flex;flex-direction:column;max-width:760px} .tl-step{display:flex;gap:24px;position:relative} .tl-marker{display:flex;flex-direction:column;align-items:center} .tl-dot{ width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-soft); flex-shrink:0;transition:background .3s, color .3s, border-color .3s; } .tl-line{width:1px;flex:1;background:var(--line);position:relative;overflow:hidden;min-height:40px} .tl-line::after{content:"";position:absolute;top:0;left:0;width:100%;height:0%;background:var(--accent);transition:height .6s ease} .tl-step.is-in .tl-dot{background:var(--ink);color:var(--bg);border-color:var(--ink)} .tl-step.is-in .tl-line::after{height:100%} .tl-content{padding-bottom:56px} .tl-content h3{margin-bottom:8px} .tl-content p{color:var(--ink-soft);font-size:14.5px;line-height:1.55;max-width:44ch} .tl-step:last-child .tl-content{padding-bottom:4px} .tl-step:last-child .tl-marker .tl-line{display:none} /* ---------- proyectos (dark showcase) ---------- */ .projects{display:flex;flex-direction:column;gap:22px} .project-card{ display:grid;grid-template-columns:1.1fr .9fr;gap:0; border:1px solid var(--panel-line);border-radius:var(--radius);overflow:hidden;background:var(--panel-card); transition:transform .3s ease, box-shadow .3s ease; } .project-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(0,0,0,.5)} @media (max-width:800px){.project-card{grid-template-columns:1fr}} .project-visual{background:var(--panel-card-2);position:relative;min-height:260px;display:flex;flex-direction:column;overflow:hidden} .project-chrome{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--panel-line);position:relative;z-index:1} .project-chrome span{width:8px;height:8px;border-radius:50%;background:var(--panel-line)} .project-chrome .u{margin-left:8px;font-family:var(--font-mono);font-size:11px;color:var(--panel-label)} .project-art{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden} .project-art img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease} .project-card:hover .project-art img{transform:scale(1.035)} .project-info{padding:32px} .project-info h3{margin-bottom:10px;color:var(--panel-ink)} .project-info p{color:var(--panel-ink-soft, #a9ada2);font-size:14.5px;margin-bottom:20px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .chip{font-family:var(--font-mono);font-size:11.5px;background:var(--panel-card-2);border:1px solid var(--panel-line);padding:5px 10px;border-radius:100px;color:var(--panel-soft)} .project-ghost{ border:1.5px dashed var(--panel-line);border-radius:var(--radius);padding:40px; display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:transparent; } .project-ghost h3{color:var(--panel-ink)} .project-ghost p{color:var(--panel-soft)} /* ---------- contacto ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px}} .contact-direct{margin-top:28px;display:flex;flex-direction:column;gap:14px} .contact-direct a{font-family:var(--font-mono);font-size:15px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;width:fit-content;transition:border-color .15s} .contact-direct a:hover{border-color:var(--ink)} .contact-social{margin-top:32px} .contact-social p{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px} .form{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px} .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)} .field input,.field select,.field textarea{ background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm); padding:12px 14px;color:var(--ink);font-family:var(--font-display);font-size:14.5px; } .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} .field textarea{resize:vertical;min-height:96px} .form .btn-accent{margin-top:6px;width:100%} .form-note{font-size:12px;color:var(--ink-soft);font-family:var(--font-mono)} /* ---------- footer ---------- */ .footer{padding:44px 0;background:var(--panel);color:var(--panel-ink)} .footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px} .footer small{color:var(--panel-soft);font-size:13px} .footer-right{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .footer-links{display:flex;gap:20px} .footer-links a{font-size:13px;color:var(--panel-soft)} .footer-links a:hover{color:var(--panel-ink)} /* ---------- utility (replaces inline style="" so CSP style-src can stay 'self' only) ---------- */ .mt-16{margin-top:16px} .mt-14{margin-top:14px} /* ========================================================================== Mobile: center content instead of keeping the desktop left-alignment — reads better as a single stacked column on small screens. ========================================================================== */ @media (max-width:680px){ /* hero */ .hero-copy{align-items:center;text-align:center} .hero-copy h1{align-items:center} .lede{max-width:42ch;margin-left:auto;margin-right:auto} .hero-cta{justify-content:center} .hero-proof{justify-content:center;text-align:center} /* every section header (servicios, proceso, proyectos, contacto...) */ .section-head{margin-left:auto;margin-right:auto;align-items:center;text-align:center} /* service cards (bento) */ .card{align-items:center;text-align:center} .card .tag{align-self:center} .card-link{margin-top:14px} /* comparativa cards */ .compare-top{flex-direction:column;gap:6px;text-align:center} .compare-meta{justify-content:center;text-align:center} /* timeline steps: dot centered above its own content, short connector below it */ .tl-step{flex-direction:column;align-items:center;text-align:center;gap:0} .tl-line{flex:none;width:2px;height:28px;min-height:0} .tl-content{padding-top:10px;padding-bottom:34px} /* project cards */ .project-info{align-items:center;text-align:center;display:flex;flex-direction:column} .chips{justify-content:center} .project-ghost{align-items:center;text-align:center} /* contact */ .contact-copy{align-items:center;text-align:center;display:flex;flex-direction:column} .contact-direct{align-items:center} .contact-social{display:flex;flex-direction:column;align-items:center} .social-row{justify-content:center} /* footer */ .footer .wrap{flex-direction:column;text-align:center} .footer-right{flex-direction:column;gap:16px} /* mobile nav menu links */ .nav-links-list{align-items:center;text-align:center} } /* ---------- reveal-on-scroll ---------- */ .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)} [data-reveal].is-visible{opacity:1;transform:none} .js [data-reveal-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)} [data-reveal-stagger].is-visible > *{opacity:1;transform:none}