/* ========================================================= BASE — grano de fondo, layout de secciones, tipografía ========================================================= */ .grain{ position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .section{ padding: var(--section-pad) 24px; position: relative; } .section-inner{ max-width: var(--container); margin: 0 auto; } .section--alt{ background: var(--ink-raised); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .section--tinted{ background: radial-gradient(680px 420px at 12% -10%, rgba(227,139,76,.09), transparent 60%), radial-gradient(680px 420px at 88% 110%, rgba(141,130,232,.09), transparent 60%); } .section-head{ max-width: 640px; margin-bottom: 60px; } .section-head--center{ margin-left: auto; margin-right: auto; text-align: center; } .section-head--center .lead{ margin-left: auto; margin-right: auto; } .section-head h2{ font-size: clamp(30px, 4vw, 44px); line-height: 1.14; margin: 0 0 18px; } .kicker{ display: inline-block; font-size: 14px; font-weight: 600; color: var(--copper-strong); margin-bottom: 14px; } .kicker--violet{ color: var(--violet-strong); } .lead{ font-size: 17.5px; color: var(--ash); max-width: 560px; } .grad-text{ background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-quote{ margin-top: 60px; padding: 36px 0 0; border-top: 1px solid var(--hairline); font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 27px); font-weight: 500; line-height: 1.44; color: var(--paper); max-width: 800px; font-style: italic; } .section-quote span{ color: var(--copper-strong); font-style: normal; } /* ========================================================= Botones ========================================================= */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); font-family: var(--font-body); } .btn svg{ width: 16px; height: 16px; flex: none; } .btn-lg{ padding: 16px 30px; font-size: 16px; } .btn-block{ width: 100%; } .btn-primary{ background: var(--grad-signal); color: #16110B; box-shadow: 0 10px 26px -10px rgba(227,139,76,.55); } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(227,139,76,.65); } .btn-outline{ background: transparent; color: var(--paper); border-color: var(--hairline-strong); } .btn-outline:hover{ border-color: var(--copper-strong); color: var(--copper-strong); } .btn-ghost{ color: var(--ash); padding: 12px 14px; } .btn-ghost:hover{ color: var(--paper); } .btn:disabled{ opacity: .5; cursor: not-allowed; transform: none !important; } /* checkmark icon reused across lists */ .i-check{ color: var(--state-good); flex: none; } /* ========================================================= Revelado al hacer scroll — mejora progresiva. Por defecto TODO es visible (sin JS, o si el JS falla, nunca se pierde contenido: crucial para SEO y accesibilidad). Solo si se activa el efecto discreto. ========================================================= */ .reveal{ opacity: 1; transform: none; } html.js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--delay, 0s); } html.js .reveal.in{ opacity: 1; transform: translateY(0); }