/* Mujer de Fe · portada · 3. Los cinco accesos: tarjetas de cristal oscuro sobre las estrellas del lienzo, con borde de oro.
   Se inclinan en 3D hacia el ratón (--rx, --ry) con un reflejo que lo sigue (--mx, --my); los iconos se dibujan solos. */

.accesos { position: relative; z-index: 2; padding: clamp(40px, 6vw, 90px) var(--margen) clamp(80px, 11vw, 160px); background: var(--noche); }
.con-3d .accesos { background: none; }

.seccion-cabecera { position: relative; max-width: 900px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.seccion-cabecera .antetitulo::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.accesos .titulo-seccion { color: #FBF1E2; }
.accesos .titulo-seccion .caligrafia { color: var(--oro-claro); text-shadow: 0 0 26px rgba(243, 212, 138, .5); }

.accesos-lista {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px);
  max-width: 1320px; margin: 0 auto; perspective: 1000px;
}
.acceso {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  padding: 40px 18px 30px; overflow: hidden; text-align: center; text-decoration: none; color: #FBF1E2;
  background: linear-gradient(160deg, rgba(255, 235, 200, .1), rgba(255, 235, 200, .03));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(243, 212, 138, .28); border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12), 0 30px 60px -30px rgba(0, 0, 0, .8);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--curva), box-shadow .5s, border-color .5s;
}
.acceso.activa { transition: transform .12s linear, box-shadow .5s, border-color .5s; }
.acceso:hover { border-color: rgba(243, 212, 138, .7); box-shadow: inset 0 1px 0 rgba(255, 240, 210, .2), 0 0 50px -10px rgba(243, 212, 138, .35), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.acceso-reflejo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle 200px at var(--mx) var(--my), rgba(255, 230, 180, .3), rgba(233, 121, 146, .08) 45%, transparent 70%);
}
.acceso:hover .acceso-reflejo { opacity: 1; }
.acceso-icono {
  width: 76px; height: 76px; margin-bottom: 14px; fill: none; stroke: var(--oro-claro); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(243, 212, 138, .55));
}
.acceso-icono path, .acceso-icono circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.efectos .acceso-icono path, .efectos .acceso-icono circle { stroke-dashoffset: 1; }
.acceso-titulo { font: 600 21px/1.25 var(--serif); }
.acceso-texto { max-width: 12em; font-size: 15.5px; line-height: 1.45; color: rgba(248, 235, 217, .7); }
.acceso-flecha {
  width: 22px; height: 22px; margin-top: auto; padding-top: 10px; box-sizing: content-box;
  fill: none; stroke: var(--oro-claro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--curva);
}
.acceso:hover .acceso-flecha { opacity: 1; transform: none; }

/* la entrada se anima en el li: la tarjeta ya usa transform para inclinarse */
.efectos .accesos-lista li { opacity: 0; }

@media (max-width: 1000px) {
  .accesos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .accesos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .accesos-lista li:last-child { grid-column: 1 / -1; }
  .acceso { padding: 26px 12px 22px; border-radius: 18px; }
  .acceso-icono { width: 54px; height: 54px; margin-bottom: 8px; }
  .acceso-titulo { font-size: 18px; }
  .acceso-texto { font-size: 14px; }
  .acceso-flecha { display: none; }
}