@import url(https://fonts.googleapis.com/css?family=Teko:300,regular,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:regular,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Reddit+Sans:200,300,regular,500,600,700,800,900,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

/** VARIABLES */
:root{
    --font-principal: 'Reddit Sans';
	  --font-secundaria: 'Roboto';
    --font-cursiva: 'Dancing Script';
    --color-primario: #034FFF;
    --color-secundario: #0B5ED7;
    --color-oscuro: #032C7F;
    --color-texto-azul: #5971BA;
    --color-texto-gris: #939393;
    --color-gris-claro: #D7DCEB;
    --color-azul-claro: #9BADC9;
    --color-amarillo: #FFD602;
    --color-separador-linea: #DCE6F4;
}

/** ESTILOS GENERALES */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

.contenedor {
  width: 90%;            /* O usa un max-width fijo como 1200px */
  max-width: 1200px;
  margin: 0 auto;        /* Centra horizontalmente */
  box-sizing: border-box;
}



/* Definimos estilo general a los titulos */
.title{
    text-align: center;
    font-weight: 600;
    font-size: 50px;
    line-height: 150%;
    letter-spacing: opx;
    margin: 30px 0;
}

.title-800{
    text-align: center;
    font-weight: 800;
    font-size: 50px;
    line-height: 105%;
    letter-spacing: opx;
    margin: 30px 0;
}

.btn{
    background-color: var(--color-primario);
    color: #FFF;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 5px;
    transition: all .5s;
}

.btn-borde{
    background-color: var(--color-primario);
    color: #FFF;
    border: 1px #FFF;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 5px;
    transition: all .5s;
}

.btn:hover{
    transform: scale(1.1);
    background: var(--color-secundario);
}

/** ESTILOS GENERALES PARA ENLACES */
a{
    text-decoration: none;
    font-size: 14px;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    font-weight: 700;
}

/** MENU PRINCIPAL */
.menu-principal{
    width: 100%;
    height: 100px;
    /* background: #FFF; */
    display: flex;
    justify-content: space-between; /* Distribuye el logo a la izquierda y el menú a la derecha */
    align-items: center; /* Centra verticalmente los elementos */
    padding: 0 20px;
    border-bottom: 2px solid #FFF;
    z-index: 10;
}

/** Hacemos repetar que la imagen este dentro del contenedor */
.nav-imagen{
    height: 100%;
}

/** Para hacer que la imagen respete el contenedor, se dan los siguientes estilos */
.nav-imagen img{
    width: 167px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav-enlaces {
    display: flex;
    justify-content: flex-start; /* Alinea los elementos desde la izquierda */
    width: 100%;
    padding-left: 40%; /* Hace que empiecen desde la mitad */
}

/** Trabajamos ahora con los enlaces */
.nav-enlaces a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 140px; /* ajusta el ancho según necesidad */
    text-align: center;
    padding: 8px 10px;
    margin: 0;
    color: #FFF;
    font-family: var(--font-principal);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0px;
    border: 2px solid transparent;
    transition: all 0.5s;
    line-height: 1.5;
}

/* Le damos color al elemento activo, en este caso a INICIO */
.nav-enlaces a.active{
    color: var(--color-primario);
}

.nav-enlaces a:hover{
    border: 2px solid var(--color-primario);
    background-color: rgba(0, 123, 255, 0.4);
}



header {
    position: relative;
    width: 100%;
    height: calc(100vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 0;
}

.contenido-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: translateY(-15%);
}

#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}


header::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 10px solid #ffd502;
    z-index: 0;
}

header > div {
    position: relative;
    z-index: 1;
}

.titulo{
    width: 100%;
    position: absolute;
    font-weight: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.titulo h1{
    font-size: 55px;
    color: #FFF;
    letter-spacing: 2px;
    font-weight: bold;
    margin: 20px 0;
}

.titulo h2{
    font-size: 40px;
    color: #FFF;
    letter-spacing: 2px;
    font-weight: bold;
    margin: 20px 0;
}

.titulo h3{
    font-size: 20px;
    color: #FFF;
    letter-spacing: 2px;
    font-weight: 400;
    margin: 20px 0;
}

.titulo button{
    width: 180px;
    height: 50px;
}

/** slider */

.slider {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
  position: relative;
}

/** PRODUCTOS */
.productos-card {
  display: flex;
  width: 90%;
  height: 285px;
  margin: -165px auto auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  position: relative;
  z-index: 10;
}

/* Cada producto */
.producto {
  flex: 1;
  text-align: center;
  padding: 60px;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-rows: 90px auto auto;
  align-items: start; /* Los elementos quedan pegados arriba */
  justify-items: center;
  background-color: white;
}

/* Divisor con pseudo-elemento detrás */
.producto::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
  width: 2px;
  background: #ccc;
  z-index: 1;
}

/* Ocultar divisor del último */
.producto:last-child::after {
  display: none;
}

/* Capa de color sobre hover */
.producto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primario);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2; /* sobre el divisor */
}

/* Al hacer hover mostrar capa azul */
.producto:hover::before {
  opacity: 1;
}

/* Contenido */
.producto > * {
  position: relative;
  z-index: 3; /* por encima de todo */
  color: #333;
}

/* Ocultar y mostrar imágenes */
.producto .img-hover {
  display: none;
}
.producto:hover .img-normal {
  display: none;
}
.producto:hover .img-hover {
  display: block;
}

/* Mostrar botón solo al hacer hover */
.producto button {
  display: none;
}

.producto:hover button {
  display: inline-block;
}

.producto h3 {
  font-size: 18px;
  margin-top: 20px; /* o la cantidad que prefieras */
  font-weight: 700;
  line-height: 150%;
}

/* Ocultar párrafo al hacer hover */
.producto p {
  display: block;
  margin-top: 4px; /* O menos si quieres más pegado */
  font-weight: 700;
  font-size: 13px;
  line-height: 102%;
  letter-spacing: 0%;
  color: var(--color-azul-claro);
}

.producto:hover p {
  display: none;
}

/* Cambiar texto e icono a blanco al hacer hover */
.producto:hover > * {
  color: white;
}

/* Botón */
.producto button {
  padding: 6px 12px;
  border: none;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Botón en hover */
.producto:hover button {
  background: rgba(255,255,255,0.2);
  color: white;
}

/* Imágenes con tamaños variables */
#producto_1_n {
  width: 100px;
  height: 101px;
}

#producto_1_h {
  width: 100px;
  height: 101px;
}

#producto_2_n {
  width: 125px;
  height: 101px;
}

#producto_2_h {
  width: 125px;
  height: 101px;
}

#producto_3_n {
  width: 114px;
  height: 102px;
}

#producto_3_h {
  width: 114px;
  height: 102px;
}

#producto_4_n {
  width: 195px;
  height: 80px;
}

#producto_4_h {
  width: 195px;
  height: 80px;
}

.btn-borde{
  color: #032C7F;
  border-color: white;
}

/** ESTILOS NUESTRO PROCESO */
.proceso-card h1{
    font-size: 55px;
    color: var(--color-oscuro);
    letter-spacing: 2px;
    font-weight: bold;
    margin: 80px 0;
    padding-bottom: 50px;
}

.timeline-steps {
  display: flex;
  width: 90%;
  margin: 50px auto;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.step {
  position: relative;
  z-index: 1;
  flex: 1;
  cursor: pointer;
  margin-bottom: 80px;
}

.step::after {
  content: '';
  position: absolute;
  top: 25px;
  left: calc(50% + 50px); 
  height: 2px;
  width: calc(80% - 50px);
  background-color: var(--color-gris-claro);
  transform: translateX(0%);
  z-index: -1;
  pointer-events: none;
}   

.step:last-child::after {
  display: none;
}

.step .circle {
  width: 50px;
  height: 50px;
  border: 4px solid var(--color-oscuro);
  border-radius: 50%;
  margin: 0 auto;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step .inner-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-oscuro);
}

.step span {
  position: absolute;
  visibility: hidden;
  margin-top: 0px;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-primario);
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.step.active span {
  visibility: visible;
}

.step.active .circle {
  border-color: var(--color-oscuro);
}

.step.active .inner-circle {
  background-color: var(--color-oscuro);
}

.step:not(.active) .circle {
  border-color: var(--color-gris-claro);
}

.step:not(.active) .inner-circle {
  background-color: var(--color-gris-claro);
}

.timeline{
  margin-bottom: 100px;
}

.timeline-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  text-align: left;
  max-width: 80%;
  margin: 0 auto;
}

.timeline-content .image img {
  width: 400px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.timeline-content .text h1 {
  font-size: 55px;
  color: var(--color-oscuro);
  margin-bottom: 10px;
}

.timeline-content .text p {
  font-size: 18px;
  color: var(--color-texto-gris);
}

/** SOLUCIONES */
.solucion-card{
  width: 80%;
  margin: auto;
  overflow: hidden; /* clave para que todo quede como una sola pieza */
  margin-top: 100px;
  margin-bottom: 100px;
}

.solucion-card h3{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--color-amarillo);
}

.solucion-card p{
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0px;
  margin-bottom: 50px;
}

.solucion-card h1{
  color: var(--color-oscuro);
}

.tabs-container {
  margin-top: 60px;
}

.tabs {
  position: relative;
  display: flex;
  justify-content: space-between;
  /* border-bottom: 5px solid #ccc;  <-- Eliminar esta línea */
}

/* Línea base única y gruesa */
.tabs .tab-line {
  position: absolute;
  bottom: -8px;   /* Alineada al borde inferior */
  left: 0;
  width: 100%;
  height: 4px; /* grosor de 4px */
  background: #ccc;
  z-index: 0;
}

/* Cada tab */
.tab {
  position: relative;
  flex: 1;
  padding: 15px 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  z-index: 1; /* para estar encima de .tab-line */
  transition: color 0.3s ease;
}

/* Barra azul bajo tab activo */
.tab.active::after {
  content: "";
  position: absolute;
  bottom: -5px; /* justo encima de la línea base */
  left: 10%;
  width: 80%;
  height: 12px;
  background: #0D6EFD;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 1; 
}

/* Cambia color activo */
.tab.active {
  color: #0D6EFD;
}

/* Contenido de tabs */
.tab-content {
  margin-top: 30px;
}

/* Ocultar todos los panes menos el activo */
.tab-pane {
  display: none;
  margin-top: 90px;
}

.tab-pane.active {
  display: block;
}

/* Diseño interno del pane */
.tab-pane-inner {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* .tab-pane-inner img {
  width: 584px;
} */
.img-wrapper {
  position: relative;
  display: inline-block;
  padding: 20px; /* separación extra alrededor */
}

/* Imagen */
.img-wrapper img {
  width: 584px;
  display: block;
}

/* Cuadrado arriba derecha */
.img-wrapper::before {
  content: "";
  position: absolute;
  top: 10px;           /* hacia arriba, fuera de la imagen */
  right: 10px;         /* hacia la derecha, fuera de la imagen */
  width: 317px;
  height: 317px;
  background: #007bff;
  z-index: -1;            /* detrás de la imagen si lo deseas */
  border-top-right-radius: 3px; /* si quieres un redondeo opcional */
}

/* Cuadrado abajo izquierda */
.img-wrapper::after {
  content: "";
  position: absolute;
  bottom: 10px;        /* hacia abajo, fuera de la imagen */
  left: 10px;          /* hacia la izquierda, fuera de la imagen */
  width: 317px;
  height: 317px;
  background: #007bff;
  z-index: -1;
  border-bottom-left-radius: 3px;
} 

.tab-pane-inner .text h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.tab-pane-inner .text p {
  font-size: 16px;
  color: #555;
}

.tab-pane-inner .text button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #0D6EFD;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tab-pane .text h1 {
  font-size: 55px;
  color: var(--color-oscuro);
  margin-bottom: 10px;
}

.btn-flecha {
  background-color: transparent;   /* Quita fondo azul predeterminado */
  color: white;                    /* Texto en blanco */
  border: 2px solid white;        /* Borde blanco */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;              /* Asegura buen tamaño visual */
  border-radius: 5px;
  transition: background 0.3s ease, color 0.3s ease;
}

.producto .btn-flecha-borde {
  margin-top: 15px; /* Ajusta este valor al espacio que desees */
}

.btn-flecha-borde {
  background-color: transparent !important;
  color: white !important;
  border: 2px solid white !important;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 5px;
  line-height: 1.2;   /* asegurar alineación vertical */
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-flecha-borde i {
  color: #ffd502;
  font-size: 10px;    /* tamaño más pequeño */
  vertical-align: middle; 
  margin-left: 6px;
}

/* Tamaño más pequeño del ícono */
.btn-flecha i {
  font-size: 0.4em; /* Prueba con 0.7em o 0.6em si quieres aún más pequeño */
}

/** INSCRIBIRSE */
.inscribirse-card{
  height: 477px;
  width: 100%;
  background: url(img/bk_inscribirse.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  display: flex;                /* Flexbox */
  justify-content: center;      /* Centrado horizontal */
  align-items: center;          /* Centrado vertical */
  padding: 0 20px;              /* Espacio lateral si la pantalla es muy estrecha */
  box-sizing: border-box;
}

.bk-inscribirse {
  max-width: 700px;
  width: 100%;
  text-align: left;          /* Alineación del texto a la izquierda */
}

.bk-inscribirse h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 120%;
  color: #FFF;
  margin-bottom: 16px;
  text-align: left; 
}

.bk-inscribirse p {
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  color: #FFF;
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: left; 
}

/* Formulario en línea */
.form-inscripcion {
  display: flex;
  align-items: center;       /* Alinea verticalmente el input y el botón */
  gap: 12px;                 /* Espacio entre ambos */
  margin-bottom: 16px;
}

.form-inscripcion input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-inscripcion button {
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  background-color: var(--color-primario);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
  flex-wrap: nowrap;
}

.form-inscripcion button:hover {
  background-color: var(--color-secundario);
}

.terminos {
  font-size: 10px !important;
  font-weight: 400;
  color: #666;
}

.terminos a {
  font-size: 10px !important;
  font-weight: 400;
  color: var(--color-primario);
  text-decoration: none;
}

/** CONTADORES EXCELENCIA */
.compromiso-card {
  width: 100%;
  height: 477px;
  padding: 60px 20px;
  display: flex;                /* Flexbox */
  justify-content: center;      /* Centrado horizontal */
  align-items: center;          /* Centrado vertical */
  padding: 0 20px;              /* Espacio lateral si la pantalla es muy estrecha */
  box-sizing: border-box;
}

/* Contenedor flex principal */
.inner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

/* Título ocupa 40% */
.inner-container > h2 {
  flex: 0 0 45%;
  font-size: 43px;
  color: var(--color-oscuro);
  text-transform: uppercase;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Contenedores de los 3 contadores ocupan 60% */
.counters {
  flex: 0 0 55%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/* Cada contador ocupa ~20% */
.counter {
  flex: 0 0 calc((60% / 3) - (20px * (2/3)));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Estilos de número y etiqueta */
.number {
  font-size: 43px;
  font-weight: bold;
  color: var(--color-oscuro);
}

.label {
  margin-top: 8px;
  font-size: 25px;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  text-align: center;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 800px) {
  .inner-container {
    flex-direction: column;
    align-items: center;
  }
  .inner-container > h2,
  .counters,
  .counter {
    flex: 0 0 100%;
  }
  .counters {
    justify-content: center;
  }
}

/** FOOTER */
.footer {
  background-color: #0b2345; /* Azul oscuro */
  color: #fff;
  padding: 60px 20px 20px; /* Espacio superior e inferior */
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Asegura contenido a la parte superior del área */
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo img {
  height: 60px;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.footer-nav a:hover {
  color: #ffd502;
}

.footer-social a {
  display: inline-block;
  margin-left: 15px;
  color: #fff;
  font-size: 20px;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #ffd502;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.3);
  margin: 40px 0;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* Adaptabilidad para pantallas pequeñas */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .footer-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
  }
}

/** SERVICIOS */
.h2-personal{
  color: var(--color-amarillo) !important;
}

.header-servicios{
  height: calc(80vh) !important;
  background: url(img/nuestros_servicios.jpg) !important;
}

.header-servicios .titulo{
  top: 60% !important;
}

/** CONTACTO */

.header-contactos{
  height: calc(70vh) !important;
  background: url(img/contactenos.png) !important;
}

.header-contactos .titulo{
  top: 60% !important;
}

.header-blog{
  height: calc(70vh) !important;
  background: url(img/blog.png) !important;
}

.header-blog .titulo{
  top: 60% !important;
}



.productos-servicios-card{
  height: 477px;
  width: 100%;
  gap: 40px;
  display: flex;                /* Flexbox */
  justify-content: center;      /* Centrado horizontal */
  align-items: center;          /* Centrado vertical */
  padding: 0 20px;              /* Espacio lateral si la pantalla es muy estrecha */
  box-sizing: border-box;
}

.productos-servicios-card .ps-item {
  position: relative;
  width: 45%;                     /* Dos items ocupan aproximadamente 90% del contenedor */
   /*max-width: 500px;               Ancho máximo para no agrandar demasiado */
  text-align: center;
}

.productos-servicios-card .ps-item img {
  width: 100%;
  display: block;
  border-radius: 0px;          /* Opcional */
  filter: brightness(0.4); /* Oscurece la imagen al 60% de su brillo original */
}

.productos-servicios-card .ps-item img:hover {
  filter: brightness(1);          /* Imagen normal al pasar el mouse */
}

.productos-servicios-card .ps-item h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  font-size: 30px;
  text-transform: uppercase;
  pointer-events: none;        /* Evita seleccionar el texto */
  letter-spacing: 2px;
  font-weight: 100;
  margin: 20px 0;
  text-shadow: 5px 0 10px #000;
}

.bk-inscribirse.horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.bk-inscribirse.horizontal .left,
.bk-inscribirse.horizontal .right {
  flex: 1;
}

.bk-inscribirse.horizontal .left {
  max-width: 30%;
}

.bk-inscribirse.horizontal .right {
  max-width: 70%;
}

.bk-inscribirse.horizontal h1 {
  margin-bottom: 0; /* Quita el margin para que quede solo */
}

/** CONTACTENOS */
.contactenos-card {
  display: flex;
  gap: 40px;
  max-width: 1000px;
  margin: 60px auto;
  padding: 20px;
  box-sizing: border-box;
}

.contact-left,
.contact-right {
  flex: 1;
}

.contact-left h2 {
  font-size: 32px;
  margin-bottom: 12px;
}

.contact-left p {
  font-size: 18px;
  margin-bottom: 24px;
}

.contact-info {
  list-style: none;
  padding: 0;
  line-height: 1.6;
  font-size: 16px;
}

.contact-form .form-row {
  display: flex;
  gap: 20px;
}

.contact-form .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.contact-form label {
  margin-bottom: 6px;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.checkbox-group input,
.checkbox-group label {
  margin: 0;
  padding: 0;
}

.checkbox-group {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Fuerza alineación a la izquierda */
  margin-bottom: 16px;         /* Espacio abajo */
}

.checkbox-group input {
  margin: 0;             /* Elimina márgenes inesperados */
  margin-right: 8px;
}

.checkbox-group label {
  display: inline-flex;
  align-items: center; 
}

.btn-group {
  text-align: auto;
}

.btn-primary {
  padding: 10px 24px;
  background-color: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  display: inline-block;
}

.btn-primary:hover {
  background-color: var(--color-secundario);
}

@media (max-width: 768px) {
  .contactenos-card {
    flex-direction: column;
  }

  .contact-form .form-row {
    flex-direction: column;
  }

  .btn-group {
    text-align: center;
  }
}

/** UBICACION */
.ubicacion-card {
  background-color: var(--color-gris-claro);
  padding: 60px 20px;
  text-align: center;
}

.sec-subtitle {
  font-size: 18px;
  margin-bottom: 8px;
}

.sec-title {
  font-size: 40px;
  margin-bottom: 12px;
}

.sec-descripcion {
  font-size: 20px;
  margin-bottom: 30px;
}

.map-container {
  max-width: 800px;
  margin: 0 auto 30px;
  border: 2px solid var(--color-gris-claro);
  border-radius: 8px;
  overflow: hidden;
}

.ubicacion-nombre {
  font-size: 28px;
  margin-bottom: 8px;
}

.ubicacion-direccion {
  font-size: 20px;
  color: #555;
}

.map-container {
  max-width: 800px;
  margin: 0 auto 30px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 400px; /* o el alto que prefieras */
}

/** BLOG */
.blog-card {  
  padding: 60px 20px;
  text-align: center;
  background-color: #fff;
}

.blog-card h1 {
    font-size: 55px;
    color: var(--color-oscuro);
    letter-spacing: 2px;
    font-weight: 100;
    margin-top: 50px;
    padding-bottom: 10px;
}

.blog-subtitle {
  font-size: 18px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 50px;  /* Aumenta o disminuye este valor según tu gusto */
}

.blog-title {
  font-size: 32px;
  margin-bottom: 40px;
}

.blog-gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px; /* antes tenías gap: 5px, súbelo o bájalo a tu gusto */
}

.blog-item {
  flex: 1 1 300px;   /* mínimo 300px, se expanden igual */
  max-width: 33.333%; /* máximo un tercio del contenedor */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.blog-item img,
.blog-item-title {
  margin: 0;
  padding: 0;
}

.blog-item img {
  width: 80%;
}

.blog-item-title {
  width: 60%;
  color: var(--color-oscuro);
  text-align: center;
  font-size: 20px;
  margin-top: 16px;
  overflow-wrap: break-word; /* Permite que el texto se divida */
  word-break: break-word;    /* Rompe palabras largas si es necesario */
}

/** CARRETE */
.carrete-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-sizing: border-box;
}
/* .carrete-card {
  display: flex;
  align-items: center;       
  justify-content: space-between;
  gap: 40px;
  max-width: 1000px;
  margin: 60px auto;
  padding: 20px;
  box-sizing: border-box;
} */

.carrete-left {
  flex: 1;
}

.carrete-right {
  flex: 1;
  text-align: center;
}

.carrete-right img {
  max-width: 100%;
  height: auto;
}

.carrete-left h2 {
  font-size: 32px;
  color: var(--color-oscuro);
  margin-bottom: 16px;
}

.carrete-left p {
  font-size: 18px;
  margin-bottom: 24px;
}

.carrete-list {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
}

.carrete-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 16px;
}

.carrete-list i {
  color: var(--color-primario);
  margin-right: 10px;
  font-size: 20px;
}

.carrete-left .btn {
  padding: 12px 24px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .carrete-card {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .carrete-right {
    order: -1; /* Imagen primero en móviles */
  }
}

/** VENTAJAS */
.ventajas-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 60px auto;
  box-sizing: border-box;
}

.ventajas-left {
  flex: 0 0 50%;   /* Máximo la mitad del contenedor */
}

.ventajas-left img {
  width: 100%;      /* Llenará su columna de 50% */
  height: auto;
  display: block;
}

.servicios-grafico img {
  width: 600px;      
}

.ventajas-right {
  flex: 1;
}

.subtitulo {
  font-size: 18px;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: #555;
}

.titulo {
  font-size: 32px;
  margin-bottom: 16px;
}

.intro {
  font-size: 18px;
  margin-bottom: 24px;
}

/* Contenedor de columnas */
.ventajas-columns {
  display: flex;
  gap: 20px;
  align-items: stretch;           /* Igual altura en columnas :contentReference[oaicite:1]{index=1} */
  margin-bottom: 24px;
}

/* Cada columna */
.ventaja-col {
  flex: 1;
  background: transparent;
  padding: 0px; /* opcional: quítalo si no quieres espacio */
  display: flex;
  flex-direction: column;
}

.ventaja-col p {
  flex: 1;
  margin-top: 15px;
}

.ventaja-col img {
  width: 90px !important;      /* O el tamaño que prefieras, por ejemplo 40px, 60px, etc. */
  height: auto !important;     /* Mantiene proporción */
  display: block;
  margin: 0 auto 10px auto; /* Centrado horizontal con margen inferior */
}

.ventaja-col h4 {
  margin-top: 15px;
}

/* Botón alineado a la izquierda */
.ventajas-right .btn {
  padding: 12px 24px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .ventajas-card {
    flex-direction: column;
  }
  .ventajas-columns {
    flex-direction: column;
  }
}

.ventajas-right h2 {
  font-size: 32px;
  color: var(--color-oscuro);
  margin-bottom: 16px;
}

.ventajas-right h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0px;
  color: var(--color-amarillo);
}

.ventajas-columns .ventaja-col h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0px;
  color: var(--color-oscuro);
}

/** SERVICIOS */
.servicios-parrafo {
  text-align: center;
  font-weight: 400;
  line-height: 150%;
  margin-top: 16px;
}

/** NUESTRA EMPRESA */
#diseno_moldes .diseno-right {
  flex: 0 0 50%;   /* Ocupa el otro 50% fijo */
}

#diseno_moldes .diseno-right .intro {
  font-size: 17px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  color: var(--color-texto-azul);
}

.ventajas-right img {
  width: 90%;
  align-items: center;
}

#imagen .ventajas-right {
  display: flex;
  justify-content: center;
}

/* Sección Equipo */
.equipo-titulos {
  text-align: center;
  margin-bottom: 50px;
}

.equipo-titulos h3.subtitulo {
  font-size: 18px;
  color: var(--color-amarillo);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.equipo-titulos h1.titulo {
  font-size: 40px;
  color: var(--color-oscuro);
  margin-bottom: 10px;
}

.equipo-titulos p {
  color: var(--color-oscuro);
  font-weight: 400;
  margin-bottom: 10px;
}

/* Fila de miembros */
.equipo-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
}

/* Para la fila con solo un miembro */
.equipo-fila-uno {
  justify-content: center;
}

/* Cada miembro */
.equipo-miembro {
  flex: 0 1 300px;
  text-align: center;
}

/* Imagen pequeña */
.equipo-miembro img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 25px auto; /* Espacio grande debajo de imagen */
}

/* Nombre */
.equipo-miembro .nombre {
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1px;
  color: var(--color-oscuro);
  margin-bottom: 12px; /* Espacio entre nombre y cargo */
}

/* Cargo */
.equipo-miembro .cargo {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-amarillo);
  letter-spacing: 1px;
  margin-bottom: 25px; /* Espacio grande debajo del cargo */
}

/* Párrafo */
.equipo-miembro p {
  font-size: 15px;
  color: var(--color-oscuro);
  line-height: 150%;
}

/* Responsive */
@media (max-width: 768px) {
  .equipo-fila {
    flex-direction: column;
    align-items: center;
  }
}

.equipo-seccion h1{
  color: var(--color-oscuro);
}

.equipo-seccion h3{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--color-amarillo);
}

.subtitle-equipo {
    font-size: 16px !important;
    color: var(--color-amarillo) !important;
}

/* Nuevo bloque izquierdo con subtítulo y título */
.compromiso-left {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Subtítulo amarillo */
.subtitulo-amarillo {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-amarillo);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Nuevo bloque derecho */
.compromiso-right {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Párrafo sobre counters */
.compromiso-parrafo {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.4;
  max-width: 500px;
}

/* Botón debajo de counters */
.compromiso-boton {
  margin-top: 30px;
}

/* Responsive: se apilan todo igual que antes */
@media (max-width: 800px) {
  .compromiso-left,
  .compromiso-right {
    flex: 0 0 100%;
    align-items: center;
    text-align: center;
  }
  .compromiso-parrafo {
    max-width: none;
  }
}

.label-satisfecho {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  text-transform: none !important;
  text-align: left;
}

/* El bloque ocupa todo el ancho y centra su contenido */
/* Nuevo bloque sin heredar nada */
.counters-dos {
  display: flex;
  justify-content: center;  /* Centra los hijos */
  gap: 40px;
  flex-wrap: wrap;
  width: 100%;              /* Ocupa todo el ancho */
  box-sizing: border-box;
  margin: 0 auto;
}

/* Cada contador ocupa la mitad menos el gap */
/* El contenedor ocupa todo el ancho y reparte dos columnas */
.counters-dos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* O space-between si prefieres */
  width: 100%;
  gap: 0; /* si quieres que se toquen, o 20px si prefieres espacio */
  box-sizing: border-box;
}

/* Cada contador ocupa el 50% del contenedor */
.counter-dos {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 20px; /* para que no se vean pegados a los bordes */
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
}

/* Opcional: tamaño de número y etiqueta */
.counter-dos .number {
  font-size: 2em;
  font-weight: bold;
  color: var(--color-oscuro);
}

.counter-dos .porcentage {
  font-size: 2em;
  font-weight: bold;
  color: var(--color-oscuro);
}

.counter-dos .label {
  margin-top: 8px;
  font-size: 1em;
}

.counter-dos .percent-symbol {
  display: inline-block;
  font-size: 2em;
  font-weight: bold;
}

.counter-dos .porcentage::after {
  content: " %";
}

.label-compromiso {
  margin-top: 8px;
  font-size: 36px;
  font-weight: 700;
  line-height: 120%;
  color: var(--color-oscuro);
}


.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}




/* Responsive: en pantallas pequeñas se apilan */
@media (max-width: 768px) {
  .counter-dos {
    flex: 0 0 100%;
  }
}