:root {
    --bs-primary: #5840ba;
    --bs-primary-rgb: 88, 64, 186; /* RGB equivalente a #5840ba */
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif; /* Roboto para el cuerpo */
    font-weight: 400;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.hero-section h1, /* Aseguramos que el H1 del hero use Poppins */
.service-card h5,
.work-card h5,
.testimonial-card h6,
.cta-section h2,
.footer-section h5 {
    font-family: 'Poppins', sans-serif; /* Poppins para títulos */
    font-weight: 600; /* Un peso predeterminado para títulos, se puede ajustar por clase */
}

/* Ajustes específicos de peso si es necesario */
.hero-section h1,
.build-section h2,
.services-section h2,
.portfolio-section h2,
.testimonials-section h2,
.cta-section h2 {
    font-weight: 700; /* Títulos de sección más destacados */
}

.navbar-brand,
.service-card h5,
.work-card h5,
.testimonial-card h6,
.footer-section h5 {
    font-weight: 500; /* Un peso medio para otros títulos/textos destacados */
}

.hero-section {
    background-color: #ffffff; /* Fondo blanco */
    padding-top: 2rem; /* Más espacio superior */
    padding-bottom: 2rem; /* Más espacio inferior */
    /* Para los polígonos, necesitaremos una imagen de fondo o SVGs más adelante */
}

.hero-section h1 {
    color: #212529; /* Color de texto oscuro para el h1 */
    font-weight: bold;
}

.hero-section .lead {
    color: #6c757d; /* Color de texto gris para el párrafo */
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.hero-section .btn-primary {
    /* Bootstrap ya le da el color azul, pero podemos personalizar si es necesario */
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

.navbar {
    border-bottom: 1px solid #e9ecef;
}

.navbar-brand {
    color: #5840ba !important; /* Color primario original */
    font-size: 1.75rem; /* Mantenemos el tamaño base */
    /* No se necesita font-weight aquí ya que se maneja con spans internos */
}


.navbar-brand .small {
    font-size: 0.6em; /* Ajustar el tamaño de .COM */
    /* fw-normal ya está en el HTML */
    color: #212529; /* Color oscuro para .COM */
}

.navbar .nav-link {
    color: #212529; /* Color oscuro para los links */
    font-weight: 500;
}

.navbar .nav-link.active {
    color: var(--bs-primary); /* Color primario para el link activo */
    font-weight: 600;
}

.btn-navbar-talk {
    border-radius: 50px !important; /* Forma de píldora */
    padding: 0.5rem 1.5rem !important; /* Ajustar padding si es necesario */
    font-weight: 500;
}

.build-section {
    /* background: #3940E8; */ /* Color azul principal de la imagen - Comentado */
    background-color: #5840ba; /* Color primario original */
    /* Considera un degradado si es necesario, ej: background: linear-gradient(to right, #3940E8, #1C207C); */
}

.build-section h2 {
    font-size: 2.8rem; /* Ajusta según sea necesario */
}

.build-section p {
    font-size: 0.95rem;
    color: #e0e0ff; /* Un blanco ligeramente azulado para el texto */
}

.build-section .row.text-center h3 {
    font-size: 3rem; /* Tamaño grande para los números de las estadísticas */
    margin-bottom: 0.25rem;
}

.build-section .row.text-center p {
    font-size: 0.9rem;
    color: #c0c0ff; /* Un blanco un poco más oscuro para los subtítulos de las estadísticas */
}

/* ESTILOS ANTIGUOS DE SERVICIO - COMENTADOS POR REDISEÑO
.services-section {
    background-color: #f8f9fa; 
}

.services-section h2 {
    color: #212529; 
}

.service-card {
    border-radius: 15px; 
    border: none;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px); 
}

.service-card h5 {
    font-size: 1.25rem; 
    margin-bottom: 1rem; 
}

.service-arrow i {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.service-arrow:hover i {
    color: #ffffff;
}

.service-description-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 
}
*/

/* Nuevos estilos para las tarjetas de servicio rediseñadas */
.service-card-redesigned {
    background-color: #ffffff;
    border: 1px solid #e9ecef; /* Borde sutil */
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-redesigned:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.service-icon {
    font-size: 2rem; /* Tamaño del ícono */
    color: var(--bs-primary); /* Color principal (actualmente #5840ba) */
    margin-bottom: 0.5rem; /* Espacio debajo del ícono si estuviera solo arriba */
}

.service-number {
    font-size: 1rem;
    font-weight: 600;
    color: #adb5bd; /* Gris claro para el número */
}

.service-card-redesigned .card-title {
    font-size: 1.25rem; /* Ajustado desde 1.25rem */
    font-weight: 700; /* Más peso para el título */
    color: #212529; /* Color oscuro para el título */
    margin-bottom: 0.75rem;
}

.service-card-redesigned .card-text {
    font-size: 0.875rem; /* Ligeramente más pequeño */
    color: #6c757d; /* Color de texto secundario de Bootstrap */
    margin-bottom: 1rem;
}

.service-details-link {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    color: #212529; /* Color oscuro para el enlace */
    text-decoration: none;
    transition: color 0.3s ease;
}

.service-details-link:hover {
    color: var(--bs-primary); /* Color principal al pasar el cursor */
}

.service-details-link i {
    vertical-align: middle;
    font-size: 1rem; /* Tamaño de la flecha */
    margin-left: 0.25rem;
}

.our-work-section {
    background-color: #f8f9fa; /* Fondo claro para esta sección, similar a la de servicios */
}

.our-work-section h2 {
    color: #212529; /* Color oscuro para el título principal */
    font-size: 2.5rem; /* Tamaño del título */
}

.work-card {
    border: none;
    border-radius: 15px; /* Bordes redondeados consistentes */
    overflow: hidden; /* Para que la imagen no se salga de los bordes redondeados */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075); /* Sombra más sutil */
}

.work-card img {
    object-fit: cover; /* Asegura que la imagen cubra el espacio asignado */
    height: 100%;
}

.work-card .col-md-7 {
    background-color: #ffffff;
}

.work-card h5 {
    color: #212529;
    font-size: 1.4rem;
}

.work-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.2rem !important;
    font-size: 1rem;
    height: auto;
    min-height: 44px;
}

.work-arrow i {
    font-size: 1.2rem !important;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.work-arrow:hover i {
    transform: scale(1.1) rotate(5deg); /* Pequeña animación al icono de flecha */
}

.portfolio-section {
    background-color: #ffffff; /* Fondo claro para esta sección, similar a la de servicios */
}

.portfolio-section h2 {
    color: #212529; /* Color oscuro para el título principal */
    font-size: 2.5rem; /* Tamaño del título */
}



.testimonials-section h2 {
    color: #212529; /* Color oscuro para el título */
}

.testimonial-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    position: relative; /* Para posicionar las comillas si es necesario de forma más compleja */
    min-height: 300px; /* Asegurar una altura mínima para consistencia */
}

.testimonial-avatar {
    width: 60px;   /* Tamaño del avatar */
    height: 60px;
    object-fit: cover;
}



/* Estilos para el carrusel de testimonios */
#testimonialCarousel .carousel-indicators button {
    background-color: #adb5bd; /* Color más oscuro para los indicadores */
}

#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
    background-color: var(--bs-primary); /* Color de fondo del círculo */
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem 1rem; /* Tamaño del icono SVG dentro del círculo */
}

#testimonialCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

#testimonialCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
    width: 5%; /* Reducir un poco el ancho del área de click */
}

.cta-section {
    background-color: #5840ba; /* Color primario original */
}

.cta-section .lead {
    color: rgba(255, 255, 255, 0.85);
}

.footer-section h5 {
    color: #ffffff;
}

.cta-section .btn-light {
    color: var(--bs-primary);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 50px; /* Botón más redondeado */
}

.cta-section .btn-icon {
    border-radius: 50%; /* Botón de icono circular */
    width: 50px;   /* Ancho fijo */
    height: 50px;  /* Alto fijo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cta-section .btn-icon i {
    font-size: 1.5rem;
}

.footer-section {
    background-color: #101010; /* Color de fondo oscuro para el footer */
}

.footer-section h5 {
    color: #ffffff;
}

.footer-section a.text-white-50:hover {
    color: #ffffff !important; /* Enlaces más claros al pasar el cursor */
}

.footer-section .list-unstyled li {
    font-size: 0.9rem;
}

.footer-section .bi {
    /* text-primary ya está en los iconos de contacto */
}

.newsletter-input {
    background-color: #212529; /* Fondo oscuro para el input */
    border-color: #212529;
    color: #ffffff;
    border-radius: 50px 0 0 50px; /* Bordes redondeados a la izquierda */
    padding: 0.75rem 1rem;
}

.newsletter-input::placeholder {
    color: #adb5bd;
}

.newsletter-input:focus {
    background-color: #212529;
    border-color: var(--bs-primary);
    color: #ffffff;
    box-shadow: none;
}

.newsletter-btn {
    border-radius: 0 50px 50px 0; /* Bordes redondeados a la derecha */
    padding: 0.75rem 1.25rem;
}

.btn-social {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-social:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #ffffff !important;
}

.footer-section hr {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Clases personalizadas para color verde específico */
.text-custom-green {
    color: #a4db75 !important;
}

.btn-custom-green {
    background-color: #a4db75 !important;
    border-color: #a4db75 !important;
    color: #212529 !important; /* Texto oscuro para contraste */
    border-radius: 50px; /* Bordes redondeados para forma de píldora */
    font-family: 'Poppins', sans-serif; /* Fuente Poppins */
    font-weight: 600; /* Peso de fuente más bold */
    padding: 0.75rem 2rem; /* Padding horizontal aumentado, vertical ajustado */
    font-size: 1rem; /* Tamaño de fuente reducido */
    letter-spacing: -0.5px; /* Espaciado entre letras ajustado */
}

.btn-custom-green:hover,
.btn-custom-green:focus {
    background-color: #8cc75f !important; /* Un tono más oscuro para hover/focus */
    border-color: #83b957 !important; /* Un tono más oscuro para hover/focus */
    color: #212529 !important; /* Texto oscuro también en hover/focus */
    border-radius: 50px; /* Mantener bordes redondeados */
    font-family: 'Poppins', sans-serif; /* Mantener Poppins */
    font-weight: 600; /* Mantener peso */
    padding: 0.75rem 2rem; /* Mantener padding */
    font-size: 1rem; /* Mantener tamaño de fuente reducido */
    letter-spacing: -0.5px; /* Mantener espaciado entre letras ajustado */
}

/* Forzar color primario para btn-outline-primary */
.btn-outline-primary {
    color: #5840ba !important; 
    border-color: #5840ba !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #5840ba !important;
    border-color: #5840ba !important;
    color: #ffffff !important; /* Texto blanco en hover */
}

/* Agregaremos más estilos a medida que construyamos las secciones */
#typed-text {
    min-height: 1.2em; /* Ajusta según el tamaño de fuente del h1 */
    display: inline-block; /* o 'block' si quieres que ocupe toda la línea debajo del <br> */
    vertical-align: bottom; /* Para alinear con el texto anterior si es inline-block */
    position: relative; /* Para el cursor */
}

/* Efecto cursor parpadeante */
#typed-text::after {
    content: '|';
    display: inline-block;
    animation: blink 0.7s infinite;
    font-weight: normal; /* Para que no herede el bold del h1 */
    color: var(--bs-primary); /* Color del cursor */
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Estilos para la imagen del header */
.header-image-styled {
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Sombra sutil */
}

/* Agregaremos más estilos a medida que construyamos las secciones */