/* Variables de color para verde sage */
:root {
  --greenSage: #A8CBB9;
  --greenSageDark: #6B8C63;
  --greenSageLight: #E0E8D3;
  --greenSageDarker: #3A4C40;
  --greenAccent: #7D9A75;
  --white: #ffffff;
  --darkGray: #333333;
  --gray: #777777;
  --blue: #007BFF;
  --helvetica: 'Helvetica', sans-serif;
  --helveticaNeue: 'Helvetica Neue', sans-serif;
  --lightGreen: #f3f9f3; /* Fondo suave más claro */
}

/* Importar fuente Open Sans desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

/* BASE RULES */
html {
  font-size: 100%;
}

/* Fondo con textura de tela sutil */
body {
  background: var(--lightGreen);
  background-image: url('https://www.transparenttextures.com/patterns/linen.png'); /* Textura de lino sutil */
  background-repeat: repeat; /* Repite el patrón suavemente */
  background-size: 120px 120px; /* Ajusta el tamaño del patrón para que sea muy sutil */
  font: 18px/1.6 var(--helvetica);
  color: var(--darkGray); /* Texto oscuro para mejor contraste */
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  max-width: 740px;
  padding: 0 10px;
  width: 100%;
}

/* Estilo para los subtítulos de "Circuito Simple" y "Ackerman" */
h2.circuito-titulo {
  color: #000000; /* Negro */
  text-decoration: underline; /* Subrayado */
  text-decoration-skip-ink: none; /* Evitar que la primera letra se subraye */
}

/* --- Otros estilos --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--helveticaNeue);
  color: var(--greenSageDark); /* Color para los títulos generales */
  font-weight: bold;
  line-height: 1.7;
  margin: 1em 0 15px;
  padding: 0;
}

h1 {
  font-size: 30px; /* Aumentar tamaño de h1 */
}

h2 {
  font-size: 24px; /* Aumentar tamaño de h2 */
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
  color: var(--greenSage); /* Un verde suave para h4 */
}

p {
  margin: 15px 0;
}

a {
  color: var(--greenAccent); /* Enlaces en verde suave */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

a:hover, a:active {
  color: var(--greenSageDark); /* Enlaces en verde más oscuro al hacer hover */
  transform: scale(1.05); /* Efecto de ampliación suave */
}

ul, ol {
  margin: 15px 0;
  padding-left: 30px;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ol ul, ul ol, ul ul, ol ol {
  margin: 0;
}

ul ul, ol ul {
  list-style-type: circle;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: bold;
}

img {
  max-width: 100%;
}

.gmnoprint img {
  max-width: none;
}

.date {
  font-style: italic;
  color: var(--greenSage); /* Fecha en verde suave */
}

::-moz-selection {
  color: var(--greenSageDark);
  background: var(--greenSageLight);
}

::selection {
  color: var(--greenSageDark);
  background: var(--greenSageLight);
}

/* --- Cabecera --- */
header {
  background-color: #d8e7dc; /* Fondo suave y claro */
  padding: 15px 20px; /* Reducir el padding para hacerla más estrecha */
  text-align: left; /* Alineación a la izquierda */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1); /* Sombra suave */
  margin-bottom: 30px; /* Deja un espacio entre la cabecera y el post */
  background-image: url('https://www.transparenttextures.com/patterns/abstract-squares.png'); /* Añadir patrón de fondo */
  background-size: cover; /* Asegura que el patrón cubra todo el fondo */
}

/* Estilo para la imagen de VR VISION ROBÓTICA (Avatar) */
header .site-avatar {
  width: 90px; /* Tamaño reducido de la imagen */
  height: 90px;
  margin-right: 20px; /* Espacio entre la imagen y el texto */
  border-radius: 50%; /* Redondear la imagen */
  border: 4px solid var(--greenAccent); /* Borde suave en color verde */
  overflow: hidden; /* Asegura que la imagen no sobresalga */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Sombra más suave */
  float: left; /* Alineación a la izquierda */
  transition: all 0.3s ease; /* Transición suave para efectos de hover */
}

/* Efecto cuando el ratón pasa por encima */
header .site-avatar:hover {
  border: 4px solid var(--greenSageDark); /* Cambio de color del borde a un verde más oscuro */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); /* Aumentar la sombra para dar profundidad */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño de la imagen al hacer hover */
}

/* Título y nombre */
.site-name {
  font-family: 'Helvetica', sans-serif;
  font-size: 28px; /* Tamaño adecuado */
  color: #000000; /* Nombre en color negro */
  font-weight: 700;
  letter-spacing: 1px; /* Más espaciado entre las letras para dar elegancia */
  margin-bottom: 10px;
  text-transform: uppercase; /* Convertir en mayúsculas para un toque moderno */
}

/* Descripción */
.site-description {
  font-family: 'Helvetica', sans-serif;
  font-size: 16px; /* Tamaño pequeño */
  color: #000000; /* Descripción en un verde suave */
  margin-top: 10px;
  font-weight: 300;
  letter-spacing: 0.5px; /* Ligero espaciado para un look más moderno */
}

/* Enlaces de la cabecera */
nav a {
  color: var(--greenSageDarker); /* Enlaces en verde oscuro */
  font-size: 18px;
  font-family: 'Helvetica', sans-serif;
  text-decoration: none;
  margin: 0 10px;
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease; /* Transición combinada */
}

nav a:hover {
  color: var(--greenSageDark); /* Cambio de color a un verde más oscuro */
  text-decoration: underline; /* Subrayado al pasar el ratón */
  transform: scale(1.05);
}

nav a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--greenAccent); /* Usar el verde como color de la línea */
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

nav a:hover::before {
  transform: scaleX(1); /* Aparece la línea al hacer hover */
}

/* --- Post --- */
.posts > .post {
  padding: 20px;
  background-color: var(--white); /* Fondo blanco para los posts */
  border: 2px solid #d8e7dc; /* Usar el mismo color de la cabecera para el borde */
  margin-bottom: 20px;
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  margin-top: 20px; /* Espacio entre el post y la cabecera */
}

.post h1 {
  font-family: 'Open Sans', sans-serif; /* Fuente Open Sans */
  font-size: 32px; /* Aumentar tamaño del título */
  color: #000000; /* Color negro */
  font-weight: 700; /* Peso en negrita */
  margin-bottom: 15px;
  letter-spacing: 0.5px; /* Espaciado entre letras para mayor claridad */
}

.read-more {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 25px;
  background-color: var(--greenSageDark);
  color: var(--white);
  text-align: center;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.read-more:hover {
  background-color: var(--greenAccent); /* Hover con verde más oscuro */
}

/* Estilo para la imagen de miniatura de los posts (en la portada) */
.post-thumbnail {
  width: 100%;
  height: 250px;  /* Ajustamos la altura para que sea más uniforme */
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 10px; /* Bordes redondeados para las miniaturas */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta la imagen para que ocupe todo el contenedor */
  object-position: center; /* Centra la imagen */
  border-radius: 10px;
}


/* --- Cambios en el diseño de las publicaciones --- */
.posts {
  display: flex;  /* Usamos flex para que se coloquen en una sola columna */
  flex-direction: column;  /* Asegura que se apilen uno encima del otro */
  gap: 10px;  /* Añade espacio entre los posts */
  margin: 0;
  padding: 20px;
}

.post {
  background-color: var(--white);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post:hover {
  transform: scale(1.05); /* Aumenta el tamaño del post al pasar el ratón */
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

/* --- Footer (Pie de Página) --- */
footer {
  background-color: var(--greenSageLight);
  padding: 20px 0;
  text-align: center;
}

/* Ajustar las imágenes para que ocupen más parte del cuadro */
.post-thumbnail {
  width: 100%;
  height: 250px; /* Aumentamos la altura para que la imagen sea más grande */
  overflow: hidden;
  margin-bottom: 15px; /* Reducimos el margen inferior */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta la imagen para que ocupe todo el contenedor */
  object-position: center; /* Centra la imagen */
  border-radius: 10px;
}

/* Estilo de cada post */
.post {
  background-color: var(--white);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

/* --- Responsividad --- */
@media (max-width: 768px) {
  .posts {
    grid-template-columns: 1fr;  /* En pantallas pequeñas, una columna */
  }

  .post-thumbnail {
    height: 150px;  /* Ajustar la altura de la imagen en pantallas pequeñas */
  }
}