@font-face {
  font-family: 'Montserrat';
  src: url('./Fonts/Montserrat/static/Montserrat-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./Fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./Fonts/Montserrat/static/Montserrat-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./Fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./Fonts/Montserrat/static/Montserrat-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}



body {
  margin: 0;
   font-family: 'Montserrat', serif;
  color: #2b2b2b;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: relative; /* Si lo necesitas fijo más adelante */
  margin-bottom: 6rem;
}

.isologo {
  width: 25px;
  height: auto;
}

header {
  background: #fff;
  padding: 2rem 0 2rem 0;
  text-align: center;
}

.header {
  background-image: url('assets/header-bg.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* por si luego quieres overlay */
  min-height: 40em;
}


.header-main {
	font-weight: normal;
	padding: 0 17rem;
}

.header-paragraph {
	margin: 0 0 0 0;
}

#header-strong-1 {
	color: #09355d;
}

#header-strong-2 {
	color: #04bf9d;
}

.div-bar {
	width: 100vw;
	height: 48px;
	background-color: #f5f5f5;
}

.logo {
  width: 14em;
  margin-bottom: 1rem;
}


.menu-button {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  /* Elimina el position absolute */
}

.intro h1 {
  font-size: 1.5rem;
  color: #333;
}

.intro p {
  color: #555;
}

.btn {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.primary {
  background-color: #1e2e59;
  color: #fff;
}

.secondary {
  background-color: transparent;
  border: 2px solid #1e2e59;
  color: #1e2e59;
}

.valores, .servicios, .contacto {
  padding: 3rem 10rem;
  text-align: center;
}

.valores h2, .servicios h2, .contacto h2 {
  text-align: left;
  font-size: 2rem;
}

.valores span, .servicios span, .contacto span {
  color: #00c19f;
}

.valores-container {
	display: flex;
	justify-content: space-between;
}

.valores-container img {
	width: 256px;
	height: 256px;
	align-self: center;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
  width: 50%;
}

.grid li {
  max-width: 75%;
  text-align: left;
  position: relative;
  padding-left: 4em; /* espacio para el ícono */
}

#valores-1::before,
#valores-2::before,
#valores-3::before {
  content: '';
  position: absolute;
  top: 0.5rem; /* ajusta según el contenido */
  left: 0;
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
}

#valores-1::before {
  background-image: url('assets/icono-excelencia-operativa.png');
}

#valores-2::before {
  background-image: url('assets/icono-innovacion.png');
}

#valores-3::before {
  background-image: url('assets/icono-empatia.png');
}

.servicios-header {
	text-align: left;
	width: 75%;
}

.servicios-header p {
	padding-right: 10rem;
}

.servicios-content {
	display: flex;
	justify-content: space-between;
}

.servicios-content img {
	width: 256px;
	height: 256px;
}

.lista-servicios {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Fuerza 2 columnas */
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.lista-servicios li {
  position: relative;
  padding-left: 3em; /* deja espacio para el ícono */
  line-height: 1.5;
  text-align: left;
}

#servicios-1::before,
#servicios-2::before,
#servicios-3::before,
#servicios-4::before,
#servicios-5::before,
#servicios-6::before,
#servicios-7::before,
#servicios-8::before {
  content: '';
  position: absolute;
  top: -0.2rem;
  left: 0;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
}

#servicios-1::before { background-image: url('assets/icono-asistencia vial.png'); }
#servicios-2::before { background-image: url('assets/icono-asistencia-hogar.png'); }
#servicios-3::before { background-image: url('assets/icono-movilidad.png'); }
#servicios-4::before { background-image: url('assets/icono-concierge.png'); }
#servicios-5::before { background-image: url('assets/icono-asistencia de viajes.png'); }
#servicios-6::before { background-image: url('assets/icono-garantia-extendida.png'); }
#servicios-7::before { background-image: url('assets/icono-adulto mayor.png'); }
#servicios-8::before { background-image: url('assets/icono-servicios.png'); }

.contacto {
	display: flex;
	justify-content: space-between;
	background-color: #F5F5F5
}

.contacto img {
	width: 256px;
	height: 256px;
}

.contact-col1 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.contact-col1 h2 {
	padding-right: 16rem;
}

.contacto form {
  margin-top: 1rem;
  display: flex;
	min-width: 50%;
}

.contacto input {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-right: none; /* elimina borde duplicado entre input y botón */
  border-radius: 4px 0 0 4px;
  outline: none;
  flex: 1;
}

.contacto button {
  padding: 0.6rem 1rem;
  background-color: #1e2e59;
  color: #fff;
  border: 1px solid #ccc;
  border-left: none; /* evita borde doble */
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.contacto button {
  padding: 0.6rem 1rem;
  background-color: #1e2e59;
  color: #fff;
  border: none;
  border-radius: 4px;
}

.footer {
  background-color: #1e2e59;
  color: white;
  text-align: left;
  padding: 2rem 4rem;
}

.logo-footer {
  width: 100px;
  margin-bottom: 1rem;
}

.info {
	display: flex;
	justify-content: space-between
}

.info img {
	width: 10em;
	height: 2em;
	align-self: center
}

.vertical-line {
  top: 0;
  bottom: 0;
  left: 50%; /* o donde quieras colocarla */
  width: 2px;
  background-color: #ccc;
}

.info-col2 {
	display: flex;
	flex-direction: column;
	min-width: 50%;
}

.info-col2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* dos columnas */
  gap: 1rem;
}

.info-col2 li {
  position: relative;
  padding-left: 4em; /* espacio para el icono */
  line-height: 1.4;
}

#contact-1::before,
#contact-2::before {
  content: '';
  position: absolute;
  top: -0.4rem;
  left: 0;
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
}

#contact-1::before {
  background-image: url('assets/icono-telefono.png');
}

#contact-2::before {
  background-image: url('assets/icono-mail.png');
}

.copyright {
	margin: 2rem 0 0 0;
}