/* ==========================================================
   nosotros.css — Historia, equipo y razones para elegirnos
   ========================================================== */

   .nosotros__historia {
    max-width: 62ch;
    margin: 0 auto var(--espacio-6);
    text-align: center;
    font-size: var(--texto-lg);
  }
  
  /* ----- Equipo ----- */
  .equipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-8);
    padding: 0;
    list-style: none;
  }
  
  .equipo__persona {
    display: grid;
    justify-items: center;
    gap: var(--espacio-1);
    padding: var(--espacio-3);
    text-align: center;
  }
  
  /* Inicial dentro de un nodo, como en el logo */
  .equipo__inicial {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 2px solid var(--color-acento);
    border-radius: 50%;
    font-size: var(--texto-lg);
    font-weight: var(--peso-fuerte);
    color: var(--color-acento);
  }
  
  .equipo__nombre {
    margin: 0;
    font-size: var(--texto-base);
    font-weight: var(--peso-fuerte);
  }
  
  .equipo__rol {
    margin: 0;
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
  }
  
  /* ----- Razones para elegirnos ----- */
  .razones {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: var(--espacio-4) 0 0;
    border-top: 1px solid var(--color-borde);
    list-style: none;
  }
  
  .razon__titulo {
    margin: 0 0 0.25rem;
    font-size: var(--texto-base);
    font-weight: var(--peso-fuerte);
    color: var(--color-acento);
  }
  
  .razon__texto {
    margin: 0;
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
  }
  
  @media (min-width: 900px) {
    .razones {
      grid-template-columns: repeat(4, 1fr);
    }
  }