:root {
  --color-primary: #b58d3e;
  --color-light: #fff;
  --color-dark: #000;
  --color-gray: #888;
  --alto-menu: 75px;
  --gap: 40px;
  --bg-dark: #dbc6a2;
  --color-secondary: #a98b46;
  --color-turquesa: #127262;
  --bg-mapa: rgb(221, 221, 221);
}

* {  box-sizing: border-box; }

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans', sans-serif;
}

.seccion { scroll-margin-top: var(--alto-menu); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--bg-dark); }
.bg-mapa { background-color: var(--bg-mapa); }
.bg-primary { background-color: var(--color-primary); }
.bg-turquesa { background-color: var(--color-turquesa); }
.color-primary { color: var(--color-primary); }
.color-dark { color: var(--color-dark); }
.color-light { color: var(--color-light); }

.contenedor {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.contenedor-completo {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  --gap-local: var(--gap);  
}

.fila-sin-gap {
  gap: 0;
  --gap-local: 0px;
  
}

.columna-100 { flex: 0 0 100%; }
.columna-75 { flex: 0 0 calc(75% - (var(--gap-local) * 0.25)); }
.columna-66 { flex: 0 0 calc(66.666% - (var(--gap-local) * 0.333)); }
.columna-60 { flex: 0 0 calc(60% - (var(--gap-local) * 0.4)); }
.columna-50 { flex: 0 0 calc(50% - (var(--gap-local) * 0.5)); }
.columna-40 { flex: 0 0 calc(40% - (var(--gap-local) * 0.6)); }
.columna-33 { flex: 0 0 calc(33.333% - (var(--gap-local) * 0.666)); }
.columna-30 { flex: 0 0 calc(30% - (var(--gap-local) * 0.7)); }
.columna-25 { flex: 0 0 calc(25% - (var(--gap-local) * 0.75)); }
.columna-20 { flex: 0 0 calc(20% - (var(--gap-local) * 0.8)); }
.columna { flex: 1; }

.fila-superior {
  flex: 0.3;
  text-align: center;
}

.fila-inferior {
  flex: 0.7;
  justify-content: center;
  gap: 40px;
}

.flex { display: flex;}
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-centro { justify-content: center; align-items: center; }
.flex-centrar-h { justify-content: center; }
.flex-izquierda { justify-content: flex-start; }
.flex-derecha { justify-content: flex-end; }
.flex-centrar-v { align-items: center; }
.flex-0 { flex: 0;}
.flex-1 { flex: 1;}

.m-0 { margin: 0; }
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-40 { margin: 40px; }
.mb-0 { margin-bottom: 0;}
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mb-80 {margin-bottom: 80px;}
.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; } 
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-10-100 { margin-left: 10%; margin-right: 10%; }
.ml-10-100 { margin-left: 10%; }
.mr-10-100 { margin-right: 10%; }

.px-10-100 { padding-left: 10%; padding-right: 10%; }
.px-5-100 { padding-left: 5%; padding-right: 5%; }
.pl-10-100 { padding-left: 10%; }
.pr-10-100 { padding-right: 10%; }
.pl-5-100 { padding-left: 5%; }
.pr-5-100 { padding-right: 5%;}

.mv-20 { margin-top: 20px; margin-bottom: 20px; }
.mv-30 { margin-top: 30px; margin-bottom: 30px; }
.mv-40 { margin-top: 40px; margin-bottom: 40px; }
.mv-50 { margin-top: 50px; margin-bottom: 50px; }
.mv-60 { margin-top: 60px; margin-bottom: 60px; }

.p-0 { padding: 0; }
.p-20 { padding: 20px; }
.p-40 { padding: 40px; }
.pb-0 { padding-bottom: 0px; }
.pb-20 { padding-bottom: 20px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pl-60 { padding-left: 60px; }
.pr-60 { padding-right: 60px; }
.pt-10 {padding-top: 10px;}
.pt-20 {padding-top: 20px;}

.h-100 { height: 100%; }
.w-100 { width: 100%; }
.alto-pantalla { height: 100vh; }
.alto-ventana { height: calc(100dvh - 400px); }

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }

.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-2-1 { aspect-ratio: 2 / 1; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
.aspect-16-5 { aspect-ratio: 16 / 5; }

.ocultar-movil { display: block; }
.mostrar-movil { display: none; }

.alinear-centro { display: flex; align-items: center; }
.alinear-izquierda { display: flex; align-items: flex-start; }
.alinear-derecha { display: flex; align-items: flex-end; }
.alinear-alrededor { display: flex; align-items: space-around; }
.justificar-centro { display: flex; justify-content: center; }
.justificar-espacio { display: flex; justify-content: space-between; }
.justificar-inicio { display: flex; justify-content: flex-start; }
.justificar-fin { display: flex; justify-content: flex-end; }
.justificar-alrededor { display: flex; justify-content: space-around; }

h1, .h1 { font-size: 2rem; font-weight: bold; margin-block-end: 0px; }
h2 { font-size: 1.8rem; font-weight: bold; margin-block-end: 0px; }
.h2 { font-size: 1.8rem; font-weight: bold; margin-block-end: 0px; margin-block-start: 0px;}
h3, .h3 { font-size: 1.5rem; font-weight: bold; margin-block-end: 0px; margin-block-start: 0px; }
h4, .h4 { font-size: 1rem; font-weight: bold; margin-block-start: 0px; margin-block-end: 0px; }
h5, .h5 { font-size: .8rem; font-weight: bold; margin-block-start: 0px; margin-block-end: 0px; }

p {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  margin-block-start: 0px;
}

.borde-1 { border: 1px solid var(--color-primary); }

.lista {
  list-style: none;
  padding-left: 0;
}

.lista-item {
  line-height: 1.7rem;
  gap: 10px;
  padding-left: 0;
  display: flex;
  align-items: center;
}

.columna-izquierda {
  padding-right: 5%;
  padding-left: 10%;
  padding-bottom: 70px;
}

.seccion-servicios {
  position: relative;
  background-color: var(--bg-dark);  
  display: flex;
  flex-direction: column;
}

.seccion-servicios .contenedor {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  width: 100%;
}

.fila-servicios {  align-items: center;  margin: 20px 10%; }
.fila-superior { flex: 0.3; text-align: center; }
.fila-inferior { flex: 0.7; justify-content: center; gap: 40px;}

.titulo-servicios {
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 0px;
}

.card-servicio {
  position: relative;
  overflow: visible;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  margin: 0 auto 40px;
}

.card-servicio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.card-servicio h2 {
  position: absolute;
  bottom: 85px;
  left: 0;
  right: 0;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  text-align: center;
}



/* RESPONSIVE: Mantenemos el mismo cálculo dinámico */
@media (max-width: 992px) {
  .columna-md-100 {
    flex: 0 0 100%;
  }

  .columna-md-50 {
    flex: 0 0 calc(50% - (var(--gap-local) * 0.5));
  }

  .columna-md-33 {
    flex: 0 0 calc(33.333% - (var(--gap-local) * 0.666));
  }
}

@media (max-width: 768px) {
  .columna-sm-100 { flex: 0 0 100%; }
  .columna-sm-50 { flex: 0 0 calc(50% - (var(--gap-local) * 0.5)); }
  .contenedor { padding: 0 20px; }
  :root { --gap: 20px; }
  p { font-size: 0.9rem; margin-block-start: 1em; }

  .mx-sm-0 {margin-left: 0; margin-right: 0;}

  .ocultar-movil { display: none !important; }
  .mostrar-movil { display: block; }
  .aspect-m-16-9 { aspect-ratio: 16 / 9; }
  .aspect-m-4-3 { aspect-ratio: 4 / 3; }
  .aspect-m-1-1 { aspect-ratio: 1 / 1; }
  .aspect-m-2-1 { aspect-ratio: 2 / 1; }
  .aspect-m-3-4 { aspect-ratio: 3 / 4; }
  .aspect-m-16-5 { aspect-ratio: 16 / 5; }

  .justificar-centro, .justificar-centro-sm {
    text-align: center;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .seccion-servicios {
    height: auto;
  }

  .columna-izquierda {
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 20px;
}
}