/*
Theme Name: Mesmerize Child
Theme URI:https://extendthemes.com/go/mesmerize-home/
Author URI:https://extendthemes.com/
Description: Mesmerize is an incredibly flexible, multipurpose WordPress theme that can help you create an amazing website easier than ever, by drag and drop. It comes with a predesigned home page, 5 header designs and over 30 ready to use content sections that you can easily customize. It also has lots of customization options (video background, slideshow background, header content types, gradient overlays, etc) that will help you create a beautiful, unique website in no time. Mesmerize is responsive so it works on mobile devices out of the box and it is also WooCommerce ready. DEMO: https://extendthemes.com/go/mesmerize-demos/
Author: Carlos Eduardo Molina C.
Author URI: http://redtauros.com
Template: mesmerize
Version: 1.0.0
*/
/* Add your custom styles here */

/* ============================================
   FIX: DOBLE SUBRAYADO EN MENÚ
   ============================================ */

/* Eliminar cualquier subrayado heredado del tema */
.main-menu > li > a,
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ============================================
   BT CORPORATION - ESTILOS PERSONALIZADOS
   Tema: Mesmerize
   Paleta: #4f20ba (Púrpura) | #065dfa (Azul) | #ffffff (Blanco)
   ============================================ */

/*  background-color: #065dfa; */

i.fa.icon.reverse.color1 {
/* Contenedor del icono */
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f20ba 0%, #065dfa 100%);
  border-radius: 20px;
}


.color2 {
  color: #4f20ba;
}

i.fa.color2 {
 color: #4f20ba; 
}

/* Background contact us home */

.bg-color1 {
  background-color: #065dfa;
}

/* ============================================
   BT CORPORATION - ESTILOS PERSONALIZADOS
   Tema: Mesmerize
   Paleta: #4f20ba (Púrpura) | #065dfa (Azul) | #ffffff (Blanco)
   ============================================ */

/* Variables CSS para fácil personalización */
:root {
  --bt-purple: #4f20ba;
  --bt-blue: #065dfa;
  --bt-white: #ffffff;
  --bt-dark: #1a1a2e;
  --bt-gray: #f8f9fa;
  --bt-gradient: linear-gradient(135deg, #4f20ba 0%, #065dfa 100%);
  --bt-gradient-hover: linear-gradient(135deg, #3a1890 0%, #0549c7 100%);
  --bt-shadow: 0 10px 40px rgba(79, 32, 186, 0.15);
  --bt-shadow-hover: 0 20px 60px rgba(79, 32, 186, 0.25);
  --bt-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --bt-radius: 12px;
  --bt-radius-lg: 20px;
}

/* ============================================
   1. HEADER Y NAVEGACIÓN
   ============================================ */

/* Header principal con efecto glassmorphism */
.site-header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(79, 32, 186, 0.08);
  transition: var(--bt-transition);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 5px 40px rgba(79, 32, 186, 0.1);
}

/* Logo */
.custom-logo-link img {
  max-height: 60px;
  transition: var(--bt-transition);
  filter: drop-shadow(0 2px 4px rgba(79, 32, 186, 0.1));
}

.custom-logo-link:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(79, 32, 186, 0.2));
}

/* Menú de navegación */
.main-menu > li > a {
  color: #000000;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px;
  padding: 12px 20px !important;
  position: relative;
  transition: var(--bt-transition);
  text-transform: uppercase;
}

/* Efecto hover en menú - línea degradada */
.main-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 20px;
  width: 0;
  height: 3px;
  background: var(--bt-gradient);
  border-radius: 2px;
  transition: var(--bt-transition);
}

.main-menu > li > a:hover::after,
.main-menu > li.current-menu-item > a::after {
  width: calc(100% - 40px);
}

.main-menu > li > a:hover {
  color: var(--bt-purple) !important;
  transform: translateY(-2px);
}

/* Submenú estilizado */
.sub-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(79, 32, 186, 0.1);
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow);
  padding: 10px 0;
  margin-top: 15px;
}

.sub-menu li a {
  color: var(--bt-dark) !important;
  font-weight: 500;
  padding: 12px 25px !important;
  transition: var(--bt-transition);
  border-left: 3px solid transparent;
}

.sub-menu li a:hover {
  background: linear-gradient(90deg, rgba(79, 32, 186, 0.05) 0%, transparent 100%) !important;
  color: var(--bt-purple) !important;
  border-left-color: var(--bt-purple);
  padding-left: 30px !important;
}

/* Botón CTA en menú */
.main-menu .button {
  background: var(--bt-gradient) !important;
  color: white !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(79, 32, 186, 0.3);
  border: none !important;
  margin-left: 15px;
}

.main-menu .button:hover {
  background: var(--bt-gradient-hover) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(79, 32, 186, 0.4);
}

/* ============================================
   2. HERO SECTION
   ============================================ */

/* Hero con gradiente moderno */
.hero-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Efecto de luces sutil */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(79, 32, 186, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 93, 250, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.hero-content h1 {
  font-size: 3.5rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  background: linear-gradient(135deg, #ffffff 0%, #e0e0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 30px;
  letter-spacing: -1px;
}

.hero-content p {
  font-size: 1.25rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.8 !important;
  max-width: 700px;
  margin-bottom: 40px;
}

/* Botones del hero */
.hero-content .button {
  background: var(--bt-gradient) !important;
  color: white !important;
  border: none !important;
  padding: 18px 40px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 10px 30px rgba(79, 32, 186, 0.4);
  transition: var(--bt-transition);
  position: relative;
  overflow: hidden;
}

.hero-content .button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: 0.5s;
}

.hero-content .button:hover::before {
  left: 100%;
}

.hero-content .button:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(79, 32, 186, 0.5);
}

/* Botón secundario outline */
.hero-content .button.outline {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  margin-left: 20px;
}

.hero-content .button.outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: white !important;
  transform: translateY(-5px);
}

/* ============================================
   3. SECCIONES GENERALES
   ============================================ */

/* Títulos de sección */
.section-title {
  position: relative;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  color: var(--bt-dark) !important;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

/* Subrayado decorativo para títulos */
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--bt-gradient);
  border-radius: 2px;
}

.section-title p {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 30px auto 0;
  line-height: 1.7;
}

/* ============================================
   4. CARDS Y SERVICIOS
   ============================================ */

/* Cards modernas con hover */
.card, .service-card, .feature-box {
  background: white;
  border-radius: var(--bt-radius-lg);
  padding: 40px 30px;
  box-shadow: var(--bt-shadow);
  transition: var(--bt-transition);
  border: 1px solid rgba(79, 32, 186, 0.05);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.card::before, .service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--bt-gradient);
  transform: scaleX(0);
  transition: var(--bt-transition);
}

.card:hover, .service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--bt-shadow-hover);
}

.card:hover::before, .service-card:hover::before {
  transform: scaleX(1);
}

/* Iconos en cards */
.card-icon, .service-icon {
  width: 80px;
  height: 80px;
  background: var(--bt-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  color: white;
  font-size: 32px;
  box-shadow: 0 10px 30px rgba(79, 32, 186, 0.3);
  transition: var(--bt-transition);
}

.card:hover .card-icon, .service-card:hover .service-icon {
  transform: rotateY(360deg);
  box-shadow: 0 15px 40px rgba(79, 32, 186, 0.4);
}

.card h3, .service-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bt-dark);
  margin-bottom: 15px;
}

.card p, .service-card p {
  color: #666;
  line-height: 1.7;
  font-size: 1rem;
}

/* ============================================
   5. SECCIÓN VALORES (AUDACIA, SIMBIOSIS, ABUNDANCIA)
   ============================================ */

.values-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.values-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(79, 32, 186, 0.05) 0%, transparent 70%);
  border-radius: 50%;
}

.value-item {
  text-align: center;
  padding: 50px 30px;
  background: white;
  border-radius: var(--bt-radius-lg);
  box-shadow: var(--bt-shadow);
  transition: var(--bt-transition);
  position: relative;
  z-index: 1;
}

.value-item:hover {
  transform: translateY(-15px);
  box-shadow: var(--bt-shadow-hover);
}

.value-icon {
  font-size: 3rem;
  margin-bottom: 25px;
  background: var(--bt-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.value-item h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bt-dark);
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.value-item p {
  color: #666;
  line-height: 1.8;
  font-size: 1rem;
}

/* ============================================
   6. SECCIÓN PROGRAMAS/CURSOS
   ============================================ */

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  padding: 40px 0;
}

.program-card {
  background: white;
  border-radius: var(--bt-radius-lg);
  overflow: hidden;
  box-shadow: var(--bt-shadow);
  transition: var(--bt-transition);
  border: 1px solid rgba(79, 32, 186, 0.05);
}

.program-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--bt-shadow-hover);
}

.program-header {
  background: var(--bt-gradient);
  padding: 30px;
  color: white;
  position: relative;
  overflow: hidden;
}

.program-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
  transform: rotate(45deg);
}

.program-header h4 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
}

.program-body {
  padding: 30px;
}

.program-body p {
  color: #666;
  line-height: 1.7;
  margin-bottom: 20px;
}

.program-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.9rem;
  color: var(--bt-purple);
  font-weight: 600;
}

/* ============================================
   7. SECCIÓN EMPRESAS (BT CORP, BT ACADEMY, BT LATAM)
   ============================================ */

.companies-section {
  padding: 100px 0;
  background: white;
}

.company-card {
  text-align: center;
  padding: 50px 40px;
  border-radius: var(--bt-radius-lg);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid transparent;
  transition: var(--bt-transition);
  position: relative;
}

.company-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--bt-radius-lg);
  padding: 2px;
  background: var(--bt-gradient);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: var(--bt-transition);
}

.company-card:hover::before {
  opacity: 1;
}

.company-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--bt-shadow-hover);
}

.company-card img {
  max-width: 180px;
  margin-bottom: 30px;
  transition: var(--bt-transition);
}

.company-card:hover img {
  transform: scale(1.1);
}

.company-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bt-dark);
  margin-bottom: 15px;
}

.company-card p {
  color: #666;
  line-height: 1.7;
}

/* ============================================
   8. BOTONES GENERALES
   ============================================ */

.button, .btn, .wp-block-button__link {
  background: var(--bt-gradient) !important;
  color: white !important;
  border: none !important;
  padding: 15px 35px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 5px 20px rgba(79, 32, 186, 0.3);
  transition: var(--bt-transition) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.button:hover, .btn:hover, .wp-block-button__link:hover {
  background: var(--bt-gradient-hover) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(79, 32, 186, 0.4);
}

/* Botón outline */
.button.outline, .btn.outline {
  background: transparent !important;
  border: 2px solid var(--bt-purple) !important;
  color: var(--bt-purple) !important;
  box-shadow: none;
}

.button.outline:hover, .btn.outline:hover {
  background: var(--bt-gradient) !important;
  color: white !important;
  border-color: transparent !important;
}

/* ============================================
   9. FORMULARIOS Y CONTACTO
   ============================================ */

.contact-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 100px 0;
  color: white;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(79, 32, 186, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(6, 93, 250, 0.2) 0%, transparent 40%);
}

.contact-form {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border-radius: var(--bt-radius-lg);
  padding: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bt-radius);
  color: white;
  font-size: 1rem;
  transition: var(--bt-transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--bt-blue);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(6, 93, 250, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   10. FOOTER
   ============================================ */

.site-footer {
  background: var(--bt-dark) !important;
  color: rgba(255, 255, 255, 0.8);
  padding: 80px 0 30px;
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bt-gradient);
}

.footer-widgets {
  margin-bottom: 50px;
}

.footer-widget h4 {
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 15px;
}

.footer-widget h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--bt-gradient);
  border-radius: 2px;
}

.footer-widget p,
.footer-widget li {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  font-size: 0.95rem;
}

.footer-widget ul {
  list-style: none;
  padding: 0;
}

.footer-widget li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}

.footer-widget li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--bt-blue);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2;
}

.footer-widget a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: var(--bt-transition);
  display: inline-block;
}

.footer-widget a:hover {
  color: white;
  transform: translateX(5px);
}

/* Social links */
.social-links {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.social-links a {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  transition: var(--bt-transition);
  border: 2px solid transparent;
}

.social-links a:hover {
  background: var(--bt-gradient);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(79, 32, 186, 0.3);
}

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

/* ============================================
   11. EFECTOS ESPECIALES Y ANIMACIONES
   ============================================ */

/* Scroll reveal suave */
[data-aos], .fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos].aos-animate, .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gradient text utility */
.gradient-text {
  background: var(--bt-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

/* Pulse glow */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(79, 32, 186, 0.3); }
  50% { box-shadow: 0 0 40px rgba(79, 32, 186, 0.6); }
}

.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ============================================
   12. BLOG Y ENTRADAS
   ============================================ */

.blog-card {
  background: white;
  border-radius: var(--bt-radius-lg);
  overflow: hidden;
  box-shadow: var(--bt-shadow);
  transition: var(--bt-transition);
  margin-bottom: 30px;
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--bt-shadow-hover);
}

.blog-card .post-thumbnail {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.blog-card .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--bt-transition);
}

.blog-card:hover .post-thumbnail img {
  transform: scale(1.1);
}

.blog-card .post-content {
  padding: 30px;
}

.blog-card .post-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  color: var(--bt-purple);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.4;
}

.blog-card h3 a {
  color: var(--bt-dark);
  text-decoration: none;
  transition: var(--bt-transition);
}

.blog-card h3 a:hover {
  color: var(--bt-purple);
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bt-purple);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: var(--bt-transition);
}

.read-more:hover {
  gap: 15px;
  color: var(--bt-blue);
}

/* ============================================
   13. RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 991px) {
  .hero-content h1 {
    font-size: 2.5rem !important;
  }
  
  .section-title h2 {
    font-size: 2.2rem !important;
  }
  
  .main-menu .button {
    margin: 15px 0;
  }
  
  .card, .service-card {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .hero-content h1 {
    font-size: 2rem !important;
  }
  
  .hero-content p {
    font-size: 1rem !important;
  }
  
  .section-title h2 {
    font-size: 1.8rem !important;
  }
  
  .programs-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-form {
    padding: 30px 20px;
  }
  
  .company-card {
    margin-bottom: 30px;
  }
}

/* ============================================
   14. UTILIDADES Y HELPERS
   ============================================ */

.bg-gradient {
  background: var(--bt-gradient) !important;
}

.text-gradient {
  background: var(--bt-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.border-gradient {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              var(--bt-gradient) border-box;
}

.shadow-purple {
  box-shadow: 0 10px 40px rgba(79, 32, 186, 0.2);
}

/* Separador decorativo */
.section-divider {
  width: 100px;
  height: 4px;
  background: var(--bt-gradient);
  margin: 30px auto;
  border-radius: 2px;
}

/* Badges y etiquetas */
.badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(79, 32, 186, 0.1);
  color: var(--bt-purple);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--bt-gradient);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bt-gradient-hover);
}

/* Selección de texto */
::selection {
  background: rgba(79, 32, 186, 0.3);
  color: var(--bt-dark);
}