/* =============================
   Pipeline Agent — styles.css
   Fonts: Poppins (headings), Inter (body)
   ============================= */
:root{
  --pa-primary: #0D47A1;   /* Azul principal del logo */
  --pa-secondary: #0A1426; /* Azul muy oscuro (texto/headers) */
  --pa-accent: #22C55E;    /* Verde del texto "Agent" */
  --pa-bg: #0A0F1A;        /* Fondo oscuro hero */
  --pa-card: #0F172A;      /* Tarjetas oscuras */
  --pa-light: #F8FAFC;     /* Textos claros */
  --pa-muted: #C8D1E1;     /* Texto secundario de alto contraste */
  --pa-link: #9ADCFB;      /* Link en dark */
}

html, body{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';}
h1, h2, h3, h4, h5, .display-5, .navbar-brand{font-family:'Poppins','Inter', sans-serif; line-height:1.2; letter-spacing:.2px;}
h1, .display-5{font-weight:800;}
h2, h3{font-weight:700;}
.lead{font-weight:400;}

body{background:#0a0f1a; color:var(--pa-light);}
.section{padding:5rem 0;}
.shadow-soft{box-shadow:0 10px 30px rgba(2,8,23,0.25);}
.text-muted-80{color:var(--pa-muted)!important;}
.hero-img{max-width:100%; height:auto;}
.gradient-divider{height:2px; background:linear-gradient(90deg, transparent, rgba(13,71,161,0.7), rgba(34,197,94,0.7), transparent);}
.bg-hero{background: radial-gradient(80% 120% at 10% 10%, rgba(14,165,233,0.25), transparent 60%), radial-gradient(60% 100% at 90% 20%, rgba(34,197,94,0.18), transparent 50%), var(--pa-bg);}
.text-gradient{background: linear-gradient(90deg, var(--pa-primary) 0%, #1E88E5 35%, var(--pa-accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}

.card, .accordion-item{background-color:var(--pa-card); border-color:rgba(255,255,255,0.12);}
.card-feature{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,0.08);}
.check li::marker{content:"✔ ";}

.price{font-size:clamp(2rem, 1.5rem + 1.5vw, 2.75rem)}

.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,0.92)}
.navbar{backdrop-filter:saturate(180%) blur(12px);}

.btn-primary{--bs-btn-bg:var(--pa-primary); --bs-btn-border-color:var(--pa-primary); --bs-btn-hover-bg:#0B3E8C; --bs-btn-hover-border-color:#0B3E8C;}
.btn-outline-light{--bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.6); --bs-btn-hover-bg:#fff; --bs-btn-hover-color:#0d1117; --bs-btn-hover-border-color:#fff;}

/* Links bonitos */
a{color:var(--pa-link); text-decoration:none;}
a:hover{color:#E0F2FF;}
.link-underline{position:relative; padding-bottom:2px;}
.link-underline::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg,var(--pa-primary),var(--pa-accent)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease, opacity .25s ease; opacity:.85;}
.link-underline:hover::after{transform:scaleX(1);}
.link-underline:hover{color:#E8FFF1;}

/* Helpers */
.ratio > iframe{border-radius:1rem; border:1px solid rgba(255,255,255,0.12);}
.text-agent{color:var(--pa-accent);}
.badge-soft{background:rgba(13,71,161,0.15); color:#CFE7FF;}

/* ====== Text colors ====== */
.card-feature h5,
.card-feature .mb-0,
.card .card-title,
.price {
  color: var(--pa-light) !important;
}

/* ====== Buttons con gradiente ====== */
.btn-primary {
  background: linear-gradient(90deg, var(--pa-primary) 0%, #1E88E5 35%, var(--pa-accent) 100%);
  border: none;
  color: #fff;
}
.btn-primary:hover {
  opacity: 0.9;
  color: #fff;
}

/* ====== Stats debajo del hero ====== */
.section .row.text-center h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--pa-light);
}

/* ====== Pricing recomendado ====== */
.card.border-primary {
  border: 2px solid var(--pa-accent) !important;
}
.card.border-primary .card-body {
  background-color: rgba(34, 197, 94, 0.1);
}
.badge.text-bg-primary {
  background-color: var(--pa-accent) !important;
  color: #fff !important;
}

/* ====== FAQ ====== */
.accordion-button {
  color: #fff !important;
}
.accordion-button.collapsed {
  background-color: var(--pa-primary) !important;
}
.accordion-button:not(.collapsed) {
  background-color: var(--pa-accent) !important;
}
.accordion-body {
  background-color: var(--pa-card) !important;
  color: #fff !important;
}

/* ====== Caja "¿Qué incluye la demo?" ====== */
.card h5 {
  color: var(--pa-light) !important;
}

/* ====== FAQ - flechita en blanco ====== */
.accordion-button::after {
  filter: invert(1); /* convierte la flecha a blanco */
}

/* ====== FAQ - quitar color de focus ====== */
.accordion-button:focus {
  box-shadow: none !important;
}

/* Pricing details */
.price-note{ font-size: .9rem; opacity:.85; }
.original-price{ margin-top:.25rem; font-size:.95rem; }

/* Countdown */
.countdown {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pa-accent);
}