/*
| Color           | Uso sugerido                | Código HEX | Nombre sugerido      |
| --------------- | --------------------------- | ---------- | -------------------- |
| Verde oliva     | Fondo o cabecera            | `#3E4E2C`  | `--color-primary`    |
| Mostaza apagado | Acentos y botones           | `#D4A017`  | `--color-accent`     |
| Marfil          | Fondo general, texto claro  | `#F5F5DC`  | `--color-background` |
| Marrón oscuro   | Texto principal             | `#3B2F2F`  | `--color-text`       |
| Rojo ladrillo   | Indicadores o botones       | `#8B2E2E`  | `--color-secondary`  |
| Gris cálido     | Fondos suaves o secundarios | `#B0AFAE`  | `--color-neutral`    |
*/
:root {
  --color-primary: #3E4E2C;
  --color-accent: #D4A017;
  --color-background: #F5F5DC;
  --color-text: #3B2F2F;
  --color-secondary: #8B2E2E;
  --color-neutral: #B0AFAE;
}


/* -----------------------------------
Sections
----------------------------------- */
/*Fondo o cabecera*/
.section-color-primary { 
  background-color: var(--color-primary);
  color: white;
}
/*Acentos y botones*/
.section-color-accent { 
  background-color: var(--color-accent);
  color: white;
}
/*Fondo general, texto claro*/
.section-color-background { 
  background-color: var(--color-background) !important;
  color: black !important;
}
/*Texto principal*/
.section-color-text { 
  background-color: var(--color-text) !important;
  /* color: red !important; */
}

/*Indicadores o botones*/
.section-color-secondary { 
  background-color: var(--color-text);
  color: white;
}

/*Fondos suaves o secundarios*/
.section-color-neutral { 
  background-color: var(--color-neutral);
  color: white;
}

/* 
.section-neutral-light {
  background-color: var(--color-text-light);
  color: var(--color-background);
}
.section-alert {
  background-color: #FF3B30;
  color: white;
}
.section-alert0 {
  background-color: var(--color-light);
  color: white;
} */


body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: 'Georgia', serif;
}

header {
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: 20px;
}

button {
  background-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 4px;
}

.alert {
  background-color: var(--color-secondary);
  color: var(--color-background);
  padding: 10px;
  border-radius: 4px;
}

/* --------------------
Fonts - Fuentes
-------------------- */
.neonderthaw-regular {
  font-family: "Neonderthaw", cursive;
  font-weight: 400;
  font-style: normal;
}

.chewy-regular {
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
}
.pompiere-regular {
  font-family: "Pompiere", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.ubuntu-mono-regular {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-mono-bold {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-mono-regular-italic {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-mono-bold-italic {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-style: italic;
}







a, li {
  list-style: none;
}

.btn-accent {
  background-color: #FF9800;
  color: white;
}


nav {
  background-color: #4CAF50;
  color: white;
}
/* footer {
  background-color: #4CAF50;
  color: white;
} */

.btn-accent {
  background-color: #FF9800;
  color: white;
}

/* .card-title {
  color: #263238;
} */

.card-body {
  background-color: var(--color-background);
  /* color: white; */
}

.hero {
  background: url('galeria/foto4.jpg') center/cover no-repeat;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}

button {
  background-color: var(--color-accent);
  color: var(--color-background);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

.alert {
  color: var(--color-alert);
}

.miSlider img{
  width: 100%;
  max-height: 100vh;
  height: inherit;
  object-fit: cover;
  vertical-align: top;
  transition: 2s;
}

.direcciones{
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
  
.direcciones a{
  color: #fff;
  display: inline-block;
  padding: 20px;
  text-decoration: none;
}
  
.direcciones a:hover{
  background: rgba(0, 0, 0, .5);
  transition: .5s;
}
  
.barras{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom:15px;
}
  
.barra{
  cursor: pointer;
  height:2px;
  width: 25px;
  margin: 0 2px;
  background: #dcdde1;
  display: inline-block;
  margin-left: 3px;
}

.active{
  background-color: #e74c3c;
}

.fade{
  animation-name: fade;
  animation-duration: 1.5s;    
}

@keyframes fade {
  from {opacity: .4;}
  to{opacity:1;}
}

.img-fluid {
  max-width: 296%;
  height: auto;
}
  
  /*---------------------------------------------*/
  /*
  .div-eventos {
    background: url('galeria/foto2.jpg') center/cover no-repeat;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
  }
  
  */
  
  /*--------------------------------------*/
  
  
  /*---------------------------------------------*/
  /*
  body {
    background-color: #F5F5F5;
}

header, nav, footer {
  background-color: #4CAF50;
  color: white;
}

.section-light {
  background-color: #FFFFFF;
}

.section-accent {
  background-color: #A5D6A7;
}

.btn-accent {
  background-color: #FF9800;
  color: white;
}

.card-title {
  color: #263238;
}
*/
/*---------------------------------------------*/