body{
background:#fffcfd;
font-family:Verdana;
margin:0;
}

/* contenedor */

#container{
width:1100px;
margin:auto;
}

/* header */

header{
text-align:center;
font-size:40px;
color:#ffffff;
font-weight:bold;

border: 10px solid transparent;
width:1080px;
height:160px;

border-image: url(https://i.postimg.cc/W42RbqxB/tumblr-75d3c56db0b12fcc9cf3daca53025232-6e70ec0c-500.png) 50 round;

overflow:hidden;
}

.header-img{
position:relative;
width:100%;
height:100%;
}

.header-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter: grayscale(100%);
}

.header-text{
position:absolute;
bottom:5px;   /* distancia desde abajo */
left:15px;     /* distancia desde la izquierda */
color:rgb(0, 0, 0);
text-shadow: #fffcfd;
 font-family: 'Times New Roman', Times, serif;
font-size:24px;
}




/* MENU SUPERIOR */

.topmenu{
display:flex;
background:#4A4E69;
border-bottom:3px solid #262525;
}

.tabbtn{
flex:1;
padding:14px;
border:none;
background:#adb5bd;
color:#ffffff;
font-weight:bold;
cursor:pointer;
font-size:16px;
transition:0.3s;
}

.tabbtn:hover{
background:#e3e3e3;
}

/* layout */

.layout{
display:flex;
gap:20px;
margin-top:20px;
}

/* SIDEBAR */

.sidebar-left{
width:220px;
padding:10px;
border: 10px solid transparent;
border-image: url(https://i.postimg.cc/W42RbqxB/tumblr-75d3c56db0b12fcc9cf3daca53025232-6e70ec0c-500.png) 50 round;
}

/* botones del sidebar */

.sidebtn{

display:block;
width:100%;
padding:10px;
margin-bottom:6px;

background:#adb5bd;
border:none;

color:white;
font-weight:bold;

cursor:pointer;

transition:0.3s;
}

.sidebtn:hover{
background:#e3e3e3;

}

/* contenido */

.content{
flex:1;

}

/* ventanas */

.window{

background:#e3e3e3;
padding:10px;

border: 10px solid transparent;
border-image: url(https://i.postimg.cc/W42RbqxB/tumblr-75d3c56db0b12fcc9cf3daca53025232-6e70ec0c-500.png) 50 round;


border-radius:10px;

animation:fade 0.4s;

}

/* animacion */

@keyframes fade{

from{
opacity:0;
transform:translateY(10px);
}

to{
opacity:1;
transform:translateY(0px);
}

}

/* tabs */

.tabcontent{
display:none;
}

/* sidebar derecha */

.sidebar-right{
width:220px;
padding:10px;
border: 10px solid transparent;
border-image: url(https://i.postimg.cc/W42RbqxB/tumblr-75d3c56db0b12fcc9cf3daca53025232-6e70ec0c-500.png) 50 round;
}

/* badges */

.badges span{
background:#a3a3a3;
padding:4px 8px;
margin:3px;
display:inline-block;
border-radius:10px;
color: #e3e3e3;
font-size:12px;

}

.mini-scroll {
  width: 100%;
  height: 550px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 2px solid #ffffff;
  padding: 5px;
font-size: 12px;
  
}

.disk {
border-width:12px;
border-style:solid;
border: 10px solid transparent;
border-image: url("https://i.postimg.cc/RhJCpKqH/testborder3.png") 11 fill round;    }

h2, h3{
background-color: #ffffff; 
border-radius: 3px; 
text-align: center;
font-family: Copperplate, Papyrus, fantasy;

}

h6{
background-color: #ffffff; 
border-radius: 3px; 
text-align: center;
align-items: center;
font-size: 15px;
margin-bottom: 0%;
margin-top: 10px;
margin-left: 20px;
font-family: Copperplate, Papyrus, fantasy;
}

h5 {
    background-color: rgba(255, 255, 255, 0.9); /* Un poco de transparencia ayuda */
    /* 0px de desplazamiento, 15px de difuminado, 2px de expansión */
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.8); 
    padding: 5px 15px;
    border-radius: 30px; /* Bordes muy redondeados para estilo "pastilla" */
    display: inline-block; /* Para que el fondo no ocupe todo el ancho */
    margin-bottom: 0%;
    margin-top: 3px;
}

p{
 color: #666363;
 font-family: 'Times New Roman', Times, serif;
 font-style: inherit;
 font-size: 12px;
 letter-spacing: 0.20px;
 text-align: justify;
 margin: 9px;
}

.amigos2 p{
     margin-left: 20px;
}

.amigos3{
 margin-right: 15px;

}
a{
    color: #823791;
    text-decoration: none;

}
a:hover{
    color:#000000;
}

hr {
    border:0;
    height:1px;
    background-image:linear-gradient(to right, rgba(2, 0, 0, 0), rgba(129, 119, 119, 0.75), rgba(163, 162, 162, 0));
}



/* galeria */
.galeria{
display:grid;
grid-template-columns:repeat(5,90px);
gap:8px;
justify-content:center;
}

/* tarjeta */
.card{
position:relative;
}

/* caja imagen */
.imgbox{
border-radius:15px;
overflow:hidden;
border:2px solid rgb(108, 100, 104);
}

/* imagen */
.imgbox img{
width:100px;
height:90px;
object-fit:cover;
display:block;
transition:0.3s;
}

/* efecto zoom */
.card:hover img{
transform:scale(1.1);
}

/* info encima */
.info{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);

padding:6px 8px;
font-size:12px;
text-align:center;

background:rgba(255,255,255,0.9);
border:2px solid rgb(0, 0, 0);
border-radius:8px;
color:#030202;

opacity:0;
transition:0.2s;

z-index:10;
}

/* mostrar info */
.card:hover .info{
opacity:1;
}

.galeria2{
display:grid;
grid-template-columns: repeat(auto-fill,70px);
gap:10px;
justify-content:center;
}

.galeria2 img{
width:100%;
display:block;
border-radius:6px;
    transition:0.3s;
    filter: grayscale(10%);
}

.galeria2  img:hover{
    transform:scale(1.05);
}
.galeria3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    transition:0.3s;
}

.galeria3 img:hover{
    transform:scale(1.05);
}



.container {
  width: 450px;
  margin: 20px auto;
  border: 3px solid #969294;
  border-radius: 10px;
  background: #dddcdd;
  padding: 10px;
}

.title {
  text-align: center;
  font-size: 15px;
  background: #ffffff;
  color: rgb(0, 0, 0);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  letter-spacing: 2px;
}

.list {
  max-height: 240px;
  overflow-y: auto;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 2px dashed #fffbfb;
}

.item:first-child {
  border-top: none;
}

.icon {
  width: 50px;
  height: 30px;
  background: #d8d4d5;
  color: white;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin-right: 10px;
}

.icon-img {
  width: 60px;
  height: 30px;
  border-radius: 6px;
  margin-right: 10px;
}

.text a {
  color: #615c5e;
  font-weight: bold;
  text-decoration: underline;
}



/* LINKS GRID MÁS COMPACTO */
.links{
    display:grid;
    grid-template-columns: repeat(2, auto);
    justify-content:center;
    gap:8px;
}

/* BOTONES MÁS PEQUEÑOS */
.link{
    display:flex;
    align-items:center;
    gap:6px;

    text-decoration:none;
    color:#222;
    padding:6px 10px;

    border:1px solid #aaa;
    background:#f2f2f2;

    font-size:12px;
    letter-spacing:1px;

    transition:0.3s;
}

/* ICONOS */
.link img{
    width:16px;
    height:16px;
    filter: grayscale(100%); /* look vintage */
}

/* HOVER */
.link:hover{
    background:#dcdcdc;
    transform:scale(1.05);
    box-shadow:0 0 4px rgba(0,0,0,0.2);
}

/* OPCIONAL: hover icon */
.link:hover img{
    filter: grayscale(0%);
}