/* ===========================================================
   BLOG_STYLES.CSS
   Estilos principales para AsturBlog - Centro Asturiano de Santa Fe
   Autor: Marcos Lazzarini
   =========================================================== */


/* ===========================================================
   1️⃣ FUENTES Y CONFIGURACIÓN GENERAL
   =========================================================== */

/* Importación de fuentes desde Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Definición de clases personalizadas para pesos de la fuente Roboto */
.roboto-thin       { font-family: "Roboto", sans-serif; font-weight: 100; }
.roboto-light      { font-family: "Roboto", sans-serif; font-weight: 300; }
.roboto-regular    { font-family: "Roboto", sans-serif; font-weight: 400; }
.roboto-medium     { font-family: "Roboto", sans-serif; font-weight: 500; }
.roboto-bold       { font-family: "Roboto", sans-serif; font-weight: 700; }
.roboto-black      { font-family: "Roboto", sans-serif; font-weight: 900; }
.roboto-condensed  { font-family: "Roboto Condensed", sans-serif; }

/* Estilos globales del sitio */
body {
  background-color: #f9f9f9;            /* Fondo claro */
                 /* Espaciado entre líneas */
}

/* Justificación de todos los párrafos por defecto */
p {
  text-align: justify;
  margin-bottom: 1rem;
}
.subtitulo {
  text-align: justify;
  
}

/* ===========================================================
   2️⃣ ENCABEZADO Y MENÚ DE NAVEGACIÓN
   =========================================================== */

/* Degradado institucional azul para navbar */
.degradado {
  background: linear-gradient(180deg, #68a4c4 0%, #4b7a9b 100%) !important;
}

/* Texto gris claro sobre fondos oscuros */
.text-gray {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  color: #fff;
}

/* Texto gris oscuro para subtítulos */
.text-gray2 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #363636;
}

/* Estilo general para los enlaces del menú */
.navbar-brand span, 
.nav-link {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* Pequeña sombra */
}

.nav-link {
  color: #fff;                            /* Texto blanco */
  font-family: 'Poppins', sans-serif;     
  transition: color 0.3s;                 /* Efecto suave */
}

.nav-link:hover {
  color: #ffc20d;                         /* Dorado al pasar el mouse */
}

/* Botón hamburguesa en móviles */
.navbar-toggler {
  border-color: rgba(255,255,255,0.5);
}


/* ===========================================================
   6️⃣ POST.PHP (detalle de noticia)
   =========================================================== */

.post-img-main {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.post-content { 
  font-size: 2rem;
  color: #5182A3; /* azul institucional */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
  margin-bottom: 2rem;
  text-align: justify;
}

.post-titulo {
  font-size: 1.5rem;
  color: #5182A3; /* azul institucional */
  font-family: 'Poppins', sans-serif;  
  margin-bottom: 10px;
  text-align: left;     /* Evita huecos horribles */
  font-weight: 400;
  line-height: 1.3;     /* Mejora lectura */
}

.post-card {
  background-color: transparent;
  text-align: justify;
}





/* ===========================================================
   7️⃣ SIDEBAR (Últimas noticias)
   =========================================================== */

.section-title-with-lines {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 20px 0;
}

.section-title-with-lines::before,
.section-title-with-lines::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e0e0e0;
  margin: 0 10px;
}

/* Lista de noticias laterales */
.list-group a {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.list-group a:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

.list-group img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 10px;
}

.list-group a h6 {
  margin: 0;
  font-size: 0.95rem;
  color: #2a73b7;
  transition: color 0.2s ease;
}

.list-group a:hover h6 {
  color: #004080;
}
/* CONTENEDOR FIJO PARA MINIATURAS DEL SIDEBAR */
.thumb-wrapper {
  width: 120px;             /* Ancho fijo */
  aspect-ratio: 16/9;       /* Proporción perfecta */
  overflow: hidden;         /* Oculta lo que sobresale */
  border-radius: 6px;       /* Bordes suaves */
  margin-right: 10px;
  flex-shrink: 0;
}

/* IMAGEN AJUSTADA */
.thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Recorta y mantiene estética */
  display: block;
}

/* ALINEACIÓN DEL ENLACE */
.list-group a.d-flex {
  padding: 6px 0;
  gap: 10px;
  align-items: center;
}

/* TÍTULO MÁS ESTÉTICO */
.list-group a h6 {
  font-size: 0.9rem;
  line-height: 1.2;
  margin: 0;
}


/* ===========================================================
   8️⃣ BOTÓN FLOTANTE "VOLVER"
   =========================================================== */

.btn-volver {
  position: fixed !important;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: #ffd86b;     /* Amarillo institucional */
  border: none;
  color: #3a3a3a;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-volver:hover {
  background-color: #e6b93f;
  transform: scale(1.05);
}

/* Centrado en móviles */
@media (max-width: 576px) {
  .btn-volver {
    right: 50%;
    transform: translateX(50%);
    padding: 10px 18px;
    font-size: 1rem;
  }
}


/* ===========================================================
   9️⃣ FOOTER
   =========================================================== */

#footer {
  background: linear-gradient(180deg, #68a4c4 0%, #4b7a9b 100%);
  padding: 2rem 0;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
}

#footer h5 {
  font-weight: 500;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 1rem;
}

#footer h6 {
  font-weight: 500;
  font-size: 1.1rem;
  color: #ffd86b;
  margin-bottom: 0.8rem;
}

#footer p, #footer address {
  font-weight: 300;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

#footer .footer-link {
  font-weight: 400;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

#footer .footer-link:hover {
  color: #ffc20d;
}

/* Íconos del footer */
#footer .footer-icon {
  font-size: 20px;
  color: #fff;
  transition: transform 0.3s ease, color 0.3s ease;
}

#footer .footer-icon:hover {
  transform: scale(1.1);
  color: #ffc20d;
}

/* Título de redes sociales */
#footer .social-title {
  font-weight: bold;
  font-size: 1.15rem;
  color: #ffc20d;
  margin-bottom: 0.8rem;
}

/* Ajustes responsive del footer */
@media (max-width: 768px) {
  #footer h5 { font-size: 1.2rem; }
  #footer h6 { font-size: 1rem; }
  #footer p, #footer address { font-size: 0.9rem; }
  #footer .footer-link { font-size: 0.9rem; }
  #footer .social-title { font-size: 1.05rem; }
}












/*============================================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ===========================================================
   FUENTES DE ROBOTO (diferentes pesos)
   =========================================================== */

/* Definición de clases para varios pesos y estilos de la fuente Roboto */

.roboto-thin { font-family: "Roboto", sans-serif; font-weight: 100; }
.roboto-light { font-family: "Roboto", sans-serif; font-weight: 300; }
.roboto-regular { font-family: "Roboto", sans-serif; font-weight: 400; }
.roboto-medium { font-family: "Roboto", sans-serif; font-weight: 500; }
.roboto-bold { font-family: "Roboto", sans-serif; font-weight: 700; }
.roboto-black { font-family: "Roboto", sans-serif; font-weight: 900; }
.roboto-thin-italic { font-family: "Roboto", sans-serif; font-weight: 100; font-style: italic; }
.roboto-light-italic { font-family: "Roboto", sans-serif; font-weight: 300; font-style: italic; }
.roboto-regular-italic { font-family: "Roboto", sans-serif; font-weight: 400; font-style: italic; }
.roboto-medium-italic { font-family: "Roboto", sans-serif; font-weight: 500; font-style: italic; }
.roboto-bold-italic { font-family: "Roboto", sans-serif; font-weight: 700; font-style: italic; }
.roboto-black-italic { font-family: "Roboto", sans-serif; font-weight: 900; font-style: italic; }
.roboto-condensed { font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-style: normal; }

/*--------------------------------------------------------------------------------------------------------------------------*/


/* ===========================================================
   ESTILOS GENERALES Y TEXTO
   =========================================================== */

/*================ Estilo general del body ====================*/

body {
  margin: 0; /* Elimina el margen por defecto */
  padding: 0; /* Elimina el padding por defecto */
  box-sizing: border-box; /* Asegura que el tamaño total de los elementos sea el esperado */
  background-color: #f9f9f9; /* Fondo claro */
}

/* ============== Estilo para los párrafos justificados =====================*/
p.justificado { 
  text-align: justify; /* Justifica el texto en los párrafos con la clase 'justificado' */
}
.justificado { 
  text-align: justify; /* Justifica el texto en los párrafos con la clase 'justificado' */
}

/* ===========================================================
   TITULOS DE LAS SECCIONES
   =========================================================== */

section {
  scroll-margin-top: 80px; /* mejora la navegación por anclajes */
}

.titulo {
  font-size: 2rem;
  color: #68a4c4;
  font-family: 'Poppins', sans-serif;
  line-height: 2.4rem;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;


}



/* ===========================================================
   DESCRIPCIÓN DE TITULOS DE LAS SECCIONES
   =========================================================== */

.frase {
  font-size: 1rem;
  color: rgba(33, 37, 41, 0.75);
  font-family: 'Roboto', sans-serif;
  line-height: 1.5rem;
  font-weight: 400;
  font-style: regular;
  text-align: center;
  opacity: 5;
 
}


.textos {
  font-size: 1rem;
  color: rgba(33, 37, 41, 0.75);
  font-family: 'Roboto', sans-serif;
  line-height: 1.5rem;
  font-weight: 400;
  font-style: regular;
  text-align: justify;
  opacity: 3;
 
}


/* ===========================================================
   SUBTITULOS DE LAS SECCIONES
   =========================================================== */

.subtitulo {
  font-size: 1.5rem;
  color: #68a4c4;
  font-family: 'Poppins', sans-serif;
  line-height: 2.4rem;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  margin-top: 1.5rem;
  }


/* ===========================================================
   FUENTE DE CONTENIDO DE TEXTO
   =========================================================== */

.fuente {
  --font-family-base: 'Inter', sans-serif;
  --font-size-base: 15.2px;
  --line-height-base: 23.56px;
  --font-weight-base: 400;
  --letter-spacing-base: normal;
  --text-color-base: #191C1F;  /* Contraste 14.63:1 con fondo blanco */
  --text-color-muted: #6c757d; /* Color gris de Bootstrap para texto secundario */
  --background-base: #ffffff;  
}





/*----------------------------------------------------------------------------------------------------------------------*/











/* ===========================================================
   ANIMACIONES
   =========================================================== */


.fade-in-up, .fade-in-down, .fade-in-right, .fade-in-left {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-in-up { transform: translateY(200px); }
.fade-in-down { transform: translateY(-200px); }
.fade-in-right { transform: translateX(-200px); }
.fade-in-left { transform: translateX(200px); }
.fade-in-up.visible, .fade-in-down.visible, .fade-in-left.visible, .fade-in-right.visible {
  opacity: 1;
  transform: translate(0,0);}




/*----------------------------------------------------------------------------------------------------------------------*/

/* ===========================================================
                         BORDES DE CONTENEDORES
   =========================================================== */

/* ================  Borde gris claro ======================*/

.borde-gris { 
  border: 1px solid #e9e9e9; /* Borde gris claro alrededor de los elementos */
}

/*----------------------------------------------------------------------------------------------------------------------*/

/* ===========================================================
   SECCEIÓN: HEADER (Encabezado de navegación)
   =========================================================== */

/*  ============  Degradado de color en el encabezado ============= */

.degradado {
  background: linear-gradient(180deg, #68a4c4 0%, #4b7a9b 100%) !important; /* Degradado de azul */
}

/* ============= Estilo de texto en el encabezado  ===================== */
.text-gray { 
  font-family: "Poppins", sans-serif; 
  font-weight: 300; 
  color: #fff; /* Texto blanco */
}

.text-gray2 { 
  font-family: "Roboto", sans-serif; 
  font-weight: 400; 
  color: #363636; /* Texto gris oscuro */
}

/* =============  Sombra en los textos del menú ====================*/
.navbar-brand,
 span, 
.nav-link { 
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* Sombra en los enlaces */
}

/* =============  Color y efecto de los Links ====================*/

.nav-link { 
  color: #fff; 
  font-family: 'Poppins', sans-serif; 
  transition: color 0.3s; /* Transición suave para el cambio de color */
}

.nav-link:hover { 
  color: #ffc20d; /* Color dorado en hover */
}

/* =============  Color de forndo del menú hambueguesa ====================*/

.navbar-toggler { 
  border-color: rgba(255,255,255,0.5); /* Borde del botón de menú */
}

/* ============  Estilo para los íconos de redes sociales ================== */

  .footer-icon {
  font-size: 16px;
  color: #fff; /* Íconos blancos */
  transition: transform 0.3s ease, color 0.3s ease; /* Efectos de transformación y cambio de color */
  }

  .footer-icon:hover { 
    transform: scale(1.1); /* Agranda el ícono */
    color: #ffc20d; /* Cambio de color a dorado */
  }



/*----------------------------------------------------------------------------------------------------------------------*/

/* ===========================================================
   SECCIÓN HERO (Fondo principal)
   =========================================================== */

/* Estilos del contenedor de la sección hero */
#hero {
  background-image: url("./img/patio.jpg");
  background-position: center; /* Centra la imagen */
  background-size: cover; /* Asegura que cubra todo el contenedor */
  background-repeat: no-repeat; /* No repite la imagen */
  height: auto; /* Ajusta la altura de forma automática */
  position: relative; /* Posición relativa para posicionar elementos dentro */
}

/* Superposición semitransparente sobre la imagen */
#hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(104,164,196,0.325); /* Color con transparencia */
  z-index: 1;
}

#hero .container { 
  position: relative; 
  z-index: 2; /* Asegura que el texto esté por encima de la superposición */
}

#hero h1 { 
  font-size: 3rem; 
  font-family: 'Poppins', sans-serif; 
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5); /* Sombra en el texto */
}

#hero p { 
  font-size: 1.25rem; 
  font-family: 'Roboto', sans-serif; 
  text-shadow: 1px 1px 3px rgba(0,0,0,0.13); /* Sombra en el texto */
}

/* ===========================================================
   HERO AJUSTADO A LA IMAGEN
   =========================================================== */

/* Estilos del contenedor del hero ajustado a la imagen */
#hero {
  position: relative; /* Posición relativa para posicionar el contenido dentro */
  width: 100%; /* Ocupa el 100% del ancho */
  overflow: hidden; /* Evita que el contenido se desborde */
  background-color: #000; /* Fondo negro */
}

/* Contenedor de la imagen del hero */
.hero-image-wrapper {
  width: 100%; /* Ocupa el 100% del ancho */
  height: auto; /* Ajusta la altura de la imagen */
  position: relative; /* Posición relativa para los elementos dentro */
}

/* Estilos de la imagen dentro del hero */
.hero-img {
  width: 100%; /* Ocupa el 100% del ancho */
  height: auto; /* Ajusta la altura automáticamente */
  display: block; /* Hace que la imagen sea un bloque */
  object-fit: contain; /* Ajusta la imagen sin recortarla */
  object-position: top; /* Alinea la imagen al tope */
}

/* Contenedor del texto dentro del hero */
#hero .container {
  position: absolute;
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Centrado exacto */
  color: #fff; /* Texto blanco */
  z-index: 2; /* Asegura que el texto esté por encima de otros elementos */
}



/*----------------------------------------------------------------------------------------------------------------------*/

/* ===========================================================
   BOTONES
   =========================================================== */

/* =======================================================
     BOTONES - estilo tipo "Conócenos"
     ======================================================= */
  .btn-pastel-yellow {
    display: inline-block;
    background-color: #ffd86b;        /* Amarillo institucional */
    color: #3a3a3a;                   /* Texto gris oscuro */
    font-family: 'roboto', sans-serif;
    font-weight: 400;
    border: 1px solid #e6b93f;        /* Borde suave */
    border-radius: 50px;              /* Bordes redondeados tipo píldora */
    padding: 6px 18px;                /* Ajustado al texto */
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .btn-pastel-yellow:hover,
  .btn-pastel-yellow:focus {
    background-color: #fecc47;        /* Hover más claro */
    color: #222;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    text-decoration: none;
  }

/* =======================================================
     BOTONES para tarjetas - estilo tipo "Leer más"
     ======================================================= */
/* Estilo de los botones en las tarjetas */
.btn-tarjeta {
  display: block;
  background-color: #ffd86b; /* Color amarillo institucional */
  color: #3a3a3a; /* Texto gris oscuro */
  font-family: 'roboto', sans-serif;
  font-weight: 400;
  border: 1px solid #e6b93f; /* Borde amarillo */
  border-radius: 50px; /* Bordes redondeados */
  padding: 0px 0px; /* Ajustado al tamaño del texto */
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  line-height: 1.5;
}

.btn-tarjeta:hover,
.btn-tarjeta:focus {
  background-color: #fecc47; /* Hover más claro */
  color: #222;
  transform: translateY(-1px); /* Sutil efecto de movimiento */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  text-decoration: none;
}



/* ============== Botón de la Tarjeta ============ */

.btn-tarjeta {
   display: block;
  background-color: #ffd86b; /* Color amarillo institucional */
  color: #3a3a3a; /* Texto gris oscuro */
  font-family: 'roboto', sans-serif;
  font-weight: 400;
  border: 1px solid #e6b93f; /* Borde amarillo */
  padding: 0px 0px; /* Ajustado al tamaño del texto */
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  line-height: 1.5;
  width: 40%; /* El botón ocupa el 25% del ancho */
  margin-left: auto; /* Alinea el botón a la derecha */
  margin-top: 10px; /* Espaciado superior */
  margin-bottom: 10px; /* Espaciado inferior */

}

.btn-tarjeta:hover,
.btn-tarjeta:focus {
  background-color: #fecc47; /* Hover más claro */
  color: #222;
  transform: translateY(-1px); /* Sutil efecto de movimiento */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  text-decoration: none;
}



/* ===============  Estilo de la imagen en la parte inferior de las tarjetas ========================== */
.card-img-bottom {
  width: 100%; /* Ajusta el ancho de la imagen al 100% del contenedor */
  height: 25%; /* Establece la altura de la imagen al 25% */
  object-fit: contain; /* Ajusta la imagen para que se vea completamente sin recortar */
  border-radius: 10px; /* Bordes redondeados */
}

/*----------------------------------------------------------------------------------------------------------------------*/



/* ===========================================================
   SECCIÓN SOBRE NOSOTROS — Tipografía, Bordes y Sombra
   =========================================================== */

/* ============== Fuente de la tarjeta ====================== */

#sobre-nosotros {
  scroll-margin-top: 600px; /* desplaza 100px más abajo al hacer scroll */
}



 .card,
.card-body,
.card-title,
.card-text,
.btn { font-family: 'roboto', sans-serif !important;}

/* ============== Tarjeta general ====================== */

.card {
  border: 1px solid rgba(0, 0, 0, 0.08);   /* borde gris claro */
  border-radius: 0.8rem;                  /*  esquinas suaves */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); /* sombra sutil para fondos claros */
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
  border-radius: 10px; /* Bordes redondeados */
  overflow: hidden; /* Asegura que el contenido no se desborde */
}

/* ============== Hover de la targeta general ============ */

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

/* ============ Ajuste  de card-img-top =========== */

.card-img-top { 
  object-fit: cover; /* Ajusta la imagen sin distorsionarla */
  height: 250px; 
  /*border-radius: 0; 
  opacity: 90%; /* Un poco de transparencia en la imagen */
  border-top-left-radius: 10px; /* Bordes redondeados en la parte superior de la imagen */
  border-top-right-radius: 10px;
}

/* ============ Ajuste flex de card-body =========== */

.card-body {
  display: flex;
  flex-direction: column; /* Flex para distribuir el contenido verticalmente */
}


/* ============== Título dentro de la tarjeta ===================*/

 .card-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: #5182A3; /* azul institucional */
}

/* ============== Cuerpo de texto de la tarjeta ============ */

.card-text {
  --font-family-base: 'Inter', sans-serif;
  --font-size-base: 15.2px;
  --line-height-base: 23.56px;
  --font-weight-base: 400;
  --letter-spacing-base: normal;
  --text-color-base: #191C1F;  /* Contraste 14.63:1 con fondo blanco */
  --text-color-muted: #6c757d; /* Color gris de Bootstrap para texto secundario */
  --background-base: #ffffff;
}

/* ============== Botón de la Tarjeta ============ */

 .btn-tarjeta {
   display: block;
  background-color: #ffd86b; /* Color amarillo institucional */
  color: #3a3a3a; /* Texto gris oscuro */
  font-family: 'roboto', sans-serif;
  font-weight: 400;
  border: 1px solid #e6b93f; /* Borde amarillo */
  padding: 0px 0px; /* Ajustado al tamaño del texto */
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  line-height: 1.5;
  width: 40%; /* El botón ocupa el 25% del ancho */
  margin-left: auto; /* Alinea el botón a la derecha */
  margin-top: 10px; /* Espaciado superior */
  margin-bottom: 10px; /* Espaciado inferior */

}

.btn-tarjeta:hover,
.btn-tarjeta:focus {
  background-color: #fecc47; /* Hover más claro */
  color: #222;
  transform: translateY(-1px); /* Sutil efecto de movimiento */
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  text-decoration: none;
}

/*----------------------------------------------------------------------------------------------------------------------*/


/* ===========================================================
   PARALLAX
   =========================================================== */

/* Sección de parallax para diferentes áreas con fondo fijo */
.parallax-inicio,
.parallax-institu,
.parallax-contacto,
.parallax-noticias,
.parallax-actividades,
.parallax-covadonga {
  height: 40vh; /* Altura de la sección en el 50% de la altura de la ventana */
  background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */
  background-size: cover; /* Cubre todo el contenedor con la imagen de fondo */
  background-position: bottom; /* Alinea la imagen de fondo en la parte inferior */
}

/* Asignación de imágenes de fondo específicas para cada sección */
.parallax-inicio { background-image: url("/img/parallax/horreo.jpg"); }
.parallax-institu { background-image: url("/img/parallax/asturias-2.jpg"); }
.parallax-contacto { background-image: url("/img/parallax/asturias-1.jpg"); }
.parallax-noticias { background-image: url("/img/parallax/asturias-3.jpg"); }
.parallax-actividades { background-image: url("/img/parallax/asturias-6.jpg"); }
.parallax-covadonga { background-image: url("/img/parallax/asturias-7.jpg"); }


/*----------------------------------------------------------------------------------------------------------------------*/

/* -----------------------------------------------------------
   6. GALERÍA DE IMÁGENES
   ----------------------------------------------------------- */
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Overlay sobre la imagen */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(68, 136, 192, 0.7); /* azul institucional con transparencia */
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay p {
  font-size: 1rem;
  font-weight: 500;
  padding-bottom: 40%;
  
}

/* Botón circular “+” */
.btn-circle {
  background-color: rgba(75, 122, 155, 0.85);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

.btn-circle:hover {
  background-color: #fecc47;
  color: #333;
  transform: scale(1.1);
}

/* Modal de galería */
.btn-close-custom {
  background-color: #4b7a9b;
  color: white;
  border: none;
  padding: 0.4rem 1.2rem;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.btn-close-custom:hover {
  background-color: #68a4c4;
}
















/* ===========================================================
   SECCIÓN: NOTICIAS Y EVENTOS (TODAS LAS NOTICIAS)
   =========================================================== */

/* Estilo de la sección de noticias y eventos */
#noticias-eventos {
  background-color: #f9f9f9; /* Fondo gris claro */
}



/* ===========================================================
   CONTACTO
   =========================================================== */

/* Estilo de la sección de contacto */
#contacto {
  background-color: #f8f9fa; /* Fondo gris claro */
  padding-bottom: 2rem; /* Espaciado en la parte inferior */
}

/* Estilo de los títulos en la sección de contacto */
#contacto h2,
#contacto h3 {
  color: #68a4c4; /* Color azul */
  font-family: 'Poppins', sans-serif;
}

/* Estilo del botón amarillo en la sección de contacto */
#contacto .btn-pastel-yellow {
  background-color: #fecc47; /* Color de fondo amarillo */
  color: #4A4A4A; /* Color del texto gris oscuro */
  border: none; /* Sin borde */
  border-radius: 8px; /* Bordes redondeados */
  transition: background-color 0.3s; /* Transición suave al hacer hover */
}

/* Efecto al pasar el cursor sobre el botón de contacto */
#contacto .btn-pastel-yellow:hover {
  background-color: #e0a911; /* Color del botón al hacer hover */
  color: #333; /* Color del texto al hacer hover */
}

/* Estilo del contenedor del mapa */
#contacto .map-container {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  border-radius: 8px; /* Bordes redondeados */
  overflow: hidden; /* Evita que los contenidos se desborden */
}

/*----------------------------------------------------------------------------------------------------------------------*/


/* ===========================================================
   FOOTER
   =========================================================== */

/* Estilo general del footer */
#footer {
  background: linear-gradient(180deg, #68a4c4 0%, #4b7a9b 100%); /* Degradado de azul */
  padding: 2rem 0; /* Espaciado superior e inferior */
  color: #fff; /* Texto blanco */
  font-family: 'Roboto', sans-serif;
  line-height: 1.5; /* Interlineado */
  position: relative; /* Posición relativa para los elementos internos */
  margin-bottom: 0; /* Elimina el margen adicional al final */
}

/* Estilo para los títulos dentro del footer */
#footer h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 1.25rem; /* Tamaño de fuente */
  color: #fff; /* Texto blanco */
  margin-bottom: 1rem; /* Espaciado inferior */
}

/* Estilo para los subtítulos en el footer */
#footer h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.1rem; /* Tamaño de fuente */
  color: #68a4c4; /* Color azul */
  margin-bottom: 0.8rem; /* Espaciado inferior */
}

/* Estilo para los párrafos y direcciones en el footer */
#footer p, #footer address {
  font-family: 'Roboto', sans-serif;
  font-weight: 300; /* Peso de fuente */
  font-size: 0.95rem; /* Tamaño de fuente */
  color: #fff; /* Texto blanco */
  margin-bottom: 0.5rem; /* Espaciado inferior */
}

/* Estilo para los enlaces en el footer */
#footer .footer-link {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.95rem; /* Tamaño de fuente */
  color: #fff; /* Texto blanco */
  text-decoration: none; /* Elimina el subrayado */
  transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

/* Efecto al pasar el cursor sobre los enlaces del footer */
#footer .footer-link:hover {
  color: #ffc20d; /* Color dorado en hover */
}

/* Estilo para los íconos de redes sociales en el footer */
#footer .footer-icon {
  font-size: 20px; /* Tamaño del ícono */
  color: #fff; /* Texto blanco */
  transition: transform 0.3s ease, color 0.3s ease; /* Efecto de transformación y cambio de color */
}

/* Efecto al pasar el cursor sobre los íconos del footer */
#footer .footer-icon:hover {
  transform: scale(1.1); /* Agranda el ícono */
  color: #ffc20d; /* Color dorado en hover */
}

/* Estilo para el título de las redes sociales en el footer */
#footer .social-title {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.15rem; /* Tamaño de fuente */
  color: #ffc20d; /* Color dorado */
  margin-bottom: 0.8rem; /* Espaciado inferior */
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
  #footer h5 {
    font-size: 1.2rem; /* Tamaño de fuente más pequeño en pantallas pequeñas */
  }

  #footer h6 {
    font-size: 1rem; /* Tamaño de fuente más pequeño */
  }

  #footer p, #footer address {
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
  }

  #footer .footer-link {
    font-size: 0.95rem; /* Tamaño de fuente más pequeño */
  }

  #footer .social-title {
    font-size: 1.05rem; /* Tamaño de fuente más pequeño */
  }
}

/*----------------------------------------------------------------------------------------------------------------------*/




/* ===========================================================
   INSTITUCIONALES - Estilos específicos
   =========================================================== */

/* ===========================================================
   COMISIÓN DIRECTIVA - Versión 281px ancho carrusel, texto 571x500px
   =========================================================== */

/* ----- Sección general ----- */
#autoridades {
  background-color: #f6f8fa;
}


 

/* ----- Carrusel ----- */
#carouselAutoridades {
  width: 281px;             /* ancho fijo */
  max-width: 281px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f1f3f4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

#carouselAutoridades .carousel-inner {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

#carouselAutoridades .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}

#carouselAutoridades .carousel-item img:hover {
  transform: scale(1.03);
}

/* ----- Controles del carrusel ----- */
#carouselAutoridades .carousel-control-prev-icon,
#carouselAutoridades .carousel-control-next-icon {
  background-color: rgba(75, 122, 155, 0.8);
  border-radius: 50%;
  width: 34px;
  height: 34px;
}

#carouselAutoridades .carousel-control-prev-icon:hover,
#carouselAutoridades .carousel-control-next-icon:hover {
  background-color: rgba(68, 136, 192, 0.9);
}

/* ----- Contenedor del texto ----- */
.autoridades-texto {
  width: 571px;             /* ancho fijo */
  height: 500px;            /* altura fija */
  padding: 1.8rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centra verticalmente */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ----- Lista de autoridades ----- */
.autoridades-texto ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

.autoridades-texto ul li {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #333;
  line-height: 1.5;
  font-size: clamp(0.9rem, 1vw + 0.4rem, 1rem);
  padding: 5px 0;
  border-bottom: 1px solid #eaeaea;
  margin: 0;
  text-align: left;         /* texto alineado visualmente */
}

.autoridades-texto ul li strong {
  display: inline-block;
  width: 180px;             /* 👈 alinea los dos puntos verticalmente */
  color: #4b7a9b;
  font-weight: 600;
}

/* ----- Espaciado entre columnas ----- */
#autoridades .row {
  --bs-gutter-x: 0.75rem;   /* 👈 gap pequeño y elegante */
  align-items: center;
}



/* -----------------------------------------------------------
   2.FUENTE  PRINCIPAL
   ----------------------------------------------------------- */



.borde-gris {
  border-left: 1px solid #e0e0e0;
}

/* -----------------------------------------------------------
   3. IMÁGENES
   ----------------------------------------------------------- */
.object-fit-cover {
  object-fit: cover;
}

.sepia-effect {
  filter: sepia(25%) saturate(90%);
  transition: all 0.3s ease-in-out;
}

.sepia-effect:hover {
  filter: sepia(0%) brightness(105%);
}

.img-fluid.rounded-3 {
  border-radius: 12px !important;
}




#Quienes-Somos,
#Nuestra-Historia {
  background-color: F9F9F9;
}

/* ===========================================================
   NUESTRA HISTORIA - Separación y bordes redondeados
   =========================================================== */

/* Contenedor principal */
#Nuestra-Historia {
  background-color: #f9f9f6;
}


/* Contenedor de la imagen: borde redondeado y sombra */
.history-image-container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Imagen dentro del contenedor */
.history-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ajuste para la fila que contiene imagen y texto */
#Nuestra-Historia .row {
  --bs-gutter-x: 1.25rem; /* Gap entre contenedores */
  border-radius: 10px;
}

/* Contenedor de texto: borde redondeado y sombra */
#Nuestra-Historia .col-12.col-md-9 {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}



/* Imágenes dentro de los párrafos */
#Nuestra-Historia .content img {
  max-width: 55%;
  display: block;
  margin: 1.5rem auto;
  border-radius: 10px;
}

/* ===========================================================
   RESPONSIVE - Ajuste para pantallas pequeñas (móviles)
   =========================================================== */
@media (max-width: 768px) {
  /* En pantallas pequeñas, el contenedor se adapta al 100% */
  #Nuestra-Historia .row {
    --bs-gutter-x: 1rem; /* Menos gap entre los contenedores en móviles */
  }

  /* Imagen ajustada al 100% en pantallas pequeñas */
  .history-image-container img {
    height: auto;
  }

/* ===========================================================
   BREADCRUMB (migas de pan)
   =========================================================== */
.breadcrumb {
  background-color: #ffd86b !important;
  margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #adb5bd; /* gris suave separador */
}

.breadcrumb-item a {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #6c757d;
  transition: color 0.2s ease-in-out;
}

.breadcrumb-item a:hover {
  color: #4b7a9b; /* azul institucional */
}

.breadcrumb-item.active {
  color: #4488c0; /* azul institucional claro */
  font-weight: 500;
}

/* Ícono del Home */
.breadcrumb i {
  font-size: 0.95rem;
  vertical-align: middle;
}

#btnUp {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1; /* más bajo */
}

.accordion-button {
  position: relative;
  z-index: 10; /* por encima del botón flotante */
}
}