/* ==========================================================================
   components.css — piezas reutilizables
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(40px, 6vw, 80px); position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 30px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--text-dim); font-size: var(--fs-0); }
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }

/* Panel de rutas: "¿qué necesitas hoy?" — pieza central del home */
.routes { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); overflow: hidden; }
.routes-head { padding: 18px 22px; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-2); }
.route { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); transition: background .2s; }
.route:last-child { border-bottom: 0; }
.route:hover { background: var(--accent-dim); }
.route-title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-2); line-height: 1.2; }
.route-desc { grid-column: 1; color: var(--text-dim); font-size: var(--fs-0); }
.route-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: var(--fs-0); white-space: nowrap; }
.route-cta svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.route:hover .route-cta svg { transform: translateX(3px); }
.route-price { color: var(--text); font-weight: 600; }
@media (max-width: 480px) { .route { grid-template-columns: 1fr; } .route-cta { grid-column: 1; grid-row: auto; margin-top: 4px; } }

/* ---------- Franja de confianza ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.fact { padding: 22px 24px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact b { display: block; font-family: var(--font-head); font-size: var(--fs-2); margin-bottom: 2px; }
.fact span { color: var(--text-dim); font-size: var(--fs-0); }
@media (max-width: 800px) { .facts { grid-template-columns: 1fr 1fr; } .fact:nth-child(2) { border-right: 0; } .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- Lista con visto ---------- */
.checks li { position: relative; padding: 6px 0 6px 28px; color: var(--text-dim); font-size: var(--fs-0); }
.checks li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-3px); }
.checks--no li::before { border: 0; width: 12px; height: 2px; background: var(--muted); transform: none; top: 17px; }
.checks--lg li { font-size: var(--fs-1); color: var(--text); }

/* ---------- Paquetes de desarrollo (pago único) ---------- */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.package { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.package--featured { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-dim), rgba(121,192,255,.02)); position: relative; }
.package-flag { position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.package h3 { margin-bottom: 6px; }
.package-price { font-family: var(--font-head); font-size: var(--fs-4); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 4px; }
.package-price small { font-family: var(--font-body); font-size: var(--fs-0); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.package-for { color: var(--text-dim); font-size: var(--fs-0); margin: 10px 0 14px; }
.package .checks { margin-bottom: 24px; flex: 1; }
@media (max-width: 920px) { .packages { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Planes mensuales ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 26px; background: var(--surface); position: relative; }
.plan--featured { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-dim), rgba(121,192,255,.02)); }
.plan h3 { margin-bottom: 4px; }
.plan-tagline { color: var(--text-dim); font-size: var(--fs-0); min-height: 3em; }
.plan-price { font-family: var(--font-head); font-size: var(--fs-4); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 18px; }
.plan-price small { font-family: var(--font-body); font-size: var(--fs-0); font-weight: 500; color: var(--muted); margin-left: 4px; }
.plan h4 { font-size: var(--fs-0); color: var(--text); margin: 16px 0 4px; }
.plan .btn { margin-top: auto; }
.plan-body { margin-bottom: 24px; flex: 1; }
.plan-next { margin-top: 12px; color: var(--muted); font-size: var(--fs-0); }
@media (max-width: 920px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan-tagline { min-height: 0; } }

/* ---------- Lista de precios (soporte) — filas con regla, no tarjetas ---------- */
.pricelist { border-top: 1px solid var(--line); }
.pricelist-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.pricelist-name { font-weight: 600; }
.pricelist-note { grid-column: 1; color: var(--text-dim); font-size: var(--fs-0); }
.pricelist-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--font-head); font-size: var(--fs-3); font-weight: 700; white-space: nowrap; }
.pricelist-price small { display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 500; color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 920px) { .split, .split--even { grid-template-columns: minmax(0, 1fr); } }
.sticky-col { position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 920px) { .sticky-col { position: static; } }

/* Tabs CSS-only (radio) */
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs-list { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs-list label { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); font-weight: 600; font-size: var(--fs-0); cursor: pointer; transition: all .18s; }
.tabs-list label:hover { border-color: var(--accent-line); color: var(--text); }
.tab-panel { display: none; }
.tabs > input:nth-of-type(1):checked ~ .tabs-list label:nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .tabs-list label:nth-child(2) { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }
.tabs > input:nth-of-type(3):checked ~ .tabs-list label:nth-child(3) { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }
.tabs > input:nth-of-type(1):checked ~ .tab-panels .tab-panel:nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .tab-panels .tab-panel:nth-child(2) { display: block; }
.tabs > input:nth-of-type(3):checked ~ .tab-panels .tab-panel:nth-child(3) { display: block; }
.tabs > input:focus-visible ~ .tabs-list label { outline-offset: 2px; }

/* ---------- Servicios de instalación ---------- */
.install-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.install { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.install:nth-child(2n) { border-right: 0; } .install:nth-last-child(-n+2) { border-bottom: 0; }
.install h3 { margin-bottom: 10px; font-size: var(--fs-1); }
@media (max-width: 640px) { .install-grid { grid-template-columns: 1fr; } .install { border-right: 0 !important; } .install:nth-last-child(2) { border-bottom: 1px solid var(--line); } }

/* ---------- Acordeones (details nativo) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 4px; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-2); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); transition: transform .25s var(--ease); flex: none; }
.acc details[open] > summary::after { transform: rotate(-135deg); border-color: var(--accent); }
.acc summary:hover { color: var(--accent); }
.acc-body { padding: 0 4px 26px; color: var(--text-dim); }
.acc-body > * + * { margin-top: 14px; }
.acc-sub { color: var(--text-dim); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-0); margin-left: 4px; }
.mod-letter { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--accent); border-radius: 9px; font-family: var(--font-head); font-size: var(--fs-0); flex: none; }
.mod-services { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 8px; }
.mod-service { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.mod-service b { color: var(--text); font-weight: 600; }
.mod-service small { display: block; color: var(--muted); font-size: var(--fs-0); }
.mod-service .price { font-family: var(--font-head); font-weight: 700; color: var(--accent); white-space: nowrap; }
.mod-service .price small { display: inline; color: var(--muted); font-family: var(--font-body); font-weight: 400; margin-right: 4px; }

/* ---------- Casos / portafolio ---------- */
.case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 56px); padding-block: 40px; border-top: 1px solid var(--line); }
.case:last-child { border-bottom: 1px solid var(--line); }
.case-meta .tag { color: var(--accent); font-size: var(--fs-0); font-weight: 600; }
.case-meta h3 { font-size: var(--fs-3); margin: 6px 0 10px; }
.case-meta .stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { display: inline-block; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); font-size: .8125rem; }
.case-body dl { display: grid; grid-template-columns: 110px 1fr; gap: 14px 18px; }
.case-body dt { color: var(--muted); font-size: var(--fs-0); padding-top: 2px; }
.case-body dd { color: var(--text-dim); }
.case-body dd.result { color: var(--text); font-weight: 500; }
.case-links { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 800px) { .case { grid-template-columns: 1fr; } .case-body dl { grid-template-columns: 1fr; gap: 2px; } .case-body dt { margin-top: 12px; } }

.case-teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-teaser { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .2s, background .2s; }
.case-teaser:hover { border-color: var(--accent-line); background: var(--accent-dim); }
.case-teaser .tag { color: var(--accent); font-size: var(--fs-0); font-weight: 600; }
.case-teaser p { color: var(--text-dim); font-size: var(--fs-0); }
.case-teaser .more { margin-top: auto; padding-top: 10px; color: var(--accent); font-weight: 600; font-size: var(--fs-0); }
@media (max-width: 920px) { .case-teasers { grid-template-columns: minmax(0, 1fr); } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.filter { padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); font-weight: 600; font-size: var(--fs-0); transition: all .18s; }
.filter:hover { border-color: var(--accent-line); color: var(--text); }
.filter.is-active { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }

/* ---------- Proceso (secuencia real → numeración justificada) ---------- */
.steps { counter-reset: step; display: grid; gap: 0; border-left: 1px solid var(--line); margin-left: 17px; }
.step { position: relative; padding: 0 0 36px 36px; }
.step:last-child { padding-bottom: 0; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: -18px; top: -2px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent-line); color: var(--accent); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-0); }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--text-dim); max-width: 62ch; }
.step .link { display: inline-block; margin-top: 10px; font-size: var(--fs-0); }
.steps--compact { display: grid; grid-template-columns: repeat(4, 1fr); border: 0; margin: 0; gap: 20px; }
.steps--compact .step { padding: 22px 0 0 0; border-top: 1px solid var(--line); }
.steps--compact .step::before { position: static; margin-bottom: 14px; }
.steps--compact .step p { font-size: var(--fs-0); }
@media (max-width: 900px) { .steps--compact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps--compact { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-band { border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: clamp(32px, 5vw, 56px); background: radial-gradient(700px 260px at 80% 0%, rgba(121,192,255,.16), transparent 70%), var(--bg-raised); display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--text-dim); }
.cta-band .btn-row { justify-content: flex-end; }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; } }

/* ---------- Encabezado de página interna ---------- */
.page-hero { padding-block: clamp(36px, 6vw, 80px) clamp(24px, 4vw, 48px); position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--fs-4); font-weight: 800; margin-bottom: 16px; max-width: 20ch; }
.page-hero--wide h1 { max-width: 26ch; }
.crumbs { color: var(--muted); font-size: var(--fs-0); margin-bottom: 18px; }
.crumbs a:hover { color: var(--accent); }

/* ---------- Avisos / pie de tabla ---------- */
.note { color: var(--muted); font-size: var(--fs-0); margin-top: 14px; }
.callout { border: 1px solid var(--accent-line); background: var(--accent-dim); border-radius: var(--r-md); padding: 18px 22px; color: var(--text); }
.callout strong { color: var(--accent); }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; font-size: var(--fs-0); font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field .hint { color: var(--muted); font-weight: 400; }
.input, .select, .textarea { width: 100%; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text); font: inherit; padding: 13px 14px; min-height: 48px; transition: border-color .18s, box-shadow .18s; }
.textarea { min-height: 130px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; font-size: var(--fs-0); }
.form-status.is-ok { color: var(--ok); } .form-status.is-error { color: var(--danger); }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { margin: 0; font-weight: 500; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; color: var(--text-dim); transition: all .18s; }
.choice input:checked + span { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .contact-layout { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: clamp(22px, 3.5vw, 36px); }
.contact-list { display: grid; gap: 0; }
.contact-item { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-item:first-child { padding-top: 0; }
.contact-item svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.contact-item h4 { margin-bottom: 2px; }
.contact-item p, .contact-item a { color: var(--text-dim); font-size: var(--fs-0); }
.contact-item a:hover { color: var(--accent); }

/* ---------- Demos ---------- */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.demo-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); transition: border-color .2s, transform .2s var(--ease); }
.demo-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.demo-card img, .demo-ph { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--bg-raised); }
.demo-info { padding: 16px 18px 20px; }
.demo-info .tag { color: var(--accent); font-size: var(--fs-0); font-weight: 600; }
.demo-info h3 { margin: 4px 0; }
.demo-info p { color: var(--text-dim); font-size: var(--fs-0); }

/* ---------- Onboarding ---------- */
.onb-progress { margin-bottom: 28px; }
.onb-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-bottom: 10px; }
.onb-track span { height: 4px; border-radius: 4px; background: var(--line-strong); transition: background .3s; }
.onb-track span.is-filled { background: var(--accent); }
.onb-step { display: none; gap: 18px; }
.onb-step.is-active { display: grid; }
.onb-step h2 { font-size: var(--fs-3); }
.onb-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }

/* ---------- Portal de clientes ---------- */
.doc-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.doc-row b { display: block; word-break: break-word; }
.doc-row small { display: block; color: var(--muted); font-size: var(--fs-0); }
.doc-ico { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent); font-family: var(--font-head); font-weight: 700; font-size: .75rem; }
.doc-actions { display: flex; gap: 8px; }
a.doc-row:hover { background: var(--accent-dim); }
@media (max-width: 560px) { .doc-row { grid-template-columns: 48px 1fr; } .doc-actions { grid-column: 1 / -1; } }

/* ---------- Portal · Credenciales ---------- */
.cred-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cred-toolbar .input { flex: 1 1 240px; min-height: 38px; padding: 8px 16px; border-radius: 999px; }
.cred-list { display: grid; gap: 16px; }
.cred-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 20px; }
.cred-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.cred-head h2 { font-size: var(--fs-2); }
.cred-head p { color: var(--text-dim); font-size: var(--fs-0); margin-top: 2px; }
.cred-open { margin-left: auto; flex: none; }
.cred-field { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.cred-label { color: var(--muted); font-size: var(--fs-0); }
.cred-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; user-select: all; }
.cred-val.is-masked { letter-spacing: .18em; color: var(--muted); user-select: none; }
.cred-acts { display: flex; gap: 6px; }
.cred-note { margin-top: 12px; font-size: var(--fs-0); padding: 12px 16px; }
@media (max-width: 560px) {
  .cred-field { grid-template-columns: minmax(0, 1fr) auto; }
  .cred-label { grid-column: 1 / -1; }
  .cred-head { flex-wrap: wrap; }
  .cred-open { margin-left: 0; }
}

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 120; background: var(--ok); color: #04241a; font-weight: 600; font-size: var(--fs-0); padding: 10px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.toast.is-error { background: var(--danger); color: #2a0806; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media print { .cred-toolbar, .cred-acts, .cred-open, .toast { display: none !important; } }