/* ==========================================================================
   LaXON v2 — lenguaje visual revisado tras el análisis de Anthropic y Cloudflare
   · Papel cálido (no blanco frío) + tinta casi negra, como Anthropic
   · Paneles a sangre con "sol" y textura de puntos, guías punteadas y marcas de
     registro en las esquinas, como Cloudflare
   · Serif solo en párrafos de apertura; Geist en 500 (no 600/700) para titulares
   ========================================================================== */
:root { --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --paper2: #ebe7dc; --paper3: #e1dccd; --warm: #1c1b18; }

h1, h2, h3, h4 { font-weight: 500; }
.h2 { font-weight: 500; letter-spacing: -.035em; }
.lead { font-family: var(--serif); font-size: clamp(1.15rem, 1.45vw, 1.38rem); line-height: 1.42; color: var(--mut); max-width: 56ch; }
.dark .lead { color: #bdb9ac; }
.lab { font-family: 'Geist Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.dark .lab { color: #8d897d; }

/* ---------- Logo (versión blanca) ---------- */
.brand .logo { height: 34px; width: auto; }
.brand .wm { height: 20px; width: auto; margin-top: 2px; }

/* ---------- Marcas de registro + guías (Cloudflare) ---------- */
.frame { position: relative; border: 1px dashed var(--fl, #3a3a36); --fb: var(--bg); }
.frame > .k { position: absolute; width: 9px; height: 9px; border: 1px solid var(--fl, #55554e); background: var(--fb, #0a0a0a); z-index: 2; }
.frame > .k.tl { left: -5px; top: -5px; } .frame > .k.tr { right: -5px; top: -5px; } .frame > .k.bl { left: -5px; bottom: -5px; } .frame > .k.br { right: -5px; bottom: -5px; }
.paper .frame, .white .frame, .light .frame { --fl: #bdb7a5; --fb: var(--paper); }
.white .frame { --fb: var(--white); }
.guides { position: relative; }
.guides::before, .guides::after { content: ''; position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #2c2c28; pointer-events: none; }
.guides::before { left: clamp(18px, 4vw, 40px); } .guides::after { right: clamp(18px, 4vw, 40px); }
.paper.guides::before, .paper.guides::after, .white.guides::before, .white.guides::after { border-color: #d3cebd; }

/* ---------- Hero principal: cielo sobre panel a sangre ---------- */
.hp-wrap { background: var(--bg); padding: calc(var(--hdr) + 6px) 8px 8px; }
.hp {
  position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; min-height: max(calc(100svh - var(--hdr) - 14px), 920px);
  display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff;
  background: radial-gradient(120% 78% at 50% 120%, #3f95cc 0%, #1b6b9b 20%, #0c5078 38%, #08324b 62%, #060f17 100%);
}
.hp::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.6px); background-size: 8px 8px; -webkit-mask-image: radial-gradient(95% 75% at 50% 100%, #000 0%, transparent 72%); mask-image: radial-gradient(95% 75% at 50% 100%, #000 0%, transparent 72%); }
.hp::after { content: ''; position: absolute; z-index: 0; left: 50%; bottom: -16%; width: 58%; height: 30%; translate: -50% 0; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(255,247,226,1), rgba(255,236,196,.55) 34%, transparent 70%); filter: blur(10px); }
.hp-top { position: relative; z-index: 3; padding: clamp(34px, 6.5vh, 80px) 20px 0; max-width: 1020px; pointer-events: none; display: grid; justify-items: center; }
.hp-top a, .hp-top button { pointer-events: auto; }
.pill { display: inline-flex; align-items: center; gap: 12px; padding: 5px 5px 5px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; font-size: .84rem; color: #fff; background: rgba(255,255,255,.07); transition: background .25s; }
.pill:hover { background: rgba(255,255,255,.14); }
.pill .d { width: 7px; height: 7px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 0 4px rgba(126,226,168,.2); }
.pill .go { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0c5078; display: grid; place-items: center; }
.pill .go svg { width: 13px; height: 13px; }
.hp h1 { font-size: clamp(2.1rem, 4.1vw, 3.8rem); font-weight: 500; letter-spacing: -.042em; line-height: 1.04; margin: 1.3rem 0 1rem; max-width: 21ch; color: #fff; }
.hp .lead { color: rgba(255,255,255,.8); max-width: 58ch; font-size: clamp(1.1rem,1.3vw,1.28rem); }
.ask { margin-top: clamp(20px, 3.4vh, 38px); display: grid; gap: 12px; justify-items: center; }
.ask .lab { color: rgba(255,255,255,.62); }
.asks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ask-b { display: inline-flex; align-items: center; gap: 10px; padding: .72rem 1.15rem; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); color: #fff; font-weight: 500; font-size: .95rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.ask-b .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cg); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.ask-b svg { width: 14px; height: 14px; opacity: .7; transition: transform .25s var(--ease); }
.ask-b:hover, .ask-b.hot { background: #fff; color: #0a0a0a; border-color: #fff; transform: translateY(-2px); }
.ask-b:hover svg, .ask-b.hot svg { transform: translateX(3px); opacity: 1; }
.hp-sky { position: absolute; inset: 0; z-index: 1; }
.hp-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp .star-tip { z-index: 5; }
.hp-foot { display: none; position: absolute; z-index: 3; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; padding: 0 20px; font-family: 'Geist Mono', monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); pointer-events: none; }
@media (max-width: 760px) {
  .hp { min-height: 0; padding-bottom: 0; }
  .hp-sky { position: relative; inset: auto; width: 100%; height: 560px; margin-top: 8px; }
  .hp-top { padding-top: 34px; }
  .hp-foot { display: none; }
  .hp::after { bottom: -8%; width: 90%; }
}

/* ---------- Tabs de ecosistema ---------- */
.sc { display: grid; gap: 22px; }
.sc-tabs { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-self: start; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab { appearance: none; border: 0; background: none; padding: .6rem 1.05rem; border-radius: 99px; font-weight: 500; font-size: .93rem; display: inline-flex; gap: 9px; align-items: center; color: var(--mut); white-space: nowrap; position: relative; overflow: hidden; transition: color .25s, background .25s; }
.sc-tab i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sc-tab:hover { color: var(--ink); }
.sc-tab.on { background: var(--ink); color: #fff; }
.sc-tab.on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--cg); transform-origin: left; transform: scaleX(var(--prog, 0)); }
.sc-stage { position: relative; border-radius: 26px; padding: clamp(16px, 3vw, 44px); overflow: hidden; background: color-mix(in srgb, var(--c) 13%, var(--paper2)); transition: background .6s; }
.sc-stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--c) 30%, transparent) 1px, transparent 1.5px); background-size: 9px 9px; -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 130%); mask-image: linear-gradient(180deg, transparent 30%, #000 130%); opacity: .5; pointer-events: none; }
.sc-pane { display: none; position: relative; }
.sc-pane.on { display: block; animation: paneIn .6s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.sc-pane .mock-host { max-width: 960px; margin-inline: auto; }
.sc-info { display: grid; grid-template-columns: 1.15fr 1.1fr auto; gap: clamp(20px, 3vw, 48px); align-items: start; padding-top: 6px; }
.sc-info h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -.035em; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sc-info h3 small { font-family: 'Geist Mono', monospace; font-weight: 400; font-size: .72rem; letter-spacing: .06em; color: var(--mut); }
.sc-info p { color: var(--mut); margin-top: .7rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; }
.spec { display: grid; border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; align-items: baseline; }
.spec dt { font-family: 'Geist Mono', monospace; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--mut); }
.spec dd { margin: 0; color: var(--ink2); }
.sc-act { display: grid; gap: 10px; align-content: start; }
@media (max-width: 960px) { .sc-info { grid-template-columns: 1fr; } .sc-act { grid-auto-flow: column; justify-content: start; } }

/* ---------- Filas editoriales (Anthropic) ---------- */
.rows { display: grid; border-top: 1px solid var(--line); }
.rows > a, .rows > div { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease), background .3s; }
.rows > a:hover { padding-left: 14px; background: rgba(0,0,0,.025); }
.rows b { font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.02em; display: block; }
.rows span.s { color: var(--mut); font-size: .93rem; display: block; margin-top: 3px; max-width: 54ch; }
.rows em { font-style: normal; font-family: 'Geist Mono', monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.dark .rows { border-color: #2a2a26; } .dark .rows > div, .dark .rows > a { border-color: #2a2a26; } .dark .rows span.s, .dark .rows em { color: #8d897d; }
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 90px); align-items: start; }
.split > .stick { position: sticky; top: 100px; display: grid; gap: 1.1rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split > .stick { position: static; } }

/* ---------- Plataforma: núcleo + filas ---------- */
.plat2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 70px); align-items: center; }
@media (max-width: 960px) { .plat2 { grid-template-columns: 1fr; } }

/* ---------- Mapa de Bolivia ---------- */
.bo-wrap { position: relative; }
.bo-stage { position: relative; width: 100%; aspect-ratio: 1 / 1.02; max-height: 78vh; margin-inline: auto; }
.bo-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bo-grid { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; gap: clamp(18px, 3vw, 44px); align-items: center; }
.callout { padding: 16px 18px; font-size: .9rem; line-height: 1.45; color: var(--ink2); background: var(--paper); }
.callout b { display: block; font-family: 'Geist Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--reg); font-weight: 500; margin-bottom: 6px; }
.callout .big { font-family: 'Geist Mono', monospace; font-size: 1.7rem; letter-spacing: -.04em; color: var(--ink); display: block; margin: 2px 0 6px; font-weight: 500; }
.callout.dk { background: var(--bg); color: #cfcbbe; } .callout.dk b { color: var(--reg-g); } .callout.dk .big { color: #fff; }
.bo-side { display: grid; gap: 22px; }
@media (max-width: 980px) { .bo-grid { grid-template-columns: 1fr; } .bo-side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bo-side { grid-template-columns: 1fr; } }

/* ---------- Pasos (acompañamiento) ---------- */
.promise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px dashed #bdb7a5; margin-top: 36px; }
.promise > div { padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; border-top: 1px dashed #bdb7a5; }
.promise > div:nth-child(-n+2) { border-top: 0; } .promise > div:nth-child(even) { border-left: 1px dashed #bdb7a5; }
.promise svg { width: 20px; height: 20px; color: var(--reg); flex: none; margin-top: 2px; }
.promise b { font-weight: 500; display: block; }
.promise span { color: var(--mut); font-size: .92rem; }
@media (max-width: 700px) { .promise { grid-template-columns: 1fr; } .promise > div { border-left: 0 !important; border-top: 1px dashed #bdb7a5 !important; } .promise > div:first-child { border-top: 0 !important; } }

/* ---------- CTA "arme su consulta" ---------- */
.cp { position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; background: radial-gradient(110% 120% at 0% 110%, #1b6b9b 0%, #0c5078 30%, #08324b 62%, #060f17 100%); color: #fff; padding: clamp(28px, 5vw, 72px); }
.cp::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.6px); background-size: 8px 8px; -webkit-mask-image: radial-gradient(80% 90% at 0% 100%, #000, transparent 70%); mask-image: radial-gradient(80% 90% at 0% 100%, #000, transparent 70%); }
.cp-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px, 5vw, 80px); align-items: center; }
.cp h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; max-width: 15ch; color: #fff; }
.cp .lead { color: rgba(255,255,255,.8); margin-top: 1.1rem; }
.cp-list { margin-top: 28px; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.2); }
.cp-list li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: .96rem; color: rgba(255,255,255,.92); }
.cp-list svg { width: 18px; height: 18px; color: #7ee2a8; flex: none; }
.cp-already { margin-top: 22px; font-size: .9rem; color: rgba(255,255,255,.7); } .cp-already a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.cb { background: var(--paper); color: var(--ink); border-radius: 20px; padding: clamp(20px, 2.6vw, 34px); display: grid; gap: 20px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.cb h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.cb-q { display: grid; gap: 9px; }
.cb-q > .lab { color: var(--mut); }
.cb-ch { display: flex; flex-wrap: wrap; gap: 7px; }
.cb-ch button { appearance: none; border: 1px solid var(--line); background: var(--white); color: var(--ink2); padding: .5rem .85rem; border-radius: 99px; font-size: .87rem; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; transition: all .2s; }
.cb-ch button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--reg)); }
.cb-ch button:hover { border-color: var(--ink); }
.cb-ch button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cb-msg { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; padding: 14px 16px; border-radius: 14px; background: #e6f0e3; color: #1d3a24; position: relative; border: 1px solid #c8dcc2; }
.cb-msg::before { content: attr(data-lab); position: absolute; top: -9px; left: 14px; background: var(--paper); padding: 0 7px; font: 500 .62rem 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #3b7a4a; }
.cb-act { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-wa { background: #1fa855; color: #fff; } .btn-wa:hover { background: #17924a; transform: translateY(-1px); }
@media (max-width: 900px) { .cp-grid { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.ftr .brand { margin-bottom: 18px; }

/* ---------- Respeto a movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) { .sc-pane.on { animation: none; } }

.hp h1 em, .pp2 h1 em { font-family: 'Bricolage Grotesque', 'Geist', sans-serif; font-style: normal; font-weight: 600; letter-spacing: -.035em; color: var(--cg, #7cc0f5); }
.sc-infos { margin-top: 22px; }
.sc-pane.on .mock-host { overflow: visible; }
.still .hp { min-height: 920px; }

/* menú: "Productos" es un enlace; el desplegable abre con la opción de ver todos */
.nav > .dd > a.ddl { color: #c9ced6; font-size: .92rem; font-weight: 500; padding: .55rem .8rem; border-radius: 8px; transition: color .2s, background .2s; display: inline-flex; align-items: center; gap: .35rem; }
.nav > .dd > a.ddl:hover, .nav > .dd > a.ddl.on { color: #fff; background: rgba(255,255,255,.07); }
.dd:hover .chev, .dd:focus-within .chev { transform: rotate(180deg); }
.mega a.mi.all { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.mega a.mi.all:hover { background: rgba(255,255,255,.1); }
.mega a.mi.all .st { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.mega a.mi.all strong { font-size: 1rem; } .mega a.mi.all > div { flex: 1; }
.mega a.mi.all > svg { width: 18px; height: 18px; color: #fff; opacity: .7; flex: none; }
.bo-grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.6fr) minmax(0, .62fr); }
.bo-stage { aspect-ratio: 1 / .98; max-height: 88vh; }
@media (max-width: 980px) { .bo-grid { grid-template-columns: 1fr; } }

/* ---------- Selector de móvil: título central + flechas ---------- */
.sc-pager { display: none; }
@media (max-width: 720px) {
  .sc-tabs { display: none; }
  .sc-pager { display: grid; grid-template-columns: 46px 1fr 46px; gap: 10px; align-items: center; }
  .pg-b { appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .2s, background .2s; }
  .pg-b:active { transform: scale(.92); background: var(--ink); color: #fff; }
  .pg-mid { display: grid; gap: 8px; justify-items: center; min-width: 0; }
  .pg-t { display: inline-flex; gap: 9px; align-items: center; max-width: 100%; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 99px; background: var(--white); position: relative; overflow: hidden; }
  .pg-t i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .pg-t b { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; white-space: normal; text-align: center; line-height: 1.2; }
  .pg-t::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--cg, #7cc0f5); transform-origin: left; transform: scaleX(var(--prog, 0)); }
  .pg-dots { display: flex; gap: 7px; }
  .pg-dots button { appearance: none; border: 0; padding: 0; width: 7px; height: 7px; border-radius: 99px; background: #cfc9b8; transition: width .3s var(--ease), background .3s; cursor: pointer; }
  .pg-dots button.on { width: 22px; background: var(--ink); }
}