/* ============================================================================
   1. VARIABLES Y CONFIGURACIÓN (variables.css)
   ============================================================================ */
:root {
  /* Colores Ministerio Damas */
  --damas-color-primario: #9e4c98;
  --damas-color-secundario: #f4c3ef;
  --damas-color-acento: #f9d5f5;
  --damas-color-texto: #4a2648;
  --damas-color-oscuro: #6a2564;
  /* Neutros */
  --color-blanco: #ffffff;
  --color-fondo-claro: #f9f9f9;
  /* Espaciado */
  --esp-xs: 5px;
  --esp-s: 10px;
  --esp-m: 20px;
  --esp-l: 30px;
  --esp-xl: 50px;
  /* Bordes y sombras */
  --radio-s: 5px;
  --radio-m: 10px;
  --radio-l: 15px;
  --sombra-suave: 0 5px 15px rgba(0,0,0,0.05);
  --sombra-fuerte: 0 15px 30px rgba(0,0,0,0.15);
}

/* ============================================================================
   2. RESET Y BASE (reset.css + base.css)
   ============================================================================ */
html, body { margin: 0; padding: 0; overflow-x: hidden; width:100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { font-family: sans-serif; color: var(--damas-color-texto); background: var(--color-blanco); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ============================================================================
   3. CONTENEDORES Y LAYOUT GENERAL (layout.css)
   ============================================================================ */
.contenedor, .container, section > div { width:100%; max-width:1200px; margin:0 auto; padding: 0 var(--esp-m); }
.text-center { text-align: center; }
.mt-4 { margin-top: 1.5rem; }

/* Hero y botones legacy eliminados (migrado a hero-min / btn-min en base-ministerios.css) */

/* ============================================================================
   5. SECCIÓN BIENVENIDA (bienvenida.css)
   ============================================================================ */
.bienvenida {
  position: relative;
  padding: var(--esp-xl) 0;
  background: var(--color-blanco);
}
.bienvenida::before {
  content:'';
  position:absolute;
  top:-50px;
  width:100%;
  height:100px;
  background:var(--color-blanco);
  clip-path: polygon(0 50%,100% 0,100%100%,0%100%);
}
.bienvenida h2 {
  color: var(--damas-color-primario);
  font-size:2.5rem;
  margin-bottom: var(--esp-m);
  position:relative;
  display:inline-block;
}
.bienvenida h2::after {
  content:'';
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:3px;
  background: var(--damas-color-secundario);
}
.bienvenida p {
  max-width:800px;
  margin:0 auto var(--esp-l);
  font-size:1.2rem;
  line-height:1.8;
}
.mision-vision {
  display:flex;
  flex-wrap: wrap;
  gap: var(--esp-l);
  justify-content:center;
}
.mision-vision-card {
  flex:1;
  min-width:300px;
  background: var(--color-fondo-claro);
  padding:30px;
  border-radius:var(--radio-l);
  box-shadow:var(--sombra-suave);
  transition: transform .3s;
}
.mision-vision-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--sombra-fuerte);
}

/* ============================================================================
   6. LÍDERES (lideres.css)
   ============================================================================ */
.lideres {
  padding: var(--esp-xl) 0;
  background: var(--damas-color-acento);
}
.lideres h2 {
  color: var(--damas-color-primario);
  font-size:2.5rem;
  margin-bottom: var(--esp-l);
  position:relative;
  display:inline-block;
}
.lideres-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: var(--esp-l);
}
.lider-card {
  background: var(--color-blanco);
  border-radius:var(--radio-l);
  overflow:hidden;
  box-shadow:var(--sombra-suave);
  transition: transform .3s;
}
.lider-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--sombra-fuerte);
}
.lider-info h3 { color: var(--damas-color-primario); margin-bottom: var(--esp-s); }
.lider-social a {
  background: var(--damas-color-secundario);
  color: var(--damas-color-primario);
  width:35px;
  height:35px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .3s;
}
.lider-social a:hover { background: var(--damas-color-primario); color:var(--color-blanco); }

/* ============================================================================
   7. ARTÍCULOS RECIENTES Y CARRUSEL (articulos-recientes.css)
   ============================================================================ */
.articulos-recientes {
  padding: var(--esp-xl) 0;
  background: var(--color-blanco);
}
.articulos-recientes h2 {
  color: var(--damas-color-primario);
  font-size:2.5rem;
  margin-bottom: var (--esp-l);
  position:relative;
  display:inline-block;
}
.carousel-container {
  position: relative;
  overflow: hidden;
  margin: 40px 0;
  padding-bottom: 50px;
}
.carousel-track, .carousel-slides {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}
.carousel-slide, .carousel-item {
  box-sizing: border-box;
  padding: 0 15px;
  flex: 0 0 100%;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .carousel-slide, .carousel-item { flex: 0 0 50%; }
}
@media (min-width: 1024px) {
  .carousel-slide, .carousel-item { flex: 0 0 33.333%; }
}
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--damas-color-primario);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  z-index: 10;
  opacity: 0.8;
  transition: all 0.3s ease;
}
.carousel-button:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }
.prev-button { left: 10px; }
.next-button { right: 10px; }
.carousel-indicators {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--damas-color-secundario);
  cursor: pointer;
  transition: all 0.3s ease;
}
.indicator.active { background-color: var(--damas-color-primario); transform: scale(1.2); }

/* ============================================================================
   8. EVENTOS (eventos.css)
   ============================================================================ */
.eventos {
  position: relative;
  padding: var(--esp-xl) 0;
  background: var(--damas-color-acento);
}
.eventos::before {
  content:'';
  position:absolute;
  top:-50px;
  width:100%;
  height:100px;
  background: var(--damas-color-acento);
  clip-path: polygon(0 0,100%50%,100%100%,0%100%);
}
.eventos h2::after { background: var(--damas-color-primario); }
.eventos-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--esp-l);
}
.evento-card:hover { transform: translateY(-10px); box-shadow: var(--sombra-fuerte); }

/* ============================================================================
   9. TESTIMONIOS (testimonios.css)
   ============================================================================ */
.testimonios { padding: var(--esp-xl) 0; background: var(--color-blanco); }
.testimonios h2::after { background: var(--damas-color-primario); }
.testimonio { background: var(--color-blanco); border-radius:var(--radio-l); padding:30px; box-shadow:var(--sombra-suave); }
.testimonio-texto::before { color: var(--damas-color-secundario); }

/* ============================================================================
 10. GALERÍA (galeria.css)
   ============================================================================ */
.galeria { padding: var(--esp-xl) 0; background: var(--damas-color-acento); }
.galeria-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: var(--esp-s); }
.galeria-item:hover img { transform: scale(1.1); }

/* ============================================================================
 11. RECURSOS (recursos.css)
   ============================================================================ */
.recursos { padding: var(--esp-xl) 0; background: var(--color-blanco); }
.recurso-card { background: var(--color-blanco); border-radius:var(--radio-l); padding-bottom:20px; box-shadow:var(--sombra-suave); }
.recurso-card:hover { transform: translateY(-10px); box-shadow: var(--sombra-fuerte); }

/* ============================================================================
 12. CONTACTO (contacto.css)
   ============================================================================ */
.contacto { padding: var(--esp-xl) 0; background: var(--damas-color-acento); }
.contacto-form {
  display:grid;
  gap: var(--esp-m);
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--damas-color-primario); }
.btn-submit {
  background: var(--damas-color-primario);
  color: var(--color-blanco);
  transition: transform .3s;
}
.btn-submit:hover { transform: translateY(-3px); box-shadow: var(--sombra-suave); }

/* ============================================================================
 13. LLAMADO A LA ACCIÓN (cta.css)
   ============================================================================ */
.cta {
  padding: var(--esp-xl) 0;
  background: linear-gradient(rgba(158,76,152,0.9),rgba(74,38,72,0.9)), url('../../../images/.../cta-bg.jpg') center/cover fixed;
}
.cta h2, .cta p { color: var(--color-blanco); }

/* ============================================================================
 14. PÁGINAS DE ARTÍCULOS - HERO Y CABECERA (article-hero.css)
   ============================================================================ */
.hero-container {
  position: relative;
  width: 100%;
  height: 50vh;
  max-height: 500px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.article-title-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(158, 76, 152, 0.8); /* Color primario damas con transparencia */
  color: white;
  padding: 1rem;
  text-align: center;
}

.article-title {
  font-family: 'Merriweather', serif;
  font-size: 2.2rem;
  margin: 0;
  padding: 0;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.article-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(158, 76, 152, 0.8); /* Color primario damas con transparencia */
  color: rgba(255, 255, 255, 0.9);
  padding: 0.8rem;
  font-size: 0.9rem;
  text-align: center;
}
.article-meta span { margin: 0 5px; }

/* ============================================================================
 15. PÁGINAS DE ARTÍCULOS - CONTENIDO (article-content.css)
   ============================================================================ */
.article-container {
  max-width: 800px;
  margin: 2rem auto 4rem;
  padding: 0 20px;
}
.article-lead {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.9;
  margin: 2rem 0;
  border-left: 4px solid var(--damas-color-secundario); /* Cambiado a color secundario de damas */
  padding-left: 1.5rem;
  font-style: italic;
  color: #787878;
}
.article-section {
  margin: 40px 0;
  padding: 30px;
  background: var(--color-blanco);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-suave);
  transition: transform .3s;
}
.article-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* ============================================================================
 16. TOOLTIP Y VERSÍCULOS (article-tooltips.css)
   ============================================================================ */
.bible-verse {
  background: var(--damas-color-acento);
  padding: 15px;
  margin: var(--esp-s) 0;
  border-left: 4px solid var(--damas-color-primario);
  text-align: center;
  font-style: italic;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltip-text {
  visibility: hidden;
  width: 300px;
  background: var(--color-blanco);
  color: var(--damas-color-texto);
  text-align: left;
  border: 2px solid var(--damas-color-primario);
  border-radius: var(--radio-l);
  padding: 15px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .3s;
  box-shadow: var(--sombra-suave);
}
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: var(--damas-color-primario) transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ============================================================================
 17. SECCIONES ESPECIALES: Reflexión, Oración, Compartir (article-extras.css)
   ============================================================================ */
.reflection-point, .prayer-section, .article-share {
  margin: var(--esp-l) 0;
  padding: var(--esp-m);
  border-radius: var(--radio-l);
}
.prayer-section {
  background: linear-gradient(135deg, var(--damas-color-acento), var(--damas-color-secundario));
  text-align: center;
  box-shadow: var(--sombra-suave);
}
.share-buttons {
  display:flex;
  gap: var(--esp-s);
  justify-content: center;
  flex-wrap: wrap;
}
.share-button {
  padding: 12px 20px;
  border-radius: 30px;
  font-weight:600;
  box-shadow: var(--sombra-suave);
  transition: transform .3s;
}
.share-facebook { background: #3b5998; color:#fff; }
.share-twitter { background: #1da1f2; color:#fff; }
.share-whatsapp { background: #25d366; color:#fff; }
.share-button:hover { transform: translateY(-3px); box-shadow: var (--sombra-fuerte); }

/* ============================================================================
 18. ARTÍCULOS RELACIONADOS (related-articles.css)
   ============================================================================ */
.related-articles-list {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: var(--esp-s);
}
.related-article {
  background: var(--color-blanco);
  padding:20px;
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-suave);
  transition: transform .3s;
}
.related-article:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* ============================================================================
 19. RESPONSIVE (responsive.css)
   ============================================================================ */
@media (max-width: 768px) {
  .hero-texto h1 { font-size:2.5rem; }
  .hero-container { height:40vh; max-height:350px; }
  .article-title { font-size:1.8rem; }
  .article-meta { font-size:0.8rem; padding:0.6rem; }
  .article-meta span { display:inline; }
  .contacto-form { grid-template-columns:1fr; }
  .tooltip .tooltip-text { width:250px; }
}
@media (max-width: 480px) {
  .hero-container { height:35vh; max-height:250px; }
  .article-title { font-size:1.5rem; }
  .article-meta { font-size:0.7rem; padding:0.5rem; }
  .article-meta span { display: block; margin:3px 0; }
}
@media (min-width:769px) and (max-width:1024px) {
  .hero-container { height:50vh; }
  .article-title { font-size:2rem; }
}
@media (min-width:1025px) { .contenedor, .container { max-width:1200px; } }