/* Mujer de Fe · el artículo con el diseño de luz (26-10-2026): la portadilla con su foto y el título (portadilla.css), el
   texto sobre la crema (la prosa, en base.css) con su capitular de oro, la cita destacada de noche, los pasos con su
   marca dorada, la frase final que descubre la lámpara, compartir, anterior y siguiente. */

/* ---------- A. Los datos de la portadilla ---------- */
.articulo-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 0; padding: 0; list-style: none; color: rgba(248, 235, 217, .88); font-size: 15px; text-shadow: 0 1px 12px rgba(20, 12, 22, .8); }
.articulo-datos li { display: inline-flex; align-items: center; gap: 8px; }
.articulo-datos .icono { width: 18px; height: 18px; color: var(--oro-claro); }
.articulo-datos a { color: inherit; text-decoration: none; background: linear-gradient(var(--oro-claro), var(--oro-claro)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--curva); }
.articulo-datos a:hover { background-size: 100% 1px; }
.portadilla-articulo { min-height: clamp(480px, 76vh, 760px); }

/* ---------- B. El texto ---------- */
.articulo-texto { margin-top: clamp(16px, 3vw, 40px); }
/* la capitular, en la caligrafía y en oro */
.articulo-texto > p:first-child::first-letter {
  float: left; margin: .08em .12em 0 -.04em; padding: 0 .04em;
  font: 400 4.6em/.78 var(--caligrafia); color: var(--oro-hondo);
}
.articulo-texto h2 { position: relative; padding-top: 18px; }
.articulo-texto h2::before { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 2px; background: linear-gradient(90deg, var(--rosa), var(--oro)); border-radius: 2px; }

/* La cita destacada: una tarjeta de noche, con la letra manuscrita en oro y una comilla que brilla */
.prosa .cita {
  position: relative; margin: 2.2em 0; padding: 40px 40px 30px 110px; overflow: hidden;
  background: radial-gradient(ellipse at 20% 0%, #3A2238, var(--noche) 70%); border-radius: 24px;
  box-shadow: 0 30px 60px -30px rgba(30, 21, 32, .85), inset 0 0 0 1px rgba(243, 212, 138, .18);
}
.prosa .cita::before {
  content: "\201C"; position: absolute; left: 28px; top: 14px;
  font: 700 120px/1 var(--serif); color: var(--oro-claro); text-shadow: 0 0 24px rgba(243, 212, 138, .6);
}
.prosa .cita::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(243, 212, 138, .22), transparent 65%);
}
.prosa .cita p { position: relative; margin: 0; font: 400 clamp(32px, 3.2vw, 42px)/1.15 var(--caligrafia); color: var(--luz); text-shadow: 0 0 22px rgba(243, 212, 138, .35); }
.prosa .cita cite { position: relative; display: block; margin-top: 14px; font: 600 12px/1 var(--sans); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-claro); }

/* Los pasos: un círculo de oro con su marca */
.prosa .pasos { padding: 0; list-style: none; }
.prosa .pasos li { position: relative; padding-left: 42px; }
.prosa .pasos li + li { margin-top: .6em; }
.prosa .pasos li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #F7DD9C, #E2B95F) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A2C1D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 0 14px rgba(243, 212, 138, .55);
}

/* ---------- C. La frase final: de noche, la lámpara la descubre y se enciende palabra a palabra ---------- */
.frase-final {
  --lx: 50%; --ly: 50%; --radio: clamp(120px, 15vw, 200px);
  position: relative; overflow: hidden; margin: clamp(60px, 8vw, 100px) 0 0; padding: clamp(70px, 9vw, 120px) var(--margen);
  background: radial-gradient(ellipse at 50% 120%, #4A2440 0%, #241426 45%, var(--noche) 100%); text-align: center; color: #F8EBD9;
}
.frase-final .lampara-versiculo { position: relative; display: grid; max-width: 960px; margin: 0 auto; }
.frase-final .lampara-capa { grid-area: 1 / 1; margin: 0; font-size: clamp(48px, 6.4vw, 92px); line-height: 1.08; }
.frase-final .palabra { color: rgba(248, 235, 217, .14); transition: color 1s ease, text-shadow 1s ease; transition-delay: calc(var(--i) * 110ms); }
.frase-final.visto .palabra { color: var(--luz); text-shadow: 0 0 28px rgba(243, 212, 138, .7); }
html:not(.efectos) .frase-final .palabra { color: var(--luz); }
.frase-final .lampara-encendida {
  pointer-events: none;
  background: linear-gradient(180deg, #FFF6DC, var(--oro-claro) 55%, #E0B25A); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: radial-gradient(circle var(--radio) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
  mask-image: radial-gradient(circle var(--radio) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
}
html:not(.efectos) .frase-final .lampara-encendida, html:not(.efectos) .frase-final .lampara-halo { display: none; }
.frase-final .lampara-halo {
  position: absolute; left: 0; top: 0; width: calc(var(--radio) * 3.2); height: calc(var(--radio) * 3.2);
  margin: calc(var(--radio) * -1.6) 0 0 calc(var(--radio) * -1.6); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 220, 150, .26), rgba(255, 190, 120, .09) 35%, transparent 65%);
  mix-blend-mode: screen;
}
.frase-final-corazon { width: 42px; height: 38px; margin: 26px auto 0; fill: none; stroke: var(--rosa); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(233, 121, 146, .8)); }

/* ---------- D. Compartir ---------- */
.compartir { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; width: min(760px, 100% - 2 * var(--margen)); margin: 50px auto 0; }
.compartir-titulo { margin: 0; font: 600 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--oro-hondo); }
.compartir-lista { display: flex; gap: 10px; }
.compartir-red {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--chocolate); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, .45);
  transition: background .3s, color .3s, box-shadow .3s, translate .3s var(--curva);
}
.compartir-red .icono { width: 20px; height: 20px; stroke: none; fill: currentColor; }
.compartir-correo .icono { fill: none; stroke: currentColor; stroke-width: 1.8; }
.compartir-red:hover { background: linear-gradient(180deg, #F7DD9C, var(--oro-claro) 40%, #E2B95F); box-shadow: 0 10px 24px -10px rgba(201, 161, 74, .9); translate: 0 -3px; }

/* ---------- Anterior / siguiente ---------- */
.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; perspective: 1000px; }
.vecino {
  --rx: 0deg; --ry: 0deg;
  display: flex; flex-direction: column; gap: 8px; padding: 22px 26px; text-decoration: none;
  background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(201, 161, 74, .3), 0 20px 40px -26px rgba(74, 44, 29, .4);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--curva), box-shadow .4s;
}
.vecino.activa, .efectos .vecino.activa.visto { transition: transform .12s linear, box-shadow .4s; }
.vecino:hover { box-shadow: inset 0 0 0 1px var(--oro), 0 30px 50px -26px rgba(191, 69, 102, .4); }
.vecino-siguiente { grid-column: 2; text-align: right; align-items: flex-end; }
.vecino-rotulo { display: inline-flex; align-items: center; gap: 6px; color: var(--oro-hondo); font: 600 11.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.vecino-rotulo .icono { width: 15px; height: 15px; stroke-width: 2; }
.vecino-titulo { color: var(--chocolate); font: 600 18px/1.35 var(--serif); }

@media (max-width: 640px) {
  .articulo-datos { gap: 8px 20px; font-size: 14px; }
  .prosa .cita { padding: 76px 24px 24px; }
  .prosa .cita::before { left: 20px; top: 2px; font-size: 96px; }
  .vecinos { grid-template-columns: 1fr; }
  .vecino-siguiente { grid-column: 1; }
}