/* =========================================
   Utilidades
   ========================================= */
.no-seleccionar {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 y 11 */
  user-select: none; /* Sintaxis estándar */
}

/* =========================================
   Contenedor Principal (El Marco con Patrón)
   ========================================= */
.grid {
  display: flex;
  flex-direction: column;
  width: 75%;
  max-width: 1200px;
  margin: 40px auto;

  /* Aquí mantenemos tu fondo de logos repetido */
  background-image: url("../assets/LogoTVC.webp");
  background-repeat: repeat;
  /* Reduje un poco el tamaño para que se vea como una textura sutil */
  background-size: 300px;
  background-color: var(--gris-claro, #f4f6f9);

  /* Agregamos padding para que el patrón se vea como un marco alrededor del artículo */
  padding: 40px;
  border-radius: 30px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05); /* Sombra interna sutil */

  /* =========================================
     El Artículo (La Tarjeta Blanca de Lectura)
     ========================================= */
  .articulo {
    background-color: #ffffff88; /* Fondo sólido para garantizar la lectura */
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* Sombra que lo hace flotar sobre el patrón */

    /* Imagen Principal */
    .thumb {
      width: 100%;
      margin-bottom: 30px;
      overflow: hidden;
      /* Un borde redondeado más uniforme y moderno */
      border-radius: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

      img {
        width: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
        transform: scale(1.02);

        &:hover {
          transform: scale(1); /* Efecto zoom inverso suave */
        }
      }
    }

    /* Título del Blog */
    .titulo {
      margin-bottom: 20px;
      /* CUIDADO: Los títulos no deben ser justificados. Left es más legible y editorial */
      text-align: left;
      font-size: clamp(2rem, 3.5vw, 3.5rem);
      font-weight: 800;
      color: #1a1a1a;
      line-height: 1.2;
      letter-spacing: -1px;
    }

    /* Meta Datos (Categorías y Fecha) */
    .meta {
      display: flex;
      justify-content: space-between; /* Categorías a la izquierda, fecha a la derecha */
      align-items: center;
      margin-bottom: 40px;
      padding-bottom: 20px;
      border-bottom: 2px solid var(--gris-claro, #eaeaea); /* Reemplaza el ::after anterior */

      .categorias {
        ul {
          display: flex;
          gap: 12px;
          list-style: none;
          padding: 0;
          margin: 0;

          li a {
            /* Estilo de etiquetas (Pills) para las categorías */
            display: inline-block;
            background-color: rgba(
              92,
              124,
              250,
              0.1
            ); /* Azul muy transparente */
            color: var(--secundario, #5c7cfa); /* Azul de tu marca */
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;

            &:hover {
              background-color: var(--secundario, #5c7cfa);
              color: #ffffff;
            }
          }
        }
      }

      .fecha {
        color: #888;
        font-weight: 500;
        font-size: 0.95rem;
        margin: 0;
      }
    }

    /* Cuerpo del Texto */
    .texto {
      color: #333333; /* Un gris muy oscuro es mejor para lectura larga que negro puro (#000) */
      font-size: 1.1rem;

      p {
        margin-bottom: 25px;
        text-align: left; /* En web, alinear a la izquierda evita los "ríos de espacio blanco" del justificado */
        line-height: 1.8; /* Excelente interlineado para lectura */
        text-align: justify;
      }

      p:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* =========================================
   Responsive Design
   ========================================= */
@media (max-width: 992px) {
  .grid {
    width: 90%;
    padding: 25px; /* Menos padding del patrón en tablets */

    .articulo {
      padding: 30px;
    }
  }
}

@media (max-width: 768px) {
  .grid {
    width: 95%;
    padding: 15px;
    margin: 20px auto;

    .articulo {
      padding: 20px;

      .meta {
        flex-direction: column; /* Apila las categorías y la fecha */
        align-items: flex-start;
        gap: 15px;
      }

      .titulo {
        font-size: 1.8rem;
      }
    }
  }
}