/* Rokan · páginas de contenido (Cómo trabajamos, Preguntas, Contacto, Privacidad, 404) */
.page-h{padding:clamp(24px,3.5vw,48px) 0 clamp(32px,4vw,56px)}
.page-h h1{font-size:clamp(20px,7vw,52px);letter-spacing:.05em;line-height:1.12;margin:0}
.page-h .sub{font-size:clamp(17px,1.5vw,19px);max-width:620px}
.cta{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);padding:clamp(22px,5vw,56px);align-items:center}
@media (min-width:900px){.cta{grid-template-columns:minmax(0,1fr) auto}}
.cta .actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- línea de tiempo ---------- */
.tl{position:relative;padding:clamp(24px,4vw,48px)}
.tl-line{position:absolute;left:calc(clamp(24px,4vw,48px) + 15px);top:clamp(24px,4vw,48px);bottom:clamp(24px,4vw,48px);width:2px;background:var(--lav)}
.tl-fill{position:absolute;inset:0 0 auto 0;height:0;background:var(--violet)}
.tl-step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:20px;padding-bottom:36px}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:9px;background:#fff;border:2px solid var(--lav);display:grid;place-items:center;font:700 13px/1 Inter,sans-serif;color:var(--violet);transition:background .3s,border-color .3s,color .3s}
.tl-step.on .tl-dot{background:var(--violet);border-color:var(--violet);color:#fff}
.tl-body{display:grid;gap:6px 24px;grid-template-columns:minmax(0,1fr);padding-top:3px}
@media (min-width:860px){.tl-body{grid-template-columns:minmax(0,1fr) 220px;align-items:start}}
.tl-body h3{font-size:19px;margin:0 0 4px;line-height:1.3}
.tl-body p{margin:0;color:var(--gray);font-size:15px}
.tl-body ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:14px}
.tl-body li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;line-height:1.45}
.tl-body li::before{content:"";width:6px;height:6px;margin:7px 4px 0;background:var(--violet)}
.tl-pay{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:7px 12px;border-radius:999px;font:600 13px/1.2 Inter,sans-serif;background:var(--indigo);color:#fff}
.tl-pay::before{content:"";flex:none;width:8px;height:8px;background:var(--violetL)}
.tl-pay.soft{background:var(--lav);color:var(--violet)}
.tl-pay.soft::before{background:var(--violet)}
@media (min-width:860px){.tl-pay{justify-self:end}}

/* ---------- cuotas ---------- */
.pay{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.pay{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pay-c{padding:24px;min-width:0}
.pay-bar{display:flex;gap:4px;margin-bottom:18px}
.pay-bar i{flex:1;height:10px;background:var(--lav)}
.pay-bar i.on{background:var(--violet)}
.pay-c small{display:block;font:600 12px/1 Inter,sans-serif;color:var(--violet);margin-bottom:8px}
.pay-c h3{font-size:18px;margin:0 0 4px}
.pay-c p{margin:0;color:var(--gray);font-size:14px}
.pay-note{margin-top:14px;padding:18px 22px;border-radius:var(--r);background:rgba(22,18,58,.03);font-size:14px;color:var(--gray)}
.pay-note b{color:var(--indigo)}

/* ---------- qué necesitamos / qué es tuyo ---------- */
.two{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.box{padding:clamp(22px,4vw,36px);min-width:0}
.box h3{font-size:20px;margin:14px 0 6px}
.box>p{margin:0 0 16px;color:var(--gray)}
.box ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.box li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;line-height:1.45}
.box li::before{content:"";width:18px;height:18px;margin-top:1px;border-radius:5px;background:var(--lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%237B61FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.box li small{display:block;color:var(--gray);font-size:13px}
.box.dark{background:var(--indigo);border-color:var(--indigo);color:var(--lav)}
.box.dark>p,.box.dark li small{color:rgba(236,234,255,.72)}
.box.dark li::before{background-color:rgba(156,139,255,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%239C8BFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pic{flex:none;width:44px;height:44px;border-radius:11px;background:var(--lav);display:grid;place-items:center}
.pic svg{width:21px;height:21px}
.box.dark .pic{background:rgba(156,139,255,.18)}

/* ---------- quiénes somos (sin fotos por ahora) ---------- */
.team{position:relative;overflow:hidden;border-radius:24px;background:var(--indigo);color:var(--lav);padding:clamp(28px,5vw,64px);display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.team{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.team>*:not(.fx-canvas){position:relative;z-index:1}
.team .eyebrow{color:var(--violetL)}
.team p{color:rgba(236,234,255,.78);margin:14px 0 0;max-width:480px}
.vals{display:grid;gap:12px}
.val{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(156,139,255,.2)}
.val b{display:block;color:#fff;font-size:16px}
.val span{font-size:14px;color:rgba(236,234,255,.72)}
.val .pic{background:rgba(156,139,255,.18)}

/* ---------- preguntas frecuentes ---------- */
.faq-app{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(56px,7vw,96px)}
@media (min-width:980px){.faq-app{grid-template-columns:260px minmax(0,1fr);align-items:start;gap:40px}}
.faq-side{display:grid;gap:14px}
@media (min-width:980px){.faq-side{position:sticky;top:96px}}
.faq-search{position:relative}
.faq-search input{width:100%;height:48px;border-radius:12px;border:1.5px solid var(--line);background:#fff;padding:0 14px 0 42px;font:500 15px Inter,sans-serif;color:var(--indigo)}
.faq-search input:focus{border-color:var(--violet);outline:0;box-shadow:0 0 0 3px var(--lav)}
.faq-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--gray)}
.faq-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.faq-cats::-webkit-scrollbar{display:none}
@media (min-width:980px){.faq-cats{flex-direction:column;overflow:visible}}
.faq-cats a{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--gray);white-space:nowrap;background:#fff;border:1px solid var(--line)}
@media (min-width:980px){.faq-cats a{background:transparent;border-color:transparent}}
.faq-cats a:hover{color:var(--indigo)}
.faq-cats a[aria-current=true]{color:var(--indigo);background:#fff;border-color:var(--line);font-weight:600}
.faq-cats a em{font-style:normal;font-size:12px;color:var(--violet);font-weight:600}
.faq-group{margin-bottom:28px}
.faq-group h2{font-size:clamp(17px,2vw,22px);margin:0 0 14px}
.faq-group[hidden]{display:none}
.qa{padding:4px 22px}
.qa details{border-bottom:1px solid var(--line)}
.qa details:last-child{border-bottom:0}
.qa details[hidden]{display:none}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px 18px 0;font-size:16px;font-weight:600;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--violet),var(--violet)) center/12px 2px no-repeat,linear-gradient(var(--violet),var(--violet)) center/2px 12px no-repeat;transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{margin:-4px 0 18px;color:var(--gray);font-size:15px;max-width:640px}
.qa mark{background:var(--lav);color:inherit;border-radius:3px;padding:0 2px}
.faq-empty{padding:28px;text-align:center;color:var(--gray)}
.faq-empty b{display:block;color:var(--indigo);font-size:17px;margin-bottom:4px}
@media (max-width:400px){.val{grid-template-columns:minmax(0,1fr)}}

/* ---------- política de privacidad (sin ronda: sistema aprobado) ---------- */
.doc{padding:clamp(24px,5vw,56px);max-width:860px;min-width:0}
.doc-short{display:grid;gap:10px;margin:0 0 8px;padding:20px 22px;border-radius:12px;background:var(--lav);list-style:none;font-size:15px}
.doc-short li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;line-height:1.45}
.doc-short li::before{content:"";width:18px;height:18px;margin-top:1px;border-radius:5px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%237B61FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.doc h2{font-size:19px;line-height:1.35;margin:36px 0 8px}
.doc p{margin:0 0 12px;color:var(--gray)}
.doc ul:not(.doc-short){list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;color:var(--gray)}
.doc ul:not(.doc-short) li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;line-height:1.5}
.doc ul:not(.doc-short) li::before{content:"";width:6px;height:6px;margin:9px 4px 0;background:var(--violet)}
.doc b{color:var(--indigo)}
.doc a{color:var(--violet);font-weight:600;overflow-wrap:anywhere}
.doc-sign{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--gray)}
.doc-sign b{color:var(--indigo)}

/* ---------- 404 ---------- */
.nf-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.nf-links{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.nf-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.nf-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nf-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 20px;min-width:0;transition:border-color .15s,transform .2s var(--ease)}
.nf-links a:hover{border-color:var(--violetL);transform:translateY(-1px)}
.nf-links b{display:block;font-size:15px}
.nf-links small{display:block;font-size:13px;color:var(--gray)}
.nf-links a::after{content:"→";color:var(--violet);transition:transform .2s var(--ease)}
.nf-links a:hover::after{transform:translateX(3px)}