/* Fiberty Landing - stiles.css (completo, versión actualizada) */
:root{
  --primary:#0c2b4e;      /* azul oscuro blockchain */
  --secondary:#0a1e35;    /* fondo principal */
  --accent:#f7931a;       /* Bitcoin orange */
  --muted:#6c7a89;
  --radius:1.25rem;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--secondary);
  color:#e9eef4;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#fff; /* títulos siempre blancos */
}

/* NAVBAR */
.navbar{
  background:linear-gradient(180deg, rgba(12,43,78,.98) 0%, rgba(12,43,78,.85) 100%);
  backdrop-filter:saturate(140%) blur(6px);
}
.navbar .nav-link{color:#dbe7f5 !important; font-weight:500;}
.navbar .btn-primary{border-radius:999px; font-weight:600;}

/* Toggler blanco y sin focus */
.navbar-toggler{ border-color:rgba(255,255,255,.35); }
.navbar-toggler:focus,
.navbar-toggler:active{ box-shadow:none; outline:0; }
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  filter:none !important;
}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1000px 600px at 70% 10%, rgba(247,147,26,.10), transparent 60%),
    radial-gradient(800px 500px at 5% 20%, rgba(0,123,255,.08), transparent 60%),
    var(--secondary);
  padding: 8rem 0 6rem 0;
}
.hero-canvas{ position:absolute; inset:0; z-index:0; opacity:.55; }
.hero .container{ position:relative; z-index:1; }
.hero h1{font-size:clamp(2.4rem,4vw,4rem); line-height:1.08; letter-spacing:-.02em;}
.hero .lead{color:#cdd8e5; font-size:clamp(1.05rem,1.2vw,1.25rem);}
.btn-pill{border-radius:999px; padding:.8rem 1.2rem;}
.badge-soft{
  background:rgba(247,147,26,.15);
  color:#ffe5c8;
  border:1px solid rgba(247,147,26,.35);
}
.hero-logo-wrapper{ position:relative; display:inline-block; }
.hero-logo-wrapper::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(247,147,26,0.22) 0%, transparent 70%);
  transform:scale(1.25);
  z-index:-1;
}

/* SECCIONES / TARJETAS / ICONOS */
.section{padding:4.5rem 0;}
.card{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-radius:var(--radius);
}
.card h6, .card h5, .card h4{ color:#fff; }
.card .icon{
  width:56px;height:56px;border-radius:14px;
  background:var(--accent);      /* fondo naranja BTC */
  display:grid;place-items:center;margin-bottom:1rem;
  font-size:1.4rem;
  color:#fff;                    /* icono en blanco */
}

/* Features compactos */
.feature{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.feature i{
  font-size:1.2rem; color:#fff; background:var(--accent);
  width:40px;height:40px; border-radius:10px; display:grid; place-items:center;
}

/* KPIs */
.kpi{font-weight:800; font-size:clamp(2rem,3.5vw,3rem); color:#fff;}
.text-muted-2{color:#b3c0d1 !important;}
.list-check li{margin:.4rem 0;}
.list-check i{margin-right:.5rem; color:#5ed07a;}

/* BOTONES en naranja BTC */
.btn-primary, .btn-warning{
  background-color:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}
.btn-primary:hover, .btn-warning:hover{
  background-color:#d97f14 !important;
  border-color:#d97f14 !important;
}
.btn-outline-light:hover{
  color:#0e1a2b !important;
  background:#fff !important;
  border-color:#fff !important;
}

/* FORMULARIOS */
.form-control, .form-select, .form-check-input{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.18);
  color:#e9eef4;
}
.form-control::placeholder{color:#9fb0c7;}
.form-control:focus, .form-select:focus{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.35);
  color:#fff;
  box-shadow:none !important;
  outline:0;
}
.form-check-input:focus{ box-shadow:none !important; outline:0; }
.form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}
.form-check-label,
.form-check-label a { color:#fff !important; }

/* CTA sticky footer bar */
.cta-bar{position:sticky; bottom:0; background:rgba(12,43,78,.92); border-top:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px);}
.smallprint{font-size:.9rem; color:#9fb0c7;}

/* MINI CHART placeholder */
.mini-chart{
  width:100%; height:56px; border-radius:10px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  position:relative; overflow:hidden;
}
.mini-chart::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px);
  opacity:.5;
}

/* ACORDEÓN (FAQs) */
.accordion-item{
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  overflow:hidden;
}
.accordion-button{
  background:var(--primary) !important;
  color:#fff !important;
  border:none; box-shadow:none !important;
}
.accordion-button:focus{ box-shadow:none !important; outline:0; }
.accordion-button:not(.collapsed){
  color:#fff !important;
  background:var(--primary) !important;
  border-top:3px solid var(--accent);
}
.accordion-body{
  background:rgba(255,255,255,.03);
  color:#cfe3ff;
}
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  transform: rotate(0deg) !important;
  filter:none !important;
}
.accordion-button:not(.collapsed)::after{
  transform: rotate(180deg) !important;
}

/* PROCESO */
#proceso .card{
  position:relative;
  padding-top:4.8rem; /* espacio para el número grande */
  overflow:hidden;
}
#proceso .card .badge{
  position:absolute;
  top:12px; left:12px;
  background:var(--accent) !important;
  color:#fff !important;
  border:none;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:2.6rem;
  line-height:1;
  padding:.3rem .7rem;
  border-radius:12px;
  width:auto !important;
  z-index:0;
}
#proceso .card > *:not(.badge){
  position:relative;
  z-index:1;
}

/* REVEAL on scroll */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:none;}

/* FOOTER */
footer{background:#0b1a2d; color:#b3c0d1;}
footer a{color:#dbe7f5;}
@media (prefers-reduced-motion:no-preference){
  .hover-rise{transition:transform .25s ease, box-shadow .25s ease;}
  .hover-rise:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.25);}
}

/* ====== PROCESO (versión con bloques + conectores bajo las cards) ====== */

/* cada columna sirve de ancla de conectores */
#proceso .col-md-3{ position: relative; z-index: 0; }

/* tarjeta del paso: grid para número + contenido, nada de absolute */
#proceso .step-card{
  position: relative;
  z-index: 2;                         /* por encima de conectores */
  display: grid;
  grid-template-columns: 56px 1fr;    /* número | contenido */
  grid-auto-rows: auto;
  column-gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025)); /* algo más opaca para tapar conectores */
}

/* número: bloque (ocupa su espacio), nunca solapa texto */
#proceso .step-num{
  grid-column: 1;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: #fff;
  background: var(--accent);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* título + texto */
#proceso .step-title{ grid-column: 2; margin: 2px 0 6px 0; color:#fff; }
#proceso .step-text{ grid-column: 2; color:#b3c0d1; margin:0; }

/* -------- Conectores bajo las cards -------- */

/* Desktop / tablet (>=768px): conectores horizontales */
@media (min-width: 768px){
  #proceso .col-md-3:not(:last-child)::after{
    content:"";
    position:absolute;
    top: 44px;                 /* alineado con mitad del bloque numérico (56/2 + 16 padding aprox) */
    right: -22px;              /* sale un poco hacia el gap */
    width: 44px; height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.35));
    border-radius: 2px;
    z-index: 1;                /* MENOR que la card (que tiene 2) */
    pointer-events:none;
  }
  #proceso .col-md-3:not(:last-child)::before{
    content:"";
    position:absolute;
    top: 38px; right: -22px;
    border: 6px solid transparent;
    border-left-color: rgba(255,255,255,.35);
    z-index: 1;
    pointer-events:none;
  }
}

/* Móvil (<768px): conectores verticales */
@media (max-width: 767.98px){
  #proceso .col-md-3:not(:last-child)::after{
    content:"";
    position:absolute;
    left: 44px;                 /* un pelín a la derecha del número */
    bottom: -22px;
    width: 2px; height: 44px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.35));
    border-radius: 2px;
    z-index: 1;
    pointer-events:none;
  }
  #proceso .col-md-3:not(:last-child)::before{
    content:"";
    position:absolute;
    left: 38px; bottom: -22px;
    border: 6px solid transparent;
    border-top-color: rgba(255,255,255,.35);
    z-index: 1;
    pointer-events:none;
  }
}

/* ====== PROCESO: quitar puntas de flechas, dejar solo líneas ====== */

/* Desktop / tablet (>=768px): línea horizontal */
@media (min-width: 768px){
  #proceso .col-md-3:not(:last-child)::after{
    content:"";
    position:absolute;
    top: 44px;                 /* alineado con el centro del bloque numérico */
    right: -22px;              /* sale un poco hacia el gap */
    width: 44px; height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.35));
    border-radius: 2px;
    z-index: 1;                /* por debajo de las tarjetas */
    pointer-events:none;
  }
  /* anulamos la flecha */
  #proceso .col-md-3:not(:last-child)::before{
    content:none !important;
  }
}

/* Móvil (<768px): línea vertical */
@media (max-width: 767.98px){
  #proceso .col-md-3:not(:last-child)::after{
    content:"";
    position:absolute;
    left: 44px;                 /* alineado con el bloque numérico */
    bottom: -22px;
    width: 2px; height: 44px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.35));
    border-radius: 2px;
    z-index: 1;
    pointer-events:none;
  }
  /* anulamos la flecha */
  #proceso .col-md-3:not(:last-child)::before{
    content:none !important;
  }
}

.redondo {
	border-radius: 1rem;
}

/* ====== ACORDEÓN (FAQ homogéneo y separado) ====== */
.accordion-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  margin-bottom: 12px; /* separación entre items */
  overflow: hidden;
}

.accordion-button {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600;
  border: none;
  box-shadow: none !important;
  padding: 1rem 1.25rem;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  transform: rotate(0deg) !important;
  filter: none !important;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg) !important;
}

.accordion-body {
  background: rgba(255,255,255,.02);
  color: #cfe3ff;
  padding: 1rem 1.25rem;
}

/* ====== FORMULARIO ====== */
.form-label {
  color: #fff !important;
  font-weight: 500;
  margin-bottom: 4px;
}

.form-control, .form-select {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}

.form-control::placeholder {
  color: #9fb0c7;
}

/* Disclaimer en naranja Bitcoin y legible */
.disclaimer-accent{
  color: var(--accent);
  font-weight: 600;
}

/* KPIs de la calculadora: tamaño reducido para números grandes */
#oportunidad .kpi{
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  word-break: break-word;
}

/* CTA-bar siempre visible por encima del hero */
.cta-bar {
  position: sticky;
  bottom: 0;
  width: 100%;
  z-index: 1050; /* superior al hero y a la navbar por defecto */
}