/* ============================================================
   HOJA DE ESTILOS — Página personal estilo "kawaii Y2K neocities"
   ============================================================
   Mismo estilo que la referencia (fondo a cuadros, cajas con
   bordes pixel, título en fuente pixel, cintas festoneadas) pero
   con la paleta de colores morado/lila/rosa que elegiste. Los
   comentarios te guían para personalizar cada parte.
   ============================================================ */

/* ------------------------------------------------------------
   1. FUENTES
   - 'Press Start 2P' -> título del sitio y títulos pixel (logo,
     encabezados de columna, tarjetas)
   - 'Quicksand'       -> todo el texto normal (redondeada, cute)
   - 'VT323'           -> etiquetas del inventario de Minecraft
   ------------------------------------------------------------ */

:root {
  /* ----------------------------------------------------------
     2. COLORES — paleta que mandaste (American Purple, Lilac,
     Cinnamon Satin, Apricot, Persian Plum). Cambiá estos 5
     valores para recolorear todo el sitio de una.
     ---------------------------------------------------------- */
  --color-purpura: #472950;    /* American Purple: bordes de las cajas de contenido */
  --color-lila: #c0a4c4;       /* Lilac: detalle secundario, ya no es el fondo */
  --color-canela: #d46a79;     /* Cinnamon Satin: acentos, links, moños/festones */
  --color-durazno: #f6cbb6;    /* Apricot: fondo de las cajas de contenido (donde va el texto) */
  --color-ciruela: #78201b;    /* Persian Plum: AHORA es el color de fondo principal del sitio */
  --color-texto: #402235;      /* color de texto general sobre fondo claro (adentro de las cajas) */
  --color-blanco: #fff8f4;

  /* Colores del inventario de Minecraft: se dejan con la paleta
     gris clásica del juego (así se reconoce al toque), no hace
     falta tocarlos salvo que quieras un inventario de otro color */
  --mc-panel: #c6c6c6;
  --mc-panel-borde-claro: #ffffff;
  --mc-panel-borde-oscuro: #555555;
  --mc-slot: #8b8b8b;
  --mc-slot-hover: #ffffff55;

  /* ----------------------------------------------------------
     3. MÁRGENES DEL SITIO
     ---------------------------------------------------------- */
  --margen-lateral: clamp(16px, 6vw, 96px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-texto);
  font-family: 'Quicksand', 'Trebuchet MS', sans-serif;
  line-height: 1.6;
  /* FONDO PRINCIPAL DEL SITIO: ahora es rojo (Persian Plum). Si
     querés que predomine otro color de la paleta, cambiá acá cuál
     variable se usa. */
  background-color: var(--color-ciruela);
  /* Fondo a cuadritos tipo "gingham", en tonos rojos. Si preferís
     un fondo liso, borrá las 2 líneas de background-image y dejá
     solo el background-color de arriba. */
  background-image:
    repeating-linear-gradient(0deg, rgba(212,106,121,.35) 0 3px, transparent 3px 26px),
    repeating-linear-gradient(90deg, rgba(212,106,121,.35) 0 3px, transparent 3px 26px);
}

a {
  color: var(--color-canela);
  font-weight: 700;
}
a:hover {
  color: var(--color-lila);
}

/* ------------------------------------------------------------
   4. MARCO GENERAL (controla el margen lateral de todo el sitio)
   ------------------------------------------------------------ */
.marco {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--margen-lateral) 60px;
}

/* ============================================================
   5. BANNER SUPERIOR
   ============================================================ */
.banner {
  position: relative;
  margin-top: 28px;
  height: clamp(220px, 34vw, 380px);
  border: 4px solid var(--color-purpura);
  outline: 6px solid var(--color-durazno);
  outline-offset: -14px;
  overflow: hidden;
  /* IMAGEN DEL BANNER:
     Reemplazá "imagenes/banner.jpg" por el nombre de tu propia
     imagen (subila a la carpeta "imagenes"). Tiene que ser una
     imagen apaisada (más ancha que alta) para que se vea bien. */
  background-image: url('imagenes/banner.jpg');
  background-size: cover;
  background-position: center;
}

/* Cinta festoneada arriba del banner, como el moño rosa de la
   referencia. Es puro CSS (círculos repetidos), no hace falta
   ninguna imagen. Para cambiar el color, tocá --color-canela. */
.banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  z-index: 2;
  background-color: var(--color-durazno);
  background-image: radial-gradient(circle at 11px 0, var(--color-canela) 10px, transparent 11px);
  background-size: 22px 22px;
  background-repeat: repeat-x;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 16px 16px;
  background: linear-gradient(180deg, rgba(71,41,80,.15), rgba(71,41,80,.55));
}

.titulo-sitio {
  /* TÍTULO DE LA PÁGINA: se edita el texto en index.html, acá solo
     se controla el estilo (tamaño, fuente, color). */
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.4rem, 4.2vw, 2.6rem);
  color: var(--color-blanco);
  text-shadow: 3px 3px 0 var(--color-ciruela);
  margin: 0;
  letter-spacing: 1px;
}

.subtitulo-sitio {
  /* SUBTÍTULO: texto en index.html, estilo acá */
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  color: var(--color-blanco);
  margin-top: 12px;
  letter-spacing: .5px;
}

/* ============================================================
   6. LAS DOS COLUMNAS (40% izquierda / 60% derecha)
   ============================================================ */
.columnas {
  display: grid;
  grid-template-columns: 40fr 60fr; /* <- proporción 40% / 60% */
  gap: clamp(20px, 4vw, 48px);
  margin-top: 40px;
}

@media (max-width: 760px) {
  .columnas {
    grid-template-columns: 1fr;
  }
}

.col-izquierda, .col-derecha {
  min-width: 0;
}

.titulo-columna {
  font-family: 'Press Start 2P', monospace;
  font-size: .95rem;
  margin: 0 0 16px;
  text-align: center;
  letter-spacing: 1px;
}
/* La de la izquierda vive adentro de la caja clara del inventario;
   la de la derecha queda directo sobre el fondo rojo, por eso cada
   una necesita un color distinto para que se lea bien */
.col-izquierda .titulo-columna {
  color: var(--color-ciruela);
}
.col-derecha .titulo-columna {
  color: var(--color-durazno);
  text-shadow: 2px 2px 0 var(--color-purpura);
}

/* ============================================================
   7. INVENTARIO DE MINECRAFT (columna izquierda)
   ============================================================
   El panel gris del inventario se deja con los colores clásicos
   de Minecraft (para que se reconozca), pero envuelto en un
   "marco" kawaii con la paleta del sitio.
   ------------------------------------------------------------ */
.col-izquierda {
  background: var(--color-durazno);
  border: 3px solid var(--color-purpura);
  padding: 20px 16px 24px;
  position: relative;
}
/* esquinitas pixel en el marco, como la referencia */
.col-izquierda::before, .col-izquierda::after,
.col-derecha .tarjeta::before, .col-derecha .tarjeta::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-canela);
}
.col-izquierda::before { top: -3px; left: -3px; }
.col-izquierda::after  { bottom: -3px; right: -3px; }

.mc-inventario {
  background: var(--mc-panel);
  border: 4px solid var(--mc-panel-borde-oscuro);
  box-shadow:
    inset 2px 2px 0 var(--mc-panel-borde-claro),
    inset -2px -2px 0 var(--mc-panel-borde-oscuro),
    6px 6px 0 var(--color-purpura);
  padding: 14px;
  image-rendering: pixelated;
  font-family: 'VT323', monospace;
}

.mc-superior {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.mc-armadura {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

.mc-personaje {
  width: 60px;
  height: 90px;
  max-width: 30%;
  flex: none;
  background: #3a3a3a;
  border: 2px solid var(--mc-panel-borde-oscuro);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.35);
  /* PERSONAJE (SKIN):
     Poné acá tu render/skin en imagenes/mc-personaje.png */
  background-image: url('imagenes/mc-personaje.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mc-slot {
  width: 36px;
  height: 36px;
  background: var(--mc-slot);
  border: 2px solid var(--mc-panel-borde-oscuro);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.5),
    inset -2px -2px 0 rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0; /* clave: sin esto, el slot "empuja" el ancho de la grilla */
}

/* Los slots de la grilla principal y la hotbar NO usan el tamaño
   fijo de arriba: se achican o agrandan para ocupar exactamente
   el ancho disponible de la columna, así el inventario nunca se
   sale de su caja. */
.mc-grid .mc-slot,
.mc-hotbar .mc-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.mc-slot img {
  width: 78%;
  height: 78%;
  image-rendering: pixelated;
  object-fit: contain;
}

.mc-slot[data-armadura="casco"]   { background-image: url('imagenes/mc-casco.png'); background-size: 28px; background-repeat: no-repeat; background-position: center; }
.mc-slot[data-armadura="pechera"] { background-image: url('imagenes/mc-pechera.png'); background-size: 28px; background-repeat: no-repeat; background-position: center; }
.mc-slot[data-armadura="pantalones"] { background-image: url('imagenes/mc-pantalones.png'); background-size: 28px; background-repeat: no-repeat; background-position: center; }
.mc-slot[data-armadura="botas"]  { background-image: url('imagenes/mc-botas.png'); background-size: 28px; background-repeat: no-repeat; background-position: center; }

.mc-slot.mc-con-link {
  cursor: pointer;
}
.mc-slot.mc-con-link:hover {
  outline: 2px solid #ffffffaa;
}
.mc-slot.mc-con-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mc-slot-hover);
  opacity: 0;
  transition: opacity .1s;
}
.mc-slot.mc-con-link:hover::after {
  opacity: 1;
}

.mc-slot a {
  position: absolute;
  inset: 0;
}

.mc-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  background: #737373;
  padding: 6px;
  margin-bottom: 8px;
}

.mc-hotbar {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  background: #737373;
  padding: 6px;
  border: 2px solid #000;
}

.mc-etiqueta {
  text-align: center;
  color: var(--color-purpura);
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  margin-top: 12px;
}

/* ============================================================
   8. COLUMNA DERECHA — TARJETAS ESTILO "WEBRING" KAWAII
   ============================================================
   Cada tarjeta es un link a otra página/sección. El contenido de
   adentro es libre: podés tener solo título, título + lista,
   título + foto, etc. Mirá los ejemplos en index.html.
   ------------------------------------------------------------ */
.collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 520px) {
  .collage { grid-template-columns: 1fr; }
}

.tarjeta {
  display: block;
  background: var(--color-durazno);
  color: var(--color-texto);
  text-decoration: none;
  padding: 18px 16px 16px;
  position: relative;
  border: 3px solid var(--color-purpura);
  /* esquinitas pixel color canela, igual que el marco del inventario */
}
.tarjeta::before { top: -3px; left: -3px; }
.tarjeta::after  { bottom: -3px; right: -3px; }

.tarjeta:hover {
  border-color: var(--color-canela);
}

.tarjeta h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: .8rem;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--color-ciruela);
}

.tarjeta p {
  margin: 0 0 6px;
  font-size: .95rem;
}

.tarjeta ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: .9rem;
}

.tarjeta .tarjeta-foto {
  width: 100%;
  height: 130px;
  object-fit: cover;
  margin-bottom: 10px;
  border: 2px solid var(--color-purpura);
}

/* ============================================================
   9. FOOTER
   ============================================================ */
footer {
  margin-top: 60px;
  text-align: center;
  color: var(--color-durazno);
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
}
footer a { color: var(--color-lila); }