/* =========================================================================
   LEGAL CHURCH — Actualizaciones
   Estilos alineados con la línea de diseño del sitio (navy + dorado).
   ========================================================================= */

.lcu-section{
  --lcu-navy:      #173A6B;
  --lcu-navy-deep: #0A2E63;
  --lcu-gold:      #D4A94F;
  --lcu-gold-soft: #C9A86A;
  --lcu-beige:     #FBF3E7;
  --lcu-body:      #46566E;
  --lcu-line:      #E7E9EE;
  --lcu-surface:   #FFFFFF;

  --lcu-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");

  box-sizing: border-box;
  width: 100%;
}
.lcu-section *,
.lcu-section *::before,
.lcu-section *::after{ box-sizing: border-box; }


/* ---------------- Layout de la portada ---------------- */

.lcu-home-grid{
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) 2.2fr;
  gap: clamp(28px, 4vw, 62px);
  align-items: start;
}

.lcu-eyebrow{
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lcu-gold-soft);
}

.lcu-heading{
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  line-height: 1.16;
  color: var(--lcu-navy);
  letter-spacing: -.01em;
}

.lcu-rule{
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: var(--lcu-gold);
  margin: 22px 0;
}

.lcu-lead{
  margin: 0 0 28px;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--lcu-body);
  max-width: 42ch;
}


/* ---------------- Botón principal ---------------- */

.lcu-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--lcu-gold);
  color: var(--lcu-navy) !important;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none !important;
  transition: background-color .3s cubic-bezier(.22,1,.36,1),
              transform .3s cubic-bezier(.22,1,.36,1);
}
.lcu-cta span{ position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; }
.lcu-cta span::after{
  content: "";
  width: 15px; height: 15px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--lcu-arrow); mask-image: var(--lcu-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  animation: lcuFloat 2s ease-in-out infinite;
}
.lcu-cta:hover{ transform: translateY(-1px); background: #C9A03F; }
.lcu-cta:hover span::after{ transform: translateX(6px); animation: none; }
.lcu-cta::before{
  content: "";
  position: absolute; top: 0; left: -140%;
  width: 62%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  z-index: 1; pointer-events: none;
  animation: lcuSheen 4.6s cubic-bezier(.4,0,.2,1) infinite;
}
.lcu-cta:hover::before{ animation-duration: 1.5s; }

@keyframes lcuFloat{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(3px); } }
@keyframes lcuSheen{ 0%{ left:-140%; } 55%{ left:150%; } 100%{ left:150%; } }


/* ---------------- Tarjetas ---------------- */

.lcu-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.lcu-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}

.lcu-card{
  display: flex;
  flex-direction: column;
  background: var(--lcu-surface);
  border: 1px solid var(--lcu-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              border-color .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.lcu-card:hover{
  transform: translateY(-5px);
  border-color: var(--lcu-gold);
  box-shadow: 0 14px 30px rgba(16,24,40,.10);
}

.lcu-card-media{
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.lcu-card-img{
  display: block;
  width: 100%;
  height: 186px;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.lcu-card:hover .lcu-card-img{ transform: scale(1.06); }

.lcu-card-img-empty{
  background: linear-gradient(135deg, #16305E, #0E2148);
}

/* Etiqueta de categoría sobre la imagen */
.lcu-badge{
  position: absolute;
  left: 0; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 12px;
  border-radius: 0 6px 6px 0;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.1;
  box-shadow: 0 2px 8px rgba(16,24,40,.22);
  max-width: calc(100% - 16px);
}
.lcu-badge-icon{ width: 14px; height: 14px; flex: 0 0 auto; }
.lcu-badge-text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lcu-card-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 22px;
}

.lcu-card-date{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: .8rem;
  color: #7A8699;
}
.lcu-date-icon{ width: 14px; height: 14px; flex: 0 0 auto; }

.lcu-card-title{
  margin: 0 0 10px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--lcu-navy);
}
.lcu-card-title a{
  color: inherit;
  text-decoration: none;
  transition: color .3s cubic-bezier(.22,1,.36,1);
}
.lcu-card-title a:hover{ color: var(--lcu-gold-soft); }

.lcu-card-excerpt{
  margin: 0 0 18px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--lcu-body);
}

/* "Read More" con la misma flecha animada del sitio */
.lcu-more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--lcu-navy) !important;
  text-decoration: none !important;
  transition: color .3s cubic-bezier(.22,1,.36,1);
  align-self: flex-start;
}
.lcu-more span{ display: inline-flex; align-items: center; gap: 7px; }
.lcu-more span::after{
  content: "";
  width: 13px; height: 13px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--lcu-arrow); mask-image: var(--lcu-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  animation: lcuFloat 2s ease-in-out infinite;
}
.lcu-more:hover{ color: var(--lcu-gold) !important; }
.lcu-more:hover span::after{ transform: translateX(5px); animation: none; }


/* ---------------- Barra de suscripción ---------------- */

.lcu-newsletter{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding: 22px 26px;
  background: #F7F8FA;
  border: 1px solid var(--lcu-line);
  border-radius: 12px;
  flex-wrap: wrap;
}
.lcu-news-icon{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #173A6B, #0A2E63);
  color: var(--lcu-gold);
}
.lcu-news-icon svg{ width: 26px; height: 26px; }
.lcu-news-text{ flex: 1 1 320px; min-width: 0; }
.lcu-news-title{
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--lcu-navy);
}
.lcu-news-body{
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--lcu-body);
}
.lcu-news-btn{
  flex: 0 0 auto;
  padding: 11px 24px;
  border: 1.5px solid var(--lcu-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--lcu-gold-soft) !important;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.lcu-news-btn:hover{
  background: var(--lcu-gold);
  color: var(--lcu-navy) !important;
}


/* ---------------- Filtros del archivo ---------------- */

.lcu-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.lcu-filter{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--lcu-line);
  border-radius: 999px;
  background: #fff;
  color: var(--lcu-navy) !important;
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.lcu-filter:hover{ border-color: var(--lcu-gold); background: var(--lcu-beige); }
.lcu-filter.is-active{
  border-color: var(--lcu-navy);
  background: var(--lcu-navy);
  color: #fff !important;
}
.lcu-filter-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}


/* ---------------- Paginación ---------------- */

.lcu-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 38px;
}
.lcu-page{
  min-width: 40px;
  padding: 9px 12px;
  border: 1.5px solid var(--lcu-line);
  border-radius: 8px;
  text-align: center;
  color: var(--lcu-navy) !important;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none !important;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.lcu-page:hover{ border-color: var(--lcu-gold); background: var(--lcu-beige); }
.lcu-page.is-active{
  background: var(--lcu-navy);
  border-color: var(--lcu-navy);
  color: #fff !important;
}

.lcu-empty{
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--lcu-body);
  background: #F7F8FA;
  border: 1px dashed var(--lcu-line);
  border-radius: 12px;
}


/* ---------------- Vista individual ---------------- */

.lcu-single{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 20px;
}
.lcu-single-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--lcu-navy) !important;
  text-decoration: none !important;
}
.lcu-single-back::before{
  content: "";
  width: 13px; height: 13px;
  background-color: currentColor;
  -webkit-mask-image: var(--lcu-arrow); mask-image: var(--lcu-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  transform: rotate(180deg);
}
.lcu-single-back:hover{ color: var(--lcu-gold) !important; }

.lcu-single-badge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 6px;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.lcu-single-title{
  margin: 16px 0 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--lcu-navy);
}
.lcu-single-date{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 26px;
  font-size: .9rem;
  color: #7A8699;
}
.lcu-single-date svg{ width: 15px; height: 15px; }
.lcu-single-media img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin-bottom: 30px;
}
.lcu-single-content{
  font-size: 1.02rem;
  line-height: 1.75;
  color: #37455C;
}
.lcu-single-content h2,
.lcu-single-content h3{
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--lcu-navy);
  margin-top: 1.8em;
}
.lcu-single-content a{ color: var(--lcu-gold-soft); }


/* ---------------- Responsive ---------------- */

@media (max-width: 1180px){
  .lcu-home-grid{ grid-template-columns: 1fr; }
  .lcu-lead{ max-width: 60ch; }
}
@media (max-width: 900px){
  .lcu-cards{ grid-template-columns: 1fr; }
  .lcu-card-img{ height: 210px; }
  .lcu-newsletter{ text-align: left; }
  .lcu-news-btn{ width: 100%; text-align: center; }
}
@media (max-width: 520px){
  .lcu-cta{ width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .lcu-card,
  .lcu-card-img,
  .lcu-cta,
  .lcu-more span::after,
  .lcu-cta span::after{ transition: none; animation: none; }
  .lcu-cta::before{ animation: none; opacity: 0; }
}
