/* ========================================================= NAVOA — Healthcare Intelligence Design tokens ========================================================= */ :root{ --ink: #111111; --graphite: #303039; --graphite-2: #232228; --warm-white: #FAF9F6; --cream: #F2EADF; --powder: #DDEEF4; --lavender: #E4E0F4; --periwinkle: #6F7CFF; --periwinkle-deep: #4E5AE0; --text-soft: rgba(17,17,17,0.62); --text-softer:rgba(17,17,17,0.46); --on-dark-soft: rgba(250,249,246,0.66); --on-dark-softer: rgba(250,249,246,0.42); --sans: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --serif: 'Fraunces', Georgia, serif; --mono: 'IBM Plex Mono', 'SFMono-Regular', monospace; --container: 1180px; --edge: clamp(24px, 6vw, 64px); --radius-lg: 28px; --radius-md: 18px; --radius-full: 999px; --ease: cubic-bezier(.19,1,.22,1); /* Dark-section extensions (Synthio-inspired alternation) */ --ink-2: #17161C; --on-dark: #FAF9F6; --periwinkle-soft: rgba(111,124,255,0.16); --gradient-warm: linear-gradient(135deg, #FF7A59 0%, #C86FE8 45%, #6F7CFF 100%); } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--warm-white); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1,h2,h3,h4,p,ul{ margin:0; padding:0; } ul{ list-style:none; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ::selection{ background: var(--periwinkle); color: var(--warm-white); } :focus-visible{ outline: 2px solid var(--periwinkle); outline-offset: 3px; border-radius: 4px; } .section-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); } /* ========================================================= Motion primitives ========================================================= */ /* Content is visible by default (no-JS / slow-JS safe). Only once the 'js' class lands on (see inline script in ) do .reveal elements hide themselves ahead of their scroll-triggered entrance. */ .reveal{ opacity: 1; transform: none; } html.js .reveal{ opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); } html.js .reveal.in-view{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; transition-duration: .001ms !important; } html{ scroll-behavior:auto; } } /* ========================================================= Split button — signature CTA ========================================================= */ .btn-split{ display: inline-flex; align-items: stretch; border-radius: var(--radius-full); overflow: hidden; font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em; transition: transform .45s var(--ease), box-shadow .45s var(--ease); will-change: transform; } .btn-split:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(17,17,17,0.35); } .btn-split__left{ background: var(--graphite); color: var(--warm-white); padding: 15px 26px; font-size: 15px; display:flex; align-items:center; } .btn-split__right{ background: var(--cream); color: var(--ink); padding: 15px 20px; display:flex; align-items:center; justify-content:center; transition: background .3s var(--ease), transform .3s var(--ease); } .btn-split:hover .btn-split__right{ transform: translateX(3px); } .btn-split--nav{ display:none; } .btn-split--footer .btn-split__left{ padding: 13px 22px; font-size: 14px; } .btn-split--footer .btn-split__right{ padding: 13px 18px; } /* ========================================================= Navbar ========================================================= */ .nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250,249,246,0.72); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid rgba(17,17,17,0.06); } .nav-inner{ max-width: var(--container); margin: 0 auto; padding: 18px var(--edge); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo{ font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: 0.06em; color: var(--ink); } .nav-links{ display: flex; gap: 34px; font-size: 14.5px; color: var(--ink); } .nav-links a{ position: relative; padding: 4px 0; opacity: 0.82; transition: opacity .3s var(--ease); } .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: var(--periwinkle); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav-links a:hover{ opacity: 1; } .nav-links a:hover::after{ transform: scaleX(1); } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; width: 34px; height: 28px; flex-direction: column; justify-content: space-between; padding: 4px 0; } .nav-toggle span{ display:block; height:1.5px; width:100%; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); } @media (min-width: 861px){ .btn-split--nav{ display: inline-flex; } } @media (max-width: 860px){ .nav-links{ position: fixed; top: 66px; left: 0; right: 0; background: var(--warm-white); flex-direction: column; gap: 0; border-bottom: 1px solid rgba(17,17,17,0.08); max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); } .nav-links.open{ max-height: 320px; } .nav-links a{ padding: 16px var(--edge); border-top: 1px solid rgba(17,17,17,0.06); opacity: 1; } .nav-toggle{ display: flex; } } /* ========================================================= Hero — layout partido (texto / visual animado), estilo Synthio ========================================================= */ .hero{ position: relative; min-height: auto; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; padding: 130px var(--edge) 90px; overflow: hidden; background: var(--warm-white); gap: 40px; } .hero-visual{ position: relative; height: 420px; display: flex; align-items: center; justify-content: center; } .hero-visual__watermark{ position: absolute; font-family: var(--sans); font-weight: 700; font-size: 220px; color: var(--ink); opacity: 0.04; letter-spacing: -0.05em; user-select: none; pointer-events: none; } .hero-orb-wrap{ position: relative; width: 420px; height: 420px; } .hero-orb-core{ position: absolute; inset: 90px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #A9B4FF, var(--periwinkle) 55%, var(--periwinkle-deep) 100%); box-shadow: 0 0 90px 10px rgba(111,124,255,0.45); animation: pulse-core 6s ease-in-out infinite; } .hero-orb-ring{ position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(111,124,255,0.35); animation: spin-ring 22s linear infinite; } .hero-orb-ring--2{ inset: 34px; border-color: rgba(111,124,255,0.22); animation-duration: 30s; animation-direction: reverse; } .hero-orb-ring--3{ inset: 64px; border-color: rgba(111,124,255,0.5); animation-duration: 16s; border-style: dashed; } .hero-orb-dot{ position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--periwinkle-deep); top: -5px; left: 50%; } @keyframes pulse-core{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } } @keyframes spin-ring{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .hero-inner{ position: relative; z-index: 1; max-width: 620px; } .eyebrow{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--periwinkle-deep); margin-bottom: 26px; display: block; } .eyebrow--dark{ color: var(--text-soft); } .hero-headline{ font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); display: flex; flex-direction: column; } .hero-headline .accent{ color: var(--periwinkle-deep); } .hero-headline--serif{ font-family: 'Newsreader', var(--serif); font-weight: 500; font-size: clamp(52px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.01em; } .hero-sub{ display: flex; align-items: center; gap: 14px; margin-top: 14px; color: var(--periwinkle-deep); } .hero-arrow{ color: var(--periwinkle-deep); flex-shrink: 0; } .hero-sub__serif{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -0.01em; } .hero-desc{ margin-top: 30px; max-width: 520px; font-size: 17px; line-height: 1.65; color: var(--text-soft); } .hero-inner > div{ margin-top: 42px; } /* ========================================================= Section titles (shared) ========================================================= */ .section-title{ font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.015em; max-width: 780px; margin-top: 14px; } .section-lead{ margin-top: 20px; max-width: 560px; font-size: 16.5px; line-height: 1.65; color: var(--text-soft); } /* ========================================================= 02 · Cómo generamos impacto ========================================================= */ .impact{ background: var(--cream); padding: 120px 0 110px; } .journey{ position: relative; margin-top: 80px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .journey-line{ position: absolute; top: 13px; left: 0; right: 0; height: 1px; background: linear-gradient(to right, rgba(17,17,17,0.14), rgba(17,17,17,0.14)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease); } .journey-line.grow{ transform: scaleX(1); } .journey-step{ position: relative; padding-top: 46px; } .journey-step::before{ content:""; position: absolute; top: 6px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--warm-white); border: 1.5px solid var(--periwinkle); } .journey-num{ font-family: var(--mono); font-size: 12px; color: var(--periwinkle-deep); letter-spacing: 0.05em; display: block; margin-bottom: 10px; } .journey-step h3{ font-size: 18px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; } .journey-step p{ font-size: 14.5px; line-height: 1.55; color: var(--text-soft); } .journey-step--results{ padding: 20px 22px; margin-top: -20px; background: var(--ink); border-radius: var(--radius-md); } .journey-step--results::before{ display:none; } .journey-step--results .journey-num{ color: var(--periwinkle); } .journey-step--results h3{ color: var(--warm-white); } .journey-step--results p{ color: var(--on-dark-soft); } .impact-close{ margin-top: 90px; max-width: 620px; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.45; color: var(--ink); } @media (max-width: 860px){ .journey{ grid-template-columns: 1fr; gap: 0; } .journey-line{ top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; } .journey-line.grow{ transform: scaleY(1); } .journey-step{ padding: 0 0 40px 34px; } .journey-step::before{ top: 4px; left: 0; } .journey-step--results{ margin-top: 0; margin-left: 0; } } /* ========================================================= 03 · Productos ========================================================= */ .products{ background: var(--warm-white); padding: 120px 0 0; } .products-head{ max-width: var(--container); margin: 0 auto; padding: 0 var(--edge) 64px; } .product-panel{ padding: 90px var(--edge); position: relative; overflow: hidden; } .product-panel__inner{ max-width: var(--container); margin: 0 auto; } .product-panel--lavender{ background: var(--lavender); } .product-panel--blue{ background: var(--powder); } .product-panel--cream{ background: var(--cream); } .product-panel__index{ font-family: var(--mono); font-size: 13px; color: var(--periwinkle-deep); letter-spacing: 0.08em; margin-bottom: 18px; } .product-panel__title{ font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.015em; max-width: 620px; } .product-panel__descriptor{ margin-top: 16px; font-size: 14.5px; letter-spacing: 0.01em; color: var(--text-soft); text-transform: uppercase; font-family: var(--mono); font-size: 12px; } .product-panel__caps{ margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; max-width: 640px; } .product-panel__caps li{ font-size: 14px; padding: 9px 16px; border-radius: var(--radius-full); background: rgba(255,255,255,0.55); border: 1px solid rgba(17,17,17,0.08); color: var(--ink); } .product-panel__copy{ margin-top: 34px; max-width: 560px; font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--ink); } .product-panel__note{ margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(17,17,17,0.12); max-width: 460px; } .product-panel__note span{ font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--periwinkle-deep); } .product-panel__note p{ margin-top: 8px; font-size: 15px; color: var(--text-soft); } .academy-flow{ margin-top: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); } .academy-flow svg{ color: var(--periwinkle-deep); flex-shrink: 0; } @media (max-width: 640px){ .product-panel{ padding: 64px 22px; } } /* ========================================================= 04 · Experiencia & ecosistema ========================================================= */ .ecosystem{ background: var(--lavender); padding: 120px 0; } .eco-grid{ margin-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(17,17,17,0.1); border: 1px solid rgba(17,17,17,0.1); border-radius: var(--radius-md); overflow: hidden; } .eco-card{ background: var(--lavender); padding: 40px 30px; transition: background .4s var(--ease); } .eco-card:hover{ background: rgba(255,255,255,0.5); } .eco-card__num{ font-family: var(--mono); font-size: 12px; color: var(--periwinkle-deep); display:block; margin-bottom: 22px; } .eco-card h3{ font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; } .eco-card p{ font-size: 14.5px; line-height: 1.55; color: var(--text-soft); } @media (max-width: 860px){ .eco-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .eco-grid{ grid-template-columns: 1fr; } } /* ========================================================= 05 · CTA Final ========================================================= */ .cta-final{ background: var(--gradient-warm); color: #fff; padding: 130px 0; text-align: center; position: relative; overflow: hidden; } .cta-final::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.2), transparent 55%); pointer-events: none; } .cta-final .section-inner{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .cta-final__title{ font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; letter-spacing: -0.015em; max-width: 720px; color: #fff; } .cta-final__copy{ margin-top: 22px; max-width: 540px; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.92); } .cta-stack{ margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .cta-stack .plus{ color: #fff; } .btn-split--cta{ margin-top: 46px; } .btn-split--cta .btn-split__left{ background: #fff; color: var(--ink); } .btn-split--cta .btn-split__right{ background: var(--ink); color: #fff; } .cta-final__close{ margin-top: 56px; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.8); } /* ========================================================= 06 · Footer ========================================================= */ .footer{ background: var(--graphite-2); color: var(--warm-white); padding: 90px 0 40px; } .footer-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); } .footer-top{ display: grid; grid-template-columns: 1.6fr repeat(4, 1fr) 1.3fr; gap: 32px; padding-bottom: 70px; border-bottom: 1px solid rgba(250,249,246,0.12); } .footer-brand .logo--footer{ font-size: 20px; color: var(--warm-white); } .footer-brand p{ margin-top: 16px; font-size: 14px; color: var(--on-dark-soft); max-width: 200px; line-height: 1.55; } .footer-col h4{ font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--periwinkle); margin-bottom: 20px; } .footer-col a{ display: block; font-size: 14px; color: var(--on-dark-soft); margin-bottom: 12px; transition: color .3s var(--ease); } .footer-col a:hover{ color: var(--warm-white); } .footer-col--contact p{ font-size: 14px; color: var(--on-dark-soft); line-height: 1.55; margin-bottom: 22px; } .footer-bottom{ padding-top: 34px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-legal{ font-size: 12.5px; color: var(--on-dark-softer); } .footer-loop{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--on-dark-soft); } .footer-loop span{ color: var(--periwinkle); margin: 0 6px; } @media (max-width: 980px){ .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 46px; } } @media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction: column; align-items: flex-start; } } /* ========================================================= Section paddings — responsive rhythm ========================================================= */ @media (max-width: 640px){ .impact{ padding: 90px 0 80px; } .products{ padding: 90px 0 0; } .products-head{ padding-bottom: 46px; } .ecosystem{ padding: 90px 0; } .cta-final{ padding: 90px 0; } .footer{ padding: 70px 0 32px; } .hero{ padding: 120px var(--edge) 80px; } } @media (max-width: 980px){ .hero{ grid-template-columns: 1fr; min-height: auto; padding-top: 120px; } .hero-visual{ order: -1; height: 320px; margin-bottom: 20px; } .hero-orb-wrap{ width: 260px; height: 260px; } .hero-orb-core{ inset: 55px; } .hero-visual__watermark{ font-size: 120px; } } /* ========================================================= NAV — dropdown "Productos" ========================================================= */ .nav-item{ position: relative; } .nav-item > a{ display:flex; align-items:center; gap: 5px; cursor: pointer; } .nav-caret{ transition: transform .3s var(--ease); } .nav-item:hover .nav-caret, .nav-item.open .nav-caret{ transform: rotate(180deg); } .nav-dropdown{ position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 300px; background: var(--ink); border-radius: var(--radius-md); padding: 10px; box-shadow: 0 24px 48px -20px rgba(17,17,17,0.4); opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; z-index: 50; } .nav-item:hover .nav-dropdown, .nav-item.open .nav-dropdown{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown a{ display: block; padding: 13px 16px; border-radius: 10px; transition: background .25s var(--ease); } .nav-dropdown a:hover{ background: rgba(255,255,255,0.06); } .nav-dropdown a strong{ display: block; font-size: 14.5px; font-weight: 600; color: var(--on-dark); } .nav-dropdown a span{ display: block; margin-top: 3px; font-size: 12.5px; color: var(--on-dark-soft); } @media (max-width: 860px){ .nav-dropdown{ position: static; transform: none; opacity: 1; visibility: visible; display: none; box-shadow: none; background: rgba(17,17,17,0.03); margin: 4px var(--edge) 8px; } .nav-item.open .nav-dropdown{ display: block; } .nav-dropdown a strong{ color: var(--ink); } .nav-dropdown a span{ color: var(--text-soft); } } /* ========================================================= Dark-section utility (alternating rhythm) ========================================================= */ .section--dark{ background: var(--ink); color: var(--on-dark); } .section--dark .eyebrow{ color: var(--periwinkle); } .section--dark .section-title{ color: var(--on-dark); } .section--dark .section-lead{ color: var(--on-dark-soft); } /* ========================================================= Cómo trabajamos — dark timeline ========================================================= */ .impact.section--dark .journey-step::before{ background: var(--ink); border-color: var(--periwinkle); } .impact.section--dark .journey-step h3{ color: var(--on-dark); } .impact.section--dark .journey-step p{ color: var(--on-dark-soft); } .impact.section--dark .journey-line{ background: rgba(250,249,246,0.14); } .impact.section--dark .journey-step--results{ background: var(--periwinkle); } .impact.section--dark .journey-step--results h3{ color: var(--ink); } .impact.section--dark .journey-step--results p{ color: rgba(17,17,17,0.7); } .impact.section--dark .journey-step--results .journey-num{ color: var(--ink); } .impact.section--dark .impact-close{ color: var(--on-dark); } /* ========================================================= Productos — resumen (home) con link a página propia ========================================================= */ .product-grid{ margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .product-card{ background: var(--warm-white); border: 1px solid rgba(17,17,17,0.1); border-radius: var(--radius-lg); padding: 40px 32px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .product-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(17,17,17,0.22); border-color: var(--periwinkle); } .product-card__index{ font-family: var(--mono); font-size: 12px; color: var(--periwinkle-deep); letter-spacing: 0.08em; margin-bottom: 22px; display: block; } .product-card h3{ font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 14px; } .product-card p{ font-size: 15px; line-height: 1.6; color: var(--text-soft); min-height: 76px; } .product-card__link{ margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--ink); } .product-card__link svg{ transition: transform .3s var(--ease); color: var(--periwinkle-deep); } .product-card:hover .product-card__link svg{ transform: translateX(4px); } @media (max-width: 900px){ .product-grid{ grid-template-columns: 1fr; } } /* ========================================================= Así se ve una decisión de salud — journey ilustrativo (dark) ========================================================= */ .decision-demo{ background: var(--ink); padding: 120px 0; color: var(--on-dark); } .decision-demo__label{ font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--periwinkle); margin-bottom: 20px; display: block; } .decision-demo__scenario{ font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.6vw, 28px); color: var(--on-dark); max-width: 680px; margin-bottom: 60px; } .decision-flow{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .decision-flow__step{ padding: 12px 18px; border-radius: var(--radius-full); border: 1px solid rgba(250,249,246,0.18); font-size: 14px; color: var(--on-dark-soft); background: rgba(250,249,246,0.03); } .decision-flow__arrow{ color: var(--periwinkle); flex-shrink: 0; } .decision-demo__disclaimer{ margin-top: 50px; font-size: 13px; color: var(--on-dark-softer); max-width: 520px; } /* ========================================================= Ecosistema — stat cards ========================================================= */ .stat-grid{ margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(17,17,17,0.1); border: 1px solid rgba(17,17,17,0.1); border-radius: var(--radius-md); overflow: hidden; } .stat-card{ background: var(--warm-white); padding: 38px 30px; } .stat-card__value{ font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 3vw, 38px); color: var(--periwinkle-deep); letter-spacing: -0.01em; } .stat-card__label{ margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); } @media (max-width: 860px){ .stat-grid{ grid-template-columns: 1fr; } } /* ========================================================= Diferenciación — declaración (dark) ========================================================= */ .differentiator{ background: var(--ink-2); padding: 110px 0; text-align: center; } .differentiator__text{ font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 3vw, 34px); line-height: 1.3; letter-spacing: -0.015em; color: var(--on-dark); max-width: 820px; margin: 0 auto; } .differentiator__text span{ color: var(--on-dark-softer); } /* ========================================================= Product pages — hero + capability cards + diff line ========================================================= */ .product-hero{ padding: 150px var(--edge) 90px; background: var(--warm-white); } .product-hero__inner{ max-width: var(--container); margin: 0 auto; } .product-hero__tag{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--periwinkle-deep); text-transform: uppercase; margin-bottom: 24px; display: block; } .product-hero h1{ font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.015em; max-width: 840px; color: var(--ink); } .product-hero__pain2{ margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--text-soft); max-width: 640px; } .product-hero__meta{ margin-top: 34px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-softer); } .capability-band{ background: var(--ink); padding: 100px 0; } .capability-grid{ margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .capability-card{ background: rgba(250,249,246,0.04); border: 1px solid rgba(250,249,246,0.1); border-radius: var(--radius-lg); padding: 34px 28px; } .capability-card h3{ font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--on-dark); margin-bottom: 12px; } .capability-card p{ font-size: 14.5px; line-height: 1.6; color: var(--on-dark-soft); } @media (max-width: 900px){ .capability-grid{ grid-template-columns: 1fr; } } .product-diff{ background: var(--warm-white); padding: 100px 0; } .product-diff__quote{ font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 32px); line-height: 1.4; color: var(--ink); max-width: 720px; } .product-cta{ background: var(--ink); padding: 110px 0; text-align: center; } .product-cta h2{ font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 3.6vw, 40px); color: var(--on-dark); margin-bottom: 40px; } /* ========================================================= ACADEMIA NAVOA — bloque de estilos propio Reutiliza tokens y componentes existentes (product-hero, capability-band, capability-card, product-diff, product-cta, stat-grid, eco-grid). Solo se agrega lo genuinamente nuevo. ========================================================= */ /* Subnav interna de Academia (Productividad / Herramientas / Comunidad / Empresas) */ .academia-subnav{ background: var(--warm-white); border-bottom: 1px solid rgba(17,17,17,0.08); padding: 18px var(--edge); position: sticky; top: 66px; z-index: 40; } .academia-subnav__inner{ max-width: var(--container); margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; } .academia-subnav a{ font-family: var(--sans); font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: var(--radius-full); border: 1px solid rgba(17,17,17,0.12); color: var(--ink); transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .academia-subnav a:hover, .academia-subnav a.is-active{ background: var(--ink); border-color: var(--ink); color: var(--on-dark); } /* Tag/badge de nivel (No técnico / Intermedio / Técnico) */ .level-badge{ display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-full); background: var(--periwinkle-soft); color: var(--periwinkle-deep); } .level-badge--technical{ background: rgba(17,17,17,0.08); color: var(--text-soft); } /* Grid de módulos (Bloque 2: IA para líderes y organizaciones) */ .module-grid{ margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(250,249,246,0.1); border: 1px solid rgba(250,249,246,0.1); border-radius: var(--radius-md); overflow: hidden; } .module-card{ background: var(--ink); padding: 34px 26px; } .module-card h3{ font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--on-dark); line-height: 1.3; } @media (max-width: 900px){ .module-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .module-grid{ grid-template-columns: 1fr; } } /* Tira de herramientas (Bloque 3) */ .tool-chip-row{ margin-top: 50px; display: flex; flex-wrap: wrap; gap: 14px; } .tool-chip{ padding: 14px 22px; border-radius: var(--radius-full); border: 1px solid rgba(17,17,17,0.14); font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--ink); background: var(--warm-white); } /* Tool card (página Herramientas) */ .tool-grid{ margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tool-card{ background: var(--warm-white); border: 1px solid rgba(17,17,17,0.1); border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; } .tool-card__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .tool-card h3{ font-family: var(--sans); font-weight: 700; font-size: 19px; } .tool-card__category{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--periwinkle-deep); } .tool-card p{ font-size: 14.5px; line-height: 1.6; color: var(--text-soft); } .tool-card__when{ padding-top: 14px; border-top: 1px solid rgba(17,17,17,0.08); font-size: 13.5px; color: var(--text-soft); } .tool-card__when strong{ color: var(--ink); font-weight: 600; display:block; margin-bottom:4px; } .tool-card__cta{ margin-top: 6px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink); } @media (max-width: 900px){ .tool-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .tool-grid{ grid-template-columns: 1fr; } } /* Principios (Bloque 4: Cómo aprendemos) */ .principle-row{ margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .principle-card{ text-align: left; } .principle-card__num{ font-family: var(--mono); font-size: 12px; color: var(--periwinkle-deep); letter-spacing: 0.08em; display:block; margin-bottom: 14px; } .principle-card h3{ font-family: var(--sans); font-weight: 700; font-size: 19px; margin-bottom: 8px; } .principle-card p{ font-size: 14.5px; line-height: 1.6; color: var(--text-soft); } @media (max-width: 860px){ .principle-row{ grid-template-columns: 1fr; } } /* Equipo (Bloque 5) */ .team-grid{ margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .team-card{ background: var(--warm-white); border: 1px solid rgba(17,17,17,0.1); border-radius: var(--radius-lg); padding: 30px 26px; } .team-card__avatar{ width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--periwinkle), var(--periwinkle-deep)); color: var(--on-dark); font-family: var(--sans); font-weight: 700; font-size: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .team-card h3{ font-family: var(--sans); font-weight: 700; font-size: 19px; margin-bottom: 4px; } .team-card__role{ font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--periwinkle-deep); margin-bottom: 16px; display:block; } .team-card__bio{ font-size: 14px; line-height: 1.6; color: var(--text-soft); margin-bottom: 16px; } .team-card__focus{ font-size: 12.5px; color: var(--text-softer); border-top: 1px solid rgba(17,17,17,0.08); padding-top: 14px; } .team-card__focus strong{ color: var(--ink); font-weight:600; } @media (max-width: 900px){ .team-grid{ grid-template-columns: 1fr; } } /* Comunidad — lista de beneficios */ .benefit-list{ margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; } .benefit-list li{ padding-left: 26px; position: relative; font-size: 15px; line-height: 1.6; color: var(--on-dark-soft); } .benefit-list li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--periwinkle); } @media (max-width: 640px){ .benefit-list{ grid-template-columns: 1fr; } } /* Ejemplos "lo que pasa dentro" — claramente marcados como ejemplo */ .example-card{ background: rgba(250,249,246,0.04); border: 1px dashed rgba(250,249,246,0.22); border-radius: var(--radius-md); padding: 24px; } .example-card__tag{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--periwinkle); margin-bottom: 12px; display:block; } .example-card p{ font-size: 14px; line-height: 1.55; color: var(--on-dark-soft); } /* FAQ accordion */ .faq-list{ margin-top: 50px; max-width: 760px; } .faq-item{ border-bottom: 1px solid rgba(17,17,17,0.1); } .faq-item__q{ width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); } .faq-item__q svg{ flex-shrink:0; transition: transform .3s var(--ease); color: var(--periwinkle-deep); } .faq-item.open .faq-item__q svg{ transform: rotate(45deg); } .faq-item__a{ max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .faq-item.open .faq-item__a{ max-height: 260px; } .faq-item__a p{ padding: 0 0 24px; font-size: 14.5px; line-height: 1.65; color: var(--text-soft); max-width: 640px; } /* Programa / temario — lista numerada */ .program-list{ margin-top: 40px; display: flex; flex-direction: column; gap: 0; max-width: 680px; } .program-list li{ display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(250,249,246,0.1); font-size: 15px; line-height: 1.55; color: var(--on-dark-soft); } .program-list li span{ font-family: var(--mono); font-size: 12px; color: var(--periwinkle); flex-shrink: 0; padding-top: 2px; } /* Track cards (Empresas) */ .track-card{ background: var(--warm-white); border: 1px solid rgba(17,17,17,0.1); border-radius: var(--radius-lg); padding: 38px 32px; } .track-card h3{ font-family: var(--sans); font-weight: 700; font-size: 22px; margin-bottom: 6px; } .track-card__for{ font-size: 13.5px; color: var(--periwinkle-deep); font-weight: 600; margin-bottom: 20px; } .track-card ul{ display: flex; flex-direction: column; gap: 10px; } .track-card ul li{ font-size: 14.5px; color: var(--text-soft); padding-left: 20px; position: relative; } .track-card ul li::before{ content:"→"; position:absolute; left:0; color: var(--periwinkle-deep); } .track-grid{ margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 860px){ .track-grid{ grid-template-columns: 1fr; } } /* Placeholder de nota de assets pendientes (visible solo como comentario en código, no en UI) */