/* ==========================================
   PIXEL WORLD - RETRO WEB DESIGN
   Tema: Blue Pastel / Webcore / Pixel Retro

   Edita los colores desde :root.
========================================== */


/* ==========================================
   1. TIPOGRAFÍAS Y COLORES
========================================== */

@font-face {
  font-family: "Pix32";
  src: url("fonts/Pix32.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root {

  --white: #ffffff;

  --background: #eaf5ff;

  --blue-light: #dceeff;

  --blue-pastel: #b8dcf5;

  --blue-medium: #8bbce4;

  --blue-border: #719ec8;

  --blue-dark: #426b96;

  --blue-deep: #31557f;

  --text: #4b6888;

  --shadow: #a9cbe5;

}


/* ==========================================
   2. ESTILOS GENERALES
========================================== */

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {


  margin: 0;

  padding: 30px 12px;

  color: var(--text);

  font-family: "Pix32", monospace;

  font-size: 15px;

  line-height: 1.5;

  background-color: var(--background);

  /* Fondo cuadriculado estilo pixel */

  background-image:

    linear-gradient(
      #c9e1f455 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      #c9e1f455 1px,
      transparent 1px
    );

  background-size: 24px 24px;

  image-rendering: pixelated;

}

h1,
h2,
h3 {

  font-family: "Pix32", monospace;

}

a {

  color: var(--blue-dark);

  text-decoration: none;

}

a:hover {

  color: var(--blue-medium);

}

img {

  max-width: 100%;

}

button {

  font-family: inherit;

}


/* ==========================================
   3. CONTENEDOR PRINCIPAL

   Bordes rectos y sombras desplazadas
   al estilo de las interfaces retro.
========================================== */

.site-wrapper {

  max-width: 1180px;

  margin: 0 auto;

  padding: 12px;

  background: var(--white);

  border: 3px solid var(--blue-border);

  border-radius: 0;

  box-shadow:

    5px 5px 0 var(--blue-pastel),

    10px 10px 0 #ffffff;

}


/* ==========================================
   4. BARRA SUPERIOR
========================================== */

.topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 6px 12px;

  margin-bottom: 12px;

  background: var(--blue-light);

  border: 2px solid var(--blue-border);

  border-radius: 0;

  color: var(--blue-dark);

  font-size: 13px;

}

.marquee {

  flex: 1;

  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

}

.marquee span {

  display: inline-block;

  padding-left: 100%;

  animation: marquee 18s linear infinite;

}

@keyframes marquee {

  to {

    transform: translateX(-100%);

  }

}

.clock {

  flex-shrink: 0;

  padding: 1px 7px;

  background: var(--white);

  border: 1px solid var(--blue-border);

  font-family: "VT323", monospace;

  font-size: 20px;

  font-variant-numeric: tabular-nums;

}


/* ==========================================
   5. HEADER CON IMAGEN

   Puedes utilizar un banner pixel art
   de 1400 x 400 píxeles.

   Si la imagen tiene resolución baja,
   image-rendering: pixelated conservará
   los píxeles definidos.
========================================== */

.site-header {

  position: relative;

  width: 100%;

  height: 260px;

  overflow: hidden;

  background: var(--blue-light);

  border: 3px solid var(--blue-border);

  border-radius: 0;

  box-shadow: 4px 4px 0 var(--shadow);

}

.site-header img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  image-rendering: pixelated;

}


/* ==========================================
   6. NAVEGACIÓN PIXEL RETRO
========================================== */

.main-nav {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  padding: 22px 5px;

}

.nav-link {

  display: inline-block;

  min-width: 120px;

  padding: 7px 15px;

  text-align: center;

  background: var(--white);

  border: 2px solid var(--blue-border);

  border-radius: 0;

  box-shadow: 4px 4px 0 var(--shadow);

  color: var(--blue-dark);

  font-family: "Pix32", monospace;

  font-size: 15px;

  font-weight: 700;

  text-transform: uppercase;

  transition:
    background .15s,
    transform .15s,
    box-shadow .15s;

}

.nav-link:hover {

  background: var(--blue-light);

  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--shadow);

}

.nav-link.active {

  background: var(--blue-medium);

  color: var(--white);

  border-color: var(--blue-dark);

  box-shadow: 4px 4px 0 var(--blue-border);

}

.nav-link:focus-visible {

  outline: 3px dashed var(--blue-deep);

  outline-offset: 4px;

}


/* ==========================================
   7. DISTRIBUCIÓN DE TRES COLUMNAS
========================================== */

.layout {

  display: grid;

  grid-template-columns:
    minmax(0, 20fr)
    minmax(0, 55fr)
    minmax(0, 25fr);

  gap: 15px;

  align-items: start;

}

.sidebar-left,
.main-content,
.sidebar-right {

  display: flex;

  flex-direction: column;

  gap: 15px;

  min-width: 0;

}


/* ==========================================
   8. VENTANAS RETRO
========================================== */

.widget {

  min-width: 0;

  padding: 15px;

  background: var(--white);

  border: 2px solid var(--blue-border);

  border-radius: 0;

  box-shadow: 4px 4px 0 var(--shadow);

  overflow: hidden;

}


/* Barras superiores de las ventanas */

.widget-title {

  margin: -15px -15px 15px;

  padding: 7px 12px;

  background: var(--blue-medium);

  border-bottom: 2px solid var(--blue-border);

  color: var(--white);

  font-size: 17px;

  font-weight: 700;

  line-height: 1.4;

  text-transform: uppercase;

  letter-spacing: 1px;

}

.widget-title::before {

  content: "■ ";

  color: #ffffff;

}

.widget p {

  margin-top: 0;

  font-size: 14px;

}

.widget p:last-child {

  margin-bottom: 0;

}


/* Separadores decorativos */

.decoration {

  margin: 15px 0;

  text-align: center;

  color: var(--blue-medium);

  letter-spacing: 6px;

}

.center-text {

  text-align: center;

}


/* ==========================================
   9. PROFILE
========================================== */

.profile-avatar {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  max-width: 180px;

  aspect-ratio: 1;

  margin: 0 auto 15px;

  overflow: hidden;

  background: var(--blue-light);

  border: 3px solid var(--blue-border);

  border-radius: 0;

  box-shadow: 3px 3px 0 var(--shadow);

  color: var(--blue-dark);

  font-size: 38px;

}

.profile-avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  image-rendering: pixelated;

}

.profile-name {

  margin: 0 0 10px;

  text-align: center;

  font-size: 20px;

  font-weight: 700;

  color: var(--blue-dark);

}

.profile-info {

  padding: 10px;

  background: #f4faff;

  border: 1px dashed var(--blue-border);

  font-size: 13px;

}

.profile-info p {

  margin-bottom: 6px;

}

.profile-description {

  margin-top: 12px;

  padding: 10px;

  background: var(--blue-light);

  border: 2px solid var(--blue-border);

  border-radius: 0;

  font-size: 13px;

  text-align: center;

}


/* ==========================================
   10. BANNERS Y BOTONES
========================================== */

.banner-list {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

}

.mini-banner {

  display: block;

  width: 100%;

  max-width: 180px;

  padding: 5px;

  background: #f1f8ff;

  border: 2px solid var(--blue-border);

  border-radius: 0;

  text-align: center;

  box-shadow: 2px 2px 0 var(--shadow);

}

.mini-banner img {

  display: block;

  width: 100%;

  height: auto;

  border-radius: 0;

  image-rendering: pixelated;

}

.banner-placeholder {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 43px;

  padding: 6px;

  background: var(--blue-light);

  border: 1px dashed var(--blue-border);

  color: var(--blue-dark);

  font-size: 13px;

  font-weight: 700;

  text-transform: uppercase;

}


/* Botones clásicos 88 x 31 */

.button-grid {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 7px;

}

.web-button {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 88px;

  height: 31px;

  background: var(--blue-light);

  border: 2px solid var(--blue-border);

  border-radius: 0;

  color: var(--blue-dark);

  text-align: center;

  font-size: 12px;

  font-weight: 700;

  box-shadow: 2px 2px 0 var(--shadow);

}

.web-button:nth-child(2) {

  background: #e7f3ff;

}

.web-button:nth-child(3) {

  background: var(--blue-pastel);

}

.web-button:nth-child(4) {

  background: #edf8ff;

}


/* ==========================================
   11. PÁGINAS DE CONTENIDO
========================================== */

.page {

  display: flex;

  flex-direction: column;

  gap: 15px;

  animation: pageFade .2s steps(3);

}

.page[hidden] {

  display: none !important;

}

@keyframes pageFade {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}


/* ==========================================
   12. HOME
========================================== */

.welcome-text {

  padding: 12px;

  background: #f5faff;

  border: 2px dashed var(--blue-border);

  border-radius: 0;

}


/* ==========================================
   13. STARS: TARJETAS DE OCS
========================================== */

.section-intro {

  padding: 12px;

  margin-bottom: 15px;

  background: var(--blue-light);

  border: 2px dashed var(--blue-border);

  border-radius: 0;

}

.oc-card {

  display: grid;

  grid-template-columns:
    minmax(0, 160px)
    minmax(0, 1fr);

  gap: 15px;

  padding: 12px;

  margin-bottom: 15px;

  background: #f8fbff;

  border: 2px solid var(--blue-border);

  border-radius: 0;

  box-shadow: 3px 3px 0 var(--shadow);

}

.oc-card:last-child {

  margin-bottom: 0;

}

.oc-image {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  background: var(--blue-light);

  border: 2px solid var(--blue-border);

  border-radius: 0;

  font-size: 35px;

}

.oc-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  image-rendering: pixelated;

}

.oc-info h3 {

  margin: 0 0 7px;

  color: var(--blue-dark);

  font-size: 19px;

}

.oc-info p {

  margin: 0 0 8px;

  font-size: 13px;

}

.oc-details {

  padding-top: 8px;

  border-top: 2px dashed var(--blue-border);

  font-size: 12px;

}


/* ==========================================
   14. MY WORLD: GALERÍAS
========================================== */

.world-category {

  margin-bottom: 22px;

}

.world-category:last-child {

  margin-bottom: 0;

}

.world-category h3 {

  margin: 0 0 12px;

  padding: 6px 10px;

  background: var(--blue-light);

  border: 2px solid var(--blue-border);

  color: var(--blue-dark);

  font-size: 16px;

  text-transform: uppercase;

}

.world-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

}

.world-item {

  margin: 0;

  padding: 7px;

  background: #f7fbff;

  border: 2px solid var(--blue-border);

  border-radius: 0;

  box-shadow: 2px 2px 0 var(--shadow);

}

.world-image {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  background: var(--blue-light);

  border: 1px solid var(--blue-border);

  border-radius: 0;

  color: var(--blue-medium);

  font-size: 25px;

}

.world-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  image-rendering: pixelated;

}

.world-item figcaption {

  padding: 7px 2px 2px;

  text-align: center;

  color: var(--blue-dark);

  font-size: 13px;

  font-weight: 700;

}


/* ==========================================
   15. COOL STUFF: ENLACES
========================================== */

.link-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.random-link {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px;

  background: #f5faff;

  border: 2px solid var(--blue-border);

  border-radius: 0;

  box-shadow: 2px 2px 0 var(--shadow);

  transition: background .15s;

}

.random-link:hover {

  background: var(--blue-light);

}

.link-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  width: 35px;

  height: 35px;

  background: var(--blue-pastel);

  border: 1px solid var(--blue-border);

  border-radius: 0;

  font-size: 17px;

}

.link-info strong {

  display: block;

  color: var(--blue-dark);

  font-size: 15px;

}

.link-info span {

  display: block;

  color: var(--text);

  font-size: 12px;

}


/* ==========================================
   16. FOOTER
========================================== */

.site-footer {

  margin-top: 20px;

  padding: 14px;

  background: var(--blue-light);

  border: 2px solid var(--blue-border);

  border-radius: 0;

  text-align: center;

  color: var(--blue-dark);

  font-size: 13px;

  box-shadow: 3px 3px 0 var(--shadow);

}


/* ==========================================
   17. RESPONSIVE: TABLET
========================================== */

@media (max-width: 950px) {

  .layout {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 2.5fr);

  }

  .sidebar-right {

    grid-column: 1 / -1;

  }

  .banner-list {

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: center;

  }

}


/* ==========================================
   18. RESPONSIVE: MÓVIL
========================================== */

@media (max-width: 650px) {

  body {

    padding: 10px 6px;

  }

  .site-wrapper {

    padding: 7px;

  }

  .site-header {

    height: 170px;

  }

  .main-nav {

    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 9px;

  }

  .nav-link {

    min-width: 0;

    padding: 7px;

    font-size: 13px;

  }

  .layout {

    display: flex;

    flex-direction: column;

  }

  .main-content {

    order: 1;

    width: 100%;

  }

  .sidebar-left {

    order: 2;

    width: 100%;

  }

  .sidebar-right {

    order: 3;

    width: 100%;

  }

  .oc-card {

    grid-template-columns: 1fr;

  }

  .oc-image {

    max-width: 220px;

    margin: 0 auto;

  }

  .world-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

  .profile-avatar {

    max-width: 140px;

  }

}


/* ==========================================
   19. ACCESIBILIDAD
========================================== */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }

  .marquee span {

    animation: none;

    padding-left: 0;

  }

  .page {

    animation: none;

  }

}