/*
     aquí hay valores reutilizables como los colores, tamaños, radio, etc...
      recuerda: si usas variables nos facilita cambiar el diseño más adelante
       sin tener que meter las manazas en todo el CSS.
    */
  :root {
      --bg: #f7f7f7;
      /* este es el color de fondo de la página */
      --card-bg: #fff;
      /* el fondo de las tarjetas/pines por si no le pongo na*/
      --muted: #6b7280;
      /* el color secundario del texto*/
      --accent: #e60023;
      /* CUIDAO este es el color del boton crear*/
      --glass: rgba(255, 255, 255, 0.75);
      /* esto da un efecto tipo vidrio translúcido to guapo */
      --max-width: 1200px;
      /* el ancho máximo del contenedor principal */
      --gap: 16px;
      /* deja un espacio estándar (masonry gap) */
      --radius: 12px;
      /* este es el radio del borde de las tarjetas */
  }

  * {
      box-sizing: border-box;
      /* es un manejo más intuitivo del tamaño */
  }

  html,
  body {
      height: 100%;
      /* el html y el body ocupan el 100% de la altura */
  }

  body {
      margin: 0;
      /* quitamos los márgenes por defecto del navegador */
      /* fuente y apariencia general */
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: var(--bg);
      /* usamos la variable de fondo */
      color: #111827;
      /* el color principal del texto */
      line-height: 1.35;
      /* separación entre líneas */
  }

  /* RECUERDA el header tiene la marca, la búsqueda y acciones */
  header {
      position: sticky;
      /* se queda fijo en la parte superior al hacer scroll */
      top: 0;
      /* pegado al borde superior */
      z-index: 50;
      /* por encima del contenido */
      display: flex;
      /* layout flexible para alinear elementos */
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      /* fondo semitransparente con efecto degradado para que se vea elegante */
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      backdrop-filter: blur(6px);
      /* efecto blur detrás del header */
  }

  /* contenedor centrado con ancho máximo */
  .contenedor {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      /* separa marca, contenido y las acciones */
  }

  /* el logo y el nombre */
  .marca {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      /* NO subrayado */
      color: inherit;
      /* hereda el color del texto */
  }

  .logo {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      /* forma redondeada del logo */
      background: linear-gradient(135deg, #ff5a79, #ff9aa2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 18px;
      flex: 0 0 36px;
      /* evita que el logo crezca o se encoja */
  }

  .marca span {
      font-weight: 600
  }

  /* la barra del buscador aunque no funciona */
  .buscador {
      flex: 1 1 420px;
      /* crece y encoge para ocupar espacio */
      max-width: 620px;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 12px;
  }

  .buscador input {
      width: 100%;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: #fff;
      outline: none;
      font-size: 14px;
  }

  .acci {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-left: auto;
  }

  .boton {
      padding: 8px 12px;
      border-radius: 999px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-weight: 600;
      text-decoration: none;
      color: inherit;
  }

  .boton.primary {
      background: var(--accent);
      /* botón destacado */
      color: white;
      padding: 8px 14px;
  }

  .boton:hover {
      scale: 1.10;
  }

  /* .main usa el grid para el contenido y el sidebar */
  .main {
      max-width: var(--max-width);
      margin: 18px auto;
      display: grid;
      grid-template-columns: 220px 1fr;
      /* sidebar fijo y el contenido será flexible */
      gap: 20px;
      padding: 0 20px;
  }

  /* RECUERDA aqui modificamos el sidebar*/
  nav.lado {
      position: sticky;
      /* sidebar se queda visible mientras scrollean pa arriba o abajo (hasta su contenedor) */
      top: 76px;
      /* separacion del header */
      height: calc(100vh - 96px);
      /* esto ocupa la altura que sobra*/
      overflow: auto;
      /* permite hacer scroll dentro del sidebar si hiciera falta todavía nada porque es pequeño*/
      padding: 12px;
  }

  .cate {
      display: inline-flex;
      /*contenedor flexible que hace de elemento en línea ocupando
             solo el espacio necesario para su contenido */
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      margin: 6px 6px 6px 0;
      background: var(--card-bg);
      border-radius: 999px;
      font-size: 13px;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
  }

  .cate:hover {
      scale: 1.10;
  }

  .feed {
      padding: 6px
  }

  /* con column-count distribuimos los pines en columnas más fluidas */
  /* .masonry{
            column-count: 3;  
            column-gap: var(--gap);
        } */

  /* Cada pin se muestra como una tarjeta que evita partirse entre columnas */
  .pin {
      display: inline-block;
      /* necesario para funcionar dentro de column-layout */
      width: 260px;
      margin: 0 0 var(--gap);
      background: var(--card-bg);
      border-radius: var(--radius);
      overflow: hidden;
      /* recorta contenido que sobresalga */
      break-inside: avoid;
      /* evita que la tarjeta se parta entre columnas */
      position: relative;
      box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
      text-decoration: none;
      color: inherit;
      height: 300px;
  }

  .pin img {
      display: block;
      /* hace que ese elemento se comporte como un bloque o sea 
            ocupará todo el ancho disponible del contenedor padre y comenzará en una nueva línea*/
      width: 100%;
      height: auto;
  }

  /* esto es para el avatar y el título */
  .pin .meta {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
  }

  .pin .left {
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: auto;
  }

  .avatar {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      flex: 0 0 36px;
      border: 2px solid rgba(255, 255, 255, 0.9);
      overflow: hidden;
      /* esconde cualquier contenido que se extienda más allá del limite */
  }

  .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .pin .title {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.45));
      color: white;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 13px;
      max-width: 70%;
  }

  .pin:hover {
      scale: 1.05;
      /* esto hace que se expandan los pines cuando te pones sobre ellos */
  }

  footer {
      max-width: var(--max-width);
      margin: 28px auto 80px;
      padding: 0 20px;
      color: var(--muted);
      /* utiliza una variable personalidad llamada --muted que
            recupera el valor asignado a la variable personalizada*/
      font-size: 13px;
  }

  footer img {
      width: 40px;
  }