/*
  ============================================================
  fe.css — El Mundo de Manu / Fe
  ============================================================
  Estilos específicos para mi sección de Fe.
  Heredan variables y componentes globales de style.css.

  Dirección estética: cálida, espiritual, contemplativa.
  Paleta dorada-ámbar sobre oscuro profundo. Fuente Playfair
  Display para los versículos y citas. Sin ruido visual —
  paz, claridad y profundidad.

  Prefijo: fe- (fe)

  Estructura:
  01. Variables locales de la sección
  02. Breadcrumb
  03. Hero de Fe (canvas + luces + versículo central)
  04. ¿Por qué comparto esto?
  05. Pilares de Fe
  06. Reflexiones
  07. Versículos que me marcan
  08. Recursos
  09. CTA final
  10. Botones propios de esta sección
  11. Responsive

  Autor: Carlos Manuel Turizo Hernández
  Versión: 1.0.0
  ============================================================
*/

/* ============================================================
  01. VARIABLES LOCALES
  El color principal de esta sección es el dorado-ámbar.
  Sobreescribo solo lo necesario del sistema global.
  ============================================================ */
.page-fe {
  --fe-gold:        #F0A500;
  --fe-gold-light:  #FFD060;
  --fe-gold-dim:    rgba(240, 165, 0, 0.10);
  --fe-gold-glow:   rgba(240, 165, 0, 0.30);
  --fe-warm-bg:     #0E0C08;       /* Fondo ligeramente más cálido */
  --font-serif:     'Playfair Display', Georgia, serif;
}


/* ============================================================
  02. BREADCRUMB
  ============================================================ */
.breadcrumb {
  padding: calc(var(--space-4) + 70px) 0 var(--space-4);
  border-bottom: 1px solid rgba(240, 165, 0, 0.12);
  background: var(--color-bg);
}
.breadcrumb__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumb__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}
.breadcrumb__link:hover { color: var(--fe-gold); }
.breadcrumb__sep {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  opacity: 0.4;
}
.breadcrumb__current {
  font-size: var(--text-sm);
  color: var(--fe-gold);
  font-weight: 500;
}

/* Tag dorado específico de esta sección */
.fe-tag {
  background: var(--fe-gold-dim);
  border-color: rgba(240, 165, 0, 0.2);
  color: var(--fe-gold);
}


/* ============================================================
  03. HERO DE FE
  Fondo oscuro cálido con canvas de partículas de luz suaves,
  tres destellos de luz posicionados para crear atmósfera,
  y el versículo central en tipografía serif de gran tamaño.
  ============================================================ */
.fe-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--space-32) 0 var(--space-20);
}

/* Canvas de partículas de luz */
.fe-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Destellos de luz decorativos (radiales) */
.fe-hero__light {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  animation: lightBreath 6s ease-in-out infinite;
}
.fe-hero__light--1 {
  width: 600px; height: 400px;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(240, 165, 0, 0.12) 0%, transparent 70%);
  animation-delay: 0s;
}
.fe-hero__light--2 {
  width: 300px; height: 300px;
  bottom: 10%; left: 10%;
  background: radial-gradient(circle, rgba(240, 165, 0, 0.07) 0%, transparent 70%);
  animation-delay: 2s;
}
.fe-hero__light--3 {
  width: 250px; height: 250px;
  top: 20%; right: 5%;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.08) 0%, transparent 70%);
  animation-delay: 4s;
}

@keyframes lightBreath {
  0%, 100% { opacity: 1; transform: scale(1) translateX(-50%); }
  50%       { opacity: 0.65; transform: scale(1.08) translateX(-50%); }
}
/* Las luces 2 y 3 no tienen translateX, las corrijo */
.fe-hero__light--2,
.fe-hero__light--3 {
  animation-name: lightBreathSimple;
}
@keyframes lightBreathSimple {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.1); }
}

/* Cruz decorativa SVG */
.fe-hero__cross-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.025;
}
.fe-hero__cross {
  width: 300px;
  height: 400px;
  color: var(--fe-gold);
}

/* Contenido del hero — centrado */
.fe-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.fe-hero__content {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-6);
}

.fe-hero__tag-row {
  display: flex;
  justify-content: center;
}

/* Título de la sección — minimalista y grande */
.fe-hero__title {
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: transparent;
  background: linear-gradient(135deg, var(--fe-gold-light) 0%, var(--fe-gold) 50%, #C67B00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

/* Versículo central en tipografía serif — cálido y contemplativo */
.fe-hero__verse {
  max-width: 600px;
  padding: var(--space-8) var(--space-10);
  border: 1px solid rgba(240, 165, 0, 0.18);
  border-radius: var(--radius-xl);
  background: rgba(240, 165, 0, 0.04);
  position: relative;
}

/* Comillas decorativas grandes */
.fe-hero__verse::before {
  content: '"';
  position: absolute;
  top: -20px; left: 20px;
  font-family: var(--font-serif);
  font-size: 8rem;
  color: var(--fe-gold);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
}

.fe-hero__verse-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(var(--text-base), 2vw, var(--text-md));
  line-height: 1.75;
  color: var(--color-text-primary);
}

.fe-hero__verse-ref {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fe-gold);
  letter-spacing: 0.04em;
}

.fe-hero__desc {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 520px;
}

.fe-hero__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Indicador de scroll */
.fe-hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scrollBounce 2.5s ease-in-out infinite;
  z-index: 1;
}
.fe-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--fe-gold), transparent);
  order: -1;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}


/* ============================================================
  04. ¿POR QUÉ COMPARTO ESTO?
  Layout de 2 columnas: texto a la izquierda,
  tarjeta de versículo a la derecha.
  ============================================================ */
.fe-why {
  padding: var(--space-24) 0;
  background: var(--color-surface);
  border-top: 1px solid rgba(240, 165, 0, 0.1);
  border-bottom: 1px solid rgba(240, 165, 0, 0.1);
}

.fe-why__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .fe-why__inner { grid-template-columns: 1.5fr 1fr; gap: var(--space-16); }
}

.fe-why__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-4) 0;
  line-height: 1.15;
}

.fe-why__desc {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* Tarjeta lateral de cita */
.fe-why__card {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background: linear-gradient(135deg,
    rgba(240, 165, 0, 0.06) 0%,
    var(--color-bg) 100%
  );
  border: 1px solid rgba(240, 165, 0, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.fe-why__card-icon {
  font-size: 2.5rem;
  color: var(--fe-gold);
  opacity: 0.8;
}

.fe-why__card-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.fe-why__card-ref {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fe-gold);
  letter-spacing: 0.04em;
}

/* Glow dorado de fondo de la tarjeta */
.fe-why__card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 100%,
    var(--fe-gold-dim) 0%,
    transparent 100%
  );
  pointer-events: none;
}


/* ============================================================
  05. PILARES DE FE
  Grid de 6 tarjetas — cada una con número, ícono,
  título, descripción y un versículo de soporte.
  ============================================================ */
.fe-pillars {
  padding: var(--space-24) 0;
}

.fe-pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .fe-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fe-pillars__grid { grid-template-columns: repeat(3, 1fr); } }

.fe-pillar-card {
  position: relative;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition-slow), border-color var(--transition-base),
              box-shadow var(--transition-base);
  overflow: hidden;
}
.fe-pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 165, 0, 0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 20px var(--fe-gold-dim);
}

/* Número grande en el fondo de la tarjeta */
.fe-pillar-card__number {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  color: var(--fe-gold);
  opacity: 0.05;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.fe-pillar-card:hover .fe-pillar-card__number { opacity: 0.09; }

.fe-pillar-card__icon { font-size: 2.25rem; line-height: 1; }

.fe-pillar-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.fe-pillar-card__desc {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
  flex: 1;
}

/* Versículo de soporte al pie de la tarjeta */
.fe-pillar-card__verse {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fe-pillar-card__verse span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.fe-pillar-card__verse cite {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fe-gold);
  font-style: normal;
  letter-spacing: 0.04em;
}


/* ============================================================
  06. REFLEXIONES
  Tarjetas de reflexiones personales — más íntimas y largas.
  ============================================================ */
.fe-reflections {
  padding: var(--space-24) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.fe-reflections__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .fe-reflections__grid { grid-template-columns: repeat(3, 1fr); }
}

.fe-reflection-card {
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition-slow), border-color var(--transition-base);
}
.fe-reflection-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 165, 0, 0.3);
}

.fe-reflection-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fe-reflection-card__tag {
  padding: var(--space-1) var(--space-3);
  background: var(--fe-gold-dim);
  border: 1px solid rgba(240, 165, 0, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fe-gold);
}

.fe-reflection-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.fe-reflection-card__title {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-primary);
}

.fe-reflection-card__body {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text-secondary);
  flex: 1;
}

/* Versículo al pie de la reflexión */
.fe-reflection-card__verse {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--fe-gold);
  padding: var(--space-3) var(--space-4);
  background: var(--fe-gold-dim);
  border-left: 2px solid var(--fe-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.5;
}

/* Nota de más reflexiones */
.fe-reflections__more {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.fe-reflections__more-tag {
  padding: var(--space-2) var(--space-5);
  background: var(--fe-gold-dim);
  border: 1px dashed rgba(240, 165, 0, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--fe-gold);
  font-weight: 600;
}


/* ============================================================
  07. VERSÍCULOS QUE ME MARCAN
  Galería tipo masonry / bento de tarjetas de versículos.
  Tipografía serif, fondo oscuro cálido.
  ============================================================ */
.fe-verses {
  padding: var(--space-24) 0;
}

.fe-verses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .fe-verses__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .fe-verses__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tarjeta de versículo estándar */
.fe-verse-card {
  padding: var(--space-8) var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  transition: transform var(--transition-slow), border-color var(--transition-base),
              box-shadow var(--transition-base);
  min-height: 160px;
}
.fe-verse-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 165, 0, 0.3);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 16px var(--fe-gold-dim);
}

/* Versículo acento — fondo dorado suave */
.fe-verse-card--accent {
  background: linear-gradient(135deg,
    rgba(240, 165, 0, 0.07) 0%,
    var(--color-surface) 100%
  );
  border-color: rgba(240, 165, 0, 0.2);
}

/* Versículo ancho — ocupa toda la fila en desktop */
@media (min-width: 1024px) {
  .fe-verse-card--wide { grid-column: span 2; }
}

.fe-verse-card__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(var(--text-sm), 1.5vw, var(--text-base));
  line-height: 1.75;
  color: var(--color-text-primary);
  flex: 1;
}

.fe-verse-card__ref {
  font-size: var(--text-xs);
  font-weight: 700;
  font-style: normal;
  color: var(--fe-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ============================================================
  08. RECURSOS
  Grid de recursos en 2 columnas.
  ============================================================ */
.fe-resources {
  padding: var(--space-24) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.fe-resources__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .fe-resources__grid { grid-template-columns: repeat(2, 1fr); }
}

.fe-resource-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--transition-slow), border-color var(--transition-base);
}
.fe-resource-card:hover {
  transform: translateX(4px);
  border-color: rgba(240, 165, 0, 0.3);
}

.fe-resource-card__icon {
  font-size: 2.25rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.fe-resource-card__info { flex: 1; }

.fe-resource-card__type {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fe-gold);
  margin-bottom: var(--space-1);
}

.fe-resource-card__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.fe-resource-card__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}


/* ============================================================
  09. CTA FINAL
  ============================================================ */
.fe-cta {
  padding: var(--space-24) 0;
}

.fe-cta__inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-14) var(--space-10);
  background: var(--color-surface);
  border: 1px solid rgba(240, 165, 0, 0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.fe-cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 65% at 50% 50%,
    rgba(240, 165, 0, 0.06) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.fe-cta__icon {
  font-size: 3rem;
  color: var(--fe-gold);
  position: relative;
  animation: iconGlow 3s ease-in-out infinite;
}
@keyframes iconGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(240, 165, 0, 0.4); }
  50%       { text-shadow: 0 0 40px rgba(240, 165, 0, 0.7); }
}

.fe-cta__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text-primary);
  position: relative;
}

.fe-cta__highlight {
  color: transparent;
  background: linear-gradient(135deg, var(--fe-gold-light), var(--fe-gold));
  -webkit-background-clip: text;
  background-clip: text;
}

.fe-cta__desc {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 480px;
  position: relative;
}

.fe-cta__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}


/* ============================================================
  10. BOTONES PROPIOS DE ESTA SECCIÓN
  El botón primario de Fe usa el dorado como color base
  en lugar del índigo global.
  ============================================================ */
.fe-btn--primary {
  background: var(--fe-gold);
  color: #0A0A0F;
  font-weight: 700;
  box-shadow: 0 4px 20px var(--fe-gold-glow);
}
.fe-btn--primary:hover {
  background: var(--fe-gold-light);
  box-shadow: 0 6px 28px rgba(240, 165, 0, 0.5);
  transform: translateY(-2px);
  color: #0A0A0F;
}

.fe-btn--ghost {
  border-color: rgba(240, 165, 0, 0.25);
  color: var(--fe-gold);
}
.fe-btn--ghost:hover {
  border-color: var(--fe-gold);
  background: var(--fe-gold-dim);
  color: var(--fe-gold);
}


/* ============================================================
  11. RESPONSIVE — AJUSTES ADICIONALES
  ============================================================ */
@media (max-width: 640px) {
  .fe-hero {
    padding: var(--space-20) 0 var(--space-16);
    min-height: auto;
  }
  .fe-hero__title { font-size: clamp(4rem, 20vw, 6rem); }
  .fe-hero__verse { padding: var(--space-6) var(--space-5); }
  .fe-hero__verse::before { font-size: 5rem; }
  .fe-hero__actions { flex-direction: column; align-items: center; width: 100%; }
  .fe-hero__actions .btn { width: 100%; justify-content: center; }

  .fe-cta__inner { padding: var(--space-10) var(--space-6); }
  .fe-cta__actions { flex-direction: column; align-items: center; width: 100%; }
  .fe-cta__actions .btn { width: 100%; justify-content: center; }
}

/* Footer link activo */
.footer__link--active { color: var(--fe-gold); }