/* Colores y estilos base */
@font-face {font-family:'TruenoBd';src: url('../fonts/TruenoBd.otf'); font-display: swap;}
@font-face {font-family:'TruenoBdIt';src: url('../fonts/TruenoBdIt.otf'); font-display: swap;}
@font-face {font-family:'TruenoBdOl';src: url('../fonts/TruenoBdOl.otf'); font-display: swap;}
@font-face {font-family:'TruenoRg';src: url('../fonts/TruenoRg.otf'); font-display: swap;}
@font-face {font-family:'TruenoSBd';src: url('../fonts/TruenoSBd.otf'); font-display: swap;}

body {font-family: 'TruenoBd', sans-serif;scroll-behavior: smooth;margin: 0;}
nav{background-color:rgb(26 26 26) !important;}
nav img{height: 50px !important;}

h1,h2,h3,h4,h5{font-family: 'TruenoBd', sans-serif;}
p,a,span,button{font-family:'TruenoRg', sans-serif;}
p,a,span{font-size: 20px;}
.ancho-90{width: 90%;margin: auto;}
/* --- NAVBAR --- */
.custom-navbar {background: #1a1a1a;position: fixed;top: 0;width: 100%;z-index: 1000;padding: 15px 0;box-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.nav-container {display: flex;align-items: center;justify-content: space-between;max-width: 1340px;margin: 0 auto;padding: 0 20px;}
.logo img {height: 50px;}
.nav-links {display: flex;gap: 25px;align-items: center;}
.nav-link {color: #fff;text-decoration: none;transition: .5s all ease;text-transform: uppercase;display: inline-flex;align-items: center;gap: 5px;}
.nav-link:last-child {background: #ffbf00;color: #000;padding: 5px 10px;border-radius: 4px;}
.nav-link:last-child:hover {background: #fff;color: #000 !important;}
.nav-link:hover,.nav-link:focus,.nav-link.active {color: #E8B931 !important;}

/* --- SUBMENÚ --- */
.dropdown {position: relative;}
.dropdown-toggle {cursor: pointer;}
.dropdown-toggle::after{content: none;}
.dropdown-menu {display: none;position: absolute;top: 100%;left: 0;background: #222;border-radius: 6px;padding: 10px 0;min-width: 180px;}
.dropdown-item {display: block;color: #fff;text-decoration: none;padding: 10px 20px;transition: background .3s ease;text-transform: uppercase;}
.dropdown-item:hover {background: #333;color: #E8B931;}

/* Mostrar menú en escritorio */
.dropdown:hover .dropdown-menu {display: block;}

/* --- ICONO INDICADOR --- */
.arrow-icon {font-size: 0.8rem;transition: transform 0.3s ease;}
.dropdown.open .arrow-icon {transform: rotate(180deg);}

/* --- MENU HAMBURGUESA --- */
.menu-toggle {display: none;color: #fff;font-size: 1.5rem;cursor: pointer;}


.size-custom{font-size: 2.3vh;transition: .5s all ease;}

h1{font-size: 6vh;text-transform: uppercase;font-family:'TruenoBd',sans-serif;}
h2{font-size: 4vh;text-transform: uppercase;}
h3{font-size: 3vh;font-family:'TruenoSBd',sans-serif;;}
section#hero {height: 100vh;display: flex;align-items: center;margin-top: 70px;}
button.btn-custom{background:#D73981;color: #fff;border: none;transition: .5s all ease;padding: 10px 40px;transform: scale(1);border-radius: 30px;}
button.btn-custom:hover{background:#a82d65;color: #fff;transform: scale(1.1);}
.bg-gradient {background: linear-gradient(90deg, #5f6efc, #6fc3f7);}
.bg-influencer {background: url(https://thegoodgroup.gg/wp-content/uploads/fondo-influencers-hero.webp);background-size: cover;background-repeat: no-repeat;background-position: center;position: relative;}
.bg-influencer::after{content: "";position: absolute;left: 0;bottom: 0;background: rgba(0, 0, 0, .5);width: 100%;height: 100%;}
.bg-influencer .ancho-90{position: relative;z-index: 1;} 
.influencer{border-radius: 20px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;}

section#estrategia {display: flex;align-items: center;position: relative;overflow: hidden;background: #D73981;color: #fff;}
section#estrategia h2,section#estrategia h3{text-align: center;position: relative;}
/*section#estrategia h2{width: max-content;margin: 0 auto;}*/
section#estrategia h2::after{content: none;position: absolute;left: 0;width: 20%;height: 2px;background-color: #000;}
section#estrategia .container{z-index: 2;position: relative;}
img.img-fluid.img-absolute {position: absolute;height: 100%;object-fit: contain;right: 10%;opacity: .6;z-index: 1;}

section {padding-top: 5rem; padding-bottom: 5rem;}
.caja{}
.caja i{font-size: 6vh;margin-bottom: 15px;}
.caja p{margin-bottom: 0;}

.card {transition: transform .5s ease;}
.caja-img{position: relative;overflow: hidden;margin-top: 20px;}
.card img {transition: transform .5s ease;height: 80px;object-fit: contain;filter: sepia(100%) hue-rotate(175deg) saturate(300%);}
.caja-img i{margin-top: 20px;font-size: 80px;color: #ff4939;}
.card:hover {transform: scale(1.05);}
.card-body h5{font-size: 25px;}
.card-body p{margin-bottom: 0;}

.proceso-linea {position: relative;display: flex;justify-content: space-between;align-items: center;}
.proceso-linea::before {content: "";position: absolute;top: 40%;left: 12%;right: 12%;height: 4px;background: linear-gradient(90deg, #5f6efc 0%, #6fc3f7 100%);z-index: 0;transform: translateY(-50%);}
.proceso-linea .badge {position: relative;z-index: 1;background-color: #5f6efc;color: #fff;border-radius: 50%;width: 60px;height: 60px;font-size: 1.5rem;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.proceso-linea p {width: 89%;margin: 10px auto;}

.custom-modal {border-radius: 15px;overflow: hidden;background: #fff;box-shadow: 0 0 30px rgba(0,0,0,0.2);}
.custom-input {border-radius: 10px;border: 1px solid #ccc;padding: 10px 15px;transition: all 0.3s ease;}
.custom-input:focus {border-color: #D73981;box-shadow: 0 0 8px rgba(215,57,129,0.4);outline: none;}
.btn-submit {background: linear-gradient(90deg, #5f6efc, #6fc3f7);color: #fff;border: none;border-radius: 10px;padding: 12px;font-weight: bold;transition: transform 0.2s ease, box-shadow 0.3s ease;}
.btn-submit:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(95,110,252,0.4);}

/* Modal */
.modal-content {border-radius: 1rem;}


input.btn-hubspot{background: #5f6efc;padding: 5px 20px;color: #fff;}


/* contenedor del formulario */
.formulario-hubspot form {background: #fff;border-radius: 10px;padding: 2rem;box-shadow: 0 4px 20px rgba(0,0,0,0.1);}

/* campos */
.formulario-hubspot .form-control {border-radius: 8px;border: 1px solid #ccc;margin-bottom: 1rem;transition: all 0.3s ease;}
.formulario-hubspot .form-control:focus {border-color: #5f6efc;box-shadow: 0 0 0 0.2rem rgba(95, 110, 252, 0.25);}

/* botón */
.btn-hubspot {background: linear-gradient(90deg, #5f6efc 0%, #6fc3f7 100%);border: none;border-radius: 8px;padding: 0.75rem 2rem;color: #fff;font-weight: 600;transition: all 0.3s ease;}
.btn-hubspot:hover {opacity: 0.9;transform: translateY(-2px);}
label span {color: #fff;}

footer{background: #1a1a1a;padding: 20px;}
footer .info-contacto{text-align: center;}
footer .info-contacto h5{}
footer .info-contacto p{margin-bottom: 0;}
footer .info-contacto a.enlaces-contacto{display: block;color: #fff;text-decoration: none;transition:.5s all ease;margin-bottom:5px}
footer .info-contacto a.enlaces-contacto:hover{color:#E8B931}
footer .info-contacto a.enlaces-contacto:last-child{margin-bottom:0;}
footer .info-contacto .sociales{display: flex;justify-content: center;}
footer .info-contacto .sociales a{color: #fff;margin-right: 15px;font-size:20px;text-decoration: none;transition:.5s all ease;}
footer .info-contacto .sociales a:last-child{margin-right: 0px;}
footer .info-contacto .sociales a:hover{color:#E8B931}
footer .info-contacto .sociales a i{}



.process-section {position: relative;display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;padding: 0px 20px;}

/* Línea de conexión detrás de los pasos */
.process-section::before {content: none;position: absolute;top: 75px;left: 5%;width: 90%;height: 3px;background: #0d97fa;z-index: 0;border-radius: 2px;}
.process-card {position: relative;z-index: 1;flex: 1 1 250px;background: #fff;border-radius: 12px;padding: 20px 15px;text-align: left;box-shadow: 0 4px 15px rgba(0,0,0,0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.process-card:hover {transform: translateY(-5px);box-shadow: 0 6px 20px rgba(0,0,0,0.12);}
.process-card h4{font-size: 25px;font-family:'TruenoSBd',sans-serif;}
.icon {background: linear-gradient(135deg, #ff416c, #ff4b2b);color: #fff;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 12px;font-size: 20px;margin-bottom: 15px;}
.step-number {position: absolute;top: -10px;right: -10px;background: #0d97fa;color: #fff;font-weight: 600;border-radius: 50%;padding: 8px 12px;font-size: 14px;display: none;}



.mySwiper-container {width: 100%;max-width: 1100px;margin: 30px auto;position: relative;}
.swiper {width: 100%;height: 100%;border-radius: 16px;overflow: hidden;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);}
.swiper-slide {background: #fff;text-align: center;padding: 20px;}
.swiper-slide img {width: 100%;height: auto;border-radius: 12px;margin-bottom: 15px;}
.swiper-slide h3 {font-size: 1.2rem;color: #222;margin-bottom: 8px;}
.swiper-slide p {color: #555;font-size: 0.95rem;}

/* Botones personalizados */
.swiper-button-next,
.swiper-button-prev {color: #fff;background: linear-gradient(135deg, #ff416c, #ff4b2b);width: 45px;height: 45px;border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);transition: all 0.3s ease;}

.swiper-button-next:hover,
.swiper-button-prev:hover {transform: scale(1.1);background: linear-gradient(135deg, #ff9f1a, #ff416c);}


.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{content: none;}

.swiper-button-next i,
.swiper-button-prev i {font-size: 1.2rem;}
.swiper-button-prev {left: 15px;}
.swiper-button-next {right: 15px;}

/* Paginación */
.swiper-pagination-bullet {background: #ff416c;opacity: 0.5;}

.swiper-pagination-bullet-active {background: #ff9f1a;opacity: 1;}


/* Responsive */
@media (max-width: 1540px) {
  .size-custom{font-size: 3vh;}
}


@media(max-width:1280px){
  .process-card{flex: 1 1 230px;}
  .process-card h4,.card-body h5{font-size: 22px;}
  p,a,span{font-size: 16px;}
}


@media (max-width: 768px) {
  .menu-toggle {display: block;}
  .nav-links {display: none;flex-direction: column;background: #1a1a1a;position: absolute;top: 80px;left: 0;width: 100%;padding: 20px;gap: 15px;}
  .nav-links.active {display: flex;}

  /* Submenú en móvil */
  .dropdown-menu {position: static;background: transparent;box-shadow: none;padding: 0;}
  .dropdown-menu .dropdown-item {padding: 8px 15px;}
  .dropdown:hover .dropdown-menu {display: none; /* evita el hover en móvil */}
  .dropdown.open .dropdown-menu {display: block;}

  /* Icono dentro del flujo del texto */
  .arrow-icon {margin-left: auto;transition: transform 0.3s ease;}
  .ancho-90{width: 100%;}

  section#hero {height: 100vh;}
  section#hero .col-md-6{text-align: center;}
  #hero h1 {font-size: 1.8rem;text-align: center;}
  h2{font-size: 25px;}
  #hero p{text-align: center;}
  img.img-fluid.img-absolute{object-fit: cover;}
  section#estrategia h2,section#estrategia h3{text-align: center;}
  .proceso-linea {flex-direction: column;align-items: center;}
  .proceso-linea::before {content: "";width: 4px;height: 80%;top: 14%;left: 50%;right: auto;background: linear-gradient(180deg, #5f6efc 0%, #6fc3f7 100%);transform: translateX(-50%);}
  .proceso-linea .col-md-3 {width: 100%;margin-bottom: 2rem;}
  .proceso-linea .badge {margin: 0 auto;}
  .proceso-linea p {text-align: center;position: relative;z-index: 2;background: #ffffff;width: auto;transform: translateY(28px);}
  .size-custom{font-size: 18px;}

  .process-section {flex-direction: column;align-items: center; padding: 10px; }
  .process-section::before {content: none;position: absolute;left: 50%;top: 0;transform: translateX(-50%);width: 3px;height: 100%;background: linear-gradient(180deg, #ff416c, #ff9f1a);  }
  .process-card {max-width: 100%;text-align: center;  }
  .step-number {top: 10px;right: 10px;  }
  .icon {margin: 0 auto 15px auto;  }
  .process-card h4{font-size: 17px;}

  button.btn-custom{padding: 10px 30px;}
  p,a,span{font-size: 15px;}

  

}
