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

:root {
  --bg: #07111f;
  --bg-soft: #0b1728;
  --card: #0d1b2d;
  --card-hover: #10233a;

  --line: rgba(143, 195, 255, 0.15);

  --blue: #8fc3ff;
  --blue-strong: #b7d8ff;

  --text: #f4f8ff;
  --muted: #9eafc3;

  --gold: #d9c28c;

  --shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.35);
}

body {
  background: #dbeeff;
  font-family: "Inter", sans-serif;
  color: #111827;
}


/* ========================================
   SECCIÓN PRINCIPAL
======================================== */

.publications-section {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(81, 142, 211, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(93, 154, 224, 0.12),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #06101d 0%,
      #081523 52%,
      #07111f 100%
    );

  padding: 100px 24px;

  isolation: isolate;
}


.publications-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px
    );

  background-size: 60px 60px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.8),
      transparent
    );

  z-index: -1;
}


.publications-container {
  width: min(1240px, 100%);
  margin: 0 auto;
}


/* ========================================
   ENCABEZADO
======================================== */

.publications-heading {
  max-width: 820px;
  margin-bottom: 52px;
}


.publications-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  color: var(--blue);

  text-transform: uppercase;

  letter-spacing: 0.24em;

  font-size: 0.72rem;
  font-weight: 600;

  margin-bottom: 18px;
}


.publications-eyebrow::before {
  content: "";

  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      transparent
    );
}


.publications-heading h2 {
  color: var(--text);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      7vw,
      5.4rem
    );

  line-height: 0.92;

  font-weight: 600;

  letter-spacing: -0.035em;

  margin-bottom: 22px;
}


.publications-heading p {
  color: var(--muted);

  max-width: 700px;

  font-size: 1rem;

  line-height: 1.85;
}


/* ========================================
   FILTROS
======================================== */

.publication-filters {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  padding-bottom: 25px;

  border-bottom:
    1px solid
    var(--line);

  margin-bottom: 38px;
}


.publication-filter {
  appearance: none;

  border:
    1px solid
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  color: #b8c7d9;

  border-radius: 999px;

  padding:
    11px 18px;

  font:
    600
    0.76rem/1
    "Inter",
    sans-serif;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  cursor: pointer;

  transition: 0.25s ease;
}


.publication-filter:hover,
.publication-filter.active {
  background: var(--blue);

  color: #06101d;

  border-color:
    var(--blue);

  box-shadow:
    0 9px 30px
    rgba(
      92,
      161,
      238,
      0.18
    );
}


/* ========================================
   GRID
======================================== */

.publications-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 22px;
}


/* ========================================
   TARJETAS
======================================== */

.publication-card {
  min-width: 0;

  border:
    1px solid
    var(--line);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.012)
    ),
    var(--card);

  box-shadow:
    var(--shadow);

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}


.publication-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(
      143,
      195,
      255,
      0.42
    );

  background:
    var(--card-hover);
}


.publication-card[hidden] {
  display: none;
}


/* ========================================
   IMAGEN
======================================== */

.publication-cover {
  position: relative;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #101c2a;
}


.publication-cover img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 0.6s ease;
}


.publication-card:hover
.publication-cover img {
  transform:
    scale(1.035);
}


.publication-cover::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(3, 9, 17, 0.75),
      transparent 48%
    );

  pointer-events: none;
}


/* ========================================
   TIPO DE PUBLICACIÓN
======================================== */

.publication-type {
  position: absolute;

  left: 18px;
  bottom: 17px;

  z-index: 2;

  background:
    rgba(
      5,
      16,
      28,
      0.78
    );

  backdrop-filter:
    blur(12px);

  color: #dbeaff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  padding:
    8px 11px;

  font-size: 0.67rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  font-weight: 600;
}


/* ========================================
   CONTENIDO
======================================== */

.publication-content {
  padding:
    27px 25px 26px;
}


.publication-kicker {
  display: block;

  color:
    var(--gold);

  font-size:
    0.68rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.16em;

  font-weight:
    600;

  margin-bottom:
    11px;
}


.publication-content h3 {
  color:
    var(--text);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    2rem;

  line-height:
    1.05;

  font-weight:
    600;

  margin-bottom:
    13px;
}


.publication-description {
  color:
    var(--muted);

  font-size:
    0.91rem;

  line-height:
    1.72;

  margin-bottom:
    22px;

  min-height:
    78px;
}


/* ========================================
   INFORMACIÓN
======================================== */

.publication-meta {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  border-top:
    1px solid
    var(--line);

  padding-top:
    18px;

  color:
    #8394a8;

  font-size:
    0.76rem;

  line-height:
    1.5;
}


.publication-meta strong {
  color:
    #b7c9dc;

  font-weight:
    500;
}


.publication-dot {
  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    var(--blue);

  opacity:
    0.7;
}


/* ========================================
   ENLACES
======================================== */

.publication-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--blue-strong);

  text-decoration:
    none;

  font-size:
    0.78rem;

  font-weight:
    600;

  text-transform:
    uppercase;

  letter-spacing:
    0.11em;

  margin-top:
    22px;

  transition:
    gap 0.25s ease,
    color 0.25s ease;
}


.publication-link:hover {
  gap:
    15px;

  color:
    #ffffff;
}


.publication-link span {
  font-size:
    1rem;

  transform:
    translateY(-1px);
}


/* ========================================
   PIE
======================================== */

.publications-footer {
  margin-top:
    48px;

  padding-top:
    28px;

  border-top:
    1px solid
    var(--line);

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    25px;

  flex-wrap:
    wrap;
}


.publications-footer p {
  max-width:
    650px;

  color:
    #8092a7;

  font-size:
    0.83rem;

  line-height:
    1.7;
}


.catalog-button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  color:
    #07111f;

  background:
    linear-gradient(
      135deg,
      #d6eaff,
      #8fc3ff
    );

  text-decoration:
    none;

  font-size:
    0.75rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.12em;

  font-weight:
    700;

  padding:
    14px 20px;

  transition:
    0.25s ease;
}


.catalog-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 15px 35px
    rgba(
      91,
      161,
      239,
      0.2
    );
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 980px) {

  .publications-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* ========================================
   MÓVIL
======================================== */

@media (max-width: 640px) {

  .publications-section {
    padding:
      72px 18px;
  }


  .publications-grid {
    grid-template-columns:
      1fr;
  }


  .publications-heading h2 {
    font-size:
      3.45rem;
  }


  .publication-description {
    min-height:
      auto;
  }

}