/* ============================================================ Auditas — Base / Reset / Tipografía / Utilidades ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* SIN overflow-x aquí ni en : cualquier overflow distinto de "visible" en html o body rompe position:sticky de sus descendientes en TODA la página (el navegador computa el otro eje como "auto" automáticamente, aunque no se declare — bug clásico y muy documentado de CSS). El contenido decorativo que sobresale ya se contiene sección por sección con su propio overflow:hidden local (ver subpage.css, hero, etc.) — no hace falta este bloqueo global. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--black80); background: var(--whitef); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-title); font-weight: var(--fw-bold); line-height: 1.12; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--infodit); outline-offset: 2px; border-radius: 4px; } /* ---- Layout helpers ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } .section { position: relative; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Reveal on scroll ---- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); will-change: opacity, transform; } [data-reveal].is-inview { opacity: 1; transform: none; } [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; } [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; } [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; } [data-reveal][data-reveal-delay="4"] { transition-delay: 0.32s; } [data-reveal][data-reveal-delay="5"] { transition-delay: 0.40s; } /* ---- Tooltip reutilizable ---- */ .tooltip { position: relative; display: inline-flex; align-items: center; cursor: help; } .tooltip__icon { width: 22px; height: 22px; transition: transform var(--t-fast) var(--ease-out); } .tooltip:hover .tooltip__icon, .tooltip:focus-visible .tooltip__icon { transform: scale(1.15); } .tooltip__bubble { position: absolute; bottom: calc(100% + 12px); right: 0; z-index: 40; width: max-content; max-width: min(320px, 78vw); padding: 10px 13px; background: rgba(25, 26, 33, 0.97); color: var(--grayudit); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-s); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); font-family: var(--font-body); font-size: var(--fs-mini); line-height: 1.5; text-align: left; opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.98); transform-origin: bottom right; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast); pointer-events: none; } .tooltip__bubble::after { content: ""; position: absolute; top: 100%; right: 8px; border: 7px solid transparent; border-top-color: rgba(25, 26, 33, 0.97); } .tooltip:hover .tooltip__bubble, .tooltip:focus-visible .tooltip__bubble, .tooltip:focus-within .tooltip__bubble { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* ---- Botón base (microanimación) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); font-family: var(--font-body); font-size: var(--fs-link); line-height: 1; border-radius: var(--r-s); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out); will-change: transform; } .btn:active { transform: translateY(1px) scale(0.98); } .btn--primary { background: var(--yelludit20); color: var(--blackdit); padding: var(--sp-8) var(--sp-16); box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.35); } .btn--primary:hover { background: var(--yelludit); transform: translateY(-2px); box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.40); } .btn--primary .btn__icon { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-spring); } /* El SVG base (arrow-right) apunta hacia arriba; se rota 90° para apuntar a la derecha (como en el diseño) */ .btn--primary .btn__icon img { width: 16px; height: 16px; transform: rotate(90deg); } .btn--primary:hover .btn__icon { transform: translateX(3px); } /* ---- prefers-reduced-motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } }