/* Fuente Minecraft */
  @font-face {
    font-family: 'Minecraft';
    src: url('/assets/img/8afe905603866e50.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  /* CSS Reset y Base */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Minecraft', 'Open Sans', Arial, sans-serif;
    background: url(/assets/img/949383e1e7b94384.png);
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #333;
    overflow-x: hidden;
    min-height: 100vh;
  }

  a {
    color: #5e79ab;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  /* Contenedor principal */
  .page {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 50px;
    background-image: url(/assets/img/992b0e8f0d77e61d.png), url(/assets/img/fd0d46c275689bf3.jpg);
    background-position: bottom center, top center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto, 100% 100%;
    min-height: 100vh;
  }

  /* Página principal */
  #index_page {
    margin-top: 900px;
  }

  /* Header con imágenes */
  .index_head_image {
    position: absolute;
    pointer-events: none;
  }

  #index_head_logo {
    left: -32px;
    top: -160px;
    z-index: 30;
    filter: brightness(0) invert(1) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    width: auto !important;
    height: auto !important;
    max-width: 860px;
  }

  #index_head_ghast {
    left: 520px;
    top: -700px;
    z-index: 5;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }

  #index_head_front {
    left: -285px;
    top: -391px;
    z-index: 15;
  }

  #index_head_dragon {
    left: -280px;
    top: -850px;
    z-index: 5;
    animation: float 3.5s ease-in-out infinite;
    animation-delay: 0.5s;
    width: auto;
    height: auto;
    max-width: 539px;
  }

  /* Botones sociales */
  .fb-like {
    text-align: center;
    margin: 20px 0;
  }

  /* Contenido de la página */
  #index_page_content {
    padding: 200px 0px 200px 0px;
    text-align: center;
    position: relative;
    z-index: 20;
    background-image: url(/assets/img/fd0d46c275689bf3.jpg);
    background-repeat: repeat;
  }

  /* Cajas de información */
  #index_info {
    margin-top: 60px;
    position: relative;
    height: 300px;
    width: 900px;
    left: -50px;
  }

  .index_info_box {
    float: left;
    height: 300px;
    width: 280px;
    margin-right: 20px;
    background-image: url(/assets/img/f6a08cf2c976a587.png);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: transform 0.3s ease;
  }

  .index_info_box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }

  .index_info_box_text {
    padding: 160px 10px 10px 10px;
    font-size: 20px;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    transform: translateY(-50%);
    color: #fff;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
  }

  .index_info_box_text a {
    color: #fff;
    text-decoration: underline;
  }

  .index_info_box::after {
    content: "";
    display: table;
    clear: both;
  }

  #index_info::after {
    content: "";
    display: table;
    clear: both;
  }

  .index_info_box_frame {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    margin-top: -20px;
    width: 100%;
    height: auto;
  }

  #index_info_box_frame1 {
    transform: rotate(2deg);
  }

  #index_info_box_frame2 {
    transform: rotate(-2deg);
  }

  #index_info_box_frame3 {
    transform: rotate(3deg);
  }

  /* Enlaces/Botones principales */
  #index_links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 50px auto 60px auto;
    flex-wrap: wrap;
  }

  .index_links_button {
    position: relative;
    display: inline-block;
    width: 125px;
    height: 125px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  }

  .index_links_button:hover {
    transform: scale(1.05);
  }

  .index_links_button:active {
    position: relative;
    top: 3px;
    box-shadow: none;
  }

  /* Botón de descarga */
  .download-button {
    display: block;
    width: 350px;
    height: 175px;
    margin: 30px auto;
    background: url(/assets/img/85847d74b0b9304e.png) no-repeat center;
    background-size: contain;
    transition: all 0.3s ease;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  }

  .download-button:hover {
    background: url(/assets/img/85847d74b0b9304e.png) no-repeat center;
    background-size: contain;
    transform: scale(1.05);
  }

  .download-button:active {
    position: relative;
    top: 3px;
    box-shadow: none;
  }

  /* Tabla de showcase */
  #showcase_table_container {
    margin: 60px auto;
    text-align: center;
    background-image: url(/assets/img/f6a08cf2c976a587.png);
    padding: 40px 20px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    position: relative;
    z-index: 25;
  }

  #showcase_table_container h2 {
    font-size: 28px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
  }

  #showcase_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 15px 25px;
    margin: 0 auto;
    color: transparent !important;
  }

  #showcase_table tbody {
    color: transparent !important;
  }

  #showcase_table tr {
    color: transparent !important;
  }

  #showcase_table td {
    padding: 5px;
    vertical-align: top;
    width: 33.33%;
    text-align: center;
    color: #ffffff !important;
  }

  #showcase_table td * {
    color: inherit !important;
  }

  .preview {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease;
    cursor: pointer;
    margin-bottom: 10px;
    width: 100%;
    max-width: 230px;
    height: auto;
  }

  .preview:hover {
    transform: scale(1.05);
  }

  .preview img.frame {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
    pointer-events: none;
  }

  .preview .post-thumbnail {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%);
    width: 90%;
    height: 125px;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }

  .title {
    font-size: 20px;
    font-weight: normal;
    color: #ffffff;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
    margin: 10px 0 5px;
    display: block;
  }

  .title a {
    color: #ffffff !important;
    text-decoration: none;
  }

  .title a:hover {
    text-decoration: underline;
  }

  #index_links_full_showcase {
    display: inline-block;
    width: 262px;
    height: 70px;
    margin: 20px auto;
    background: url(/assets/img/a70264a6e0c7691b.png) no-repeat center;
    background-size: contain;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
  }

  #index_links_full_showcase:hover {
    transform: scale(1.05);
  }

  #index_links_full_showcase:active {
    position: relative;
    top: 3px;
    box-shadow: none;
  }

  /* Posts de Blogger */
  .blog-posts {
    margin: 40px 0;
  }

  .post {
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #7b6d56;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .post-title {
    font-size: 28px;
    color: #172526;
    margin-bottom: 15px;
  }

  .post-title a {
    color: #172526;
    text-decoration: none;
  }

  .post-title a:hover {
    color: #5e79ab;
  }

  .post-header {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }

  .post-body {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
  }

  .post-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #ddd;
    font-size: 14px;
    color: #666;
  }

  /* Footer */
  #page_footer { position: relative; z-index: 40; clear: both; width: 100%; margin: 40px 0 0; padding: 26px 15px 32px; box-sizing: border-box; background: #181818; border-top: 4px solid #2f2f2f; box-shadow: 0 -4px 8px rgba(0,0,0,0.4); color: #c7c7c7; font-size: 13px; text-align: center; line-height: 1.7; }
#page_footer a { color: #e8e8e8; }
#page_footer .footer-inner { max-width: 800px; margin: 0 auto; }
#page_footer .footer-brand { color: #fff; font-size: 15px; margin: 0 0 6px; }
#page_footer .footer-tags { color: #9adf67; margin: 0 0 10px; font-size: 12px; }
#page_footer .footer-legal { margin: 0 0 8px; font-size: 12px; color: #a8a8a8; }
#page_footer .footer-credit { margin: 0; font-size: 12px; }


  /* Responsive */
  @media (max-width: 768px) {
    .page {
      max-width: 100%;
    }

    #index_page {
      margin-top: 500px;
    }

    #index_info {
      width: 100%;
      height: auto;
      left: 0;
    }

    .index_info_box {
      float: none;
      width: 90%;
      margin: 20px auto;
    }

    #index_head_ghast,
    #index_head_dragon {
      display: none;
    }

    #index_head_logo {
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      height: auto;
    }

    #index_head_front {
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: auto;
    }

    #showcase_table td {
      display: block;
      width: 100% !important;
    }

    #showcase_table tr {
      display: block;
    }

    #index_links {
      width: 100%;
    }

    .index_links_button {
      margin: 10px;
    }
  }

  /* Sidebar */
  .sidebar {
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid #7b6d56;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
  }

  .sidebar h2 {
    font-size: 20px;
    color: #172526;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #7b6d56;
  }

  .sidebar ul {
    list-style: none;
  }

  .sidebar li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
  }

  .sidebar li:last-child {
    border-bottom: none;
  }

  /* Widget personalizado */
  .widget {
    margin-bottom: 30px;
  }

  .widget-content {
    padding: 15px;
  }
  
/* == Fix showcase: grid en fila unica (reemplaza hack CDATA) == */
@media (min-width: 769px) {
  #showcase_table { display: block; }
  #showcase_table tbody { display: block; }
  #showcase_table tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px 15px; }
  #showcase_table td { display: block; width: auto; }
}