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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif; 
    background-image: url("images/bricks.png");
  background-repeat: repeat;       
  background-size: auto;           
  background-position: top left;   
  
}





a, button, html, body {
  cursor: url("images/cursor.png") 0 0, pointer !important;
}

html, body {
  cursor: url("images/cursor.png") 0 0, auto !important;
}



.topbar {
  background: #000;              /* fondo negro */
  display: flex;                 /* coloca imagen y nav en línea */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.banner-img {
  display: block;
  width: 60%;   /* ocupa todo el ancho disponible */
  height: auto;  /* mantiene proporción original */
  margin: 0;
  padding: 0;
}

.nav {
  margin-left: auto;             /* empuja los links a la derecha */
  display: flex;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
}

.nav a:hover {
  background: #333;
}



/* Barra de menú */
.menu-bar {
  background: linear-gradient(0deg,rgba(0, 0, 0, 1) 45%, rgba(74, 74, 74, 1) 100%);
  width: 100%;
  padding: 0;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4);
  box-sizing: border-box;
}

.menu-bar ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.menu-bar li {
  list-style: none;
  position: relative;
  border-left: 1px solid #222;
}

.menu-bar > nav > ul > li > a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #cfcfcf;
}

.menu-bar li:hover {
  background: #363636;
background: linear-gradient(0deg,rgba(54, 54, 54, 1) 0%, rgba(15, 15, 15, 1) 57%);box-shadow: rgba(50, 50, 50, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.menu-bar li:hover > a {
  color: #ffffff; 
  text-decoration: underline dotted 1px;
}

/* Dropdown */
.menu-bar ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #9c9c9c;
background: linear-gradient(0deg,rgba(156, 156, 156, 1) 69%, rgba(212, 212, 212, 1) 100%);
  display: none;
  min-width: 160px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  z-index: 100;
}

.menu-bar ul ul li a {
  display: flex;          /* coloca imagen y texto en línea */
  align-items: center;    /* centra verticalmente */
  gap: 1px;               /* espacio entre imagen y texto */
  padding: 10px 15px;
  color: #111;
  text-decoration: none;
}

.menu-bar ul ul li a:hover {
  background: #b8b8b8;
background: linear-gradient(0deg,rgba(184, 184, 184, 1) 69%, rgba(230, 230, 230, 1) 100%);
  color: solid black;
}

.menu-bar li:hover > ul {
  display: block;
}


.menu-bar > nav > ul > li > a {
  display: flex;         
  align-items: center;  
  gap: 2px;               
  padding: 6px 12px;     
  text-decoration: none;
  color: #cfcfcf;
  font-size: 14px;       
}

.menu-bar > nav > ul > li > a img {

  display: block;
}



#contenido {
  flex: 1; 
  background-image: url("images/2background.png");
  background-repeat: repeat;      
  background-size: auto;           
  background-position: top left;  
  padding: 10px 10px;
  width: 100%; 
  box-sizing: border-box;
}

#contenido article {
  background: rgba(255,255,255,0.8); 

  
  border: 1px solid #b5b5b5;
  padding: 10px;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
              rgba(0, 0, 0, 0.09) 0px 4px 2px,
              rgba(0, 0, 0, 0.09) 0px 8px 4px,
              rgba(0, 0, 0, 0.09) 0px 16px 8px,
              rgba(0, 0, 0, 0.09) 0px 32px 16px;
  box-sizing: border-box;
  
  
  border-radius: 22px 0px 0px 0px;
}



.nav a,
.menu-bar > nav > ul > li > a {
  display: flex;
  flex-wrap: wrap;        /* permite que el contenido se apile */
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  color: #cfcfcf;
  box-sizing: border-box;
  
}

.nav a img,
.menu-bar > nav > ul > li > a img {

  flex-shrink: 0;         /* el ícono no se deforma */
}
.nav a {

  border: 1px solid #333;   

}



.subtitle {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 20px;
}

/* Secciones */
#contenido section {
  margin-bottom: 25px;
}

























.highlight {
  background: linear-gradient(180deg, #d8e7c5 0%, #b5d49a 100%);
  border-left: 4px solid #7DBA54;
  padding: 6px 8px;          /* menos espacio interno */
  border-radius: 4px;        /* esquinas más compactas */
  font-size: 0.9em;          /* texto un poco más pequeño */

  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6),
              inset 0 -1px 2px rgba(0,0,0,0.1),
              0 2px 4px rgba(0,0,0,0.25);

  position: relative;
}

.highlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;               /* menos brillo superior */
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
  pointer-events: none;
}

.alert {
  background: linear-gradient(180deg, #fff3c5 0%, #f5d97a 100%);
  border-left: 4px solid #e6b800;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.9em;

  box-shadow: inset 0 1px 2px rgba(255,255,255,0.6),
              inset 0 -1px 2px rgba(0,0,0,0.1),
              0 2px 4px rgba(0,0,0,0.25);

  position: relative;
}

.alert::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
  pointer-events: none;
}































ç
.extras ul {
  padding-left: 20px;
}


/* Footer siempre abajo */
.footer {
  background: #000000;
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 54%, rgba(74, 74, 74, 1) 100%);
  color: white;
  text-align: center;
  padding: 15px;
  width: 100%; /* ocupa todo el ancho */
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
		
		
		
		h1{font-family: 'Uncial Antiqua';}
		
		
		
		
		
		
a
{color: #4242AF;
  text-decoration: none;
}

a:hover {
  color: #6060FF;
  text-decoration: underline dotted;
}
		
		
		
		
		
		
		
		
		
		::selection {
  background: #8F69D1;  
  color: white;        
}

::-moz-selection {      
  background: #8F69D1;
  color: white;
}