/* Shared phone and tablet navigation; desktop styling stays in each page. */
.menu-close{display:none}
.nav.open .menu-lines{display:none}
.nav.open .menu-close{display:block}
@media(max-width:1024px){
  html{scroll-padding-top:80px}
  .nav-in{height:64px;gap:.625rem}
  .nav-in .logo{min-height:44px}
  .nav-in .logo svg,.nav-in .logo img{height:28px;width:auto}
  .nav-in nav{display:none}
  .nav-toggle{display:grid;order:2;flex:none;margin-left:0;border-radius:12px}
  .nav .nav-cta,.nav.open .nav-cta{display:contents}
  .nav-cta .login{display:none}
  .nav-cta .btn-ink{order:1;margin-left:auto;min-height:44px;font-size:.8125rem;padding:.65rem .85rem;gap:.5rem}
  .nav.open{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  .nav.open .nav-in{flex-wrap:wrap;height:auto;min-height:64px;padding:.625rem 0 1rem}
  .nav.open .nav-toggle{order:2}
  .nav.open .nav-in nav{display:block;order:3;flex-basis:100%;margin-top:.375rem;border-top:1px solid var(--line)}
  .nav.open .nav-links{flex-direction:column;gap:0}
  .nav.open .nav-links a{display:flex;align-items:center;min-height:52px;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.5}
  .nav.open .nav-cta .login{display:flex;align-items:center;order:4;flex-basis:100%;min-height:44px;padding:.5rem 0;font-size:.9rem}
  .legal-copy h2,.legal-copy h3{scroll-margin-top:0}
}
@media(max-width:720px){
  .container{width:calc(100% - 2rem)}
  .section{padding:3rem 0}
  .section-head,.section-head.center{max-width:none;margin-bottom:1.75rem;text-align:left}
  .section-head.center .lead{margin-inline:0}
  .section h2{font-size:clamp(1.75rem,7.6vw,2.25rem);line-height:1.16;letter-spacing:-.035em}
  .kicker{font-size:.8125rem;line-height:1.5;margin-bottom:.75rem}
  .lead{font-size:1rem;line-height:1.65;margin-top:1rem}
  .note,.foot{font-size:.75rem;line-height:1.6}

  /* The opening message and action fit before the phone demo. */
  .hero{padding:2rem 0 2.5rem}
  .hero-in{gap:1.75rem;width:min(560px,100% - 2rem)}
  .hero h1{font-size:clamp(2rem,9.5vw,2.75rem);line-height:1.1;letter-spacing:-.04em;margin-bottom:1rem;text-wrap:initial}
  .hero .lead{max-width:32em;font-size:1rem;line-height:1.65;margin-bottom:1.5rem}
  .hero-actions{display:grid;gap:.375rem;margin-bottom:1.25rem}
  .hero-actions .btn-primary{width:100%}
  .hero-actions .btn-ghost{justify-self:center;min-height:44px;padding:.5rem .75rem;border-color:transparent;background:transparent;gap:.65rem;font-size:.875rem}
  .hero-actions .btn-ghost:hover{background:var(--tile)}
  .hero-proof{align-items:flex-start;font-size:.75rem;line-height:1.7;gap:.55rem;max-width:30em}
  .hero-proof svg{width:19px;height:19px;margin-top:1px}
  .hero-visual{width:100%;max-width:340px;gap:.625rem;justify-self:center}
  .iphone-wrap{--s:.82;width:100%;height:auto;aspect-ratio:415 / 874}
  .iphone .wa-chat{overscroll-behavior-y:auto}
  .iphone .wa-jump::after{content:"";position:absolute;inset:-9px;border-radius:50%}
  .phone-demo-controls{width:100%;max-width:none;gap:0 .375rem;font-size:.6875rem}
  .phone-demo-controls .replay{min-height:44px;min-width:44px;padding:.5rem;font-size:.75rem}

  .keynote{padding:.5rem 0 3.5rem;text-align:left}
  .keynote-set,.keynote-turn{font-size:1.3rem;line-height:1.35}
  .keynote-turn{margin-top:1.25rem}
  .keynote-turn span,.keynote-claim span{display:block}
  /* "de tu fuerza de campo." is 10.8em wide, so the longest line always fits the container. */
  .keynote-claim{margin:.75rem 0 0;max-width:none;font-size:min(2.6rem,calc((100vw - 2rem) / 11.25));line-height:1.06}

  /* Read each step first, then see its complete example. */
  .tiles,.bento{gap:1rem}
  .tile,.b,.wall,.cmp{border-radius:20px}
  .tile-body{order:-1;padding:1.25rem 1.25rem 1rem}
  .tile-body .n{font-size:.75rem;margin-bottom:.4rem}
  .tile-body h3{font-size:1.2rem;line-height:1.25}
  .tile-body p,.b-head p{font-size:.9375rem;line-height:1.65}
  .tile-art{height:auto;padding:0 .875rem;align-items:stretch}
  .tile-art .mini{max-width:none;border-radius:16px 16px 0 0}
  .chatrow{gap:.625rem}
  .chatrow .av{width:42px;height:42px}
  .filerow{gap:.625rem;padding:.75rem .875rem}
  .filelist-title{padding-left:.875rem;padding-right:.875rem}
  .mini .wa-chat{padding:.875rem .625rem 1rem}
  .mini .wa-msg,.wall .wa-msg,.cmp .wa-msg{font-size:14px;line-height:19px;max-width:92%}
  .mini .wa-doc{gap:.5rem;padding:.65rem .5rem}
  .mini .wa-doc-txt b{font-size:13px;line-height:18px}
  .mini .wa-doc-txt small{font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini .wa-doc-dl{width:25px;height:25px}
  .mini-head{font-size:18px;line-height:24px}
  .b,.b.wide{padding:1.25rem 1.25rem 0;gap:1.25rem}
  .b-name{font-size:1.35rem;line-height:1.25;gap:.5rem}
  .b-name small{font-size:.6875rem}
  .b-role{font-size:.8125rem;line-height:1.5}
  .b-tags{display:none}
  .b .mini{max-width:none;border-radius:16px 16px 0 0}
  .b-art{min-height:0}
  .mchart,.rank{max-width:none;border-radius:16px 16px 0 0;padding-left:.875rem;padding-right:.875rem}
  .mchart-h,.rank-h{gap:.5rem;font-size:.75rem;line-height:1.5}
  .mchart-h span,.rank-h span{white-space:nowrap}
  .alert{margin:0 -.875rem;font-size:.6875rem;line-height:1.5}

  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}
  .stat .v{font-size:clamp(2rem,9.7vw,2.625rem)}
  .stat .l{font-size:.875rem;line-height:1.6;margin-top:.5rem}
  .stat:last-child{grid-column:1/-1;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--line);padding-top:1.25rem}
  .stat:last-child .v em{font-size:.52em}
  .stat:last-child .l{margin:0}
  .foot{margin-bottom:2rem}
  .voices{gap:1.75rem}
  .quote{font-size:1.3rem;line-height:1.45}
  .quote-by{font-size:.8125rem;margin-top:1rem}
  .wall .mini-head{align-items:flex-start;flex-direction:column;gap:.125rem;font-size:.875rem;line-height:1.5}
  .wall .mini-head span{font-size:.6875rem}
  .wall .wa-chat{padding:.75rem .625rem 1rem}

  /* The dashboard keeps its data at a readable scale. */
  .window{margin-top:1.75rem;border-radius:16px;scroll-margin-top:80px}
  .win-bar{padding:.75rem;gap:.5rem}
  .win-url{font-size:.75rem}
  .pill{font-size:.625rem;padding:.25rem .5rem}
  .main{padding:.75rem;gap:.75rem}
  .main-h{gap:.375rem}
  .main-h h4{font-size:.9375rem;line-height:1.4}
  .main-h span{font-size:.6875rem}
  .kpis{gap:.625rem}
  .kpi{padding:.75rem .65rem;gap:.3rem}
  .kpi .kl{font-size:.6875rem;line-height:1.45;min-height:2.9em}
  .kpi .kv{font-size:1.375rem}
  .kpi .kd{font-size:.625rem;line-height:1.5}
  .panel-box{padding:.875rem .75rem .75rem}
  .panel-box h5{flex-wrap:wrap;font-size:.8125rem;line-height:1.5;gap:.25rem .5rem;margin-bottom:.875rem}
  .panel-box h5 span{font-size:.6875rem}
  .chart svg{width:calc(100% - 1.25rem);margin-left:1.25rem}
  .chart .lbl{font-size:19px}
  .chart .endlbl{font-size:19px}
  .chart .grid .lbl{transform:translateX(-12px);text-anchor:end}
  .chart .lbl[x="125.5"],.chart .lbl[x="376.6"]{display:none}
  .topic{gap:.3rem .6rem;margin-bottom:.75rem}
  .topic .tl{font-size:.8125rem}
  .topic .tv{font-size:.75rem}
  .tbl-wrap{overflow:visible}
  table.tbl{display:block;min-width:0;font-size:.8125rem}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tbl tbody{display:grid;gap:.75rem}
  .tbl tr{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:.2rem .625rem;padding:0 0 .875rem;border-bottom:1px solid var(--line)}
  .tbl tr:last-child{padding-bottom:0;border-bottom:0}
  .tbl td,.tbl td.r{display:block;min-width:0;padding:0;border:0;white-space:normal;text-align:left;line-height:1.5;font-size:.8125rem}
  .tbl td:first-child{grid-column:1;grid-row:1/3;color:var(--muted);font-size:.6875rem}
  .tbl td:nth-child(2){grid-column:2;grid-row:1;font-weight:600}
  .tbl td:nth-child(3){grid-column:2;grid-row:2;color:var(--muted);font-size:.6875rem}
  .tbl td:nth-child(3)::before{content:"distribuidor ";}
  .tbl td:nth-child(4){grid-column:3;grid-row:1/3;text-align:right;font-family:var(--font-display);font-size:1.0625rem;font-weight:600}
  .tbl td:nth-child(4)::after{content:"mensajes";display:block;font-family:var(--font-body);font-size:.625rem;font-weight:400;color:var(--muted)}
  .tbl td:nth-child(5){grid-column:2;grid-row:3;font-size:.6875rem}
  .tbl td:nth-child(5)::before{content:"usuarios: ";color:var(--muted)}
  .tbl td:nth-child(6){grid-column:2;grid-row:4;font-size:.6875rem}
  .tbl td:nth-child(6)::before{content:"prom./usuario: ";color:var(--muted)}
  .tbl td:nth-child(7){grid-column:3;grid-row:3/5;align-self:end;text-align:right}
  .tbl td:nth-child(7)::before{content:"día pico";display:block;font-size:.625rem;color:var(--muted);margin-bottom:.15rem}
  .tbl .chip{font-size:.6875rem}
  .points{gap:1.5rem;margin-top:1.75rem}
  .point{display:grid;grid-template-columns:40px minmax(0,1fr);gap:.35rem .875rem}
  .point .ico{grid-row:1/3;width:40px;height:40px;margin:0}
  .point h3{grid-column:2;font-size:1rem;line-height:1.4;margin:0}
  .point p{grid-column:2;font-size:.875rem;line-height:1.65}

  .compare{gap:1rem}
  .cmp{padding:1rem;gap:1rem}
  .cmp .mini{border-radius:16px}
  .cmp .wa-chat{min-height:0;padding:.875rem .625rem 1rem}
  .cmp-note{font-size:.875rem;line-height:1.6}
  .cta{padding:3rem 0}
  .cta-in{gap:1.25rem;text-align:left;justify-items:stretch}
  .cta h2{font-size:clamp(1.9rem,8vw,2.4rem);line-height:1.15}
  .cta .lead{text-align:left;font-size:1rem;line-height:1.65}
  .composer{min-height:92px;padding:.75rem;border-radius:20px;gap:.75rem;font-size:1rem;box-shadow:0 8px 24px -16px rgba(40,59,84,.25)}
  .composer .cplus{display:none}
  .composer .cfield{display:block;min-height:4.2em;line-height:1.4}
  .composer .caret{height:1.05em;vertical-align:-.15em}
  .composer .csend{width:44px;height:44px}
  .cta-note{font-size:.8125rem;line-height:1.7}

  .footer{padding:2.5rem 0 1.5rem}
  .footer-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.25rem}
  .footer-in>div:first-child,.footer-in>div:last-child{grid-column:1/-1}
  .footer .logo svg,.footer .logo img{height:28px}
  .footer-tag{font-size:.8125rem;margin-top:.75rem;max-width:28em}
  .footer h4{font-size:.75rem;margin-bottom:.5rem}
  .footer ul{gap:0}
  .footer ul a{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;line-height:1.5}
  .footer-in>div:last-child ul{display:flex;flex-wrap:wrap;gap:0 1.5rem}
  .footer-bottom{margin-top:1.5rem;padding-top:1.25rem;font-size:.75rem}
}
@media(max-width:360px){
  .nav-in{gap:.5rem}
  .nav-in .logo svg,.nav-in .logo img{height:26px}
  .nav-cta .btn-ink{font-size:.75rem;padding:.65rem}
  .nav-cta .btn-ink svg{display:none}
  .hero h1{font-size:2rem}
  .iphone-wrap{--s:.69}
  .stat:last-child{grid-template-columns:80px minmax(0,1fr);gap:.75rem}
  .kpi .kv{font-size:1.25rem}
  .chart .lbl,.chart .endlbl{font-size:22px}
}
@media(hover:none){
  .tile:hover,.b:hover{transform:none;box-shadow:var(--tile-ring)}
}