body {
  font-family: 'Red Hat Mono', monospace;
}

header {
  background-color: #F65A83;
  padding: 50px 0;
  text-align: center;
}

.caja {
  margin: 0 auto;
}

nav {
  bottom: unset;
  right: 0px;
  left: 0;
  position: absolute;
}

nav li {
  display: inline;
  margin: 10px;
}

nav a {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.9rem;
  color: white;
  font-weight: 500;
}

nav a:hover{
  font-weight: bold;
}

.logo {
  max-width: 200px;
  margin: 10px;
}

.productos {
  margin: 0 auto;
  display: flex;
  padding: 3em;
}

@media only screen and (max-width: 600px) {
  .productos {
    flex-direction: column;
    padding: 30px 20px;
  }
}

.productos h2 {
  font-size: 20px;
  font-weight: bold;
  padding: 10px;

}

.productos img {
  max-width: 200px;
}

.productos li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 0 1.5%;
  padding: 30px 20px;
  box-sizing: border-box;
  
}

.productos li:hover {
  background-color: #f65a8434;
  border-color: #f65a8434;
}

.productos li:active {
  border-color:#F65A83;
}

.productos li:hover h2 {
  font-size: 30px;
}

@media only screen and (min-width: 940px) {
  .productos li {
    width: 30%;
    border: 2px solid #F65A83;
    border-radius: 1em;
  /* ! Entre el padding y el margin */
  }
}

.nota {
  font-size: 20px;
  padding: 10px;
}

.precio {
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}

footer {
  text-align: center;
  background-color: #0f0f0f;
}

footer img {
  max-width: 200px;
  padding-top: 40px;
}

.copyright {
  color: white;
  font-size: 14px;
  padding-bottom: 20px;
}

main {
  width: 50%;
  margin: auto;
}


form {
  margin: 50px 0;
  line-height: 1.5;
}

form label, form legend, form p {
  display: block;
  font-size: 17px;
  margin: 0 0 10px;
}

.input-padron {  
  display: block;
  margin: 0 0 20px;
  padding: 10px 20px;
  width: 100%;
}

option , select{
}

.check {
  margin: 10px 0;
}

/* El ID tiene más peso,
la CLASE le sigue,
después la ETIQUETA.
1. id
2. Clase
3. Etiqueta
4. Configuraciones inline en html */

.enviar {
  width: 40%;
  padding: 15px 0;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background-color: #F65A83;
  border: none;
  border-radius: 5px;
  transition: 1s all;
  /* Transiciones posibles en css */
}

.enviar:hover {
  background-color: #f65a8496;
  cursor: pointer;
  transform: scale(1.2);
}

table {
  margin: 40px 40px;
}

thead {
  background-color: #F65A83;
  color: white;
  font-weight: bold;
  border: 2px solid #0f0f0f;
}

td, th {
  border: 2px solid #0f0f0f;
  padding: 8px 15px;
}

/* CSS para HOME */

.img2 {
width: 100%;
}

.tituloPrincipal {
  text-align: center;
  font-size: 1.5em;
  margin: 0.5em 0 1em;
  color: #F65A83;
}

.tituloPrincipal::first-line,
h3::first-letter,
h2::first-letter {
  font-weight: bold;
}

.items::before {
  content: "✓";
  color: white;
}

.homeSection {
  width: 100%;
  margin: auto;
}

.principal p {
  margin: 0 1em 1em;
  text-align: center;
}

.principal strong {
  font-weight: bold;
}

.principal em {
  font-style: italic;
}

.imgHome {
  width: 50%;
  text-align: center;

}

/* CSS para Location */

.mapa {
  padding: 1em 2em 1em 2em;
}

.mapa h3 {
  font-size: 1.5em;
  text-align: center;
  margin: 0 0 0.5em;
  color: #F65A83;
}

.mapa p {
  margin: 0 0 2em;
  text-align: center;
}

.video h3 {
  padding-top: 1.5em;
  font-size: 1.5em;
  text-align: center;
  margin: 0 0 0.5em;
  color: #F65A83;
}

.video p {
  margin: 0 2em;
  text-align: center;
}

.videoM {
  max-width: 450px;
  margin: 0 auto;
  padding: 1em 0;
  padding-bottom: 2em;
}


.datosDiferenciales {
  background-color: #0f0f0f;
  padding: 50px;
  color: white;
}

.itemsDiferenciales {
  width: 40%;
  display: inline-block;
  vertical-align: top;
}

.items {
  line-height: 1.5;
}

/* psudosclases -  para hacer selecciones especiales en los items de la lista de los diferenciales y aplicar algunos efectos especiales. */

.items:nth-child(2n){
  font-weight: bold;
  color: #df849c;
}

.imgHome {
  width: 60%;
  transition: 400ms;
  /* box-shadow: 9px 9px#F65A83; */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator */
  /* Sombras internas box-shadow: inset 0 0 30px color */
}

.imgHome:hover{
  opacity: 50%;
  transition: 400ms;
}

.datosDiferenciales h2 {
  padding: 10px;
  font-size: 1.5em;
  text-align: left;
  color: #F65A83;
}

@media only screen and (min-width: 940px) {
  .videoM {
    max-width: 560px;
    margin: 1em auto;
  }
  .mapa {
    width: 90%;
    height: 400px;
    margin: 1em auto;
  }
}


@media only screen and (max-width: 600px) {
  .itemsDiferenciales {
    width: 100%;
  }
  .imgHome{
    width: 100%;
  }
  .itemsDiferenciales  {
    display: block;
    padding: 1em;
  }
}

/* 
  elemento > hijo
  + primero
  ~ todos
  selector:not()
*/

/* Cálculos css
  cal(40% - ()26px* 4) */