* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

header h2 {
    font-size: 1em;
    margin-bottom: 40px;
    text-align: left;
}
h2 {
    text-align: left;
    width: 70%; /* Igual que la imagen */
    max-width: 900px;
    margin: 0 auto 30px auto; /* Centra el H2 en el contenedor y añade espacio debajo */
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(412px, 1fr)); /* 4 columnas a 1600px */
    gap: 20px;
    max-width: 100%;
}

.grid-item {
    text-align: center; /* Alinea los títulos al centro */
    margin-bottom: 20px; /* Espacio de al menos 20px */
}

.grid-item h2 {
    color: white; /* Cambia el color aquí */
    margin-top: 20px; /* Espacio entre la imagen y el título */
    font-size: 18px;
}

/* Solo fuera del catálogo (por ejemplo, en listados internos) */
:not(.catalog) .grid-item img {
  width: 100%;
  height: auto;
  max-width: 412px;
  max-height: 215px;
  border-radius: 15px;
  object-fit: cover;
}

.grid-item h2 {
    color: white;
    margin-top: 10px; /* Espacio entre la imagen y el título */
    font-size: 18px;
}

body {
    background-color: black;
    color: white;
    text-align: center;
}

h1 {
    font-weight: normal; /* Evita que el h1 sea negrita */
    font-size: 2em;
    margin: 20px 0;
}

/* Make the page responsive */
@media (max-width: 1600px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

.spacer-100 {
    height: 100px;
    margin: 0;
}

.logo {
    width: 300px; /* Ajusta este valor para cambiar el tamaño */
    height: auto; /* Mantiene la proporción del logotipo */
    margin: 0 auto; /* Centra el logotipo */
    display: block;
}

.spacer-50 {
    height: 50px;
    margin: 0;
}

.spacer-30 {
    height: 30px;
    margin: 0;
}
/* Imagen principal dentro de una inflexión */
.main-image {
  display: block;
  width: 70%;
  max-width: 900px;      /* ← ancho máximo compartido */
  margin: 0 auto;
  border-radius: 20px;
  object-fit: cover;
}

/* Columna de lectura (600px, justificada, 1.5 líneas) */
.container .description{
  width:100%;
  max-width:600px;
  margin:30px auto 0;   /* centrada como bloque */
  text-align:justify;
  line-height:1.5;
  padding:0 10px;       /* pequeño respiro lateral en móviles */
  font-size:1rem;
}

/* Párrafos interiores con espacio y sangría */
.container .description p{
  margin-bottom:1.1em;
  text-indent:1em;
}
.container .description p:first-child{
  text-indent:0;        /* sin sangría en el primer párrafo */
}
a {
    color: #fff; /* Texto en blanco */
    font-family: 'Lato', sans-serif; /* Fuente Lato */
    text-decoration: none; /* Elimina el subrayado por defecto */
}

a:hover {
    text-decoration: underline; /* Opcional: subrayado al pasar el ratón */
}
.small-text-block {
    width: 100%;
    max-width: 600px; /* Máximo ancho de 500px */
    margin: 0 auto; /* Centra el bloque */
    text-align: justify; /* Texto justificado */
    padding: 0 20px;
    line-height: 1.8;
}

/* ===== Rejilla SOLO para la portada (estable en desktop, fluida en móvil) ===== */
:root{
  --card: 412px;
  --gap: 20px;
  --pad: 20px;
}

/* Contenedor portada */
.catalog{
  max-width: calc(3*var(--card) + 2*var(--gap) + 2*var(--pad)); /* 1316px */
  margin: 0 auto;
  padding: 20px;
}

/* Grid escritorio: 3 columnas fijas */
.catalog .grid{
  display:grid;
  grid-template-columns: repeat(3, var(--card));
  gap: var(--gap);
  justify-content: center;
}

/* Tarjeta escritorio: ancho fijo + altura fija (no se deforma) */
.catalog .grid-item img{
  width: var(--card);
  height: 215px;
  border-radius: 15px;
  object-fit: cover;
  display:block;
  margin: 0 auto;
}
.catalog .grid-item h2{
  color:#fff;
  margin-top:10px;
  font-size:18px;
  text-align:left;
  width: var(--card);
  max-width: var(--card);
  margin-left:auto;margin-right:auto;
}

/* 3 → 2 columnas (fijas, centradas) */
@media (max-width: 1316px){
  .catalog{
    max-width: calc(2*var(--card) + 1*var(--gap) + 2*var(--pad)); /* 884px */
  }
  .catalog .grid{
    grid-template-columns: repeat(2, var(--card));
  }
}

/* 2 → 1 columna (fluida en móvil; nada se corta) */
@media (max-width: 884px){
  .catalog{
    max-width: 100%;
    padding: 0 20px;  /* margen lateral en móvil */
  }
  .catalog .grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .catalog .grid-item img{
    width: 100%;
    max-width: none;
    height: auto;     /* aquí sí: alto fluido para móvil */
  }
  .catalog .grid-item h2{
    width: 100%;
    max-width: 100%;
  }
}
/* ===== Header + menú (común a todas las páginas) ===== */
.site-header {
  text-align: center;
  margin-top: 60px;     /* espacio por arriba del header */
}
.main-nav {
  display: flex;
  gap: 40px;             /* separación entre enlaces del menú */
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;   /* espacio entre menú y logo */
}
.logo-wrap {
  margin-top: 0;
  margin-bottom: 0px;    /* espacio entre logo y título/texto */
}
/* .logo ya está definido arriba; si quieres otro tamaño aquí, cámbialo */

/* ===== Texto introductorio debajo del logo ===== */
.intro-text {
  max-width: 600px;            /* límite máximo de ancho */
  margin: 60px auto 40px auto; /* espacio arriba y abajo */
  padding: 0 20px;             /* margen interno lateral mínimo */
  text-align: center;
  line-height: 1.8;
  font-size: 18px;
  color: #ccc;
  font-family: 'Lato', sans-serif;
}

.intro-text strong {
  color: #fff;
  font-weight: 600;
}
.main-header {
  display: flex;
  flex-direction: column; /* logo arriba, menú debajo */
  align-items: center;
  justify-content: center;
  padding-top: 40px; /* espacio arriba del logo */
}

.main-header .main-nav {
  margin-top: 20px; /* espacio entre logo y menú */
}