html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom right, #fcd1c8, #ffffff);/*color fondo*/
  font-family: "Cambria", serif;
}


/* Tipografía */

/*Fuente base: Arial */
body {
  font-family: 'Arial', sans-serif;
}

/* Títulos destacados: Arial Rounded MT Bold */
h1, h2, h3, .titulo-destacado {
  font-family: 'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, sans-serif;
  text-transform: uppercase; /* fuerza mayúsculas */
  letter-spacing: 1px; /* mejora la legibilidad */
  font-weight: bold;
}

/* Subtítulos o textos complementarios: Cambria */
h4, h5, h6, .subtitulo, .texto-cambria {
  font-family: 'Cambria', serif;
  font-style: normal;
}

/* Caracteristicas nombre asociación */
.logo-nombre a {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  font-size: 26px;
  color: #ffffff;
  text-decoration: none; /* Quita subrayado */
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

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

/* Barra superior */
.topbar {
  background-color: #012f50;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3px 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Nombre */
.logo-nombre {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
}

/* Menú superior */
.topmenu {
  display: flex;
  align-items: center;
  gap: 8px; /* espacio entre íconos */
}

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

/* iconos */

/*icono inicio*/
.topmenu a[href="ACADTYC.html"] img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/*icono cursos*/
.topmenu a[href="cursos.html"] img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/*icono personal*/
.topmenu a[href="junta-directiva.html"] img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/*icono como ser parte*/
.topmenu a[href="como-ser-parte.html"] img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.topmenu a:hover img {/*animación iconos*/
  transform: translateY(-3px);
}

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

/* Noticias y Comunicados */
.contenedor-noticia-y-comunicados {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px; /*separación cuadros*/
  max-width: 1000px;
  margin: 40px auto;
}

/* cuadro noticia */
.noticia-detallada {
  flex: 1;
  max-width: 700px;
}

/* Título principal */
.titulo-noticia {
  color: #1e79bb;
  font-size: 32px;/*tamaño letra*/
  font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
  text-align: center;
  margin-bottom: 10px;
}

/* Subtítulo */
.intro-noticia {
  font-family: 'Cambria', serif;
  font-size: 18px;
  text-align: center;
  color: #7c7c7c;
  line-height: 1.2;/*separación del subitulo entre texto y imagenes*/
  margin-bottom: 25px;
}

/* Imagen */
.imagen-noticia {
  margin-bottom: 5px;/*distancia entre imagenes y/o texto*/
}

.imagen-noticia img {
  width: 100%;
  border-radius: 10px;/*cantidad de bordeado*/
  border: 2.5px solid #414141;
}

/* Cuadro de texto */
.cuerpo-noticia {
  background: #ffffff;
  border: 2px solid #414141;
  border-radius: 14px;
  padding: 25px 30px;
  position: relative;
  font-family: 'Cambria', serif;
  color: #333;
  font-size: 16px;
  line-height: 1.2;/*separación entre oraciones*/
}


.autor-fecha-superior {  /*Autor y fecha de noticia*/
  display: flex;
  justify-content:flex-start;
  align-items: center;
  gap: 30px; /* espacio entre autor y fecha */
  font-family: 'Cambria', serif;
  color: #7e8181;
  font-size: 12px;
  margin-bottom: 3px;/*distancia entre imagenes y/o texto*/
  margin: 0;
  flex-wrap: wrap; /* evita que se desborde en pantallas pequeñas */
}



/* Comunicados */
.comunicados-laterales {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 320px;
  position: relative;
}

.comunicado {
  background: #ffffff;
  border-left: 5px solid #1e79bb;/*Borde de un color*/
  border-radius: 8px;/*borde*/
  padding: 16px 18px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comunicado h4 {
  color: #cc2027;
  margin-bottom: 8px;
  font-size: 18px;
}

.comunicado p {/*texto información del comunicado*/
  font-family: "Cambria", serif;
  font-size: 14px;
  color: #31393a;
}
 .comunicado p em {/*fecha del comunicado*/
  font-family: "Cambria", serif;
  font-size: 11px;
  color: #a6b2b4;
}

.comunicado p strong {/*Autor comunicado*/
  font-family: "Cambria", serif;
  font-size: 13px;
  color: #7e8181;
}


.comunicado:hover {/*Animcación comunicados*/
  transform: translateY(-6px);
}

/* Imagen dentro de los comunicados */
.img-comunicado {
  width: 100%;
  height: 200px;        /* Cambia la altura si quieres */
  object-fit: cover;    
  border-radius: 8px;   /* Bordes redondeados */
  margin-bottom: 10px;
  display: block;
}


/* Imagen dentro de los comunicados */
.img-comunicado3 {
  width: 100%;
  height: 400px;        /* Cambia la altura si quieres */
  object-fit: cover;    
  border-radius: 8px;   /* Bordes redondeados */
  margin-bottom: 10px;
  display: block;
}
/*  Redes sociales */
.redes-footer {
  display: flex;
  justify-content: center;
  gap: 25px;/*distancia entre iconos*/
  margin-bottom: 10px;
}

.redes-footer img {
  width: 38px;
  height: 38px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Efecto al pasar el mouse*/
.redes-footer img:hover {
  transform: scale(1.2);
}


/*Footer*/
.footer {
  text-align: center;
  padding: 20px;
  background-color: #00538f;
  color: #fff;
  font-size: 14px;
  border-top: 4px solid #6d7779;
}

/*  Responsive para celulares  */
@media (max-width: 768px) {   

  /* Estructura base */
  html, body {
    margin: 0;               /* elimina márgenes por defecto */
    padding: 0;              /* elimina padding por defecto */
    width: 100%;             /* asegura ancho completo */
    overflow-x: hidden;      /* evita desplazamiento horizontal */
  }

  /*Barra superior */
  .topbar {
    justify-content: flex-start;  /* contenido alineado a la izquierda */
    flex-direction: row;          /* organiza los elementos en fila */
    align-items: center;          
    background-color: #012f50;   
    padding: 10px 15px;           /* reduce espacio interno */
    height: 45px;                 /* hace la barra más delgada */
  }

  /* Texto ACADTYC a la izquierda */
  .logo-nombre {
    font-size: 22px;              
    margin: 0;                    /* elimina espacios extra */
  }

  .logo-nombre a {
    color: #ffffff;              
    text-decoration: none;        /* sin subrayado */
  }

  /* menú horizontal */
  .topmenu {
    position: fixed;              /* hace que quede fijo en pantalla */
    bottom: 0;                    /* lo coloca abajo */
    left: 0;                     
    width: 100%;                  
    height: 70px;                 /* altura de barra inferior */
    background-color: #012f50;    
    display: flex;                /* activa flexbox */
    justify-content: space-around; /* espacios iguales entre ítems */
    align-items: center;          
    border-top: 2px solid #1e79bb; /* borde superior azul claro */
    z-index: 99;                /* siempre encima */
    margin: 0;                   
    padding: 0;
  }

  /* Íconos acomodados */
  .topmenu a {
    display: flex;                
    flex-direction: column;       /* coloca icono arriba y texto abajo */
    align-items: center;        
    justify-content: center;      /* centra verticalmente */
    text-decoration: none;        /* sin subrayado */
    color: #ffffff;              
    font-size: 11px;            
  }

  .topmenu a img {
    width: 45px !important;      
    height: 45px !important;     
    object-fit: contain;          /* evita deformación */
    transition: transform 0.3s ease; /* animación suave */
  }

  .topmenu a:hover img {
    transform: translateY(-3px);  /* animación */
  }

  /* Textos debajo de los íconos (usando ::after) */
  .topmenu a[href="ACADTYC.html"]::after {
    content: "Inicio";            /* texto que aparece debajo */
     margin-top: -5px;
    font-size: 12px;             
  }

  .topmenu a[href="junta-directiva.html"]::after {
    content: "Junta";
    margin-top: -9px;
    font-size: 12px;
  }

  .topmenu a[href="como-ser-parte.html"]::after {
    content: "Unirte";
    margin-top: -9px;
    font-size: 12px;
  }

  .topmenu a[href="cursos.html"]::after {
    content: "Cursos";
     margin-top: -5px;
    font-size: 12px;
  }

  /* Ajustar contenido principal */
  .contenedor-noticia-y-comunicados {
    flex-direction: column;       /* ordena elementos uno debajo del otro */
    align-items: center;          
    gap: 25px;                  
    margin: 20px auto;            /* margen superior e inferior */
    width: 95%;                  
    padding-bottom: 90px;         /* evita que el menú tape contenido */
  }

  /* Noticia */
  .noticia-detallada {
    max-width: 100%;              /* ancho completo */
    padding: 0 10px;              /* espacio lateral */
  }

  .titulo-noticia {
    font-size: 24px;             
    text-align: center;           /* centra el título */
  }

  .intro-noticia {
    font-size: 16px;              
    margin-bottom: 15px;
  }

  .imagen-noticia img {
    width: 100%;                 
    height: auto;                 /* mantiene proporción */
  }

  .cuerpo-noticia {
    padding: 18px;              
    font-size: 15px;             
  }

  .autor-fecha-superior {
    flex-direction: column;       /* datos uno debajo del otro */
    align-items: flex-start;     
    gap: 6px;                     /* espacio entre ellos */
  }

  /* Comunicados */
  .comunicados-laterales {
    width: 100%;                  /* ocupa el ancho completo */
    gap: 15px;                    /* más espacio entre comunicados */
  }

  .comunicado {
    padding: 14px;                /* más compacto */
  }

  .comunicado h4 {
    font-size: 16px;             
  }

  .comunicado p {
    font-size: 13px;             
  }

  .comunicado p em {
    font-size: 11px;           
  }

  /* Footer */
  .footer {
    font-size: 13px;              
    padding: 15px;                /* reduce padding */
    padding-bottom: 85px;         /* deja espacio debajo para el menú */
  }

  .redes-footer img {
    width: 34px;                
    height: 34px;
  }
}