/* Mujer de Fe · Recursos con el diseño de luz (26-10-2026): la portadilla, las guías como tarjetas de cristal sobre la
   noche (como los accesos de la portada: se inclinan hacia el ratón con su reflejo), los enlaces de confianza y las
   tarjetas del blog. */

/* ---------- Las guías, de noche ---------- */
.guias-noche {
  position: relative; margin-top: clamp(20px, 3vw, 40px); padding: clamp(80px, 10vw, 120px) 0;
  background: radial-gradient(ellipse at 50% 0%, #3A2238 0%, #241426 45%, var(--noche) 100%);
}
.guias-noche .titulo-seccion { color: #FBF1E2; }
.guias-noche .titulo-seccion .caligrafia { color: var(--oro-claro); text-shadow: 0 0 26px rgba(243, 212, 138, .5); }
.guias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); perspective: 1000px; }
.guia {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 34px 26px 26px; overflow: hidden;
  color: #FBF1E2; text-decoration: none;
  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;
}
.guia.activa { transition: transform .12s linear, box-shadow .5s, border-color .5s; }
.guia: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); }
.guia-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%);
}
.guia:hover .guia-reflejo { opacity: 1; }
.guia-icono { width: 54px; height: 54px; margin-bottom: 10px; color: var(--oro-claro); stroke-width: 1.2; filter: drop-shadow(0 0 8px rgba(243, 212, 138, .55)); }
.guia-titulo { font: 600 20px/1.3 var(--serif); }
.guia-texto { flex: 1; font-size: 15.5px; line-height: 1.5; color: rgba(248, 235, 217, .72); }
.guia-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); }
.guia-ir .icono { width: 16px; height: 16px; stroke-width: 2; transition: transform .4s var(--curva); }
.guia:hover .guia-ir .icono { transform: translateX(5px); }

/* ---------- Enlaces de confianza ---------- */
.enlaces-utiles { margin-top: clamp(70px, 9vw, 110px); }
.externos { counter-reset: externo; }
.externos li { position: relative; padding: 24px 0 22px 64px; border-bottom: 1px solid var(--borde); counter-increment: externo; }
.externos li::before {
  content: counter(externo); position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 400 30px/1 var(--caligrafia); color: var(--oro-hondo); box-shadow: inset 0 0 0 1.5px rgba(201, 161, 74, .55);
}
.externos a { display: inline-flex; align-items: center; gap: 8px; color: var(--chocolate); font: 600 19px var(--serif); text-decoration: none; background: linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1.5px no-repeat; transition: background-size .6s var(--curva), color .3s; }
.externos a .icono { width: 17px; height: 17px; color: var(--oro); }
.externos a:hover { background-size: 100% 1.5px; color: var(--rosa-fuerte); }
.externos p { margin: 6px 0 0; color: var(--gris); font-size: 16.5px; }

@media (max-width: 980px) {
  .guias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .guias { grid-template-columns: 1fr; }
  .externos li { padding-left: 56px; }
}