/* comparti.do — sitio promocional público
   Public Sans (display) + Hanken Grotesk (texto) · acento de marca #FBBF24
   Estático. No referencia ningún path de app.comparti.do. */

:root{
  --paper:#FAF7F0; --paper2:#F2ECE0; --surface:#FFFFFF;
  --line:#E8E1D3; --line2:#DAD1BF;
  --ink:#1B1814; --ink2:#4A443B; --muted:#6B6357; --faint:#9A9083;
  --dark:#14120E; --dark2:#1E1B16; --dark3:#191710; --darkest:#0F0D0A;
  --dline:#2E2A22; --dline2:#464034; --dtxt:#F5F1E8; --dmuted:#A7A096; --dfaint:#6F675A;
  --brand:#FBBF24; --brand-hi:#FFCE4F; --brand-lo:#E8AC15;
  --fin:#10B981; --task:#F57974; --cal:#6D7CFF;
  --pw:#FCFE48; --pf:#34C6D9;
  --disp:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:10px; --rc:14px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
::selection{background:var(--brand); color:var(--dark)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}

.container{max-width:1160px; margin-inline:auto; padding-inline:var(--s6)}
.menu{display:none}
.site-header.open .menu{display:flex}
.tnum{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:999;background:var(--brand);color:var(--dark);
  padding:12px 16px;border-radius:var(--r);font:700 14px/1 var(--disp)}

/* ---------- marca ---------- */
.wordmark{display:flex; align-items:center; gap:10px}
.wordmark span{font:800 19px/1 var(--disp); letter-spacing:-.02em; color:var(--dtxt)}
.wordmark b{color:var(--brand); font-weight:800}
.eyebrow{display:flex; align-items:center; gap:8px; margin-bottom:26px}
.eyebrow i{width:6px; height:6px; border-radius:2px; background:var(--brand)}
.eyebrow span{font:700 12px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase; color:var(--dmuted)}
.kicker{font:700 12px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:18px}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r);
  font-family:var(--disp); cursor:pointer; transition:background .16s, border-color .16s, color .16s}
.btn-p{background:var(--brand); color:var(--dark); font-weight:700; padding:16px 26px; font-size:16px}
.btn-p:hover{background:var(--brand-hi)}
.btn-p:active{background:var(--brand-lo)}
.btn-s{border:1px solid var(--dline2); color:var(--dtxt); font-weight:600; padding:16px 26px; font-size:16px}
.btn-s:hover{border-color:#7C7365; background:#22201A}
.btn-s:active{background:#2A271F}
.btn-sm{padding:11px 18px; font-size:14px}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s3)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--dark); border-bottom:1px solid var(--dline)}
.site-header .container{height:68px; display:flex; align-items:center; gap:var(--s6)}
.nav{display:flex; gap:26px; margin-left:var(--s2)}
.nav a{font:500 15px/1 var(--body); color:var(--dmuted); transition:color .14s}
.nav a:hover{color:var(--dtxt)}
.header-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
.burger{display:none}

/* ---------- hero ---------- */
.hero{background:var(--dark); color:var(--dtxt); padding:96px 0 104px}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.hero h1{font:800 clamp(40px,5vw,62px)/1.06 var(--disp); letter-spacing:-.03em; margin:0; text-wrap:balance}
.hero h1 b{color:var(--brand); font-weight:800}
.hero p.lead{font:400 19px/1.6 var(--body); color:var(--dmuted); margin:24px 0 0; max-width:52ch}
.hero .btn-row{margin-top:36px}
.hero .fine{font:400 14px/1.5 var(--body); color:var(--dfaint); margin:20px 0 0}
.hero-mocks{display:flex; flex-direction:column; gap:14px; min-width:0}
.hero-mocks .duo{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* ---------- mockups ---------- */
.mock{background:var(--dark2); border:1px solid var(--dline); border-radius:12px; padding:16px}
.mock-head{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.mock-head .sq{width:18px; height:18px; border-radius:5px; flex:none}
.mock-head strong{font:700 12px/1 var(--disp); color:var(--dtxt)}
.mock-head .tag{margin-left:auto; font:600 9px/1 var(--disp); letter-spacing:.1em; text-transform:uppercase; color:var(--dfaint)}
.mock .big{font:800 30px/1 var(--disp); letter-spacing:-.02em; color:var(--fin)}
.stats{display:flex; gap:20px; margin:12px 0 14px}
.stats dt{font:600 9px/1 var(--disp); letter-spacing:.08em; text-transform:uppercase; color:var(--dfaint); margin-bottom:5px}
.stats dd{font:700 13px/1 var(--disp); color:var(--dtxt); margin:0}
.bars{display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--dline); padding-top:12px}
.bar{display:flex; align-items:center; gap:8px}
.bar span{font:400 10px/1 var(--body); color:var(--dmuted); width:74px; flex:none}
.track{flex:1; height:4px; border-radius:2px; background:var(--dline); overflow:hidden}
.track i{display:block; height:100%; background:var(--fin)}
.tasks{display:flex; flex-direction:column; gap:8px}
.tasks > .task{display:flex; align-items:center; gap:8px}
.task .ring{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--dline2); flex:none}
.task .ring.on{border-color:var(--task)}
.task .ring.done{background:var(--task); border-color:var(--task)}
.task p{margin:0; flex:1; font:400 11px/1.2 var(--body); color:var(--dtxt)}
.task p.dim{color:var(--dmuted)}
.task p.strike{text-decoration:line-through; color:var(--dmuted)}
.av{width:15px; height:15px; border-radius:50%; flex:none; font:700 7px/15px var(--disp); color:var(--dark); text-align:center}
.av.w{background:var(--pw)} .av.f{background:var(--pf)}
.mock-foot{margin-top:12px; border-top:1px solid var(--dline); padding-top:10px;
  font:600 10px/1 var(--disp); color:var(--dfaint); display:flex; align-items:center; gap:6px}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; height:86px}
.week div{background:#221F19; border-radius:3px; position:relative; overflow:hidden}
.week div.free{background:#1C2A22; outline:1px solid var(--fin)}
.week i{position:absolute; left:1px; right:1px; border-radius:2px; display:block}
.week .pill-cal{background:var(--cal)} .week .pill-task{background:var(--task)}
.week .pill-brand{background:var(--brand)} .week .pill-free{background:var(--fin); opacity:.32}
.legend i{width:8px; height:8px; border-radius:2px; background:var(--fin); flex:none}

/* ---------- las cuatro piezas ---------- */
.section{padding:100px 0}
.section-head{max-width:none}
.section-head > *{max-width:60ch}
h2.title{font:800 clamp(32px,4vw,46px)/1.1 var(--disp); letter-spacing:-.03em; margin:0; color:var(--ink)}
.section-head p{font:400 19px/1.6 var(--body); color:var(--muted); margin:18px 0 0}
.apps{padding-top:0; padding-bottom:96px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--rc); padding:var(--s6);
  display:flex; flex-direction:column; gap:22px}
.tile-head{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.tile-head img{width:32px; height:32px; border-radius:9px}
.tile h3{font:800 22px/1 var(--disp); letter-spacing:-.02em; margin:0; color:var(--ink)}
.tile p{font:400 16px/1.6 var(--body); color:var(--ink2); margin:0}
.tile .shot{background:var(--dark); border-radius:11px; padding:14px; margin-top:auto}
.tile-hub{grid-column:1/-1; background:var(--dark); border:0; padding:40px;
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center}
.tile-hub .tile-head{margin-bottom:18px}
.tile-hub .tile-head img{width:34px; height:34px; border-radius:10px}
.tile-hub h3{font-size:24px; color:var(--dtxt)}
.tile-hub p{color:var(--dmuted); font-size:17px; max-width:48ch}
.badge{font:700 10px/1 var(--disp); letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
  border:1px solid #4A3A12; border-radius:6px; padding:5px 8px}
.hub-shot{background:var(--dark2); border:1px solid var(--dline); border-radius:11px; padding:14px; min-width:0}
.hub-bar{display:flex; align-items:center; gap:8px; padding-bottom:11px; border-bottom:1px solid var(--dline); margin-bottom:12px}
.hub-bar img{width:18px; height:18px; border-radius:5px}
.hub-bar strong{font:800 12px/1 var(--disp); color:var(--dtxt)}
.hub-bar .avs{margin-left:auto; display:flex}
.hub-bar .av{width:16px; height:16px; line-height:16px; font-size:7px}
.hub-bar .av+.av{margin-left:-8px}
.hub-apps{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.hub-app{border-radius:8px; padding:10px}
.hub-app i{width:14px; height:14px; border-radius:4px; display:block; margin-bottom:8px}
.hub-app b{display:block; font:700 9px/1 var(--disp); color:var(--dtxt); margin-bottom:4px}
.hub-app span{font:700 10px/1 var(--disp)}
.hub-app.fin{background:#101A16; border:1px solid #1B3A2C}
.hub-app.fin i,.hub-app.fin span{background:none; color:var(--fin)} .hub-app.fin i{background:var(--fin)}
.hub-app.task{background:#1C1412; border:1px solid #3D2521}
.hub-app.task i{background:var(--task)} .hub-app.task span{color:var(--task)}
.hub-app.cal{background:#14141F; border:1px solid #292F4D}
.hub-app.cal i{background:var(--cal)} .hub-app.cal span{color:var(--cal)}
.shot-label{font:600 9px/1 var(--disp); letter-spacing:.1em; text-transform:uppercase; color:var(--dfaint); margin-bottom:7px}
.shot-big{font:800 24px/1 var(--disp); color:var(--fin); margin-bottom:13px}
.proj{display:flex; align-items:center; gap:7px; margin-bottom:10px}
.proj i{width:8px; height:8px; border-radius:2px; background:var(--task); flex:none}
.proj strong{font:700 11px/1 var(--disp); color:var(--dtxt)}
.proj span{margin-left:auto; font:600 9px/1 var(--disp); color:var(--dfaint)}
.cal-head{display:flex; align-items:center; gap:6px; margin-bottom:11px}
.cal-head strong{font:700 11px/1 var(--disp); color:var(--dtxt)}
.cal-head .chip{margin-left:auto; background:var(--fin); border-radius:999px; padding:3px 8px;
  font:700 8px/1 var(--disp); color:var(--dark)}

/* ---------- confianza ---------- */
.trust{background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:96px 0}
.trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px}
.trust-grid > div:first-child p{font:400 18px/1.6 var(--body); color:var(--muted); margin:20px 0 0; max-width:40ch}
.trust h2{max-width:14ch}
.facts > div{padding:26px 0; border-bottom:1px solid var(--line2)}
.facts > div:first-child{padding-top:0}
.facts > div:last-child{border-bottom:0; padding-bottom:0}
.facts h3{font:700 19px/1.3 var(--disp); letter-spacing:-.01em; margin:0 0 8px; color:var(--ink)}
.facts p{font:400 16px/1.6 var(--body); color:var(--muted); margin:0; max-width:56ch}

/* ---------- cta final ---------- */
.cta{background:var(--dark); color:var(--dtxt); padding:88px 0}
.cta .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s6)}
.cta h2{font:800 clamp(30px,3.6vw,42px)/1.1 var(--disp); letter-spacing:-.03em; margin:0; max-width:18ch}
.cta p{font:400 17px/1.6 var(--body); color:var(--dmuted); margin:14px 0 0}

/* ---------- footer ---------- */
.site-footer{background:var(--darkest); color:var(--dmuted); padding:56px 0 40px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:36px; border-bottom:1px solid #241F19}
.foot-grid .wordmark{margin-bottom:12px}
.foot-grid .wordmark span{font-size:16px}
.foot-grid > div > p{font:400 14px/1.6 var(--body); color:var(--dfaint); margin:0; max-width:30ch}
.foot-grid h4{font:700 11px/1 var(--disp); letter-spacing:.12em; text-transform:uppercase; color:#4E473C; margin:0 0 14px}
.foot-links{display:flex; flex-direction:column; gap:10px}
.foot-links a,.foot-grid a[href^="mailto"]{font:400 15px/1 var(--body); color:var(--dmuted); transition:color .14s}
.foot-links a:hover,.foot-grid a[href^="mailto"]:hover{color:var(--dtxt)}
.foot-bottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s4); padding-top:var(--s5)}
.foot-bottom small{font:400 13px/1 var(--body); color:#4E473C}
.lang{display:flex; align-items:center; gap:2px; border:1px solid #241F19; border-radius:var(--s2); padding:3px}
.lang button{font:700 12px/1 var(--disp); letter-spacing:.06em; border:0; border-radius:6px;
  padding:8px 12px; background:transparent; color:var(--dfaint); cursor:pointer; transition:.14s}
.lang button:hover{color:var(--dtxt)}
.lang button[aria-pressed="true"]{background:var(--brand); color:var(--dark)}

/* ---------- páginas de documento ---------- */
.doc-header .container{height:68px; display:flex; align-items:center}
.doc-header .header-cta{margin-left:auto}
.doc{display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; padding:64px 0 96px}
.toc{position:sticky; top:92px}
.toc h4{font:700 11px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 16px}
.toc nav{display:flex; flex-direction:column; gap:11px; border-left:2px solid var(--line); padding-left:16px}
.toc a{font:400 15px/1.3 var(--body); color:var(--muted); transition:color .14s}
.toc a:hover{color:var(--ink)}
.prose{max-width:68ch}
.prose h1{font:800 clamp(34px,4.4vw,50px)/1.08 var(--disp); letter-spacing:-.03em; margin:0; color:var(--ink)}
.prose .meta{font:400 15px/1.5 var(--body); color:var(--faint); margin:16px 0 0}
.prose .lead{font:400 19px/1.6 var(--body); color:var(--muted); margin:18px 0 0}
.prose section{padding:32px 0; border-bottom:1px solid var(--line)}
.prose section:last-child{border-bottom:0; padding-bottom:0}
.prose h2{font:700 24px/1.25 var(--disp); letter-spacing:-.02em; margin:0 0 12px; color:var(--ink)}
.prose p{font:400 17px/1.7 var(--body); color:var(--ink2); margin:0 0 12px}
.prose p:last-child{margin-bottom:0}
.prose a.mail{font:600 16px/1 var(--disp); color:var(--ink); border-bottom:2px solid var(--brand); padding-bottom:2px}
.note{background:#FFF8E4; border:1px solid #F0DFAC; border-radius:var(--r); padding:16px 18px; margin:32px 0 40px}
.note p{font:400 15px/1.6 var(--body); color:#6B5A2B; margin:0}

.help-cards{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin:40px 0 72px}
.help-card{border-radius:12px; padding:28px}
.help-card.dark{background:var(--dark)}
.help-card.light{background:var(--surface); border:1px solid var(--line)}
.help-card .row{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.help-card .row span{font:700 12px/1 var(--disp); letter-spacing:.1em; text-transform:uppercase}
.help-card.dark .row span{color:var(--dmuted)}
.help-card.light .row span{color:var(--faint)}
.help-card strong{display:block; font:700 22px/1.2 var(--disp); letter-spacing:-.02em; margin-bottom:8px}
.help-card.dark strong{color:var(--dtxt)}
.help-card.light strong{color:var(--ink)}
.help-card p{font:400 15px/1.5 var(--body); margin:0}
.help-card.dark p{color:var(--dfaint)}
.help-card.light p{color:var(--muted)}
.help-card.dark:hover{background:#1A1712}
.faq{max-width:76ch}
.faq h2{font:800 30px/1.15 var(--disp); letter-spacing:-.03em; margin:0 0 24px; color:var(--ink)}
.faq details{border-top:1px solid var(--line); padding:20px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font:700 18px/1.4 var(--disp); letter-spacing:-.01em; color:var(--ink); flex:1}
.faq summary svg{transition:transform .16s; flex:none}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{font:400 17px/1.7 var(--body); color:var(--ink2); margin:12px 0 0; max-width:66ch}
.doc-footer{background:var(--darkest); padding:40px 0}
.doc-footer .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4)}
.doc-footer small{font:400 13px/1 var(--body); color:#4E473C}
.doc-footer nav{display:flex; gap:22px}
.doc-footer a{font:400 15px/1 var(--body); color:var(--dmuted)}
.doc-footer a:hover{color:var(--dtxt)}

/* ---------- tablet ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile-hub{grid-template-columns:1fr; gap:28px}
  .trust-grid{grid-template-columns:1fr; gap:36px}
  .doc{grid-template-columns:1fr; gap:32px; padding-top:48px}
  .toc{position:static; padding-bottom:8px}
  .toc nav{display:grid; grid-template-columns:1fr 1fr}
}

/* ---------- móvil ---------- */
@media (max-width:720px){
  body{font-size:16px}
  .container{padding-inline:20px}
  .nav,.header-cta .btn-s{display:none}
  .header-cta{gap:8px}
  .burger{display:flex; align-items:center; justify-content:center; width:44px; height:44px;
    border:1px solid var(--dline); background:transparent; border-radius:var(--r); cursor:pointer}
  .site-header.open .menu{display:flex}
  .menu{flex-direction:column; gap:2px; background:var(--dark);
    border-top:1px solid var(--dline); padding:12px 20px 20px}
  .menu a{font:600 17px/1 var(--disp); color:var(--dtxt); padding:14px 0}
  .menu .btn{margin-top:8px; width:100%}
  .hero{padding:48px 0 52px}
  .hero .eyebrow{margin-bottom:18px}
  .hero h1{font-size:36px}
  .hero p.lead{font-size:17px; margin-top:18px}
  .hero .btn-row{flex-direction:column; margin-top:28px}
  .hero .btn{width:100%}
  .hero-mocks{margin-top:8px}
  .hero-mocks .duo{grid-template-columns:1fr}
  .section{padding:56px 0}
  .apps{padding-bottom:56px}
  .tiles{grid-template-columns:1fr; gap:12px}
  .tile{padding:20px; gap:18px}
  .tile-hub{padding:24px 20px}
  .hub-apps{grid-template-columns:1fr}
  .trust{padding:56px 0}
  .facts > div{padding:20px 0}
  .cta{padding:56px 0}
  .cta .container{flex-direction:column; align-items:flex-start}
  .cta .btn-row{flex-direction:column; width:100%}
  .cta .btn{width:100%}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  .help-cards{grid-template-columns:1fr; margin:28px 0 48px}
  .toc nav{grid-template-columns:1fr}
  .prose section{padding:24px 0}
  .stats{gap:14px}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}