:root{
  --violet: rgba(165, 103, 255, .18);
}

/* Overall */
.sol-main{ padding: 34px 0 20px; }

/* HERO */
.sol-hero{ padding-top: 30px; padding-bottom: 18px; }

.sol-hero-grid{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
  align-items: stretch;
}

.sol-hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin: 14px 0 10px;
}

.accent{ color: var(--ipblue); }
.accent2{ color: rgba(57, 208, 199, .95); }

/* Right panel card */
.sol-hero-panel .panel-card{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64));
  border: 1px solid rgba(14,91,176,.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  position:relative;
  min-height: 320px;
}

.panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(11,16,32,.08);
}

.panel-body{ padding: 16px; }

.panel-body h3{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.panel-muted{
  margin: 0 0 12px;
  color: rgba(11,16,32,.70);
  line-height: 1.55;
  font-size: 13.5px;
}

.panel-foot{ margin-top: 12px; color: rgba(11,16,32,.62); }

.w100{ width:100%; justify-content:center; }

/* Cards section */
.sol-cards{ padding-top: 10px; padding-bottom: 4px; }

.sol-grid{ align-items: stretch; }

.sol-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.sol-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.sol-ico{
  background: linear-gradient(135deg, rgba(14,91,176,.22), rgba(57,208,199,.14), var(--violet));
}

.sol-price{
  display:flex;
  align-items:baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,16,32,.10);
  background: rgba(255,255,255,.78);
  white-space:nowrap;
}

.sol-price .amt{
  font-weight: 850;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sol-price .per{
  font-size: 12px;
  color: rgba(11,16,32,.65);
  font-weight: 650;
}

.sb{
  font-size:12px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(11,16,32,.10);
  background: rgba(255,255,255,.78);
  color: rgba(11,16,32,.72);
  font-weight: 750;
}
.sb.core{ background: rgba(14,91,176,.10); border-color: rgba(14,91,176,.20); color: var(--ipblue); }
.sb.ai{ background: rgba(57,208,199,.12); border-color: rgba(57,208,199,.24); color: rgba(11,16,32,.80); }
.sb.free{ background: rgba(255,214,110,.18); border-color: rgba(255,214,110,.30); color: rgba(11,16,32,.80); }

/* CTA area inside cards */
.sol-btns{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
  padding-top: 6px;
  min-height: 92px; /* aligns card bottoms visually */
}

/* Under-button note for the free invoicing card */
.under-btn-note{
  margin-top: -4px;
  font-size: 13px;
  font-weight: 750;
  color: rgba(11,16,32,.68);
}

/* Buy link (only on telephony card as requested earlier) */
.buy-link{
  display:inline-block;
  font-size: 13px;
  font-weight: 750;
  color: rgba(11,16,32,.70);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.buy-link:hover{ color: rgba(11,16,32,.85); }

/* Details toggle */
.details-toggle{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,16,32,.10);
  background: rgba(255,255,255,.70);
  cursor:pointer;
  font-weight: 750;
  font-size: 13px;
  color: rgba(11,16,32,.75);
  transition: background .12s ease, transform .12s ease;
}
.details-toggle:hover{ background: rgba(14,91,176,.06); }
.details-toggle:active{ transform: translateY(1px); }

.details{
  margin-top: 10px;
  border-top: 1px solid rgba(11,16,32,.08);
  padding-top: 10px;
}

.details-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,16,32,.72);
  line-height: 1.6;
  font-size: 13.5px;
}
.details-list li{ margin: 6px 0; }

/* Responsive */
@media (max-width: 980px){
  .sol-hero-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .sol-main{ padding-top: 26px; }
}

/* -------------------------------------------------
   FREE INVOICING STRIP (discreet footer CTA)
   FIXED: prevent "box inside a box" and keep ONE rounded card
-------------------------------------------------- */

/* Outer section: no band styling, no extra padding */
.free-invoice{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* keep spacing modest (avoid the "big empty gap") */
  margin-top: 18px !important;
}

/* Inner wrap: look like IPCube cards */
.free-invoice .free-invoice-inner{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64)) !important;
  border: 1px solid rgba(14,91,176,.16) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;

  padding: 18px 18px !important;
}

@media (min-width: 900px){
  .free-invoice .free-invoice-inner{
    padding: 20px 22px !important;
  }
}
@media (max-width: 720px){
  .free-invoice .free-invoice-inner{
    padding: 16px 16px !important;
  }
}
/* -------------------------------------------------
   Mobile logo strip (Soluciones)
   - Shows centered logo above the header on small screens
   - Hides the normal header logo to avoid duplication
-------------------------------------------------- */

.mobile-logo-strip { display: none; }

@media (max-width: 980px){
  .mobile-logo-strip { display: block; }

  .mobile-logo-strip .wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 12px 0 6px;
  }

  .mobile-logo-strip .mobile-brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .mobile-logo-strip .mobile-brand img{
    height: 34px;  /* tweak if you want */
    width: auto;
    display:block;
  }

  /* Kill the header logo on mobile so it does NOT duplicate */
  .header-brand{ display:none !important; }
}