/* styles.css */
:root{
  --color-primary: #1B1464; /* morado oscuro */
  --color-accent: #8CC63F; /* verde */
  --color-secondary: #3FA9F5; /* azul */
}

*{box-sizing:border-box}
body{font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#222}

/* Navbar */
.navbar-brand .logo{height:44px}
.brand-text{font-weight:600; color:var(--color-primary)}


#home {
  position: relative;
  overflow: hidden;
}

#home .carousel-item {
  position: relative;
  height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel-slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 15px;
}

/* Fondo con gradiente opcional para legibilidad */
#home .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 20, 100, 0.75) 0%, rgba(0, 0, 0, 0.35) 100%);
  z-index: 1;
}

/* Texto */
.carousel-text {
  position: relative;
  z-index: 2;
}

.carousel-text h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
}

.carousel-text p {
  font-size: 1.1rem;
  margin-bottom: 25px;
  color: #f0f0f0;
}

.carousel-text .btn-primary {
  background-color: #8CC63F;
  border: none;
  font-weight: 600;
}

.carousel-text .btn-primary:hover {
  background-color: #3FA9F5;
}

/* Imagen flotante */
.carousel-image {
  position: relative;
  z-index: 2;
}

.header-img {
  max-width: 80%;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.3));
}

/* Animación suave */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* RESPONSIVIDAD */
@media (max-width: 992px) {
  #home .carousel-item {
    height: auto;
    padding: 60px 0;
  }

  .carousel-slide-content {
    flex-direction: column;
    text-align: center;
  }

  .header-img {
    margin-top: 25px;
    max-width: 70%;
    animation: none;
  }

  .carousel-text h1 {
    font-size: 2rem;
  }

  .carousel-text p {
    font-size: 1rem;
  }
}


/* Ocultar flechas del carrusel en pantallas pequeñas */
@media (max-width: 768px) {
  #home .carousel-control-prev,
  #home .carousel-control-next {
    display: none !important;
  }
}




/* Services */
.service-card{border:1px solid rgba(0,0,0,0.05); border-radius:12px}

/* CTA background */
.bg-image{background-size:cover; background-position:center}
.overlay-opacity{background-color:rgba(27,20,100,0.35); padding:60px 0}

/* MVV icons */
#mvv i{color:var(--color-primary)}

/* Contact form */
#contacto .form-control:focus{box-shadow:none; border-color:var(--color-secondary)}

/* Footer */
footer{background:#111}
.footer-logo{height:50px}

/* WhatsApp button */
.whatsapp-btn{position:fixed; right:18px; bottom:18px; background:var(--color-accent); color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,0.2); z-index:999}
.whatsapp-btn i{font-size:22px}

/* Responsive tweaks */
@media (max-width:768px){
  .carousel-caption{left:40%; transform:translate(-50%,-10%); text-align:center}
  .carousel-caption h1{font-size:1.8rem}
}
/* ===== PRESENCIA SIMPLE ===== */
#presencia {
  background-color: #f5f6fa;
  padding: 80px 0;
}

#presencia h2 {
  color: #1B1464;
  font-weight: 500;
  margin-bottom: 20px;
  
  letter-spacing: 1px;
}

#presencia p {
  color: #333;
  font-size: 1.05rem;
  line-height: 1.6;
}

#presencia img {
  max-width: 100%;
  height: auto;
  
}

/* ===== RESPONSIVIDAD ===== */
@media (max-width: 992px) {
  #presencia {
    padding: 60px 20px;
  }
}

@media (max-width: 576px) {
  #presencia h2 {
    font-size: 1.8rem;
  }

  #presencia p {
    font-size: 1rem;
  }
}
/* ===== FAQ ===== */
#faq h2 {
  font-weight: 500;
  letter-spacing: 1px;
}

.accordion-button {
  color: #1B1464;
  font-weight: 600;
}

.accordion-button:not(.collapsed) {
  background-color: #8CC63F20; /* verde suave al abrir */
  color: #1B1464;
}

.accordion-body {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
/* ===== SERVICIOS 1===== */
#servicios i {
  color: #8CC63F;
  transition: transform 0.3s ease;
}

#servicios i:hover {
  transform: scale(1.2);
}

#servicios h5 {
  color: #1B1464;
  font-weight: 600;
}

#servicios p {
  font-size: 0.95rem;
  color: #555;
}




/* ===== DESCANSO VISUAL ===== */
.descanso {
  position: relative;
  background-attachment: fixed;
  color: #fff;
  text-align: center;
}

.descanso::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(27, 20, 100, 0.75);
}

.descanso .overlay {
  position: relative;
  z-index: 2;
}

.descanso h2 {
  color: #fff;
  font-weight: 700;
}

.descanso .btn-primary {
  background-color: #3FA9F5;
  border: none;
  color: #fff;
  font-weight: 600;
}

.descanso .btn-primary:hover {
  background-color: #8CC63F;
}

/* ===== SERVICIOS talento humano  ===== */
#servicios {
  background-color: #ffffff; /* Fondo blanco */
  padding: 80px 0;
}

#servicios h2 {
  color: #1B1464; /* Azul corporativo */
  font-weight: 700;
  
  letter-spacing: 1px;
  margin-bottom: 50px;
}

/* Caja individual */
.service-box {
  background-color: #ffffff; /* También blanco dentro */
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  padding: 40px 25px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  height: 100%;
}

/* Íconos Font Awesome 1 */
.service-box i {
  font-size: 3rem;
  color: #8CC63F; /* Verde corporativo */
  margin-bottom: 20px;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
} 


/* Títulos */
.service-box h4 {
  color: #1B1464;
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

/* Texto */
.service-box p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Hover (efecto al pasar el cursor) */
.service-box:hover {
  border-color: #8CC63F;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-8px);
}

.service-box:hover i {
  color: #3FA9F5; /* Azul claro corporativo */
  transform: scale(1.15);
}

.service-box:hover h4 {
  color: #1B1464;
}

.service-box:hover p {
  color: #333;
}

/* ===== RESPONSIVIDAD ===== */
@media (max-width: 992px) {
  #servicios {
    padding: 60px 20px;
  }

  .service-box {
    padding: 30px 20px;
  }

  .service-box i {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  #servicios h2 {
    font-size: 1.8rem;
  }

  .service-box h4 {
    font-size: 1.1rem;
  }
}

/* ==========================
   CONTACTO
========================== */
#contacto {
  background-color: #f8f9fa;
  color: #1B1464;
}

#contacto h2 {
  color: #1B1464;
  font-weight: 700;
  margin-bottom: 1rem;
}

#contacto p {
  color: #333;
}

#contacto .form-label {
  font-weight: 600;
  color: #1B1464;
}

#contacto .form-control {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s ease;
}

#contacto .form-control:focus {
  border-color: #1B1464;
  box-shadow: 0 0 5px rgba(27, 20, 100, 0.3);
}

#contacto button[type="submit"] {
  background-color: #1B1464;
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

#contacto button[type="submit"]:hover {
  background-color: #3FA9F5;
}

#contacto h4 {
  color: #1B1464;
  margin-top: 1.5rem;
  font-weight: 700;
}

#contacto a {
  color: #1B1464;
  text-decoration: none;
  transition: color 0.3s ease;
}

#contacto a:hover {
  color: #3FA9F5;
}

#contacto strong {
  color: #1B1464;
}

/* ==========================
   FAQ (Preguntas Frecuentes)
========================== */
#faq {
  background-color: #ffffff;
}

#faq h2 {
  color: #1B1464;
  font-weight: 700;
}

.accordion-button {
  background-color: #f8f9fa;
  color: #1B1464;
  font-weight: 600;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-button:not(.collapsed) {
  background-color: #3FA9F5;
  color: #fff;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-item {
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.accordion-body {
  color: #333;
  line-height: 1.6;
}

/* Ajuste de listas dentro del FAQ */
.accordion-body ul {
  padding-left: 20px;
}

.accordion-body li {
  margin-bottom: 5px;
  color: #333;
}
/* ==========================
   ICONOS DE REDES SOCIALES
========================== */

#contacto .fa-brands {

  border-radius: 50%;          /* forma circular */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-right: 10px;
  transition: all 0.3s ease;
}

#contacto .fa-brands:hover {
  background-color: #3FA9F5;   /* azul celeste al pasar el mouse */
  color: #fff;
  border-color: #3FA9F5;
  transform: scale(1.1);       /* ligero zoom */
}

/* ==========================
   ICONOS
========================== */

.fa-facebook {
  background-color: #1877F2;  /* azul Facebook */
  color: #fff;
  border-color: #1877F2;
}

.fa-linkedin {
  background-color: #0A66C2;  /* azul LinkedIn */
  color: #fff;
  border-color: #0A66C2;
}

.fa-instagram {
  background: linear-gradient(45deg, #FCAF45, #E1306C, #5851DB);
  color: #fff;
  border: none;
}



/* ==========================
   SERVICIOS JURÍDICOS
========================== */
.three-columns .col-lg-4 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.service-box {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

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

.service-box i {
  color: #1B1464;
}

.service-box h4 {
  color: #1B1464;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-box ul li {
  margin-bottom: 6px;
  color: #333;
}


/* ==========================
   NOSOTROS
========================== */
#nosotros {
  background-color: #f8f9fa; /* fondo claro */
  padding: 80px 0;
}

#nosotros h2 {
  color: #1B1464; /* morado corporativo */
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

#nosotros p {
  color: #333;
  line-height: 1.7;
  font-size: 1.05rem;
}

#nosotros .lead {
  font-weight: 400;
}

#nosotros img {
  border-radius: 12px;
  transition: transform 0.4s ease;
}

#nosotros img:hover {
  transform: scale(1.03);
}

/* Negritas con énfasis */
#nosotros strong {
  color: #1B1464; /* morado */
  font-weight: 700;
}

/* Responsive */
@media (max-width: 992px) {
  #nosotros {
    padding: 60px 20px;
  }

  #nosotros h2 {
    text-align: center;
    margin-top: 30px;
  }

  #nosotros p {
    text-align: justify;
  }
}

@media (max-width: 576px) {
  #nosotros h2 {
    font-size: 1.8rem;
  }

  #nosotros p {
    font-size: 1rem;
  }
}
/* ==========================
   SERVICIOS IDENTIFICACIÓN DE TALENTO (nuevo estilo)
========================== */
.servicios-talento {
  background-color: #ffffff;
  padding: 80px 0;
}

.servicios-talento h2 {
  color: #1B1464;
  font-weight: 700;
  margin-bottom: 50px;
  letter-spacing: 1px;
}

/* Tarjeta general */
.talento-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  height: 100%;
}

.talento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Imagen */
.talento-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Contenido */
.talento-content {
  padding: 25px 20px;
  text-align: left;
}

.talento-content h4 {
  color: #1B1464;
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 1.15rem;
}

.talento-content p {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Lista */
.talento-list {
  list-style-type: disc;
  padding-left: 20px;
  color: #555;
}

.talento-list li {
  margin-bottom: 5px;
  font-size: 0.95rem;
}

/* Responsividad */
@media (max-width: 992px) {
  .talento-img {
    height: 160px;
  }
}

@media (max-width: 768px) {
  .talento-card {
    max-width: 420px;
    margin: 0 auto;
  }

  .talento-img {
    height: 150px;
  }

  .talento-content {
    text-align: center;
  }

  .talento-list {
    display: inline-block;
    text-align: left;
  }
}