/* ==================================================================== Betarcode — Estilos del sitio corporativo Capa propia sobre Bootstrap 5.3 (cargado por CDN en el ). Solo se definen aquí la marca, tipografías, gradientes y utilidades que Bootstrap no cubre. Todo lo demás usa clases de Bootstrap. ==================================================================== */ :root{ --bc-blue:#0078D7; --bc-blue2:#005FB8; --bc-orange:#F57C00; --bc-dark:#0c1830; --bc-gray:#5A5A5A; --bs-body-font-family:'Plus Jakarta Sans',system-ui,sans-serif; --bs-body-color:#1d2433; } body{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:#1d2433; overflow-x:hidden; } /* ---- Tipografías ---- */ .ff-head{font-family:'Space Grotesk',sans-serif} .ff-logo{font-family:'Quicksand',sans-serif} h1,h2,h3{letter-spacing:-.5px} /* ---- Colores de marca ---- */ .text-bc{color:var(--bc-blue)!important} .text-orange{color:var(--bc-orange)!important} .bg-navy{background:var(--bc-dark)!important} /* ---- Layout de secciones ---- */ .bc-section{padding:clamp(64px,8vw,96px) 0} .eyebrow{color:var(--bc-blue);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase} .eyebrow.on-dark{color:#36a0ff} .eyebrow.on-orange{color:var(--bc-orange)} /* ---- Botones de marca (sobre el sistema de Bootstrap) ---- */ .btn-bc{--bs-btn-bg:#0078D7;--bs-btn-color:#fff;--bs-btn-hover-bg:#005FB8;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#005FB8;--bs-btn-active-color:#fff;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;font-weight:700} .btn-orange{--bs-btn-bg:#F57C00;--bs-btn-color:#fff;--bs-btn-hover-bg:#d96c00;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#d96c00;--bs-btn-active-color:#fff;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;font-weight:700} .btn-glass{--bs-btn-bg:rgba(255,255,255,.08);--bs-btn-color:#fff;--bs-btn-hover-bg:rgba(255,255,255,.16);--bs-btn-hover-color:#fff;--bs-btn-border-color:rgba(255,255,255,.22);--bs-btn-hover-border-color:rgba(255,255,255,.35);font-weight:700} .btn-wa{--bs-btn-bg:#25D366;--bs-btn-color:#063d20;--bs-btn-hover-bg:#1fbb5a;--bs-btn-hover-color:#063d20;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;font-weight:700} .btn-lift{transition:transform .2s ease, box-shadow .2s ease} .btn-lift:hover{transform:translateY(-3px)} /* ---- Tarjetas con hover ---- */ .bc-hover{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease} .bc-hover:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(12,24,48,.40)!important;border-color:#cfe2f7!important} /* ---- Navegación ---- */ .navlink{color:#475063;font-weight:600;font-size:15px;text-decoration:none;transition:color .2s} .navlink:hover{color:var(--bc-blue)} /* ---- Fondos con gradiente ---- */ .bc-hero{background:radial-gradient(120% 90% at 80% -10%, #0a3a6b 0%, #072649 45%, #051a36 100%);color:#fff;position:relative;overflow:hidden} .bc-cta{background:radial-gradient(120% 100% at 20% 0%, #0a3a6b 0%, #072649 50%, #051a36 100%);color:#fff;position:relative;overflow:hidden} .bc-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent);mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent);opacity:.5} .blob{position:absolute;border-radius:50%;filter:blur(20px);pointer-events:none} /* ---- Píldoras de tecnologías ---- */ .tech-pill{transition:border-color .2s,transform .2s} .tech-pill:hover{border-color:#cfe2f7!important;transform:translateX(3px)} /* ---- Redes sociales del footer ---- */ .soc{transition:background .2s,color .2s} .soc:hover{background:var(--bc-blue)!important;color:#fff!important} .flink{color:#aebfd6;text-decoration:none;transition:color .2s} .flink:hover{color:#fff} /* ---- Foco de formularios ---- */ .form-control:focus,.form-select:focus{border-color:var(--bc-blue);box-shadow:0 0 0 .2rem rgba(0,120,215,.15)} /* ---- Animaciones de aparición al hacer scroll ---- */ [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)} [data-reveal].in{opacity:1;transform:none} @keyframes bcfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes bcfloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} @keyframes bcbar{from{height:0}} .float-a{animation:bcfloat 5s ease-in-out infinite} .float-b{animation:bcfloat2 6s ease-in-out infinite} ::selection{background:#0078D7;color:#fff} /* ---- Acordeón FAQ ---- */ .faq-item{border:1px solid #e6eaef;border-radius:14px;overflow:hidden;background:#fff;transition:background .2s} .faq-item.open{background:#f6f9fd} .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:#0c1830} .faq-a{padding:0 22px;max-height:0;overflow:hidden;font-size:15px;line-height:1.65;color:#5A5A5A;transition:max-height .3s ease, padding .3s ease} .faq-item.open .faq-a{padding:0 22px 22px;max-height:320px}