/* ============================================================
   pagina.css - lo propio de las paginas comerciales internas
   (precios, monotributistas, responsables-inscriptos,
   facturar-mercado-libre). (14/08/2026)

   Se carga DESPUES de landing.css y reusa todo lo que ya existe ahi
   (.container, .section, .section-head, .eyebrow, .lead, .btn, .fcard,
   .bento, .faq-item, .fine, .footer, .nav). Aca solo va lo que la
   landing no tenia: la grilla de planes y un par de contenedores.

   Colores SIEMPRE desde tokens.css. Ni un hex suelto: la marca es
   celeste v3 y se cambia en un solo lugar.
   ============================================================ */

/* La landing arranca su primera seccion bajo un hero a pantalla completa;
   estas paginas empiezan directo con el nav fijo encima, asi que hay que
   despejarlo a mano. */
main > .section:first-child { padding-top: 128px; }
@media (max-width: 860px) { main > .section:first-child { padding-top: 104px; } }

main h1 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center; margin-top: var(--space-6);
}

/* ---------- Grilla de planes ---------- */
.planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-8);
}
@media (max-width: 980px) { .planes { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.plan {
  position: relative;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; height: 100%;
}

/* El plan del medio se levanta un poco. En una sola columna no tiene
   sentido moverlo, asi que el translate se anula en el breakpoint. */
.plan--destacado {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
  transform: translateY(-12px);
}
/* El hover de .plan de landing.css (translateY(-4px), más específico) le ganaba
   al -12px del destacado: al pasar el mouse el plan Pro "bajaba" 8px. */
.plan--destacado:hover { transform: translateY(-16px); }
/* Los tildes de la lista van en verde semántico (landing.css los pintaba celeste). */
.plan .plan__lista svg { color: var(--color-success); width: 19px; height: 19px; }
@media (max-width: 980px) { .plan--destacado { transform: none; } .plan--destacado:hover { transform: translateY(-4px); } }

.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--color-primary); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap;
}

.plan__nombre {
  font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-primary-dark);
  margin: 0 0 var(--space-2);
}

.plan__precio {
  font-size: 3rem; font-weight: 800; line-height: 1;
  color: var(--color-ink); margin: 0 0 var(--space-1);
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.plan__precio .cur { font-size: 1.5rem; font-weight: 700; }
.plan__precio small {
  font-size: .92rem; font-weight: 500; color: var(--color-muted);
  letter-spacing: 0; margin-left: 4px;
}

.plan__cupo {
  color: var(--color-ink-soft); margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border);
}
.plan__cupo strong { color: var(--color-ink); }

.plan__lista { list-style: none; margin: 0 0 var(--space-6); padding: 0; flex: 1; }
.plan__lista li {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: var(--space-3); color: var(--color-ink-soft); line-height: 1.5;
}
.plan__lista svg {
  width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px;
  color: var(--color-success);
}

.plan__nota {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 760px; margin: var(--space-8) auto 0;
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-ink-soft); line-height: 1.6;
}
.plan__nota svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--color-primary); margin-top: 1px; }
/* (17/08/2026) el texto va en un <span>: sin él cada <strong> era un ítem flex
   y la nota se partía en columnas. */
.plan__nota > span { flex: 1 1 auto; min-width: 0; }
.plan__nota strong { display: inline; }

/* ---------- Callout de cierre ---------- */
.callout {
  /* (15/08/2026) landing.css define .callout como flex (el aviso de la home);
     acá es un bloque centrado. Sin este reset h2, p y botón quedaban en fila y
     desbordaban la pantalla del celular. */
  display: block;
  text-align: center; max-width: 760px;
  margin: var(--space-10) auto 0;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}
.callout h2 { margin: 0 0 var(--space-3); font-size: 1.6rem; color: var(--color-ink); }
.callout p  { margin: 0 auto var(--space-5); max-width: 60ch; color: var(--color-ink-soft); }

.callout--studio {
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.callout--studio h2 { color: #fff; }
.callout--studio p  { color: rgba(255,255,255,.82); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; color: var(--color-ink);
  list-style: none; display: flex; justify-content: space-between; gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--color-primary); font-size: 1.4rem;
  line-height: 1; flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: var(--space-3) 0 0; color: var(--color-ink-soft); line-height: 1.65; }

.fine {
  max-width: 760px; margin: var(--space-8) auto 0; text-align: center;
  color: var(--color-muted); font-size: .94rem; line-height: 1.7;
}
.fine a { color: var(--color-primary-dark); }

.section--alt { background: var(--color-bg-alt); }

/* (15/08/2026) Paginas de texto largo (nosotros, comparativas, guias
   comerciales): columna de lectura, tabla comparativa y pasos numerados. */
.prose { max-width: 76ch; margin: var(--space-6) auto 0; color: var(--color-ink-soft); line-height: 1.75; font-size: 1.05rem; }
.prose h2 { font-size: 1.55rem; margin: var(--space-8) 0 var(--space-3); color: var(--color-ink); }
.prose h3 { font-size: 1.15rem; margin: var(--space-6) 0 var(--space-2); color: var(--color-ink); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--color-ink); }
.prose .lead { text-align: left; margin-left: 0; }

.cmp-wrap { overflow-x: auto; margin: var(--space-6) 0; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.cmp th { background: var(--color-bg-alt); color: var(--color-ink); font-weight: 700; }
.cmp td:first-child { color: var(--color-ink); font-weight: 600; }
.cmp .si { color: var(--color-primary-dark); font-weight: 700; }
.cmp .no { color: var(--color-muted); }

/* display:block pisa el grid de 3 columnas que landing.css le da a .steps en la
   home: acá son pasos largos dentro de .prose y quedaban en 3 columnas de 230px. */
.steps { display: block; counter-reset: paso; list-style: none; padding: 0; margin: var(--space-4) 0; }
.steps li { position: relative; padding-left: 52px; margin-bottom: var(--space-4); }
.steps li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-weight: 800; display: grid; place-items: center;
}
.prose .callout { margin-top: var(--space-8); }

/* Sin dark mode en ninguna superficie del sitio (ver skill facturel-web):
   no agregar prefers-color-scheme aca tampoco. */