/* Catedral San Juan Bautista · Tarjetas devocionales editoriales
   Fondo marfil, grano de papel casi imperceptible y motivos religiosos de línea.
   Intervención exclusiva sobre las categorías de /oraciones.php. */
.prayer-topics{gap:18px}
.prayer-topic{
  background:#fffefa;
  border:1px solid rgba(26,79,106,.14);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(27,53,66,.045);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.prayer-topic::before{
  left:20px;right:auto;width:57px;height:1px;
  background:linear-gradient(90deg,#bba078,rgba(187,160,120,0));
}
.prayer-topic:hover{
  transform:translateY(-3px);
  border-color:rgba(31,89,117,.26);
  box-shadow:0 15px 32px rgba(27,53,66,.095);
}
.prayer-topic__summary{
  position:relative;isolation:isolate;
  min-height:130px;
  padding:22px 17px 19px;
  background:
    linear-gradient(105deg,rgba(255,253,248,.99),rgba(249,246,239,.96)),
    #fbf8f1;
  border-bottom:1px solid rgba(22,77,108,.085);
}
/* Granulado muy tenue, para simular papel y evitar una superficie artificial. */
.prayer-topic__summary::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(rgba(70,65,56,.16) .55px,transparent .68px),
    radial-gradient(rgba(40,82,99,.09) .55px,transparent .7px);
  background-size:15px 17px,23px 21px;
  background-position:0 0,7px 5px;
  opacity:.18;
}
.prayer-topic__summary::after{
  content:"";position:absolute;right:-14px;top:-18px;
  width:147px;height:160px;pointer-events:none;z-index:-1;
  background:var(--pr-topic-ornament) center/contain no-repeat;
  opacity:.17;
}
.prayer-topic:nth-child(1),
.prayer-topic:nth-child(5){--pr-topic-ornament:url('../img/oraciones-trazo-resplandor.svg')}
.prayer-topic:nth-child(2),
.prayer-topic:nth-child(8){--pr-topic-ornament:url('../img/oraciones-trazo-arco.svg')}
.prayer-topic:nth-child(3),
.prayer-topic:nth-child(4){--pr-topic-ornament:url('../img/oraciones-trazo-espigas.svg')}
.prayer-topic:nth-child(6),
.prayer-topic:nth-child(7){--pr-topic-ornament:url('../img/oraciones-trazo-rosario.svg')}
.prayer-topic__icon{
  flex:0 0 38px;width:38px;height:38px;
  border-radius:11px;
  background:rgba(255,255,252,.82);
  border:1px solid rgba(26,88,119,.18);
  box-shadow:none;
  color:#155374;
}
.prayer-topic__icon svg{width:18px;height:18px;stroke-width:1.5}
.prayer-topic__heading small{color:#466e81;font-size:8px;letter-spacing:.16em}
.prayer-topic__heading strong{
  color:#302a23;
  font-size:clamp(27px,2.5vw,33px);
  font-weight:400;
  letter-spacing:-.028em;
  margin-top:5px;
}
.prayer-topic__subtitle{color:#6d706c;margin-top:8px;line-height:1.44}
.prayer-topic__list{margin:0 20px 13px;padding-top:8px}
.prayer-topic__item{
  min-height:45px;padding:10px 0;
  border-bottom:1px solid rgba(24,80,104,.075);
  color:#3b3832;
}
.prayer-topic__item:hover{color:#155273;padding-left:4px}
.prayer-topic__item-copy b{font-weight:500;font-size:12px;line-height:1.45}
.prayer-topic__arrow{
  border:0;background:transparent;box-shadow:none;
  width:22px;height:24px;border-radius:0;
  font-size:17px;color:#1a6486;
}
.prayer-topic__item:hover .prayer-topic__arrow{background:transparent}
@media(max-width:1120px){
  .prayer-topics{gap:15px}
}
@media(max-width:700px){
  .prayer-topics{gap:12px}
  .prayer-topic{border-radius:15px}
  .prayer-topic:hover{transform:none}
  .prayer-topic__summary{min-height:90px;padding:15px 16px;gap:12px}
  .prayer-topic__summary::after{width:108px;height:118px;right:-12px;top:-14px;opacity:.145}
  .prayer-topic__icon{flex-basis:36px;width:36px;height:36px;border-radius:10px}
  .prayer-topic__heading strong{font-size:29px;margin-top:4px}
  .prayer-topic__subtitle{font-size:10px;margin-top:5px}
  .prayer-topic__list{margin:0 17px 10px;padding-top:5px}
  .prayer-topic__item{min-height:43px;padding:9px 0}
  .prayer-topic__toggle{font-size:21px;color:#235f7d}
}
@media(prefers-reduced-motion:reduce){
  .prayer-topic{transition:none!important}
}


/* Sello iconografico refinado · 2026-11-05 */
/* Refuerza los iconos existentes sin añadir ilustraciones ni fondos cargados. */
.prayer-topic__icon {
  position: relative;
  isolation: isolate;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(210, 189, 147, .78);
  background: linear-gradient(145deg, #185c78, #123d5a);
  color: #fffaf1;
  box-shadow: 0 0 0 4px rgba(25, 91, 119, .055),
              0 5px 14px rgba(12, 47, 65, .095);
  transition: transform .22s ease, box-shadow .22s ease;
}
.prayer-topic__icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.45;
}
.prayer-topic__icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fffdf8;
  background: #c1a575;
  box-sizing: content-box;
}
@media (hover: hover) {
  .prayer-topic:hover .prayer-topic__icon {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(25, 91, 119, .07),
                0 8px 17px rgba(12, 47, 65, .14);
  }
}
@media (max-width: 700px) {
  .prayer-topic__icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
  }
  .prayer-topic__icon svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .prayer-topic__icon { transition: none; }
}


/* Catedral San Juan Bautista · filo dorado editorial · noviembre 2026
   Detalle delicado, sin borde amarillo intenso ni cajas pesadas. */
.prayer-topic {
  border: 1px solid rgba(177, 146, 96, .52);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 252, .73),
    0 9px 24px rgba(25, 55, 74, .055);
}
.prayer-topic::before {
  width: 78px;
  height: 1px;
  background: linear-gradient(90deg, rgba(173, 131, 68, .92), rgba(206, 176, 119, .48), transparent);
}
.prayer-topic__summary {
  border-bottom: 1px solid rgba(177, 146, 96, .18);
}
@media (hover: hover) and (pointer: fine) {
  .prayer-topic:hover {
    border-color: rgba(166, 128, 72, .78);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 252, .78),
      0 15px 30px rgba(25, 55, 74, .095);
  }
}
@media (max-width: 700px) {
  .prayer-topic {
    border-color: rgba(177, 146, 96, .48);
  }
}


/* Navegación delicada en cada oración · 06/11/2026
   Reemplaza la flecha diagonal por un chevrón lineal. */
.prayer-topic__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(179, 150, 106, .34);
  border-radius: 50%;
  background: rgba(255, 253, 247, .76);
  color: #205675;
  box-shadow: none;
  font-size: 0;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.prayer-topic__arrow svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prayer-topic__item:hover .prayer-topic__arrow,
.prayer-topic__item:focus-visible .prayer-topic__arrow {
  transform: translateX(2px);
  border-color: rgba(179, 150, 106, .64);
  background: #fffdf8;
  box-shadow: none;
}
.prayer-topic__item:focus-visible {
  outline: 2px solid rgba(22, 83, 116, .48);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .prayer-topic__arrow { transition: none; }
}