* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body 
{
    height: 100%; 
}

body 
{
    background-color: rgb(100, 173, 195);
    padding-top: 25px; 
    padding-bottom: 25px;
    margin: 0;
}

img 
{
  /*height: 100%;*/
  /*width: 100%;*/
  max-width: 100%;  /* ancho máximo: el 100% del contenedor */
  height: auto;     /* ajusta altura proporcional al ancho */
  display: block;   /* opcional: elimina pequeños espacios debajo */
}

/* GLOBAL */
/* Ordenamos el contenido por columna */
.pagina 
{
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    gap: 10px;
}

/* =============================================================== */

#titulo 
{
    width: 65%;
    font-size: clamp(35px, 5vw, 50px);
    font-family: 'Amatic SC', cursive;
    text-align: center;
    color:rgb(44, 150, 189);
    padding-bottom: 15px;
}

#subtitulo 
{
    font-size: clamp(2px, 3vw, 35px);
    color:rgb(13, 76, 88);
    font-family:'Passions Conflict';
    margin-top: -20px;
}

nav 
{
    width: 100%;
    margin: 0 auto;
    padding-right: 30px;
    float: right;
    margin-top: -15px;
}

nav ul 
{   
    list-style: none; /* quita los bullets */
    padding: 0;       /* quita el padding por defecto del ul */
    margin: 0;        /* opcional, quita margen por defecto */
    display: flex;
    justify-content: center;
    gap: 0px;  
}

li 
{
    padding-left: 15px;
    padding-right: 15px;
}

a 
{ 
    text-decoration: none; /* quita el subrayado */
    list-style: none; 
}

.nav-a 
{
    font-size: clamp(15px, 5vw, 25px);
    font-family: 'Shadows Into Light', cursive;
    text-align: center;
    color:black;
}

/* Separador */
.nav-s 
{
    font-size: clamp(15px, 5vw, 50px);
    font-family: 'Pompiere', cursive;
    text-align: center;
    color:black;
}

.nav-a:hover 
{
    color:rgb(243, 140, 6);
}

header
{
    background-color: white;
    height: 15%;
    width: 45%;
    margin: 0 auto;
    padding-top: 17px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    align-items: center; /* vertical */
    border: 1.8px solid rgb(0, 0, 0);         /* borde exterior */
    outline: 1.8px solid rgb(0, 0, 0);          /* borde interior o exterior */
    outline-offset: -4.8px; 
}

/* =============================================================== */

/* ASIDE + MAIN */
.cont-principal 
{
    width: 45%;
    margin: 0 auto;
    border-radius: 12px;
    display: flex;
    gap: 10px;
}

/* =============================================================== */

aside 
{
    height: auto; /* 100% para solo contenido | auto para todo */
    width: 30%;
}

.ficha-fondo 
{
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    background-color: rgb(180, 82, 7);
    clip-path: polygon(6px 0, 100% 0, 100% 0,  100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 100%, 0 6px);
}

.ficha-fondo:hover 
{
     background-color: rgb(0, 0, 0);
}

.ficha-fondo2 
{
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    background-color: rgb(180, 82, 7);
    clip-path: polygon(6px 0, 100% 0, 100% 0,  100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 100%, 0 6px);
}

.ficha-programas 
{
    position: relative;
    padding: 5px;
    background-color: rgb(231, 153, 101);
    clip-path: polygon(8px 0, 100% 0, 100% 0,  100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 100%, 0 8px);
    border: 1.8px solid rgb(180, 82, 7); 
}

.ficha-programas:hover 
{
     border: 1.8px solid rgb(0, 0, 0); 
}

.ficha-programas2 
{
    position: relative;
    padding: 5px;
    background-color: rgb(231, 153, 101);
    clip-path: polygon(8px 0, 100% 0, 100% 0,  100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 100%, 0 8px);
    border: 1.8px solid rgb(180, 82, 7); 
}

.cont-ficha-programas 
{
    font-size: clamp(4px, 5vw, 16px);
    font-family: 'Tiny5';
    text-align: center;
    line-height: 1.5;
}

#ficha-registro 
{
    color:rgb(0, 0, 0);
    margin-bottom: 1px;
}

.linea 
{
    position: relative;
    width: 100%;
    height: 1px; /* ocupa todo el contenedor */
    border-top: 2px dashed black; /* línea recta discontinua */
    margin-bottom: 5px;
}

/* =============================================================== */

main 
{
    height: auto;
    width: 100%;
    border-radius: 12px;
    background-color: white;
    border: 1.8px solid rgb(0, 0, 0); 
}

article 
{
    height: auto;
    margin-left: 35px;
    margin-right: 30px;
    margin-top: 10px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 768px) {
  
    header 
    {
        width: 90%;
        height: 90%;
    }
    
    #titulo {
      
      font-size: 10vw;
      
    }
    
    #subtitulo 
    {
      margin: 10%;
      font-size: clamp(5px, 5vw, 24px);
    }
    
    .prog-utilizados {
      text-align: center;
    }
    
    .leng-utilizados {
     
     text-align: center;
      
    }
    
    .cont-principal 
    { 
        width: 100%;
        height: 100%; 
    }
    
    aside {
      
      width: 50%;
      margin: 0 auto;
      
    }
    
    .aside-fondo {
      display: none;
    }
  
    main {
        width: 100%;
        height: 100%;
        margin: 5%; /* elimina márgenes para que realmente ocupe todo el ancho */
        padding: 0 10px; /* opcional: agrega algo de espacio interno */
    }
}

#titulo-articulo 
{
    font-size: clamp(12px, 5vw, 32px);
    font-family: 'Amatic SC', cursive;
}

p 
{
    font-size: clamp(5px, 5vw, 14px);
    font-family:'Questrial', serif;
    line-height: 1.5;   
}

.titulo-tutorial 
{
    font-family: 'Tiny5';
    text-align: center;
}

.enlace-tutorial {
    display: block;
    font-family: 'Tiny5';
    font-size: clamp(5px, 5vw, 14px);
    text-align: center;
}

.enlace-tutorial:hover 
{
    color: rgb(180, 82, 7);
    cursor: pointer;
}

.contenido-oculto 
{
  display: none;
}

.contenido-oculto2 
{
  display: none;
}

.contenido-oculto3 
{
  display: none;
}

.contenido-oculto4 
{
  display: none;
}

#toggle:checked ~ .contenido-oculto 
{
  display: block;
}

#toggle2:checked ~ .contenido-oculto2 
{
  display: block;
}

#toggle3:checked ~ .contenido-oculto3 
{
  display: block;
}

#toggle4:checked ~ .contenido-oculto4 
{
  display: block;
}

.prog-utilizados 
{
    height: 100%;
    width: 100%;
    font-family: 'Tiny5';
    background-color: rgb(110, 179, 215);
    padding: 5px;
    padding-left: 10px;
    border-radius: 50px;
    border: 1.8px solid rgb(12, 72, 89);
    box-shadow: 0 0 0 1.8px rgb(8, 151, 191); /* crea un "borde" extra */
}

.leng-utilizados 
{
    height: 100%;
    width: 100%;
    font-family: 'Tiny5';
    background-color: rgb(110, 215, 142);
    padding: 5px;
    padding-left: 10px;
    border-radius: 50px;
    border: 1.8px solid rgb(12, 72, 89);
    box-shadow: 0 0 0 1.8px rgb(27, 139, 14); /* crea un "borde" extra */
}

.func-post
{
    height: 100%;
    width: 100%;
    font-family: 'Tiny5';
    background-color: rgb(231, 190, 102);
    padding: 5px;
    padding-left: 10px;
    border-radius: 50px;
    border: 1.8px solid rgb(12, 72, 89);
    box-shadow: 0 0 0 1.8px rgb(161, 119, 5); /* crea un "borde" extra */
}

/* =============================================================== */

.archivos-a-descargar 
{
    display: flex;
    flex-direction: column;
}

#descargar-prog1 
{
  background-color: #31a835;
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Tiny5', cursive;
  font-size: clamp(5px, 5vw, 14px);
}

/* =============================================================== */

footer 
{
    height: 10%;
    width: 95%;
    border-radius: 12px;
    margin: 0 auto;
    background-color: white;
    opacity:50%;
}

/* =============================================================== */