/* =============================================================== CajónDigital — tokens, botones y cabecera. Los usan la home (landing/index.html) y todo lo que genera seo/: /gestorias, /seguridad, el blog y los casos de uso. ⚠️ Esta hoja lleva los TOKENS, así que no se puede cargar en diferido (media="print", preload+onload...): sin ella la página se queda sin colores, sin tipografías y sin radios. Va como normal en el , y punto. ⚠️ Al desplegar: primero este fichero, comprobar que responde 200, y solo entonces el HTML. Un 404 aquí no degrada la página, la destruye. =============================================================== */ /* ===== Tokens del sistema de diseño ===== */ :root{ --verde-50:#f0faf7;--verde-100:#d9f4ec;--verde-200:#b0e7d8;--verde-300:#7cd3bd;--verde-400:#45b39d;--verde-500:#23977f;--verde-600:#127a67;--verde-700:#0d6b5c;--verde-800:#0b5348;--verde-900:#0a423a;--verde-950:#052a24; --neutro-0:#ffffff;--neutro-50:#f6f8f7;--neutro-100:#eef1f0;--neutro-200:#dde3e1;--neutro-300:#c2ccc9;--neutro-400:#93a39e;--neutro-500:#66786f;--neutro-600:#4c5d56;--neutro-700:#3a4842;--neutro-800:#27332e;--neutro-900:#16211d;--neutro-950:#0b1512; --oro-100:#f8eed7;--oro-300:#e6c983;--oro-500:#c49a3c;--oro-700:#96712a; --exito-bg:#e3f6e9;--exito:#177245;--aviso-bg:#fdf3dd;--aviso:#a16207; --pilar-hogar:#d97706;--pilar-hogar-bg:#fdf3e3; --pilar-vehiculos:#2563eb;--pilar-vehiculos-bg:#e8f1fd; --pilar-inmuebles:#7c3aed;--pilar-inmuebles-bg:#f1eafd; --pilar-salud:#db2777;--pilar-salud-bg:#fdeaf3; --pilar-negocio:#4f46e5;--pilar-negocio-bg:#ebeafd; --pilar-identificacion:#475569;--pilar-identificacion-bg:#edf1f5; --chat-fondo:#efe9df;--chat-cabecera:#0b5348;--chat-burbuja-propia:#d7f5e3;--chat-burbuja-bot:#ffffff;--chat-hora:#66786f;--chat-check:#3aa9e0; --esmeralda:#10b981;--esmeralda-vivo:#34d399;--teal-vivo:#2dd4bf; --oscuro-fondo:#031b16;--oscuro-fondo-alt:#052a24;--oscuro-card:rgba(255,255,255,.04);--oscuro-borde:rgba(255,255,255,.10);--oscuro-borde-hover:rgba(52,211,153,.35); --oscuro-heading:#f2faf7;--oscuro-body:rgba(214,232,226,.78);--oscuro-muted:rgba(214,232,226,.55); --grad-cta:linear-gradient(135deg,#10b981,#0d9488); --grad-texto:linear-gradient(90deg,#34d399,#2dd4bf); --brand:var(--verde-700);--brand-hover:var(--verde-800); --text-body:var(--neutro-800);--text-heading:var(--neutro-950);--text-muted:var(--neutro-500);--text-link:var(--verde-700); --surface-page:#fbfcfb;--surface-card:#ffffff;--surface-sunken:var(--neutro-50); --border-soft:var(--neutro-200);--border-strong:var(--neutro-300);--border-brand:var(--verde-300); --focus-ring:0 0 0 3px rgba(18,122,103,.35); --font-display:'Space Grotesk',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif; --text-xs:.75rem;--text-sm:.8125rem;--text-base:1rem;--text-lg:1.125rem; --text-2xl:clamp(1.25rem,1.1rem + .9vw,1.5rem); --text-3xl:clamp(1.5rem,1.3rem + 1.2vw,1.875rem); --text-4xl:clamp(1.875rem,1.5rem + 1.9vw,2.375rem); --text-6xl:clamp(2.75rem,2.1rem + 3.6vw,3.75rem); --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px; --shadow-xs:0 1px 2px rgba(11,21,18,.05); --shadow-sm:0 1px 3px rgba(11,21,18,.07),0 1px 2px rgba(11,21,18,.05); --shadow-md:0 4px 12px rgba(11,21,18,.08),0 2px 4px rgba(11,21,18,.04); --shadow-lg:0 12px 32px rgba(11,21,18,.10),0 4px 8px rgba(11,21,18,.04); --shadow-brand:0 8px 24px rgba(13,107,92,.22); --glow-esmeralda:0 0 60px -12px rgba(16,185,129,.45); --glow-cta:0 8px 28px -6px rgba(16,185,129,.5); --container-max:1200px;--container-pad:clamp(16px,4vw,32px); --dur-fast:160ms;--dur-base:240ms;--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.4,.64,1); } /* ===== Base que necesitan los enlaces y el foco ===== */ a{color:var(--text-link);text-decoration:none} a:hover{color:var(--brand-hover);text-decoration:underline} /* Con outline y no con box-shadow: una pseudoclase pesa lo mismo que una clase, así que el box-shadow del foco competía con el de .btn-primary y ganaba el último en el orden. Resultado antiguo: al enfocar un botón con el teclado desaparecía el anillo (el glow lo tapaba). Con outline no hay empate posible con ninguna sombra ni ningún radio, ni hoy ni mañana. */ :focus-visible{outline:2px solid var(--verde-600);outline-offset:2px} /* ===== Botones ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent;text-decoration:none;transition:all var(--dur-fast) var(--ease-out);min-height:44px;font-size:15px;padding:12px 22px} .btn:hover{text-decoration:none} .btn:active{transform:scale(.98);box-shadow:none} .btn-primary{background:var(--grad-cta);color:#fff;box-shadow:var(--glow-cta)} .btn-primary:hover{filter:brightness(1.12);transform:translateY(-1px);color:#fff} .btn-secondary{background:var(--surface-card);color:var(--verde-800);border-color:var(--border-strong);box-shadow:var(--shadow-xs)} .btn-secondary:hover{background:var(--verde-50);color:var(--verde-800)} .btn-oscuro{background:transparent;color:var(--esmeralda-vivo);border-color:var(--oscuro-borde)} .btn-oscuro:hover{background:rgba(52,211,153,.10);color:var(--esmeralda-vivo)} .btn-lg{font-size:16px;padding:14px 28px;min-height:52px} .btn-sm{font-size:14px;padding:8px 16px;min-height:36px} /* ===== Nav ===== */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft)} .nav-inner{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad);height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px} .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none} .nav-logo:hover{text-decoration:none} .nav-brand{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text-heading)} .nav-brand b{color:var(--verde-700);font-weight:700} .nav-links{display:none;gap:26px;font-size:14px;font-weight:600} .nav-links a{color:var(--text-body)} .nav-links a:hover{color:var(--verde-700)} .nav-right{display:flex;align-items:center;gap:10px} .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--border-soft);border-radius:var(--radius-md);cursor:pointer;color:var(--text-heading)} .nav-mobile{display:none;border-top:1px solid var(--border-soft);background:rgba(255,255,255,.97);padding:10px var(--container-pad) 18px} .nav-mobile.open{display:flex;flex-direction:column;gap:4px} .nav-mobile a{padding:12px 8px;font-weight:600;color:var(--text-body);border-radius:var(--radius-sm)} .nav-mobile a:hover{background:var(--verde-50);color:var(--text-body);text-decoration:none} /* Los enlaces aparecen a 900 y no a 768: con seis (se añadió Gestorías) el logo + los enlaces + el CTA piden ~837 px, así que entre 768 y 855 la cabecera desbordaba y le salía scroll horizontal a TODA la página —un iPad en vertical son 768—. Por debajo de 900 manda la hamburguesa, que lleva los siete enlaces. */ @media(min-width:900px){.nav-links{display:flex}.nav-burger{display:none}} .nav-cta-label-full{display:none} @media(min-width:480px){.nav-cta-label-full{display:inline}.nav-cta-label-short{display:none}} /* Variante de las páginas generadas: botón claro sobre una banda verde */ .btn-claro{background:#fff;color:var(--verde-700);box-shadow:var(--shadow-md)} .btn-claro:hover{transform:translateY(-1px);color:var(--verde-800)} /* ===== Paleta de las páginas interiores ===== Estaba repetida en los tres generadores y en las 22 páginas. Los valores son los que ya había: NO se ha armonizado ninguno todavía, solo se ha centralizado. Ojo, hay divergencias con los tokens de arriba que alguien tiene que decidir: --verde-osc #0a5448 vs --verde-800 #0b5348 --crema #fbfaf7 vs --surface-page #fbfcfb --tinta #1e2b27 vs --neutro-900 #16211d Mientras convivan, al menos conviven en el mismo sitio y se ven de un vistazo. */ :root{ --verde:var(--verde-700); --verde-osc:#0a5448; --menta:#d7f5e3; --crema:#fbfaf7; --tinta:#1e2b27; --gris:#5c6d67; --linea:#e2e8e4; --ambar:#b45309; } /* ===== Base común a todas las páginas ===== */ *,*::before,*::after{box-sizing:border-box} img,svg{display:block} /* El body de cada familia de páginas tiene su propio interlineado (la home 1.55, el blog 1.65 porque es texto largo). La cabecera NO debe heredarlo o deja de medir lo mismo en unas páginas que en otras. */ .nav,.nav-mobile{line-height:1.5} /* ===== Cabecera en pantallas de móvil ===== A 390 px (iPhone) el CTA no cabía y el texto se partía en dos líneas: el botón crecía a 60 px dentro de una barra de 72. Las cuentas, con el logo completo (155) + botón (149) + hamburguesa (44) + huecos (22) = 370 px más el padding, hacen falta ~405 px. Por debajo de eso se esconde el nombre y se queda el icono, que es lo que hace el propio portal de la app. */ .nav-right .btn{white-space:nowrap} @media (max-width:410px){ .nav-brand{display:none} }