@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src:
    local("Open Sans"),
    url("/public/fonts/Montserrat-Regular.woff2") format("woff2"),
    url("/public/fonts/Montserrat-Regular.woff") format("woff"),
    url("/public/fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Montserrat Bold';
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 700;
  src:
    local("Open Sans"),
    url("/public/fonts/Montserrat-Bold.woff2") format("woff2"),
    url("/public/fonts/Montserrat-Bold.woff") format("woff"),
    url("/public/fonts/Montserrat-Bold.ttf") format("truetype");
}

@font-face {
  font-family: 'Montserrat Light';
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 300;
  src:
    local("Open Sans"),
    url("/public/fonts/Montserrat-Light.woff2") format("woff2"),
    url("/public/fonts/Montserrat-Light.woff") format("woff"),
    url("/public/fonts/Montserrat-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'Montserrat Black';
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 900;
  src:
    local("Open Sans"),
    url("/public/fonts/Montserrat-Black.woff2") format("woff2"),
    url("/public/fonts/Montserrat-Black.woff") format("woff"),
    url("/public/fonts/Montserrat-Black.ttf") format("truetype");
}



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

:root {
  --default: #ababab;
  --verde: #106c37;
  --azul: #164686;
  --background: #cccccc;
  --warning: #f2a600;
  --success: #106c37;
  --error: #8a0000;
  --info: #164686;
  --gris-uno: #3b3b3b;
  --bg-uno: #eeeeee;
  --bg-dos: #f9f9f9;
}


*{
    margin: 0; 
    padding: 0; 
}

ul[role='list'], ol[role='list']{
    list-style: none; 
    
}
ul {
  margin:0;
    padding: 0;
    text-indent: 0;
    list-style-type: none;
}

html:focus-within{
    scroll-behavior: smooth; 
}

a:not([class]){
    text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto; 
    vertical-align: middle; 
    font-style: italic; 
    background-repeat: no-repeat; 
    background-size: cover;
}

input, button, textarea, select{
    font: inherit; 
}

@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body, html{
    height: 100%; 
    scroll-behavior: smooth; 
    line-height: 1.15; 
    -webkit-text-size-adjust: 100%; 
}

body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  min-height: 100vh;
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  background-color: white;
  overflow-x: hidden;
}

b,
strong {
  font-weight: bolder;
}

button,
input,
optgroup,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}

button,
select { /* 1 */
  text-transform: none;
}


button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}



fieldset {
    padding: 0.35em 0.75em 0.625em;
}
progress {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: baseline;
  width: 100%;
  height: 20px;
  border: 1px solid white;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Esto hace que ningun elemento dentro edl button sea clickkeable */
button img {
  pointer-events: none;
}
/* Esto es para que ningun highlight se vea cuando haces click */
button,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ---------- <ICONOS> */

img.titulo {
  width: 48px;
  height: auto;
  margin-right: 8px;
  filter: brightness(0) saturate(100%) invert(78%) sepia(0%) saturate(0%) hue-rotate(246deg) brightness(99%) contrast(90%);
}


/* ---------- <ALERT> */

.alert {
  padding: 32px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 32px;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

/* ---------- VIDEO BACKGROUND */

video#video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75vh;
  object-fit: cover;
  z-index: 0;
  filter: opacity(var(--value, 100%)); --value: 90%;

}

.video-controles {
  position: absolute;
  top: 60%;
  left: 3%;
  z-index:40;
}
.video-controles img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(72%) saturate(540%) hue-rotate(93deg) brightness(98%) contrast(90%);
}

#btn-next-video,
#btn-prev-video {
  width: 54px;
  height: 54px;
  background: white;
  border:2px solid var(--verde);
  border-radius: 16px;
  cursor: pointer;
}

/* ---------- HEADER */

.header {
  position: relative;
  z-index: 9;
  padding: 2%;
}
.menu {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index:50;
}



/* -- Botón menú -- */

#btn-menu {
  background: white;
  border:2px solid var(--verde);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
}

#btn-submenu {
  cursor: pointer;
}

#btn-submenu #flecha-submenu {
  width: 10px;
  height: auto;
  margin-left: 16px;
}

.menu-enlaces {
  background-color: white;
  position: absolute;
  z-index: 20;
  border:2px solid var(--gris-uno);
  border-radius: 16px;
}
.menu-enlaces a,
.menu-enlaces button {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 18px 0 18px 8px;
  border-bottom: 1px solid #cac4d0;
  font-size: 14px;
  color: var(--gris-uno);
  font-family: 'Montserrat Bold';
  text-decoration: none;
}
.menu-enlaces a:last-child,
.menu-enlaces a:first-child {
  border: none;
}
.menu-enlaces button {
  background: transparent;
  border: none;
  border-bottom: 1px solid #cac4d0;

}
.menu-enlaces img,
.menu-inicio img {
  width: 22px;
  height: auto;
  margin-right: 16px;
}
.menu-inicio a {
  display: block;
  padding: 8px 0;
  text-align: center;
  font-size: 16px;
}
.menu-inicio a img {
  width: 24px;
  height: auto;
  background-color: var(--verde);
  margin-right: 8px;
}

#menu-subenlaces {
  padding-left: 36px;
}

/* ---------- MENSAJE PORTADA */

.mensaje-portada {
  z-index: 15;
  color: white;
  border: 1px solid white;
  border-radius: 16px;
  padding: 32px;
}
.mensaje-portada a {
  color: white;
}

.mensaje-portada img {
  transform: rotate(180deg);
  width: 13px;
  height: auto;
  margin-left: 4px;
}





/* ---------- BODY */

.pagina section {
  
  color: var(--gris-uno);
}
.pagina section p {
  line-height: 24px;
}
.bg-color-2 { background-color: var(--bg-dos); }
.pad-2 { padding: 0 }
.pad-2 { padding: 2%; }
.pad-4 { padding: 4%; }
.pad-1-0 { padding: 1% 0; }
.pad-2-0 { padding: 2% 0; }
.pad-4-0 { padding: 4% 0; }
.mar-2 { margin:2% }
.mar-none { margin:0 }
.mar-bot-1 { margin-bottom: 1%; }
.mar-bot-2 { margin-bottom: 2%; }
.border-bottom { border-bottom: 1px solid var(--background); }
.border-line { border: 1px solid var(--background); }
.border-radius-24 { border-radius: 24px }
.border-radius-32 { border-radius: 32px; }
.list-none { list-style-type: none; }
.list-disc { list-style-type: disc; }



/* .pagina h1.h1 {
  background-color: var(--bg-dos);
  padding: 4%;
}
.pagina h2.h2,
.pagina h3.h3 {
  background-color: var(--bg-dos);
  padding: 2%;
  margin-bottom: 1%;
}
.pagina h4.h4,
.pagina h5.h5 {
  padding: 4% 0;
  margin-bottom: 2%;
} */

/* .pagina section ul.border {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.pagina section ul.border li {
  border-radius: 24px;
  border: 1px solid var(--background);
  margin: 0;
  margin-bottom: 1%;
  padding: 2%;
}
.pagina section ul {
  list-style-type: disc;
  padding: 24px;
}
.pagina section ul li {
  margin-left: 3%;
  padding-bottom: 3%;
}  
*/

.pagina section img {
  border-radius: 24px;
}
.pagina section p {
  padding: 1% 0;
}


.pagina section ul.marker li::marker {
  color: var(--verde); 
}
.pagina section ul.marker li:first-child::marker {
  font-size: 5rem;
  line-height: 20px;
}

section.destacado {
  background: rgb(22,70,134);
  background: linear-gradient(0deg, rgba(22,70,134,1) 0%, rgba(16,108,55,1) 100%);
  color: white;
  border-radius: 32px;
}
section.destacado div.titulo {
  font-family: 'Montserrat Bold';
}


hr.separador {
  height: 10px;
  background: rgb(22,70,134);
  background: linear-gradient(45deg, rgba(22,70,134,1) 0%, rgba(16,108,55,1) 100%);

}

/* ---------- <GALERIAS> */



section.galeria-fotos img {
  object-fit: cover;
  
  margin-right: 8px;
  margin-bottom: 12px;
}

/* ---------- FORM */

.pagina input,
.pagina textarea {
  display: block;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--verde);
}
.pagina label {
  font-family: 'Montserrat Bold';
  padding: 1% 0;
  display: block;
}
.pagina a {
  color: var(--verde);
}
span.input-msg {
  color: #ff0000;
  font-weight: bold;
  display: block;
  padding: 8px 16px;
}
input.invalid,
textarea.invalid {
  border: 1px solid red;
  outline: none;
}

form button {
  cursor: pointer;
}


/* ---------- BOTONES */

a.btn,
button.btn {
  font-family: 'Montserrat Bold';
  border-radius: 16px;
  padding: 24px 0px;
  border: none;
  min-width: 256px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: white;
  cursor: pointer;
}

a.btn-default,
button.btn-default {
  background: rgb(22,70,134);
  background: linear-gradient(0deg, rgba(22,70,134,1) 0%, rgba(16,108,55,1) 100%);
}

a.btn-alter,
button.btn-alter {
  background: linear-gradient(white, rgb(235, 243, 255)) padding-box, linear-gradient(to right, var(--azul), var(--verde)) border-box;
  border: 2px solid transparent;
}

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

.color-azul {
  color: var(--azul);
}
/* ---------- FOOTER */

footer {
  background: rgb(22,70,134);
  background: linear-gradient(0deg, rgba(22,70,134,1) 0%, rgba(16,108,55,1) 100%);
  width: 100%;
  color: white;
  position: relative;
  border-top: 2px solid var(--azul);
  line-height: 24px;
}

footer a {
  color: white;
}
footer div {
  font-weight: bold;
}

div.btn-contacto {
  position: absolute;
  top: 40%;
  z-index: 15;
}
div.btn-contacto a {
  border:2px solid white;
  border-radius: 16px;
  padding: 18px;
}

/* ---------- Filter Color Blanco */

footer img { 
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7470%) hue-rotate(116deg) brightness(109%) contrast(109%);
}