/* Mujer de Fe · base del diseño de luz (26-10-2026, aprobado por Mayca en la portada), para todas las páginas: la paleta
   (el oro y el chocolate del logo con el rosa de la web y la noche donde brilla el oro), fuentes, reset, tipografía,
   botones, etiquetas, redes, la prosa de los textos largos y los estados de partida de las animaciones.
   El resto va por partes (CLAUDE.md): efectos, cabecera, pie, tarjetas, portadilla y uno por página. */

/* ---------- Fuentes (alojadas aquí, sin Google Fonts) ---------- */
@font-face { font-family: "Hurricane"; src: url("../fuentes/hurricane.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fuentes/lora-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fuentes/lora-400-italica.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fuentes/lora-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fuentes/lora-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fuentes/lora-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fuentes/montserrat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fuentes/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- La paleta ---------- */
:root {
  --crema: #FFF8F0;
  --marfil: #FFFDF9;
  --rosa-claro: #FBE9E7;
  --rosa-papel: #F6E4E1;
  --oro: #C9A14A;
  --oro-claro: #F3D48A;
  --oro-hondo: #8A6420;        /* oro como texto sobre crema (AA) */
  --chocolate: #4A2C1D;        /* la tinta de las letras del logo */
  --texto: #3E302A;
  --gris: #74665F;
  --salvia: #8FA382;
  --rosa: #E97992;             /* solo decorativo */
  --rosa-fuerte: #BF4566;      /* botones y etiquetas con texto blanco (AA) */
  --rosa-oscuro: #A9395A;
  --noche: #1E1520;
  --noche-2: #2A1C2A;
  --luz: #FFE9B8;
  --borde: #EADFD6;
  --sombra: 0 1px 2px rgba(74, 44, 29, .05), 0 10px 30px -14px rgba(74, 44, 29, .25);
  --sombra-alta: 0 2px 4px rgba(74, 44, 29, .06), 0 30px 60px -24px rgba(74, 44, 29, .4);
  /* nombres de antes del diseño de luz, por si algún rincón los usa todavía */
  --fondo: var(--crema);
  --tinta: var(--chocolate);

  --caligrafia: "Hurricane", "Segoe Script", cursive;
  --serif: "Lora", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --ancho: 1240px;
  --margen: clamp(18px, 4vw, 56px);
  --radio: 18px;
  --curva: cubic-bezier(.22, 1, .36, 1);
  --rapido: .25s ease;
  --suave: .5s var(--curva);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  margin: 0; background: var(--crema); color: var(--texto);
  font: 400 18px/1.7 var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
picture { width: 100%; height: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--chocolate); font-weight: 600; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: inherit; }
blockquote, figure { margin: 0; }
:where(ul[class], ol[class], nav ul) { list-style: none; margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
main { position: relative; z-index: 1; }
main:focus { outline: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rosa-fuerte); outline-offset: 3px; border-radius: 4px; }

/* Lenis (el scroll suave de la portada) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Utilidades ---------- */
.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }
.contenedor-estrecho { width: min(780px, 100% - 2 * var(--margen)); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 18px; background: var(--chocolate); color: #fff; border-radius: 6px; font: 600 14px var(--sans); text-decoration: none; }
.saltar:focus { top: 12px; }
.caligrafia { font-family: var(--caligrafia); font-weight: 400; letter-spacing: 0; }
.icono { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foto-pendiente { display: block; width: 100%; height: 100%; min-height: 120px; background: var(--rosa-claro); }

/* ---------- Títulos de sección: el antetítulo con sus rayas de oro y el título con su palabra en caligrafía ---------- */
.antetitulo {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 600 12.5px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--oro-hondo);
}
.antetitulo::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.antetitulo-centrado::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.antetitulo-claro { color: var(--oro-claro); }
.titulo-seccion { font: 500 clamp(36px, 5vw, 68px)/1.05 var(--serif); letter-spacing: -.01em; }
.titulo-seccion .caligrafia { display: inline-block; font-size: 1.45em; line-height: .8; color: var(--rosa-fuerte); padding: 0 .08em; }
.seccion-cabecera { margin: 0 auto clamp(30px, 4.5vw, 56px); text-align: center; }

/* ---------- Botones ---------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em; overflow: hidden;
  min-height: 56px; padding: 18px 36px;
  background: linear-gradient(180deg, #CB5274, var(--rosa-fuerte) 60%);
  color: #fff; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
  font: 600 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 30px -8px rgba(191, 69, 102, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: box-shadow .4s var(--curva), background .4s, translate .7s cubic-bezier(.25, 1.5, .5, 1);
}
.boton .icono { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .4s var(--curva); }
.boton:hover { box-shadow: 0 16px 40px -8px rgba(191, 69, 102, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.boton:hover .icono { transform: translateX(5px); }
.boton-grande { min-height: 60px; padding: 20px 42px; font-size: 15px; }
.boton-pequeno { min-height: 42px; padding: 11px 22px; font-size: 12px; }
/* el brillo que cruza el botón cada pocos segundos */
.boton-brillo::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: brillo 4.5s 2s infinite var(--curva);
}
@keyframes brillo { 0%, 70% { left: -60%; } 100% { left: 130%; } }
/* el dorado, para la noche: texto chocolate sobre oro claro (AA) */
.boton-oro { background: linear-gradient(180deg, #F7DD9C, var(--oro-claro) 40%, #E2B95F); color: var(--chocolate); box-shadow: 0 0 40px -6px rgba(243, 212, 138, .55); }
.boton-oro:hover { box-shadow: 0 0 60px -4px rgba(243, 212, 138, .8); }
.boton-icono {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; transition: background var(--rapido);
}
.boton-icono:hover { background: rgba(201, 161, 74, .16); }
.boton-icono .icono { width: 21px; height: 21px; }

.enlace-suave {
  display: inline-flex; align-items: center; gap: .5em; color: var(--chocolate);
  font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 6px;
  transition: background-size .5s var(--curva), color .3s;
}
.enlace-suave:hover { background-size: 100% 1px; color: var(--rosa-fuerte); }
.enlace-suave .icono { width: 16px; height: 16px; }
.enlace-claro { color: #F8EBD9; }
.enlace-claro:hover { color: var(--oro-claro); }
/* el enlace de oro con borde, para la noche */
.enlace-oro {
  display: inline-flex; align-items: center; gap: .6em; padding: 13px 22px; border-radius: 999px;
  border: 1px solid rgba(243, 212, 138, .5); color: var(--oro-claro); text-decoration: none;
  font: 600 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  background: rgba(20, 12, 22, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .4s, color .4s, box-shadow .4s;
}
.enlace-oro:hover { background: var(--oro-claro); color: var(--chocolate); box-shadow: 0 0 40px rgba(243, 212, 138, .5); }
.enlace-oro .icono { width: 16px; height: 16px; }

/* ---------- Etiqueta de categoría ---------- */
.etiqueta {
  display: inline-block; padding: 6px 11px 5px; background: var(--rosa-fuerte); color: #fff; border-radius: 3px;
  font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background var(--rapido);
}
a.etiqueta:hover { background: var(--rosa-oscuro); }

/* ---------- Redes (las de «Sobre mí» y «Contacto»; las del pie van en pie.css) ---------- */
.redes { display: flex; align-items: center; gap: 4px; }
.red {
  --triangulo-youtube: #fff;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  transition: background var(--rapido), transform var(--rapido);
}
.red .icono { width: 22px; height: 22px; stroke: none; fill: currentColor; }
.red:hover { background: var(--rosa-claro); transform: translateY(-2px); }
.red-youtube { color: #E62117; }
.red-youtube .icono { width: 25px; height: 25px; }
.red-instagram { color: #D6246E; }
.red-tiktok { color: #111; }
.red-tiktok .icono { width: 19px; height: 19px; }
.red-threads { color: #000; }
.red-threads .icono { width: 20px; height: 20px; }
/* en grande, con su título («Sígueme también en»), en «Sobre mí» y Contacto */
.sigueme { margin-top: clamp(60px, 8vw, 100px); text-align: center; }
.sigueme-titulo { margin-bottom: 18px; font-size: clamp(54px, 6vw, 76px); line-height: 1.1; color: var(--chocolate); }
.redes-grande { justify-content: center; gap: 16px; }
.redes-grande .red {
  width: 66px; height: 66px; background: #fff; box-shadow: inset 0 0 0 1px rgba(201, 161, 74, .45), 0 16px 30px -18px rgba(74, 44, 29, .5);
  transition: background .3s, box-shadow .3s, translate .3s var(--curva);
}
.redes-grande .red:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--oro), 0 0 30px rgba(243, 212, 138, .6); translate: 0 -4px; }
.redes-grande .red .icono { width: 28px; height: 28px; }
.redes-grande .red-youtube .icono { width: 32px; height: 32px; }

/* ---------- La prosa de los textos largos (artículos, El Evangelio, Recursos, textos legales) ---------- */
.prosa { width: min(760px, 100% - 2 * var(--margen)); margin: 0 auto; font-size: 19px; line-height: 1.8; color: var(--texto); }
.prosa > * + * { margin-top: 1.05em; }
.prosa p { margin-bottom: 0; }
.prosa h2 { margin-top: 2em; margin-bottom: 0; font: 600 clamp(24px, 2.4vw, 30px)/1.3 var(--serif); }
.prosa h3 { margin-top: 1.6em; font: 600 21px/1.35 var(--serif); }
.prosa a { color: var(--rosa-oscuro); text-decoration: underline; text-decoration-color: rgba(191, 69, 102, .4); text-underline-offset: 3px; }
.prosa a:hover { text-decoration-color: currentColor; }
.prosa strong { color: var(--chocolate); font-weight: 600; }
.prosa ul:not([class]), .prosa ol:not([class]) { padding-left: 1.3em; }
.prosa li + li { margin-top: .35em; }
.prosa li::marker { color: var(--oro); }
.prosa blockquote:not([class]) { margin-inline: 0; padding-left: 20px; border-left: 2px solid var(--oro); font-style: italic; }

/* ---------- Entradas al aparecer: el estado de partida solo si hay efectos (sin JS o con movimiento reducido, todo se ve).
   En la portada las anima GSAP; en las demás, paginas.js les pone «visto» al entrar en pantalla ---------- */
.efectos .aparecer { opacity: 0; transform: translateY(40px); }
.efectos .aparecer.visto { opacity: 1; transform: none; transition: opacity 1s var(--curva), transform 1.2s var(--curva); transition-delay: var(--retraso, 0s); }
/* «entra»: lo mismo con translate, para lo que ya usa transform (las tarjetas que se inclinan) */
.efectos .entra { opacity: 0; translate: 0 50px; }
.efectos .entra.visto { opacity: 1; translate: none; transition: opacity 1s var(--curva), translate 1.2s var(--curva), transform .6s var(--curva), box-shadow .5s; transition-delay: var(--retraso, 0s), var(--retraso, 0s), 0s, 0s; }
.efectos .dividir { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}