/* RESET */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #eee;
  font-family: Arial, sans-serif;
  padding: 20px; /* solo aire alrededor del conjunto (como tu hoja) */
}

/* ===== HEADER FULL WIDTH ===== */
.topbar {
  background: #f8f8f8;
  border: 2px solid #111;      /* marco del header */
  border-bottom: 2px solid #111;
  max-width: 1000px;           /* para que coincida con tu boceto dentro de la hoja */
  margin: 0 auto;              /* centrado */
}

/* ===== BANNER ===== */
.banner {
  position: relative;
  width: 100%;
  height: 140px; /* ajusta según tu boceto */

  background-image: url("https://i.ibb.co/CjJQgvN/zebra-print-background-78370-2976.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-bottom: 2px solid #111;
}

/* PNG del texto encima */
.banner-text {
  position: absolute;
  left: 24px;    /* separación izquierda */
  bottom: 24px;  /* separación abajo */

  width: 320px;  /* tamaño del texto */
  height: auto;
}

/* Contenido del header alineado */
.topbar-inner {
  padding: 16px 0 0;           /* sin padding lateral para que las líneas lleguen */
}

/* TÍTULO */
.title {
  font-size: 48px;
  font-weight: 700;
  padding: 0 16px 12px;        /* aire SOLO al texto */
}

/* NAVBAR separado por línea arriba */
.navbar {
  border-top: 2px solid #111;
  padding: 10px 32px;

  display: flex;
  align-items: center;

  justify-content: flex-start; /* todos a la izquierda */
  gap: 28px;                   /* espacio ENTRE usuarios */

  font-size: 14px;
}
.nav-item img {
  width: 16px;   /* cambia aquí el tamaño */
  height: 16px;
  display: block;
}
/* ===== CONTENEDOR DE CAJAS ===== */
.page {
  max-width: 1000px;
  margin: 18px auto 0;         /* separación entre header y cajas */
  background: #f8f8f8;
  border: 2px solid #111;
}

/* COLUMNAS PEGADAS */
.cols {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;                      /* columnas pegadas */
}

/* PILAS DE CAJAS */
.col {
  display: flex;
  flex-direction: column;
}

/* CAJAS PEGADAS */
.box {
  border: 2px solid #111;
  background: #fff;
  padding: 10px;
  margin: 0;                   /* cajas pegadas */
}

/* evitar doble borde entre cajas verticales */
.col .box:not(:first-child) {
  border-top: 0;
}

/* evitar doble borde en el centro entre columnas */
.left .box {
  border-right: 0;
}

/* Links */
ul { margin: 0; padding-left: 18px; }
a { color: #111; text-decoration: none; border-bottom: 1px dotted #111; }

/* Blinkies / stamps placeholders */
.blinkies { display: grid; gap: 6px; margin-bottom: 10px; }
.blinkie { border: 1px dashed #111; padding: 6px; text-align: center; }

.stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stamp { border: 1px dashed #111; height: 20px; display: grid; place-items: center; }

/* Spotify placeholder */
.spotify {
  border: 1px dashed #111;
  height: 120px;
  display: grid;
  place-items: center;
}

/* Chibis 2x2 */
.chibis {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 🔥 2 columnas */
  gap: 10px;                      /* espacio entre gifs */
}


.chibis img {
  width: 100%;
  height: auto;
  display: block;
}

/* About: gif esquina derecha abajo */
.about {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.about-gif {
  width: 90px;
  height: auto;
  display: block;
}

/* Feeling: texto + gif */
.feeling {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.feeling img {
  width: 40px;
  height: auto;
  display: block;
}

/* MÓVIL */
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
  .left .box { border-right: 2px solid #111; }
}

/* FORZAR 2x2 CHIBIS */
.chibis{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.chibi{
  height: 120px;          /* ajusta si quieres más grande */
  overflow: hidden;
   min-width: 0; /* ✅ evita que el iframe rompa el grid */
}

.chibi iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

/* NAVBAR: una fila, items repartidos */
.navbar{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* a lo largo */
  gap: 0 !important;
  padding: 10px 32px 14px !important;
  border-top: 2px solid #111;
  font-size: 14px;
}

/* CADA ITEM: icono a la izquierda, texto a la derecha */
.nav-item{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* ICONOS */
.nav-item img{
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}