/* =========================================================
   ANEXOS
========================================================= */

/* HERO */
.anexos-hero {
  position: relative;
  height: 803px;
  min-height: 803px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 212px;
  background-color: #006CA6;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  color: #ffffff;
}

.anexos-hero .hero-overlay {
  display: block;
}

.anexos-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1047px;
  text-align: center;
}

.anexos-hero-title {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

/* SECCIÓN */
.anexos-section {
  background: #ffffff;
  padding: 60px 200px 80px;
}

.anexos-container {
  max-width: 1040px;
  margin: 0 auto;
}

/* =====================================================
   GRID SUPERIOR — 4 columnas, 2 filas
   Imagen ocupa col 1–2, filas 1–2
   Cards 01-04 ocupan col 3-4, filas 1-2
====================================================== */
.anexos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 114px 114px;
  gap: 10px;
}

/* Imagen: col 1-2, filas 1-2 */
.anexos-img-wrap {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.anexos-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Cards 01-04: col 3-4, filas 1-2 (escopado a .anexos-grid para no afectar a .anexos-bottom-row) */
.anexos-grid .anexo-card:nth-child(2) { grid-column: 3; grid-row: 1; }
.anexos-grid .anexo-card:nth-child(3) { grid-column: 4; grid-row: 1; }
.anexos-grid .anexo-card:nth-child(4) { grid-column: 3; grid-row: 2; }
.anexos-grid .anexo-card:nth-child(5) { grid-column: 4; grid-row: 2; }

/* =====================================================
   FILA INFERIOR — 5 columnas iguales (05-09)
   Grid independiente para no afectar al bloque de arriba
====================================================== */
.anexos-bottom-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 114px;
  gap: 10px;
  margin-top: 10px;
}

/* =====================================================
   TARJETA
====================================================== */
.anexo-card {
  position: relative;
  background: #BBE1F4;
  border-radius: 10px;
  padding: 41px 11px 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.anexo-card:hover {
  background: #a8d8f0;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 108, 166, 0.18);
}

.anexo-num {
  position: absolute;
  top: -8px;
  left: 6px;
  font-size: 90px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  pointer-events: none;
  letter-spacing: -2px;
  transition: transform 0.2s ease;
}

.anexo-card:hover .anexo-num {
  transform: scale(1.05) translateY(-4px);
}

.anexo-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #006CA6;
  position: relative;
  z-index: 2;
}

.anexo-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 29px;
  height: 29px;
  border: 2px solid #006CA6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background 0.2s ease;
  z-index: 2;
}

.anexo-btn img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.anexo-card:hover .anexo-btn {
  background: #006CA6;
}

.anexo-card:hover .anexo-btn img {
  filter: brightness(0) invert(1);
}

/* =====================================================
   RESPONSIVE
====================================================== */
@media (max-width: 1200px) {
  .anexos-section { padding-left: 60px; padding-right: 60px; }
}

@media (max-width: 991px) {
  .anexos-hero { height: 300px; padding: 0 32px; }
  .anexos-section { padding: 50px 32px 60px; }

  /* Grid superior: imagen + 01-04 en 2 columnas */
  .anexos-grid { grid-template-columns: repeat(2, 1fr); }
  .anexos-img-wrap { grid-column: 1 / 3; grid-row: 1; max-height: 180px; }
  .anexos-grid .anexo-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .anexos-grid .anexo-card:nth-child(3) { grid-column: 2; grid-row: 2; }
  .anexos-grid .anexo-card:nth-child(4) { grid-column: 1; grid-row: 3; }
  .anexos-grid .anexo-card:nth-child(5) { grid-column: 2; grid-row: 3; }

  /* Fila inferior 05-09: 2 columnas, se reparten automáticamente */
  .anexos-bottom-row {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 114px);
  }
}

@media (max-width: 575px) {
  .anexos-section { padding: 40px 20px 50px; }
  .anexos-hero { height: 260px; padding: 0 20px; }
  .anexos-hero-title { font-size: 22px; }
  .anexo-num { font-size: 60px; }
}