/* ===== EditarPDFgratis — estilos comunes ===== */
:root{
  --s-bg:#E9EDF2; --s-paper:#FFFFFF; --s-ink:#18212F; --s-muted:#5B6678; --s-line:#D2D9E3;
  --s-accent:#2346B8; --s-accent-ink:#FFFFFF; --s-soft:#E3E9FA; --s-deep:#16244F;
  --s-font:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --s-bg:#131820; --s-paper:#1C232D; --s-ink:#E7ECF3; --s-muted:#9AA6B8; --s-line:#2D3744;
    --s-accent:#86A2FF; --s-accent-ink:#0E1420; --s-soft:#243152; --s-deep:#0E1628;
  }
}
:root[data-theme="dark"]{
  --s-bg:#131820; --s-paper:#1C232D; --s-ink:#E7ECF3; --s-muted:#9AA6B8; --s-line:#2D3744;
  --s-accent:#86A2FF; --s-accent-ink:#0E1420; --s-soft:#243152; --s-deep:#0E1628;
}

/* Logo */
.s-logo{display:inline-flex; align-items:center; gap:9px; color:var(--s-ink); text-decoration:none; font-weight:700; font-size:17px; letter-spacing:-.01em; white-space:nowrap}
.s-logo em{font-style:normal; color:var(--s-accent)}
.s-logo svg{flex:none}

/* Page shell for content pages */
.s-page{margin:0; min-height:100%; background:var(--s-bg); color:var(--s-ink); font-family:var(--s-font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
.s-page *, .s-page *::before, .s-page *::after{box-sizing:border-box}
.s-wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.s-page a{color:var(--s-accent)}
.s-page :focus-visible{outline:2px solid var(--s-accent); outline-offset:2px}

.s-head{position:sticky; top:0; z-index:10; background:var(--s-paper); border-bottom:1px solid var(--s-line); padding-top:env(safe-area-inset-top,0px)}
.s-head .s-wrap{display:flex; align-items:center; gap:24px; height:62px}
.s-nav{display:flex; gap:4px; margin-left:auto}
.s-nav a{color:var(--s-ink); text-decoration:none; font-size:15px; font-weight:500; padding:6px 10px; border-radius:6px}
.s-nav a:hover{background:var(--s-bg)}
.s-nav a[aria-current="page"]{color:var(--s-accent); font-weight:600}
.s-cta{display:inline-flex; align-items:center; gap:8px; background:var(--s-accent); color:var(--s-accent-ink) !important; text-decoration:none; font-weight:600; font-size:15px; padding:9px 16px; border-radius:8px; white-space:nowrap}
.s-cta:hover{filter:brightness(1.08)}
.s-cta.big{font-size:17px; padding:14px 22px; border-radius:10px}
.s-cta.alt{background:var(--s-paper); color:var(--s-ink) !important; border:1px solid var(--s-line)}
.s-cta.alt:hover{filter:none; border-color:var(--s-muted)}
.s-menu{display:none; margin-left:auto; position:relative}
.s-menu summary{list-style:none; cursor:pointer; padding:8px 12px; border:1px solid var(--s-line); border-radius:8px; font-weight:600; font-size:15px}
.s-menu summary::-webkit-details-marker{display:none}
.s-menu nav{position:absolute; right:0; top:calc(100% + 8px); background:var(--s-paper); border:1px solid var(--s-line); border-radius:12px; padding:8px; width:240px; box-shadow:0 12px 32px rgba(10,20,40,.14); display:flex; flex-direction:column}
.s-menu nav a{color:var(--s-ink); text-decoration:none; padding:10px 12px; border-radius:8px; font-weight:500}
.s-menu nav a:hover{background:var(--s-bg)}
@media (max-width:900px){ .s-nav{display:none} .s-head .s-cta{display:none} .s-menu{display:block} }

/* Footer (content pages and tool pages) */
.s-foot{background:var(--s-deep); color:#C9D3E6; font-family:var(--s-font); font-size:15px; line-height:1.55; padding:56px 0 calc(28px + env(safe-area-inset-bottom,0px))}
.s-foot .s-wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.s-foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.s-foot .s-logo{color:#fff}
.s-foot .s-logo em{color:#9DB4FF}
.s-foot p{margin:12px 0 0; max-width:34ch; color:#AAB6CC}
.s-foot h3{font-size:14px; font-weight:600; color:#fff; margin:4px 0 10px}
.s-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.s-foot a{color:#C9D3E6; text-decoration:none}
.s-foot a:hover{color:#fff; text-decoration:underline}
.s-foot-bottom{margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; color:#8F9CB5; font-size:14px}
.s-foot-bottom a{color:#C9D3E6; font-weight:600}
@media (max-width:800px){ .s-foot-grid{grid-template-columns:1fr 1fr} .s-foot-grid > :first-child{grid-column:1/-1} }

/* Tool pages: nav inside the app bar */
.s-toolnav{display:flex; gap:2px; margin-left:18px}
.s-toolnav a{color:var(--s-muted); text-decoration:none; font-size:14px; font-weight:500; padding:6px 9px; border-radius:6px; white-space:nowrap}
.s-toolnav a:hover{color:var(--s-ink); background:var(--s-bg)}
.s-toolnav a[aria-current="page"]{color:var(--s-accent); font-weight:600}
@media (max-width:1180px){ .s-toolnav{display:none} }

/* Info section below tools */
.s-info{background:var(--s-paper); border-top:1px solid var(--s-line); font-family:var(--s-font); color:var(--s-ink); font-size:17px; line-height:1.65; padding:64px 0 72px}
.s-info .s-wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.s-info-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:start}
.s-info h1{font-size:clamp(28px,3.4vw,38px); line-height:1.15; letter-spacing:-.015em; margin:0 0 14px}
.s-info h2{font-size:24px; line-height:1.25; letter-spacing:-.01em; margin:44px 0 14px}
.s-info .lead{font-size:19px; color:var(--s-muted); margin:0 0 8px; max-width:62ch}
.s-info p{max-width:66ch; margin:0 0 14px}
.s-info a{color:var(--s-accent)}
.s-steps{counter-reset:st; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:66ch}
.s-steps li{counter-increment:st; position:relative; padding-left:48px; min-height:34px}
.s-steps li::before{content:counter(st); position:absolute; left:0; top:-1px; width:32px; height:32px; border-radius:50%; background:var(--s-soft); color:var(--s-accent); font-weight:700; display:grid; place-items:center; font-size:15px}
.s-faq{max-width:66ch; border-top:1px solid var(--s-line)}
.s-faq details{border-bottom:1px solid var(--s-line); padding:4px 0}
.s-faq summary{cursor:pointer; font-weight:600; padding:12px 32px 12px 0; list-style:none; position:relative}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:""; position:absolute; right:6px; top:20px; width:9px; height:9px; border-right:2px solid var(--s-muted); border-bottom:2px solid var(--s-muted); transform:rotate(45deg); transition:transform .2s}
.s-faq details[open] summary::after{transform:rotate(-135deg); top:24px}
.s-faq details p{margin:0 0 14px; color:var(--s-muted)}
.s-aside{position:sticky; top:24px; border:1px solid var(--s-line); border-radius:14px; padding:20px}
.s-aside h3{font-size:15px; margin:0 0 10px}
.s-aside ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.s-aside li a{display:block; padding:8px 0; color:var(--s-ink); text-decoration:none; border-bottom:1px solid var(--s-line); font-size:15.5px}
.s-aside li:last-child a{border-bottom:0}
.s-aside li a:hover{color:var(--s-accent)}
.s-aside .s-aside-g{margin-top:22px}
@media (max-width:900px){ .s-info-grid{grid-template-columns:1fr; gap:40px} .s-aside{position:static} }

/* ===== Home ===== */
.s-hero{padding:64px 0 72px; overflow:hidden}
.s-hero .s-wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center}
.s-hero h1{font-size:clamp(38px,5.4vw,64px); line-height:1.02; letter-spacing:-.03em; font-weight:700; margin:0 0 20px}
.s-hero h1 span{display:block}
.s-hero .sub{font-size:19px; color:var(--s-muted); max-width:44ch; margin:0 0 28px}
.s-hero .ctas{display:flex; flex-wrap:wrap; gap:12px}
.s-promise{display:flex; flex-wrap:wrap; gap:8px 22px; margin:28px 0 0; padding:0; list-style:none; font-size:15px; color:var(--s-muted)}
.s-promise li{display:flex; align-items:center; gap:8px}
.s-promise svg{color:var(--s-accent); flex:none}

/* The hero document */
.s-doc{position:relative; background:#fff; color:#1b2230; border-radius:4px; aspect-ratio:210/260; max-width:440px; width:100%; justify-self:center; padding:9% 10%; box-shadow:0 2px 4px rgba(20,30,50,.08), 0 30px 60px -20px rgba(20,30,60,.35); transform:rotate(1.5deg); font-family:Helvetica, Arial, sans-serif}
.s-doc .dh{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:9%}
.s-doc .dt{font-size:clamp(15px,2vw,21px); font-weight:700; letter-spacing:.02em}
.s-doc .dn{font-size:11px; color:#667; text-align:right; line-height:1.5}
.s-doc .ln{height:7px; background:#E4E8EE; border-radius:2px; margin:0 0 11px}
.s-doc .row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; padding:9px 0; border-bottom:1px solid #EDF0F4}
.s-doc .edit{position:relative; display:inline-block}
.s-doc .edit s{color:#9aa3b2; text-decoration-color:#B42318; text-decoration-thickness:1.5px; margin-right:6px}
.s-doc .edit b{color:#2346B8; font-weight:700; outline:1.5px solid #2346B8; outline-offset:3px; border-radius:1px}
.s-doc .tot{margin-top:7%; display:flex; justify-content:space-between; font-weight:700; font-size:14px}
.s-doc .sig{position:absolute; right:9%; bottom:9%; width:44%}
.s-doc .sig small{display:block; border-top:1px solid #C9D1DC; font-size:10px; color:#889; padding-top:3px; margin-top:-4px}
.s-doc .tag{position:absolute; right:-20px; top:27%; background:var(--s-accent); color:var(--s-accent-ink); font-family:var(--s-font); font-size:13px; font-weight:600; padding:6px 11px; border-radius:7px; transform:rotate(-3deg); box-shadow:0 8px 20px rgba(35,70,184,.35)}
@media (prefers-reduced-motion: no-preference){
  .s-doc .sig path{stroke-dasharray:420; stroke-dashoffset:420; animation:s-draw 2.2s .5s ease-out forwards}
  @keyframes s-draw{to{stroke-dashoffset:0}}
}
@media (max-width:860px){ .s-hero .s-wrap{grid-template-columns:1fr; gap:48px} .s-hero{padding:40px 0 56px} .s-doc{max-width:360px} }

.s-sec{padding:72px 0}
.s-sec.white{background:var(--s-paper); border-top:1px solid var(--s-line); border-bottom:1px solid var(--s-line)}
.s-sec h2{font-size:clamp(28px,3.4vw,40px); line-height:1.12; letter-spacing:-.02em; margin:0 0 12px}
.s-sec .intro{color:var(--s-muted); font-size:18px; margin:0 0 36px; max-width:56ch}

.s-tools{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--s-line); border:1px solid var(--s-line); border-radius:16px; overflow:hidden}
.s-tool{background:var(--s-paper); padding:26px 26px 28px; text-decoration:none; color:var(--s-ink) !important; display:flex; flex-direction:column; gap:8px; min-height:170px}
.s-tool:hover{background:var(--s-soft)}
.s-tool .ic{width:42px; height:42px; border-radius:10px; background:var(--s-soft); color:var(--s-accent); display:grid; place-items:center; margin-bottom:8px}
.s-tool:hover .ic{background:var(--s-accent); color:var(--s-accent-ink)}
.s-tool h3{margin:0; font-size:19px; letter-spacing:-.01em}
.s-tool p{margin:0; color:var(--s-muted); font-size:15.5px; line-height:1.5}
.s-tool.main{grid-column:span 2; grid-row:span 2; flex-direction:row; align-items:center; gap:28px; background:var(--s-deep); color:#fff !important}
.s-tool.main:hover{background:#1c2d61}
.s-tool.main .ic{width:64px; height:64px; border-radius:14px; background:var(--s-accent); color:#fff; margin:0; flex:none}
.s-tool.main h3{font-size:26px}
.s-tool.main p{color:#B8C4DA; font-size:16.5px; max-width:44ch}
@media (max-width:900px){ .s-tools{grid-template-columns:1fr} .s-tool{min-height:0} .s-tool.main{grid-column:auto; grid-row:auto; flex-direction:column; align-items:flex-start; gap:10px} }

.s-why{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.s-why h3{font-size:20px; margin:0 0 8px; letter-spacing:-.01em}
.s-why p{margin:0; color:var(--s-muted)}
.s-why .num{font-size:44px; font-weight:700; letter-spacing:-.03em; color:var(--s-accent); line-height:1; margin-bottom:14px}
@media (max-width:800px){ .s-why{grid-template-columns:1fr; gap:28px} }

.s-honest{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.s-honest p{margin:0 0 14px; max-width:58ch}
@media (max-width:800px){ .s-honest{grid-template-columns:1fr; gap:24px} }

.s-guides{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px}
.s-guides a{display:block; padding:16px 0; border-bottom:1px solid var(--s-line); color:var(--s-ink); text-decoration:none; font-weight:600; font-size:18px}
.s-guides a span{display:block; font-weight:400; color:var(--s-muted); font-size:15.5px; margin-top:2px}
.s-guides a:hover{color:var(--s-accent)}
@media (max-width:700px){ .s-guides{grid-template-columns:1fr} }

/* Article & legal pages */
.s-article{padding:56px 0 80px}
.s-article .s-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:start}
.s-article h1{font-size:clamp(32px,4.2vw,48px); line-height:1.08; letter-spacing:-.025em; margin:0 0 18px; max-width:22ch}
.s-article .lead{font-size:20px; color:var(--s-muted); margin:0 0 32px; max-width:58ch}
.s-article h2{font-size:25px; line-height:1.25; letter-spacing:-.01em; margin:40px 0 12px}
.s-article p, .s-article li{max-width:66ch}
.s-article p{margin:0 0 16px}
.s-article ol, .s-article ul{padding-left:22px; margin:0 0 18px}
.s-article li{margin-bottom:8px}
.s-article .s-crumbs{font-size:14px; color:var(--s-muted); margin-bottom:18px}
.s-article .s-crumbs a{color:var(--s-muted)}
.s-try{margin:40px 0 0; padding:24px; border-radius:14px; background:var(--s-deep); color:#fff; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; max-width:720px}
.s-try p{margin:0; color:#C9D3E6; max-width:40ch}
.s-try strong{color:#fff}
.s-legal .s-wrap{display:block; max-width:780px}
.s-legal h2{font-size:21px}
.s-legal .upd{color:var(--s-muted); font-size:15px}
.s-fill{background:#FFF3C4; color:#5a4300; padding:0 4px; border-radius:3px}
@media (max-width:900px){ .s-article .s-wrap{grid-template-columns:1fr; gap:40px} }

.s-article .s-aside ul{padding-left:0; margin:0}
.s-article .s-aside li{margin:0; max-width:none}
.s-page .s-head .s-logo{color:var(--s-ink)}