/* ====== CONTENEDOR / CABECERA ====== */
.catalogos{
  padding: 48px 0;
  background: #f5f7f6;
  font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.catalogos .container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.catalogos__header{
  text-align: center;
  margin-bottom: 28px;
}
.catalogos__header h1{
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 8px 0 6px;
}
.catalogos__lead{
  max-width: 760px;
  margin: 0 auto;
  color: #475569;
  font-size: .98rem;
}

/* ====== GRID ====== */
.grid-cards{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 26px;
}
@media (max-width: 1200px){ .grid-cards{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px){  .grid-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){  .grid-cards{ grid-template-columns: 1fr; } }

/* ====== CARD ====== */
.card-cat{
  background: #fff;
  border: 1px solid #e6ece9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(2,8,23,.06);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.card-cat:hover{
  transform: translateY(-4px);
  border-color: #dfe6e3;
  box-shadow: 0 10px 28px rgba(2,8,23,.10);
}

/* Portada: área alta y pareja para todos */
.card-cat__img{
  width: 100%;
  height: 240px;               /* tamaño consistente */
  object-fit: contain;         /* respeta el arte del catálogo */
  background: linear-gradient(180deg,#ffffff 0%, #f8fbf9 100%);
  display: block;
}

/* Cuerpo */
.card-cat__body{
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

/* Título */
.card-cat__title{
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  min-height: 2.6em;           /* evita saltos entre tarjetas */
  line-height: 1.3;
}

/* Botones */
.card-cat__btns{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
}

.btn-cat{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-cat:active{ transform: translateY(1px); }

/* Ver (oscuro suave) */
.btn-cat--ver{
  background: #1f2937;
  color: #fff;
}
.btn-cat--ver:hover{
  box-shadow: 0 8px 18px rgba(31,41,55,.25);
}

/* Descargar (verde FSI) */
.btn-cat--descargar{
  background: #00c853;           /* primario de tu sitio */
  color: #fff;
  border-color: #00c853;
}
.btn-cat--descargar:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(0,200,83,.25);
}

/* Meta (fecha / peso) al pie, alineado y limpio */
.card-cat__meta{
  margin-top: auto;              /* empuja meta al fondo para igualar alturas */
  padding-top: 12px;
  border-top: 1px solid #eef3f1;
  font-size: .92rem;
  color: #475569;
}
.card-cat__meta b{ color:#0f172a; }

/* ===== Catálogos – ajustes móviles bonitos ===== */
@media (max-width: 768px){
  .catalogos{
    padding: 22px 0 28px;
    background: #fff; /* limpio como el resto del sitio en móvil */
  }
  .catalogos .container{
    max-width: 100%;
    padding: 0 16px;
  }

  .catalogos__header{
    text-align: left;
    margin-bottom: 16px;
  }
  .catalogos__header h1{
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 8px 0 6px;
  }
  .catalogos__lead{
    font-size: .95rem;
    line-height: 1.55;
    color: #374151;
    margin: 0;
  }

/* Grid más respirado: 2 columnas en todo móvil */
.grid-cards{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 360px){
  .grid-cards{ grid-template-columns: 1fr; }
}


  /* Tarjetas compactas y táctiles */
  .card-cat{
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(2,8,23,.05);
  }

  /* Portada responsive por ancho de pantalla */
  .card-cat__img{
    height: 46vw;         /* alto relativo al viewport */
    min-height: 180px;    /* nunca muy chica */
    max-height: 260px;    /* ni excesiva */
    object-fit: contain;
    background: linear-gradient(180deg,#ffffff 0%, #f8fbf9 100%);
  }

  .card-cat__body{
    padding: 14px;
    gap: 10px;
  }

  .card-cat__title{
    font-size: 1rem;
    min-height: 0;        /* deja que fluya */
    text-align: left;
  }

  /* Botones apilados y full width: mejor diana táctil */
  .card-cat__btns{
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
  }
  .btn-cat{
    height: 44px;
    border-radius: 10px;
    width: 100%;
    font-size: .94rem;
  }

  .card-cat__meta{
    margin-top: 6px;
    padding-top: 10px;
    font-size: .9rem;
    line-height: 1.45;
  }
}

/* Pequeños refinamientos para pantallas MUY chicas */
@media (max-width: 360px){
  .btn-cat{ height: 42px; font-size: .9rem; }
  .card-cat__img{ min-height: 160px; }
}