/* pastor.css - Estilos específicos para El Pastor Verdadero */
/* Solo afecta al contenido de Introduccion.html, no al menú ni al header */

/* Hacer visible el título del sticky-header "EL PASTOR VERDADERO" */
.sticky-header #titulo-general {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 2.2rem !important;
  color: #2c3e50 !important;
  font-weight: bold !important;
  text-align: center !important;
  margin: 1rem 0 !important;
  line-height: 1.2 !important;
  position: relative !important;
  z-index: 15 !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 0.5rem 1rem !important;
  box-sizing: border-box !important;
}

/* Estilos específicos para el contenido de El Pastor Verdadero */
#content .WordSection1 .content {
  font-family: 'Georgia', serif !important;
  line-height: 1.6 !important;
  color: #222 !important;
  background-color: transparent !important;
  padding: 20px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Título principal centrado - SOLO el h1 dentro del contenido */
#content .WordSection1 .content h1 {
  text-align: center !important;
  margin: 2rem 0 1.5rem 0 !important;
  font-size: 2.2rem !important;
  color: #2c3e50 !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
  display: block !important;
  visibility: visible !important;
}

/* Párrafos con espaciado adecuado - SIN TABULACIONES */
#content .WordSection1 .content p {
  text-align: justify !important;
  margin-bottom: 1.5rem !important;
  font-size: 1.8rem !important;
  line-height: 1.6 !important;
  text-indent: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Estilos para texto en negrita e itálica - SOLO dentro del contenido */
#content .WordSection1 .content strong {
  font-weight: bold !important;
}

#content .WordSection1 .content em {
  font-style: italic !important;
}

/* Responsive design para diferentes tamaños de pantalla */
@media (max-width: 480px) {
  .sticky-header #titulo-general {
      font-size: 1.8rem !important;
      margin: 0.8rem 0 !important;
      padding: 0.3rem 0.8rem !important;
  }
  
  #content .WordSection1 .content h1 {
      font-size: 1.8rem !important;
      margin: 1.5rem 0 1rem 0 !important;
  }
  
  #content .WordSection1 .content p {
      font-size: 1rem !important;
      margin-bottom: 1.2rem !important;
      text-indent: 0 !important;
      margin-left: 0 !important;
      padding-left: 0 !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .sticky-header #titulo-general {
      font-size: 2rem !important;
      margin: 0.9rem 0 !important;
      padding: 0.4rem 0.9rem !important;
  }
  
  #content .WordSection1 .content h1 {
      font-size: 2rem !important;
  }
  
  #content .WordSection1 .content p {
      font-size: 1.6rem !important;
      margin-bottom: 1.3rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sticky-header #titulo-general {
      font-size: 2.1rem !important;
      margin: 1rem 0 !important;
      padding: 0.5rem 1rem !important;
  }
  
  #content .WordSection1 .content h1 {
      font-size: 2.1rem !important;
  }
  
  #content .WordSection1 .content p {
      font-size: 1.5rem !important;
      margin-bottom: 1.4rem !important;
  }
}

@media (min-width: 1025px) {
  .sticky-header #titulo-general {
      font-size: 2.2rem !important;
      margin: 1.5rem 0 !important;
      padding: 1rem 2rem !important;
      line-height: 1.1 !important;
      max-width: 100% !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      min-height: 4rem !important;
  }
  
  #content .WordSection1 .content {
      max-width: 100% !important;
      padding: 30px !important;
      background-color: transparent !important;
  }
  
  #content .WordSection1 .content h1 {
      font-size: 2.3rem !important;
  }
  
  #content .WordSection1 .content p {
      font-size: 2.0rem !important;
      margin-bottom: 1.5rem !important;
  }
}

/* Pantallas extra grandes */
@media (min-width: 1400px) {
  .sticky-header #titulo-general {
      font-size: 2.2rem !important;
      margin: 2rem 0 !important;
      padding: 1.5rem 3rem !important;
      min-height: 5rem !important;
  }
}

/* Pantallas ultra grandes */
@media (min-width: 1920px) {
  .sticky-header #titulo-general {
      font-size: 2.8rem !important;
      margin: 2.5rem 0 !important;
      padding: 2rem 4rem !important;
      min-height: 6rem !important;
  }
}