@font-face {
    font-family: 'altehaasgrotesk'; /* El nombre que tú le quieras dar */
    src: url('AlteHaasGroteskRegular.ttf'); /* El nombre exacto de tu archivo subido */
 }




body {
 
  font-size: 0.875em;
  font-family: 'altehaasgrotesk';
  padding: 0;
  margin: 0;
  background: linear-gradient(rgb(167, 232, 223, 0.15), rgb(167, 232, 223, 0.15)), url("nnnnnnnnnnnnn.gif");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
 
  }
  
.wrapper {
  background: none;
  top: 0;
  margin: 0 auto;
  width: 870px;
  }
  
.sidebar-left, .sidebar-right {
  width: 175px;
  }
  
.main {
  width: 500px;
  margin-left: 185px;
  }
  
.sidebar-left {
  margin-left: 0px;
  }
  
.wrapper, .links a {
  color: #4f3d46;
  }
  
.box {
  border: 3px double #333;
  background: #FAFAEB;
  padding: 0;
  }
  
.header {
  border: 3px double #333;
  background: linear-gradient(rgb(190, 222, 126, 0.75), rgb(190, 222, 126, 0.75));
  text-align: center;
  margin-top: 15px;
  top: 0;
  height: auto;
  }
  
  
  /* Modifica el contenedor de los links para centrarlos */
.links {
  margin-top: 20px;
  text-align: left; /* Centra todo el grupo de enlaces */
}

/* Cambia el comportamiento de cada link individual */
.link {
  display: inline-block; /* ¡La magia! Los pone uno al lado del otro */
  margin: 0 25px;        /* Espacio de separación a la izquierda y derecha de cada uno */
}
  
.title { /*suppress title, since we're putting the title as text in the header box*/
  display: none;
  margin: 1em;
  }

.footer {
  height: 0;
  }
  
.box h1, .box h2, .box h3, .box h4 {
  background: #AEE344;
  margin: 0;
  padding: 0.35em 0.25em 0.3em 0.25em;
  text-align: center;
  border-bottom: 3px double #333;
  }
  
.inner {
  padding: 0.25em 1em 0.3em 1em;
  font-size: 1.075em;
  }
  
  
/* For narrow screens: slightly narrows sidebars, and makes the width
 * of the main/center div flexible (sized relative to viewport width.)
 */
@media(max-width:880px) {
  .wrapper {
    width: calc(340px + 50vw);
    }
  .sidebar-left, .sidebar-right {
    width: 175px;
    }
  .main {
    width: 50vw;
    margin-left: 170px;
    }
  }

/*Mobile compatibility. Just turns it all into a vertical layout.*/  
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .sidebar-left, .main, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  }
  
  
  
  /* ---- CÓDIGO PARA REPARAR LA ESTRUCTURA DE COLUMNAS ---- */

/* Activamos el contenedor de las columnas */
.wrapper-2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Forzamos el orden correcto porque en el HTML la caja principal está primero */
.main {
  order: 2;
  width: 500px;
  margin-left: 0 !important; /* Borra el espacio viejo para que Flexbox lo acomode bien */
}

.sidebar-left {
  order: 1;
  width: 175px;
}

.sidebar-right {
  order: 3;
  width: 170px;
}

/* Esto asegura que si se ve en un celular, las columnas se vuelvan a acomodar hacia abajo */
@media(orientation:portrait) {
  .wrapper-2 {
    display: flex;
    flex-direction: column;
  }
  .main, .sidebar-left, .sidebar-right {
    width: 100% !important;
    order: unset; /* Regresa al orden normal en móvil */
    margin: 10px 0;
  }
}








/* ====================================================
   NUEVOS AJUSTES DE ESPACIOS Y COLUMNAS
   ==================================================== */

/* 1. SEPARAR LAS CAJAS (Para que dejen de tocarse verticalmente) */
.box {
  margin-bottom: 18px; /* Crea un colchón de espacio abajo de cada caja */
}

/* 2. SEPARAR EL MENÚ DE LAS CAJAS DE ABAJO */
.links {
  margin-bottom: 20px; 
}

/* 2.5 ESTILOS DE LOS ENLACES (Sin línea y en negrita) */
.links a, .link a {
  font-weight: bold !important; 
  text-decoration: none !important;
  color: #4f3d46; /* Asegura que no se pongan azules por defecto */
  background-color: rgba(255, 255, 255, 0.4)!important; /* 🎨 Cambia el cuadro a un azul clarito (o el color que quieras) */
  
}

/* 3. MANDAR LAS BARRAS A LOS LADOS (Estructura de 3 columnas) */
.wrapper-2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Forzamos el orden correcto porque en tu HTML la caja principal está escrita primero */
.main {
  order: 2;
  width: 500px;
  margin-left: 0 !important; /* Borra el margen viejo para que Flexbox las acomode bien */
}

.sidebar-left {
  order: 1;
  width: 175px;
  margin-left: 0 !important;
}

.sidebar-right {
  order: 3;
  width: 175px;
}

/* Evita que el flexbox rompa el diseño cuando lo abras en un celular */
@media(orientation:portrait) {
  .wrapper-2 {
    flex-direction: column;
  }
  .main, .sidebar-left, .sidebar-right {
    width: 92vw !important;
    order: unset !important;
    margin: 10px auto !important;
  }
}




/* ====================================================
   AGREGAR ESTO AL FINAL DE TODO TU ARCHIVO:
   Forzar el tamaño grande (Zoom) sin romper las columnas
   ==================================================== */

/* 1. Agranda la letra de toda la página */
body {
  font-size: 1.18em !important;
}

/* 2. Ensancha el contenedor principal */
.wrapper {
  width: 1100px !important;
}

/* 3. Ensancha la caja del centro */
.main {
  width: 610px !important;
}

/* 4. Ensancha las dos barras laterales */
.sidebar-left, .sidebar-right {
  width: 210px !important;
}

/* 5. Ajusta los títulos para que vayan acorde al tamaño */
.header h1 { font-size: 2.3em !important; }
.box h2 { font-size: 1.35em !important; }
.box h3 { font-size: 1.2em !important; }



/* Asegura que las imágenes se adapten al ancho de su contenedor sin desbordarse */
.box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto; /* Centra la imagen y le da un pequeño margen arriba y abajo */
}


/* Sin subrayado por defecto */
a {
  text-decoration: none !important;
}

/* El subrayado aparece SOLO cuando pasas el mouse encima */
a:hover {
  text-decoration: underline !important;
}


.textodeimagen {
  font-size: 0.85em !important; 
  color: #666; /* Tip: un gris más claro hace que se note más que es texto secundario */
}



.table {
  width: 100%;
  border-collapse: collapse; /* Une los bordes en una sola línea */
}

th, td {
  border: 1px solid #CFCCBC; /* Color del borde */
  text-align: left;
  padding: 8px; /* Espaciado interno */
}

th {
  background-color: #F0F3F7; /* Fondo gris para los encabezados */
}