/* OficioBase — v1.0 | Spanish-first, no framework required */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --deep:#11292d; --deep2:#19363a; --ink:#172c30; --muted:#667679; --line:#e1e7e4; --cream:#f8f7f2; --paper:#ffffff; --brass:#ba935c; --brass-light:#f1e7d8; --teal:#648782; --white:#fff; --shadow:0 19px 55px rgba(17,41,45,.075); --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:98px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
svg { width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round; }
.container { width:min(1180px,calc(100% - 48px));margin-inline:auto; }
.section { padding:112px 0; }
.section-head { max-width:700px;margin-bottom:42px; }
.eyebrow { font-family:'Manrope',sans-serif;font-size:11px;font-weight:800;line-height:1.4;letter-spacing:.17em;text-transform:uppercase;color:var(--brass); }
h1,h2,h3,h4 { margin:0;font-family:'Manrope',sans-serif;letter-spacing:-.045em;line-height:1.14; }
h1 { font-size:clamp(42px,5.4vw,72px);font-weight:800; }
h2 { font-size:clamp(32px,3.6vw,49px);font-weight:800; }
h3 { font-size:21px;font-weight:800;letter-spacing:-.035em; }
p { margin:0; }
.section-head h2 { margin-top:13px; }
.section-head p { margin-top:17px;font-size:17px;color:var(--muted);max-width:620px; }
.skip-link { position:absolute;left:12px;top:-100px;z-index:200;padding:8px 13px;background:white;color:#11292d; }
.skip-link:focus { top:10px; }
.announcement { background:var(--deep);color:#cddbd8;font-size:11px;letter-spacing:.1em;font-weight:700; }
.announcement .container { display:flex;justify-content:space-between;align-items:center;min-height:34px;gap:12px; }
.announcement a { text-decoration:none;color:#f3e5cf;letter-spacing:0; }
.announcement a:hover { text-decoration:underline; }
.site-header { position:sticky;top:0;z-index:99;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border-bottom:1px solid rgba(17,41,45,.08); }
.navbar { display:flex;min-height:82px;align-items:center;justify-content:space-between;gap:28px; }
.wordmark { display:inline-flex;align-items:baseline;flex-direction:column;gap:1px;text-decoration:none;white-space:nowrap; }
.wordmark-name { font-family:'Manrope',sans-serif;letter-spacing:-.075em;font-size:30px;font-weight:800;line-height:1.1;color:var(--deep); }
.wordmark-name em { font-style:normal;color:var(--brass); }
.wordmark small { font-size:8px;letter-spacing:.26em;font-weight:800;color:var(--ink); }
.navlinks { display:flex;align-items:center;gap:29px; }
.navlinks>a { color:#3e5458;font-size:13px;font-weight:700;text-decoration:none;transition:color .2s; }
.navlinks>a:hover,.navlinks>a:focus-visible { color:#ae8150; }
.nav-controls { display:flex;align-items:center;gap:12px; }
.language-switch { display:flex;gap:2px;padding:4px;background:#f1f3f0;border-radius:999px; }
.language-switch a { font-size:11px;font-weight:800;text-decoration:none;min-width:31px;height:28px;display:grid;place-items:center;border-radius:999px;color:#7b8987; }
.language-switch a[aria-current="page"] { background:var(--deep);color:white;box-shadow:0 3px 9px rgba(0,0,0,.1); }
.btn { display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:15px 21px;border:1px solid transparent;border-radius:9px;text-decoration:none;white-space:nowrap;font-size:13px;font-weight:800;line-height:1.2;transition:transform .2s,background .2s,box-shadow .2s; }
.btn:hover { transform:translateY(-2px); }
.btn svg { width:16px;height:16px; }
.btn-gold { color:#172b2f;background:#dcc198;box-shadow:0 8px 22px rgba(210,169,108,.18); }
.btn-gold:hover { background:#e7cca4; }
.btn-dark { color:white;background:var(--deep); }
.btn-dark:hover { background:#284b4e; }
.btn-outline-light { border-color:rgba(255,255,255,.3);color:white;background:transparent; }
.btn-outline-light:hover { background:rgba(255,255,255,.1); }
.btn-outline { border:1px solid #cad6d2;background:transparent;color:var(--deep); }
.btn-outline:hover { background:#f1f6f4; }
.btn-small { padding:11px 15px;font-size:12px; }
.menu-toggle { display:none;min-width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:white; }
.menu-toggle svg { width:22px;height:22px; }
.hero { position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:white;padding:100px 0 105px; }
.hero:before { content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(90deg,transparent 24%,#000 95%); }
.hero:after { content:'';position:absolute;z-index:-1;right:-260px;top:-450px;width:900px;height:950px;background:radial-gradient(circle,rgba(98,138,130,.35),transparent 62%);pointer-events:none; }
.hero-grid { display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:78px; }
.hero .eyebrow { color:#dec098; }
.hero h1 { margin-top:20px;max-width:710px; }
.hero h1 span { color:#d9b482; }
.hero .lead { color:#cddbd9;font-size:18px;line-height:1.78;margin:24px 0 30px;max-width:590px; }
.hero-actions { display:flex;flex-wrap:wrap;gap:12px; }
.hero-trust { display:flex;flex-wrap:wrap;column-gap:24px;row-gap:10px;margin-top:42px;color:#d2e1de;font-size:12px;font-weight:600; }
.hero-trust span { display:inline-flex;align-items:center;gap:7px; }
.hero-trust svg { color:#d1ae7d;height:14px;width:14px; }
.system-wrap { position:relative;max-width:490px;margin:25px auto 0; }
.system-window { box-shadow:0 32px 85px rgba(0,0,0,.28);background:#f9fafa;color:var(--deep);border-radius:19px;overflow:hidden;transform:rotate(1.7deg);border:1px solid rgba(255,255,255,.4); }
.window-top { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#e8efec;border-bottom:1px solid #d8e2dd; }
.dots { display:flex;gap:5px; }.dots i { background:#c0d0ca;width:8px;height:8px;border-radius:100%; }.dots i:first-child{background:#bf9c68;}
.window-top span { font-size:10px;letter-spacing:.15em;font-weight:800;color:#56716d; }
.window-body { padding:25px 25px 20px; }
.mock-label { font-size:10px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:#81928e; }
.mock-header { display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:17px; }
.mock-header strong { display:block;font:800 21px 'Manrope',sans-serif;letter-spacing:-.04em;margin-top:5px; }
.mock-indicator { display:flex;gap:6px;align-items:center;color:#397c64;background:#e3f3e9;padding:7px 10px;border-radius:999px;font-size:9px;font-weight:800; }
.mock-indicator i { width:6px;height:6px;border-radius:100%;background:#42aa80; }
.mock-cards { display:grid;grid-template-columns:1fr 1fr;gap:11px; }
.mock-tile { border:1px solid #e0e7e3;border-radius:11px;padding:16px 15px;background:#fff;min-height:112px; }
.mock-tile svg { color:#b58d59;width:21px;height:21px; }
.mock-tile strong { display:block;margin-top:9px;font-size:12px;letter-spacing:-.01em; }
.mock-tile small { display:block;margin-top:3px;color:#80908b;font-size:10px; }
.mock-progress { margin-top:12px;background:#eef3f0;border-radius:11px;padding:17px 17px 16px; }
.mock-progress-row { display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800; }
.progress-bar { height:7px;margin-top:14px;background:#d7e4df;border-radius:30px;overflow:hidden; }
.progress-bar span { display:block;width:72%;height:100%;border-radius:30px;background:linear-gradient(90deg,#b99b6e,#dbbd92); }
.mock-footer { text-align:center;font-size:10px;color:#879992;padding-top:14px; }
.float-pill { position:absolute;left:-40px;bottom:43px;box-shadow:0 12px 38px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.2);background:#fff;padding:13px 16px;border-radius:12px;transform:rotate(-3deg);display:flex;gap:9px;align-items:center;color:#18443e;font-size:12px;font-weight:800; }
.float-pill svg { color:#42916e; }
.industries { padding:22px 0;background:#f2f4f1;border-bottom:1px solid #e5eae5; }
.industries-inner { display:flex;justify-content:center;align-items:center;gap:25px;flex-wrap:wrap; }
.industries-label { text-transform:uppercase;letter-spacing:.17em;font-weight:800;font-size:10px;color:#8c9b97; }
.industry-list { display:flex;flex-wrap:wrap;gap:22px;color:#5a6f6d;font-size:13px;font-weight:800; }
.industry-list span:not(:last-child):after { content:'•';margin-left:22px;color:#b99a6d; }
.problems { background:var(--cream); }
.problem-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.problem-card { padding:26px 23px 28px;border:1px solid #e4e8e3;border-radius:14px;background:rgba(255,255,255,.7);min-height:221px; }
.icon-box { width:48px;height:48px;display:grid;place-items:center;border-radius:11px;color:#b28b58;background:#f4ecdf; }
.icon-box svg { width:23px;height:23px; }
.problem-card h3 { font-size:16px;margin:20px 0 9px;line-height:1.3; }
.problem-card p { font-size:13px;color:var(--muted);line-height:1.7; }
.services { background:#fff; }
.service-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch; }
.service-card { display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid #dae3de;border-radius:17px;padding:30px 26px 26px;box-shadow:0 9px 35px rgba(15,42,43,.035);position:relative; }
.service-card.featured { border:1.5px solid #c6a475;box-shadow:0 18px 50px rgba(43,46,30,.095); }
.featured-label { position:absolute;top:-13px;left:23px;background:var(--deep);color:white;font-size:10px;padding:7px 13px;border-radius:30px;font-weight:800;letter-spacing:.05em; }
.service-type { color:#6c908d;letter-spacing:.16em;font-size:10px;font-weight:800; }
.service-card h3 { margin-top:9px;font-size:23px; }
.service-card .service-desc { color:#617574;font-size:13px;line-height:1.7;margin-top:11px;min-height:85px; }
.service-price { margin-top:23px;padding-top:20px;border-top:1px solid #e5e9e4;display:flex;align-items:baseline;gap:6px; }
.service-price strong { font:800 33px 'Manrope',sans-serif;letter-spacing:-.05em;color:#1a2b30; }
.service-price small { color:var(--muted);font-size:12px; }
.service-features { list-style:none;padding:0;margin:23px 0 25px;display:grid;gap:10px; }
.service-features li { display:flex;align-items:flex-start;gap:9px;font-size:12px;color:#536c6c;line-height:1.6; }
.service-features svg { flex:0 0 17px;width:17px;height:17px;color:#b48b58;margin-top:1px;stroke-width:2.5; }
.service-card .btn { width:100%;margin-top:auto; }
.milestones { margin:17px 0 0;padding:16px;background:#f7f2e9;border-radius:11px;border:1px solid #efe1ca; }
.milestones .milestone-heading { font-weight:800;font-size:13px;color:#855c29; }
.milestones .milestone-small { margin-top:2px;color:#776e5f;font-size:10px; }
.milestone-row { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #e9dfcc;font-size:11px; }
.milestone-row:last-of-type { border-bottom:none; }
.milestone-row strong { font-family:'Manrope',sans-serif;color:#293c3b;font-size:12px; }
.milestone-note { margin-top:8px;color:#796f5d;font-size:10px;line-height:1.5; }
.service-note { margin-top:24px;color:#82908e;font-size:12px;line-height:1.6; }
.process { background:#eff3f0; }
.process-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:26px; }
.process-item { background:white;border:1px solid #e0e8e1;border-radius:16px;padding:30px;position:relative; }
.process-num { color:#b99a69;font:800 35px 'Manrope',sans-serif;letter-spacing:-.07em; }
.process-item h3 { margin-top:12px;font-size:20px; }
.process-item p { margin-top:11px;font-size:13px;color:var(--muted);max-width:280px; }
.about { background:white; }
.about-grid { display:grid;grid-template-columns:.78fr 1.22fr;gap:100px;align-items:center; }
.about-visual { position:relative;display:flex;align-items:center;justify-content:center;min-height:330px; }
.about-visual:before { content:'';position:absolute;width:320px;height:320px;border:1px solid #e0dfd4;border-radius:50%;box-shadow:0 0 0 23px #f8f7f1; }
.about-visual img { position:relative;width:280px;height:280px;object-fit:cover;object-position:50% 39%;border-radius:50%;border:6px solid white;box-shadow:0 20px 60px rgba(20,45,45,.1); }
.about-copy h2 { margin:14px 0 19px; }
.about-copy>p { color:var(--muted);font-size:16px;max-width:590px;margin-top:12px; }
.founder { display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line); }
.founder-line { height:36px;width:3px;background:var(--brass);border-radius:2px; }
.founder b { display:block;font-family:'Manrope',sans-serif; }
.founder span { display:block;color:#87918f;font-size:12px;letter-spacing:.04em;margin-top:3px; }
.faq { padding-top:0;background:white; }
.faq-layout { display:grid;grid-template-columns:.82fr 1.18fr;gap:70px; }
.faq-layout .section-head { margin:0; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { cursor:pointer;list-style:none;display:flex;gap:15px;align-items:center;justify-content:space-between;padding:21px 2px;font-size:14px;font-weight:800; }
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after { content:'+';font:500 24px 'Manrope',sans-serif;color:#b89563; }
.faq-list details[open] summary:after { content:'−'; }
.faq-list details p { font-size:13px;line-height:1.8;color:#687a78;padding:0 36px 21px 2px; }
.contact { background:var(--deep);color:white;position:relative;overflow:hidden; }
.contact:before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);background-size:95px 95px;mask-image:linear-gradient(90deg,#000,transparent 70%);pointer-events:none; }
.contact-grid { position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:90px;align-items:start; }
.contact-intro h2 { margin-top:19px;max-width:480px; }
.contact-intro>p { color:#cadaD6;margin-top:20px;font-size:16px;line-height:1.8;max-width:410px; }
.contact-options { display:grid;gap:17px;margin-top:37px; }
.contact-options a { display:flex;align-items:center;gap:14px;text-decoration:none;color:#f3f6f4;font-weight:700;font-size:14px;overflow-wrap:anywhere; }
.contact-options a:hover { color:#e3bd87; }
.contact-options .contact-icon { width:41px;height:41px;border-radius:50%;background:#e2c399;display:grid;place-items:center;color:var(--deep);flex:0 0 41px; }
.contact-options svg { height:17px;width:17px; }
.contact-aside { margin-top:24px;color:#aebfbc;font-size:12px; }
.form-card { background:white;color:var(--deep);padding:35px;border-radius:18px;box-shadow:0 23px 85px rgba(0,0,0,.12); }
.form-card h3 { font-size:23px; }
.form-card>p { font-size:13px;color:#667775;margin-top:8px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:24px; }
.field { display:flex;flex-direction:column;gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:11px;color:#4b6361;font-weight:800; }
.field input,.field select,.field textarea { border:1px solid #dce5df;border-radius:8px;background:#fafcfb;color:var(--ink);padding:12px 13px;min-height:45px;width:100%;font-size:13px;outline:none;transition:border .2s,box-shadow .2s; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#a48859;box-shadow:0 0 0 3px rgba(185,155,109,.15); }
.field textarea { min-height:94px;resize:vertical; }
.field input::placeholder,.field textarea::placeholder { color:#9eacaa; }
.form-consent { display:flex;gap:10px;align-items:flex-start;font-size:11px;color:#647774;line-height:1.5;margin-top:18px; }
.form-consent input { accent-color:var(--deep);margin-top:3px; }
.form-consent a { text-decoration:underline;color:#2a5b58; }
.form-submit { margin-top:19px;width:100%; }
.form-hint { margin-top:11px;color:#889692;font-size:11px;line-height:1.55; }
.honeypot { position:absolute!important;left:-9999px!important; }
.footer { background:#0c1f22;color:#b8c8c5;padding:34px 0; }
.footer-flex { display:flex;align-items:center;justify-content:space-between;gap:20px; }
.footer .wordmark-name { font-size:24px;color:white; }
.footer .wordmark small { color:#9cafaa; }
.footer p { font-size:11px;color:#8fa49f; }
.footer-links { display:flex;gap:18px;align-items:center;flex-wrap:wrap; }
.footer-links a { font-size:12px;text-decoration:none;color:#aec2bd; }
.footer-links a:hover { color:white; }
/* utility page */
.plain-page { min-height:55vh;background:#fafbf9;padding:95px 0 120px; }
.plain-page article { max-width:790px;margin:auto;background:white;padding:52px 55px;border:1px solid #e5eae6;border-radius:18px; }
.plain-page h1 { font-size:clamp(35px,4vw,52px);margin:12px 0 24px; }
.plain-page h2 { margin-top:28px;font-size:22px; }
.plain-page p,.plain-page li { color:#5c6e6b;font-size:15px;line-height:1.9;margin-top:12px; }
.plain-page .btn { margin-top:24px; }
.success-mark { width:64px;height:64px;background:#e5f2ea;color:#338064;border-radius:50%;display:grid;place-items:center;margin-bottom:22px; }
.success-mark svg { width:30px;height:30px; }
@media(max-width:1100px) { .navlinks { gap:16px; } .hero-grid { gap:40px; } .float-pill { left:-16px; } .service-card { padding:28px 20px 23px; } .service-card h3 { font-size:21px; } .about-grid { gap:45px; } .contact-grid { gap:40px; } }
@media(max-width:920px) { .desktop-cta { display:none; } .navlinks { gap:13px; } .navlinks>a { font-size:12px; } .hero { padding:78px 0; } .hero-grid { grid-template-columns:1fr; } .hero-copy { max-width:700px; } .system-wrap { width:min(100%,525px);margin:22px auto; } .hero:before { mask-image:linear-gradient(180deg,transparent 0,#000 80%); } .problem-grid { grid-template-columns:repeat(2,1fr); } .service-grid { grid-template-columns:repeat(2,1fr); } .service-card.featured { grid-column:2;grid-row:1; } .service-card:last-child { grid-column:1/-1; } .about-grid { gap:25px;grid-template-columns:.7fr 1.3fr; } .about-visual:before { width:220px;height:220px;box-shadow:0 0 0 16px #f8f7f1; } .about-visual img { width:195px;height:195px; } .faq-layout { grid-template-columns:1fr;gap:20px; } .contact-grid { grid-template-columns:1fr; } .contact-intro h2 { max-width:730px; } .contact-intro>p { max-width:630px; } .contact-options { display:flex;flex-wrap:wrap; } }
@media(max-width:680px) { .container { width:min(100% - 34px,540px); } .announcement .container { min-height:29px; } .announcement { font-size:9px; } .announcement .right { display:none; } .navbar { min-height:71px;gap:10px; } .wordmark-name { font-size:26px; } .wordmark small { font-size:7px; } .menu-toggle { display:flex; } .navlinks { display:none;position:absolute;left:0;right:0;top:100%;background:white;border-top:1px solid var(--line);padding:18px 22px 24px;box-shadow:0 16px 24px rgba(10,30,30,.1);flex-direction:column;align-items:stretch;gap:0; } .navlinks.open { display:flex; } .navlinks a { padding:12px 0;font-size:15px; } .nav-controls { margin-left:auto; } .language-switch a { min-width:27px;height:26px; } .section { padding:77px 0; } .hero { padding:68px 0 70px; } .hero h1 { font-size:clamp(39px,9.8vw,60px); } .hero .lead { font-size:15px;line-height:1.75;margin:19px 0 25px; } .hero-actions { flex-direction:column;align-items:stretch; } .hero-actions .btn { justify-content:center; } .hero-trust { margin-top:26px;gap:10px 15px;font-size:11px; } .system-wrap { margin:8px auto 0; } .system-window { transform:rotate(0deg); } .float-pill { display:none; } .window-body { padding:18px; } .mock-tile { padding:13px;min-height:101px; } .mock-header strong { font-size:17px; } .industries-inner { justify-content:flex-start;gap:10px; } .industry-list { gap:8px 15px;line-height:1.5; } .industry-list span:not(:last-child):after { margin-left:13px; } .problem-grid { grid-template-columns:1fr 1fr;gap:10px; } .problem-card { min-height:235px;padding:20px 16px; } .problem-card h3 { font-size:14px; } .problem-card p { font-size:12px; } .icon-box { width:41px;height:41px; } .section-head { margin-bottom:28px; } .section-head p { font-size:15px; } .service-grid { grid-template-columns:1fr;gap:24px; } .service-card.featured { grid-column:auto;grid-row:auto; } .service-card:last-child { grid-column:auto; } .service-desc { min-height:auto!important; } .service-card { padding:29px 24px 25px; } .service-features { margin-bottom:20px; } .process-grid { grid-template-columns:1fr;gap:12px; } .process-item { padding:23px; } .process-item h3 { margin-top:5px; } .about-grid { grid-template-columns:1fr;gap:16px; } .about-visual { min-height:260px; } .about-visual:before { width:235px;height:235px; } .about-visual img { width:215px;height:215px; } .about-copy h2 { margin:12px 0 15px; } .about-copy>p { font-size:14px; } .faq { padding-top:0; } .contact-grid { gap:35px; } .form-card { padding:24px 19px; } .form-grid { grid-template-columns:1fr;gap:12px; } .field.full { grid-column:auto; } .contact-options { display:grid; } .footer-flex { flex-direction:column;align-items:flex-start; } .footer-links { gap:12px; } .plain-page article { padding:30px 22px; } .plain-page { padding:50px 0; } }
@media(max-width:380px) { .container { width:calc(100% - 26px); } .wordmark-name { font-size:23px; } .hero h1 { font-size:38px; } .problem-grid { grid-template-columns:1fr; } .problem-card { min-height:auto; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }