/* contasuma - estilos propios de index
   Generado en FASE 1 desde el CSS embebido. No editar a mano sin
   revisar las 17 paginas: este archivo es compartido. */

h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.15;letter-spacing:-.01em}
.mono{font-family:'IBM Plex Mono',monospace}
section{padding:80px 0}
.sec-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono';font-size:.78rem;font-weight:500;
  color:var(--emerald-dark);background:var(--emerald-soft);border:1px solid #BBEBD5;
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.sec-title{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:700;margin-bottom:12px}
.sec-sub{color:var(--ink-soft);font-size:1.08rem;max-width:620px}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,201,64,.4)}
/* ── Nav ── */
nav{position:sticky;top:0;z-index:50;background:rgba(250,251,248,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-cta .btn{padding:9px 18px;font-size:.93rem}
/* ── Hero ── */
.hero{padding:80px 0 64px;position:relative;overflow:hidden}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.hero-lead{font-size:1.15rem;color:var(--ink-soft);margin-bottom:30px;max-width:520px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hero-checks{display:flex;gap:20px;flex-wrap:wrap;font-size:.88rem;color:var(--ink-soft)}
.hero-checks span{display:inline-flex;align-items:center;gap:6px}
.hero-checks svg{color:var(--emerald)}
/* mockup dashboard */
.mockup{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(14,27,44,.14);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:#EDF5F0}
.mock-dot{width:10px;height:10px;border-radius:50%}
.mock-url{margin-left:12px;font-family:'IBM Plex Mono';font-size:.72rem;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);padding:3px 12px;border-radius:6px}
.mock-body{padding:20px}
.mock-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.mock-head .mock-title{font-family:'Sora';font-weight:700;font-size:.95rem}
.mock-date{font-family:'IBM Plex Mono';font-size:.7rem;color:var(--ink-soft)}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px}
.kpi small{font-size:.68rem;color:var(--ink-soft);display:block;margin-bottom:4px}
.kpi strong{font-family:'IBM Plex Mono';font-size:1.02rem;font-weight:600}
.kpi .up{color:var(--emerald-dark);font-size:.68rem;font-family:'IBM Plex Mono'}
.mock-chart{display:flex;align-items:flex-end;gap:8px;height:96px;padding:0 4px;margin-bottom:14px}
.bar{flex:1;height:100%;background:var(--emerald-soft);border-radius:5px 5px 0 0;position:relative;overflow:hidden}
.bar::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--h);background:var(--emerald);border-radius:5px 5px 0 0;animation:grow 1s ease both}
.bar:nth-child(7)::after{background:var(--amber)}
@keyframes grow{from{height:0} to{height:var(--h)}}
.mock-ledger{border-top:1.5px dashed var(--line);padding-top:12px;font-family:'IBM Plex Mono';font-size:.72rem}
.mock-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--ink-soft)}
.mock-row.total{color:var(--ink);font-weight:600;border-top:2px solid var(--amber);margin-top:6px;padding-top:8px}
.mock-row.total strong{color:var(--emerald-dark)}
/* ── logos / social proof ── */
.proof{padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#EDF5F0}
.proof p{text-align:center;font-size:.85rem;color:var(--ink-soft);margin-bottom:20px;font-family:'IBM Plex Mono'}
.proof-track{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;align-items:center}
/* #9AA7B8 daba 2.2:1 sobre #EDF5F0 y reprobaba AA. --ink-soft da 5.66:1
   y mantiene la tira apagada frente a los titulares. */
.proof-logo{font-family:'Sora';font-weight:600;font-size:1.05rem;color:var(--ink-soft);letter-spacing:.02em}
/* ── dolores ── */
.pains-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.pain{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative}
.pain::before{content:"“";position:absolute;top:10px;right:20px;font-family:'Sora';font-size:3.4rem;color:var(--emerald-soft);line-height:1}
.pain h3{font-size:1.1rem;margin-bottom:8px}
.pain p{color:var(--ink-soft);font-size:.95rem}
/* ── módulos (tabs) ── */
.modules{background:var(--ink);color:#fff}
.modules .sec-sub{color:#9FB0C6}
.mod-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 32px}
.mod-tab{padding:9px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:#C4D0DF;font-weight:500;font-size:.92rem;cursor:pointer;font-family:'Inter';transition:all .15s}
.mod-tab:hover{border-color:#fff;color:#fff}
.mod-tab.active{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:600}
.mod-tab:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.mod-panel{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:44px}
.mod-panel .mono-tag{font-family:'IBM Plex Mono';font-size:.75rem;color:var(--amber);margin-bottom:10px;display:block}
.mod-panel h3{font-size:1.7rem;margin-bottom:12px}
.mod-panel p{color:#9FB0C6;margin-bottom:22px}
.mod-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.95rem}
.mod-list li{display:flex;gap:10px;align-items:flex-start}
.mod-list svg{flex-shrink:0;margin-top:4px;color:var(--emerald)}
.mod-visual{background:linear-gradient(135deg,rgba(14,154,100,.25),rgba(255,201,64,.12));border:1px solid rgba(255,255,255,.12);border-radius:14px;aspect-ratio:4/3;display:grid;place-items:center;font-family:'IBM Plex Mono';color:#C4D0DF;font-size:.85rem;text-align:center;padding:20px}
.mod-visual .big{font-size:3rem;display:block;margin-bottom:10px}
/* ── industrias ── */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.ind{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .15s,box-shadow .15s}
.ind:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(14,27,44,.08)}
.ind .emoji{font-size:1.8rem;display:block;margin-bottom:12px}
.ind h3{font-size:1rem;margin-bottom:4px;font-family:'Inter';font-weight:600}
.ind p{font-size:.84rem;color:var(--ink-soft)}
.ind-note{text-align:center;margin-top:28px;color:var(--ink-soft);font-size:.95rem}
/* ── asistente IA ── */
.ai{background:var(--emerald-soft)}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ai-feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:22px;font-size:1rem}
.ai-feats li{display:flex;gap:10px;align-items:center}
.ai-feats svg{color:var(--emerald-dark)}
.chat{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(14,27,44,.12);overflow:hidden}
.chat-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--amber);display:grid;place-items:center;font-family:'IBM Plex Mono';font-weight:600}
.chat-head strong{font-family:'Sora';display:block;line-height:1.2}
.chat-head small{font-size:.75rem;color:var(--emerald-dark)}
.chat-body{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:220px}
.bubble{max-width:82%;padding:12px 16px;border-radius:14px;font-size:.9rem;line-height:1.5}
.bubble.user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.bubble.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble.bot .mono{color:var(--emerald-dark);font-weight:600}
.chat-prompts{padding:0 20px 20px;display:flex;gap:8px;flex-wrap:wrap}
.prompt-chip{font-size:.8rem;padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-family:'Inter';transition:all .15s;color:var(--ink)}
.prompt-chip:hover{border-color:var(--emerald);color:var(--emerald-dark)}
/* ── testimonios ── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.testi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:16px}
.testi h3{font-size:1.05rem;font-family:'Inter';font-weight:600}
.testi p{color:var(--ink-soft);font-size:.92rem;flex:1}
.testi-person{display:flex;align-items:center;gap:12px}
.testi-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:'IBM Plex Mono';font-weight:600;font-size:.85rem;color:#fff}
.testi-person strong{display:block;font-size:.92rem}
.testi-person small{font-size:.78rem;color:var(--ink-soft)}
/* ── precios ── */
.pricing{background:var(--ink);color:#fff}
.pricing .sec-sub{color:#9FB0C6}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:stretch}
.plan{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:32px;display:flex;flex-direction:column;position:relative}
.plan.popular{background:var(--card);color:var(--ink);border-color:var(--amber);border-width:2px;transform:scale(1.03)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--ink);font-size:.75rem;font-weight:700;padding:5px 16px;border-radius:999px;white-space:nowrap}
.plan h3{font-size:1.1rem;margin-bottom:6px}
.plan .plan-desc{font-size:.85rem;color:#9FB0C6;margin-bottom:20px}
.plan.popular .plan-desc{color:var(--ink-soft)}
.plan-price{font-family:'IBM Plex Mono';margin-bottom:4px}
.plan-price strong{font-size:2.2rem;font-weight:600}
.plan-price span{font-size:.9rem;color:#9FB0C6}
.plan.popular .plan-price span{color:var(--ink-soft)}
/* Las tarjetas de plan van sobre fondo oscuro: --emerald da 3.88:1.
   --emerald-light (#34D399, verde del degradado del logo) da 7.61:1. */
.plan-save{font-family:'IBM Plex Mono';font-size:.78rem;color:var(--emerald-light);margin-bottom:20px;min-height:1.2em}
/* La tarjeta "popular" es la blanca: alli el verde tiene que oscurecerse. */
.plan.popular .plan-save{color:var(--emerald-dark)}
.plan .btn{width:100%;margin-top:auto}
.price-note{text-align:center;margin-top:28px;font-size:.88rem;color:#9FB0C6}
.benefits{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 32px;list-style:none;font-size:.92rem}
.benefits li{display:flex;gap:10px;align-items:flex-start;color:#C4D0DF}
.benefits svg{flex-shrink:0;margin-top:4px;color:var(--emerald)}
/* ── FAQ ── */
.faq-list{max-width:760px;margin:40px auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:22px 8px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-family:'Inter';font-size:1.05rem;font-weight:600;color:var(--ink)}
.faq-q .faq-tag{font-family:'IBM Plex Mono';font-size:.7rem;color:var(--emerald-dark);background:var(--emerald-soft);padding:3px 10px;border-radius:6px;margin-right:12px;font-weight:500}
.faq-q svg{flex-shrink:0;transition:transform .2s;color:var(--ink-soft)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--ink-soft);font-size:.95rem}
.faq-item.open .faq-a{max-height:220px}
.faq-a p{padding:0 8px 22px}
.faq-q:focus-visible{outline:3px solid var(--emerald);outline-offset:-3px}
/* ── CTA final ── */
.cta-final{text-align:center;padding:96px 0}
.cta-final h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:14px}
.cta-final p{color:var(--ink-soft);font-size:1.1rem;max-width:520px;margin:0 auto 32px}
@media(max-width:960px){
  .hero-grid,.ai-grid{grid-template-columns:1fr}
  .mod-panel{grid-template-columns:1fr;padding:32px}
  .pains-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid,.price-grid{grid-template-columns:1fr}
  .plan.popular{transform:none}
  .benefits{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .ind-grid,.benefits{grid-template-columns:1fr}
  .mock-kpis{grid-template-columns:1fr 1fr}
  .nav-cta .btn-ghost{display:none}
}

/* El original de esta pagina evita que el resaltado del hero se parta.
   Las paginas de rubro NO lo llevan: alli romperia la rejilla del hero. */
.hero h1 em{white-space:nowrap}

/* Seccion de asesoria. Estaba resuelta con 14 estilos en linea, y el
   grid-template-columns en linea ganaba a las media queries: a 360px seguia
   en dos columnas y desbordaba la pantalla 33px. */
.asesoria{background:#F3F5F1}
.asesoria-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.asesoria-card{padding:28px}
.asesoria-card h3{font-size:1.1rem}
.asesoria-card p{font-size:.92rem}
@media(max-width:700px){
  .asesoria-grid{grid-template-columns:1fr}
}