/* Fidly · Libreta de ahorro. Landing, páginas legales y alta de prueba. */
@font-face{font-family:Archivo;src:url("../assets/fonts/archivo-latin.woff2") format("woff2");font-weight:400 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("../assets/fonts/martian-mono-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --cover:#0b3b3c;            /* tela de la cubierta */
  --cover-deep:#072b2c;
  --cover-ink:#d9ece5;        /* texto sobre cubierta */
  --cover-soft:#9fcdbf;
  --paper:#eef4ef;            /* hoja de seguridad */
  --paper-hi:#f8fbf8;
  --sheet:#fff;               /* hoja suelta: capturas, plan destacado */
  --paper-rule:#c9dcd3;       /* renglón */
  --paper-rule-strong:#9fbcb0;
  --ink:#1c2b33;              /* tinta de impresora */
  --ink-soft:#4a5c63;         /* >=6:1 sobre --paper */
  --credit:#0b7a63;           /* abono */
  --credit-fill:#25b094;
  --credit-soft:#e6f4ee;
  --debit:#b23a2e;            /* cargo */
  --stamp:#6b3fa0;            /* sello: validado / seleccionado / foco. Solo para eso. */
  --stamp-soft:#efe8f6;
  --shadow:7,43,44;           /* sombras teñidas de cubierta */
  --r:6px;                    /* controles: botones, campos, etiquetas */
  --r-lg:12px;                /* superficies: capturas, bloques, franjas */
  --nav-h:64px;
  --display:Archivo,"Arial Narrow",system-ui,sans-serif;
  --text:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --guilloche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cg fill='none' stroke='%230b3b3c' stroke-width='.6' opacity='.07'%3E%3Cpath d='M0 20c20-18 60-18 80 0s60 18 80 0'/%3E%3Cpath d='M0 20c20 18 60 18 80 0s60-18 80 0'/%3E%3Cpath d='M0 10c20-8 60-8 80 10s60 8 80-10'/%3E%3Cpath d='M0 30c20 8 60 8 80-10s60-8 80 10'/%3E%3C/g%3E%3C/svg%3E");
  --cloth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0M-1 1L1-1M5 7L7 5' stroke='%23ffffff' stroke-width='.5' opacity='.06'/%3E%3C/svg%3E");
  --lp-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --lp-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
  /* alias para páginas legales y de prueba */
  --lp-ink:var(--ink);--lp-muted:var(--ink-soft);--lp-line:var(--paper-rule);--lp-bg:var(--paper);--lp-accent:var(--credit-fill);--lp-accent-text:var(--credit);--lp-brand:var(--cover);--lp-soft:var(--paper-hi);
}

/* Modo oscuro: solo el landing (body.lp-home). Las páginas legales y de prueba
   tienen colores fijos en línea y se quedan en claro. La cubierta no cambia. */
@media (prefers-color-scheme:dark){
  .lp-home{
    color-scheme:dark;
    --paper:#0b1a1b;--paper-hi:#112527;--sheet:#152c2e;
    --paper-rule:#223f40;--paper-rule-strong:#355b5b;
    --ink:#e3eeea;--ink-soft:#a7bdb7;
    --credit:#46c9a9;--credit-fill:#25b094;--credit-soft:#12362f;
    --stamp:#b894e6;--stamp-soft:#2a2140;
    --shadow:0,0,0;
    --guilloche:none;
  }
  .lp-home .lp-btn-primary{background:var(--cover-ink);border-color:var(--cover-ink);color:var(--cover);box-shadow:0 2px 0 var(--cover-soft)}
  .lp-home .lp-btn-primary:hover{background:#fff}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--text);color:var(--ink);background:var(--paper) var(--guilloche)}
::selection{background:var(--stamp);color:#fff}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);color:inherit;text-wrap:balance;margin:0;line-height:1.05;font-weight:800;font-stretch:90%;letter-spacing:-.015em}
p{margin:0}
img{max-width:100%}
.lp-wrap{width:min(1200px,calc(100% - 48px));margin:auto}
.lp-icon{width:24px;height:24px;flex:0 0 auto;fill:currentColor}

/* ---------- Barra superior: lomo de la libreta ---------- */
.lp-nav{position:sticky;top:0;z-index:50;background:var(--cover) var(--cloth);color:var(--cover-ink);border-bottom:1px solid var(--cover-deep)}
.lp-nav-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.lp-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 21px/1 var(--display);letter-spacing:-.01em;color:#fff;flex:0 0 auto}
.lp-brand img{width:32px;height:32px;border-radius:var(--r)}
.lp-nav-links{display:flex;align-items:center;gap:2px}
.lp-nav-links a{position:relative;text-decoration:none;font-size:15px;font-weight:600;color:var(--cover-ink);padding:8px 10px;border-radius:var(--r);white-space:nowrap;transition:color .15s ease,background-color .15s ease}
.lp-nav-links a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--credit-fill);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.lp-nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.lp-nav-links a:hover::after,.lp-nav-links a[aria-current]::after{transform:scaleX(1)}
.lp-nav-links a[aria-current]{color:#fff}
.lp-nav-actions{display:flex;gap:8px;align-items:center}
.lp-menu-btn{display:none;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid rgba(217,236,229,.4);border-radius:var(--r);background:transparent;color:#fff;cursor:pointer}
.lp-menu-btn:hover{border-color:#fff}
.lp-menu-btn .lp-icon + .lp-icon,.lp-nav.is-open .lp-menu-btn .lp-icon:first-child{display:none}
.lp-nav.is-open .lp-menu-btn .lp-icon + .lp-icon{display:block}
.lp-nav-drawer-actions{display:none}

/* ---------- Botones ---------- */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r);border:1.5px solid var(--ink);font:700 16px/1 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;background:transparent;color:var(--ink);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn:active{transform:translateY(1px) scale(.98)}
.lp-btn-primary{background:var(--cover);border-color:var(--cover);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 var(--cover-deep)}
.lp-btn-primary:hover{background:var(--cover-deep);box-shadow:0 10px 22px -12px rgba(var(--shadow),.6)}
.lp-btn-secondary{background:var(--paper-hi);border-color:var(--paper-rule-strong)}
.lp-btn-secondary:hover{border-color:var(--ink)}
.lp-nav .lp-btn-secondary{background:transparent;color:#fff;border-color:rgba(217,236,229,.4)}
.lp-nav .lp-btn-secondary:hover{border-color:#fff}
.lp-nav .lp-btn-primary,.lp-home .lp-nav .lp-btn-primary{background:var(--cover-ink);color:var(--cover);border-color:var(--cover-ink);box-shadow:none}
.lp-nav .lp-btn-primary:hover{background:#fff}
.lp-btn-light{background:var(--cover-ink);color:var(--cover);border-color:var(--cover-ink)}
.lp-btn-light:hover{background:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.lp-btn-ghost-dark{color:#fff;border-color:rgba(217,236,229,.45)}
.lp-btn-ghost-dark:hover{border-color:#fff}
.lp-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Rótulo (máx. 1 cada 3 secciones) ---------- */
.folio{display:block;margin-bottom:16px;font:500 12px/1.4 var(--mono);color:var(--credit);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Hero ---------- */
.lp-hero{padding:56px 0 88px;background:linear-gradient(180deg,var(--paper-hi),var(--paper))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:"head head" "panel copy";column-gap:56px;row-gap:36px;align-items:center}
.hero-head{grid-area:head;max-width:1040px}
.hero-head h1{font-size:clamp(38px,5.2vw,68px);line-height:1.02;letter-spacing:-.025em;font-stretch:84%}
.hero-head h1 em{font-style:normal;color:var(--credit)}
.hero-copy{grid-area:copy;align-self:start}
.hero-copy>p{font-size:19px;color:var(--ink-soft);max-width:42ch}
.hero-copy .lp-actions{margin-top:28px}
.hero-demo{grid-area:panel;margin:0}

/* Render real del panel; toda la captura enlaza a la demo */
.panel-link{position:relative;display:block;text-decoration:none;color:var(--ink);background:var(--sheet);border:1px solid var(--paper-rule-strong);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 70px -36px rgba(var(--shadow),.55);transition:box-shadow .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.panel-link:hover{transform:translateY(-4px);box-shadow:0 52px 84px -34px rgba(var(--shadow),.65)}
.panel-link:focus-visible{outline:2px solid var(--stamp);outline-offset:4px}
.win-shot{display:block;width:100%;height:auto}
.panel-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(7,43,44,.5);color:#fff;font:800 20px/1 var(--display);opacity:0;transition:opacity .22s ease}
.panel-hint .lp-icon{width:44px;height:44px;padding:12px;border-radius:50%;background:var(--cover);box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.panel-link:hover .panel-hint,.panel-link:focus-visible .panel-hint{opacity:1}
.hero-demo figcaption{display:flex;align-items:center;gap:14px;margin-top:18px;color:var(--ink-soft);font-size:15px}

/* Sello: borde doble, rotado, cae una sola vez */
.stamp{display:inline-block;flex:0 0 auto;padding:5px 10px;border:3px double var(--stamp);border-radius:var(--r);color:var(--stamp);font:800 13px/1 var(--display);font-stretch:75%;text-transform:uppercase;letter-spacing:.06em;transform:rotate(-7deg)}
@keyframes stampIn{0%{opacity:0;transform:rotate(-7deg) scale(1.9)}60%{opacity:1;transform:rotate(-7deg) scale(.96)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}

/* ---------- Secciones ---------- */
.lp-section{padding:112px 0}
.lp-section.alt{background:var(--paper-hi)}
.lp-section.cover{background:var(--cover) var(--cloth);color:var(--cover-ink)}
.lp-section-head{margin-bottom:48px;max-width:760px}
.lp-section h2{font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.02em;font-weight:800;font-stretch:88%}
.lp-section.cover h2{color:#fff}
.lp-section-head p{margin-top:16px;font-size:19px;color:var(--ink-soft);max-width:60ch}

/* Funciones: bloque asimétrico con 4 capacidades principales + 5 de apoyo */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{display:flex;flex-direction:column;padding:32px;border-radius:var(--r-lg);background:var(--paper-hi);border:1px solid var(--paper-rule)}
.tile .lp-icon{width:32px;height:32px;margin-bottom:auto;color:var(--credit)}
.tile h3{font-size:26px;margin:40px 0 8px}
.tile p{color:var(--ink-soft);font-size:16px;max-width:46ch}
.tile-caja{grid-column:span 4;background:var(--cover) var(--cloth);border-color:var(--cover-deep);color:var(--cover-ink)}
.tile-caja h3{color:#fff;font-size:clamp(28px,3vw,38px)}
.tile-caja p{color:var(--cover-ink);font-size:18px}
.tile-caja .lp-icon{color:var(--credit-fill)}
.tile-benef{grid-column:span 2}
.tile-app{grid-column:span 2;background:var(--credit-soft);border-color:transparent}
.tile-marca{grid-column:span 4;background:var(--paper-hi) var(--guilloche);border-color:var(--paper-rule-strong)}
.tile-marca h3{font-size:clamp(28px,3vw,38px)}
.support{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.support li{padding-top:18px;border-top:2px solid var(--ink)}
.support .lp-icon{color:var(--credit)}
.support h3{font-size:19px;margin:12px 0 6px}
.support p{color:var(--ink-soft);font-size:15px}

/* Así se ve: renders reales enmarcados */
.showcase{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:40px;align-items:start}
.shot{margin:0}
.shot figcaption{margin-top:16px;color:var(--ink-soft);font-size:16px}
.shot figcaption b{display:block;color:var(--ink);font-size:19px;margin-bottom:2px}
.shot-stack{display:grid;gap:32px}
.frame-cred,.frame-win{border:1px solid var(--paper-rule-strong);border-radius:var(--r-lg);overflow:hidden;background:var(--sheet);box-shadow:0 30px 54px -32px rgba(var(--shadow),.55);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.frame-cred{width:min(340px,100%);margin:auto}
.frame-cred img,.frame-win img{display:block;width:100%;height:auto}
.shot:hover .frame-cred,.shot:hover .frame-win{transform:translateY(-4px)}
.showcase-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:48px}

/* ¿Por qué Fidly?: encabezado fijo a la izquierda, renglones a la derecha */
.why-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.why-grid .lp-section-head{position:sticky;top:calc(var(--nav-h) + 32px);margin:0}
.why{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;margin:0;padding:0;list-style:none}
.why li{padding:24px 0 28px;border-top:1px solid var(--paper-rule-strong)}
.why h3{font-size:22px;margin-bottom:8px}
.why p{color:var(--ink-soft);font-size:16px}

/* Cómo funciona: tira de libro con riel de avance */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.step{position:relative;padding:32px 28px 8px 0}
.step+.step{padding-left:28px;border-left:1px solid var(--paper-rule)}
.step::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--credit-fill);box-shadow:0 0 0 4px var(--paper-hi)}
.step+.step::before{left:28px}
.step h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:16px}
.step .need{margin-top:16px;padding-top:12px;border-top:1px dashed var(--paper-rule-strong);font:500 12px/1.6 var(--mono);color:var(--ink)}
.step .need b{display:block;color:var(--ink-soft);font-weight:500}

/* Demo: franja inset */
.demo-band{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:40px 44px;border-radius:var(--r-lg);background:var(--cover) var(--cloth);color:var(--cover-ink)}
.demo-band h2{font-size:clamp(28px,3.2vw,40px);color:#fff}
.demo-band p{margin-top:10px;font-size:18px;max-width:58ch}

/* ---------- Planes ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--paper-hi);overflow:hidden}
.plan{padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:background-color .2s ease}
.plan+.plan{border-left:1px solid var(--paper-rule-strong)}
.plan.is-featured{background:var(--sheet);box-shadow:inset 0 0 0 2px var(--cover)}
.plan-tag{font:500 12px var(--mono);color:var(--ink-soft)}
.plan.is-featured .plan-tag{align-self:flex-start;padding:3px 8px;border-radius:var(--r);background:var(--cover);color:#fff;font-weight:700}
.plan h3{font-size:30px;font-weight:800;font-stretch:88%;margin:6px 0}
.plan-desc{font-size:15px;color:var(--ink-soft);min-height:48px}
.plan-price{margin:18px 0 0;font:700 clamp(30px,2.7vw,38px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan-price small{font:500 13px var(--text);letter-spacing:0;color:var(--ink-soft)}
.plan-annual{font:500 12px var(--mono);color:var(--ink-soft);margin:8px 0 12px}
.plan-save{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:var(--r);background:var(--credit-soft);color:var(--credit);font:700 11px var(--text);text-transform:uppercase;letter-spacing:.03em;vertical-align:middle}
.plan-trial{align-self:flex-start;font:700 12px var(--mono);color:var(--credit);border:1px solid currentColor;border-radius:var(--r);padding:3px 7px;margin-bottom:16px}
.plan-base{font-size:14px;font-weight:700;padding-top:12px;border-top:1px solid var(--paper-rule)}
.plan ul{list-style:none;padding:0;margin:6px 0 24px;flex:1}
.plan li{display:flex;gap:10px;font-size:15px;padding:6px 0}
.plan li::before{content:"";width:15px;height:15px;margin-top:5px;flex:0 0 auto;background:var(--credit);-webkit-mask:var(--lp-check) center/contain no-repeat;mask:var(--lp-check) center/contain no-repeat}
.plan-more{margin-top:10px;min-height:44px;border:0;background:none;color:var(--ink);font:700 15px var(--text);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.plan-more:hover{color:var(--credit)}
.plans-foot{text-align:center;margin-top:28px}

/* Comparativa: libro mayor; la columna elegida se sella en violeta (selección) */
.compare[hidden]{display:none}
.compare{margin-top:72px}
.compare-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.compare-head h3{font-size:34px;font-weight:800;font-stretch:88%}
.compare-head p{color:var(--ink-soft)}
.pick{display:flex;gap:6px;flex-wrap:wrap}
.pick button{font:700 14px var(--text);min-height:40px;padding:0 14px;border-radius:var(--r);border:1.5px solid var(--paper-rule-strong);background:var(--paper-hi);color:var(--ink-soft);cursor:pointer}
.pick button:hover{border-color:var(--ink);color:var(--ink)}
.pick button[aria-pressed="true"]{border-color:var(--stamp);color:#fff;background:var(--stamp)}
.lp-home .pick button[aria-pressed="true"]{color:var(--paper)}
.table-scroll{overflow:visible;border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--paper-hi)}
@media(max-width:820px){.table-scroll{overflow-x:auto}}
.ledger-table{width:100%;min-width:760px;border-collapse:collapse;font-size:15px;table-layout:fixed}
.ledger-table th:first-child,.ledger-table td:first-child{width:32%;text-align:left}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ledger-table tr.rowIn td,.ledger-table tr.rowIn th{animation:rowIn .25s ease both}
.ledger-table th,.ledger-table td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--paper-rule)}
.ledger-table thead th{font:800 17px var(--display);font-stretch:90%;border-bottom:2px solid var(--ink);background:var(--paper-hi);position:sticky;top:var(--nav-h);z-index:3;box-shadow:0 1px 0 var(--ink)}
.ledger-table tbody th{font-weight:600}
.ledger-table tbody th small{display:block;font-weight:400;font-size:13px;color:var(--ink-soft)}
.ledger-table td{font:500 14px var(--mono);font-variant-numeric:tabular-nums}
.ledger-table .grp th{font:700 12px var(--mono);color:var(--ink-soft);background:var(--paper);padding-top:14px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;user-select:none}
.ledger-table .grp th::after{content:"";float:right;width:8px;height:8px;margin-top:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease}
.ledger-table .grp.open th::after{transform:rotate(45deg)}
.ledger-table .grp th:hover{color:var(--ink)}
.ledger-table .grp th:focus-visible{outline:2px solid var(--stamp);outline-offset:-2px}
.ledger-table .col-on{background:var(--stamp-soft);box-shadow:inset 1.5px 0 0 var(--stamp),inset -1.5px 0 0 var(--stamp)}
.ledger-table thead .col-on{color:var(--stamp)}
.yes,.no{display:inline-block;width:18px;height:18px;vertical-align:middle}
.yes{background:var(--credit);-webkit-mask:var(--lp-check) center/contain no-repeat;mask:var(--lp-check) center/contain no-repeat}
.no{background:var(--paper-rule-strong);-webkit-mask:var(--lp-dash) center/contain no-repeat;mask:var(--lp-dash) center/contain no-repeat}
.custom{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;border:1.5px dashed var(--paper-rule-strong);border-radius:var(--r-lg)}
.custom p{color:var(--ink-soft)}
.custom strong{color:var(--ink)}

/* ---------- Seguridad: dos hojas del libro ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-col>div{padding:28px 30px 12px;background:var(--paper-hi);border:1px solid var(--paper-rule-strong);border-radius:var(--r-lg);box-shadow:0 18px 40px -30px rgba(var(--shadow),.5)}
.two-col h3{font-size:26px;font-weight:800;font-stretch:90%}
.sec-item{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--paper-rule)}
.sec-item:last-child{border-bottom:0}
.sec-item .lp-icon{width:40px;height:40px;padding:8px;border-radius:var(--r);background:var(--credit-soft);color:var(--credit)}
.sec-item strong{display:block;font-size:17px}
.sec-item span{color:var(--ink-soft);font-size:16px}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.faq details{border-bottom:1px solid var(--paper-rule);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 20px/1 var(--mono);color:var(--credit)}
.faq details[open] summary::after{content:"-"}
.faq p{color:var(--ink-soft);margin-top:10px}

/* ---------- Cierre: portada ---------- */
.closing{text-align:center;max-width:820px}
.closing h2{font-size:clamp(38px,5.4vw,72px);font-stretch:84%}
.closing p{margin-top:14px;color:var(--cover-ink);font-size:19px}
.closing .lp-actions{justify-content:center;margin-top:32px}
.closing-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:28px 0 0;padding:0;list-style:none;font-size:15px;color:var(--cover-soft)}
.closing-facts li{display:flex;align-items:center;gap:7px}
.closing-facts li::before{content:"";width:15px;height:15px;background:var(--credit-fill);-webkit-mask:var(--lp-check) center/contain no-repeat;mask:var(--lp-check) center/contain no-repeat}

/* ---------- Pie ---------- */
.lp-footer{background:var(--cover-deep) var(--cloth);color:var(--cover-ink);padding:56px 0 28px}
.lp-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.lp-footer h3{font:700 12px var(--mono);color:var(--cover-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.lp-footer a{display:block;text-decoration:none;color:var(--cover-ink);font-size:15px;margin:9px 0}
.lp-footer a:hover{color:#fff;text-decoration:underline}
.lp-footer-note{color:var(--cover-soft);font-size:15px;max-width:40ch;margin-top:14px}
.lp-copy{border-top:1px solid rgba(159,205,191,.2);margin-top:40px;padding-top:18px;font:500 12px var(--mono);color:var(--cover-soft);display:flex;justify-content:space-between;gap:16px}

/* ---------- Aviso de cookies ---------- */
.lp-cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:100;display:none;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:14px 16px;align-items:center;justify-content:space-between;gap:20px;max-width:880px;margin:auto;box-shadow:0 20px 40px -24px rgba(var(--shadow),.6)}
.lp-cookie p{margin:0;color:var(--ink-soft);font-size:14px}
.lp-cookie-actions{display:flex;gap:8px;flex:0 0 auto}
.lp-cookie .lp-btn{min-height:40px}

/* ---------- Adaptación ---------- */
@media(max-width:1320px){
  .lp-nav-links a{padding:8px 8px;font-size:14px}
  .lp-nav-links a::after{left:8px;right:8px}
}
@media(max-width:1200px){
  /* Menú en cajón bajo la barra */
  .lp-menu-btn{display:grid}
  .lp-nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;background:var(--cover-deep) var(--cloth);border-bottom:1px solid rgba(0,0,0,.3);box-shadow:0 24px 40px -24px rgba(0,0,0,.6);max-height:calc(100dvh - var(--nav-h));overflow-y:auto}
  .lp-nav.is-open .lp-nav-links{display:flex}
  .lp-nav-links a{font-size:18px;padding:14px 4px;border-radius:0;border-bottom:1px solid rgba(159,205,191,.16)}
  .lp-nav-links a::after{left:4px;right:auto;width:28px;bottom:8px}
  .lp-nav-links a:hover{background:transparent}
}
@media(max-width:1060px){

  .hero-grid{grid-template-columns:1fr;grid-template-areas:"head" "copy" "panel";row-gap:28px}
  .hero-demo{max-width:680px}
  .bento{grid-template-columns:1fr 1fr}
  .tile-caja,.tile-marca{grid-column:span 2}
  .tile-benef,.tile-app{grid-column:span 1}
  .support{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .showcase{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr;gap:40px}
  .why-grid .lp-section-head{position:static}
  .two-col{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:24px}
  .step:nth-child(3){padding-left:0;border-left:0}
  .step:nth-child(3)::before{left:0}
  .plans{grid-template-columns:1fr 1fr}.plan:nth-child(3){border-left:0}.plan:nth-child(n+3){border-top:1px solid var(--paper-rule-strong)}
  .lp-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:16px}
  .lp-wrap{width:calc(100% - 32px)}
  .lp-nav-inner{gap:12px}
  .lp-nav-actions .lp-btn{display:none}
  .lp-nav-links{padding:8px 16px 20px}
  .lp-nav-drawer-actions{display:grid;gap:10px;margin-top:20px}
  .lp-nav-drawer-actions .lp-btn{width:100%}
  .lp-hero{padding:32px 0 56px}
  .hero-copy>p{font-size:17px}
  .lp-section{padding:72px 0}
  .lp-section-head{margin-bottom:36px}
  .lp-section-head p{font-size:17px}
  .bento,.support,.why,.steps,.plans,.faq{grid-template-columns:1fr}
  .tile-caja,.tile-marca,.tile-benef,.tile-app{grid-column:auto}
  .tile{padding:24px}
  .tile h3{margin-top:28px}
  /* riel vertical */
  .steps{border-top:0;border-left:2px solid var(--ink);row-gap:0}
  .step,.step+.step,.step:nth-child(3){padding:0 0 32px 28px;border-left:0}
  .step::before,.step+.step::before,.step:nth-child(3)::before{top:6px;left:-7px}
  .demo-band{padding:28px 22px}
  .plan+.plan{border-left:0;border-top:1px solid var(--paper-rule-strong)}
  .demo-band,.custom{grid-template-columns:1fr;display:grid}
  .closing .lp-actions .lp-btn{flex:1 1 100%}
  .lp-footer-grid{grid-template-columns:1fr}
  .lp-copy{display:block}
  .lp-cookie{left:12px;right:12px;bottom:12px;flex-direction:column;align-items:stretch}
  .lp-cookie-actions .lp-btn{flex:1}
}

/* ---------- Movimiento: entrada al hacer scroll + sello del hero ---------- */
@media(prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .js .reveal.in{opacity:1;transform:none}
  .js .reveal:nth-child(2){transition-delay:.06s}
  .js .reveal:nth-child(3){transition-delay:.12s}
  .js .reveal:nth-child(4){transition-delay:.18s}
  .js .reveal:nth-child(5){transition-delay:.24s}
  .hero-demo .stamp{animation:stampIn .5s cubic-bezier(.16,1,.3,1) .6s both}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}