/* generado por build.mjs: tokens copiados de index.html */
:root{
  --stock:#EDE7DA;
  --stock-2:#E3DCCB;
  --ink:#191510;
  --ink-2:#544C40;
  --ink-3:#877D6C;
  --marigold:#E4A017;
  --teal:#0F6F66;
  --hair:#C6BDA9;
  --blend:multiply;
  --on-ink:#EDE7DA;
  --grain:.30;
  --grain-blend:multiply;
  --nav-h:68px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stock:#14120E;
    --stock-2:#1C1913;
    --ink:#F0EADC;
    --ink-2:#B0A794;
    --ink-3:#807768;
    --marigold:#F0B23A;
    --teal:#2E9D8F;
    --hair:#332E25;
    --blend:screen;
    --on-ink:#14120E;
    --grain:.14;
    --grain-blend:screen;
  }
}
:root[data-theme="dark"]{
  --stock:#14120E;
  --stock-2:#1C1913;
  --ink:#F0EADC;
  --ink-2:#B0A794;
  --ink-3:#807768;
  --marigold:#F0B23A;
  --teal:#2E9D8F;
  --hair:#332E25;
  --blend:screen;
  --on-ink:#14120E;
  --grain:.14;
  --grain-blend:screen;
}

/* ============================================================================
   Páginas internas de la landing (funcionalidades, precios, migración, guías).

   Mismo sistema visual que la home —tinta, ámbar, teal, bordes de 2px y la
   sombra corrida de impresión— pero con layout de LECTURA: sin hojas a
   pantalla completa, sin scroll-snap y sin escalado. Son páginas para leer de
   corrido y para que un buscador las entienda; la home es el afiche.

   Los tokens de color (:root y tema oscuro) NO están en este archivo: build.mjs
   los antepone desde el <style> de index.html. Editar los colores allá.
   ========================================================================= */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("/assets/fonts/bricolage-grotesque.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/instrument-sans.woff2") format("woff2")}
@font-face{font-family:"Azeret Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/azeret-mono.woff2") format("woff2")}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--stock);color:var(--ink);font-family:"Instrument Sans",-apple-system,Segoe UI,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.kick{display:block;font-family:"Azeret Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.wrap{max-width:1140px;margin:0 auto;padding:0 30px}
@media(max-width:620px){.wrap{padding:0 20px}}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
[hidden]{display:none!important}

.skip-link{position:fixed;left:16px;top:-80px;z-index:50;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600}
.skip-link:focus{top:12px}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:20;background:var(--stock);border-bottom:2px solid var(--ink)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:26px;letter-spacing:-.06em;font-variation-settings:"wdth" 92}
.logo .brand-mark{width:36px;height:36px;display:block;flex:none;border:1.5px solid var(--ink);border-radius:8px;object-fit:cover;box-shadow:3px 3px 0 var(--ink)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}
.nav a{text-decoration:none}
.nav ul a:hover,.nav-login:hover{color:var(--teal)}
.nav-actions{display:flex;align-items:center;gap:16px}
.nav-login{font-size:15px;font-weight:600}
@media(max-width:1040px){.nav ul{gap:18px;font-size:14px}}
@media(max-width:900px){.nav ul{display:none}}
@media(max-width:620px){.nav-actions{gap:10px}.nav-actions .nav-probar{display:none}.nav-actions .pill-btn{font-size:13px;padding:9px 13px}.logo{font-size:22px}}

.pill-btn{display:inline-block;background:var(--ink);color:var(--on-ink);text-decoration:none;font-weight:600;font-size:15px;line-height:1.3;padding:11px 20px;border-radius:999px;border:2px solid var(--ink);text-align:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.pill-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.pill-btn.hollow{background:transparent;color:var(--ink)}
.pill-btn.hollow:hover{background:transparent;border-color:var(--teal);color:var(--teal)}
.pill-btn.big{font-size:16px;padding:14px 26px}

.whatsapp-chip{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:18;display:flex;align-items:center;gap:9px;padding:11px 15px 11px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--stock);color:var(--ink);box-shadow:5px 6px 0 var(--marigold);font-weight:700;line-height:1;text-decoration:none}
.whatsapp-chip svg{width:22px;height:22px;flex:none;fill:currentColor}
@media(max-width:620px){.whatsapp-chip span{display:none}.whatsapp-chip{padding:11px}}

/* ── migas ───────────────────────────────────────────────────────────── */
.migas ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:22px 0 0;padding:0;font:500 12px/1.4 "Azeret Mono",monospace;letter-spacing:.06em;color:var(--ink-3)}
.migas li+li::before{content:"/";margin-right:6px;opacity:.6}
.migas a{text-decoration:none}
.migas a:hover{color:var(--teal)}

/* ── cabecera de página ─────────────────────────────────────────────── */
.cabecera{padding:clamp(34px,6vw,72px) 0 clamp(30px,5vw,56px);border-bottom:2px solid var(--ink)}
.cabecera-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.cabecera h1{font-size:clamp(38px,5.6vw,68px);line-height:.98;font-variation-settings:"wdth" 84;margin-top:14px}
.cabecera .bajada{margin-top:20px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--ink-2);max-width:52ch}
.cabecera .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cabecera figure{margin:0}
@media(max-width:900px){.cabecera-grid{grid-template-columns:1fr}}

/* ilustraciones de producto: representaciones de pantallas reales */
.lamina{border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--stock-2);box-shadow:9px 10px 0 var(--marigold);transform:rotate(-.6deg)}
.lamina img{display:block;width:100%;height:auto}
.lamina-nota{margin-top:12px;font-size:12.5px;color:var(--ink-3)}

/* ── bloques de lectura ─────────────────────────────────────────────── */
.bloque{padding:clamp(40px,6vw,76px) 0;border-bottom:2px solid var(--ink)}
.bloque > .wrap > h2,.bloque h2.titulo{font-size:clamp(28px,3.6vw,44px);line-height:1.02;font-variation-settings:"wdth" 86;max-width:22ch}
.bloque .intro{margin-top:16px;color:var(--ink-2);max-width:62ch;font-size:18px}
.prosa{max-width:68ch}
.prosa p{margin-top:16px;color:var(--ink-2)}
.prosa p:first-child{margin-top:0}
.prosa h3{margin-top:30px;font-size:22px;line-height:1.2}
.prosa ul,.prosa ol{margin:14px 0 0;padding-left:22px;color:var(--ink-2)}
.prosa li{margin-top:7px}
.prosa strong{color:var(--ink)}
.prosa a{color:var(--teal);font-weight:600}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;margin-top:30px}
@media(max-width:860px){.dos-col{grid-template-columns:1fr}}

/* pasos numerados */
.pasos{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;counter-reset:paso}
.pasos li{position:relative;border:2px solid var(--ink);border-radius:16px;padding:46px 20px 20px;background:var(--stock);counter-increment:paso}
.pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:-2px;top:-2px;padding:6px 11px;border-radius:14px 0 11px 0;background:var(--ink);color:var(--on-ink);font:500 11px/1 "Azeret Mono",monospace;letter-spacing:.15em}
.pasos li:nth-child(even)::before{background:var(--marigold);color:#191510}
.pasos h3{font-size:19px;line-height:1.2}
.pasos p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* tarjetas de características */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:30px}
.tarjeta{border:2px solid var(--ink);border-radius:16px;padding:22px;background:var(--stock);display:flex;flex-direction:column;gap:10px}
.tarjeta h3{font-size:20px;line-height:1.15}
.tarjeta p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.tarjeta a.mas{margin-top:auto;padding-top:6px;font-weight:600;color:var(--teal);text-decoration:none}
.tarjeta a.mas:hover{text-decoration:underline}
.tarjeta.tinta{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tarjeta.tinta p{color:var(--ink-3)}
.tarjeta.tinta a.mas{color:var(--marigold)}
.tarjeta.ambar{background:var(--marigold);color:#191510}
.tarjeta.ambar p{color:rgba(25,21,16,.75)}
.tarjeta.ambar .kick{color:rgba(25,21,16,.62)}
.tarjeta.ambar a.mas{color:#191510}
.tarjeta.teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.tarjeta.teal p{color:rgba(255,255,255,.82)}
.tarjeta.teal .kick{color:rgba(255,255,255,.7)}
.tarjeta.teal a.mas{color:#fff}

/* lo que no hace: honestidad visible */

/* tabla (precios, comparaciones) */
.tabla-wrap{margin-top:30px;overflow-x:auto;border:2px solid var(--ink);border-radius:16px}
table{width:100%;border-collapse:collapse;font-size:15px}
@media(max-width:620px){th,td{padding:12px 14px}table{font-size:14px}}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--hair);vertical-align:top}
thead th{font:500 11px/1.3 "Azeret Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--stock-2)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody th{font-weight:700}
td.precio{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.03em;white-space:nowrap}


/* ── preguntas (mismo componente que la home) ───────────────────────── */
.faq-bloque{max-width:1140px;margin:0 auto;padding-left:30px;padding-right:30px;border-bottom:0}
.faq-bloque h2{font-size:clamp(28px,3.6vw,44px);line-height:1.02;font-variation-settings:"wdth" 86}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;margin-top:28px}
.faq-col{display:flex;flex-direction:column;gap:12px}
.faq-item{border:2px solid var(--ink);border-radius:16px;background:var(--stock)}
.faq-item[open]{box-shadow:6px 7px 0 var(--marigold)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;font-size:17px;line-height:1.25;letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:999px;font:500 17px/1 "Instrument Sans",sans-serif;transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg);background:var(--marigold);color:#191510;border-color:var(--marigold)}
.faq-item summary:hover{color:var(--teal)}
.faq-item p{padding:0 18px 17px;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media(max-width:900px){.faq{grid-template-columns:1fr}}
@media(max-width:620px){.faq-bloque{padding-left:20px;padding-right:20px}}

/* ── cierre y pie ───────────────────────────────────────────────────── */
.cierre{background:var(--teal);color:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:clamp(40px,6vw,72px) 0}
.cierre .kick{color:rgba(255,255,255,.75)}
.cierre h2{margin-top:12px;font-size:clamp(30px,4.2vw,52px);line-height:1;font-variation-settings:"wdth" 84;max-width:16ch}
.cierre p{margin-top:14px;color:rgba(255,255,255,.85);max-width:48ch}
.cierre-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.cierre-acts{display:flex;flex-wrap:wrap;gap:12px}
.cierre .pill-btn{background:var(--stock);color:var(--ink);border-color:var(--stock)}
.cierre .pill-btn:hover{background:var(--marigold);border-color:var(--marigold);color:#191510}
.cierre .pill-btn.hollow{background:transparent;color:#fff;border-color:#fff}
.cierre .pill-btn.hollow:hover{background:transparent;border-color:var(--marigold);color:var(--marigold)}
@media(max-width:760px){.cierre-grid{grid-template-columns:1fr}}

.pie{padding:44px 0 90px;font-size:14px;color:var(--ink-2)}
.pie-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.pie-marca{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pie-marca .logo{font-size:19px}
.pie-marca .brand-mark{width:24px;height:24px;border-radius:6px;box-shadow:2px 2px 0 var(--ink)}
.pie h2{font:500 11px/1.3 "Azeret Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--teal)}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}

/* ── guías ──────────────────────────────────────────────────────────── */
.articulo{padding:clamp(36px,5vw,64px) 0;border-bottom:2px solid var(--ink)}
.articulo .prosa{max-width:70ch}
.articulo .prosa h2{margin-top:44px;font-size:clamp(25px,2.8vw,34px);line-height:1.08;font-variation-settings:"wdth" 88}
.articulo .prosa h2:first-child{margin-top:0}
.articulo .prosa table{min-width:0;margin-top:16px;font-size:15px}
.articulo .prosa .tabla-wrap{margin-top:18px}
.resumen{margin-top:26px;border:2px solid var(--ink);border-radius:16px;padding:20px 22px;background:var(--stock-2);max-width:70ch}
.resumen .kick{margin-bottom:8px}
.resumen p{color:var(--ink)}
.formula{margin:18px 0 0;padding:16px 20px;border-left:4px solid var(--marigold);background:var(--stock-2);border-radius:0 12px 12px 0;font-family:"Azeret Mono",monospace;font-size:14.5px;line-height:1.7;color:var(--ink);overflow-x:auto}
.descarga{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.lista-guias{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:30px}
.tarjeta h2.h3{font-size:20px;line-height:1.15;letter-spacing:-.02em}

/* ── letra chica ────────────────────────────────────────────────────── */
.letra-chica{font-size:12.5px !important;line-height:1.5;color:var(--ink-2) !important}