body {
    /* Estilos por defecto de la página */
    font-family: 'Roboto';
    background-color: #ccc;
    margin: 0;
}

h1, h2, h3, h4 ,h5 ,h6 {
    /* Si usamos Google Fonts es commo si lo tuvieramos instalado en nuestro ordenador. Funciona igual */
    font-family: 'Funnel Sans';
}

.container {
    width: 1024px; /* Ancho del contenedor */
    margin: 0 auto; /* Centro el contenedor */
    position: relative; /* Establezco como referencia para los position posteriores */
}

header {
    border-bottom: 1px solid #ccc; /* Borde inferior */
    background-color: #fff;
    padding: 1rem;
    position: fixed; /* Establezco que se quede anclado a la ventana del navegador*/
    top: 0;  /* Coordenadas de posicionamiento */
    left: 0;
    right: 0;
    z-index: 1000; /* El eje Z de "altura" para que flote por encima de otros elementos */
}

/* header */

.logo img {
    height: 3rem; /* Altura del logo */
}

.navegacion {
    position: absolute; /* Situamos la navegación en refencia al container */
    top: 0; /* Coordenadas */
    right: 0;
}

.navegacion ul li { /* Presentacón en línea de un menú */
    display: inline;
    margin: 1rem; 
}

.navegacion a {
    color: #333; /* Estilos de los enlaces de navegación*/
    text-decoration: none;
}

.text-right {
    text-align: right;
}

/* main */
main {
    margin-top: 7rem; /* Lo usamos para que no "tape" el header al resto de la página */
}

/* secciones*/

.buscador,
.relacionados
{
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

.resultados {
    margin-bottom: 2rem;
}

article {
    background-color: #fff;
    border-radius: 1rem;
    position: relative;
    margin-bottom: 1rem;
    height: 200px;
}

.product-data {
    /* Posicionamos los datos del producto dentro del article */
    position: absolute;
    top: 0;
    left: 350px;
}
.product-btn {
    /* Posicionamos el botón dentro del article */
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.product-img img {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

/* TABLA*/
.relacionados table {
    width: 100%;
    border-collapse: collapse;
}

.relacionados  caption {
    margin-bottom: .25rem;
}

.relacionados  th {
    background-color: #999;
}
.relacionados th, 
.relacionados td {
    text-align: left;
    padding: 1rem .5rem;
    border-bottom: 1px solid #ccc;
}

/* FORMULARIO */

.form-group {
    margin-bottom: 1rem; /* Para separar las "parejas" de label e input */
}
.form-label {
    display: block;
    font-weight: bold;
    margin-bottom: .5rem;
}

.form-control {
    display: block;
    box-sizing: border-box; /* Sirve para ajustar el contenido al 100% en inputs */ 
    width: 100%;
    padding: .25rem;
    border-radius: .25rem;
    border: 1px solid #ccc;
}

legend {
    font-weight: bold;
    margin-bottom: .25rem;
}

fieldset {
    border: 0;
    padding: 0;
}

.btn {
    /* Estilos comunes para todos los botones */
    border-radius: .5rem;
    padding: .25rem 1rem;
    border: 0;
    text-decoration: none;
}

.btn-primary {
    /* Botón sólido */
    color: #fff;
    background-color: #00c;
}

.btn-outline-primary {
    /* Botón con border */
    color: #00c;
    border: 1px solid #00c;
}

/* FOOTER */
footer {
    text-align: center;
}