:root {
  /* 🎨 Colores base */
  --color-fondo: #ffffff;
  --color-fondo-secundario: #f4f7f9;

  /* 🟦 Primario (salud / confianza) */
  --color-primario: #2a7f9e;
  --color-primario-hover: #226b84;

  /* 🟩 Secundario (toque salud) */
  --color-secundario: #4caf50;

  /* 📝 Texto */
  --color-texto: #1f2d3d;
  --color-texto-secundario: #6c7a89;

  /* ⚪ Neutros */
  --color-blanco: #ffffff;
  --color-negro: #1f1f1f;

  /* 🎯 UI */
  --color-borde: #dfe6ec;
  --color-hover-nav: #e8f3f8;

  /* ✍️ Tipografía */
  --fuente-principal: "Roboto", sans-serif;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-fondo-secundario);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--fuente-principal);
}

h1 {
  text-align: center;
  font-size: 3.5rem;
}

h2 {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: var(--color-negro);
  text-align: center;
  font-weight: 600;
}

p {
  font-size: 2rem;
}

img {
  border-radius: 1rem;
}

.navbar {
  width: 100%;
  background-color: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde);
}

.navbar-contenedor {
  max-width: 120rem;
  /*     background-color: rebeccapurple; */
  display: flex;
  padding: 0 4rem;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  height: 8rem;
  align-items: center;
}

.navbar-logo {
  width: 20rem;
  height: 6rem;
}
.navbar-logo img {
  height: 6rem;
  width: auto;
}

.navbar-enlaces {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 3rem;
}

.navbar a {
  position: relative;
  font-size: 2rem;
  text-decoration: none;
  color: var(--color-negro);
  transition: color 0.2s ease;
}

/* Línea */
.navbar a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background-color: var(--color-primario);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* Hover */
.navbar a:hover::after {
  width: 100%;
}

/* Color al hover */
.navbar a:hover {
  color: var(--color-primario);
}

/* Activo */
.navbar a.activo {
  color: var(--color-primario);
}

.navbar a.activo::after {
  width: 100%;
}

main {
  max-width: 100%;
  padding: 2rem 0;
  flex: 1;
}

section {
  margin-bottom: 4rem;
}

.seccion-principal {
  max-width: 120rem;
  margin: 0 auto;
  padding: 4rem 2rem;
  /*  background-color: red; */
}

.hero-salud {
  background: #eaf6f6;
  padding: 5rem 2rem;
  text-align: center;
}

.hero-salud h1 {
  font-size: 4rem;
  color: #1f1f1f;
  margin-bottom: 2rem;
}

.hero-salud p {
  font-size: 1.8rem;
  color: var(--color-texto-secundario);
}

.presentacion-contenido {
  display: flex;
  gap: 4rem;
  align-items: center;
}

.presentacion-img,
.presentacion-texto {
  flex: 1;
}

.presentacion-img img {
  width: 100%;
  object-fit: cover;
  overflow: hidden;
}

.cards-servicios {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.cards-servicios .card {
  background: var(--color-blanco);
  padding: 2rem;
  border-radius: 1.2rem;
  width: 25rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Hover bonito */
.cards-servicios .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.cards-servicios .card {
  border-top: 4px solid #2bb3b1;
}

.porque {
  margin-top: 4rem;
}

.porque-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.porque-item {
  background: var(--color-blanco);
  padding: 2rem;
  border-radius: 1.5rem;
  width: 22rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.porque-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* Icono */
.porque-item p {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Título */
.porque-item h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--color-negro);
}

/* Texto */
.porque-item span {
  font-size: 1.4rem;
  color: var(--color-texto-secundario);
}

/* .titulo-seccion {
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
} */

footer {
  width: 100%;

  background-color: #1f5f75;
  color: #ffffff;

  padding: 2rem 0;
}

footer p {
  text-align: center;
  color: var(--color-blanco);
  font-size: 1.6rem;
  /*  font-weight: bold; */
}

.seccion-productos {
  display: flex;
  width: 100%;
  /*   background-color: yellow; */
  padding: 2rem;
  gap: 2rem;
}

.productos {
  display: flex;
  flex-wrap: wrap;
  /* background-color: blue; */
  gap: 2rem;
  /* padding: 2rem; */
  justify-content: center;
}

.productos-card {
  width: 30rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
  background-color: var(--color-blanco);
  border-radius: 1rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 1rem;
}

.productos-card {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

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

.productos-imagen {
  overflow: hidden;
  border-radius: 1rem;
}

.productos-imagen img {
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.productos-text {
  /*   background-color: red; */
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.productos-text p {
  font-size: 1.5rem;
}

.seccion-productos-imagen {
  width: 100%;
}
.seccion-productos-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contenedor-galeria {
  /* background-color: rebeccapurple; */
  width: 100%;
  gap: 2rem;
  padding: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.card-galeria {
  width: 30rem;
  aspect-ratio: 3 / 4;
  /* overflow: hidden; */
  border-radius: 1rem;
}

.card-galeria:hover img {
  transform: scale(1.05);
}

.card-galeria {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.card-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.seccion-servicio {
  background: var(--color-blanco);
  padding: 2rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
  text-align: left;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.seccion-servicio h3 {
  color: var(--color-primario);
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.seccion-servicio ul {
  list-style: none;
}

.seccion-servicio li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-borde);
  font-size: 1.6rem;
}

.seccion-nosotros {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 110rem;
  margin: 0 auto;
}

.seccion-nosotros-texto {
  flex: 2;
}

.seccion-nosotros-texto p:first-child {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.seccion-nosotros-texto p {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  text-align: justify;
}

.seccion-nosotros-imagen {
  flex: 1;
}

.seccion-nosotros-imagen img {
  width: 100%;
  height: 30rem;
  /* height: 100%;
  min-height: 30rem; */
  object-fit: cover;
  border-radius: 1rem;
}

.seccion-mision-vision-valores {
  width: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

.card-mision {
  flex: 1;
  background-color: var(--color-blanco);
  border-radius: 1rem;
  padding: 2rem;
  margin: 0 2rem;
}

.card-mision p:first-child,
.card-vision-valores p:first-child {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.6;
}

.card-mision p,
.card-vision-valores p {
  font-size: 1.6rem;
  text-align: justify;
  font-size: 1.6rem;
  /* margin-bottom: 1.5rem; */
  line-height: 1.6;
}

.card-etica {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

.card-vision-valores {
  flex: 1;
  background-color: var(--color-blanco);
  padding: 2rem;
  border-radius: 1rem;
}

.subtitulo {
  /* font-size: 1.6rem; */
  font-size: 2rem;
  color: var(--color-texto-secundario);
  margin-bottom: 2rem;
  text-align: center;
}

/* GRID DE CONTACTO */
.contacto-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 3rem;
}

/* TARJETAS */
.card-contacto {
  background: var(--color-blanco);
  padding: 2rem;
  border-radius: 1.2rem;
  width: 25rem;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

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

/* TITULOS */
.card-contacto h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

/* TEXTO */
.card-contacto p {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* TEXTO DESTACADO */
.card-contacto span {
  display: block;
  margin-top: 0.5rem;
  font-weight: bold;
  color: var(--color-primario);
  font-size: 1.2rem;
}

/* MAPA */
.mapa-contenedor {
  width: 100%;
  margin-top: 2rem;
  border-radius: 1rem;
  overflow: hidden;
}

@media (max-width: 768px) {
  .navbar-contenedor,
  .navbar-enlaces,
  .seccion-nosotros,
  .card-etica,
  .seccion-productos,
  .presentacion-contenido {
    flex-direction: column;
  }
  .navbar-contenedor {
    height: auto;
    justify-content: center;
  }
  .navbar-logo {
    text-align: center;
  }
  .navbar-enlaces {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}