/* ==========================================================
   FacturaPro - Sitio público (v2, editorial/minimalista)
   ========================================================== */

/* ---------- Navbar ---------- */
.pub-navbar{
  position: sticky; top:0; z-index: 50;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 6vw;
}
.pub-navbar .brand{ display:flex; align-items:center; gap:9px; font-family: var(--font-display); font-weight:400; font-size:21px; color: var(--color-ink); border-bottom:none; }
.pub-navbar .brand .logo-mark{
  width:30px; height:30px; border-radius: var(--radius-sm);
  background: var(--color-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:400;
}
.pub-nav-links{ display:flex; align-items:center; gap: 36px; }
.pub-nav-links a{ color: var(--color-text-soft); font-weight:500; font-size:14px; border-bottom:none; }
.pub-nav-links a:hover{ color: var(--color-ink); }
.pub-nav-actions{ display:flex; align-items:center; gap:10px; }
.pub-nav-toggle{ display:none; background:none; border:none; font-size:20px; cursor:pointer; }

.pub-nav-links a.mobile-only-link{ display:none; }

@media (max-width: 900px){
  .pub-nav-links{
    position:fixed; top: 68px; left:0; right:0; bottom:0; background:var(--color-paper);
    flex-direction:column; align-items:flex-start; gap:0; padding: var(--space-4) 6vw;
    display:none; z-index: 49;
  }
  .pub-nav-links.open{ display:flex; }
  .pub-nav-links a{ width:100%; padding: 16px 0; border-bottom:1px solid var(--color-border); }
  .pub-nav-links a.mobile-only-link{ display:block; }
  .pub-nav-toggle{ display:block; }
  .pub-nav-actions .btn-outline{ display:none; }
}

/* ---------- Hero editorial ---------- */
.pub-hero{
  padding: 110px 6vw 80px; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8);
  align-items:center; max-width: 1280px; margin: 0 auto; position:relative;
}
.pub-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; font-family: var(--font-mono);
  color: var(--color-text-faint); margin-bottom: var(--space-4);
}
.pub-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--color-accent); display:inline-block; }
.pub-hero h1{ font-size: 60px; line-height:1.02; margin-bottom: var(--space-5); font-weight:400; }
.pub-hero h1 .accent{ font-style: italic; color: var(--color-accent); }
.pub-hero p.lead{ font-size: 18px; color: var(--color-text-soft); max-width: 460px; margin-bottom: var(--space-6); }
.pub-hero-actions{ display:flex; gap: var(--space-3); flex-wrap:wrap; margin-bottom: var(--space-6); }
.pub-hero-trust{ display:flex; align-items:center; gap: var(--space-4); font-size:12px; color: var(--color-text-faint); font-family: var(--font-mono); flex-wrap:wrap; }
.pub-hero-trust .dot{ width:5px; height:5px; border-radius:50%; background: var(--color-success); display:inline-block; margin-right:6px; }

/* Mockup de factura ilustrativo del hero — minimalista, sin giro ni sombra excesiva */
.hero-mock{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-5); position:relative;
}
.hero-mock .mock-row{ display:flex; justify-content:space-between; align-items:center; padding: 10px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.hero-mock .mock-row span:last-child{ font-family: var(--font-mono); }
.hero-mock .mock-row:last-of-type{ border-bottom:none; }
.hero-mock .mock-total{ font-family: var(--font-mono); font-size:28px; font-weight:500; margin-top: var(--space-3); letter-spacing:-0.02em; }
.hero-mock .mock-chip{ display:inline-flex; align-items:center; gap:6px; background: var(--color-success-bg); color: var(--color-success); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:4px 10px; border-radius: var(--radius-pill); margin-top: var(--space-3); }

@media (max-width: 900px){
  .pub-hero{ grid-template-columns: 1fr; padding: 56px 6vw 40px; }
  .pub-hero h1{ font-size: 40px; }
}

/* ---------- Secciones genéricas ---------- */
.pub-section{ padding: 76px 6vw; max-width: 1280px; margin:0 auto; }
.pub-section.tight{ padding-top:0; }
.pub-section-head{ max-width: 600px; margin: 0 auto var(--space-7); }
.pub-section-head h2{ font-size: 36px; font-weight:400; }
.pub-section-head h2 em{ color: var(--color-accent); font-style:italic; }
.pub-section.bg-soft{ background: var(--color-ink); color: rgba(255,255,255,.85); border-radius: var(--radius-lg); }
.pub-section.bg-soft .pub-section-head h2{ color:#fff; }
.pub-section.bg-soft p{ color: rgba(255,255,255,.55); }

/* ---------- Feature cards: numeradas, sin iconos de colores ---------- */
.feature-card{ padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.feature-card .feature-ico{
  font-family: var(--font-mono); font-size:12px; color: var(--color-text-faint);
  margin-bottom: var(--space-3); display:block;
}
.feature-card h3{ font-size:17px; margin-bottom:6px; font-weight:600; }
.feature-card p{ font-size:14px; margin:0; }

/* ---------- Steps ---------- */
.step-item{ display:flex; gap: var(--space-4); align-items:flex-start; }
.step-num{
  flex-shrink:0; width:34px; height:34px; border-radius: var(--radius-sm); background: rgba(255,255,255,.1); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:500; font-size:13px;
}
.step-item h3{ font-size:15.5px; margin-bottom:4px; color:#fff; }
.step-item p{ font-size:13.5px; margin:0; }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items:stretch; }
.price-card{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display:flex; flex-direction:column; }
.price-card.featured{ background: var(--color-ink); color:#fff; border-color: var(--color-ink); position:relative; }
.price-card.featured .price-name{ color: rgba(255,255,255,.5); }
.price-card.featured .price-value{ color:#fff; }
.price-card.featured .price-value span{ color: rgba(255,255,255,.4); }
.price-card.featured li{ color: rgba(255,255,255,.75); }
.price-card.featured li::before{ color: var(--color-accent); }
.price-card.featured::before{
  content:'Más popular'; position:absolute; top:-13px; left: var(--space-6);
  background: var(--color-accent); color:#fff; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:5px 12px; border-radius: var(--radius-pill);
}
.price-card .price-name{ font-weight:600; font-size:13px; color: var(--color-text-faint); text-transform:uppercase; letter-spacing:.05em; font-family: var(--font-mono); }
.price-card .price-value{ font-family: var(--font-display); font-size: 46px; font-weight:400; margin: 10px 0 4px; }
.price-card .price-value span{ font-size:14px; font-weight:500; color: var(--color-text-faint); font-family: var(--font-body); }
.price-card ul{ margin: var(--space-5) 0; flex:1; }
.price-card li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; padding: 7px 0; color: var(--color-text-soft); }
.price-card li::before{ content:'—'; color: var(--color-ink); font-weight:700; }

@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom: 1px solid rgba(255,255,255,.15); padding: var(--space-4) 0; }
.pub-section:not(.bg-soft) .faq-item{ border-bottom-color: var(--color-border); }
.faq-question{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:15px; }
.faq-question .chev{ transition: transform .15s ease; color: var(--color-text-faint); }
.faq-item.open .faq-question .chev{ transform: rotate(180deg); }
.faq-answer{ display:none; padding-top: var(--space-3); font-size:14px; }
.faq-item.open .faq-answer{ display:block; }

/* ---------- CTA banner ---------- */
.cta-banner{ background: var(--color-ink); color:#fff; border-radius: var(--radius-lg); padding: var(--space-7); text-align:center; position:relative; overflow:hidden; }
.cta-banner::after{ content:''; position:absolute; inset: auto -120px -120px auto; width:280px; height:280px; background: radial-gradient(circle, var(--color-accent), transparent 70%); opacity:.3; }
.cta-banner h2{ color:#fff; font-size:32px; font-weight:400; position:relative; z-index:1; }
.cta-banner p{ color: rgba(255,255,255,.6); max-width:460px; margin: 0 auto var(--space-5); position:relative; z-index:1; }
.cta-banner .btn{ position:relative; z-index:1; }

/* ---------- Testimonial ---------- */
.testimonial-card{ max-width: 640px; margin: 0 auto; text-align:center; }
.testimonial-card p{ font-family: var(--font-display); font-style:italic; font-size:26px; color: var(--color-text); line-height:1.35; }
.testimonial-card .who{ margin-top: var(--space-4); font-weight:600; font-size:13.5px; }
.testimonial-card .role{ font-size:12.5px; color: var(--color-text-faint); font-family: var(--font-mono); }

/* ---------- Footer ---------- */
.pub-footer{ border-top:1px solid var(--color-border); padding: var(--space-7) 6vw var(--space-5); margin-top: 40px; }
.pub-footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); max-width:1280px; margin:0 auto; }
.pub-footer-grid h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--color-text-faint); margin-bottom: var(--space-3); font-family: var(--font-mono); }
.pub-footer-grid a{ display:block; color: var(--color-text-soft); font-size:14px; padding: 5px 0; border-bottom:none; }
.pub-footer-grid a:hover{ color: var(--color-ink); }
.pub-footer-bottom{
  max-width:1280px; margin: var(--space-6) auto 0; padding-top: var(--space-5); border-top:1px solid var(--color-border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--space-3);
  font-size:12.5px; color: var(--color-text-faint); font-family: var(--font-mono);
}

@media (max-width: 900px){ .pub-footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- Páginas de contenido (legal, sobre nosotros) ---------- */
.pub-content{ max-width: 720px; margin: 0 auto; padding: 64px 6vw; }
.pub-content h1{ font-size: 42px; margin-bottom: var(--space-2); font-weight:400; }
.pub-content .updated{ color: var(--color-text-faint); font-size:12px; margin-bottom: var(--space-6); font-family: var(--font-mono); }
.pub-content h2{ font-size:21px; margin-top: var(--space-7); font-family: var(--font-body); font-weight:700; }
.pub-content p, .pub-content li{ color: var(--color-text-soft); font-size:15px; line-height:1.75; }
.pub-content ul{ padding-left: 20px; list-style: disc; }

.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.team-card{ text-align:center; }
.team-card .avatar-lg{
  width:76px; height:76px; border-radius: var(--radius-md); margin:0 auto var(--space-3);
  background: var(--color-primary-light); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:400; font-size:26px; color: var(--color-ink);
}
.team-card h3{ font-size:14.5px; margin-bottom:2px; font-weight:600; }
.team-card p{ font-size:12.5px; margin:0; color: var(--color-text-faint); font-family: var(--font-mono); }

@media (max-width: 700px){ .team-grid{ grid-template-columns: 1fr; } }