/* ============================================================ /como-funciona — mismo sistema visual que la landing (static/landing.css): misma paleta, misma tipografía, mismo header/footer/botones/pills/bandas/FAQ/cierre, reutilizados tal cual porque este archivo se carga junto a landing.css y lleva ambas clases ("landing como-funciona"). Acá solo viven las piezas que son NUEVAS o distintas de la landing: el sub-nav pegajoso, la grilla comparativa, las tarjetas de "qué certifica", la sección oscura de la cadena de hash, los pasos del sello de tiempo y las tabs de marco legal. Todo lo que ya existe en landing.css (--lp-*, .lp-band*, .lp-btn*, .lp-pill*, .lp-header*, .lp-eyebrow, .lp-faq*, .lp-cta-*, footer) se usa sin tocarlo — nunca se edita su definición acá, solo se agregan clases nuevas con prefijo cf- para lo que no tiene equivalente en la landing. ============================================================ */ :root:has(body.como-funciona) { scroll-behavior: smooth; } /* ------------------------------------------------------------ Hero — una sola columna (sin tarjeta de evidencia), resplandor arriba a la derecha. ------------------------------------------------------------ */ .cf-hero-glow { position: absolute; top: -15%; right: -10%; width: 900px; height: 700px; background: radial-gradient(circle, rgba(0,107,187,0.12), transparent 68%); pointer-events: none; z-index: 0; } body.landing.como-funciona .lp-hero-copy h1 { font-size: clamp(36px, 5.6vw, 70px); letter-spacing: -0.042em; line-height: 0.99; } body.landing.como-funciona .lp-hero-copy .lp-lead { max-width: 62ch; } /* ------------------------------------------------------------ Sub-nav "en esta página" — barra pegajosa justo debajo del header. ------------------------------------------------------------ */ .cf-subnav { position: sticky; top: 68px; z-index: 40; background: rgba(255,255,255,0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--lp-line-2); border-bottom: 1px solid var(--lp-line-2); } .cf-subnav-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px var(--lp-container-pad); } .cf-subnav-label { font-family: var(--lp-mono-font); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-mono); flex-shrink: 0; } .cf-subnav-links { display: flex; gap: 8px; flex-wrap: wrap; } .cf-subnav-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--lp-line); font-size: 13px; font-weight: 500; color: var(--lp-body); text-decoration: none; transition: border-color 160ms ease; } .cf-subnav-pill:hover { border-color: var(--lp-ink); text-decoration: none; } .cf-subnav-num { font-family: var(--lp-mono-font); font-weight: 500; color: var(--lp-accent); font-size: 12.5px; } /* ------------------------------------------------------------ 01 — Comparación: grilla CSS en vez de , con scroll horizontal propio. ------------------------------------------------------------ */ .cf-compare-wrap { border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden; margin-top: 40px; } .cf-compare-scroll { overflow-x: auto; } .cf-compare-grid { display: grid; grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(150px, 1fr)); min-width: 720px; } .cf-compare-cell { padding: 16px 20px; font-size: 14.5px; color: var(--lp-ink); border-bottom: 1px solid var(--lp-line-2); display: flex; align-items: center; } .cf-compare-grid > .cf-compare-cell:nth-last-child(-n+4) { border-bottom: none; } .cf-compare-head { background: var(--lp-band); font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--lp-line); } .cf-compare-head.cf-compare-label { font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-mono); } .cf-compare-cell.cf-col-highlight { background: rgba(0,107,187,0.06); border-left: 1px solid var(--lp-line); border-right: 1px solid var(--lp-line); } .cf-compare-cell.cf-col-highlight:not(.cf-compare-head) { font-family: var(--lp-mono-font); font-size: 12.5px; color: #00487e; } .cf-compare-cell.cf-no { color: var(--lp-mono); } /* ------------------------------------------------------------ 02 — Qué certifica: tres tarjetas + tarjeta "lo que no certifica". ------------------------------------------------------------ */ .cf-fact-grid { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .cf-fact-card { display: flex; flex-direction: column; border: 1px solid var(--lp-line); border-radius: 18px; overflow: hidden; transition: border-color 160ms ease; } .cf-fact-card:hover { border-color: var(--lp-ink); } .cf-fact-body { padding: 26px; flex: 1; } .cf-fact-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .cf-fact-num { font-family: var(--lp-mono-font); font-weight: 500; color: var(--lp-accent); font-size: 14px; } .cf-fact-head h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .cf-fact-body p { font-size: 14.5px; line-height: 1.65; } .cf-fact-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 26px; background: #f4f6fa; border-top: 1px solid var(--lp-line-2); } .cf-fact-foot-label { font-family: var(--lp-mono-font); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-mono); } .cf-fact-foot-value { font-family: var(--lp-mono-font); font-size: 12.5px; color: var(--lp-ink); } .cf-label-card { border: 1px solid var(--lp-line); border-radius: 18px; padding: 26px; margin-top: 24px; } .cf-label-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .cf-label-sq { width: 7px; height: 7px; flex-shrink: 0; background: var(--lp-ink); } .cf-label-sq.cf-label-sq-accent { background: var(--lp-accent); } .cf-label-text { font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-mono); } .cf-label-card p { font-size: 14.5px; line-height: 1.65; margin: 0; } .cf-label-card p + p { margin-top: 12px; } /* ------------------------------------------------------------ 03 — La cadena de hash (banda oscura). ------------------------------------------------------------ */ .cf-code-grid { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .cf-code-card { border: 1px solid var(--lp-dark-line); border-radius: 16px; overflow: hidden; } .cf-code-card-head { padding: 18px 20px; border-bottom: 1px solid var(--lp-dark-line); } .cf-code-card-head strong { display: block; font-size: 14px; font-weight: 600; color: #ffffff; margin-bottom: 4px; } .cf-code-card-head span { display: block; font-size: 13px; color: #8b97a8; } .cf-code-block { margin: 0; padding: 18px 20px; font-family: var(--lp-mono-font); font-size: 12.5px; line-height: 1.8; color: #8b97a8; white-space: pre-wrap; word-break: break-word; } .cf-code-block .cf-str { color: #8ee6b8; } .cf-code-block .cf-hash { color: var(--lp-accent-dark-bg); } .cf-prop-grid { display: grid; gap: 1px; background: var(--lp-dark-line); grid-template-columns: repeat(auto-fit, minmax(max(46%, 290px), 1fr)); border-radius: 16px; overflow: hidden; margin-top: 24px; } .cf-prop-cell { background: var(--lp-dark); padding: 24px 26px; } .cf-prop-cell strong { display: block; font-size: 15.5px; font-weight: 600; color: #ffffff; margin-bottom: 8px; } .cf-prop-cell p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #a7b2c2; } .cf-industry-grid { display: grid; gap: 20px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .cf-industry-card { border: 1px solid var(--lp-dark-line); border-radius: 16px; padding: 24px; } .cf-industry-tag { display: block; font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-accent-dark-bg); margin-bottom: 12px; } .cf-industry-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #a7b2c2; } .cf-hash-apply-grid { display: grid; gap: clamp(32px, 5vw, 56px); margin-top: 48px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); } .cf-hash-apply-text p { font-size: 14.5px; line-height: 1.7; margin: 0 0 16px; } .cf-hash-apply-text p:last-child { margin-bottom: 0; } .cf-hash-apply-text .cf-emphasis { color: #ffffff; font-weight: 500; } /* El global (static/style.css) trae fondo claro pensado para bandas blancas — sobre esta banda oscura queda una píldora clara con el texto claro heredado del párrafo, contraste 2:1. Se reescribe para la banda oscura en vez de tocar la regla compartida. */ body.landing.como-funciona .lp-band-dark code { background: rgba(255,255,255,0.1); color: var(--lp-accent-dark-bg); } .cf-timeline-card { border: 1px solid var(--lp-dark-line); border-radius: 16px; padding: 26px; } .cf-timeline-title { font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #8b97a8; margin: 0 0 18px; } .cf-timeline { list-style: none; margin: 0; padding: 0; } .cf-timeline li { position: relative; padding: 0 0 22px 26px; border-left: 1.5px solid var(--lp-dark-line); } .cf-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .cf-timeline-dot { position: absolute; left: -6.5px; top: 0; width: 12px; height: 12px; border-radius: 999px; background: var(--lp-dark); border: 1.5px solid var(--lp-accent-dark-bg); } .cf-timeline-name { font-size: 14px; font-weight: 600; color: #ffffff; margin-bottom: 5px; } .cf-timeline-hash { font-family: var(--lp-mono-font); font-size: 11.5px; color: #a7b2c2; overflow-wrap: anywhere; } .cf-timeline-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lp-dark-line); font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #8b97a8; } /* ------------------------------------------------------------ 04 — El sello de tiempo. ------------------------------------------------------------ */ .cf-steps { border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden; margin-top: 40px; } .cf-step-row { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 26px 28px; border-bottom: 1px solid #eef1f5; } .cf-step-row:last-child { border-bottom: none; } .cf-step-num { font-family: var(--lp-display); font-weight: 700; color: #9aa8bb; font-size: clamp(26px, 3vw, 36px); line-height: 1; } .cf-step-body h3 { font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; } .cf-step-body p { font-size: 14.5px; line-height: 1.65; max-width: 82ch; margin: 0; } .cf-note-grid { display: grid; gap: 20px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .cf-note-grid .cf-label-card { margin-top: 0; background: var(--lp-band); } /* ------------------------------------------------------------ 05 — Marco legal: aviso compacto + tabs por país. ------------------------------------------------------------ */ .cf-notice-card { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border: 1px solid var(--lp-line); border-radius: 12px; padding: 16px 20px; margin-top: 24px; } .cf-notice-tag { font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-mono); flex-shrink: 0; } .cf-notice-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lp-body); } .cf-tab-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0.001; } .cf-country-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0 24px; } .cf-country-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--lp-line); background: var(--lp-white); color: #3d4b5e; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; } #tab-cl:checked ~ .cf-country-tabs label[for="tab-cl"], #tab-ar:checked ~ .cf-country-tabs label[for="tab-ar"], #tab-co:checked ~ .cf-country-tabs label[for="tab-co"] { background: var(--lp-ink); color: #ffffff; border-color: transparent; } .cf-country-panel { display: none; } #tab-cl:checked ~ .cf-country-panels #panel-cl, #tab-ar:checked ~ .cf-country-panels #panel-ar, #tab-co:checked ~ .cf-country-panels #panel-co { display: block; } .cf-country-panel-inner { border: 1px solid var(--lp-line); border-radius: 18px; padding: clamp(24px, 4vw, 40px); } .cf-country-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .cf-country-head h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.015em; } .cf-country-tag { font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-accent); } .cf-legal-grid { display: grid; gap: 0 40px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(max(44%, 330px), 1fr)); } .cf-legal-block { padding: 22px 0; border-top: 1px solid var(--lp-line); } .cf-legal-block h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; font-family: var(--lp-display); } .cf-legal-block p { font-size: 14px; line-height: 1.65; max-width: 64ch; margin: 0; } .cf-legal-block p strong { color: var(--lp-ink); } .cf-refs { background: var(--lp-band); border-top: 1px solid var(--lp-line); margin: 32px -1px -1px; padding: 28px clamp(24px, 4vw, 40px); border-radius: 0 0 17px 17px; } .cf-refs-label { display: block; font-family: var(--lp-mono-font); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-mono); margin-bottom: 16px; } .cf-refs-grid { display: grid; gap: 1px; background: var(--lp-line); border-radius: 14px; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .cf-ref-cell { background: var(--lp-white); padding: 18px 20px; } .cf-ref-title { display: block; font-size: 14px; font-weight: 600; color: var(--lp-ink); margin-bottom: 6px; } .cf-ref-desc { display: block; font-size: 13.5px; line-height: 1.55; color: var(--lp-body); margin-bottom: 12px; } .cf-ref-link { font-family: var(--lp-mono-font); font-size: 11.5px; color: var(--lp-accent); text-decoration: none; } .cf-ref-link:hover { text-decoration: underline; } .cf-practice-note { margin-top: 28px; font-size: 14.5px; line-height: 1.65; max-width: 88ch; } /* ------------------------------------------------------------ 06 — Preguntas frecuentes: mismo acordeón de la landing (.lp-faq), con la indentación e ancho del brief para esta página. ------------------------------------------------------------ */ body.como-funciona .lp-faq-answer { padding-left: 0; margin-left: clamp(28px, 4vw, 50px); max-width: 80ch; } /* ------------------------------------------------------------ Responsive de detalle. ------------------------------------------------------------ */ @media (max-width: 680px) { .cf-subnav-inner { gap: 10px; } .cf-refs { margin: 32px 0 0; border-radius: 0; } } @media (max-width: 620px) { .cf-hero-glow { width: 600px; height: 500px; } .cf-fact-foot { flex-direction: column; align-items: flex-start; gap: 4px; } .cf-notice-card { flex-direction: column; gap: 8px; } }