/* ============================================================ Hyruan ONE — Centro de documentación docs.hyruanone.com Paleta tomada del manual de identidad "Hyruan Family BI Design": Hyruan (slate) .... #64728F ONE (malva) ....... #AC83B4 Gris de puntos .... #E6E6E6 Calier verde ...... #166936 LG Chem rojo ...... #C60852 ============================================================ */ :root{ /* Marca Hyruan */ --slate: #64728F; --slate-dark: #4C5872; --one: #AC83B4; --one-mid: #96699F; --one-dark: #6E4A7C; --one-deep: #3F3350; --one-soft: #EFE6F2; --one-tint: #F8F4FA; /* Socios */ --calier: #166936; --lg: #C60852; /* Neutros */ --ink: #2B2733; --body: #5B5766; --muted: #8A8595; --line: #E6E2EC; --surface: #FFFFFF; --canvas: #FBFAFC; --radius: 18px; --radius-sm: 12px; --shadow-sm: 0 2px 10px rgba(63,51,80,.06); --shadow: 0 10px 30px rgba(63,51,80,.10); --shadow-lg: 0 22px 55px rgba(63,51,80,.16); --wrap: 1160px; --font-display: 'Poppins','Century Gothic','Segoe UI',system-ui,sans-serif; --font-body: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif; /* Curvas de animación compartidas */ --ease-out: cubic-bezier(.22,1,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0; font-family:var(--font-body); font-size:16px; line-height:1.65; color:var(--body); background:var(--canvas); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;} h1,h2,h3{ font-family:var(--font-display);color:var(--ink);line-height:1.18;margin:0; font-weight:600;letter-spacing:-.01em; /* Palabras largas como "Viscosuplementación" se parten con guion en pantallas estrechas en lugar de desbordar. El idioma lo declara . */ overflow-wrap:break-word; hyphens:auto; } p{margin:0;} ul{margin:0;padding:0;list-style:none;} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px;} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--one-deep);color:#fff;padding:12px 20px;border-radius:0 0 10px 0; font-weight:600;text-decoration:none; } .skip-link:focus{left:0;} :focus-visible{outline:3px solid var(--one);outline-offset:3px;border-radius:6px;} /* ════════════════════════════════════════════════════════════ ANIMACIONES BASE ════════════════════════════════════════════════════════════ */ @keyframes riseIn{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} } @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} } @keyframes floatIn{ from{opacity:0;transform:translateY(34px) scale(.97);} to{opacity:1;transform:none;} } @keyframes drift{ 0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,-9px,0);} } @keyframes dotsPan{ from{background-position:0 0;} to{background-position:34px 34px;} } @keyframes sheen{ from{transform:translateX(-120%) skewX(-18deg);} to{transform:translateX(320%) skewX(-18deg);} } /* Aparición al entrar en pantalla (la activa js/main.js) */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-out); will-change:opacity,transform; } .reveal.is-in{opacity:1;transform:none;} /* ---------------- Botones ---------------- */ .btn{ position:relative;overflow:hidden; cursor:pointer; /*