@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css");
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

:root {
  --main-white-color: #fff;
  --main-grey-color: #f2f2f2;
  --main-black-color: black;
  --main-green-color: #00CDAF;
  --main-blue-color: #3B5998;
  --second-dark-color: #333333;
  --second-grey-color: #8f8f8f;
  --card-beige-color: #F5F5DC;
  --text-orange-color:#f13e07;
}

* {
  padding: 2;
  margin: 0;
  box-sizing: border-box;
}



ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--main-black-color);
  
}

body {
  font: 16px/1.5 "Lato", sans-serif;
    /*IE FIX*/
  /*display: flex;
  flex-direction: column;*/
  background-color: var(--card-beige-color);
  color: #333333;
}
header {
    padding: 1em 0;
}

header h2 {
    margin: 0;
    padding: 0;
    font-size: 3em;
    font-weight: 600;
}
main {
  background-color: var(--main-grey-color);
}
main p {
  font-size: 0.9em;
  padding:  1em 0;
}
.center {
  text-align: center;
}
h1{
  font-size: 2em;
  color:#333333;
}
h2{
  font-size: 1.5em;
  color:#333333;
}
h3{
  font-size: 1.3em;
  color:#559A33;
}
h4{
  font-size: 1.0em;
  color:#333333;
}

.text span {
  font-size: 0.80em;
  color: var(--main-black-color);
}

hr  {
  display: block;
  margin-top: 0.em;
  margin-block: 1em;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}


.roundimg {
  width:80px;
  height:80px;
  border-radius:40px;
  float: right;
  border: 2px solid var(--main-green-color);
}

.blog-footer {
 background-color: var(--second-dark-color);
 color: var(--second-grey-color);
 font-style: italic;
 font-weight: lighter;
 font-size: 0.9em;
}
.blog-footer a {
  color: var(--main-green-color);
 }

cite{
    color: var(--main-green-color);
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: var(--main-white-color);
  margin: 3em 1.5em;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

search {
  width: 200px;
}

/* CONTAINER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  min-height: 100vh;
 }

.wrapper > * {
  padding: 10px 40px;
}


/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header {
  background: var(--main-white-color);
}
.page-header nav {
  text-transform: uppercase;			
  display: -webkit-box;
  display: flex;
  font-size: 0.9em;
  
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
}

.page-header ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-ordinal-group: 2;
          order: 1;
  width: 100%;
  margin-top: 15px;
}

.page-header ul li:not(:last-child) {
  padding-right: 25px;
}

.page-header .btn-acceso {
  display: inline-block;
  text-decoration: none;
  color: var(--card-beige-color);
  background-color:var(--main-blue-color); /* Azul */
  padding: 2px 5px 5px 5px;
  font-size:0.8rem;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}



.page-header .btn-acceso:hover {
background-color: var(--second-dark-color);
}

#logo {
    height: 100px;
}

.input-header {
  font-size: 0.9em;
  width: 10%; 
  padding: 10px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical;

}
input[type=text], input, select, textarea {
  font-size: 0.9em;
  width: 100%; 
  padding: 10px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical;
}


input[type=submit] {
  background-color: var(--main-blue-color);
  color: var(--main-white-color);
  padding: 12px 20px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  width: 200px;
  text-transform: uppercase;
 }


/* welcome
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-welcome {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content:center;
  -webkit-box-flex: 1;
          flex-grow: 1;
  min-height: 550px;
  background: #5be7d0b4
     url("../images/portada-motosierras.webp") no-repeat
    center / cover;
  background-blend-mode: saturation, luminosity;
  color: var(--text-orange-color);
}

.page-welcome div {
  max-width: 500px;
}

.page-welcome h1 {
  margin-bottom: 20px;
}

.page-welcome p  {
  margin-top: 10px;
  font-weight: bold;
  color: var (--text-orange-color) 


}

.page-welcome {
  padding-left: 70px;
  
}

/* ASIDE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-aside {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
          flex-grow: 1;
  min-height: 400px;
  background: url("../images/fondotallas.jpg") no-repeat
    center / cover;
  color: var(--main-black-color); 

}



/* EVENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.event {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  background: var(--main-green-color);
  color: var(--main-white-color);
  justify-content: center;
  font-size: 0.8em;
}
.event a:hover{
  color: var(--main-blue-color);

}

/* CONTACT BANNER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-contact-banner {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
          flex-grow: 1;
  min-height: 300px;
  background: #0a130c8e
   url("../images/contact.webp") no-repeat
    center / cover;
  background-blend-mode:saturation, normal;
  color: var(--card-beige-color);
  }

  .page-contact-banner h1 {
    color: var(--card-beige-color)
  }


/* FORM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
iframe{
  padding: 2em 0;
}
input[type=text], input, select, textarea {
  font-size: 0.9em;
  width: 100%; 
  padding: 10px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical;
}


input[type=submit] {
  background-color: var(--main-blue-color);
  color: var(--main-white-color);
  padding: 12px 20px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  width: 200px;
  text-transform: uppercase;
 }

input[type=submit]:hover {
  background-color: var(--second-dark-color);
  }

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.map {
  padding: 2em 0;
}





/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
          flex-direction: column-reverse;
  background: var(--second-dark-color);
  color: #FFFFFF;
  justify-content: center;
 }
 .page-column { 
  background: #FFFFFF;
 }
.page-footer a{
  color:var(--main-grey-coloror);
}
.page-footer a:hover {
  color:#559A33;
}

.page-footer ul {
  display: -webkit-box;
  display: flex;
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.page-footer ul li:not(:last-child) {
  margin-right: 20px;
}

.page-footer-container {
  font-weight: 300;
  width: 75%;
  padding: 2em 0;
}

.page-footer-container p {
  font-size: 0.8em;
}
.page-footer-container i {
  font-size: 1.5em;
  padding: 0.8em 0.1em;
}
.page-footer-container i:hover {
  color: #EA6026;
  
}

/* DL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
dl p{
  font-style: italic;
  font-size: 0.7em;
 }
 dt{
   padding: 1em 0 0.1em;
   font-weight: bold;
 }
 dd {
   font-weight: lighter;
 }

/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 550px) {
  .page-header ul {
    width: auto;
    margin-top: 0;
  }

  .page-header .btn-acceso {
    -webkit-box-ordinal-group: 2;
            order: 1;
  }

  .page-footer {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -webkit-box-pack: justify;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
  }

  .page-footer ul {
    margin-bottom: 20px;
  }
}

/* Flexbox
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    align-items: center;
  }


  img{
      max-width: 640px;
  }

  .h2-flexbox {
    font-size: 1.5em;
  }

 
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }

   .column {
    width: 100%;
  }
}

/* Lista anidada
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.lista-principal {
  margin: 20px;
  padding: 10px;
  list-style-type: decimal;
  font-size: 0.9em;
}

.lista-negrita {
  font-weight: bold;
}

.sub-lista {
  margin: 10px 0 10px 20px;
  padding: 0;
  list-style-type: circle;
}


/* Estilo del enlace tipo botón */
.btn-viewmore {
  display: inline-block;
  text-decoration: none;
  color: var(--card-beige-color);
  background-color:var(--main-blue-color); /* Azul */
  padding: 8px 20px;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Interacción con hover */
.btn-viewmore:hover {
  background-color: #0056b3; /* Azul más oscuro */
  transform: scale(1.05); /* Agranda ligeramente */
}

/* Interacción con foco */
.btn-viewmore:focus {
  outline: 2px solid #80bdff; /* Borde azul claro */
  outline-offset: 2px;
}

/* Estado activo */
.btn-viewmore:active {
  background-color: #004085; /* Azul más oscuro aún */
  transform: scale(0.95); /* Reduce ligeramente */
}

textarea {
  display: inline-block;
  margin: 0;
  padding: .2em;
  width: auto;
  min-width: 50em;
  /* The max-width "100%" value fixes a weird issue where width is too wide by default and extends beyond 100% of the parent in some agents. */
  max-width: 100%;
  /* Height "auto" will allow the text area to expand vertically in size with a horizontal scrollbar if pre-existing content is added to the box before rendering. Remove this if you want a pre-set height. Use "em" to match the font size set in the website. */
  height: auto;
  /* Use "em" to define the height based on the text size set in your website and the text rows in the box, not a static pixel value. */
  min-height: 10em;
  /* Do not use "border" in textareas unless you want to remove the 3D box most browsers assign and flatten the box design. */
  /*border: 1px solid black;*/
  cursor: text;
  /* Some textareas have a light gray background by default anyway. */
  background-color: #eee;
  /* Overflow "auto" allows the box to start with no scrollbars but add them as content fills the box. */
  overflow: auto;
  /* Resize creates a tab in the lower right corner of textarea for most modern browsers and allows users to resize the box manually. Note: Resize isn't supported by most older agents and IE. */
  resize: both;
}