/* ──────────────────────────────────────────────────────────
   accesos-v2.css — Cards de acceso con foto + gradiente
   ────────────────────────────────────────────────────────── */

.accesos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-block: var(--space-2xl);
}
@media (max-width: 1024px) { .accesos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .accesos { grid-template-columns: 1fr; } }

/* Card base — más compacta y proporcionada */
.acceso {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;                 /* antes 240 — más bajo y elegante */
  padding: var(--space-lg);          /* antes var(--space-xl) */
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.acceso:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 40px -20px rgba(11,37,69,0.4);
  color: #fff;
}

/* Imagen de fondo con zoom suave al hover */
.acceso__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 2s var(--ease-out), filter 600ms ease;
  filter: saturate(0.85);
}
.acceso:hover .acceso__bg {
  transform: scale(1.08);
  filter: saturate(1);
}

/* Overlay gradiente — color coordinado por variante */
.acceso__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 400ms ease;
}
.acceso--1 .acceso__overlay {
  background:
    linear-gradient(135deg,
      rgba(6,24,51,0.95) 0%,
      rgba(11,37,69,0.85) 50%,
      rgba(30,58,107,0.65) 100%);
}
.acceso--2 .acceso__overlay {
  background:
    linear-gradient(135deg,
      rgba(168,32,31,0.9) 0%,
      rgba(214,40,40,0.82) 60%,
      rgba(180,30,30,0.6) 100%);
}
.acceso--3 .acceso__overlay {
  background:
    linear-gradient(135deg,
      rgba(35,35,55,0.92) 0%,
      rgba(57,57,78,0.82) 60%,
      rgba(75,75,108,0.6) 100%);
}
.acceso--4 .acceso__overlay {
  background:
    linear-gradient(135deg,
      rgba(160,128,0,0.92) 0%,
      rgba(201,165,0,0.8) 55%,
      rgba(244,200,29,0.6) 100%);
}
.acceso:hover .acceso__overlay { opacity: 0.9; }

/* Contenido (siempre encima) */
.acceso__tag,
.acceso__title,
.acceso__desc,
.acceso__arrow {
  position: relative;
  z-index: 2;
}

.acceso__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: auto;
  width: max-content;
  align-self: flex-start;
}

.acceso--4 .acceso__tag {
  color: rgba(20,20,30,0.85);
  background: rgba(255,255,255,0.4);
  border-color: rgba(20,20,30,0.18);
}

.acceso__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;                /* antes 1.45 — más compacto */
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
  margin: var(--space-sm) 0 4px;     /* antes md/6 */
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.acceso--4 .acceso__title {
  color: #1a1a2a;
  text-shadow: 0 1px 8px rgba(255,255,255,0.3);
}

.acceso__desc {
  font-family: var(--font-display);
  font-size: 0.78rem;                /* antes 0.82 */
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-sm);    /* antes md */
  font-weight: 500;
}
.acceso--4 .acceso__desc {
  color: rgba(20,20,30,0.78);
}

.acceso__arrow {
  width: 34px;                       /* antes 40 — círculo más pequeño */
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  display: grid;
  place-items: center;
  color: #fff;
  align-self: flex-end;
  margin-top: 4px;                   /* antes var(--space-sm) */
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.acceso--4 .acceso__arrow {
  background: rgba(20,20,30,0.2);
  border-color: rgba(20,20,30,0.3);
  color: #1a1a2a;
}
.acceso:hover .acceso__arrow {
  background: var(--highlight);
  border-color: var(--highlight);
  color: var(--ink);
  transform: translate(3px, -3px) rotate(-45deg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .acceso { min-height: 170px; padding: var(--space-md); }
  .acceso__title { font-size: 1.1rem; }
  .acceso__desc { font-size: 0.74rem; }
  .acceso__arrow { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  .acceso { min-height: 155px; }
  .acceso__title { font-size: 1.05rem; margin-top: 6px; }
}