/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

/* VERSION WEB =========================================================== */

:root {

  /* colores corporativos */
  --violeta-claro: rgb(183, 80, 222); 
  --violeta-oscuro: rgb(159, 26, 187); 
  --verde-claro: rgb(107, 228, 170); 
  --verde-oscuro: rgb(52, 165, 101); 

  /* colores básicos de la web */
  --color-fondo: var(--verde-claro); 
  --color-fondoSeccion: linear-gradient(var(--violeta-claro) 0%, var(--color-fondo) 100%) ;
  --color-fondoInverso: linear-gradient(var(--verde-claro) 0%, var(--violeta-claro) 100%) ;

  /* tamaño de textos */
  --texto-menuppal: 1.5rem;
  --texto-seccion: 3rem;
  --texto-integrante-nombre: 1.6rem;
  --texto-integrante-cargo: 1.3rem;
  --texto-integrante-bio: 0.9rem;
  --texto-cabecera-titulo: 2.5rem;
  --texto-cabecera-subtitulo: 1.3rem;
  --texto-articulo-titulo: 1.8rem;
  --texto-articulo-cabecera: 1.5rem;
  --texto-articulo-contenido: 1.2rem;

  /* otros estilos */
  --articulo-margen: 25px;
  
}

html {
  scroll-behavior: smooth;
}

/* Fuente importada en la primera línea de ese fichero. */
body {
    font-family: 'Gowun Dodum', sans-serif; /*'Georama'*/
    background: var(--color-fondo);
}

/* centrar los títulos de las secciones */
h1, h2, h3,h4, h5, h6 {
  text-align: center;
}

/*---------------------------------------------------------- Sección Cabecera y Menú */

/* color de fondo de la cabecera, en degradado */
.container-header {     
  background: var(--color-fondoSeccion);
}

/* MENÚ PRINCIPAL */
#mod-menu1 {
  justify-content: center;           /* alineado al centro de la página */
}

/* opciones del menú*/
#mod-menu1 > li {                     
  font-size: var(--texto-menuppal);   
  color: black;                       /*var(--violeta-oscuro);*/
  font-weight: bold; 
}

/* reducir tamaño de imagen de cabecera */
container-banner .banner-overlay {
  height: 30vh;
}

/* Título y Subtítulo */
#cabecera_titulo {
  font-size: var(--texto-cabecera-titulo);
}

#cabecera_subtitulo {
  font-size: var(--texto-cabecera-subtitulo);
}


/*---------------------------------------------------------- Sección SOMOS */

/* fondo transparente para el módulo de Cassiopeia (ver submenú Avanzado, propiedad "clase CSS del módulo") (de esta forma, el fondo es el del contenedor, que es el corporativo)*/
.modulo_somos_tabla {
  background: var(--color-fondoSeccion); /*transparent !important;*/
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* título */
#seccion_somos h1 {
  font-size: var(--texto-seccion); 
  color: black;
}

/* tabla de LVO integrantes. Ordenación flex en filas */
.tabla_lvo_integrantes {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between; /* horizontalmente, con espacios a ambos lados */
  align-items: flex-start;        /* verticalmente, alineados arriba */
}

/* integrante */
.lvo_integrante {   
  flex: 0.1 1 100%;      /* por defecto, 1 en cada fila (para móvil). 0.1 para que texto tenga el tamaño mínimo de la foto */
}

/* ------ Caja de biografía */
details {
  padding: 5px;
}

details[open] p {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* elimina el marcador de despliegue de la biografía */
summary {
  list-style: none;
}

/* Para compatibilidad con Safari y Chrome antiguo */
summary::-webkit-details-marker {
  display: none;
}

/* texto de biografía */
.bio_lvo_integrante {
  font-size: var(--texto-integrante-bio);
}
/* ----- Caja de biografía FIN */

/* En pantallas grandes (PC): máximo 5 elementos por fila */
@media (min-width: 768px) {
  .lvo_integrante {
    /* (100% / 4 columnas) menos el espacio del gap (calculado con calc()) */
    flex: 0.1 1 calc(25% - 10px); 
  }
}

/* efecto al pasar el ratón ESTO NO FUNCIONA *-/
.tabla_lvo_integrante div:hover {
  /*transform: scale(1.05, 1.05);  */
.lvo_integrante img:hover {
  box-shadow: 10px 10px 22px rgba(238, 39, 245,0.12);  /* sombra violeta clara */
}

/* Cada integrante tiene su tarjeta (nombre y cargo) bajo la foto */
.tarjeta_lvo_integrante {
  background-color:  white;
  text-align: center;
}

/* textos foto */
.nombre_lvo_integrante {
  font-size: var(--texto-integrante-nombre);
  color: var(--violeta-oscuro);
  padding: 5px 10px 5px 10px;                 /* top right bottom left */
}

.cargo_lvo_integrante {
  font-size: var(--texto-integrante-cargo);
  color: black;
}

/*------ texto inferior */
#somos_texto {
  font-size: var(--texto-articulo-cabecera);
  text-align: center;
  width:100%;
}

/*-------- vídeo*/
.lvo_contenedor_video { 
   display: block; 
   margin: 0 auto; /* Centra horizontalmente */ 
   max-width: 100%; /* Hace que sea adaptable (responsive) */
   /* como flexbox…
   display: flex; 
   justify-content: center;   /* Centra horizontalmente *-/ 
   align-items: center;       /* Centra verticalmente *-/ 
   height: 100vh;             /* Ocupa el 100% de la altura de la pantalla …*/ 
}

/*---------------------------------------------------------- Sección QUEREMOS */

/* fondo degradado con colores LVO **/
.main-top.card.modulo_queremos_cabecera {
  background: var(--violeta-claro);
  margin-bottom: 0;
}

/* título de sección */
#seccion_queremos div h1 {
  font-size: var(--texto-seccion);
}

/* fondo degradado con colores LVO en la rejilla de artículos. 
   Además, pegada a la cabecera para el color de fondo. */
.main-top.card.queremos-grid {
  background: var(--color-fondoSeccion);
  margin-top: 0;
}

/* rejilla de artículos [¿No la establece desde las opciones?...] */
.queremos-grid .mod-articles-category {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 0 auto 3rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}

/* artículo */
.mod-articles-item {
  background: var(--color-fondoInverso); 
  border: 1px solid #ddd;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;  
  padding-bottom: 1rem;
}

/* efecto al pasar el ratón */
.mod-articles-item:hover {
  transform: scale(1.05, 1.05); /* translateY(-4px);  /-* Se mueve hacia arriba  */
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.mod-articles-item img {
  width: 100%;
  height: 50%; /*220px;*/
  object-fit: cover;
  display: block;
}

/* títulos del artículo */
.queremos-grid .mod-articles-item h3,
.queremos-grid .mod-articles-item h4,
.queremos-grid .mod-articles-title {
  font-family: 'Gowun Dodum', sans-serif; 
  font-size: var(--texto-articulo-titulo);
  text-align: center;
  margin: 1rem 1rem 1rem 1rem;
  
}

/* cabecera del artículo */
.articulo_cabecera {
  font-size: var(--texto-articulo-cabecera);
  margin: 0 1rem 1rem 1rem;
  line-height: 1.6;
}

/* Leer más */
.readmore {
  margin: 0 1rem;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  margin-top: 0.5rem;
  text-align: center;
}

/* artículo, contenido */
.mod-articles-item-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1rem;
}
.articulo_contenido p, 
.articulo_contenido li {
  font-size: var(--texto-articulo-contenido);
  align-text: justify;
}

.mod-articles-item-content img {
  max-width: 100%;
  height: 50%;
  border-radius: 12px;
}

/*---------------------------------------------------------- Sección INICIO (main) */

/* fondo degradado inverso con colores LVO */
.grid-child.container-component main {
  background: var(--color-fondoInverso);
}

/* título */
.grid-child.container-component main h1 {
  font-size: var(--texto-articulo-titulo);
}

/* texto /
.grid-child.container-component main 

/* texto del artículo principal */
.com-content-article__body div p {
  font-size: var(--texto-articulo-contenido);
  font-weight: 600;
  text-align: justify;
  padding-left: var(--articulo-margen);
  padding-right: var(--articulo-margen);
}

/*---------------------------------------------------------- Sección CONTACTO */

/* quitar franja rosa de QUEREMOS
.grid-child.container-component {
  background: var(--color-fondoSeccion);
}
*/

/* Escondemos bloque de subtítulo "Contacto", por redundante */
.cm-contact_container {
  display: none;
}

/* Ocultamos textos redundantes "Formulario de contacto", "Enviar un correo electrónico" */
.com-contact.contact h2,
.m-0 legend {
  display: none;
}

/* Texto "Campo requerido" en cursiva y más oscuro */
#jform_spacer-lbl {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: right;
}

/* Márgenes externos para separar los campos del límite del formulario */
.m-0 .control-group {
  margin-left: 15px;
  margin-right: 15px;
}

/* Tamaño de las etiquetas de texto */
label.required {
  font-size: 1.6rem;
  color: black;
}

/* Tamaño del texto de los campos del formulario */
.form-control.required.valid.form-control-success {
  font-size: 1.2rem;
  font-weight: bold;
}

/*---------------------------------------------------------- Bloque REDES SOCIALES */

/* fondo degradado con colores LVO */
.bottom-a.card {
  /*background-image: linear-gradient(var(--violeta-claro) 0%, var(--verde-claro)  100%)  !important;*/
  background: var(--color-fondoSeccion);
}

.marquesina-contenedor {
     width: 100%;
     overflow: hidden;
     padding: 15px 0;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
     position: relative; /* Buena práctica para contener el flujo */
}

.marquesina-texto {
     display: inline-block;
     white-space: nowrap;
     color: var(--verde-claro);
     font-size: 24px;
     font-weight: bold;
     animation: desplazar 10s linear infinite;
}

@keyframes desplazar {
     from {
            transform: translateX(80vw);  /* = 100% del viewport, se adapta a cualquier ancho de pantalla */
     }
     to {
            transform: translateX(10vw);
     }
}

/* Opcional: pausar al pasar el mouse */
.marquesina-contenedor:hover .marquesina-texto {
      animation-play-state: paused;
}

/* iconos de RRSS, centrados y separados */
.marquesina-logos-rrss {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center;     /* Centrado vertical */
  gap: 20px;               /* Espacio entre elementos */
}

/*---------------------------------------------------------- Bloque CONTACTO */

/* VERSION MOVIL =========================================================== */

@media (max-width: 767px) {
    
   /* color de fondo de la cabecera, en degradado /
   .container-header {     
      background-image: linear-gradient(var(--violeta-claro) 0%, var(--verde-claro) 100%) !important;
   }
  */
}