/*Reset styles*/
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body, html {
  overflow-x: hidden;
  max-width: 100vw;
}

:root {
  /* Paleta "Seguridad Minera": amarillo de seguridad real de faena +
     franjas amarillo/negro, en vez del rosa fucsia original — pensada para
     uso en terreno en gran minería (máximo contraste, señalética industrial
     real). Rojo (--error) queda reservado solo para errores, nunca como
     color decorativo. */
  --secondary: #ffd60a;
  --secondary-ink: #1a1400;
  --steel: #3d4f5c;
  --error: #e2001a;
}

/* Estilos generales */
body {
  background-color: rgb(255, 255, 255);
}

/* Encabezado */
.principal {
  align-items: center;
  display: flex;
  background-color: #050503;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 0.5rem;
  position: sticky;
  top: 0;
  height: 10vh;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
}

/* Franja tipo cinta de precaución (amarillo/negro real), bajo el
   encabezado principal. */
.principal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--secondary) 0 10px,
    #000 10px 20px
  );
}

/* Imagen del encabezado: logo1.png ya viene coloreado en amarillo/negro. */
.imagen-wrap {
  height: 70%;
  max-height: 80%;
}

.imagen-wrap img {
  display: block;
  width: auto;
  height: 100%;
}

/* Titulo Principal */
h1 {
  font-size: 5vw;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Degradado acero -> ámbar (antes era un arcoíris cian/púrpura/rosa que
     no encajaba con la nueva paleta). */
  background-image: linear-gradient(
    258.75deg,
    var(--steel) 20%,
    var(--secondary) 75%,
    #ffe08a 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin: 0;
  line-height: 1.2;
  height: auto;
  flex-grow: 1;
}

/* Contenedor de contenido */
.container {
  align-items: center;
  background-color: #050503;
  border: 4px solid var(--steel);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 1rem;
  box-sizing: border-box;
  row-gap: 20px;
  /* min-height (no height fija): el marco debe CRECER para contener
     todos los botones. Con height:100% fijo, el contenido real (imagen +
     8 botones) se desbordaba fuera del borde en vez de que la caja creciera. */
  min-height: 100%;
  /* flex-grow: 1 hace que este bloque ocupe todo el espacio sobrante entre
     el header y el footer (patrón "sticky footer"): en páginas con poco
     contenido, el footer queda pegado abajo en vez de dejar un hueco en
     blanco; en páginas con mucho contenido, este bloque simplemente crece
     más allá de una pantalla y todo hace scroll con normalidad. */
  flex: 1 0 auto;
  margin-bottom: 1rem;
}

.container div {
  display: flex;
  justify-content: center;
  width: 40%;
}

/* Altura fija para que todos los botones del menú principal se vean del
   mismo tamaño, sin importar si el texto ocupa 1, 2 o 3 líneas. */
.container div button {
  height: 70px;
  opacity: 0;
  transform: translateY(10px);
  animation: entradaBoton 0.5s ease forwards;
}

@keyframes entradaBoton {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrada escalonada: cada botón del menú aparece un poco después que el
   anterior (empieza en nth-of-type(2) porque el primer div es la imagen
   de la grúa, sin botón). */
.container > div:nth-of-type(2) button { animation-delay: 0.05s; }
.container > div:nth-of-type(3) button { animation-delay: 0.11s; }
.container > div:nth-of-type(4) button { animation-delay: 0.17s; }
.container > div:nth-of-type(5) button { animation-delay: 0.23s; }
.container > div:nth-of-type(6) button { animation-delay: 0.29s; }
.container > div:nth-of-type(7) button { animation-delay: 0.35s; }
.container > div:nth-of-type(8) button { animation-delay: 0.41s; }
.container > div:nth-of-type(9) button { animation-delay: 0.47s; }

@media (prefers-reduced-motion: reduce) {
  .container div button {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.container .primero {
  margin: 10px 0px;
  width: 100%;
}

.container .principal{
  height: 70%;
  margin: 10px 0px;
  width: 100%;
  position: relative;
}

.container .principal img{
  height: 50vh;
  opacity: 1;
  /* grua1_negro.png ya viene coloreada en amarillo/negro con fondo negro
     sólido: sin filtro ni overlay. width:auto conserva su proporción. */
  width: auto;
  max-width: 100%;
}

.container .button img {
  animation: zoomIn 2s ease-out forwards;
  transform: scale(0.5);
  opacity: 0;
}

/* Definimos la animación */
@keyframes zoomIn {
  0% {
    transform: scale(0.5) translateZ(-200px); /* La imagen empieza pequeña y alejada */
    opacity: 0; /* Imagen invisible al inicio */
  }
  100% {
    transform: scale(1) translateZ(0); /* Escala y posición final */
    opacity: 1; /* Imagen completamente visible */
  }
}

/* Cambios del body y html */
html, body {
  margin: 0;
  padding: 0;
  /* min-height: 100vh (no 100% ni height fija): en páginas donde el
     contenido es más alto que la pantalla (ej. index_es.html con 8+
     botones), una altura fija comprime todo y lo hace desbordarse fuera
     de los bordes decorativos. Se usa "vh" en vez de "%" porque el
     porcentaje solo se resuelve si el elemento padre tiene una altura
     definida — con min-height esa cadena padre/hijo no es confiable en
     todos los navegadores, mientras que "vh" siempre se calcula directo
     contra la pantalla. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif; /* Ajusta la tipografía al estilo general */
}

/* Logo de RigPro destacado en la portada (index_es.html): logo1.png ya
   viene coloreado en amarillo/negro, sin filtro ni overlay. */
.container .primero img {
  height: 40vh;
  max-height: 30vh;
  max-width: 40vh;
}

/* Ajusta el ancho del botón para que se vea bien con la imagen */
.container .primero button {
  width: 90%;
  margin-top: 0;
}

/* Botón */
.button_principal_segundario,
.container button,
.enviar,
.tanden {
  background-color: var(--secondary);
  border: none;
  border-radius: 10px;
  padding: 0;
  margin-top: 10px;
  width: 100%;
  min-height: 48px;
  display: flex;
}

/* Cambiar color de fondo al pasar el mouse */
.button_principal_segundario:hover,
.container button:hover,
.enviar:hover,
.tanden:hover {
  background-color: hsl(0, 0%, 100%);
  cursor: pointer;
  transition: all 250ms linear;
}

/* Texto del botón */
/* display:flex + width/height 100% asegura que TODO el botón sea táctil,
   no solo el texto (evita el problema de "botones que no responden al
   tocar los bordes" en dispositivos móviles reales). */
.button_principal_segundario a,
.container button a,
.enviar span,
.tanden span {
  align-items: center;
  /* El amarillo de seguridad es muy claro — texto blanco encima es casi
     ilegible (contraste ~1.3:1). Se usa --secondary-ink (casi negro). */
  color: var(--secondary-ink);
  display: flex;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.5vw;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  height: 100%;
  justify-content: center;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

/* Texto del botón al pasar el mouse */
/* Al pasar el mouse el fondo del botón se vuelve blanco (arriba); el
   amarillo sobre blanco también es casi invisible, por eso el texto en
   hover usa --steel (buen contraste sobre blanco) en vez de --secondary. */
.container button a:hover,
.enviar span:hover,
.tanden span:hover {
  color: var(--steel);
}

/* Estilo de los botones en contenedor .primero */
.container .primero button {
  width: 90%;
}

/* Estilo imagen principal */
.button img {
  border-radius: 20px;
}

/* Estilo del botón en .principal */
.principal button {
  width: 150px;
  height: 50px;
}

.button_principal_segundario,
.tanden {
  width: 15vh;
  height: 50px;
}

/* Texto destacado */
.primario {
  background-color: #050503;
  bottom: 0px;
  color: hsl(0, 0%, 100%);
  border-radius: 10px 10px 0px 0px;
  padding: 15px;
  position: relative;
  text-align: center;
  margin-top: 10px;
  width: 100%;
}

.primario h3 {
  font-size: 4vw;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.primario p {
  font-family: "Nunito Sans", sans-serif;
  font-size: 3vw;
  margin-top: 5px;
}

.primario a {
  color: var(--secondary);
  text-decoration: underline;
}

/* Pagina principal, segundaria */
main {
  border-radius: 10px;
  background-color: #050503;
  margin: 5px auto;
  padding: 15% 0px;
  width: 95%;
}

.ul_principal_segundario {
  padding: 10px 10px;
  list-style: none;
  margin-bottom: 5%;
  position: relative;
  background-color: #050503;
}

/* Misma franja tipo cinta de precaución que en la página principal, para
   que la identidad se sienta igual en todas las páginas secundarias. */
.ul_principal_segundario::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -6px;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg,
    var(--secondary) 0 8px,
    #000 8px 16px
  );
}

.ul_principal_segundario .imagen {
  height: 60px;
  top: 20px;
  position: absolute;
  right: 20px;
  width: 60px;
  object-fit: contain;
  /* La imagen queda solo en blanco y negro; el color acero/ámbar lo pone el
     overlay de abajo (::before), igual que en la maqueta de comparación. */
  /* filter: grayscale(1) contrast(1.1) brightness(1.05); */
}

/* Overlay de color: mismo tamaño y posición exacta que .imagen, recortado
   con la propia silueta del logo (mask-image = la misma imagen, usa su
   canal alfa) y pintado con mix-blend-mode: color — así el ámbar solo tiñe
   el trazo del logo, nunca un recuadro. Color plano (sin degradado), para
   que el fondo no tenga transiciones que se puedan ver como una línea. */
.ul_principal_segundario::before {
  content: "";
  position: absolute;
  top: 30px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: var(--secondary);
  mix-blend-mode: color;
  -webkit-mask-image: url("../img/logo1.png");
  mask-image: url("../img/logo1.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

.button_principal_segundario:hover {
  background-color: #1a1b24;
  transition: all 250ms linear;
}

.formulas_mas_usadas_otras {
  border-radius: 10px;
  background-color: hsl(0, 0%, 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  margin: 5px auto;
  padding: 10px;
  justify-content: space-around;
  width: 90%;
}

/* Button Formulas */
/* Altura fija (no min-height) para que TODOS los botones del listado se
   vean del mismo tamaño, sin importar si el texto ocupa 1 o 3 líneas. */
.formulas_mas_usadas_otras li {
  background-color: var(--secondary);
  border-radius: 5px;
  height: 76px;
  list-style: none;
  width: 120px;
}

/* El padding se movió del <li> al <a> para que TODO el área visible del
   botón sea táctil, no solo el texto (el <a> ocupa el 100% del <li>). */
.formulas_mas_usadas_otras a {
  align-items: center;
  box-sizing: border-box;
  /* Mismo motivo que el botón principal: amarillo + texto blanco es casi
     ilegible. No se tocan dimensiones (width/height/min-height/padding). */
  color: var(--secondary-ink);
  display: flex;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8rem;
  height: 100%;
  justify-content: center;
  min-height: 48px;
  padding: 8%;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

/* Estilos de las paginas formulas mas usadas y otras formulas */
.container_todos {
  background-color: #050503;
  border: 3px solid var(--steel);
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  margin: 15px auto;
  width: 95%;
}

h2 {
  color: hsl(0, 0%, 100%);
  font-size: 4vw;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: italic;
  padding: 2px;
  text-align: center;
  margin: 5px auto;
}

/* Impust */
.inputs {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
}

.inputs label {
  color: hsl(200, 18%, 15%);
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-size: 4vw;
  list-style: none;
  padding: 5px;
}

.inputs input {
  border-radius: 10px;
  padding: 10px;
}

.descripcion {
  font-size: 4vw;
}

/* Nota de ayuda dentro de .container_todos (ej: aclaraciones antes de los
   campos). Misma familia que el resto de la app, tamaño más chico que los
   labels/títulos, y margen propio para no pegarse con lo de arriba/abajo. */
.nota-ayuda {
  color: hsl(0, 0%, 80%);
  font-family: "Nunito Sans", sans-serif;
  font-size: 3vw;
  line-height: 1.4;
  margin: 10px auto;
  padding: 0 10px;
  text-align: center;
}

.error-message {
  font-family: "Nunito Sans", sans-serif;
  font-size: 3.5vw;
  color: var(--error);
  padding-top: 5px;
}

.enviar {
  background-color: var(--secondary);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  letter-spacing: 0;
  margin-top: 20px;
}

.enviar:hover {
  background-color: hsl(0, 0%, 100%);
  border: 2px solid var(--steel);
  cursor: pointer;
  transition: all 250ms linear;
}

.enviar span {
  color: var(--secondary-ink);
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4vw;
  text-decoration: none;
}

.enviar span:hover {
  color: var(--steel);
}

.result {
  margin-top: 20px;
}

.result p {
  font-size: 4vw;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 10px;
  color: hsl(0, 0%, 100%);
}

.result span {
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4vw;
  color: hsl(0, 0%, 100%) !important;
}

.proceso {
  background-color: #050503;
  border: 3px solid var(--steel);
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px;
  text-align: center;
  width: 95%;
}

.proceso h3 {
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4vw;
  color: hsl(0, 0%, 100%);
}

.proceso p {
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8rem;
  padding: 3px;
  color: hsl(0, 0%, 100%);
}

.imagen-proceso {
  margin: 5px auto;
  text-align: center;
  width: 95%;
}

.imagen-proceso img {
  height: 200px;
  max-width: 95%;
}

.tanden {
  background-color: var(--secondary);
  color: var(--secondary-ink);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  letter-spacing: 0;
  margin: 20px auto 0;
  width: 90%;
}

.tanden:hover {
  background-color: hsl(0, 0%, 100%);
  border: 2px solid var(--steel);
  color: var(--steel);
  cursor: pointer;
  transition: all 250ms linear;
}

.tanden span {
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: 4vw;
  text-decoration: none;
}

#quiz-form ul {
  list-style: none;
}

#quiz-form h3 {
  color: rgb(44, 43, 43);
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-style: italic;
  font-size: 1rem;
  text-align: justify;
  margin: 10px 0px;
}

#quiz-form label {
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  color: rgb(44, 43, 43);
  font-size: 1rem;
  padding: 7px;
  text-align: justify;
}

#quiz-form button {
  background-color: #1a1b24;
  border-radius: 10px;
  margin: 10px 0px;
  min-height: 48px;
  padding: 8px;
  width: 40%;
}

#quiz-form span {
  color: hsl(0, 0%, 100%);
}

.results {
  display: inline;
  padding: 5px;
}

hr {
  margin-top: 5px;
}

.otras_preguntas {
  display: flex;
  flex-wrap: wrap;
  height: 70px;
  margin-top: 15px;
  justify-content: space-around;
  width: 100%;
}

.otras_preguntas button {
  background-color: #1a1b24;
  border-radius: 5px;
  min-height: 48px;
  min-width: 48px;
  height: auto;
  width: auto;
  padding: 4px 10px;
}

.otras_preguntas a {
  align-items: center;
  color: hsl(0, 0%, 100%);
  display: flex;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}

.contenedor {
  background-color: white;
  border-radius: 10px;
  box-shadow: 5px 5px 2px hsl(200, 18%, 15%);
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  width: 80%;
  justify-content: center;
}

.contenedor div {
  text-align: center;
  margin: 40px 5px;
}

.contenedor div a {
  align-items: center;
  background-color: hsl(200, 18%, 15%);
  color: white;
  display: flex;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  height: 48px;
  justify-content: center;
  box-sizing: border-box;
  margin: 10px 0px;
  padding: 5px;
  text-decoration: none;
  width: 100%;
  border-radius: 10px;
}

table {
  margin: 0px auto;
  padding-top: 10px;
}

/* Calculadora Científica: mismo lenguaje visual que .container_todos
   (tarjeta oscura, borde morado) para que no se vea como un widget
   ajeno pegado al resto de la app. */
#sciout {
  background-color: #1a1b24;
  border: 3px solid hsl(200, 18%, 15%);
  border-radius: 10px;
  width: 95%;
  margin: 15px auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Ancho responsivo (no fijo en px): un ancho fijo de 575px se salía de
   la pantalla en móviles angostos, provocando scroll horizontal. */
#sciInPut {
  font-size: 3.5vw;
  color: hsl(0, 0%, 70%);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 1.4em;
}

#sciOutPut {
  overflow: hidden;
  background: hsl(200, 18%, 15%);
  border-radius: 5px;
  padding: 12px;
  margin: 0;
  font-size: 6vw;
  font-weight: bold;
  color: whitesmoke;
  text-align: right;
  width: 100%;
  box-sizing: border-box;
}

.row {
  margin-top: 15px;
}

.scien div {
  display: flex;
  margin: 10px 0px 10px 0px;
  align-items: center;
}

.scien div span {
  margin: 5px;
  width: 20%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid hsl(200, 18%, 30%);
  border-radius: 5px;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: 3.2vw;
  font-weight: bold;
  color: whitesmoke;
  background-color: hsl(200, 18%, 15%);
  box-sizing: border-box;
  cursor: pointer;
}

.scien div span:hover {
  background: var(--secondary) !important;
  color: var(--secondary-ink) !important;
}

.scien div span:focus {
  box-shadow: inset 0 0 0 2px var(--secondary);
}

#number {
  margin-top: 20px;
}

#number div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px 10px 0px;
  justify-content: space-between;
}

#number div span {
  margin: 5px;
  width: 15%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid hsl(200, 18%, 30%);
  border-radius: 5px;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-size: 3.6vw;
  font-weight: bold;
  color: whitesmoke;
  background-color: hsl(200, 18%, 15%);
  box-sizing: border-box;
  cursor: pointer;
}

#number div span:hover {
  background: var(--secondary) !important;
  color: var(--secondary-ink) !important;
}

#number div .scinm {
  border: 1px solid hsl(200, 18%, 40%) !important;
  border-radius: 5px !important;
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  color: hsl(200, 18%, 15%) !important;
  background-color: whitesmoke !important;
}

/* El "=" es la acción principal (mismo amarillo que "Calcular" en el resto
   del sitio), para que destaque igual que en todas las demás páginas. */
#number div .scieq {
  background-color: var(--secondary) !important;
  color: var(--secondary-ink) !important;
  border: none !important;
}

.scien div .scird {
  width: auto;
  flex: 1;
  min-width: 100px;
  background: whitesmoke;
  color: hsl(200, 18%, 15%);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 3vw;
}

#scihistory {
  width: 100%;
  text-align: right;
  overflow: hidden;
  color: hsl(0, 0%, 70%);
  font-size: 3vw;
  margin-top: 10px;
}

span .asme {
  font-style: italic;
  font-weight: 3rem;
}

/* General Styles */
select {
  border-radius: 10px;
  height: 48px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  margin: 10px 10px 10px 10px;
  padding: 0 8px;
  width: 70%;
}

/* Estilo base para la respuesta */
.result-correct {
  background-color: #28a745;
  color: white;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.result-incorrect {
  background-color: #dc3545;
  color: white;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Clase activa para mostrar el resultado */
.show-result {
  opacity: 1;
  transform: scale(1);
}

/* Codigo Nuevo */

/* Fin codigo Nuevo */


@media print {
  select option {
    page-break-before: always;
  }
}

/* Media Queries for Screen Sizes */

/* Small Screens */
@media screen and (max-width: 280px) {
  #sciout {
    padding: 0;
    margin: 0;
  }
}

@media screen and (max-width: 320px) {
  .formulas_mas_usadas_otras li {
    padding: 8%;
    width: 100px;
  }

  .formulas_mas_usadas_otras {
    padding: 8%;
    width: 100px;
  }
}

/* Medium Screens */
@media screen and (max-width: 425px) {
  .row {
    display: block !important;
  }

  #sciout {
    width: 90%;
    margin: 0 auto;
  }
}

/* Breakpoints consolidados (antes había ~15 media queries "por marca de
   celular" con el mismo max-width repetido varias veces — el navegador
   solo aplica la última declaración de cada propiedad, así que esas
   duplicadas nunca tenían efecto real; quedan solo los valores que sí
   se estaban renderizando). */
@media screen and (min-width: 1200px) {
  .principal img {
    height: 150px;
  }

  h1 {
    font-size: 4vw;
    padding: 0;
  }

  .container button {
    height: 100px;
  }

  .container button a {
    font-size: 2.5vw;
  }

  .primario h3 {
    font-size: 4vw;
  }
}

@media (max-width: 1024px) {
  .principal {
    padding: 0.5rem;
  }

  h1 {
    font-size: 4vw;
  }

  .container .primero button {
    width: 75%;
  }
}

@media (max-width: 992px) and (orientation: landscape) {
  .container button a {
    font-size: 3vw;
  }
}

@media (max-width: 768px) {
  .principal {
    padding: 0.5rem;
  }

  h1 {
    font-size: 4.5vw;
  }

  .container button a {
    font-size: 3.5vw;
  }

  .container .primero button {
    width: 75%;
  }
}

@media (max-width: 640px) {
  .principal {
    padding: 0.4rem;
  }

  h1 {
    font-size: 4.5vw;
  }

  .container button a {
    font-size: 3.4vw;
  }

  .container .primero button {
    width: 67%;
  }
}

@media (max-width: 600px) {
  .principal {
    padding: 0.4rem;
  }

  h1 {
    font-size: 4.5vw;
  }

  .container button a {
    font-size: 3.5vw;
  }

  .container .primero button {
    width: 68%;
  }
}