:root {
    --color-one: #5C745C; /* verde oliva oscuro */
    --color-two: #9BB399; /* verde claro */
    --color-three: #B0C3B0; /* verde más claro */
    --color-four: #CC7B52; /* MARRÓN */
  
    --link_blue: #0070F3;
    --link_hover: #0366D6;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
  font-family: "Roboto", sans-serif;
  margin: 0 auto;
}

a {
	color: var(--link_blue);
}
a:hover {
	color: var(--link_hover);
}

/* Ocultar texto */
.invisible {
	text-indent:-999em;
	display: inline-block;
}

/* Imagen redondeada */
img.rounded {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
}
img.square {
  height: 100px;
  width: 100px;
  object-fit: cover;
}

h1 {
    font-variant: small-caps;
    text-align: center;
    margin:0;
}

header {
    color: white;
    background-color: var(--color-one);
    text-align: center;
    margin: 0;
    padding: 0;
}
header a {
    color: var(--color-one);
    padding: 0.5em;
    margin: 0.5em;
    background-color: white;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}
header a:hover {
    background-color: var(--color-one);
    color: white;
    text-decoration: underline;
}
.sin_decoracion {
    background-color: var(--color-one);
    padding: 0;
    margin: 0;
    color: white;
}

.header_grid {
    display: grid;
    grid-template-rows: [y0] auto [y1] auto [y2];
    grid-template-columns: [x0] fit-content(350px) [x1] 1fr [x2];
    align-items: center;
    text-align: left;
}
.header_grid > .titulo::before { content: url("https://www.maquinilla13.com/static/images/building.svg"); width: 32px; display: inline-block; padding-right: 5px;}
.header_grid > .titulo {grid-row: y0 / y2; padding: 0 1em; }
.header_grid > .seccion { text-align: center;  margin: 5px; text-indent: -13em; border-top: 1px solid white; padding-top: 5px;}
.header_grid > .menu {text-align: center; margin: 5px 0; margin-left: -13em;}

@media only screen and (max-width: 900px) {
    .header_grid > .titulo::before { width: 20px;}
    .header_grid > .titulo {font-size: 1.4em;}
    .header_grid > .seccion { text-align: left;  text-indent: 0;}
    .header_grid > .menu {text-align: left; margin-left: 0;}
}

main {
    text-align: center;
    padding: 0 1em;
}

main h1 {
    margin-top: 1em;
}

footer {
    width: 86%;
    border-top: 1px solid var(--color-two);
    text-align: center;
    margin: 1em auto;
    padding: 1em 0;
}


input, select, textarea {
    padding: 6px 12px;
    margin-bottom: .5rem;
    color: black;
    border: 1px solid var(--color-three);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
    padding: 5px 11px; /* Ponemos más borde y quitamos padding */
    border: 2px solid var(--color-two);
}


a button, a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-size: 1rem;
	display: inline-block;
	padding: 6px 12px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background: var(--color-two);
	color: black;
	border: 0;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
}
a:hover button, a.button:hover
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    color: white;
    background: var(--color-one);
}


/* Estilos genéricos */
.aviso {
    display: block;
    color: black;
    background-color: var(--color-four);
    border-radius: 4px;
    margin: 10px auto;
    padding: 0.25em;
    max-width: 800px;
}
.aviso p {
    margin: 8px;
}

/* Estilos de la página index.php */
#index {
    text-align: center;
}

.index_menu {
    display: inline-block;
    margin: 1em;
    padding: 1px; /* Este pixel es para que al hacer hover y ampliar el borde no se descuadre el diseño. En el hover se hace padding: 0px*/
    border-radius: 5px;
    border: 1px solid var(--link_blue);
    width: 10em;
    min-height: 190px;
    vertical-align: top;
}
.index_menu:hover {
    padding: 0;
    border: 2px solid var(--link_hover);
}

.index_menu a {
    text-decoration: none;
}

.index_menu h2 {
    text-decoration: none;
    margin: 0;
    padding: 0.5em;
}