:root {
  --color-primario: #292929;
  --color-primario-transparente: rgba(51, 51, 51, 0.6);
  --color-primario-claro: #3b3b3b;
  --color-secundario: #ff6f00;
  --color-secundario-transparente: rgba(255, 111, 0, 0.1);
  --color-terciario: #ffffff;
  --color-notas: #252530;
  --color-notas-transparente: rgb(221, 221, 224);
  --color-aviso: #b23c17;
  --color-aviso-claro: #fdf5f0;
  --color-fondo: #f0f0f0;
  --fuente-principal: "Montserrat", sans-serif;
  --fuente-secundaria: "Roboto", sans-serif;
}
html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}
/*  MAIN  */
main {
  width: 80%;
  min-height: 100vh;
  background-color: var(--color-fondo);
  padding-left: 20%;
}
#titulo-descripcion {
  padding: 80px 100px 20px 100px;
}
/*   NOTAS   */
.notas {
  background-color: var(--color-notas-transparente);
  border-radius: 10px;
  padding: 20px 20px 25px 20px;
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.notas .texto-notas {
  margin-bottom: 0px;
  font-family: var(--fuente-secundaria);
  color: var(--color-notas);
  font-size: 0.9rem;
  font-weight: 400;
}
.notas .titulo-notas {
  font-family: var(--fuente-principal);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-notas);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.notas svg {
  width: 30px;
  height: auto;
  fill: var(--color-notas);
  margin-right: 5px;
}
/*  AVISO  */
.aviso {
  background-color: var(--color-aviso-claro);
  border-radius: 10px;
  padding: 20px 20px 25px 20px;
  margin: 15px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.aviso .texto-aviso {
  margin-bottom: 0px;
  font-family: var(--fuente-secundaria);
  color: var(--color-aviso);
  font-size: 0.9rem;
  font-weight: 500;
}
.aviso .titulo-aviso {
  font-family: var(--fuente-principal);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-aviso);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.aviso svg {
  width: 30px;
  height: auto;
  fill: var(--color-aviso);
  margin-right: 5px;
}

/*    Titulo y descripcion    */
h1 {
  font-family: var(--fuente-principal);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primario);
  margin-bottom: 10px;
  max-width: 480px;
}
.h1-sub {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-primario-claro);
  text-transform: uppercase;
}
#titulo-descripcion p {
  font-family: var(--fuente-secundaria);
  font-size: 1rem;
  font-weight: 450;
  color: var(--color-primario-claro);
  max-width: 650px;
  line-height: 1.2;
}
strong {
  font-weight: 800;
}
/*  Sub-secciones  */
.sub-seccion {
  padding: 10px 100px 60px 100px;
  max-width: 650px;
}
h2 {
  font-family: var(--fuente-principal);
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--color-primario);
  margin-bottom: 15px;
  text-transform: uppercase;
}
.sub-seccion p {
  font-family: var(--fuente-secundaria);
  font-size: 0.9rem;
  font-weight: 450;
  color: var(--color-primario-claro);
  margin-bottom: 15px;
  line-height: 20px;
}
.sub-seccion ul {
  font-family: var(--fuente-secundaria);
  font-size: 0.9rem;
  font-weight: 450;
  color: var(--color-primario-claro);
  list-style-type: disc;
  padding-left: 30px;
  max-width: 580px;
}
.sub-seccion ul li {
  margin-bottom: 5px;
  line-height: 20px;
}
.sub-seccion .numero-seccion {
  font-family: var(--fuente-principal);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-secundario);
  padding-top: 30px;
  margin-bottom: 5px;
  border-top: 1px solid var(--color-primario-claro);
  line-height: 20px;
}
/*  TABLAS  */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
table th,
table td {
  border: 1px solid var(--color-primario-transparente);
  padding: 12px 15px;
  text-align: left;
}
table th {
  background-color: var(--color-primario);
  color: #ffffff;
  font-family: var(--fuente-principal);
  font-weight: 700;
  text-transform: uppercase;
}
table th:first-child {
  border-right: 1px solid var(--color-terciario);
}
table tr:nth-child(even) {
  background-color: var(--color-fondo);
}
td strong {
  font-family: var(--fuente-principal);
  font-weight: 700;
  color: var(--color-primario);
  text-transform: uppercase;
}
.subtitulo-tabla {
  text-transform: uppercase;
  font-family: var(--fuente-principal);
  font-weight: 600;
  color: var(--color-primario-claro);
}
.lista-tabla li {
  list-style: none;
  padding-left: 0px;
}
table ul .lista-tabla {
  padding-left: 10px;
}
table .rendimiento {
  font-family: var(--fuente-principal);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--color-primario);
  text-align: center;
}
/*  IMAGENES  */
.sub-seccion .img-diagrama{
  width: 100%;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4);
}
/*  CATEGORIAS RELACIONADAS   */
h3 {
  padding: 40px 0px 10px 0px;
  border-top: 1px solid var(--color-primario-transparente);
  font-family: var(--fuente-principal);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primario);
  margin-bottom: 15px;
  text-transform: uppercase;
}
.contenedor-tarjetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1300px;
  gap: 20px;
}
.tarjeta-producto {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4);
  width: 300px;
  max-height: 200px;
  transition: transform 0.2s ease;
}
.tarjeta-producto:hover {
  transform: translateY(-5px);
}
.tarjeta-producto:hover .texto-tarjeta {
  background-color: var(--color-secundario-transparente);
  border-top: 3px solid var(--color-secundario);
}
.tarjeta-producto a {
  text-decoration: none;
}
.imagen-tarjeta {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  overflow: hidden; /* Evita que la imagen se salga del contenedor */
}
.imagen-tarjeta img {
  width: auto;
  height: 150px;
  transition: transform 0.3s ease; /* Transición suave */
}
.texto-tarjeta {
  padding: 10px;
  text-align: center;
  border-radius: 0px 0px 15px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 3px solid var(--color-primario);
  transition: background-color 0.3s ease, border-top-color 0.3s ease;
}
.texto-tarjeta p {
  color: var(--color-primario);
  font-family: var(--fuente-principal);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  font-weight: 750;
  margin: 0;
}
.tarjeta-producto:hover .texto-tarjeta p {
  transition: color 0.3s ease;
  color: var(--color-secundario);
}
.tarjeta-producto:hover .imagen-tarjeta img {
  transform: scale(1.1); /* Aumenta el tamaño de la imagen */
}
@media (max-width: 820px) {
  main {
    width: 100%;
    padding-left: 0;
  }
  #titulo-descripcion {
    padding: 80px 20px 20px 20px;
  }
  .sub-seccion {
    padding: 10px 20px 60px 20px;
    max-width: 100%;
  }
}