:root {
  --color-primario: #1E3A5F;     /* azul acero corporativo */
  --color-secundario: #B7410E;  /* amarillo maquinaria */
  --fondo: #F4F4F4;      /* gris claro técnico */
}

body {
  font-family: 'Inter', sans-serif;
  color: #333;
  margin: 0;
  line-height: 1.6;
  background: #fff;
}

/* NAV */
.navbar {
  position: sticky;
  top: 0;
  background: var(--color-primario);
  padding: 1rem 5%;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 4px 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.logo-container:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}
.logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.links {
  display: flex;
  gap: 1.5rem;
}
.links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.links a:hover {
  text-decoration: underline;
}
.cta {
  background: var(--color-secundario);
  padding: .5rem 1rem;
  border-radius: 6px;
}
.call-number {
  display: none;
  position: absolute;
  top: 80px;
  right: 20px;
  background: #1E3A5F;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 1000;
}
.call-number.visible {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-10px);}
  to {opacity: 1; transform: translateY(0);}
}



/* Hamburguesa (solo móvil) */
.hamburger {
  display: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    background: var(--color-primario);
    width: 200px;
    padding: 1rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .links.show {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

/* HERO */
.hero {
  background: linear-gradient(rgba(31,41,55,0.7), rgba(31,41,55,0.7)), url('images/index.jpeg') center/cover;
  color: white;
  text-align: left;
  padding: 10rem 5%;
  display: flex;
  align-items: center;
}
.hero-content { max-width: 700px; }
.hero h1 {
  font-family: 'Merriweather', serif;
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero p { font-size: 1.2rem; margin-bottom: 2rem; }
.boton-primario {
  background: var(--color-secundario);
  border: none;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.boton-primario:hover { background: #d97706; }

/* INFO SECTIONS */
.info {
  padding: 5rem 5%;
}
.info.bg-light { background: #f9f9f9; }
.info-content {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
.info-content img {
  width: 350px;
  border-radius: 10px;
}
.info .texto h2 {
  font-family: 'Merriweather', serif;
  color: var(--color-primario);
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

/* SERVICIOS */
/* SERVICIOS - imágenes cuadradas y centradas */
.servicios .card .img-wrapper {
  width: 100%;          /* ocupa todo el ancho de la card */
  aspect-ratio: 1 / 1;  /* fuerza a ser cuadrada */
  overflow: hidden;     /* recorta cualquier exceso */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.servicios .card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* cubre el área manteniendo el recorte proporcional */
  display: block;
  border-radius: 8px;
}

.servicios {
  padding: 5rem 5%;
  background: #fff;
  text-align: center;
}
.servicios h2 {
  font-family: 'Merriweather', serif;
  color: var(--color-primario);
  font-size: 2.5rem;
  margin-bottom: 3rem;
}
.cards {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.card {
  background: var(--fondo);
  border-radius: 12px;
  padding: 1.5rem;
  width: 280px;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.card h3 {
  color: var(--color-primario);
  margin-bottom: .5rem;
}

/* SPONSORS */
.sponsors {
  text-align: center;
  padding: 5rem 5%;
}
.sponsors .logos {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 2rem;
}
.sponsors .logos img {
  width: 120px;
  height: auto;
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.sponsors .logos img:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* SPONSORS */
.sponsors {
  text-align: center;
  padding: 5rem 5%;
  background-color: #fff; /* Fondo limpio */
}

.sponsors h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1e3a5f;
}

.sponsors .logos {
  display: flex;
  flex-wrap: wrap; /* Permite que las imágenes salten a la siguiente línea si hay muchas */
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-top: 2.5rem;
}

.sponsors .img-wrapper {
  flex: 0 1 120px; /* Todas las imágenes tendrán aproximadamente el mismo ancho */
  display: flex;
  justify-content: center;
  align-items: center;
}

.sponsors .img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain; /* Ajusta las proporciones sin deformar */
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
  max-height: 90px; /* Controla la altura máxima para uniformidad */
}

.sponsors .img-wrapper img:hover {
  transform: scale(1.1);
  opacity: 1;
}

.info-content-status {
  display: flex;
  align-items: center;       /* centra verticalmente */
  justify-content: center;   /* centra horizontalmente */
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .info-content {
    flex-direction: column;  /* apila verticalmente */
    gap: 2rem;               /* espacio entre texto e imagen */
    text-align: center;      /* centra el texto en móvil */
  }

  .info-content .texto {
    order: 1;                /* fuerza el texto a ir primero */
  }

  .info-content .img-wrapper {
    order: 2;                /* fuerza la imagen a ir después del texto */
    width: 100%;             /* ocupa todo el ancho disponible */
    max-width: 350px;        /* opcional: limita tamaño máximo */
    margin-left: 0;          /* elimina margen lateral */
  }

  .info-content .img-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
}
      
/* =======================
   EMPRESA HOMOLOGADA
======================= */
.empresa-homologada {
  background: linear-gradient(rgba(30, 58, 95, 0.8), rgba(30, 58, 95, 0.8)),
              url("images/4ccf9de05c090cc8be6c0b363d2ab0f1c33a18a9.jpg") center/cover no-repeat;
  color: #fff;
  padding: 6rem 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empresa-homologada-contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  max-width: 1200px;
  width: 100%;
}

.empresa-homologada .texto {
  flex: 1;
  max-width: 600px;
}

.empresa-homologada .texto h2 {
  font-family: 'Merriweather', serif;
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

.empresa-homologada .texto p {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  color: #fff;
}

.boton-conocenos {
  display: inline-block;
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 0.9rem 2.4rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.boton-conocenos:hover {
  background: #fff;
  color: var(--color-primario);
}

.imagen-certificado {
  flex: 0 0 400px;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

/* 📱 Responsive */
@media (max-width: 900px) {
  .empresa-homologada {
    padding: 4rem 8%;
  }

  .empresa-homologada-contenido {
    flex-direction: column;
    text-align: center;
  }

  .imagen-certificado {
    max-width: 320px;
    margin-top: 2rem;
  }
}

/* TRABAJA CON NOSOTROS */
.trabaja {
  background: var(--fondo);
  padding: 5rem 5%;
  text-align: center;
}
.trabaja h2 {
  font-family: 'Merriweather', serif;
  font-size: 2.2rem;
  color: var(--color-primario);
  margin-bottom: 1rem;
}
.trabaja p {
  max-width: 700px;
  margin: 0 auto 2rem;
}
.trabaja .boton-primario {
  display: inline-block;
  text-decoration: none;
}

/* NOTICIAS */
.noticias {
  padding: 5rem 5%;
  background: #fff;
  text-align: center;
}
.noticias h2 {
  font-family: 'Merriweather', serif;
  font-size: 2.2rem;
  color: var(--color-primario);
  margin-bottom: 2rem;
}
.noticias .cards {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.noticias .card {
  background: var(--fondo);
  border-radius: 12px;
  padding: 2rem;
  width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.noticias .card h3 {
  color: var(--color-secundario);
  margin-bottom: 0.8rem;
}


/* FOOTER */
.footer {
  background: var(--color-primario);
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 4rem 5%;
  flex-wrap: wrap;
}
.footer-logo {
  width: 120px;
  margin-bottom: 1rem;
}
.footer h4 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
.footer a {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-bottom: .5rem;
}
.footer a:hover { text-decoration: underline; }


/*chatbot*/
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.img-wrapper { border-radius: 15px; overflow: hidden; display: inline-block; }
.img-wrapper img { width: 100%; display: block; }


/* ===== CHATBOT POPUP (estilos aislados) ===== */
:root { --itx-brand:#1E3A5F; --itx-accent:#B7410E; }
.itx-launcher{position:fixed;right:22px;bottom:22px;z-index:2147483647;background:linear-gradient(135deg,var(--itx-brand),#0b274a);color:#fff;border:none;border-radius:999px;padding:12px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px rgba(1,14,40,.4);cursor:pointer}
.itx-launcher svg{width:20px;height:20px}


.itx-modal{position:fixed;inset:0;display:none;place-items:center;z-index:2147483647}
.itx-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.itx-dialog{position:relative;width:min(92vw,380px);height:min(72vh,560px);background:#0f1a2d;border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 18px 48px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;color:#eaf2ff;font-family:Inter,system-ui}
.itx-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(180deg,rgba(30,58,95,.95),rgba(30,58,95,.7));border-bottom:1px solid rgba(255,255,255,.08)}
.itx-logo{width:28px;height:28px;border-radius:8px;background:var(--itx-accent);display:grid;place-items:center;font-weight:700}
.itx-sub{font-size:12px;color:#b9c6d9}
.itx-close{margin-left:auto;background:transparent;border:none;color:#cfe3ff;cursor:pointer;font-size:20px;line-height:1}


.itx-body{flex:1;padding:12px 12px 0;overflow:auto}
.itx-row{display:flex;gap:10px;margin:10px 0}
.itx-row.agent{justify-content:flex-start}
.itx-row.user{justify-content:flex-end}
.itx-bubble{max-width:78%;padding:10px 12px;border-radius:14px;line-height:1.35;font-size:14px}
.itx-row.agent .itx-bubble{background:#102649;border:1px solid rgba(255,255,255,.06)}
.itx-row.user .itx-bubble{background:#182237;border:1px solid rgba(255,255,255,.08)}


.itx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.itx-chip{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);cursor:pointer;color:#d9e6ff;background:transparent}
.itx-chip:hover{background:rgba(255,255,255,.06)}


.itx-foot{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08);background:rgba(10,18,32,.9)}
.itx-input{flex:1;background:#0e1728;color:#e6eef8;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 12px}
.itx-send{background:var(--itx-accent);color:#fff;border:none;border-radius:12px;padding:10px 12px;cursor:pointer}
.itx-link{color:#c7e2ff;text-decoration:none;border-bottom:1px dashed #7fb2ff}
.itx-fine{font-size:12px;color:#b9c6d9}