/* ============================================================ Bochikua — SISTEMA DE MARCA UNIFICADO (carga AL FINAL) Paleta: verde esmeralda + detalles dorados. Un solo nav + footer para todo el sitio. Tema por clase: → dev / home / proyectos → empresas / precios Redefine variables que styles.css y empresas.css ya usan, así la paleta se unifica sin reescribir esos archivos. ============================================================ */ :root{ --gold:#C9A24B; --gold-deep:#B8860B; --gold-soft:#E7CE86; --em:#12915F; /* esmeralda principal */ --em-2:#1FA06A; /* esmeralda claro */ --em-deep:#0C4A33; /* esmeralda profundo */ } /* ---------- TEMA OSCURO: remapea acentos de styles.css ---------- */ html.theme-dark{ --lime:var(--em-2); /* CTA/acento antes lima → esmeralda */ --lime-2:#33B57D; --lime-deep:#0E5A3F; --on-lime:#04140D; --teal:var(--em-2); --line-lime:rgba(201,162,75,.30); /* hairline de acento → dorado */ --nav-bg:rgba(6,15,11,.72); --nav-text:#EAF3EC; --nav-muted:#93A99C; --nav-line:rgba(255,255,255,.09); --nav-brand:var(--em-2); --nav-cta-bg:var(--em-2); --nav-cta-fg:#04140D; --nav-cta-hover:#33B57D; --foot-bg:#0A0F0E; --foot-text:#93A99C; --foot-strong:#EAF3EC; --foot-line:rgba(255,255,255,.09); } /* ---------- TEMA CLARO: remapea acentos de empresas.css ---------- */ html.theme-light{ --green:#12684A; --deep:#0C4A33; --lime:var(--gold-deep); /* detalle decorativo → dorado */ --nav-bg:rgba(250,250,247,.85); --nav-text:#0F1A14; --nav-muted:#4A5B52; --nav-line:#E1E7E1; --nav-brand:#12684A; --nav-cta-bg:#12684A; --nav-cta-fg:#FFFFFF; --nav-cta-hover:#0C4A33; --foot-bg:#F1F5F0; --foot-text:#4A5B52; --foot-strong:#0F1A14; --foot-line:#DFE5DF; } /* ---------- precios-dev: tema dev oscuro alineado a esmeralda+dorado ---------- (carga DESPUÉS de empresas.css → misma especificidad, gana este) */ :root[data-aud="dev"]{ --paper:#07120D; --paper-2:#0E2018; --ink:#EAF3EC; --soft:#93A99C; --green:var(--em-2); --deep:#33B57D; --tint:rgba(31,160,106,.10); --line:rgba(255,255,255,.10); } /* ============================================================ TEXTURA GLOBAL SUTIL (no vacío, no saturado) — todas las páginas topografía + grano dorado, opacidad mínima, sobre todo el contenido ============================================================ */ html.theme-dark body::after{ content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M0 54 Q80 26 160 54 T320 54'/%3E%3Cpath d='M0 118 Q80 90 160 118 T320 118'/%3E%3Cpath d='M0 182 Q80 154 160 182 T320 182'/%3E%3Cpath d='M0 246 Q80 218 160 246 T320 246'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='%23c9a24b'%3E%3Ccircle cx='14' cy='24' r='1'/%3E%3Ccircle cx='72' cy='58' r='1'/%3E%3Ccircle cx='118' cy='20' r='1'/%3E%3Ccircle cx='38' cy='108' r='1'/%3E%3Ccircle cx='98' cy='130' r='1'/%3E%3Ccircle cx='136' cy='84' r='1'/%3E%3C/g%3E%3C/svg%3E"); background-size:320px 320px,150px 150px; } html.theme-light body::after{ content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%2312684A' stroke-width='1'%3E%3Cpath d='M0 54 Q80 26 160 54 T320 54'/%3E%3Cpath d='M0 118 Q80 90 160 118 T320 118'/%3E%3Cpath d='M0 182 Q80 154 160 182 T320 182'/%3E%3Cpath d='M0 246 Q80 218 160 246 T320 246'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='%23b8860b'%3E%3Ccircle cx='14' cy='24' r='1'/%3E%3Ccircle cx='72' cy='58' r='1'/%3E%3Ccircle cx='118' cy='20' r='1'/%3E%3Ccircle cx='38' cy='108' r='1'/%3E%3Ccircle cx='98' cy='130' r='1'/%3E%3Ccircle cx='136' cy='84' r='1'/%3E%3C/g%3E%3C/svg%3E"); background-size:320px 320px,150px 150px; } @media (prefers-reduced-motion:no-preference){} /* ============================================================ DETALLES DORADOS (ambos temas) ============================================================ */ .eyebrow,.hero__eyebrow{color:var(--gold)!important} /* eyebrows más legibles sobre oscuro: dorado suave */ html.theme-dark .eyebrow{color:var(--gold-soft)!important} html.theme-dark .hero__eyebrow{color:var(--gold-soft)!important} /* foco visible coherente en todo el sitio oscuro */ html.theme-dark a:focus-visible, html.theme-dark button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:6px} .nav__dot,.snav__brand i,.foot__brand .nav__dot{color:var(--gold)!important;font-style:normal} /* subrayado dorado en enlaces de texto y foco */ html.theme-light .text-link{border-bottom-color:var(--gold-deep)} /* ============================================================ NAV UNIFICADO (.snav) — idéntico en todas las páginas ============================================================ */ .snav{ position:fixed;top:0;left:0;right:0;z-index:60;height:68px; background:transparent;border-bottom:1px solid transparent; transition:background .3s cubic-bezier(.16,1,.3,1),border-color .3s,backdrop-filter .3s; font-family:"Geist",system-ui,sans-serif; } .snav.is-solid,.snav.scrolled{ background:var(--nav-bg); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-bottom-color:var(--nav-line); } .snav__in{ max-width:1240px;height:100%;margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem); display:flex;align-items:center;gap:26px; } .snav__brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px; letter-spacing:-.02em;color:var(--nav-text);text-decoration:none} .snav__brand img{height:26px;width:auto;display:block} .snav__brand i{color:var(--gold);font-style:normal} .snav__links{display:flex;gap:26px;margin-left:6px;flex:1;list-style:none;padding:0;margin-right:0} .snav__links a{font-size:14.5px;color:var(--nav-muted);text-decoration:none; position:relative;padding:4px 0;transition:color .2s} .snav__links a:hover{color:var(--nav-text)} .snav__links a[aria-current="page"]{color:var(--nav-text)} .snav__links a[aria-current="page"]::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; background:var(--gold);border-radius:2px} .snav__cta{ display:inline-flex;align-items:center;justify-content:center; padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600; background:var(--nav-cta-bg);color:var(--nav-cta-fg);text-decoration:none; border:1px solid transparent;white-space:nowrap; transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,box-shadow .25s} .snav__cta:hover{background:var(--nav-cta-hover);transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(18,145,95,.55)} /* Acceso al CRM: pill con borde, junto al CTA. Va dentro de .snav__links para colapsar en el menú móvil automáticamente. */ .snav__login{margin-left:auto;border:1px solid var(--nav-line);border-radius:999px; padding:7px 16px!important;color:var(--nav-text)!important;font-weight:600;white-space:nowrap; transition:border-color .2s,color .2s} .snav__login:hover{border-color:var(--gold);color:var(--nav-text)!important} .snav__login[aria-current]::after{display:none} .snav__burger{display:none;background:none;border:0;flex-direction:column;gap:5px; cursor:pointer;padding:8px} .snav__burger span{width:22px;height:2px;background:var(--nav-text);transition:.25s} @media (max-width:820px){ .snav__links,.snav__cta{display:none} .snav__burger{display:flex} .snav.is-open .snav__links{ display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0; background:var(--nav-bg);backdrop-filter:blur(16px); border-bottom:1px solid var(--nav-line);padding:8px clamp(1.1rem,4vw,2rem) 20px;flex:none} .snav.is-open .snav__links a{padding:14px 0;border-bottom:1px solid var(--nav-line);color:var(--nav-text)} } /* ============================================================ FOOTER UNIFICADO (.sfoot) ============================================================ */ .sfoot{background:var(--foot-bg);border-top:1px solid var(--foot-line); padding:48px clamp(1.1rem,4vw,2rem) 34px;font-family:"Geist",system-ui,sans-serif} .sfoot__in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:24px; flex-wrap:wrap;justify-content:space-between} .sfoot .snav__brand{color:var(--foot-strong);font-size:16px} .sfoot__links{display:flex;gap:18px;flex-wrap:wrap;list-style:none;padding:0;margin:0} .sfoot__links a{color:var(--foot-text);font-size:14px;text-decoration:none;transition:color .2s} .sfoot__links a:hover{color:var(--gold)} .sfoot__mail{font-family:"Geist Mono",monospace;font-size:13px;color:var(--gold);text-decoration:none} .sfoot__mail:hover{text-decoration:underline} .sfoot__legal{max-width:1240px;margin:26px auto 0;color:var(--foot-text); font-family:"Geist Mono",monospace;font-size:11.5px;opacity:.8} @media (max-width:640px){ .sfoot__in{flex-direction:column;align-items:flex-start;gap:18px} } /* ============================================================ BOTÓN FLOTANTE DE WHATSAPP (.wafab) — todas las páginas Misma familia visual que el CTA del nav (usa sus tokens). Aparece al bajar del primer pliegue y se retira sobre el footer, donde ya hay un CTA propio. ============================================================ */ .wafab{ position:fixed;z-index:70; right:clamp(1rem,3vw,1.9rem); bottom:calc(clamp(1rem,3vw,1.9rem) + env(safe-area-inset-bottom,0px)); display:inline-flex;align-items:center; height:56px;border-radius:999px; background:var(--nav-cta-bg);color:var(--nav-cta-fg);text-decoration:none; border:1px solid rgba(201,162,75,.42); font-family:"Geist",system-ui,sans-serif;font-weight:600;font-size:14.5px; letter-spacing:-.01em; box-shadow:0 14px 30px -14px rgba(6,40,28,.7); opacity:0;transform:translateY(14px) scale(.96);pointer-events:none; transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), background .25s,box-shadow .25s; } .wafab.is-in{opacity:1;transform:none;pointer-events:auto} .wafab__icon{flex:0 0 56px;width:56px;height:56px;display:grid;place-items:center} .wafab__icon svg{width:25px;height:25px;fill:currentColor;display:block} .wafab__label{padding-right:22px;white-space:nowrap} .wafab:hover,.wafab:focus-visible{ background:var(--nav-cta-hover); box-shadow:0 18px 34px -14px rgba(6,40,28,.78); } .wafab.is-in:hover,.wafab.is-in:focus-visible{transform:translateY(-2px)} html.theme-light .wafab:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px} /* Móvil: solo el disco, sin etiqueta (56px = objetivo táctil holgado). */ @media (max-width:900px){ .wafab__label{display:none} } @media (prefers-reduced-motion:reduce){ .wafab{transform:none;transition:opacity .2s linear,background .2s} .wafab.is-in:hover,.wafab.is-in:focus-visible{transform:none} }