/* =========================================================
   factunubiz — Landing page
   Hoja de estilos compartida por index.html y las páginas
   de cada módulo (restaurante / hoteles / farmacia / tienda /
   veterinaria / odontología).

   Para cambiar la marca:
   - Nombre: buscar "factunubiz" en cada HTML (navbar + footer)
   - Número de WhatsApp: variable data-wa-number en <body>
   - Colores: variables --brand-* y --acc-* aquí abajo
   ========================================================= */

:root{
  --brand-ink:      #12172b;   /* texto oscuro / navbar / footer */
  --brand-ink-soft: #2a3050;
  --brand-bg:       #ffffff;
  --brand-bg-soft:  #f6f7fb;
  --brand-muted:    #6b7185;
  --brand-line:     #e7e8f0;
  --brand-accent:   #22d3ee;   /* acento general de marca (cian) */

  /* acentos por módulo (se sobre-escribe con .theme-*) */
  --acc:       #22d3ee;
  --acc-dark:  #0891b2;
  --acc-soft:  #e6fbff;
  --acc-grad1: #22d3ee;
  --acc-grad2: #6366f1;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(18,23,43,.06);
  --shadow-md: 0 10px 30px rgba(18,23,43,.10);
  --shadow-lg: 0 20px 50px rgba(18,23,43,.16);
}

/* Temas por módulo ---------------------------------------------------- */
.theme-restaurante{
  --acc:#f97316; --acc-dark:#c2410c; --acc-soft:#fff3ea; --acc-grad1:#fb923c; --acc-grad2:#ef4444;
}
.theme-hoteles{
  --acc:#4f46e5; --acc-dark:#3730a3; --acc-soft:#eef0ff; --acc-grad1:#6366f1; --acc-grad2:#0ea5e9;
}
.theme-farmacia{
  --acc:#16a34a; --acc-dark:#166534; --acc-soft:#eafff1; --acc-grad1:#22c55e; --acc-grad2:#0d9488;
}
.theme-tienda{
  --acc:#a21caf; --acc-dark:#701a75; --acc-soft:#fbeaff; --acc-grad1:#c026d3; --acc-grad2:#6366f1;
}
.theme-veterinaria{
  --acc:#0ea5e9; --acc-dark:#0369a1; --acc-soft:#e6f6ff; --acc-grad1:#38bdf8; --acc-grad2:#22c55e;
}
.theme-odontologia{
  --acc:#0891b2; --acc-dark:#0e7490; --acc-soft:#e6fbff; --acc-grad1:#22d3ee; --acc-grad2:#7c3aed;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--brand-ink);
  background: var(--brand-bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ text-decoration:none; }
.section{ padding-top: 88px; padding-bottom: 88px; }
.section-sm{ padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 767.98px){
  .section{ padding-top: 56px; padding-bottom: 56px; }
  .section-sm{ padding-top: 36px; padding-bottom: 36px; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--acc-dark); background: var(--acc-soft);
  padding:.4rem .85rem; border-radius:999px;
}
.text-muted-2{ color: var(--brand-muted); }
.fw-800{ font-weight:800; }
.display-6-title{ font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight:800; line-height:1.15; }

/* Botones --------------------------------------------------------------- */
.btn{ border-radius: 12px; font-weight:600; padding:.72rem 1.35rem; }
.btn-acc{
  background: var(--acc); border-color: var(--acc); color:#fff;
}
.btn-acc:hover{ background: var(--acc-dark); border-color: var(--acc-dark); color:#fff; }
.btn-outline-acc{
  border: 1.5px solid var(--acc); color: var(--acc-dark); background: transparent;
}
.btn-outline-acc:hover{ background: var(--acc-soft); color: var(--acc-dark); }
.btn-dark-ink{ background: var(--brand-ink); border-color: var(--brand-ink); color:#fff; }
.btn-dark-ink:hover{ background:#000; border-color:#000; color:#fff; }
.btn-whatsapp{
  background:#25D366; border-color:#25D366; color:#fff; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-whatsapp:hover{ background:#1ebe5b; border-color:#1ebe5b; color:#fff; }
.btn-lg{ padding:.9rem 1.7rem; font-size:1.02rem; }

/* Navbar ------------------------------------------------------------------ */
.navbar-pf{
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--brand-line);
  padding: .7rem 0;
  position: sticky; top:0; z-index: 1030;
  transition: box-shadow .2s ease;
}
.navbar-pf.is-scrolled{ box-shadow: var(--shadow-sm); }
.navbar-pf .nav-fb{ display:inline-flex; align-items:center; justify-content:center; margin-left:.9rem; width:2.4rem; height:2.4rem; padding:0; border-radius:999px; background:#e7f0ff; color:#1877f2; font-weight:700; font-size:.9rem; line-height:1; }
.navbar-pf .nav-fb i{ font-size:1.25rem; }
.navbar-pf .nav-fb:hover{ background:#1877f2; color:#fff; }
@media (max-width:575.98px){ .navbar-pf .nav-fb{ margin-left:auto; margin-right:.6rem !important; } }
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--acc-grad1, var(--brand-accent)), var(--acc-grad2, #6366f1));
  color:#fff; font-weight:800;
}
.brand-name{ font-weight:800; font-size:1.15rem; color: var(--brand-ink); letter-spacing:-.02em; }
.brand-name span{ color: var(--acc-dark, #0891b2); }
.navbar-pf .nav-link{ font-weight:600; color: var(--brand-ink-soft); padding: .5rem 1rem !important; }
.navbar-pf .nav-link.active,
.navbar-pf .nav-link:hover{ color: var(--acc-dark); }
.navbar-pf .dropdown-menu{ border:0; box-shadow: var(--shadow-md); border-radius: var(--radius-sm); padding:.5rem; }
.navbar-pf .dropdown-item{ border-radius: 8px; padding:.6rem .8rem; font-weight:600; }
.navbar-pf .dropdown-item:hover{ background: var(--brand-bg-soft); }
.navbar-pf .dropdown-item.active,
.navbar-pf .dropdown-item:active{ background: var(--brand-bg-soft); color: var(--acc-dark); }
.navbar-pf .dropdown-item.active small,
.navbar-pf .dropdown-item:active small{ color: var(--brand-muted); }
.navbar-pf .dropdown-item small{ display:block; font-weight:400; color:var(--brand-muted); }

.top-banner{
  background: var(--brand-ink); color:#fff; font-size:.85rem; text-align:center; padding:.45rem 1rem;
}
.top-banner strong{ color: var(--brand-accent); }

/* Hero ---------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 500px at 85% -10%, var(--acc-soft, #eefaff), transparent 60%), var(--brand-bg-soft);
}
.hero-blob{
  position:absolute; border-radius:50%; filter: blur(60px); opacity:.35; z-index:0;
}
.hero .container{ position:relative; z-index:1; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.badge-pill{
  background:#fff; border:1px solid var(--brand-line); color: var(--brand-ink-soft);
  font-weight:600; font-size:.8rem; padding:.45rem .8rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.4rem; box-shadow: var(--shadow-sm);
}
.badge-pill i{ color: var(--acc-dark); }

.hero-art{
  position:relative; min-height: 320px;
  display:flex; align-items:center; justify-content:center;
}
.hero-art-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1.5rem; width: 100%; max-width: 380px;
}
.hero-art-card .hac-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--acc-grad1), var(--acc-grad2)); color:#fff; font-size:1.4rem;
}
.hero-float{
  position:absolute; background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding:.7rem .9rem; display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:.85rem;
}
.hero-float i{ font-size:1.1rem; color: var(--acc-dark); }
.hero-float.f1{ top:-18px; left:-24px; }
.hero-float.f2{ bottom:-16px; right:-18px; }

/* Trust bar (comprobantes SUNAT) ---------------------------------------- */
.trust-bar{ background: var(--brand-ink); color:#fff; }
.trust-item{ display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.92rem; color:#dfe1ee; }
.trust-item i{ color: var(--brand-accent); font-size:1.25rem; }

/* Tarjetas de módulo (index) --------------------------------------------- */
.module-card{
  border-radius: var(--radius); background:#fff; border:1px solid var(--brand-line);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.module-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.module-card-top{
  padding: 1.8rem 1.6rem 1.2rem;
  background: linear-gradient(135deg, var(--m-grad1), var(--m-grad2));
  color:#fff; position:relative; overflow:hidden;
}
.module-card-top .mc-icon{
  width:56px; height:56px; border-radius:14px; background: rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom: 1rem;
  backdrop-filter: blur(4px);
}
.module-card-body{ padding: 1.4rem 1.6rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.module-card-body ul{ list-style:none; padding:0; margin:0 0 1.2rem; }
.module-card-body ul li{ display:flex; gap:.5rem; padding:.28rem 0; font-size:.92rem; color: var(--brand-ink-soft); }
.module-card-body ul li i{ color: var(--m-grad1); margin-top:.2rem; }
.module-card-link{
  margin-top:auto; font-weight:700; color: var(--brand-ink); display:inline-flex; align-items:center; gap:.4rem;
}
.module-card-link i{ transition: transform .15s ease; }
.module-card:hover .module-card-link i{ transform: translateX(4px); }

.m-restaurante{ --m-grad1:#fb923c; --m-grad2:#ef4444; }
.m-hoteles{ --m-grad1:#6366f1; --m-grad2:#0ea5e9; }
.m-farmacia{ --m-grad1:#22c55e; --m-grad2:#0d9488; }
.m-tienda{ --m-grad1:#c026d3; --m-grad2:#6366f1; }
.m-veterinaria{ --m-grad1:#38bdf8; --m-grad2:#22c55e; }
.m-odontologia{ --m-grad1:#22d3ee; --m-grad2:#7c3aed; }

/* Feature cards (páginas de módulo) --------------------------------------- */
.feat-card{
  border-radius: var(--radius); border:1px solid var(--brand-line); background:#fff;
  padding: 1.6rem; height:100%; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--acc); }
.feat-icon{
  width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background: var(--acc-soft); color: var(--acc-dark); font-size:1.35rem; margin-bottom: 1rem;
}
.feat-card h3{ font-size:1.06rem; font-weight:800; margin-bottom:.45rem; }
.feat-card p{ font-size:.92rem; color: var(--brand-muted); margin:0; }

/* Pasos / cómo funciona --------------------------------------------------- */
.step{ position:relative; padding-left: 3.2rem; }
.step-num{
  position:absolute; left:0; top:0; width:2.4rem; height:2.4rem; border-radius:50%;
  background: var(--acc); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.step-line{
  position:absolute; left:1.2rem; top:2.4rem; bottom:-1.6rem; width:2px; background: var(--brand-line);
}
.step:last-child .step-line{ display:none; }

/* Mockup de pantalla (ilustrativo, no es una captura real) --------------- */
.ui-mock{
  background:#fff; border:1px solid var(--brand-line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow:hidden;
}
.ui-mock-bar{
  background: var(--brand-bg-soft); padding:.6rem .9rem; display:flex; gap:.4rem; align-items:center;
  border-bottom:1px solid var(--brand-line);
}
.ui-mock-dot{ width:9px; height:9px; border-radius:50%; background:#d7d9e4; }
.ui-mock-body{ padding: 1.1rem; }
.ui-mock-row{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.6rem .7rem; border-radius:10px; background: var(--brand-bg-soft); margin-bottom:.55rem; font-size:.85rem;
}
.ui-mock-row:last-child{ margin-bottom:0; }
.ui-mock-row .chip{
  font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background: var(--acc-soft); color: var(--acc-dark);
}
.ui-mock-caption{ text-align:center; font-size:.78rem; color: var(--brand-muted); margin-top:.7rem; }

/* CTA banner --------------------------------------------------------------- */
.cta-banner{
  border-radius: 24px; background: linear-gradient(120deg, var(--acc-grad1), var(--acc-grad2));
  color:#fff; padding: 3rem; position:relative; overflow:hidden;
}
.cta-banner h2{ font-weight:800; }
.cta-banner .btn-light{ font-weight:700; color: var(--brand-ink); }

/* Otros módulos (mención breve en index) ----------------------------------- */
.mini-mod{
  display:flex; align-items:center; gap:.75rem; background:#fff; border:1px solid var(--brand-line);
  border-radius: var(--radius-sm); padding: .85rem 1rem; height:100%;
}
.mini-mod i{ font-size:1.3rem; color: var(--acc-dark); }
.mini-mod .t{ font-weight:700; font-size:.92rem; }
.mini-mod .d{ font-size:.78rem; color: var(--brand-muted); }

/* Footer -------------------------------------------------------------------- */
footer.site-footer{ background: var(--brand-ink); color:#c7cad8; padding: 3.2rem 0 1.4rem; }
footer.site-footer h6{ color:#fff; font-weight:800; font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; margin-bottom:1rem; }
footer.site-footer a{ color:#c7cad8; }
footer.site-footer a:hover{ color:#fff; }
footer.site-footer .fnav li{ margin-bottom:.55rem; font-size:.92rem; }
footer.site-footer .fbottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.2rem; padding-top:1.4rem; font-size:.82rem; color:#8d90a6; }
footer.site-footer .social-links a{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; background:rgba(255,255,255,.1); font-size:1.15rem; transition:background .2s; }
footer.site-footer .social-links a:hover{ background:#1877f2; }
.foot-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }

/* Breadcrumb superior en páginas de módulo ---------------------------------- */
.pf-breadcrumb{ font-size:.86rem; color: var(--brand-muted); }
.pf-breadcrumb a{ color: var(--brand-muted); font-weight:600; }
.pf-breadcrumb a:hover{ color: var(--acc-dark); }

/* WhatsApp flotante ---------------------------------------------------------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:1040;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
}
.wa-float:hover{ background:#1ebe5b; color:#fff; }

.back-to-top{ scroll-margin-top: 90px; }

/* Grupos de funcionalidades (bloques tipo "módulo" dentro de una página) --- */
.feat-group{ margin-bottom: 2.6rem; }
.feat-group:last-child{ margin-bottom:0; }
.feat-group-title{
  display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:1.08rem;
  margin-bottom: 1.1rem; color: var(--brand-ink);
}
.feat-group-title .fg-icon{
  width:40px; height:40px; border-radius:11px; flex:none;
  background: var(--acc-soft); color: var(--acc-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}

/* FAQ (acordeón Bootstrap, coloreado con el acento del módulo) ------------- */
.accordion-item{
  border:1px solid var(--brand-line); border-radius: var(--radius-sm) !important;
  overflow:hidden; margin-bottom:.75rem;
}
.accordion-item:last-of-type{ margin-bottom:0; }
.accordion-button{ font-weight:700; font-size:.98rem; }
.accordion-button:not(.collapsed){
  color: var(--acc-dark); background: var(--acc-soft); box-shadow:none;
}
.accordion-button:focus{ box-shadow: 0 0 0 .15rem var(--acc-soft); border-color: transparent; }
.accordion-body{ color: var(--brand-muted); font-size:.94rem; }

/* ==========================================================================
   Planes y precios (se pintan desde la BD con assets/js/plans.js)
   ========================================================================== */
.plan-toggle{
  display:inline-flex; padding:4px; gap:4px; background: var(--brand-bg-soft);
  border:1px solid var(--brand-line); border-radius: 999px;
}
.plan-toggle button{
  border:0; background:transparent; padding:.55rem 1.3rem; border-radius:999px;
  font-weight:700; font-size:.92rem; color: var(--brand-muted); cursor:pointer;
}
.plan-toggle button.active{ background: var(--brand-ink); color:#fff; }
.plan-save{
  display:inline-block; margin-left:.35rem; padding:.05rem .5rem; border-radius:999px;
  background: var(--acc-soft); color: var(--acc-dark); font-size:.74rem; font-weight:800;
}
.plan-toggle button.active .plan-save{ background: var(--acc); color:#fff; }

.plan-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--brand-line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.5rem; box-shadow: var(--shadow-sm);
}
.plan-card.is-featured{ border:2px solid var(--acc); box-shadow: var(--shadow-md); }
.plan-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--acc); color:#fff; font-size:.74rem; font-weight:800;
  padding:.28rem .9rem; border-radius:999px; letter-spacing:.02em; white-space:nowrap;
}
.plan-name{ font-size:1.15rem; font-weight:800; margin:0 0 .6rem; }
.plan-price{ display:flex; align-items:baseline; gap:.3rem; flex-wrap:wrap; }
.plan-price .amt{ font-size:2.4rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.plan-price .per{ color: var(--brand-muted); font-weight:600; }
.plan-sub{ font-size:.82rem; color: var(--brand-muted); margin-top:.35rem; min-height:2.4em; }
.plan-limits{
  list-style:none; margin:1rem 0; padding:.85rem 0; display:flex; flex-direction:column; gap:.4rem;
  border-top:1px solid var(--brand-line); border-bottom:1px solid var(--brand-line);
  font-weight:600; font-size:.92rem;
}
.plan-limits i{ color: var(--acc-dark); margin-right:.5rem; }
.plan-extends{ font-size:.8rem; font-weight:700; color: var(--acc-dark); margin-bottom:.6rem; }
.plan-feats-wrap{ flex:1; margin-bottom:1.2rem; }
.plan-feats{ list-style:none; margin:0; padding:0; }
.plan-feats li{ display:flex; gap:.5rem; padding:.3rem 0; font-size:.88rem; color: var(--brand-ink-soft); }
.plan-feats li i{ color: var(--acc); margin-top:.15rem; flex:none; }
.plan-feats.is-collapsed li:nth-child(n+5){ display:none; }
.plan-more{
  border:0; background:transparent; padding:.35rem 0 0; font-size:.84rem; font-weight:700;
  color: var(--acc-dark); cursor:pointer; text-decoration:underline;
}

/* Beneficios comerciales bajo los planes */
.plan-perks{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:2.2rem; }
.plan-perk{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem;
  background:#fff; border:1px solid var(--brand-line); border-radius:999px;
  font-size:.86rem; font-weight:700; color: var(--brand-ink-soft);
}
.plan-perk i{ color: var(--acc-dark); }

/* Banner de migración */
.migrate-banner{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  margin-top:2.6rem; padding:1.7rem 1.9rem; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--acc-soft), #fff); border:2px dashed var(--acc);
}
.migrate-banner .mb-icon{
  flex:none; width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--acc-grad1), var(--acc-grad2)); color:#fff; font-size:1.6rem;
}
.migrate-banner .mb-text{ flex:1; min-width:240px; }
.migrate-banner h3{ font-size:1.25rem; font-weight:800; margin:0 0 .25rem; }
.migrate-banner p{ margin:0; color: var(--brand-ink-soft); }
.ast{ color: var(--acc-dark); font-weight:800; text-decoration:none; }
.migrate-note{ font-size:.82rem; color: var(--brand-muted); margin:.8rem 0 0; }
.hero-note{ font-size:.8rem; color: var(--brand-muted); margin:.7rem 0 0; }
.hero-note a{ color: inherit; }

/* "Desde S/ X" en las tarjetas de módulo de la portada */
.mc-from{
  display:inline-block; margin-top:.6rem; padding:.2rem .7rem; border-radius:999px;
  background: rgba(255,255,255,.22); font-size:.82rem; font-weight:800;
}