/*
  Alineado con bigfuture.agency (Elementor): gradiente cabecera #0700dd→#00f2ff,
  morado #4632da, cyan botones #00dafc, texto #3d4459. Fuentes: Montserrat + Varela Round.
*/
:root {
  --bf-bg: #e8ebf4;
  --bf-surface: #f6f7fb;
  --bf-surface-alt: #eef1f8;
  --bf-surface-muted: #dce2f0;
  --bf-ink: #3d4459;
  --bf-muted: #5c6478;
  --bf-border: #c5cce0;
  --bf-accent: #4632da;
  --bf-accent-rgb: 70, 50, 218;
  --bf-cyan: #00dafc;
  --bf-cyan-rgb: 0, 218, 252;
  --bf-cta: #4632da;
  --bf-cta-hover: #3520b8;
  --bf-cta-rgb: 70, 50, 218;
  --bf-wa: #25d366;
  --bf-wa-hover: #20bd5a;
  --bf-wa-rgb: 37, 211, 102;
  --bf-contact-bg: #10132e;
  --bf-footer-bg: #0a0c22;
  --bf-font-heading: "Varela Round", system-ui, sans-serif;
  --bf-font-body: "Montserrat", system-ui, sans-serif;

  --bs-body-bg: var(--bf-bg);
  --bs-body-color: var(--bf-ink);
  --bs-emphasis-color: var(--bf-ink);
  --bs-secondary-color: var(--bf-muted);
  --bs-secondary-color-rgb: 92, 100, 120;
  --bs-heading-color: var(--bf-ink);
  --bs-primary: var(--bf-accent);
  --bs-primary-rgb: var(--bf-accent-rgb);
  --bs-border-color: var(--bf-border);
  --bs-link-color: var(--bf-accent);
  --bs-link-hover-color: color-mix(in srgb, var(--bf-accent) 85%, #000);
}

body {
  font-family: var(--bf-font-body);
  background-color: var(--bf-bg);
  color: var(--bf-ink);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6,
.display-5,
.hero-kicker {
  font-family: var(--bf-font-heading);
}

/* Cabecera = mismo gradiente que bigfuture.agency */
.site-header {
  background: linear-gradient(130deg, #0700dd 0%, #00f2ff 100%);
  border-bottom: none !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.site-header-phone {
  color: rgba(255, 255, 255, 0.95);
}

.site-header-phone:hover,
.site-header-phone:focus {
  color: #ffffff;
}

.site-logo-link {
  line-height: 0;
  text-decoration: none;
}

.site-logo {
  height: 3rem;
  width: auto;
  max-width: 280px;
  display: block;
  object-fit: contain;
}

@media (min-width: 768px) {
  .site-logo {
    height: 3.5rem;
    max-width: 320px;
  }
}

.site-footer {
  background-color: var(--bf-footer-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #9ca3c9;
}

.site-footer .footer-link {
  color: #b8c0e8;
}

.site-footer .footer-link:hover,
.site-footer .footer-link:focus {
  color: #ffffff;
}

/* Hero — ligero matiz a juego con el gradiente de marca */
.hero {
  background: linear-gradient(165deg, #eef0fb 0%, #f6f7fb 50%, var(--bf-surface) 100%);
  border-bottom: 1px solid var(--bf-border) !important;
}

.hero-kicker {
  color: var(--bf-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.lh-sm {
  line-height: 1.2;
}

.hero-subtitle {
  color: var(--bf-muted);
}

.hero-bullets {
  color: var(--bf-ink);
}

.bullet-check {
  color: var(--bf-accent);
  font-size: 1.05em;
  vertical-align: -0.125em;
}

.hero-trust {
  color: var(--bf-muted);
}

/* Hero — mock de informe (CSS only, sin imagen) */
.hero-metric-mock {
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.75rem rgba(70, 50, 218, 0.12);
  overflow: hidden;
  max-width: 22rem;
  margin-left: auto;
}

.hero-mock-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(130deg, rgba(7, 0, 221, 0.08) 0%, rgba(0, 242, 255, 0.12) 100%);
  border-bottom: 1px solid var(--bf-border);
}

.hero-mock-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--bf-border);
}

.hero-mock-dot:nth-child(1) {
  background: #ff6b6b;
}

.hero-mock-dot:nth-child(2) {
  background: #feca57;
}

.hero-mock-dot:nth-child(3) {
  background: #48db71;
}

.hero-mock-title {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-muted);
}

.hero-mock-body {
  padding: 1rem 1.15rem 1.15rem;
}

.hero-mock-stat + .hero-mock-stat {
  margin-top: 1rem;
}

.hero-mock-label {
  display: block;
  font-size: 0.7rem;
  color: var(--bf-muted);
  margin-bottom: 0.2rem;
}

.hero-mock-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bf-ink);
  font-family: var(--bf-font-heading);
  margin-bottom: 0.35rem;
}

.hero-mock-bar {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bf-surface-muted) 90%, var(--bf-border));
  overflow: hidden;
}

.hero-mock-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--bar, 50%);
  border-radius: inherit;
  background: var(--bf-accent);
}

.hero-mock-bar--cyan::after {
  background: var(--bf-cyan);
}

.hero-mock-bar--muted::after {
  background: color-mix(in srgb, var(--bf-accent) 45%, var(--bf-muted));
}

/* Bloque PAS previo a servicios */
.bf-pas-snippet {
  background-color: var(--bf-surface);
  border-bottom: 1px solid var(--bf-border) !important;
}

.bf-pas-kicker {
  color: var(--bf-accent);
  letter-spacing: 0.06em;
  font-weight: 600;
}

.bf-pas-list {
  max-width: 100%;
}

.bf-pas-item {
  padding-left: 1rem;
  border-left: 3px solid var(--bf-accent);
  margin-bottom: 1rem;
}

.bf-pas-item:last-child {
  margin-bottom: 0;
}

.bf-pas-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bf-accent);
  margin-bottom: 0.35rem;
}

.bf-pas-item p {
  color: var(--bf-muted);
  line-height: 1.6;
}

/* CTA intermedia */
.bf-mid-cta {
  background: linear-gradient(180deg, var(--bf-surface) 0%, var(--bf-surface-alt) 100%);
}

.bf-mid-cta-lead {
  color: var(--bf-ink);
  font-family: var(--bf-font-heading);
}

.bf-mid-cta-sub {
  color: var(--bf-muted);
  line-height: 1.6;
}

/* Tarjetas testimonio STAR */
.bf-testimonial-card {
  background-color: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 0.125rem 0.5rem rgba(70, 50, 218, 0.06);
}

.bf-testimonial-card .testimonial-text strong {
  color: var(--bf-ink);
  font-weight: 600;
}

.bf-testimonial-card cite {
  font-style: normal;
}

/* Barra CTA fija — solo móvil (< md) */
@media (max-width: 767.98px) {
  body {
    padding-bottom: 4.25rem;
  }
}

.bf-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: linear-gradient(180deg, rgba(10, 12, 34, 0.97) 0%, #0a0c22 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -0.35rem 1.25rem rgba(0, 0, 0, 0.2);
}

.bf-sticky-cta-inner .btn {
  min-height: 2.75rem;
}

.bf-sticky-form-btn {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.45);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--bf-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}

.bf-sticky-cta .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 218, 252, 0.45);
}

.py-lg-6 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Barra métricas */
.bf-trust-bar {
  background-color: var(--bf-surface-muted);
  border-bottom: 1px solid var(--bf-border) !important;
}

.trust-number {
  color: var(--bf-ink);
  font-variant-numeric: tabular-nums;
}

.trust-label {
  color: var(--bf-muted);
}

/* Secciones alternas */
.bf-section-muted {
  background-color: var(--bf-surface-muted);
}

.bf-section-muted h2,
.bf-section-muted .h4 {
  color: var(--bf-ink);
}

.services-intro {
  color: var(--bf-muted);
}

.services-promise {
  max-width: 40rem;
  color: var(--bf-ink);
  line-height: 1.55;
}

.services-group-label {
  color: var(--bf-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.services-ia-lead {
  max-width: 36rem;
  color: var(--bf-muted);
  line-height: 1.55;
}

.service-icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--bf-accent);
}

.card-text-muted {
  color: var(--bf-muted) !important;
}

.bf-card {
  background-color: var(--bf-surface);
  border: 1px solid var(--bf-border);
  color: var(--bf-ink);
}

.bf-card .h6,
.bf-card h3 {
  color: var(--bf-ink);
}

.bf-card.shadow-sm {
  box-shadow: 0 0.125rem 0.5rem rgba(70, 50, 218, 0.08) !important;
}

/* Proceso — franja distinta al hero/servicios */
.bf-process-section {
  background-color: var(--bf-surface-alt);
  border-top: 1px solid var(--bf-border);
  border-bottom: 1px solid var(--bf-border);
}

.bf-process-section h2 {
  color: var(--bf-ink);
}

.process-intro {
  color: var(--bf-muted);
}

.process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--bf-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.process-desc {
  color: var(--bf-muted);
}

.process-step h3 {
  color: var(--bf-ink);
}

/* Testimonio */
.testimonial-text {
  font-size: 1.125rem;
  color: var(--bf-ink);
  line-height: 1.65;
}

.testimonial-author {
  color: var(--bf-muted);
}

/* FAQ */
.bf-faq-section {
  background-color: var(--bf-bg);
}

.bf-faq-section h2 {
  color: var(--bf-ink);
}

.faq-intro {
  color: var(--bf-muted);
}

.bf-accordion .accordion-button {
  background-color: var(--bf-surface);
  color: var(--bf-ink);
  font-weight: 500;
  box-shadow: none;
}

.bf-accordion .accordion-button:not(.collapsed) {
  background-color: var(--bf-surface-muted);
  color: var(--bf-ink);
}

.bf-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bf-accent-rgb), 0.2);
  border-color: transparent;
}

.bf-accordion .accordion-button::after {
  filter: opacity(0.55);
}

.bf-accordion .accordion-item {
  border-color: var(--bf-border);
  background: var(--bf-surface);
}

.bf-accordion .accordion-body {
  background-color: color-mix(in srgb, var(--bf-bg) 35%, var(--bf-surface));
  color: var(--bf-muted);
  line-height: 1.65;
}

/* CTA principal: navy */
.btn-bf-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bf-cta);
  --bs-btn-border-color: var(--bf-cta);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bf-cta-hover);
  --bs-btn-hover-border-color: var(--bf-cta-hover);
  --bs-btn-focus-shadow-rgb: var(--bf-cta-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bf-cta-hover);
  --bs-btn-active-border-color: var(--bf-cta-hover);
}

/* WhatsApp — reconocimiento instantáneo */
.btn-bf-wa {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bf-wa);
  --bs-btn-border-color: var(--bf-wa);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bf-wa-hover);
  --bs-btn-hover-border-color: var(--bf-wa-hover);
  --bs-btn-focus-shadow-rgb: var(--bf-wa-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bf-wa-hover);
  --bs-btn-active-border-color: var(--bf-wa-hover);
}

/* Secundario en superficie clara */
.btn-bf-outline {
  --bs-btn-color: var(--bf-cta);
  --bs-btn-border-color: var(--bf-cta);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bf-cta);
  --bs-btn-hover-border-color: var(--bf-cta);
  --bs-btn-focus-shadow-rgb: var(--bf-cta-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bf-cta);
  --bs-btn-active-border-color: var(--bf-cta);
}

/* Secundario sobre bloque oscuro (contacto) */
.btn-bf-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.45);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--bf-ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: var(--bf-ink);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

.btn-bf-primary .spinner-border {
  border-color: rgba(255, 255, 255, 0.35);
  border-right-color: #fff;
}

.btn-bf-wa .spinner-border {
  border-color: rgba(255, 255, 255, 0.35);
  border-right-color: #fff;
}

/* Contacto: bloque oscuro (línea con sitio principal) */
.bf-contact {
  background: linear-gradient(160deg, #0d1030 0%, var(--bf-contact-bg) 55%, #080a18 100%);
  color: #e8e9f4;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bf-contact .form-label {
  color: #f0f1fa;
}

.bf-contact .form-control {
  background-color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--bf-ink);
}

.bf-contact .form-control:focus {
  border-color: var(--bf-cyan);
  box-shadow: 0 0 0 0.25rem rgba(var(--bf-cyan-rgb), 0.35);
  background-color: #ffffff;
}

.bf-contact .form-control::placeholder {
  color: #7c8299;
}

.contact-intro {
  color: #b8bdd9;
}

.contact-phone {
  color: #b8bdd9;
  font-size: 0.9rem;
}

.contact-phone-link {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 2px;
}

.contact-phone-link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.contact-wa-link {
  color: #86efac;
  text-decoration: underline;
  text-decoration-color: rgba(134, 239, 172, 0.45);
  text-underline-offset: 2px;
}

.contact-wa-link:hover {
  color: #bbf7d0;
}

.contact-optional {
  color: #9aa0c0;
  font-size: 0.875em;
}

.contact-disclaimer {
  color: #9aa0c0;
}

.bf-contact #contact-title,
.bf-contact #form-context-text {
  color: #fff;
}

.bf-contact .invalid-feedback {
  color: #fecaca;
}

.bf-contact .form-control.is-invalid {
  border-color: #f87171;
}

/* Enviar: mismo patrón que bigfuture — cyan #00dafc, hover morado */
.bf-contact .btn-bf-primary {
  --bs-btn-color: var(--bf-ink);
  --bs-btn-bg: var(--bf-cyan);
  --bs-btn-border-color: var(--bf-cyan);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bf-accent);
  --bs-btn-hover-border-color: var(--bf-accent);
  --bs-btn-focus-shadow-rgb: var(--bf-cyan-rgb);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bf-accent) 92%, #000);
  --bs-btn-active-border-color: var(--bf-accent);
  font-weight: 600;
  box-shadow: 0 0 24px rgba(70, 50, 218, 0.25);
}

.bf-contact .btn-bf-primary .spinner-border {
  border-color: rgba(61, 68, 89, 0.25);
  border-right-color: var(--bf-ink);
}

.bf-contact .btn-bf-primary:not(:disabled):hover .spinner-border,
.bf-contact .btn-bf-primary:not(:disabled):active .spinner-border {
  border-color: rgba(255, 255, 255, 0.35);
  border-right-color: #ffffff;
}

.bf-contact .btn-bf-primary:disabled .spinner-border {
  border-color: rgba(61, 68, 89, 0.25);
  border-right-color: var(--bf-ink);
}

/* Honeypot */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.intent-pending main {
}

.intent-ready main {
}

#form-submit:disabled {
  cursor: wait;
  opacity: 0.88;
}

#form-alert.alert-success {
  color: var(--bf-ink);
  background-color: #dde8d4;
  border-color: #8faa7c;
}

#form-alert.alert-danger {
  color: #fff;
  background-color: #7f1d1d;
  border-color: #fecaca;
}